/* Hurme Geometric Sans 3 */
@font-face{font-family:'Hurme Geometric Sans 3';src:url('fonts/hurme-light.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Hurme Geometric Sans 3';src:url('fonts/hurme-regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Hurme Geometric Sans 3';src:url('fonts/hurme-semibold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Hurme Geometric Sans 3';src:url('fonts/hurme-bold.woff2') format('woff2');font-weight:700;font-display:swap}
/* Perspectiv website: the one shared stylesheet.
   Pages still carry layout in inline styles (from the design canvas), but their text sizes,
   weights, font and colours point at the tokens below, so changing a token changes every page.
   tools/tokens.py reads this :root block; keep one token per line. */

/* Title fonts. --font-heading picks one; browsers only download the one in use.
   Gilroy has every weight, so titles keep their own weights. ITC Avant Garde (the Veratas title font) has only regular. */
@font-face{font-family:'Gilroy';src:url('fonts/gilroy-regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Gilroy';src:url('fonts/gilroy-medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Gilroy';src:url('fonts/gilroy-semibold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Gilroy';src:url('fonts/gilroy-bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'ITC Avant Garde';src:url('fonts/avant-garde.woff2') format('woff2');font-weight:400;font-display:swap}

/* =====================================================================
   Design tokens
   ===================================================================== */
:root{
  /* Type */
  --font:'Poppins', system-ui, sans-serif; /* body text (back to Poppins, 2026-10-20) */
  --font-heading:'ITC Avant Garde', 'Poppins', system-ui, sans-serif; /* h1, h2, h3, h5, h6, the home tagline and the blue line under page titles; body text stays --font (Poppins). Avant Garde has one weight (regular), so titles show in it whatever their weight */
  --font-ui:'Gilroy', 'Poppins', system-ui, sans-serif; /* the top menu, mega menus and footer column titles */
  --fw-regular:400;
  --fw-medium:500;
  --fw-semibold:600;
  --fw-bold:700;
  --fs-display:clamp(38px, 6vw, 60px);    /* home page hero title */
  --fs-display-sm:clamp(28px, 3.4vw, 36px); /* home page section headings */
  --fs-tagline:clamp(20px, 2.4vw, 26px);  /* home page line under the hero title */
  --fs-h1:40px;        /* page titles */
  --fs-h2:30px;        /* closing call-to-action and large section headings */
  --fs-h3:26px;        /* section headings */
  --fs-h4:22px;        /* sub-section headings, FAQ heading */
  --fs-h5:19px;        /* module names, the promise line under a title */
  --fs-h6:15px;        /* feature group headings, buttons */
  --fs-menu:14.5px;     /* the top menu links */
  --fs-stat:40px;      /* large figures */
  --fs-lead:17px;      /* intros under page titles, guide text, card titles */
  --fs-intro:16px;     /* the intro paragraph in the title band */
  --fs-body:16.5px;      /* default text, bullets, footer */
  --fs-body-sm:13.5px; /* supporting text, header button */
  --fs-small:13px;     /* breadcrumbs, captions, form labels */
  --fs-xs:11.5px;      /* status pills and labels */
  --fs-eyebrow:13px;   /* small coloured line above a heading */
  --lh-tight:1.1;
  --lh-heading:1.2;
  --lh-snug:1.4;
  --lh-ui:1.5;
  --lh-body:1.6;
  --lh-prose:1.75;

  /* Colour */
  --blue:#0B63C4;          /* links, accents, icons */
  --blue-dark:#094E9A;     /* link hover */
  --accent:#4AA3F4;        /* brand accent (logo mark), focus rings */
  --sky:#6BB3F6;           /* buttons on navy */
  --sky-dark:#4FA5F3;      /* button hover on navy */
  --sky-light:#8CC4F8;     /* links on navy */
  --navy:#16314F;          /* headings, dark bands, primary buttons */
  --navy-dark:#0E2238;     /* primary button hover */
  --button:var(--navy);   /* dark buttons (header "Apply", home hero) */
  --button-hover:var(--navy-dark);
  --logo-text:#1E2833;     /* the "perspectiv" text in the logo (images/perspectiv-logo-ink.png) */
  --heading:var(--logo-text); /* h2 and h3: the logo text colour (h1 uses --h1); white on navy bands */
  --fw-heading:600;        /* titles: semibold (Outfit trial) */
  --h1:#1E2833;            /* h1: the text colour of the Gilroy Bold logo that was tried */
  --h1-accent:#0E6AE8;     /* the coloured words in an h1 */
  --ink:#16181D;           /* default text */
  --text:#2F3A45;          /* feature lists */
  --prose:#3B4450;         /* paragraphs, top menu links */
  --muted:#4D5562;         /* intros, card text */
  --grey:#5B6170;          /* footer text */
  --soft:#6B7480;          /* breadcrumbs, meta, header search */
  --bullet:#8AA8CC;        /* bullet dots */
  --on-dark:#C7D3E2;       /* text on navy */
  --white:#ffffff;
  --blue-wash:#F3F8FE;     /* title band, hover backgrounds */
  --blue-mist:#EEF5FD;     /* selected choices */
  --blue-tint:#E6F0FC;     /* icon tiles */
  --footer-bg:#F5F7F9;
  --menu-bg:#FAFCFE;       /* mega menu panels: the soft blue near the bottom of band-loops.webp */
  --r-btn:4px;             /* corners: buttons and small boxes (understated, 2026-10-19; were 8px) */
  --r-tag:4px;             /* corners: status pills and tags (were fully round) */
  --r-box:6px;             /* corners: inputs, tiles, menu items (were 10px) */
  --r-card:8px;            /* corners: cards, panels and photos (were 12-16px) */
  --line:#E1E6E9;          /* card and list borders */
  --line-soft:#E8EDF2;     /* header and section rules */
  --line-footer:#E3E8EE;
  --line-strong:#DCE3EC;   /* module dividers */
  --line-blue:#C3D3E6;     /* outline buttons, card hover */
  --line-input:#C9D1D8;    /* form fields */
  --line-choice:#D5DCE2;   /* form choice cards */
  --line-search:#D5DDE6;   /* header search box */
  --beta:#0B5E3B;          /* "Beta Q2 2027" pill text */
  --beta-bg:#D6F0E2;
  --beta-dot:#1E9E5A;
  --alpha:#4B2E83;         /* "Alpha Q1 2027" pill text */
  --alpha-bg:#ECE6F7;
  --alpha-dot:#7B5BC4;
  --soon:#7A4A00;          /* "Coming soon" pill text */
  --soon-bg:#FCEBCF;
  --soon-dot:#D98A1C;
  --planned:#3D4552;       /* "Planned" and "Later" pill text */
  --planned-bg:#E6E9ED;
  --planned-dot:#A3ACB6;
  --error:#A33A2B;
  --mark:#FFF1B8;          /* search match highlight */
}

/* Tablets and phones: smaller page titles and large headings. The only place the scale changes by width. */
@media (max-width:900px){
  :root{--fs-h1:36px}
}
@media (max-width:600px){
  :root{--fs-h1:32px;--fs-h2:26px}
}

/* ---------- Base ---------- */
body{margin:0;background:var(--white)}
a{color:var(--blue)}
a:hover{color:var(--blue-dark)}
nav a,footer a{text-decoration:none}
/* Titles in the heading font (--font-heading). font-synthesis:none stops the browser faking a bold when the font
   has only one weight (ITC Avant Garde); a font with every weight (Gilroy) still shows the weight the page gives. */
h1,h2,h3,h5,h6,.hp-tagline,.page-promise{font-family:var(--font-heading);font-synthesis:none}
h1,h2,h3,h5,h6{font-weight:var(--fw-heading) !important}  /* .hp-tagline: "Every angle. One view." on the home page */
/* h1, h2 and h3 in --heading, over any colour the page sets; on navy bands (white text) they stay white. */
h1,h2,h3{color:var(--heading) !important}
h1{--heading:var(--h1)}
h1 span[style*="color"]{color:var(--h1-accent) !important}
[style^="color: var(--white)"],[style*="; color: var(--white)"]{--heading:var(--white)}
footer a:hover{text-decoration:underline}
.visually-hidden{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* ---------- Top menu, title band and footer (every page but home) ---------- */
/* header menu: Gilroy SemiBold */
.site-nav a,.hp-nav a{font-family:var(--font-ui);font-weight:var(--fw-medium) !important;font-synthesis:none}
.site-nav a.hp-btn,.hp-nav a.hp-btn{font-weight:var(--fw-semibold) !important}
.site-nav > div,.hp-nav > div{gap:18px !important}
@media (min-width:1240px){.site-nav > div,.hp-nav > div{gap:26px !important}}
/* menu links centred between the logo and the Search box (wide screens) */
@media (min-width:1000px){.site-nav > div,.hp-nav > div{flex:1 1 auto}.site-nav > div > :first-child,.hp-nav > div > :first-child,.site-nav .ps-btn,.hp-nav .ps-btn{margin-left:auto}}
.site-nav a.nl{color:var(--prose);font-size:var(--fs-menu)}
.site-nav a.nl:hover{color:var(--blue)}
.site-nav a.nb{background:var(--button);color:var(--white)}
.site-nav a.nb:hover{background:var(--button-hover);color:var(--white)}
footer a:hover{color:var(--blue) !important}
main ul:not([style*="grid"]):not(.mods):not(.sitemap-list)>li+li{margin-top:4px}
main ul[style*="grid"]{row-gap:18px !important}
.hero-band>div{position:relative}
.hero-band>div::after{content:"";position:absolute;left:24px;right:24px;bottom:0;border-top:1px solid var(--line-soft)}
@media(max-width:760px){
  header{position:relative !important}  /* not sticky on phones; still holds the menu panels */
}
/* ---------- Header search link (every page) ---------- */
/* a plain link with a magnifier, like Adverro's */
.ps-btn{display:inline-flex;align-items:center;gap:7px;color:var(--prose);font-size:var(--fs-menu);text-decoration:none}
.ps-btn:hover{color:var(--blue)}
.ps-btn svg{width:15px;height:15px}
/* ---------- Industry, solution, guide and comparison pages (make_pages.py) ---------- */
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;font-size:var(--fs-body);font-weight:var(--fw-semibold);color:var(--navy)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';flex:none;font-size:var(--fs-h4);font-weight:var(--fw-regular);color:var(--blue);line-height:1}
.faq details[open] summary::after{content:'\2212'}
.faq summary:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.faq .answer{margin:0 0 20px;max-width:760px;font-size:var(--fs-body);line-height:1.7;color:var(--prose)}
.prose p{margin:0 0 16px;font-size:var(--fs-body);line-height:1.75;color:var(--prose)}
.prose ul,.prose ol{margin:0 0 18px;padding-left:22px;font-size:var(--fs-body);line-height:1.75;color:var(--prose)}
.prose li{margin:0 0 6px}
.prose h2{margin:44px 0 14px;font-size:var(--fs-h3);font-weight:var(--fw-semibold);color:var(--navy);letter-spacing:-0.01em}
.prose h3{margin:26px 0 8px;font-size:var(--fs-h5);font-weight:var(--fw-semibold);color:var(--navy)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:18px}
.cards a{display:block;padding:22px 24px;border:1px solid var(--line);border-radius:var(--r-card);text-decoration:none;color:var(--ink);transition:transform .18s ease,box-shadow .18s ease}
.cards a:hover,.cards a:focus-visible{transform:translateY(-3px);box-shadow:0 0 0 1px var(--line-blue),0 10px 22px rgba(22,49,79,0.10)}
.cards strong{display:block;font-size:var(--fs-lead);font-weight:var(--fw-semibold);color:var(--blue);margin-bottom:6px}
.cards span{font-size:var(--fs-small);line-height:1.6;color:var(--muted)}
.mods{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.mods li{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;padding:16px 0;border-bottom:1px solid var(--line)}
.mods a{font-weight:var(--fw-semibold);font-size:var(--fs-lead)}
.mods p{flex:1 1 100%;margin:0;font-size:var(--fs-body);line-height:1.6;color:var(--muted)}
/* ---------- Area pages (make_areas.py) ---------- */
.groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 32px}
@media(max-width:760px){
  .groups{grid-template-columns:1fr}
}
/* ---------- Platform page ---------- */
.tile{transition:transform .18s ease, box-shadow .18s ease}
.tile:hover,.tile:focus-visible{transform:translateY(-3px);box-shadow:0 0 0 1px var(--line-blue), 0 12px 26px rgba(22,49,79,0.10) !important}
.plat{display:block}
.plat-nav{position:sticky;top:78px;z-index:5;background:var(--white);display:flex;flex-wrap:wrap;gap:8px;padding:14px 0;margin-bottom:8px}
.plat-nav a{padding:9px 18px;border-radius:var(--r-btn);font-size:var(--fs-body);font-weight:var(--fw-semibold);color:var(--navy);background:var(--white);border:1px solid #C9D6E5;box-shadow:0 1px 1px rgba(22,49,79,0.05);text-decoration:none;transition:background .15s ease,color .15s ease,border-color .15s ease,transform .15s ease}
.plat-nav a:hover{color:var(--blue);border-color:var(--blue)}
.plat-nav a.on{color:var(--white);background:var(--navy);border-color:var(--navy);box-shadow:none}
.plat-body section{scroll-margin-top:96px !important}
.plat-body section{grid-template-columns:1fr 1fr;column-gap:56px;align-items:start}
.plat-body section>div:first-child,.plat-body section>p,.plat-body section>a{grid-column:1/-1}
.plat-body h2:focus{outline:none}
@media(max-width:820px){
  .plat-body section{grid-template-columns:1fr}
  .plat-nav a{padding:7px 12px}
}
@media(max-width:760px){
  .plat-nav{top:0}
}
/* ---------- Home page ---------- */
.hp{font-family:var(--font);color:var(--ink);background:var(--white)}
.hp-wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.hp-nav a.hp-link{color:var(--prose);font-size:var(--fs-menu)}
.hp-nav a.hp-link:hover{color:var(--blue)}
.hp-btn{display:inline-block;font-size:var(--fs-h6);font-weight:var(--fw-semibold);padding:11px 20px;border-radius:var(--r-btn);text-decoration:none;transition:background .15s ease, box-shadow .15s ease}
.hp-btn-dark{background:var(--button);color:var(--white)}
.hp-btn-dark:hover{background:var(--button-hover);color:var(--white)}
.hp-btn-line{background:var(--white);color:var(--navy);box-shadow:inset 0 0 0 1px #B9C7D8}
.hp-btn-line:hover{color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}
.hp-btn-light{background:var(--sky);color:var(--navy)}
.hp-btn-light:hover{background:var(--sky-dark);color:var(--navy)}
.hp-hero{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--blue-wash) 0%,var(--white) 78%)}
.hp-ribbon{position:absolute;left:50%;top:-160px;width:max(1560px,100vw);height:auto;opacity:0.6;transform:translate(-50%,27%) scale(-1,0.8);pointer-events:none;user-select:none}
.hp-lines{position:absolute;left:0;top:238px;width:100%;height:620px;pointer-events:none}
.hp-kh{position:relative;overflow:hidden}
.hp-lines-kh{top:auto;bottom:0;height:70%}
.hp-kh>.hp-wrap{position:relative;z-index:1}
.hp-lines path{vector-effect:non-scaling-stroke}
.hp-shot{border-radius:var(--r-card);box-shadow:0 0 0 1px #DCE4EE, 0 24px 56px rgba(22,49,79,0.14);background:var(--white);overflow:hidden}
.hp-eyebrow{margin:0 0 12px;font-size:var(--fs-eyebrow);font-weight:var(--fw-semibold);color:var(--blue)}
.hp-h2{margin:0;font-size:var(--fs-display-sm);font-weight:var(--fw-medium);letter-spacing:-0.02em;line-height:1.2;color:var(--navy)}
.hp-split{display:flex;flex-wrap:wrap;align-items:center;gap:48px 72px;padding:104px 24px}
.hp-split>.hp-text{flex:1 1 360px;min-width:0}
.hp-split>.hp-pic{flex:1.15 1 440px;min-width:0}
.hp-feats{list-style:none;margin:30px 0 0;padding:0;display:flex;flex-direction:column;gap:24px}
.hp-feats li{display:flex;gap:16px;align-items:flex-start}
.hp-feats svg{flex:none;margin-top:2px}
.hp-feats strong{display:block;font-size:var(--fs-lead);font-weight:var(--fw-semibold);color:var(--ink)}
.hp-feats span{display:block;font-size:var(--fs-body-sm);line-height:1.5;color:var(--grey)}
.hp-more{display:inline-block;margin-top:28px;font-size:var(--fs-body);font-weight:var(--fw-semibold);text-decoration:none}
.hp-areas{display:grid;grid-template-columns:repeat(3,1fr);gap:8px 32px;margin-top:36px}
.hp-area{display:flex;gap:16px;align-items:flex-start;padding:18px 16px;border-radius:var(--r-box);text-decoration:none;color:inherit;transition:background .15s ease}
.hp-area:hover,.hp-area:focus-visible{background:var(--blue-wash);color:inherit}
.hp-area svg{flex:none;margin-top:2px}
.hp-area-name{display:block;font-size:var(--fs-lead);font-weight:var(--fw-semibold);color:var(--navy)}
.hp-area-status{display:block;margin-top:2px;font-size:var(--fs-body-sm);color:var(--soft)}
.hp-area-more{display:block;margin-top:10px;font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);color:var(--blue)}
.hp-mods{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:7px;font-size:var(--fs-body-sm);line-height:1.35;color:var(--text)}
.hp-mods li{display:flex;align-items:center;gap:9px;margin:0 !important}
.hp-dot{flex:none;width:7px;height:7px;border-radius:50%}
.hp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.hp-mods-row{flex-direction:row;flex-wrap:wrap;gap:8px 22px;margin-top:10px}
.hp-legend{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:14px;font-size:var(--fs-small);color:var(--grey)}
.hp-legend span{display:inline-flex;align-items:center;gap:7px}
.hp-inds{display:flex;margin-top:28px;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.hp-inds a{flex:1 1 auto;white-space:nowrap;padding:22px clamp(6px,1.6vw,24px);text-align:center;font-size:var(--fs-body);color:var(--prose);text-decoration:none;border-left:1px solid var(--line-soft);transition:color .15s ease, background .15s ease}
.hp-inds a:first-child{border-left:0}
.hp-inds a:hover{color:var(--blue);background:#F7FAFE}
@media(max-width:760px){
  .hp-inds{flex-direction:column}
  .hp-inds a{border-left:0;border-top:1px solid var(--line-soft);padding:16px 0;text-align:left}
  .hp-inds a:first-child{border-top:0}
}
@media(max-width:900px){
  .hp-areas{grid-template-columns:repeat(2,1fr)}
  .hp-ribbon{top:-80px;width:max(900px,260%)}
}
@media(max-width:600px){
  .hp-areas{grid-template-columns:1fr}
  .hp-split{padding:72px 24px}
}

/* ---------- Search page (search.html, search.js) ---------- */
.site-search{position:relative;max-width:680px;margin-top:28px}
.site-search input{box-sizing:border-box;width:100%;padding:10px 14px 10px 42px;border:1px solid var(--line-search);border-radius:var(--r-box);background:var(--white);font:inherit;font-size:var(--fs-body);color:var(--ink);box-shadow:0 8px 24px rgba(22,49,79,0.06)}
.site-search input::placeholder{color:var(--soft)}
.site-search input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(74,163,244,0.35)}
.site-search svg{position:absolute;left:15px;top:50%;width:16px;height:16px;margin-top:-8px;color:var(--soft);pointer-events:none}
.search-results{max-width:1200px;margin:0 auto;padding:36px 24px 64px}
.search-results[hidden],.search-browse[hidden],.search-tabs[hidden]{display:none}
.search-tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;box-shadow:inset 0 -1px 0 var(--line);margin-bottom:8px}
.search-tabs::-webkit-scrollbar{display:none}
.search-tab{flex:none;display:flex;align-items:center;gap:8px;white-space:nowrap;padding:12px 18px;border:0;border-bottom:2px solid transparent;background:none;font:inherit;font-size:var(--fs-body);font-weight:var(--fw-medium);color:var(--muted);cursor:pointer}
.search-tab:hover{color:var(--blue)}
.search-tab.active{color:var(--navy);border-bottom-color:var(--blue)}
.search-tab:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
.search-select{display:none}
.tab-count{min-width:22px;padding:1px 7px;border-radius:var(--r-tag);background:var(--planned-bg);color:var(--planned);font-size:var(--fs-xs);font-weight:var(--fw-bold);text-align:center}
.search-tab.active .tab-count{background:var(--blue-tint);color:var(--blue)}
.result-list{list-style:none;margin:0;padding:0}
.result-list li{display:flex;align-items:flex-start;gap:24px;padding:18px 4px;border-bottom:1px solid var(--line)}
.result-list a{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;text-decoration:none;color:inherit}
.result-list a:hover .res-title{color:var(--blue);text-decoration:underline}
.res-title{font-size:var(--fs-h6);font-weight:var(--fw-semibold);color:var(--navy);line-height:1.5}
.res-path{font-size:var(--fs-small);color:var(--soft)}
.res-snippet{margin-top:4px;font-size:var(--fs-body);line-height:1.65;color:var(--prose)}
.res-tag{display:inline-block;vertical-align:2px;margin-right:8px;padding:1px 8px;border-radius:var(--r-tag);background:var(--blue-tint);color:var(--blue);font-size:var(--fs-xs);font-weight:var(--fw-bold);line-height:1.6}
.result-list mark{background:var(--mark);color:inherit;border-radius:2px;padding:0 1px}
.res-count{flex:none;min-width:84px;padding-top:2px;text-align:right;font-size:var(--fs-small);line-height:1.3;color:var(--soft)}
.res-count strong{display:block;font-size:var(--fs-h5);font-weight:var(--fw-semibold);color:var(--blue)}
.result-list li.res-none{display:block;padding:24px 4px;border-bottom:0;font-size:var(--fs-body);color:var(--muted)}
.search-empty{margin:24px 0;font-size:var(--fs-body);color:var(--muted)}
.search-browse{max-width:1200px;margin:0 auto;padding:16px 24px 64px}
.sitemap-group{padding:28px 0 8px}
.sitemap-group h2{margin:0 0 14px;font-size:var(--fs-h4);font-weight:var(--fw-semibold);color:var(--navy)}
.sitemap-group h2 .count{margin-left:6px;font-size:var(--fs-body);font-weight:var(--fw-regular);color:var(--soft)}
.sitemap-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 32px}
.sitemap-list li{display:flex;flex-direction:column;padding:12px 0;border-top:1px solid var(--line)}
.sitemap-list a{font-size:var(--fs-body);font-weight:var(--fw-semibold);color:var(--navy);text-decoration:none}
.sitemap-list a:hover{color:var(--blue)}
.sitemap-list small{font-size:var(--fs-small);color:var(--soft)}
@media(max-width:900px){
  .sitemap-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Narrower screens: the tabs wrap into rows of pills, so every tab stays visible */
@media(max-width:1100px){
  .search-tabs{flex-wrap:wrap;gap:8px;overflow:visible;box-shadow:none;margin-bottom:18px}
  .search-tab{border:1px solid var(--line);border-radius:var(--r-tag);padding:6px 8px 6px 14px}
  .search-tab.active{border-color:var(--blue);background:var(--blue-wash)}
}
/* Phones: a dropdown replaces the pills */
@media(max-width:720px){
  .search-tabs{display:none}
  .search-select{display:flex;align-items:center;gap:12px;margin-bottom:16px;font-size:var(--fs-body);color:var(--muted)}
  .search-select[hidden]{display:none}
  .search-select select{flex:1;min-width:0;padding:10px 36px 10px 14px;border:1px solid var(--line-search);border-radius:var(--r-box);background:var(--white);
    font:inherit;font-size:var(--fs-body);color:var(--ink);appearance:none;
    background-image:linear-gradient(45deg,transparent 50%,var(--soft) 50%),linear-gradient(135deg,var(--soft) 50%,transparent 50%);
    background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat}
  .search-select select:focus-visible{outline:3px solid var(--accent);outline-offset:1px}
}
@media(max-width:600px){
  .sitemap-list{grid-template-columns:1fr}
  .result-list li{gap:12px}
  .res-count{min-width:64px}
}
/* The form pages (signup, ask, suggest) keep their form styles in the page: they style bare elements
   (form, input, select) that other pages also use. Their sizes and colours use the tokens too. */

/* ---------- Footer (every page; written by tools/finish.py), laid out like Adverro's ---------- */
.ft{background:var(--white);color:var(--grey);border-top:1px solid var(--line-soft);font-size:var(--fs-body)}
.ft-main{max-width:1200px;margin:0 auto;padding:64px 24px 48px;display:grid;grid-template-columns:minmax(220px,1fr) auto;gap:48px}
.ft-logo{display:inline-flex}
.ft-logo img{display:block;height:29.5px;width:auto}
.ft-brand p{margin:14px 0 0;max-width:300px;line-height:1.75}
.ft-social{display:inline-flex;align-items:center;gap:8px;margin-top:16px;color:var(--grey)}
.ft-cols{display:grid;grid-template-columns:repeat(4,max-content);gap:32px 56px}
.ft-col{display:flex;flex-direction:column;gap:12px}
.ft-head{margin:0 0 4px;font-family:var(--font-ui);font-weight:var(--fw-bold);font-size:var(--fs-h6);color:var(--h1);font-synthesis:none}
.ft-col a{color:var(--grey)}
.ft-bottom{max-width:1152px;width:calc(100% - 48px);margin:0 auto;padding:22px 0 30px;border-top:1px solid var(--line-footer);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;font-size:var(--fs-small)}
.ft-bottom p{margin:0}
.ft-legal{display:flex;flex-wrap:wrap;gap:24px}
.ft-legal a{color:var(--grey)}
.ft-veratas{color:inherit;text-decoration:none !important}
.ft-bottom,.ft-main{box-sizing:border-box}
@media(max-width:900px){
  .ft-main{grid-template-columns:1fr;gap:36px}
}
@media(max-width:600px){
  .ft-cols{grid-template-columns:1fr 1fr;gap:28px 24px}
  .ft-main{padding:48px 20px 36px}
  .ft-bottom{width:calc(100% - 40px);padding:20px 0 28px}
}

/* ---------- About: intro text with the team photo beside it ---------- */
.about-intro{display:flex;flex-wrap:wrap;align-items:center;gap:40px 56px}
.about-text{flex:1 1 420px;min-width:0}
.about-text > div[style*="max-width"]{max-width:none !important}
.about-photo{flex:1 1 440px;min-width:0;width:100%;max-width:560px;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:60% 40%;border-radius:var(--r-card);box-shadow:0 12px 32px rgba(22,49,79,0.12)}

/* ---------- Top menu mega menus, like Adverro's (markup from tools/finish.py MENU; click, tap and Escape in search.js) ---------- */
.nav-drop{display:inline-flex}
.nav-drop-btn{display:inline-flex;align-items:center;gap:5px;padding:0;border:0;background:none;cursor:pointer;
  font-family:var(--font-ui);font-weight:var(--fw-medium);font-size:var(--fs-menu);color:var(--prose);font-synthesis:none}
.nav-drop-btn svg{width:14px;height:14px;transition:transform .15s ease}
.nav-drop.is-open .nav-drop-btn,.nav-drop:focus-within .nav-drop-btn{color:var(--blue)}
.nav-drop.is-open .nav-drop-btn svg,.nav-drop:focus-within .nav-drop-btn svg{transform:rotate(180deg)}
/* the panel spans the header, right under it */
.mega-panel{position:absolute;top:100%;left:0;right:0;z-index:60;background:var(--menu-bg);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  box-shadow:0 24px 40px -24px rgba(23,50,77,0.28);opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .15s ease,transform .15s ease,visibility 0s linear .15s}
.nav-drop.is-open .mega-panel,.nav-drop:focus-within .mega-panel{opacity:1;visibility:visible;transform:none;transition:opacity .15s ease,transform .15s ease}
@media (hover:hover) and (min-width:1000px){
  .nav-drop:hover .mega-panel{opacity:1;visibility:visible;transform:none;transition:opacity .15s ease,transform .15s ease}
  .nav-drop:hover .nav-drop-btn{color:var(--blue)}
  .nav-drop:hover .nav-drop-btn svg{transform:rotate(180deg)}
  /* a bridge so the pointer can travel from the button down to the panel */
  .nav-drop:hover .nav-drop-btn{position:relative}
  .nav-drop:hover .nav-drop-btn::after{content:"";position:absolute;left:-16px;right:-16px;top:100%;height:30px}
}
.mega{box-sizing:border-box;max-width:1200px;margin:0 auto;padding:28px 24px 32px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 280px;gap:32px}
.mega-wide{grid-template-columns:minmax(0,2fr) 280px}
.mega-3{grid-template-columns:repeat(3,minmax(0,1fr)) 260px;gap:24px}
.mega-wide .mega-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:8px;align-content:start}
.mega-wide .mega-head{grid-column:1 / -1}
.mega-head{margin:0 0 8px;padding:0 12px;font-size:var(--fs-eyebrow);font-weight:var(--fw-semibold);letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
.nav-drop .mega-col a{display:block;padding:10px 12px;border-radius:var(--r-box);text-decoration:none;font-family:var(--font);font-weight:var(--fw-regular) !important}
.nav-drop .mega-col a:hover,.nav-drop .mega-col a:focus-visible{background:var(--white)}
.mega-col b{display:block;font-family:var(--font-ui);font-weight:var(--fw-semibold);font-size:var(--fs-h6);color:var(--h1);font-synthesis:none}
.mega-col a:hover b,.mega-col a:focus-visible b{color:var(--blue)}
.mega-col span{display:block;margin-top:2px;font-size:var(--fs-small);line-height:1.45;color:var(--soft)}
.nav-drop .mega-feature{display:flex;flex-direction:column;align-self:start;padding:12px;border:1px solid var(--line-soft);border-radius:var(--r-card);background:var(--white);
  text-decoration:none;font-family:var(--font);font-weight:var(--fw-regular) !important}
.mega-feature img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:0 0;border-radius:var(--r-btn);margin-bottom:14px}
.mega-label{font-size:var(--fs-xs);font-weight:var(--fw-semibold);letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
.mega-feature b{margin-top:4px;font-family:var(--font-ui);font-weight:var(--fw-bold);font-size:var(--fs-h6);color:var(--h1);font-synthesis:none}
.mega-feature span:last-child{margin-top:4px;font-size:var(--fs-small);line-height:1.45;color:var(--soft)}
.mega-feature:hover{border-color:var(--line-blue)}
.mega-feature:hover b{color:var(--blue)}
@media(max-width:999px){
  .mega,.mega-wide{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:16px 20px 20px;max-height:calc(100vh - 140px);overflow-y:auto}
  .mega-wide .mega-col{grid-column:1 / -1}
  .mega-col span,.nav-drop .mega-feature{display:none}
}
@media(max-width:600px){
  .mega,.mega-wide .mega-col{grid-template-columns:minmax(0,1fr)}
}

/* ---------- Phone and tablet menu (below 1000px): the links row is hidden behind a menu button after the logo
   (tools/finish.py menu_toggle; open and close in search.js). Open, the links stack under the logo row, full width,
   and each mega menu is an expander with its columns one under the other. ---------- */
.nav-toggle{display:none}
@media(max-width:999px){
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;margin:-8px -8px -8px auto;padding:0;
    border:0;border-radius:var(--r-btn);background:none;color:var(--prose);cursor:pointer}
  .nav-toggle svg{width:24px;height:24px}
  .nav-toggle:hover{color:var(--blue)}
  .nav-toggle .x,.is-open > .nav-toggle .bars{display:none}
  .is-open > .nav-toggle .x{display:block}
  .nav-links{display:none !important}
  .is-open > .nav-links{display:flex !important;flex:1 1 100%;flex-direction:column;align-items:stretch !important;gap:0 !important;
    margin-top:14px;padding:6px 0 10px;border-top:1px solid var(--line-soft);max-height:calc(100vh - 90px);overflow-y:auto}
  .nav-links > a,.nav-links .nav-drop-btn{display:flex;width:100%;box-sizing:border-box;justify-content:space-between;align-items:center;padding:12px 0;text-align:left}
  .nav-links .nav-drop{display:block;width:100%}
  .nav-links .ps-btn{justify-content:flex-start;gap:8px}
  .nav-links > a.nb,.nav-links > a.hp-btn{justify-content:center;margin-top:10px}
  .nav-links .mega-panel{display:none;position:static;opacity:1;visibility:visible;transform:none;transition:none;border:0;box-shadow:none;background:transparent}
  .nav-links .nav-drop.is-open .mega-panel{display:block}
  .nav-links .mega,.nav-links .mega-wide{display:block;max-height:none;overflow:visible;padding:0 0 10px 14px;border-left:2px solid var(--line-soft);margin:0 0 6px}
  .nav-links .mega-wide .mega-col{display:block}
  .nav-links .mega-head{margin:10px 0 2px;padding:0}
  .nav-links .nav-drop .mega-col a{padding:8px 0}
}

/* ---------- Photo beside the long text on industry pages (tools/finish.py PAGE_PHOTOS) ---------- */
.prose-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);column-gap:56px;align-items:start}
.prose-split > *{grid-column:1}
.prose-split > .prose-photo{grid-column:2;grid-row:1;position:sticky;top:110px;margin-top:44px;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--r-card);box-shadow:0 12px 32px rgba(22,49,79,0.12)}
@media(max-width:960px){
  .prose-split{grid-template-columns:minmax(0,1fr)}
  .prose-split > .prose-photo{grid-column:1;position:static;margin-top:32px;max-width:560px}
}
/* a photo across the top of a card (Industries page; tools/finish.py card_photos) */
.cards a:has(.card-photo){overflow:hidden}
.cards .card-photo{display:block;width:calc(100% + 48px);height:150px;margin:-22px -24px 18px;object-fit:cover;object-position:50% 35%}

/* the intro paragraph under page titles: 1px smaller than lead text */
.hero-band p[style*="font-size: var(--fs-lead)"]{font-size:var(--fs-intro) !important}

/* every title band (not home) has Denise's soft loops artwork over white */
.hero-band{background:var(--white) url("images/band-loops.webp") right top / cover no-repeat !important}
@media(max-width:760px){
  .hero-band{background-size:cover !important;background-position:70% top !important}
}

/* ---------- Understated corners and buttons (2026-10-19): the pages' inline corners and button padding, toned down here ---------- */
[style*="border-radius: 8px"]{border-radius:var(--r-btn) !important}
[style*="border-radius: 12px"],[style*="border-radius: 14px"],[style*="border-radius: 16px"]{border-radius:var(--r-card) !important}
[style*="border-radius: 20px"]{border-radius:var(--r-tag) !important}
a[style*="padding: 13px 22px"]{padding:11px 18px !important}
a[style*="padding: 10px 18px"]{padding:8px 15px !important}


/* ---------- Mockup round (2026-10-20): pictures and parts added from the builder mockups ---------- */
/* title band with a picture on the right (tools/visuals.py); text first on narrow screens */
.hero-split{display:grid;grid-template-columns:minmax(0,.98fr) minmax(0,1.02fr);gap:40px 56px;align-items:center}
.hero-split h1{max-width:none !important}
.hero-text,.hero-pic{min-width:0}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
/* title-band photos are 16:10, like the product screens; the About team photo keeps its people in view */
.hero-pic .shot-photo{aspect-ratio:16/10}
/* photos (industry pages, About) smaller than the product screens: text 1.2 : photo 0.8 */
@media(min-width:961px){.hero-split:has(.shot-photo){grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}}
.hero-split-sm .shot-photo{object-position:60% 40%}
.hero-note{margin:14px 0 0;font-size:var(--fs-small);line-height:var(--lh-ui);color:var(--soft)}
@media(max-width:960px){
  .hero-split{grid-template-columns:minmax(0,1fr)}
  .hero-pic{max-width:640px}
}
/* a product screen or photo in a soft frame; .shot-pair overlaps two screens */
.shot{display:block;width:100%;height:auto;border-radius:var(--r-card);background:var(--white);box-shadow:0 0 0 1px #DCE4EE,0 18px 44px rgba(22,49,79,0.13)}
.shot-photo{aspect-ratio:3/2;object-fit:cover}
.shot.shot-line{box-shadow:0 0 0 1px #C9D5E2,0 18px 44px rgba(22,49,79,0.13)}  /* a slightly clearer border than .shot (Finance title band) */
.shot-pair{position:relative;padding-bottom:18%}
.shot-pair .shot:first-child{width:86%}
.shot-pair .shot+.shot{position:absolute;right:0;bottom:0;width:64%}
figure.fig{margin:0}
.fig figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;margin-top:12px;font-size:var(--fs-small);line-height:var(--lh-ui);color:var(--soft)}
.fig figcaption a{color:var(--soft)}
.prose .fig{margin:28px 0 32px}
/* status tags, in the module pill colours */
.tag{display:inline-block;padding:3px 10px;border-radius:var(--r-tag);font-size:var(--fs-xs);font-weight:var(--fw-bold);line-height:1.5;white-space:nowrap;vertical-align:middle}
.tag-beta{color:var(--beta);background:var(--beta-bg)}
.tag-alpha{color:var(--alpha);background:var(--alpha-bg)}
.tag-soon{color:var(--soon);background:var(--soon-bg)}
.tag-planned{color:var(--planned);background:var(--planned-bg)}
.tag-blue{color:var(--blue);background:var(--blue-tint)}
.hero-text > .tag{margin-bottom:16px}
/* icon tile */
.ico{flex:none;width:38px;height:38px;border-radius:var(--r-box);background:var(--blue-tint);display:inline-flex;align-items:center;justify-content:center;color:var(--blue)}
.ico svg{width:20px;height:20px}
.hp-feats .ico{display:inline-flex;color:var(--blue);margin-top:0}  /* a tick or icon tile in a feature list: blue and centred (.hp-feats span would grey it and set it to block) */
.hp-feats .ico svg{margin:0;color:var(--blue)}
/* thin beta line under a title band */
.beta-strip{background:var(--blue-mist);border-bottom:1px solid var(--line-soft)}
.beta-strip > div{max-width:1200px;margin:0 auto;padding:12px 24px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:var(--fs-body-sm);color:var(--navy)}
.beta-strip svg{flex:none;width:18px;height:18px;color:var(--blue)}
.beta-strip a{margin-left:auto;font-weight:var(--fw-semibold);text-decoration:none}
/* a section of its own, with an optional eyebrow and heading */
.band{max-width:1200px;margin:0 auto;padding:56px 24px}
.band-tint{background:var(--blue-wash);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.band-head{max-width:760px;margin-bottom:28px}
.band-head h2{margin:0;font-size:var(--fs-h3);line-height:var(--lh-heading);color:var(--navy)}
.band-head p{margin:10px 0 0;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--muted)}
.eyebrow{margin:0 0 10px;font-size:var(--fs-eyebrow);font-weight:var(--fw-semibold);letter-spacing:.06em;text-transform:uppercase;color:var(--blue)}
/* text beside a picture; .flip puts the picture first on wide screens */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:36px 64px;align-items:center}
.split > *{min-width:0}
.split.flip > :first-child{order:2}
.split h2{margin:0;font-size:var(--fs-h3);line-height:var(--lh-heading);color:var(--navy)}
.split p{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--muted)}
@media(max-width:960px){.split{grid-template-columns:minmax(0,1fr)}.split.flip > :first-child{order:0}}
/* one card per module (area pages, roadmap) */
.mod-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}  /* three wide; a short last row starts at the left */
@media(max-width:960px){.mod-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.mod-strip{grid-template-columns:minmax(0,1fr)}}
.mod-strip > a,.mod-strip > div{display:flex;gap:14px;align-items:flex-start;padding:18px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--white);text-decoration:none;color:inherit;transition:transform .18s ease,box-shadow .18s ease}
.mod-strip > a:hover,.mod-strip > a:focus-visible{transform:translateY(-2px);box-shadow:0 0 0 1px var(--line-blue),0 10px 22px rgba(22,49,79,0.08)}
.mod-strip b{display:block;font-size:var(--fs-h6);font-weight:var(--fw-semibold);color:var(--navy)}
.mod-strip .tag{margin-top:6px}
.mod-strip span.line{display:block;margin-top:6px;font-size:var(--fs-small);line-height:var(--lh-ui);color:var(--muted)}
/* numbered steps */
.step-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:14px;counter-reset:step}
.step-cards > li{counter-increment:step;position:relative;margin:0 !important;padding:18px 18px 18px 62px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--white);font-size:var(--fs-body);line-height:var(--lh-ui);color:var(--text)}
.step-cards > li::before{content:counter(step);position:absolute;left:18px;top:16px;width:30px;height:30px;border-radius:50%;background:var(--blue-tint);color:var(--blue);font-weight:var(--fw-bold);font-size:var(--fs-body);display:flex;align-items:center;justify-content:center}
@media(min-width:900px){.step-cards:has(> li:nth-child(8)):not(:has(> li:nth-child(9))),.step-cards:has(> li:nth-child(4)):not(:has(> li:nth-child(5))){grid-template-columns:repeat(4,minmax(0,1fr))}}
.step-cards b{display:block;color:var(--navy);font-weight:var(--fw-semibold)}
.step-cards span{display:block;margin-top:4px;font-size:var(--fs-small);color:var(--muted)}
.step-cards .tag{display:inline-block;margin-top:6px}
/* panels side by side */
.duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:18px}
.pnl{padding:22px 24px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--white)}
.pnl h3{margin:0 0 8px;font-size:var(--fs-h5);color:var(--navy)}
.pnl p{margin:0;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--muted)}
.pnl ul{margin:12px 0 0;padding-left:20px;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text)}
.pnl .tag{margin-bottom:10px}
/* a drawn card in a title band (guides, PSA, use cases): a title and a few rows */
.hero-card{padding:22px 24px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--white);box-shadow:0 18px 44px rgba(22,49,79,0.10)}
.hero-card + .hero-card{margin-top:14px}
.hero-card > b{display:flex;align-items:center;gap:10px;font-size:var(--fs-h6);font-weight:var(--fw-semibold);color:var(--navy)}
.hero-card > b .tag{margin-left:auto}
.hero-card ul{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.hero-card li{display:flex;align-items:center;gap:10px;margin:0 !important;padding:10px 12px;border:1px solid var(--line-soft);border-radius:var(--r-box);font-size:var(--fs-body-sm);color:var(--text)}
.hero-card li .tag{margin-left:auto}
.hero-card li svg{flex:none;width:16px;height:16px;color:var(--blue)}
.hero-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:14px;align-items:start}
.hero-cards .hero-card + .hero-card{margin-top:0}
.hero-card.chain li + li{position:relative}
.hero-card.chain li + li::before{content:"";position:absolute;left:19px;top:-9px;height:8px;border-left:2px solid var(--line-blue)}
/* simple data table */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-card)}
.ptable{width:100%;border-collapse:collapse;font-size:15.5px;line-height:var(--lh-ui);background:var(--white)}
.ptable th,.ptable td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.ptable th{font-size:15px;font-weight:var(--fw-semibold);color:var(--soft);background:var(--blue-wash)}
.ptable td:first-child{font-weight:var(--fw-semibold);color:var(--navy)}
.ptable tr:last-child td{border-bottom:0}
.ptable a{text-decoration:none}
.ptable a:hover{text-decoration:underline}
.prose .table-wrap{margin:8px 0 24px}
/* "On this page" beside a long text (guides, privacy, terms) */
.with-toc{display:grid;grid-template-columns:200px minmax(0,1fr);gap:48px;align-items:start}
.with-toc > *{min-width:0}
.toc{position:sticky;top:110px;padding-top:44px;font-size:var(--fs-small);line-height:var(--lh-ui)}
.toc p{margin:0 0 10px;font-weight:var(--fw-semibold);color:var(--navy)}
.toc ol{list-style:none;margin:0;padding:0;border-left:2px solid var(--line-soft)}
.toc li{margin:0 !important}
.toc a{display:block;padding:5px 0 5px 14px;margin-left:-2px;border-left:2px solid transparent;color:var(--muted);text-decoration:none}
.toc a:hover{color:var(--blue);border-left-color:var(--blue)}
.back-top{display:inline-block;margin-top:24px;font-size:var(--fs-small);font-weight:var(--fw-semibold);text-decoration:none}
/* industry pages: product screens (or a drawn card) beside the long text, staying in view while scrolling */
@media(min-width:961px){.prose-split:has(> .prose-side){grid-template-columns:minmax(0,1fr) minmax(0,500px);column-gap:48px}}
.prose-split > .prose-side{grid-column:2;grid-row:1 / span 4;position:sticky;top:110px;margin-top:44px}
@media(max-width:960px){.prose-split > .prose-side{grid-column:1;grid-row:auto;position:static;margin-top:32px;max-width:560px}}
/* use case pages: "where it usually breaks" and "how Perspectiv connects it" side by side */
.prose .duo-prose{margin-top:44px}
.prose .step-cards,.prose .duo{margin:8px 0 26px;padding:0}
.duo-prose .pnl{padding:26px 28px}
.duo-prose .pnl:last-child{background:var(--blue-wash)}
.duo-prose .pnl h3{font-size:var(--fs-h4)}
.duo-prose .pnl p{margin:0 0 12px}
.prose .duo-prose ul{margin:0;padding-left:20px;font-size:var(--fs-body)}
.prose:has(> .duo-prose){max-width:none !important}
/* area pages: a module's text beside its product screen */
.mod-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px 56px;align-items:start}
.mod-split .groups{grid-template-columns:repeat(2,minmax(0,1fr))}
.mod-pic{position:sticky;top:110px}
@media(max-width:960px){.mod-split{grid-template-columns:minmax(0,1fr)}.mod-pic{position:static;max-width:640px}}
@media(max-width:600px){.mod-split .groups{grid-template-columns:minmax(0,1fr)}}
/* area pages: module cards with an arrow in the corner (make_areas.py module_strip; three wide like every .mod-strip) */
.mod-cards > a{position:relative;padding-right:44px}
.card-arrow{position:absolute;top:20px;right:18px;color:var(--blue)}
.card-arrow svg{display:block;width:18px;height:18px;transition:transform .18s ease}
.mod-cards > a:hover .card-arrow svg{transform:translateX(3px)}
/* area pages: "connected to the rest of your business", three drawn screens (visuals.py AREA_CONNECTED) */
.connected{border-top:1px solid var(--line-soft)}
.connected-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
.connected-cols > div{padding:0 28px;border-left:1px solid var(--line-soft);display:grid;grid-row:span 3;grid-template-rows:subgrid;align-content:start}  /* drawings, headings and text line up across the columns */
.connected-cols > div:first-child{padding-left:0;border-left:0}
.connected-cols > div:last-child{padding-right:0}
.connected-cols h3{margin:22px 0 6px;font-size:var(--fs-h5);color:var(--navy)}
.connected-cols p{margin:0;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--muted)}
@media(max-width:900px){.connected-cols{grid-template-columns:minmax(0,1fr)}.connected-cols > div{padding:0 0 32px;border-left:0;grid-row:auto;grid-template-rows:auto}}
.mini{position:relative;height:214px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--white);box-shadow:0 10px 26px rgba(22,49,79,0.07);font-size:10px;line-height:1.35;color:var(--text);overflow:hidden}
.mini b{font-weight:var(--fw-semibold);color:var(--navy)}
.mini small{display:block;font-size:9px;color:var(--soft)}
.mini-head{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px solid var(--line-soft);font-size:11.5px}
.mini-pill{display:inline-block;padding:1px 7px;border-radius:var(--r-tag);background:var(--beta-bg);color:var(--beta);font-size:9px;font-weight:var(--fw-semibold)}
.mini-select{padding:2px 8px;border:1px solid var(--line);border-radius:var(--r-btn);font-size:9px;color:var(--soft)}
.mini-body{display:flex;padding:10px 12px;gap:12px}
.mini-nav{list-style:none;margin:0;padding:0;width:76px;flex:none;display:flex;flex-direction:column;gap:6px;color:var(--soft)}
.mini-nav li{margin:0 !important;padding:2px 6px;border-radius:var(--r-tag)}
.mini-nav li.on{background:var(--blue-mist);color:var(--blue)}
.mini-main{flex:1;min-width:0}
.mini-main > b{display:block;font-size:11px}
.mini-row{display:grid;grid-template-columns:44% 56%;gap:6px;margin-top:5px}
.mini-row span:first-child{color:var(--soft)}
.mini-wide .mini-row{grid-template-columns:40% 60%}
.mini-over{position:absolute;right:10px;bottom:10px;width:58%;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-box);background:var(--white);box-shadow:0 8px 20px rgba(22,49,79,0.10)}
.mini-bar{display:grid;grid-template-columns:38% 62%;align-items:center;margin-top:5px;color:var(--soft)}
.mini-bar i{display:block;height:6px;border-radius:3px;background:var(--planned-bg);overflow:hidden}
.mini-bar em{display:block;height:100%;border-radius:3px}
.mini-table{display:grid;grid-template-columns:1.3fr .8fr 1fr 1fr;gap:6px 8px;align-items:center}
.mini-table > span:nth-child(-n+4){color:var(--soft);font-size:9px}
.mini-cur{display:inline-block;padding:0 5px;border-radius:var(--r-tag);background:var(--blue-tint);color:var(--blue);font-style:normal;font-size:9px}
.mini-line{display:block;height:5px;border-radius:3px;background:#2F7DE1}
.mini-light{background:#A9CBF2}
/* stacked small cards (the other areas' connected sections) */
.mini-stack{display:grid;gap:8px;align-content:start;font-size:10px;line-height:1.35;color:var(--text)}
.mini-stack.two{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start}
.mini-stack.two > .mini-card:first-child{grid-row:span 2}
.mini-card{padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--white);box-shadow:0 8px 20px rgba(22,49,79,0.06);min-width:0}
.mini-card b{font-weight:var(--fw-semibold);color:var(--navy)}
.mini-card small{display:block;font-size:9px;color:var(--soft)}
.mini-title{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px;font-size:11px}
.mini-name{display:block;font-size:11px;margin-bottom:2px}
.mini-sub{display:block;margin-top:8px;font-size:10px}
.mini-blue{color:var(--blue) !important}
.mini-card .mini-row{grid-template-columns:42% 58%}
.mp-blue{background:var(--blue-tint);color:var(--blue)}
.mp-amber{background:var(--soon-bg);color:var(--soon)}
.mp-grey{background:var(--planned-bg);color:var(--planned)}
.mp-red{background:#FBE3E1;color:#A33A2B}
.mini-av{display:inline-flex;align-items:center;justify-content:center;flex:none;width:20px;height:20px;margin-right:3px;border-radius:50%;background:var(--blue-tint);color:var(--blue);font-style:normal;font-size:8px;font-weight:var(--fw-bold)}
.mini-av.plus{background:var(--white);border:1px solid var(--line);color:var(--soft)}
.mini-person{display:flex;align-items:center;gap:6px;margin-top:6px}
.mini-person > span{min-width:0}
.mini-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.mini-chips span{padding:2px 6px;border-radius:var(--r-tag);background:var(--blue-tint);color:var(--blue);font-size:9px}
.mini-list,.mini-checks,.mini-steps{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.mini-list li,.mini-checks li,.mini-steps li{position:relative;margin:0 !important;padding-left:14px}
.mini-list li::before{content:"";position:absolute;left:2px;top:4px;width:6px;height:6px;border:1.5px solid var(--blue);border-radius:50%}
.mini-checks li::before{content:"";position:absolute;left:0;top:1px;width:9px;height:9px;border:1px solid var(--line-input);border-radius:2px}
.mini-checks li.done::before{background:var(--blue);border-color:var(--blue)}
.mini-steps li::before{content:"";position:absolute;left:0;top:2px;width:8px;height:8px;border:1.5px solid var(--line-input);border-radius:50%}
.mini-steps li.done::before{background:var(--beta-dot);border-color:var(--beta-dot)}
.mini-steps li.now::before{border-color:var(--blue);background:var(--blue-tint)}
.mini-tabs{display:flex;gap:10px;margin-top:6px;color:var(--soft)}
.mini-tabs .on{color:var(--blue);border-bottom:1.5px solid var(--blue)}
.mini-weeks{display:inline-flex;gap:2px;margin-left:auto}
.mini-weeks i{width:9px;height:9px;border-radius:2px}
.wk-f{background:#2F7DE1}
.wk-p{background:#A9CBF2}
.wk-n{background:var(--planned-bg)}
.mini-legend{display:flex !important;align-items:center;gap:4px;margin-top:8px}
.mini-legend i{width:7px;height:7px;border-radius:2px;margin-left:6px}
.mini-cols{display:flex;align-items:flex-end;gap:6px;height:52px;margin-top:4px}
.mini-cols i{flex:1;border-radius:2px 2px 0 0;background:#2F7DE1}
.mini-cols i.lt{background:#A9CBF2}
.mini-tbl{display:grid;gap:5px 8px;align-items:center;margin-top:6px}
.mini-tbl .h{color:var(--soft);font-size:9px;padding-bottom:3px;border-bottom:1px solid var(--line-soft)}
.mini-tbl .mini-line{height:5px}
.mini-filters{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px}
.mini-linechart{display:block;width:100%;height:64px;margin:2px 0 6px}
.mini-tree{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:5px}
.mini-tree li{margin:0 !important;padding:3px 6px 3px 18px;position:relative;border-radius:var(--r-tag)}
.mini-tree li::before{content:"";position:absolute;left:4px;top:5px;width:9px;height:8px;border:1.5px solid var(--blue);border-radius:2px}
.mini-tree li:nth-child(3){background:var(--blue-mist)}
.mini-tree small{display:block}
.mini-ol{margin:4px 0 0;padding-left:16px;display:flex;flex-direction:column;gap:3px}
.mini-ol li{margin:0 !important}
.mini-p{margin:6px 0 0 !important;font-size:9.5px !important;line-height:1.45 !important;color:var(--muted) !important}
/* a heading above an area's module boxes (Admin, Framework) */
.strip-head{margin:0 0 18px;font-size:var(--fs-h4);color:var(--navy)}
.mini-btn{display:inline-block;margin-top:6px;padding:2px 8px;border-radius:var(--r-btn);background:var(--blue);color:var(--white);font-size:9px}
.mini-chart{margin-top:10px;padding:6px 8px;border:1px solid var(--line-soft);border-radius:var(--r-box)}
.mini-chart svg{display:block;width:100%;height:46px;margin-top:4px}
/* area pages: a module with its own page lists only its feature groups (make_areas.py module_summary) */
.mod-groups{margin:0;font-size:var(--fs-body-sm);line-height:var(--lh-body);font-weight:var(--fw-semibold);color:var(--blue)}
/* module pages (make_pages.py module_page): what it covers in two columns, Later items and a short callout */
.mod-feats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 48px;margin-top:0}
@media(max-width:760px){.mod-feats{grid-template-columns:minmax(0,1fr)}}
.mod-feats > li{margin:0 !important}  /* rows line up across the two columns */
.mod-later{display:flex;flex-wrap:wrap;gap:8px 20px;margin:24px 0 0;font-size:var(--fs-small);color:var(--muted)}
.mod-later > span{display:inline-flex;align-items:center;gap:8px}
.mod-note{margin:20px 0 0;padding:12px 16px;border-left:3px solid var(--accent);background:var(--white);border-radius:var(--r-box);font-size:var(--fs-body-sm);line-height:var(--lh-ui);color:var(--navy)}
.fig-link{display:block;text-decoration:none;color:inherit}
.fig-link:hover figcaption span{color:var(--blue)}
@media(max-width:960px){.with-toc{grid-template-columns:minmax(0,1fr)}.toc{display:none}}
/* Menus, search controls, counts and step numbers keep their own 14px size; reading text is 16.5px */
.faq summary,.plat-nav a,.hp-more,.hp-inds a,.site-search input,.search-tab,.sitemap-group h2 .count,.sitemap-list a,.search-select,.ft,.step-cards > li::before{font-size:14px}
/* Cookie notice: edge to edge along the bottom of the window */
.cookie-note{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:16px 24px;border-top:1px solid #c3cfdc;background:#eef2f6;box-shadow:0 -12px 28px -20px rgba(23,50,77,.3);font-family:var(--font);font-size:14px;line-height:1.55}
.cookie-note__inner{display:flex;align-items:center;gap:24px;max-width:1200px;margin-inline:auto}
.cookie-note p{margin:0;flex:1;color:var(--navy)}
.cookie-note a{color:var(--navy);text-decoration:underline}
.cookie-note a:hover{color:var(--blue)}
.cookie-note__actions{display:flex;gap:10px;flex:none}
.cookie-note__btn{min-height:34px;padding:0 16px;border:1px solid var(--navy);border-radius:4px;background:#fff;color:var(--navy);font:inherit;font-size:14px;font-weight:500;cursor:pointer}
.cookie-note__btn:hover{border-color:var(--blue);color:var(--blue)}
.cookie-note__btn--primary{border-color:var(--blue);background:var(--blue);color:#fff}
.cookie-note__btn--primary:hover{border-color:var(--blue-dark);background:var(--blue-dark);color:#fff}
@media (max-width:640px){.cookie-note__inner{flex-direction:column;align-items:stretch;gap:12px}.cookie-note__btn{flex:1}}
/* Display buttons: right-hand end of the breadcrumb line across the full page width; top right of the hero on
   home pages; the footer on any other page */
.crumb-row{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%}
.crumb-row>:first-child{min-width:0}
.crumb-row--home{position:absolute;z-index:2;width:auto;justify-content:flex-end}
.text-size{display:inline-flex;align-items:center;gap:4px;flex:none;margin-left:auto}
.text-size__btn{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:28px;padding:0 8px;border:1px solid rgba(23,50,77,.18);border-radius:4px;background:rgba(255,255,255,.4);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--navy);font:inherit;font-family:var(--font);font-size:13px;font-weight:500;line-height:1;cursor:pointer}
.text-size__btn:hover,.text-size__btn[aria-pressed="true"]{border-color:var(--blue);color:var(--blue)}
.text-size__btn svg{width:16px;height:16px}
.crumb-row--home .text-size__btn{background:rgba(255,255,255,.65);border-color:rgba(23,50,77,.22)}
html[data-text="lg"] main{zoom:1.125}
html[data-text="xl"] main{zoom:1.25}
html[data-contrast="high"]{--ink:#0f1e2e;--navy:#0f1e2e;--muted:#2f3a46;--soft:#3a4654;--line:#8da2b8;--line-soft:#a9b8c8;--line-strong:#7a90a6;--blue:#0046b8;--blue-dark:#003a99;--logo:#0046b8}
html[data-contrast="high"] main a{text-decoration:underline}
@media print{.cookie-note,.text-size{display:none!important}}
/* Text below the page title */
.hero-text > p[style*="--fs-lead"],.hp-hero p[style*="--fs-lead"]{font-size:18px!important}
/* Check-mark lists in the page content */
main li:has(> svg),.ticks{font-size:15.5px!important}
/* Small lists (bullets and check marks inside panels and cards) */
main ul,main ol{--fs-body-sm:14px}
/* FAQ answers */
.faq .answer,.faq .answer p,.faq .answer li{font-size:16px}
/* Type scale on desktop: home page title 62, page title 42, section headings 31, sub-headings 20 (card and panel headings keep their sizes) */
@media (min-width:1000px){
  :root{--fs-h1:42px}
  .hp-hero h1{font-size:62px!important}
  main h2:not(.panel-title){font-size:31px!important}
  main h3:not(:is(.pnl,.panel,[class*=card]) h3){font-size:20px!important}
}
/* FAQ questions, table headings */
.faq summary{font-size:15px}
/* Buttons in the closing band above the footer */
/* Other buttons: half a pixel under their set size, because the heading font runs large */
.nb{font-size:13px!important}
.hero-actions a,.hp-btn,.btn{font-size:14.5px!important}
.cookie-note__btn{font-size:13.5px}
section[style*="background: var(--navy)"] a[style*="padding: 13px 22px"]{font-size:13px!important;display:inline-flex;align-items:center;justify-content:center;text-align:center;line-height:1.2}
.ptable th{font-size:15.5px}
/* Breadcrumb row: spacing to the content below */
.crumb-row>p{margin:0!important}
.crumb-row:not(.crumb-row--home){margin-bottom:32px}
/* Bullets and check marks: 1px under the normal text (16.5px) */
main li:not(:has(h1,h2,h3,h4,h5,h6,div,ul,ol,img,figure,table)):not(:is(nav,header,footer,aside,[class*=mini],[class*=mock],[class*=shot],[class*=crumb],.breadcrumb,.side-list,.mm-list,.text-size) li),main li:not(:has(h1,h2,h3,h4,h5,h6,div,ul,ol,img,figure,table)):not(:is(nav,header,footer,aside,[class*=mini],[class*=mock],[class*=shot],[class*=crumb],.breadcrumb,.side-list,.mm-list,.text-size) li)>p{font-size:15.5px!important}
/* Links have no underline anywhere (the high-contrast setting still underlines them) */
html:not([data-contrast="high"]) a{text-decoration:none!important}
/* Breadcrumb position, the same on all three sites: 32px under the header, 32px above the content */
.crumb-row+.hero-split{align-items:start}
/* Small uppercase labels above headings: 1.5px letter spacing */
.eyebrow,.side-title{letter-spacing:1.5px!important}
/* Breadcrumb text, the same on all three sites */
.crumb-row>p,.crumb-row>p a{font-size:13.5px!important}
/* Numbered step headings in guides ("1. Start with ...") are sub-heading size */
.prose h2:is([id^="1"],[id^="2"],[id^="3"],[id^="4"],[id^="5"],[id^="6"],[id^="7"],[id^="8"],[id^="9"]){font-size:20px!important}
/* Bullets and check marks: 1.6 line height, 6px between items */
main li:not(:has(h1,h2,h3,h4,h5,h6,div,ul,ol,img,figure,table)):not(:is(nav,header,footer,aside,[class*=mini],[class*=mock],[class*=shot],[class*=crumb],[class*=console],[class*=screen],.breadcrumb,.side-list,.mm-list,.text-size,.a11y,.toc) li){line-height:1.6!important;margin-block:0!important}
main li:not(:has(h1,h2,h3,h4,h5,h6,div,ul,ol,img,figure,table)):not(:is(nav,header,footer,aside,[class*=mini],[class*=mock],[class*=shot],[class*=crumb],[class*=console],[class*=screen],.breadcrumb,.side-list,.mm-list,.text-size,.a11y,.toc) li):not(:first-child){margin-top:6px!important}
main ul[style*="display: grid"],main ul[style*="display: flex"],main ol[style*="display: grid"],main ol[style*="display: flex"],.ticks{row-gap:6px!important}
main :is(ul,ol)[style*="display: grid"]>li,main :is(ul,ol)[style*="display: flex"]>li,.ticks>li{margin-top:0!important}

/* Bold phrases in ITC Avant Garde: small titles, item names, status tags, buttons and links, table headings, form labels, the beta strip and FAQ questions. The drawn app screens (mini-*) keep the app font, and the footer keeps Gilroy. The file is the semi-bold cut, so no faked bold. */
:is(h4,summary,strong,b,th,label:not(.search-select),legend,.ptable td:first-child,.eyebrow,.hp-eyebrow,.tag,.hp-btn,.btn,.hp-more,.hp-area-name,.hp-area-more,.back-top,.search-tab,.step-num,.area-name,.choice-title,.beta-strip a,.mods a,[style*="--fw-medium"],[style*="--fw-semibold"],[style*="--fw-bold"]):not(:is(nav,footer,.cookie-note,[class*=mini]) *){font-family:var(--font-heading);font-synthesis:none}
/* Plain hint text inside those labels stays in the body font. */
:is(.area-hint,.optional){font-family:var(--font)}
/* The drop-down menus: names and headings in ITC Avant Garde (descriptions stay Poppins), and the beta button; colors and the gap under each name match veratas.com. */
body nav :is(.nb,b,.mega-head,.mega-label){font-family:var(--font-heading);font-synthesis:none}
/* The top menu links themselves are not bold: Gilroy at regular weight. */
.site-nav :is(a.nl,.nav-drop-btn,.ps-btn){font-family:var(--font-ui);font-weight:var(--fw-regular) !important}
.site-nav a.nl,.nav-drop-btn,.site-nav .ps-btn{color:#3B4450}
.mega-col b,.mega-feature b{color:#314D62;line-height:1.5}
.mega-col span,.mega-feature span:last-child{margin-top:4px;line-height:1.55;color:#667580}