/* The browser's own [hidden] rule is display:none with effectively no
   specificity, so ANY author rule that sets display beats it. .btn sets
   display:inline-flex, which meant a button with the hidden attribute stayed on
   screen and fully clickable while el.hidden read true.

   That is how ProxiMap's wizard shipped a dead Next button on its last step:
   wizShow() set wizNext.hidden = true, the property was true, and the button was
   still painted. Clicking it ran Math.min(WIZ_MAX, step+1), which redrew the
   same page. It looked stuck because it was. "Open the map" was likewise visible
   from step 1.

   Testing el.hidden cannot catch this. Only the computed display can. Fixing it
   at the root so no future component inherits the same trap. */
[hidden]{display:none!important}

/* The signed-in shell reuses .nav-wrap / .brand / .nav-user wholesale so it
   cannot drift from the marketing header. These two are the only pieces the
   app header needs that the marketing one has no use for: the tool's own name
   beside the brand, and a plain route back to the dashboard. */
.shell-tool{font-weight:700;font-size:14px;color:#46626E;padding-left:.7rem;margin-left:.7rem;border-left:1px solid #dfe6ec;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34ch}
.shell-back{font-weight:600}
/* The app footer already existed on 17 pages as a bare "Powered by" line. These
   two carry the legal links the marketing footer has always had and the signed
   in surface never did. */
/* .app-foot was defined inline in each of the 17 app pages that had a footer,
   which is why the other 19 never got one: there was nothing to inherit. Same
   rule as the header, hoisted here once so an injected footer lands styled.
   Matches the existing declaration exactly so the 17 do not shift. */
.app-foot{background:#0c1a27;color:rgba(255,255,255,.6);text-align:center;padding:18px;font-size:13px}
.app-foot a{color:rgba(255,255,255,.82);text-decoration:none;font-weight:600}
.app-foot a:hover{color:#fff;text-decoration:underline}
.foot-sep{opacity:.4;padding:0 .15rem}
/* This footer is near black, so the text has to be light. #46626E is the token
   for muted text on WHITE and lands at 2.71:1 here, which is dark on dark and
   effectively invisible. 0.72 white gives 9.52:1 on this background. */
.foot-note{margin-top:.35rem;font-size:12px;color:rgba(255,255,255,.72);max-width:70ch;margin-left:auto;margin-right:auto}
@media(max-width:760px){.shell-tool{display:none}}

:root{--btn-top:#277BA4;--blue:#2E8FBF;--blue-text:#287CA6;--blue2:#1e6e94;--cyan:#1FBCEB;--navy:#1E2D3A;--slate:#334155;--muted:#64748b;--line:rgba(31,188,235,.22);--red:#BD2D3A;--ink:#1E2D3A;--cerulean:#2E8FBF;--emerald:#1A8F5A;--amber:#B36A00;--cloud:#F5F6F7}
/* ===== PRICING SWITCHES | to launch a tier, flip its price line to inline AND its soon line to none ===== */
.price-fieldplus{display:none}
.soon-fieldplus{display:inline}
.price-works{display:inline}
.soon-works{display:none}
.price-book{display:none}
.soon-book{display:inline}
.price-med{display:inline}
.soon-med{display:none}
.price-per{font-size:.62em;font-weight:700;opacity:.7}
*{box-sizing:border-box}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:var(--navy);line-height:1.6;background:radial-gradient(circle at top left,rgba(31,188,235,.16),transparent 34rem),linear-gradient(180deg,#f8fdff,#eef8fc 46%,#f8fbfd)}a{color:inherit}.nav-wrap{position:sticky;top:0;z-index:50;backdrop-filter:blur(18px);background:rgba(255,255,255,.88);border-bottom:1px solid rgba(46,143,191,.16);box-shadow:0 10px 30px rgba(30,45,58,.06)}nav{max-width:1180px;margin:auto;padding:.85rem 1.25rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none}.brand img{width:42px;height:42px;object-fit:contain}.brand-wordmark{font-size:1.3rem;font-weight:850;letter-spacing:-.04em}.brand-wordmark .proxi{color:var(--navy)}.brand-wordmark .suite{color:var(--blue)}.nav-links{display:flex;gap:.35rem;flex-wrap:wrap}.nav-links a{text-decoration:none;color:var(--slate);font-weight:750;font-size:14px;padding:.65rem .85rem;border-radius:999px}.nav-links a:hover,.nav-links a.active{color:var(--blue);background:rgba(31,188,235,.10)}header.hero{color:white;background:radial-gradient(circle at 72% 22%,rgba(31,188,235,.38),transparent 19rem),linear-gradient(135deg,#061421,#082237 46%,#2E8FBF 145%)}.hero-inner{max-width:1180px;margin:auto;padding:1.1rem 1.25rem 1.2rem}.eyebrow{display:inline-flex;gap:.45rem;align-items:center;color:var(--cyan);font-weight:800;font-size:12px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:.2rem}.eyebrow:before{content:none}.hero-title-row{display:flex;align-items:center;gap:clamp(.9rem,2.4vw,1.5rem);margin:.1rem 0 .6rem}.hero-title-mark{display:none}h1{margin:0;font-size:clamp(2.4rem,6vw,4.4rem);line-height:1.12;letter-spacing:-.03em}.suite{color:var(--cyan)}.hero p{max-width:850px;margin:0;color:rgba(237,250,255,.88);font-size:clamp(1.05rem,2vw,1.28rem)}.hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:.85rem}/* PRIMARY BUTTON CONTRAST.

   White on --blue #2E8FBF measures 3.62 against a 4.5 bar. A previous pass
   darkened the whole ramp to 6.41-7.71 and was rejected: they looked better
   before, there was no border, and the gradient ended the same colour it
   started so it read pointless. All three of those were fair.

   This is the smallest change that actually passes. #277BA4 is the same blue at
   40 percent lightness instead of 46, measures 4.71, and is close enough to the
   original that it reads as the same button. The second stop stays --blue2
   #1e6e94, which is visibly darker than the first, so the gradient goes
   somewhere instead of ending where it began.

   The border is the part that was actually asked for: a light hairline plus an
   inset highlight, so the button has an edge on a pale background rather than
   floating. --btn-top lets a themed page override the top stop without
   restating the whole rule.

   A light gradient with white text cannot reach 4.5:1. Something had to give,
   and six points of lightness is the least of the available options. */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:.85rem 1.15rem;border-radius:999px;text-decoration:none;font-weight:850;border:1px solid transparent;text-align:center}.btn-primary{color:white;background:linear-gradient(135deg,var(--btn-top),var(--blue2));border:1px solid rgba(255,255,255,.34);box-shadow:0 10px 24px rgba(46,143,191,.18),inset 0 1px 0 rgba(255,255,255,.22)}.btn-secondary{color:#e6faff;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.20)}.btn-dark{color:white;background:var(--navy)}.btn-blue{color:white;background:linear-gradient(135deg,var(--btn-top),var(--blue2));border:1px solid rgba(255,255,255,.34);box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}.container{max-width:1180px;margin:auto;padding:3rem 1.25rem}.section-header{max-width:900px;margin-bottom:2rem}.section-kicker{color:var(--blue);font-size:13px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;margin-bottom:.45rem}.section-title{margin:0;color:var(--navy);font-size:clamp(2rem,4vw,3.2rem);line-height:1.06;letter-spacing:-.03em}.section-desc{margin:.95rem 0 0;color:var(--muted);font-size:18px}.grid-bundles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem}.grid-tools,.content-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem}.content-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.card{background:rgba(255,255,255,.92);border:1px solid rgba(46,143,191,.14);border-radius:24px;overflow:hidden;box-shadow:0 22px 60px rgba(30,45,58,.08);display:flex;flex-direction:column}.card-media{background:linear-gradient(135deg,#1E2D3A,#0B3652);border-bottom:1px solid var(--line)}.card-media img{width:100%;height:auto;display:block;object-fit:contain}.card-content,.panel{padding:1.55rem;display:flex;flex-direction:column;flex:1}.card-title{margin:0 0 .6rem;font-size:1.32rem;line-height:1.16;letter-spacing:-.035em}.card-desc,.panel p{color:var(--muted);flex:1}.card .btn{width:100%}.feature-band,.wide-callout{margin-top:2rem;padding:1.4rem;border-radius:24px;color:white;background:linear-gradient(135deg,var(--navy),#0b3550 62%,var(--blue));box-shadow:0 24px 60px rgba(30,45,58,.16)}.feature-band{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.metric{padding:1rem;border-radius:18px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12)}.metric strong{display:block;font-size:1.45rem;color:#dff9ff}.metric span,.wide-callout p{color:rgba(237,250,255,.9)}.product-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:1.6rem;align-items:start}.product-image-card img{width:100%;height:auto;display:block;object-fit:contain}.product-cta-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem;margin-top:1.35rem}.product-cta-row .btn{width:100%;border-radius:16px}.info-note,.contact-card{margin-top:1.25rem;padding:1rem 1.1rem;border-radius:18px;background:linear-gradient(180deg,#f8fdff,#eef8fc);border:1px solid rgba(46,143,191,.18);color:var(--slate);font-weight:650;box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}.info-note strong,.contact-card strong{display:block;color:var(--navy);font-size:14px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:.25rem}.info-note span,.contact-card span{display:block;color:var(--muted);font-weight:500}.email-link{color:var(--blue);font-weight:850;text-decoration:none}.email-link:hover{text-decoration:underline}.list{display:grid;gap:.85rem;margin:0;padding:0;list-style:none}.list li{position:relative;padding-left:1.65rem;color:var(--muted)}.list li:before{content:"";position:absolute;left:0;top:.62rem;width:.55rem;height:.55rem;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--cyan))}.long-copy{display:grid;gap:1rem}.long-copy p{margin:0;color:var(--muted)}.faq-list{display:grid;gap:1rem}details.card{padding:1.35rem 1.5rem}details summary{cursor:pointer;font-weight:900}details p{color:var(--muted);margin:.9rem 0 0}.spec-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}.spec{padding:1rem;border-radius:18px;background:rgba(46,143,191,.08);border:1px solid rgba(46,143,191,.15)}.spec strong{display:block;font-size:18px;color:var(--navy)}.spec span{color:var(--muted);font-size:14px}.demo-badge{display:inline-flex;align-items:center;width:max-content;margin-top:1rem;padding:.45rem .7rem;border-radius:999px;background:#fff1f2;border:1px solid rgba(189,45,58,.2);color:#BD2D3A;font-weight:900;font-size:12px;text-transform:uppercase;letter-spacing:.08em}footer{background:var(--navy);color:rgba(237,250,255,.84);border-top:4px solid var(--blue)}.footer-inner{max-width:1180px;margin:auto;padding:1.5rem 1.25rem;display:flex;flex-direction:column;align-items:center;gap:.85rem;text-align:center}.footer-brand{display:flex;align-items:center;gap:.6rem;font-weight:850;color:white}.footer-brand img{width:26px;height:26px;object-fit:contain}@media(max-width:900px){.product-layout,.grid-bundles,.grid-tools,.content-grid,.content-grid.two,.feature-band,.spec-grid{grid-template-columns:1fr}nav{align-items:flex-start;flex-direction:column}.nav-links{justify-content:flex-start}.hero-title-mark{width:68px;height:68px}.product-cta-row{grid-template-columns:1fr}}@media(max-width:520px){h1{font-size:clamp(2.45rem,14vw,3.2rem)}.hero-actions .btn{width:100%}.container{padding:3.3rem 1rem}.nav-links a{font-size:13px;padding:.52rem .62rem}}

/* Skip link. WCAG 2.4.1 Bypass Blocks, Level A.

   Every marketing page carries four nav landmarks and 87 clickables, so a
   keyboard user crossed the whole megamenu before reaching content on every
   page. This is the first focusable element in the document and the only one
   before the header.

   It is moved off-screen rather than display:none or visibility:hidden, both of
   which take an element out of the focus order entirely and would make this a
   link nobody can ever reach. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;padding:.75rem 1.1rem;border-radius:0 0 12px 0;
  background:var(--navy);color:#fff;font-weight:850;text-decoration:none}
.skip-link:focus{left:0}
.skip-link:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}

/* Small bold text on white uses --blue-text, not --blue.

   Measured: --blue at #2E8FBF scores 3.62 against white and the section kicker
   is 13px at 900 weight, which is nowhere near WCAG large text, so 4.5 is the
   bar and it missed. Every theme blue was checked; three of the six failed.

   --blue itself is deliberately unchanged. It drives the hero gradient, the
   footer rule and the list bullets, where it sits on dark or is not text at all,
   and darkening it to fix a caption would have restyled the site to solve a
   typography problem. The twin is the smallest change that makes the text
   readable and leaves the brand alone. */
.section-kicker,.email-link{color:var(--blue-text)}

/* ── Button contrast, revised 2026-07-31 ────────────────────────────────────

   SUPERSEDES the 2026-07-30 pass, which darkened every primary button and was
   rejected on sight. It was also solving a problem that did not exist.

   THE MEASUREMENT WAS WRONG. The 30 July numbers were:

       fieldplus 1.98   base 2.22   match 2.13   book 2.58   map 2.54   med 3.92

   Those are not the buttons. Those are the --cyan tokens, seven for seven:
   #5BC4F0 is 1.98, #1FBCEB is 2.22, #36C98A is 2.13, #82A7B6 is 2.58,
   #22B3BF is 2.54, #D6584A is 3.92. Cyan appears in the eyebrow, the list
   bullets and the hero accents. It appears in no button anywhere in this file.
   The buttons use --blue and --blue2, and white against the LIGHT stop of each
   theme actually measures:

       fieldplus 3.62   base 3.62   match 4.10   book 4.28   map 4.95   med 5.60

   THE REAL FIX, and it is a font size. The buttons are 850 weight, which is
   bold, and WCAG large text starts at 14pt bold, which is 18.66px. .btn carried
   no font-size at all, so it inherited body 16px and sat just under the line.
   At 20px it qualifies as large text and the bar drops from 4.5:1 to 3:1.
   20 rather than 19 because the body type scale in d95 is seven steps ending
   at 18, and 18 is BELOW the 18.66 threshold so it would not have helped. That
   test already exempts anything at 20 or above as a deliberate display size, so
   a control sized for a thumb sits outside the body scale without widening it.
   Every theme clears 3:1 at its original brand colour with margin to spare,
   lowest 3.62. So the colours go back to what they were and nothing is darkened.

   1.4.11 non-text contrast, the button SHAPE against the page, is also already
   satisfied: measured against the page background the same light stops run 3.53
   to 5.46. The white hairline below is therefore for definition, which is what
   was actually asked for, not for compliance.

   WHY NOT bare .btn{font-size:20px}. Four pages use `btn sm` without loading
   app/css/proxivault.css, which is the only place .btn.sm was ever defined:
   pricing.html, proxi-report-builder, proxi-territory-map and review-studio.
   On those pages .sm currently does nothing, so a base rule would have enlarged
   small buttons on the pricing page. .btn.sm is defined here now, matching the
   vault values, so small stays small everywhere and the modifier finally works
   where it was already being written.

   WHAT IS NOT DONE. --blue and --blue2 are still untouched as tokens, with one
   exception noted at .theme-fieldplus: its --blue2 was identical to its --blue,
   so that gradient genuinely started and ended on the same colour. */
.btn{font-size:20px}
.btn.sm{padding:6px 12px;font-size:12px;border-radius:8px;min-height:0}
.btn-primary,.btn-blue{border-color:rgba(255,255,255,.30)}
.btn-dark,.btn-emerald{border-color:rgba(255,255,255,.22)}

.example-card{background:rgba(255,255,255,.92);border:1px solid rgba(46,143,191,.14);border-radius:24px;overflow:hidden;box-shadow:0 22px 60px rgba(30,45,58,.08)}
.example-header{padding:1.55rem 1.55rem .6rem}
.example-peek{position:relative;max-height:200px;overflow:hidden;transition:max-height .5s ease}
.example-peek::after{content:"";position:absolute;bottom:0;left:0;right:0;height:110px;background:linear-gradient(transparent,rgba(255,255,255,1));pointer-events:none;transition:opacity .4s ease}
.example-peek.expanded{max-height:none}
.example-peek.expanded::after{opacity:0}
.example-peek img{width:100%;display:block}
.example-footer{padding:.85rem 1.55rem 1.55rem;text-align:center}
.example-footer button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:.85rem 1.15rem;border-radius:999px;font-weight:850;border:1px solid transparent;text-align:center;cursor:pointer;font-family:inherit;font-size:inherit;color:white;background:linear-gradient(135deg,var(--blue),var(--blue2))}
.example-note{margin:.45rem 0 0;color:var(--muted);font-size:14px;font-weight:500}

.carousel-wrap{position:relative}
.carousel-viewport{overflow:hidden;width:100%}
.carousel-track{display:flex;transition:transform .4s ease}
.carousel-slide{width:100%;min-width:100%;flex:0 0 100%}
.carousel-slide img{width:100%;display:block}
.carousel-controls{display:flex;align-items:center;justify-content:center;gap:.8rem;padding:.85rem 1.55rem}
.carousel-btn{width:40px;height:40px;border-radius:50%;border:1px solid rgba(46,143,191,.2);background:white;color:var(--navy);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-weight:900;box-shadow:0 4px 12px rgba(30,45,58,.08);font-family:inherit;transition:background .2s}
.carousel-btn:hover{background:rgba(46,143,191,.08)}
.carousel-counter{font-weight:850;color:var(--navy);font-size:14px;min-width:3rem;text-align:center}
.carousel-label{color:var(--muted);font-size:13px;font-weight:650;text-align:center;padding:0 1.55rem .2rem}


/* ── breadcrumbs (left, with border pill) ── */
.breadcrumbs{display:inline-flex;align-items:center;gap:.3rem;margin-bottom:.9rem;
  font-size:12px;font-weight:700;letter-spacing:.02em;
  padding:.35rem .75rem;border:1px solid rgba(255,255,255,.22);border-radius:999px;
  background:rgba(255,255,255,.07)}
.breadcrumbs a{color:rgba(217,247,255,.65);text-decoration:none}
.breadcrumbs a:hover{color:rgba(217,247,255,.98)}
.bc-sep{color:rgba(217,247,255,.3);margin:0 .1rem}
.bc-current{color:rgba(255,255,255,.92)}

/* ── hero tagline ── */
.hero-tagline{font-size:clamp(1.1rem,2.6vw,1.75rem);font-weight:750;letter-spacing:-.03em;
  color:rgba(255,255,255,.88);margin:.1rem 0 .8rem;max-width:850px;line-height:1.2}

/* ── proxi brand name two-tone ── */

/* O2 and O4. The line colour, twice. --line is the brand colour for light
   surfaces; --line-on-dark is the only one the hero may use. Before this, 49
   hero wordmarks carried a raw hex inline, and the med red scored 2.90 against
   the hero mid-tone: below the 3.0 large-text floor, let alone 4.5. Ratios below
   are computed against the hero gradient's dark stops, which is where the
   wordmark actually sits. */
:root{--line:#2E8FBF;--line-on-dark:#69B5DB}                 /* field  8.2 / 7.1 */
.theme-med{--line:#BD372E;--line-on-dark:#E59A95}            /* med    8.3 / 7.3 */
.theme-ed{--line:#B36A00;--line-on-dark:#FA9400}             /* school 8.2 / 7.2 */
.theme-fieldplus{--line:#2E8FBF;--line-on-dark:#69B5DB}      /* field+ 8.2 / 7.1 */
.theme-match{--line:#1A8F5A;--line-on-dark:#9FE6C4}          /* match  13.1 / 11.4, green not purple */
/* ProxiMap. Built out 2026-07-27.

   Before this, theme-map held one rule against theme-match's fourteen, and
   proximap.html carried class="theme-match" on its body. So the mapping product
   rendered in ProxiMatch's GREEN: green hero, green buttons, green footer. Not a
   subtle drift, the whole page was the wrong product's colour.

   The palette mirrors theme-match's structure exactly, substituted to teal, so
   the two stay comparable and a future change to one is obvious in the other.
   Contrast computed, not eyeballed: the on-dark wordmark scores 8.55 and 7.49
   against the two hero stops, well past the 4.5 needed for normal text.

   One thing deliberately NOT changed. White on the light end of the primary
   button gradient scores 2.54 here, under the 3.0 large-text floor. Every
   existing theme is worse: field 2.22, match 2.13, med 2.24. That is a
   site-wide button decision across four themes, not something to fix in one and
   leave the other three inconsistent. Logged, not silently patched. */
.theme-map{--line:#0E7C86;--line-on-dark:#16C0D0}            /* map    8.6 / 7.5 */
.theme-map{--btn-top:#0E7C86;--blue:#0E7C86;--blue-text:#0E7C86;--blue2:#0a5d64;--cyan:#22B3BF;--line:rgba(14,124,134,.22)}
.theme-map header.hero{background:radial-gradient(circle at 72% 22%,rgba(34,179,191,.30),transparent 19rem),linear-gradient(135deg,#041315,#082226 46%,#0E7C86 150%)}
.theme-map .eyebrow{color:#16C0D0}
.theme-map .section-kicker{color:var(--blue-text)}
.theme-map .nav-links a:hover,.theme-map .nav-links a.active{color:var(--blue);background:rgba(14,124,134,.10)}
.theme-map .btn-primary{background:linear-gradient(135deg,var(--btn-top),var(--blue2));box-shadow:0 14px 32px rgba(14,124,134,.28)}
.theme-map .btn-dark{background:#0a2b2e}
.theme-map .list li:before{background:linear-gradient(135deg,#0E7C86,#22B3BF)}
.theme-map .feature-band,.theme-map .wide-callout{background:linear-gradient(135deg,#06161a,#0c343a 62%,#0E7C86)}
.theme-map .showcase{--accent:#0E7C86}
.theme-map .brand-wordmark .suite{color:#0E7C86}
.theme-map footer{border-top-color:#0E7C86;background:radial-gradient(circle at 50% 0%,rgba(14,124,134,.18),transparent 24rem),var(--navy)}
.theme-map .section-kicker,.theme-map .email-link,.theme-map .feature-copy .feature-tag{color:#0a5d64}
.theme-book{--line:#0E7C86;--line-on-dark:#16C0D0}
header.hero .pn-suffix{color:var(--line-on-dark) !important}

/* G3. There were three .pn-rest rules and two stray selectors ("footer" and
   "main" with no block), so which colour and weight won was source-order luck.
   One base rule, one override per surface, and nothing dangling. The second line
   stays block: it is the page name under the wordmark and that is deliberate. */
.pn-rest{display:block;font-size:.62em;font-weight:700;letter-spacing:-.05em;line-height:1.1;margin-top:.06em}
header.hero .pn-rest{color:rgba(255,255,255,.8)}
main .pn-rest{color:var(--muted);font-weight:650}
footer .pn-rest{color:rgba(237,250,255,.84)}

/* ── nav dropdown ── */
.nav-links{align-items:center}
.nav-item-group{position:relative;display:inline-flex;align-items:center}
.nav-item-group>a{display:inline-flex;align-items:center;gap:.25rem}
.nav-item-group>a::after{content:'▾';font-size:.65em;opacity:.6;line-height:1}
.nav-dropdown{position:absolute;top:calc(100% + .45rem);left:0;right:auto;min-width:230px;
  background:#fff;border:1px solid rgba(46,143,191,.2);border-radius:18px;
  box-shadow:0 10px 36px rgba(30,45,58,.14);padding:.45rem;
  display:none;flex-direction:column;z-index:300}
.nav-item-group:hover .nav-dropdown,
.nav-item-group:focus-within .nav-dropdown{display:flex}
.nav-dropdown a{padding:.52rem .85rem;border-radius:10px;font-size:13px;
  font-weight:700;color:var(--slate);text-decoration:none;white-space:nowrap}
.nav-dropdown a:hover{background:rgba(46,143,191,.08);color:var(--blue)}
.nav-dropdown-sep{height:1px;background:rgba(46,143,191,.14);margin:.3rem .2rem}
.nav-dropdown-free{color:var(--emerald)!important}
.nav-dropdown-bundle{color:var(--blue)!important;font-weight:700}
.nav-group-right .nav-dropdown{left:auto;right:0}

/* ── footer secondary nav ── */
.footer-links{display:flex;flex-direction:row;flex-wrap:wrap;gap:.3rem 1.25rem;justify-content:center}
.footer-links a{color:rgba(237,250,255,.78);text-decoration:none;font-size:13px;font-weight:600}

/* TOUCH TARGETS.
   Measured on a 390px viewport: eighteen footer links on every page were 21px
   tall. The WCAG minimum is 44, and the gap is not academic on a footer where
   the links sit a few pixels apart: Privacy, Terms and Refund policy are close
   enough that a thumb aiming at one lands on another, and those are exactly the
   three a customer taps when they are already unsure about paying.

   Padding rather than a fixed height, so a link that wraps to two lines grows
   instead of clipping. The negative margin keeps the visual spacing the design
   already had, so nothing moves on screen: the target grows, the layout does
   not. */
.footer-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 .55rem;margin:0 -.55rem}
/* These sit INLINE inside a paragraph of running text, so a min-height on the
   link does nothing: an inline-block in a 15px line box grows the box, not the
   hit area, and it measured 30px. inline-flex with an explicit min-height gives
   a real target, and the negative vertical margin stops the paragraph's line
   spacing opening up around it. */
.footer-disclaimer a{display:inline-flex;align-items:center;min-height:44px;margin:-14px 0;padding:0 .25rem}
@media(hover:none){
  /* Only where a finger is actually used. On a desktop pointer the extra hit
     area is invisible and harmless, but there is no reason to widen it. */
  .feature-tag{display:inline-flex;align-items:center;min-height:44px}
  /* Inline inside running copy, so the same treatment as the disclaimer links:
     a real min-height plus a negative margin so the paragraph does not open up. */
  .email-link{display:inline-flex;align-items:center;min-height:44px;margin:-14px 0}
}
.footer-links a:hover{color:white}
.footer-copy{color:rgba(237,250,255,.64);font-size:12px;margin:0}.footer-disclaimer{max-width:840px;margin:0 auto;color:rgba(237,250,255,.82);font-size:12px;line-height:1.55;text-align:center}.footer-disclaimer a{color:#8fd0ea;font-weight:700;text-decoration:none}.footer-disclaimer a:hover{text-decoration:underline}

/* ── demo strip ── */
.demo-strip{display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:center;
  padding:1.8rem 2rem;border-radius:24px;
  background:linear-gradient(135deg,#fff5f5,#fff8f3);
  border:2px dashed rgba(189,45,58,.28);box-shadow:0 8px 30px rgba(189,45,58,.05)}
.demo-strip-content h2{margin:.45rem 0 .65rem;font-size:1.5rem;letter-spacing:-.03em;color:var(--navy)}
.demo-strip-content p{color:var(--muted);margin:0 0 1.2rem;max-width:520px}
.demo-free-badge{display:inline-flex;align-items:center;padding:.35rem .65rem;border-radius:999px;
  background:#d1fae5;border:1px solid rgba(26,143,90,.28);color:#1A8F5A;
  font-weight:900;font-size:12px;text-transform:uppercase;letter-spacing:.1em;width:max-content}
.demo-strip-img{width:200px;object-fit:contain;display:block;border-radius:12px}
.btn-emerald{color:white;background:linear-gradient(135deg,#1A8F5A,#3A966A)}

/* ── responsive overrides ── */
@media(max-width:900px){
  .demo-strip{grid-template-columns:1fr}
  .demo-strip-img{width:100%}
  .nav-dropdown{display:none!important}
  .nav-item-group>a::after{display:none}
}

/* ── nav dropdown hover bridge (covers the gap so cursor doesn't lose hover) ── */
.nav-dropdown::before{content:'';position:absolute;top:-.6rem;left:-8px;right:-8px;height:.7rem}

/* ── ProxiSuite v4 additions ── */

/* Dashboard hero */
.dash-hero {
  background: radial-gradient(circle at 72% 22%, rgba(31,188,235,.22), transparent 18rem),
              linear-gradient(135deg, #061421, #082237 46%, #1a4a7a 145%);
  color: white;
  padding: 1.5rem 0 1.4rem;
  border-bottom: 3px solid #2E8FBF;
  position: sticky; top: 0; z-index: 40;
}
/* The greeting is the top-left of the app now, and the account control and
   notifications sit top-right on the same line. No marketing bar above it. */
.dash-hero-controls { display: flex; align-items: center; gap: .6rem; }
.dash-hero-controls .notif-pin:hover { color: #fff; }
/* The shared topbar user button defaults to dark ink for the white workspace
   bar. On the dashboard it sits on the dark hero, so lift it to a light tone. */
.dash-hero-controls [data-topbar-host] button { color: #eaf4fb !important; }
.dash-hero-controls [data-topbar-host] button span { color: rgba(217,247,255,.7) !important; }
.dash-hero-inner {
  max-width: 1180px; margin: auto; padding: 0 1.25rem;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
}
.dash-hero h1 {
  margin: 0; font-size: clamp(1.6rem, 3vw, 2.4rem);
  letter-spacing: -0.04em; font-weight: 800; color: white;
}
.dash-hero-sub { font-size: 14px; opacity: 0.55; color: white; margin-top: 0.25rem; }
.dash-hero-email {
  font-size: 12px; color: rgba(217,247,255,0.55); font-family: monospace;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px; padding: 0.3rem 0.65rem;
}

/* Dashboard improved tool cards: white with colored accent bar */
.card-tool-v2 {
  background: white; border: 1px solid rgba(46,143,191,0.18);
  border-radius: 16px; overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 4px 18px rgba(30,45,58,0.09); transition: box-shadow 0.18s, border-color 0.18s;
}
.card-tool-v2:hover { box-shadow: 0 8px 32px rgba(30,45,58,0.14); border-color: rgba(46,143,191,0.4); }
.card-tool-v2 .card-tool-accent { height: 5px; }
.card-tool-v2 .card-tool-body { padding: 1.1rem 1.2rem 0.8rem; flex: 1; display: flex; flex-direction: column; gap: 0.35rem; }
.card-tool-v2 .card-tool-eyebrow { font-size: .58rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #64748b; }
.card-tool-v2 .card-tool-name { font-size: 16px; font-weight: 800; color: #1E2D3A; letter-spacing: -0.02em; }
.card-tool-v2 .card-tool-desc { font-size: 12px; color: #64748b; line-height: 1.5; flex: 1; }
.card-tool-v2 .card-tool-foot {
  padding: 0.75rem 1.2rem; border-top: 1px solid rgba(46,143,191,0.1);
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(46,143,191,0.03);
}
.badge-active-v2 {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 10px; font-weight: 800; color: #1A8F5A;
  background: rgba(26,143,90,0.1); border: 1px solid rgba(26,143,90,0.25);
  border-radius: 999px; padding: 0.2rem 0.6rem;
}
.badge-active-v2::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #1A8F5A; }
.badge-locked-v2 {
  font-size: 10px; font-weight: 700; color: #64748b;
  background: rgba(100,116,139,0.08); border: 1px solid rgba(100,116,139,0.18);
  border-radius: 999px; padding: 0.2rem 0.6rem;
}
.btn-launch-v2 {
  font-size: 12px; font-weight: 700; color: white;
  background: linear-gradient(135deg, #2E8FBF, #1FBCEB);
  text-decoration: none; border-radius: 999px; padding: 0.35rem 0.85rem; transition: opacity 0.15s;
}
.btn-launch-v2:hover { opacity: 0.88; }
.btn-get-v2 {
  font-size: 12px; font-weight: 700; color: #2E8FBF;
  background: transparent; border: 1px solid rgba(46,143,191,0.35);
  text-decoration: none; border-radius: 999px; padding: 0.35rem 0.85rem; transition: background 0.15s;
}
.btn-get-v2:hover { background: rgba(46,143,191,0.08); }

/* Dashboard section headers */
.dash-section-kicker {
  display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1.25rem;
  padding-bottom: 0.75rem; border-bottom: 2px solid rgba(46,143,191,0.14);
}
.dash-section-kicker .kicker-label { font-size: 13px; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; color: #2E8FBF; }
.dash-section-kicker .kicker-sub { font-size: 12px; color: #64748b; }

/* ProxiField+ coming soon banner on dashboard */
.dash-proxifield-plus {
  background: white; border: 1px solid rgba(26,143,90,0.2); border-radius: 16px;
  padding: 1.5rem 1.75rem; display: flex; align-items: center;
  justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  box-shadow: 0 4px 18px rgba(30,45,58,0.06);
}
.dash-proxifield-plus h3 { margin: 0 0 0.25rem; font-size: 18px; font-weight: 800; color: #1E2D3A; letter-spacing: -0.02em; }
.dash-proxifield-plus p { margin: 0; font-size: 13px; color: #64748b; max-width: 480px; }
.badge-coming {
  font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: #1A8F5A; background: rgba(26,143,90,0.1); border: 1px solid rgba(26,143,90,0.25);
  border-radius: 999px; padding: 0.2rem 0.65rem; white-space: nowrap;
}

/* Login page hero */
.login-hero {
  background: radial-gradient(circle at 72% 22%, rgba(31,188,235,.22), transparent 18rem),
              linear-gradient(135deg, #061421, #082237 55%, #153a5a 145%);
  color: white; padding: 2rem 0 1.75rem; border-bottom: 3px solid #2E8FBF;
}
.login-hero-inner {
  max-width: 1180px; margin: auto; padding: 0 1.25rem;
  display: flex; align-items: center; gap: 0.85rem;
}
.login-hero-inner img { width: 36px; height: 36px; opacity: 0.85; }
.login-hero-inner h2 { margin: 0; font-size: 1.35rem; font-weight: 800; color: white; letter-spacing: -0.03em; }

/* Improved login card: white background */
.login-card {
  background: white !important;
  border: 1px solid rgba(46,143,191,0.2) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 40px rgba(30,45,58,0.12) !important;
}
.login-card .login-field label { color: #334155 !important; opacity: 1 !important; }
.login-card .login-field input {
  background: white !important; border: 1px solid rgba(46,143,191,0.25) !important;
  color: #1E2D3A !important;
}
.login-card .login-field input:focus { border-color: #2E8FBF !important; box-shadow: 0 0 0 3px rgba(46,143,191,0.12) !important; }
.login-card .login-forgot a { color: #2E8FBF !important; opacity: 1 !important; }
.login-card .login-divider { color: #64748b !important; opacity: 1 !important; }
.login-card .login-divider::before, .login-card .login-divider::after { background: rgba(46,143,191,0.15) !important; }

/* H1 ProxiName boundary fix: negative letter-spacing over-compresses at span boundaries */
h1 .pn-suffix { margin-left: 0.075em; }

/* Eyebrow ProxiName spacing fix: letter-spacing creates gap between pn-proxi and pn-suffix */
.eyebrow .pn-suffix { margin-left: -0.12em; }

/* ==================================================================
   ProxiSuite v2.0 redesign layer
   ================================================================== */

/* Per-product accent colors */
:root{
  --violet:#2E8FBF; --crimson:#BD2D3A;
  --pf-engine:#2E8FBF; --pf-seg:#1A8F5A; --pf-prio:#334155; --pf-build:#B36A00; --pf-analyzer:#1E2D3A; --pf-demo:#BD2D3A;
  --pm:#2E8FBF;
  --pb-health:#1A6868; --pb-pharm:#2D2E8A; --pb-bank:#1F2F4A; --pb-fed:#1A4875;
  --pb-log:#5A3A1C; --pb-fleet:#2C4F62; --pb-signal:#283F72; --pb-demo:#1E5C3A;
}

/* ── Two-level cascading ProxiField dropdown ── */
.nav-sub{display:flex;flex-direction:column}
.nav-has-flyout{position:relative}
.nav-flyout-label{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.52rem .85rem;border-radius:10px;font-size:13px;font-weight:700;color:var(--slate);text-decoration:none}
.nav-flyout-label::after{content:'\203A';font-weight:900;opacity:.45}
.nav-flyout-label:hover{background:rgba(46,143,191,.08);color:var(--cerulean)}
.nav-flyout{position:absolute;top:-.45rem;left:calc(100% + .35rem);min-width:232px;
  background:#fff;border:1px solid rgba(46,143,191,.2);border-radius:16px;
  box-shadow:0 14px 40px rgba(30,45,58,.16);padding:.45rem;
  display:none;flex-direction:column;z-index:320}
.nav-has-flyout:hover .nav-flyout,.nav-has-flyout:focus-within .nav-flyout{display:flex}
.nav-flyout::before{content:'';position:absolute;top:0;left:-.5rem;width:.6rem;height:100%}
.nav-flyout a,.nav-dropdown a{display:flex;align-items:center;gap:.55rem}
.nav-dot{width:.6rem;height:.6rem;border-radius:50%;flex:0 0 auto;box-shadow:0 0 0 2px rgba(255,255,255,.7)}

/* ── User nav (right side) ── */
.nav-user{margin-left:.35rem;display:inline-flex;align-items:center}
.btn-signin{color:#fff!important;background:linear-gradient(135deg,var(--blue),var(--blue2));
  border-radius:999px!important;padding:.55rem 1.1rem!important;font-weight:850}
.btn-signin:hover{filter:brightness(1.08)!important;opacity:1}
.nav-user-group{position:relative;display:inline-flex}
.nav-user-btn{display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;font-family:inherit;
  font-weight:800;font-size:14px;color:var(--slate);background:rgba(46,143,191,.08);
  border:1px solid rgba(46,143,191,.18);border-radius:999px;padding:.5rem .95rem}
.nav-user-btn:hover{background:rgba(46,143,191,.14)}
.nav-user-chev{font-size:.7em;opacity:.6}
.nav-user-menu{position:absolute;top:calc(100% + .45rem);right:0;min-width:170px;background:#fff;
  border:1px solid rgba(46,143,191,.2);border-radius:14px;box-shadow:0 12px 36px rgba(30,45,58,.16);
  padding:.4rem;display:flex;flex-direction:column;z-index:320;visibility:hidden;opacity:0;pointer-events:none;transition:opacity .12s ease,visibility .12s ease;transition-delay:.3s}
.nav-user-group:hover .nav-user-menu,.nav-user-group:focus-within .nav-user-menu,.nav-user-menu:hover,.nav-user-menu.open{visibility:visible;opacity:1;pointer-events:auto;transition-delay:0s}
.nav-user-menu a{padding:.55rem .85rem;border-radius:10px;font-size:14px;font-weight:700;
  color:var(--slate);text-decoration:none}
.nav-user-menu a:hover{background:rgba(46,143,191,.08);color:var(--cerulean)}

/* ── Mobile bottom tab bar ── */
.mobile-tabbar{display:none}
.mobile-menu-sheet{display:none}

/* ── Homepage suite overview cards ── */
.suite-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem}
.suite-card{background:#fff;border:1px solid rgba(46,143,191,.16);border-top:5px solid var(--cerulean);
  border-radius:18px;padding:1.6rem 1.55rem;display:flex;flex-direction:column;gap:.6rem;
  box-shadow:0 10px 34px rgba(30,45,58,.07)}
.suite-card h3{margin:0;font-size:1.3rem;letter-spacing:-.03em}
.suite-card p{margin:0;color:var(--muted);flex:1}
.suite-card .btn{width:max-content;margin-top:.4rem}
.suite-card-eyebrow{font-size:11px;font-weight:900;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:.5rem}
.badge-live{font-size:.6rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#fff;
  background:var(--violet);border-radius:999px;padding:.12rem .5rem}

/* ── Placeholder screenshot cards ── */
.shot-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem;margin-top:.5rem}
.shot-placeholder{min-height:200px;border:2px dashed var(--cerulean);border-radius:18px;
  background:linear-gradient(135deg,#0b1622,#13283b);color:rgba(217,247,255,.7);
  display:flex;align-items:center;justify-content:center;text-align:center;padding:1.5rem;
  font-weight:750;font-size:16px;letter-spacing:.01em}

/* ── Dashboard: sidebar + main layout ── */
.dash-layout{display:grid;grid-template-columns:240px 1fr;align-items:start;max-width:1680px;margin:auto}
.dash-sidebar{position:sticky;top:0;align-self:start;height:100vh;overflow-y:auto;
  background:var(--ink);color:rgba(237,250,255,.85);padding:1.1rem .9rem 2rem;
  display:flex;flex-direction:column;gap:.2rem}
.dash-sidebar .brand{padding:.3rem .35rem 1rem}
.dash-sidebar .brand-wordmark .proxi{color:#fff}.dash-sidebar .brand-wordmark .suite{color:var(--cyan)}
.dash-side-head{font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(217,247,255,.4);margin:1rem .55rem .35rem;display:flex;align-items:center;gap:.5rem}
.dash-side-link{display:flex;align-items:center;gap:.55rem;text-decoration:none;color:rgba(237,250,255,.84);
  font-weight:700;font-size:14px;padding:.5rem .6rem;border-radius:10px}
.dash-side-link:hover{background:rgba(255,255,255,.07);color:#fff}
.dash-side-link.active{background:rgba(46,143,191,.22);color:#fff;box-shadow:inset 3px 0 0 var(--cerulean)}
.dash-side-link.dim{opacity:.55}
.dash-side-foot{margin-top:auto;padding-top:1rem;border-top:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;gap:.1rem}
.side-badge{margin-left:auto;font-size:.55rem;font-weight:900;letter-spacing:.06em;background:rgba(31,188,235,.2);color:var(--cyan);border-radius:999px;padding:.1rem .42rem}
.side-badge.live{background:rgba(66,40,125,.4);color:#cbb8ff}
.dash-main{padding:0 1.5rem 4rem}
.dash-menu-toggle{display:none}

/* ── Responsive: tablet 900 ── */
@media(max-width:900px){
  /* minmax(0,1fr), not 1fr. A bare 1fr track is minmax(auto,1fr), and that auto
     minimum is min-content, so a card whose content will not shrink below 396px
     forces the track wider than its 358px parent and the whole page picks up 22
     pixels of horizontal scroll on a 390px phone. The desktop rule above always
     had this right, repeat(3,minmax(0,1fr)); only the mobile override was bare.
     Measured in Chromium at 390 wide, before 412px scrollWidth, after 390. */
  .suite-cards,.shot-cards{grid-template-columns:minmax(0,1fr)}
  .suite-card,.shot-card{min-width:0}
  .nav-flyout{position:static;display:flex!important;box-shadow:none;border:none;padding:.2rem 0 .2rem 1rem;min-width:0}
  .nav-flyout-label::after{display:none}
  .dash-layout{grid-template-columns:1fr}
  .dash-sidebar{position:fixed;left:0;top:0;bottom:0;width:240px;z-index:400;transform:translateX(-100%);transition:transform .25s;height:100vh}
  .dash-sidebar.open{transform:translateX(0)}
  .dash-menu-toggle{display:inline-flex;align-items:center;gap:.45rem;cursor:pointer;font-family:inherit;
    font-weight:800;font-size:14px;color:#fff;background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:.45rem .85rem}
}

/* ── Responsive: mobile 600 (bottom tab bar) ── */
@media(max-width:600px){
  .nav-wrap{display:none}
  body{padding-bottom:64px}
  .mobile-tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;
    z-index:500;background:var(--ink);border-top:1px solid rgba(255,255,255,.12);
    box-shadow:0 -8px 24px rgba(30,45,58,.25)}
  .mobile-tabbar a,.mobile-tabbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:.15rem;min-height:60px;text-decoration:none;border:0;background:none;cursor:pointer;font-family:inherit;
    color:rgba(237,250,255,.62);font-weight:750;font-size:11px}
  .mobile-tabbar a.active,.mobile-tabbar a:active,.mobile-tabbar button:active{color:var(--cyan)}
  .mobile-tabbar a.active{box-shadow:inset 0 3px 0 var(--cyan)}
  .mt-ico{font-size:18px;line-height:1}
  .mobile-menu-sheet{display:none;position:fixed;left:0;right:0;bottom:60px;z-index:499;background:#fff;
    border-top:1px solid rgba(46,143,191,.18);box-shadow:0 -12px 30px rgba(30,45,58,.18);padding:.5rem}
  .mobile-menu-sheet.open{display:flex;flex-direction:column}
  .mobile-menu-sheet a{padding:.85rem 1rem;border-radius:10px;text-decoration:none;color:var(--slate);font-weight:750;min-height:48px;display:flex;align-items:center}
  .mobile-menu-sheet a:active{background:rgba(46,143,191,.08)}
  .hero-inner{padding:1.05rem 1.1rem}
  h1{font-size:clamp(2rem,10vw,3rem)}
  .hero-actions .btn{width:100%}
  .btn{min-height:48px}
  .nav-links a,.dash-side-link{font-size:14px}
  .dash-main{padding:0 1rem 5rem}
}


/* ── Round 2: sidebar dots lifted for the dark sidebar ── */
.dash-sidebar .nav-dot{filter:brightness(1.75) saturate(1.15);box-shadow:0 0 0 2px rgba(255,255,255,.22)}

/* ── Round 3: nav descriptor tag (Offline / Hosted) ── */
.nav-tag{margin-left:auto;font-size:.62rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);background:rgba(46,143,191,.1);border-radius:6px;padding:.08rem .4rem}
.nav-dropdown a{justify-content:space-between}

/* ── Round 4: coming-soon button + wordmark descriptor color ── */
.btn-soon{background:rgba(46,143,191,.1);color:var(--muted);border:1px solid rgba(46,143,191,.22);cursor:default;pointer-events:none}
/* The h1 descriptor on 22 line pages: Proxi + School + Colleges, three spans
   with NO whitespace between them, so the browser sees one unbreakable token
   "ProxiSchoolColleges". At 390px that measured 426 to 477 CSS pixels against a
   390 viewport and pushed a horizontal scrollbar onto four ProxiSchool pages.
   Verified in Chromium, not guessed.

   Two parts. The zero-width space gives the line a legal break point at any
   width without changing how it reads or looks. Below 520px the descriptor drops
   to its own line at the same .62em .pn-rest already uses, which is the pattern
   this shape already has elsewhere in the sheet.

   Note for a later pass: the run-together also affects screen readers, which
   announce "ProxiSchoolColleges" as one word. Fixing that properly means a
   separator in the markup on 22 pages, so it is not folded in here. */
.pn-desc{color:inherit}
.pn-desc:before{content:"\200B"}
@media(max-width:520px){
  .pn-desc{display:block;font-size:.62em;font-weight:700;letter-spacing:-.03em;line-height:1.12}
}

/* ==================================================================
   ROUND 5: Showcase layer: browser frames, feature rows, proximity
   ring signature, stat strip. Lifts every marketing/content page.
   Signature element: faint concentric proximity rings (what the
   product literally does) recurring behind showcase + section heads.
   ================================================================== */

/* Section rhythm: a touch more air, kicker gets a ring tick */
.container{position:relative}
.section-kicker{position:relative;display:inline-flex;align-items:center;gap:.5rem}
.section-kicker::before{content:"";width:1.4rem;height:1.4rem;border-radius:50%;flex:0 0 auto;
  background:radial-gradient(circle,transparent 4px,var(--accent,#2E8FBF) 4px 5px,transparent 6px,var(--accent,#2E8FBF) 6px 7px,transparent 8px);
  opacity:.85}

/* Proximity-ring backdrop for showcase sections (the signature) */
.showcase{--accent:#2E8FBF}
.showcase::before{content:"";position:absolute;inset:-2rem 0;z-index:0;pointer-events:none;
  background:repeating-radial-gradient(circle at 88% 18%,transparent 0 46px,
    color-mix(in srgb,var(--accent) 14%,transparent) 46px 47px);
  -webkit-mask:radial-gradient(circle at 88% 18%,#000,transparent 60%);
          mask:radial-gradient(circle at 88% 18%,#000,transparent 60%);
  opacity:.7}
.showcase>*{position:relative;z-index:1}

/* Browser frame mockup */
.browser-frame{position:relative;border-radius:18px;overflow:hidden;background:#0b1622;
  border:1px solid rgba(46,143,191,.2);box-shadow:0 34px 90px rgba(30,45,58,.24);
  outline:0}
.browser-frame::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--accent,#2E8FBF),color-mix(in srgb,var(--accent,#2E8FBF) 35%,#1FBCEB))}
.bf-bar{display:flex;align-items:center;gap:.55rem;padding:.62rem .9rem;
  background:linear-gradient(180deg,#16293c,#0e1f2f);border-bottom:1px solid rgba(255,255,255,.06)}
.bf-dots{display:flex;gap:.42rem}
.bf-dots i{width:11px;height:11px;border-radius:50%;display:block}
.bf-dots i:nth-child(1){background:#ff5f57}.bf-dots i:nth-child(2){background:#febc2e}.bf-dots i:nth-child(3){background:#28c840}
.bf-url{margin-left:.5rem;font-size:12px;color:rgba(217,247,255,.62);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.07);border-radius:999px;padding:.22rem .8rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60%}
.browser-frame>img{display:block;width:100%;height:auto}

.showcase-hero{margin-bottom:.4rem}

/* Alternating feature rows */
.feature-row{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(1.6rem,4vw,3rem);
  align-items:center;margin-top:2.6rem}
.feature-row.flip .feature-copy{order:2}
.feature-copy .section-title{font-size:clamp(1.6rem,3vw,2.3rem)}
.feature-copy p{color:var(--muted);margin:.85rem 0 0;font-size:16px}
.feature-copy .feature-tag{display:inline-flex;align-items:center;gap:.45rem;margin-top:1.1rem;
  font-weight:850;font-size:13px;color:var(--accent,#2E8FBF)}
.feature-copy .feature-tag::before{content:"";width:.55rem;height:.55rem;border-radius:50%;
  background:var(--accent,#2E8FBF);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent,#2E8FBF) 18%,transparent)}

/* Stat strip (dark, ring-flecked) */
.stat-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:2.4rem;
  background:rgba(46,143,191,.16);border:1px solid rgba(46,143,191,.16);border-radius:22px;overflow:hidden}
.stat-strip .stat-cell{background:linear-gradient(135deg,#0a1a29,#10283c);padding:1.4rem 1.3rem;color:#eaf7ff}
.stat-strip .stat-cell strong{display:block;font-size:clamp(1.6rem,3vw,2.1rem);letter-spacing:-.03em;
  color:#dff7ff;line-height:1}
.stat-strip .stat-cell span{display:block;margin-top:.4rem;font-size:13px;color:rgba(217,247,255,.62);
  font-weight:650;letter-spacing:.02em}

/* Section-level eyebrow caption above a framed shot */
.shot-caption{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}
.shot-caption .section-title{margin:0}

@media(max-width:900px){
  .feature-row,.feature-row.flip{grid-template-columns:1fr}
  .feature-row.flip .feature-copy{order:0}
  .stat-strip{grid-template-columns:repeat(2,1fr)}
  .showcase::before{inset:-1rem 0}
}
@media(max-width:520px){
  .stat-strip{grid-template-columns:1fr}
  .bf-url{display:none}
}

/* ── Round 5.1: restore collapsed-peek + expand on full-site hero shots ── */
.browser-frame .bf-peek{position:relative;max-height:430px;overflow:hidden;transition:max-height .55s ease}
.browser-frame .bf-peek.expanded{max-height:7000px}
.browser-frame .bf-peek::after{content:"";position:absolute;left:0;right:0;bottom:0;height:130px;
  background:linear-gradient(transparent,#0b1622);pointer-events:none;transition:opacity .4s ease}
.browser-frame .bf-peek.expanded::after{opacity:0}
.browser-frame .bf-peek>img{display:block;width:100%;height:auto}
.bf-expand{display:block;width:100%;border:0;cursor:pointer;font-family:inherit;font-weight:800;
  font-size:13px;letter-spacing:.02em;color:#dff7ff;background:linear-gradient(180deg,#10283c,#0b1c2c);
  border-top:1px solid rgba(255,255,255,.08);padding:.8rem;transition:background .15s,color .15s}
.bf-expand::after{content:" \25BE";opacity:.7}
.bf-expand.open::after{content:" \25B4"}
.bf-expand:hover{color:#fff;background:#123048}

/* ── Round 5.2: tighten vertical rhythm between sections (kill dead space) ── */
.container{padding-top:2.9rem;padding-bottom:2.9rem}
.container + .container{padding-top:.6rem}
@media(max-width:520px){.container{padding-top:2rem;padding-bottom:2rem}}

/* ===== ProxiMed scoped theme (red BD372E) | status colors | collapsible dashboard ===== */
.theme-med{--btn-top:#BD372E;--blue:#BD372E;--blue-text:#BD372E;--blue2:#9A2C24;--cyan:#D6584A;--line:rgba(189,55,46,.22)}
.theme-med header.hero{background:radial-gradient(circle at 72% 22%,rgba(214,88,74,.34),transparent 19rem),linear-gradient(135deg,#240a08,#3a100c 46%,#BD372E 150%)}
.theme-med .eyebrow{color:#F0A89F}
.theme-med 
.theme-med main 
.theme-med .section-kicker{color:var(--blue-text)}
.theme-med .nav-links a:hover,.theme-med .nav-links a.active{color:var(--blue);background:rgba(189,55,46,.10)}
.theme-med .btn-primary{background:linear-gradient(135deg,var(--btn-top),var(--blue2));box-shadow:0 14px 32px rgba(189,55,46,.28)}
.theme-med .list li:before{background:linear-gradient(135deg,#BD372E,#D6584A)}
.theme-med .feature-band,.theme-med .wide-callout{background:linear-gradient(135deg,#2a0b08,#5a1810 62%,#BD372E)}
.theme-med .showcase{--accent:#BD372E}
.theme-med .demo-badge{background:#fff1f0;border-color:rgba(189,55,46,.25);color:#BD372E}
.theme-med footer 
.theme-med .brand-wordmark .suite{color:#2E8FBF}
/* status colors: open opportunity / contracted / competitor-locked / unknown */
.st-open{color:#2E8FBF}.st-contract{color:#1A8F5A}.st-locked{color:#7A2E20}.st-unknown{color:#6b7480}
.st-dot{display:inline-block;width:.62rem;height:.62rem;border-radius:50%;vertical-align:middle;margin-right:.4rem}
.st-dot.open{background:#2E8FBF}.st-dot.contract{background:#1A8F5A}.st-dot.locked{background:#7A2E20}.st-dot.unknown{background:#c4cad2}
.status-legend{display:flex;flex-wrap:wrap;gap:1.1rem;margin-top:1rem;font-size:14px;font-weight:700;color:var(--slate)}
/* dashboard collapsible line sections (req 1) */
.dline{border:1px solid rgba(46,143,191,.16);border-radius:18px;background:rgba(255,255,255,.7);margin-bottom:1rem;overflow:hidden}
.dline>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.8rem;padding:1rem 1.2rem}
.dline>summary::-webkit-details-marker{display:none}
.dline>summary::after{content:'\203A';margin-left:auto;transform:rotate(90deg);transition:transform .18s;opacity:.5;font-size:1.3rem}
.dline[open]>summary::after{transform:rotate(-90deg)}
.dline .dl-dot{width:.7rem;height:.7rem;border-radius:50%;flex:0 0 auto}
.dline .dl-name{font-weight:900;letter-spacing:-.02em;color:var(--ink);font-size:16px}
.dline .dl-counts{display:flex;gap:.5rem;font-size:12px;font-weight:800}
.dl-chip{padding:.2rem .55rem;border-radius:999px}
.dl-chip.act{background:rgba(26,143,90,.12);color:#137a4b}
.dl-chip.lock{background:rgba(122,46,32,.1);color:#7A2E20}
.dline .dl-body{padding:0 1.2rem 1.2rem}


/* ==================================================================
   ProxiSuite v5: per-line theme layer (Match / Book / Field+)
   Mirrors .theme-med. Apply on <body class="theme-*">. Themes hero,
   eyebrow, kickers, buttons, list bullets, callouts, showcase accent,
   nav hover, and the footer accent bar in one shot.
   ================================================================== */

/* ProxiMatch: Emerald #1A8F5A (beta testing) */
.theme-match{--btn-top:#188554;--blue:#1A8F5A;--blue-text:#188554;--blue2:#137a4b;--cyan:#36C98A;--line:rgba(26,143,90,.22)}
.theme-match header.hero{background:radial-gradient(circle at 72% 22%,rgba(54,201,138,.30),transparent 19rem),linear-gradient(135deg,#06140d,#0a2417 46%,#1A8F5A 150%)}
.theme-match .eyebrow{color:#9FE6C4}
.theme-match 
.theme-match main 
.theme-match .section-kicker{color:var(--blue-text)}
.theme-match .nav-links a:hover,.theme-match .nav-links a.active{color:var(--blue);background:rgba(26,143,90,.10)}
.theme-match .btn-primary{background:linear-gradient(135deg,var(--btn-top),var(--blue2));box-shadow:0 14px 32px rgba(26,143,90,.28)}
.theme-match .btn-dark{background:#0c2c1d}
.theme-match .list li:before{background:linear-gradient(135deg,#1A8F5A,#36C98A)}
.theme-match .feature-band,.theme-match .wide-callout{background:linear-gradient(135deg,#08160f,#0f3a26 62%,#1A8F5A)}
.theme-match .showcase{--accent:#1A8F5A}
.theme-match footer 
.theme-match .brand-wordmark .suite{color:#1A8F5A}

/* ProxiBook: Cerulean grey #5E7F8E (sandbox) */
.theme-book{--btn-top:#5B7B8A;--blue:#5E7F8E;--blue-text:#5A7988;--blue2:#46626E;--cyan:#82A7B6;--line:rgba(94,127,142,.22)}
.theme-book header.hero{background:radial-gradient(circle at 72% 22%,rgba(130,167,182,.30),transparent 19rem),linear-gradient(135deg,#0f181d,#1c2b32 46%,#5E7F8E 150%)}
.theme-book .eyebrow{color:#BBD0D9}
.theme-book 
.theme-book main 
.theme-book .section-kicker{color:var(--blue-text)}
.theme-book .nav-links a:hover,.theme-book .nav-links a.active{color:var(--blue);background:rgba(94,127,142,.10)}
.theme-book .btn-primary{background:linear-gradient(135deg,var(--btn-top),var(--blue2));box-shadow:0 14px 32px rgba(94,127,142,.28)}
.theme-book .btn-dark{background:#17242b}
.theme-book .list li:before{background:linear-gradient(135deg,#5E7F8E,#82A7B6)}
.theme-book .feature-band,.theme-book .wide-callout{background:linear-gradient(135deg,#0f181d,#23383f 62%,#5E7F8E)}
.theme-book .showcase{--accent:#5E7F8E}
.theme-book footer 
.theme-book .brand-wordmark .suite{color:#5E7F8E}

/* ProxiField+: brighter, slightly greyer cerulean #2E8FBF */
.theme-fieldplus{--btn-top:#287EA8;--blue:#2E8FBF;--blue-text:#287CA6;--blue2:#1e6e94;--cyan:#5BC4F0;--line:rgba(46,143,191,.22)}
.theme-fieldplus header.hero{background:radial-gradient(circle at 72% 22%,rgba(91,196,240,.34),transparent 19rem),linear-gradient(135deg,#08161f,#0d2c3d 46%,#2E8FBF 150%)}
.theme-ed{--btn-top:#A86300;--blue:#B36A00;--blue-text:#AA6400;--blue2:#8c5300;--cyan:#E0922A;--line:rgba(179,106,0,.22)}
.theme-ed header.hero{background:radial-gradient(circle at 72% 22%,rgba(224,146,42,.30),transparent 19rem),linear-gradient(135deg,#1c1102,#33200a 46%,#B36A00 150%)}
.theme-fieldplus .eyebrow{color:#AEE3F7}
.theme-fieldplus main 
.theme-fieldplus .section-kicker{color:var(--blue-text)}
.theme-fieldplus .nav-links a:hover,.theme-fieldplus .nav-links a.active{color:var(--blue);background:rgba(46,143,191,.12)}
.theme-fieldplus .btn-primary{background:linear-gradient(135deg,var(--btn-top),var(--blue2));box-shadow:0 14px 32px rgba(46,143,191,.28)}
.theme-fieldplus .list li:before{background:linear-gradient(135deg,#2E8FBF,#5BC4F0)}
.theme-fieldplus .showcase{--accent:#2E8FBF}
.theme-fieldplus .brand-wordmark .suite{color:#2E8FBF}

/* Footer accent reads the active line color (thicker, themed) */
footer{border-top:5px solid var(--blue)}

/* v5: Example blocks: shorter collapsed peek that pops on expand (across the board) */
.browser-frame .bf-peek{max-height:232px}
.browser-frame .bf-peek.expanded{max-height:7000px}
.example-peek{max-height:150px}

/* v5: status pill used on hub/pricing where a line can't be bought yet */
.status-pill{display:inline-flex;align-items:center;gap:.4rem;font-size:11px;font-weight:900;
  letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:.28rem .7rem;
  background:rgba(100,116,139,.12);color:#64748b;border:1px solid rgba(100,116,139,.22)}
.status-pill::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:currentColor}
.status-pill.alpha{background:rgba(179,106,0,.12);color:#B36A00;border-color:rgba(179,106,0,.28)}
.status-pill.beta{background:rgba(26,143,90,.12);color:#137a4b;border-color:rgba(26,143,90,.28)}
.status-pill.live{background:rgba(46,143,191,.12);color:#2E8FBF;border-color:rgba(46,143,191,.28)}

/* pf1-mobile-nav-tighten */
@media(max-width:600px){
  .mobile-tabbar a,.mobile-tabbar button{font-size:.62rem;padding:0 .1rem}
  .mobile-tabbar a span.mt-ico,.mobile-tabbar button span.mt-ico{font-size:18px}
  .mobile-menu-sheet{max-height:70vh;overflow-y:auto}
}

/* pf2-footer-theme */
:root{--line:rgba(46,143,191,.22)}
footer{background:radial-gradient(1100px 220px at 50% 0%, var(--line), transparent 72%), var(--navy)}

/* pf3-eco-link-sep */
.card.panel p a.email-link + a.email-link::before{content:"  \00B7  ";color:var(--muted);font-weight:600}

/* ---- Per-line footer theming (wordmark stays cerulean by decision) ---- */
.theme-fieldplus footer{border-top-color:#2E8FBF;background:radial-gradient(circle at 50% 0%,rgba(46,143,191,.20),transparent 24rem),var(--navy)}
.theme-med footer{border-top-color:#BD372E;background:radial-gradient(circle at 50% 0%,rgba(189,55,46,.18),transparent 24rem),var(--navy)}
.theme-book footer{border-top-color:#5E7F8E;background:radial-gradient(circle at 50% 0%,rgba(94,127,142,.18),transparent 24rem),var(--navy)}
.theme-match footer{border-top-color:#1A8F5A;background:radial-gradient(circle at 50% 0%,rgba(26,143,90,.18),transparent 24rem),var(--navy)}

.dd-label{font-size:.6rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#BD372E;padding:.5rem .9rem .2rem;opacity:.85;}

/* PROGRESSIVE-DISCLOSURE (Advanced sections) */
details.pfp-adv,details.pmadv{margin:.45rem 0;border-top:1px solid var(--line);padding-top:.3rem}
details.pfp-adv>summary,details.pmadv>summary{cursor:pointer;list-style:none;font-weight:800;font-size:13px;color:var(--slate);padding:.4rem 0;user-select:none}
details.pfp-adv>summary::-webkit-details-marker,details.pmadv>summary::-webkit-details-marker{display:none}
details.pfp-adv>summary::marker,details.pmadv>summary::marker{content:""}
details.pfp-adv>summary::before,details.pmadv>summary::before{content:"\25B8  ";color:var(--blue)}
details.pfp-adv[open]>summary::before,details.pmadv[open]>summary::before{content:"\25BE  "}

/* TABLE-HEIGHT-CAPS */
#tableWrap{max-height:62vh;overflow:auto}
.tbl-cap{max-height:62vh;overflow:auto}

/* ROW-MOTION-FEEDBACK (Field+ entry grids) */
@keyframes pfpRowIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
.dest-row,.acct-row,.terr-row{animation:pfpRowIn .18s ease;transition:background .12s ease}
.dest-row:hover,.acct-row:hover,.terr-row:hover{background:rgba(46,143,191,.05)}
.s-ok,.s-err{animation:pfpRowIn .22s ease}
@media(prefers-reduced-motion:reduce){.dest-row,.acct-row,.terr-row,.s-ok,.s-err{animation:none}}
.data-table-wrap{max-height:62vh;overflow:auto}

.email-link .pn-proxi{color:#1E2D3A}

/* tighten card internals: text hugs the padding, no stacked margins */
.card>:first-child{margin-top:0}
.card>:last-child{margin-bottom:0}
.card p{margin:.5rem 0}

/* ===== reusable pricing table (pt-) ===== */
/* A fixed repeat(3,1fr) grid strands every row that is not a multiple of
   three: 4 cards render 3 plus a lone card hugging the left edge, 5 render
   3 plus 2, and a 2-card or 1-card section sits left-aligned with a third
   of the row empty beside it. 11 of the 17 pt-wrap sections across the site
   land in one of those cases. Flex with centered wrapping keeps the same
   three-across maximum and the same card width, and centers whatever is
   left over instead of stranding it. */
.pt-wrap{display:flex;flex-wrap:wrap;justify-content:center;gap:1.1rem;margin-top:1.4rem}
.pt-wrap>*{flex:0 1 calc((100% - 2.2rem)/3);max-width:calc((100% - 2.2rem)/3);min-width:0}
.pt-card{position:relative;background:#fff;border:1px solid rgba(46,143,191,.16);border-radius:20px;padding:1.6rem 1.4rem;display:flex;flex-direction:column;box-shadow:0 18px 44px rgba(30,45,58,.07)}
.pt-card.pt-pop{border:2px solid var(--line-accent,#2E8FBF);box-shadow:0 22px 60px rgba(46,143,191,.18)}
.pt-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--line-accent-dark,var(--line-accent,#1E6E94));color:#fff;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:.32rem .8rem;border-radius:999px;white-space:nowrap}
.pt-name{font-size:16px;font-weight:800;color:#1E2D3A;margin:0}
.pt-price{font-size:2rem;font-weight:800;color:#1E2D3A;margin:.35rem 0 0;letter-spacing:-.03em}
.pt-price span{font-size:14px;font-weight:600;color:#5b6b78}
.pt-for{font-size:13px;color:#5b6b78;margin:.3rem 0 1rem;min-height:2.6em}
.pt-feats{list-style:none;padding:0;margin:0 0 1.2rem;flex:1}
.pt-feats li{font-size:14px;color:#33454f;padding:.3rem 0 .3rem 1.45rem;position:relative;line-height:1.3}
.pt-feats li:before{content:'\2713';position:absolute;left:0;color:var(--line-accent,#2E8FBF);font-weight:800}
.pt-feats li.no{color:#67757f}
.pt-feats li.no:before{content:'\2013';color:#c2ccd3}
.pt-cta{display:block;text-align:center;text-decoration:none;font-weight:700;padding:.72rem;border-radius:12px}
.pt-cmp-wrap{background:#fff;border-radius:20px;box-shadow:0 18px 46px rgba(30,45,58,.09);border:1px solid #e7eef3;overflow:hidden;max-width:920px;margin:1.8rem auto 0}
.pt-cmp{width:100%;border-collapse:collapse;font-size:14px}
.pt-cmp thead th{background:#fafbfc;color:#1E2D3A;font-weight:800;font-size:14px;padding:1.15rem 1rem;text-align:center;border-bottom:2px solid #edf1f4;vertical-align:middle}
.pt-cmp thead th:first-child{text-align:left;font-size:12px;font-weight:700;color:#63717b;text-transform:uppercase;letter-spacing:.05em}
.pt-cmp thead th .pt-th-sub{display:block;font-size:12px;font-weight:600;color:#5f6d77;margin-top:.15rem}
.pt-cmp thead th.pt-hl{color:var(--line-accent,#2E8FBF);background:color-mix(in srgb,var(--line-accent,#2E8FBF) 7%,#fff);border-bottom-color:var(--line-accent,#2E8FBF)}
.pt-cmp tbody td{padding:.82rem 1rem;text-align:center;border-bottom:1px solid #f1f4f6;color:#4a5860}
.pt-cmp tbody td:first-child{text-align:left;font-weight:600;color:#1E2D3A}
.pt-cmp tbody tr:last-child td{border-bottom:none}
.pt-cmp td.pt-hl{background:color-mix(in srgb,var(--line-accent,#2E8FBF) 5%,#fff)}
.pt-cmp tbody tr:hover td{background:#f8fbfd}
.pt-cmp tbody tr:hover td.pt-hl{background:color-mix(in srgb,var(--line-accent,#2E8FBF) 9%,#fff)}
.pt-cmp .pt-grp td{background:color-mix(in srgb,var(--line-accent,#2E8FBF) 6%,#f7f9fb);color:#5c6a74;font-weight:800;text-transform:uppercase;font-size:11px;letter-spacing:.09em;text-align:left;padding:.6rem 1rem;border-left:3px solid var(--line-accent,#2E8FBF)}
.pt-cmp .pt-grp:hover td{background:color-mix(in srgb,var(--line-accent,#2E8FBF) 6%,#f7f9fb)}
.pt-cmp .pt-row-hl td{background:color-mix(in srgb,var(--line-accent,#2E8FBF) 6%,#fff);font-weight:600}
.pt-yes{color:var(--line-accent,#2E8FBF);font-weight:800;font-size:16px}
.pt-no{color:#d6dee3;font-size:16px}
@media(max-width:820px){.pt-wrap>*{max-width:100%;flex:0 1 100%}.pt-cmp{font-size:13px}.pt-cmp thead th,.pt-cmp tbody td{padding:.6rem .45rem}.pt-cmp-wrap{border-radius:16px}}

/* ===== workflow story steps ===== */
.story-steps{max-width:940px;margin:1.6rem auto 0;display:flex;flex-direction:column;gap:1.15rem}
.story-step{display:flex;gap:1.5rem;align-items:center;background:#fff;border:1px solid #e7eef3;border-radius:16px;padding:1.35rem 1.6rem;box-shadow:0 12px 32px rgba(30,45,58,.06)}
.story-main{flex:1;display:flex;gap:1.1rem;align-items:flex-start}
.story-body{flex:1}
.story-pic{flex:0 0 32%}
.story-pic img{width:100%;border-radius:12px;display:block;border:1px solid #edf1f4;box-shadow:0 8px 20px rgba(30,45,58,.08)}
.story-step.pic-left{flex-direction:row-reverse}
.story-num{flex-shrink:0;width:40px;height:40px;border-radius:50%;background:var(--accent,#2E8FBF);color:#fff;font-weight:800;font-size:18px;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(0,0,0,.14)}
.story-step h3{margin:.15rem 0 .4rem;font-size:18px;color:#1E2D3A}
.story-step p{margin:0;color:#4a5860;font-size:16px;line-height:1.55}
@media(max-width:720px){.story-step,.story-step.pic-left{flex-direction:column;align-items:stretch}.story-pic{flex:0 0 auto;width:100%}.story-num{width:34px;height:34px;font-size:16px}}

/* ===== display preferences (settings toggles) ===== */
html.pref-larger-text{font-size:112.5%}
html.pref-reduce-motion *,html.pref-reduce-motion *::before,html.pref-reduce-motion *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
html.pref-dense-tables td,html.pref-dense-tables th{padding-top:.4rem!important;padding-bottom:.4rem!important}

/* pf-d4: ancillary vertical rhythm */
body:not([class*="theme-"]) .container{padding-top:2.15rem;padding-bottom:2.15rem}
body:not([class*="theme-"]) .section-header{margin-bottom:1.4rem;margin-left:auto;margin-right:auto;text-align:center}
body:not([class*="theme-"]) .hero{padding-bottom:.25rem}
/* anc-center-fix */body:not([class*="theme-"]) .section-header{margin-left:auto;margin-right:auto}body:not([class*="theme-"]) .long-copy{max-width:900px;margin-left:auto;margin-right:auto}body:not([class*="theme-"]) .faq-list{max-width:900px;margin-left:auto;margin-right:auto}
/* anc-card-fix */body:not([class*="theme-"]) article.card.panel{max-width:900px;margin:0 auto 1.2rem;padding:1.6rem 1.75rem;border-radius:16px;border-top:4px solid #2E8FBF;box-shadow:0 12px 32px rgba(30,45,58,.06)}body:not([class*="theme-"]) article.card.panel:last-child{margin-bottom:0}body:not([class*="theme-"]) article.card.panel h3{margin:0 0 .5rem}body:not([class*="theme-"]) article.card.panel p{margin-top:0}body:not([class*="theme-"]) .section-header{margin-bottom:1.35rem}body:not([class*="theme-"]) section.container{padding-top:1.6rem;padding-bottom:1.6rem}
/* anc-cards-fix */body:not([class*="theme-"]) .card.panel{max-width:900px;margin:0 auto 1.15rem;padding:1.6rem 1.75rem;border-radius:16px;border-top:4px solid #2E8FBF;box-shadow:0 12px 32px rgba(30,45,58,.06)}body:not([class*="theme-"]) .content-grid,body:not([class*="theme-"]) .content-grid.two,body:not([class*="theme-"]) .grid-bundles{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.4rem}body:not([class*="theme-"]) .content-grid>.card,body:not([class*="theme-"]) .content-grid.two>.card,body:not([class*="theme-"]) .grid-bundles>.card{border-top:4px solid #2E8FBF}body:not([class*="theme-"]) .content-grid .card-content,body:not([class*="theme-"]) .content-grid.two .card-content,body:not([class*="theme-"]) .grid-bundles .card-content{padding:1.7rem}body:not([class*="theme-"]) .faq-list{gap:1.15rem}body:not([class*="theme-"]) .faq-list details.card{padding:1.4rem 1.6rem;border-top:4px solid #2E8FBF}@media(max-width:640px){body:not([class*="theme-"]) .content-grid,body:not([class*="theme-"]) .content-grid.two,body:not([class*="theme-"]) .grid-bundles{grid-template-columns:1fr}}

/* ── contrast audit fixes: raise faint light-on-dark text to a readable floor ── */
.footer-links a{color:rgba(237,250,255,.84)}
.footer-copy{color:rgba(237,250,255,.78)}
.dash-side-head{color:rgba(217,247,255,.6)}
.dash-hero-sub{opacity:.78}
.dash-hero-email{color:rgba(217,247,255,.74)}
.bc-sep{color:rgba(217,247,255,.5)}

/* Contrast pass (AA): raise on-white accent text and muted greys to >=4.5 without touching hero eyebrows (dark bg), buttons, logos, or bullets. Same hue, darker shade, per theme. */
.section-kicker,.email-link,.feature-copy .feature-tag,.dash-section-kicker .kicker-label{color:#1e6e94}
.theme-match .section-kicker,.theme-match .email-link,.theme-match .feature-copy .feature-tag{color:#137a4b}
.theme-book .section-kicker,.theme-book .email-link,.theme-book .feature-copy .feature-tag{color:#46626e}
.theme-ed .section-kicker,.theme-ed .email-link,.theme-ed .feature-copy .feature-tag{color:#8c5300}
.theme-fieldplus .section-kicker,.theme-fieldplus .email-link,.theme-fieldplus .feature-copy .feature-tag{color:#1e6e94}
/* theme-med accent (#BD372E) already clears AA on white, left as-is */
.pt-feats li.no{color:#66717c}
.pt-feats li.no:before{color:#67757f}
.pt-cmp thead th .pt-th-sub,.pt-th-sub{color:#5e6a75}

/* Stack 1: "for demonstration only" corner label on marketing product screenshots.
   Non-destructive CSS overlay on the frame, so the source PNGs stay untouched.
   Scoped to .browser-frame (which already has position:relative + overflow:hidden)
   via ::before, since ::after is the top accent bar. Covers both the direct-img
   and .bf-peek screenshot structures. */
.browser-frame::before{
  content:"for demonstration only";
  position:absolute;bottom:9px;right:11px;z-index:6;
  font-size:.6rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:rgba(255,255,255,.92);background:rgba(11,22,34,.72);
  padding:3px 8px;border-radius:5px;pointer-events:none;
}

/* ============================================================
   EMBEDDED-TOOL CHROME COLLAPSE
   When a tool page (/app/*.html) runs INSIDE a workspace iframe, its own
   app-bar and tool hero are pure duplication: the workspace already shows the
   line header, the tab row, and the account selector directly above the frame.
   Stacked, they ate roughly the top third of the viewport, so a rep testing a
   tool saw more header than tool. Verified against the live screenshots
   2026-07-18.

   The <html> element gets .is-framed set by an inline script at the very top of
   each tool page (see the framed-detect snippet). Keying off that class rather
   than off @media or JS-toggled inline styles means the collapse happens before
   first paint, so there is no flash of the full header then a jump.

   Standalone (opening the tool directly, not through a workspace) is unchanged:
   without .is-framed every rule below is inert. The footer is left alone; it is
   short and carries the legal disclaimer. */
html.is-framed .app-bar { display: none !important; }
/* The dark .ws-top bar (back link + tool title) is the workspace tools' own top
   chrome. Inside a workspace iframe the workspace already shows that bar once
   above the frame, so the tool's own one stacks a second dark header band. Hide
   it when framed. Standalone it stays and carries the back-to-dashboard link. */
html.is-framed .ws-top { display: none !important; }
/* ProxiMap's ported chrome also carries a white .ws-tabs row holding just its
   own label and the account menu proxi-topbar appends. Inside a workspace the
   shell already shows both, so framed this row is a second header band with a
   duplicate account menu. Hide it when framed; the workspaces and review-studio
   are never framed, so their real tab bars are untouched. */
html.is-framed .ws-tabs { display: none !important; }
html.is-framed .tool-hero,
html.is-framed .tool-hero-inner { display: none !important; }
/* The cookie notice and disclaimer strip are injected by proxi-notices.js,
   which skips them entirely when framed (the workspace shell shows both once).
   This rule is a belt-and-suspenders catch in case either still lands. */
html.is-framed #pxToolDisclaimer,
html.is-framed #pxToolDisclaimerChip { display: none !important; }
/* Reclaim the space the sticky app-bar used to hold. */
html.is-framed body { padding-top: 0 !important; }

/* ============================================================
   Collapsible left search rail (proxi-rail.js) on the account
   tools. Default expanded. Collapsed shrinks the controls column
   to a thin spine and hands the results table the full width;
   hovering the spine peeks the panel back as an overlay so the
   table keeps its width. No em dashes, keyed off classes the
   script adds so it is inert everywhere else.
   ============================================================ */
.rail-host { position: relative; transition: grid-template-columns .18s ease; }
.rail-host.no-anim { transition: none !important; }
.rail-collapse {
  position: absolute; top: 8px; right: 8px; z-index: 3;
  width: 26px; height: 26px; border-radius: 7px;
  border: 1px solid #d7dee4; background: #fff; color: #46626E;
  cursor: pointer; font-size: 12px; line-height: 1; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.rail-collapse:hover { border-color: var(--accent, #0E7C86); color: var(--accent, #0E7C86); }
.rail { position: relative; }

/* The slim spine, only visible once collapsed. */
.rail-spine {
  display: none;
  width: 40px; align-self: stretch; min-height: 220px;
  border: 1px solid var(--pm-border, #e3e8ee); border-radius: 12px;
  background: #fff; cursor: pointer; padding: 12px 0;
  flex-direction: column; align-items: center; gap: 12px;
  color: #46626E; font-family: inherit;
}
.rail-spine:hover { border-color: var(--accent, #0E7C86); color: var(--accent, #0E7C86); box-shadow: 0 6px 18px rgba(30,45,58,.08); }
.rail-spine-ico { font-size: 16px; line-height: 1; }
.rail-spine-txt {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: 12px; font-weight: 800; letter-spacing: .04em; white-space: nowrap;
}

/* Collapsed: first grid column becomes the 40px spine, the panel hides. */
.rail-host.rail-collapsed { grid-template-columns: 40px 1fr !important; }
.rail-host.rail-collapsed > .rail { display: none; }
.rail-host.rail-collapsed > .rail-spine { display: flex; }

/* Peek: while collapsed and hovered, slide the full panel out as an overlay on
   top of the table rather than resizing the grid, so the table never reflows. */
.rail-host.rail-collapsed.rail-peek > .rail {
  display: block; position: absolute; top: 0; left: 0; z-index: 20;
  width: 300px; max-width: 84vw;
  box-shadow: 0 18px 44px rgba(30,45,58,.22);
  border: 1px solid var(--pm-border, #e3e8ee); border-radius: 12px;
  background: #fff; max-height: 82vh; overflow: auto;
}

@media (max-width: 820px) {
  /* On narrow screens the panel already stacks above the table, so the collapse
     affordance would just hide the controls with no width to reclaim. Disable. */
  .rail-collapse, .rail-spine { display: none !important; }
  .rail-host.rail-collapsed { grid-template-columns: 1fr !important; }
  .rail-host.rail-collapsed > .rail { display: block !important; position: static; width: auto; box-shadow: none; }
}

/* Map territory designer: its left column is wider (320px) and holds several
   panels, so the peek overlay matches that width. Same collapse behaviour. */
.rail-host.rail-collapsed.rail-peek > .rail.rail-mapcol { width: 320px; }
.rail .rail-collapse { }
.rail-mapcol { position: relative; }
@media (max-width: 900px) {
  .rail-collapse, .rail-spine { display: none !important; }
  .layout.rail-host.rail-collapsed { grid-template-columns: 1fr !important; }
  .layout.rail-host.rail-collapsed > .rail { display: block !important; position: static; width: auto; box-shadow: none; }
}

/* The health system a hospital files under, from HCRIS Worksheet S-2. Teal to
   match ProxiMap and the other cross-cutting facets, because a system is not a
   property of one line. */
.chain-chip{display:inline-block;margin-left:6px;font-size:11px;font-weight:700;color:#0E7C86;background:rgba(14,124,134,.08);border:1px solid rgba(14,124,134,.22);border-radius:999px;padding:1px 7px;text-decoration:none;white-space:nowrap;max-width:190px;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.chain-chip:hover{background:rgba(14,124,134,.16)}
.chain-chip{cursor:pointer;font-family:inherit}
.chain-chip.on{background:#0E7C86;color:#fff;border-color:#0E7C86}