/* ============================================================ PMsquare Design System — canonical brand stylesheet ------------------------------------------------------------ ONE source of truth for the PMsquare look: navy + orange + ice, Poppins + IBM Plex Mono, the asymmetric corner radius, and the ice-wash / gridline / ghost-corner motifs. Reconciled from ai-readiness-deck.html (flagship) and the older enablement/brand.css, which had drifted. The DECK values win. Where slides and print sheets genuinely need a different scale (radius/shadow), that is expressed as the documented `.compact` modifier below — not as a second, forked stylesheet. Works for: full-screen slides, printable handouts, one-pagers, web pages, dashboards. Drop this in, use the classes, done. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap'); :root{ /* --- Core palette --- */ --navy:#253A67; /* primary ink + brand navy */ --navy-deep:#07132D; /* darkest — full-bleed dark sections */ --navy-deep-2:#0B1B3D; /* dark panels / "hot" cards */ --orange:#FF8500; /* primary accent (kickers, emphasis) */ --amber:#FEAC0D; /* secondary accent / gradient partner */ --azure:#0A74D8; /* link / data blue */ --sky:#1D8DF7; /* lighter data blue */ --ice:#E0F0FF; /* wash top */ --ice-2:#F1FBFF; /* softer wash / tinted panels */ --paper:#FFFFFF; /* --- Ink on light --- */ --ink:#253A67; --ink-dim:rgba(37,58,103,.74); --ink-muted:rgba(37,58,103,.48); --ink-ghost:rgba(37,58,103,.12); --line:rgba(37,58,103,.14); --line-soft:rgba(37,58,103,.10); /* --- Ink on dark (navy sections) --- */ --lite:#F2F7FF; --lite-dim:rgba(242,247,255,.66); --lite-muted:rgba(242,247,255,.38); --lite-ghost:rgba(242,247,255,.12); /* --- Type --- */ --font:'Poppins',sans-serif; --mono:'IBM Plex Mono',monospace; /* --- Signature geometry --- */ --r:0 20px 0 20px; /* signature asymmetric radius — FEATURE on cards / panels / callouts */ --r-sm:0 12px 0 12px; /* smaller signature — medium containers, buttons, the rail marker */ --r-min:6px; /* calm symmetric radius — chips, tags, markers: the smallest repeated bits */ --shadow:0 18px 50px rgba(37,58,103,.10); --ease-out-expo:cubic-bezier(.16,1,.3,1); } /* Compact scale — for print sheets / dense handouts / smaller cards. Add class="compact" to (or any container) to dial the radius + shadow down to page scale. Same system, one knob. */ .compact{ --r:0 16px 0 16px; --r-sm:0 10px 0 10px; --shadow:0 10px 30px rgba(37,58,103,.10); } /* ============================================================ BASE ============================================================ */ *{box-sizing:border-box;margin:0;padding:0} html,body{ background:#e9eef5;color:var(--ink);font-family:var(--font); -webkit-print-color-adjust:exact;print-color-adjust:exact; } strong{font-weight:700;color:var(--navy)} em{font-style:normal;color:var(--ink-dim)} .mono{font-family:var(--mono)} /* ============================================================ DECORATIVE LAYERS (position:absolute inside a positioned box) .corner-shape hangs outside its box, so something has to clip it. Clip it with .decor — NEVER with `overflow:hidden` on the section or page wrapper. `overflow:hidden` on ANY ancestor silently disables `position:sticky` on everything inside it, so the tabbed layout's Contents rail stops pinning and scrolls away with the page. There is no console warning; it just quietly stops working. .decor wraps the wash / gridlines / corner-shape and clips them in isolation, leaving the sticky chain intact.

… .layout / .rail live here …

============================================================ */ .decor{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0} .wash{position:absolute;inset:0;background:linear-gradient(180deg,#E0F0FF 0%,#FFFFFF 46%);pointer-events:none;z-index:0} .wash-soft{position:absolute;inset:0;background:linear-gradient(180deg,#F1FBFF 0%,#FFFFFF 38%);pointer-events:none;z-index:0} .gridlines{ position:absolute;inset:0;pointer-events:none;opacity:.5;z-index:0; background-image:linear-gradient(rgba(37,58,103,.035) 1px,transparent 1px), linear-gradient(90deg,rgba(37,58,103,.035) 1px,transparent 1px); background-size:96px 96px; } .corner-shape{ position:absolute;right:-140px;top:-140px;width:560px;height:560px; border-radius:0 180px 0 180px;pointer-events:none;z-index:0; background:linear-gradient(135deg,rgba(10,116,216,.08),rgba(29,141,247,.02)); } .corner-shape.bl{right:auto;top:auto;left:-160px;bottom:-160px;transform:rotate(180deg)} /* keep content above decorative layers */ .layer-content{position:relative;z-index:1} /* ============================================================ TYPE SCALE ============================================================ */ .kicker{ /* orange eyebrow */ font-size:16px;font-weight:700;color:var(--orange); letter-spacing:4.8px;text-transform:uppercase;margin-bottom:26px; } h1,.title{font-size:68px;font-weight:600;color:var(--navy);line-height:1.08;letter-spacing:-2px} h2.sec{ /* section header w/ orange square */ font-size:15px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase; color:var(--navy);margin:0 0 12px;display:flex;align-items:center;gap:10px; } h2.sec::before{content:"";width:14px;height:14px;border-radius:0 6px 0 6px;background:var(--orange);flex:none} .body,p.body{font-size:25px;font-weight:400;color:var(--ink-dim);line-height:1.62;max-width:1180px} .body strong{color:var(--navy);font-weight:600} .grad{ /* amber→orange gradient-fill text */ background:linear-gradient(294.92deg,#FEAC0D 20%,#FF8500 75%); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; } .azure-w{color:var(--azure)} /* --- Dark-section overrides: wrap a dark region in .on-dark --- */ .on-dark{color:var(--lite)} .on-dark h1,.on-dark .title,.on-dark h2.sec{color:var(--lite)} .on-dark .body{color:var(--lite-dim)} .on-dark .body strong,.on-dark strong{color:var(--lite)} /* --- Logo (recolorable) --- Inline the sprite once (paths live in logo.svg): Then place anywhere: It inherits `color`, so it flips automatically inside .on-dark / .card.hot. For a plain on light backgrounds, logo.svg renders navy on its own. */ .logo{display:block;width:132px;height:36px;color:var(--navy)} .logo.lg{width:168px;height:46px} .on-dark .logo,.card.hot .logo{color:var(--lite)} /* ============================================================ COMPONENTS ============================================================ */ /* Card — the workhorse surface */ .card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:36px 40px;box-shadow:var(--shadow)} .card.hot{background:var(--navy-deep-2);color:var(--lite);border-color:transparent} .card.hot strong{color:#fff} .card-label{font-size:13px;font-weight:700;letter-spacing:2.6px;text-transform:uppercase;color:var(--ink-muted);margin-bottom:14px} .card.hot .card-label{color:var(--amber)} /* Chip / pill */ .chip{ display:inline-flex;align-items:center;gap:8px;font-size:16px;font-weight:500; padding:10px 20px;border-radius:var(--r-min);border:1px solid var(--line); color:var(--ink-dim);background:#fff; } .chip.mono{font-family:var(--mono);font-size:15px} .chip.solid{background:var(--ice);border-color:rgba(10,116,216,.22);color:var(--navy);border-radius:999px;font-weight:600} /* Stat block — big number + label + source */ .stat{display:flex;flex-direction:column} .stat .n{font-weight:800;font-size:104px;letter-spacing:-4px;line-height:1;margin-bottom:20px;color:var(--azure)} .stat .n.orange{color:var(--orange)} .stat .n.navy{color:var(--navy)} .stat .t{font-size:22px;font-weight:500;color:var(--ink-dim);line-height:1.5} .stat .src{margin-top:14px;font-size:14px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-muted)} /* Callout — orange left border (a.k.a. pill-note / caution) */ .callout{ border-left:5px solid var(--orange);background:#FFF6EB;border-radius:0 var(--r-sm) var(--r-sm) 0; padding:22px 30px;font-size:20px;font-weight:500;color:var(--navy);line-height:1.5; } .callout.info{border-left-color:var(--azure);background:var(--ice-2);color:var(--ink-dim)} /* Micro-tags */ .tag-orange{color:var(--orange);font-weight:700;text-transform:uppercase;letter-spacing:1.5px;font-size:11px} .tag-navy{color:var(--navy);font-weight:700;text-transform:uppercase;letter-spacing:1.5px;font-size:11px} .tag-solid{display:inline-block;font-size:13px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:#fff;background:var(--navy);padding:8px 18px;border-radius:var(--r-min)} /* Layout helpers */ .grid{display:grid;gap:24px} .grid>*{min-width:0} /* overflow safety: let grid tracks shrink so wide content scrolls (see .scroll) instead of breaking the layout */ .g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:1fr 1fr 1fr} .rowlist{display:flex;flex-direction:column;gap:12px} /* Wide-content scroll box — wrap tables /

 / diagrams so they scroll in
   their own cell. PREFER STACKING wide, text-heavy tables vertically over
   side-by-side; reach for this only as a narrow-screen fallback. */
.scroll{overflow-x:auto;min-width:0;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);background:var(--paper)}

/* Table */
table.tbl{width:100%;border-collapse:collapse}
table.tbl th{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-muted);text-align:left;padding:8px 10px;border-bottom:1.5px solid var(--line)}
table.tbl td{font-size:15px;color:var(--ink-dim);padding:11px 10px;border-bottom:1px solid var(--line-soft);vertical-align:top;line-height:1.45}
table.tbl td strong{color:var(--navy)}

/* ============================================================
   TABBED LAYOUT — left-rail section navigator
   OPTIONAL. Recommended for long documents / web artifacts (5+ sections):
   it turns a long scroll into navigable panels with a sticky "Contents" rail.
   Markup:
     
       
         Contents
                    
         
         
            …
         
       
       
         … …
       
     
   On desktop it's a sticky vertical rail; under 900px it collapses to a compact
   STICKY DROPDOWN (the .railtoggle button opens .railnav as a menu) so the nav
   stays reachable mid-read without scrolling to the top, and doesn't eat the
   screen. Wire with the small toggle script in style-guide.html: it sets .active
   on the panel + aria-selected on the .railitem, syncs the toggle label, opens/
   closes the menu (.rail.open), supports arrow-key nav, and parks the viewport
   (see below).

   THREE THINGS THAT MAKE THIS PATTERN ACTUALLY PLEASANT TO READ:

   1. NO `overflow:hidden` ON ANY ANCESTOR. It kills `position:sticky` silently
      and the rail scrolls away. Clip decorative layers with .decor instead.
   2. PARK AT THE PANEL, NOT THE PAGE TOP. On selection, scroll to the top of
      the .layout element (minus the rail's sticky offset), never to y=0 — that
      would drag the masthead back into view on every click and bury the panel
      below the fold. The script in style-guide.html does this; keep it.
   3. LET THE RAIL SCROLL ITSELF. Past ~12 sections the rail outgrows a short
      viewport and its last items become unreachable, so it carries
      max-height + overflow-y (below). On mobile the sticky dropdown needs an
      OPAQUE background, or panel content shows through it while scrolling.

   Keep the page masthead at document scale, not slide scale. A 60px+ hero
   title plus a 25px standfirst eats the first screen of every panel; ~44px max
   with a 16.5px standfirst leaves real content above the fold.
   ============================================================ */
.layout{display:grid;grid-template-columns:236px minmax(0,1fr);gap:46px;align-items:start}
.rail{position:sticky;top:20px;align-self:start;max-height:calc(100vh - 34px);overflow-y:auto;scrollbar-width:thin}
.railtoggle{display:none}   /* mobile-only dropdown toggle (shown under 900px) */
.railhead{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--ink-muted);display:flex;align-items:center;gap:9px;margin:0 0 14px 14px}
.railhead::before{content:"";width:11px;height:11px;border-radius:var(--r-sm);background:var(--orange);flex:none} /* one deliberate asymmetric accent */
.railnav{display:flex;flex-direction:column;gap:1px;border-left:1px solid var(--line)}
.railitem{appearance:none;-webkit-appearance:none;text-align:left;width:100%;background:transparent;border:none;border-left:2px solid transparent;margin-left:-1px;padding:10px 15px;color:var(--ink-dim);cursor:pointer;font-family:var(--font);font-size:14.5px;font-weight:500;line-height:1.3;display:flex;align-items:baseline;gap:11px;transition:color .15s,background .15s,border-color .15s}
.railitem .idx{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--ink-muted)}
.railitem:hover:not([aria-selected="true"]){color:var(--navy)}
.railitem[aria-selected="true"]{color:var(--navy);font-weight:600;border-left-color:var(--orange);background:var(--ice-2)}
.railitem[aria-selected="true"] .idx{color:var(--orange)}
.railitem:focus-visible{outline:2px solid var(--orange);outline-offset:-2px}
.content{min-width:0}
.panel{display:none}.panel.active{display:block}
/* Panel header — the first thing in each .panel. Numbering the panels here
   (matching the rail's .idx) is what tells a reader where they landed after
   the viewport parks. Keep it tighter than the page masthead. */
.panelhead{display:flex;flex-direction:column;gap:12px;padding-bottom:20px;margin-bottom:28px;border-bottom:1px solid var(--line)}
.panelnum{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:2.6px;text-transform:uppercase;color:var(--orange)}
.panelhead h2:not(.sec),.panelhead .panel-title{font-size:clamp(25px,3vw,33px);font-weight:600;color:var(--navy);letter-spacing:-.8px;line-height:1.14;text-wrap:balance}
.panelhead .lede{font-size:17px;line-height:1.58;color:var(--ink-dim);max-width:70ch}
@media (prefers-reduced-motion:no-preference){.panel.active{animation:pm-fadeup .4s var(--ease-out-expo)}}
@keyframes pm-fadeup{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (max-width:900px){
  .layout{grid-template-columns:1fr;gap:16px}
  /* sticky so the nav is always reachable; opaque so panel content does not
     show through it while scrolling; max-height reset because the dropdown
     scrolls itself, not the rail */
  .rail{position:sticky;top:0;z-index:40;align-self:auto;max-height:none;overflow:visible;padding:8px 0;background:var(--paper)}
  .railhead{display:none}
  .railtoggle{display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r-sm);padding:12px 16px;cursor:pointer;box-shadow:0 8px 20px rgba(37,58,103,.14);font-family:var(--font);color:var(--navy);font-weight:600;font-size:15px}
  .railtoggle .cur{display:flex;align-items:baseline;gap:9px;min-width:0;white-space:nowrap;overflow:hidden}
  .railtoggle .cur .idx{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--orange)}
  .railtoggle .chev{color:var(--orange);font-size:12px;transition:transform .2s;flex:none}
  .rail.open .railtoggle{border-color:var(--azure)}
  .rail.open .railtoggle .chev{transform:rotate(180deg)}
  .railnav{display:none;position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:41;flex-direction:column;gap:2px;border-left:none;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:0 24px 48px rgba(37,58,103,.24);padding:8px;max-height:72vh;overflow-y:auto}
  .rail.open .railnav{display:flex}
  .railitem{border-left:none;border-radius:var(--r-min);margin-left:0;padding:12px 14px}
  .railitem[aria-selected="true"]{background:var(--ice-2);color:var(--navy)}
  .railitem[aria-selected="true"] .idx{color:var(--orange)}
}

/* ============================================================
   REVEAL ANIMATION  (add .reveal, then .visible on the parent
   when it enters view; stagger with .d1..d8)
   ============================================================ */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease-out-expo),transform .7s var(--ease-out-expo)}
.visible .reveal,.reveal.visible{opacity:1;transform:translateY(0)}
.visible .reveal.d1{transition-delay:.08s}.visible .reveal.d2{transition-delay:.18s}
.visible .reveal.d3{transition-delay:.28s}.visible .reveal.d4{transition-delay:.38s}
.visible .reveal.d5{transition-delay:.48s}.visible .reveal.d6{transition-delay:.58s}
.visible .reveal.d7{transition-delay:.70s}.visible .reveal.d8{transition-delay:.82s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.2s!important}
}

/* ============================================================
   PRINT
   ============================================================ */
@media print{
  html,body{background:#fff}
  .no-print{display:none!important}
  .grad{background:none!important;-webkit-text-fill-color:var(--orange)!important;color:var(--orange)!important}
}