/* 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}
/* The same Avant Garde file for button labels, with its height split evenly above and below the capitals, so a label sits in the middle of its button (the font's own metrics put it 2-3px high). Same total height, so buttons keep their size. */
@font-face{font-family:'ITC Avant Garde Button';src:url('fonts/avant-garde.woff2') format('woff2');font-weight:400;font-display:swap;ascent-override:99%;descent-override:25%;line-gap-override:0%}

/* =====================================================================
   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:none}
.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: Poppins */
.site-nav a,.hp-nav a{font-family:var(--font);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:none}
.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);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:none}
.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:none}
.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:none}
@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, on every Perspectiv site and in every setting, hover included */
a,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: Poppins at regular weight. */
:is(.site-nav,.hp-nav) :is(a.nl,a.hp-link,.nav-drop-btn,.ps-btn){font-family:var(--font);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}
/* Button labels centered in their buttons, both ways. Buttons set in Avant Garde use the balanced copy of it above; the home header button keeps Gilroy and the cookie buttons Poppins. */
:is(.hp-btn,.btn,.nb,.hero-actions a,a[style*="padding: 13px 22px"],a[style*="padding: 10px 18px"]){display:inline-flex;align-items:center;justify-content:center;text-align:center}
:is(.hp-btn,.btn,.hero-actions a,a[style*="padding: 13px 22px"],a[style*="padding: 10px 18px"]):not(:is(nav,footer,.cookie-note) *),body nav .nb{font-family:'ITC Avant Garde Button',var(--font-heading)!important}

/* =====================================================================
   Module sites (crm.perspectiv.io; later lms. and sites.): tools/make_subsites.py
   Same tokens, fonts, buttons, header and footer as the main site; .ss-* is their own layout.
   ===================================================================== */
.ss-nav{max-width:1200px;margin:0 auto;padding:18px 24px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px}
.ss-nav .nav-links{display:flex;flex:1 1 auto;flex-wrap:wrap;align-items:center;gap:24px;margin-left:40px}
.ss-nav-gap{flex:1 1 auto}
.site-nav a.nl.on{color:var(--blue)}
.ss-brand{display:inline-flex;align-items:flex-start;gap:9px;text-decoration:none}
.ss-brand img{display:block;height:25.8px;width:auto}
.ss-brand span{font-family:var(--font);font-size:13px;font-weight:var(--fw-regular);letter-spacing:.12em;text-transform:uppercase;color:var(--h1);line-height:1;margin-top:7.6px} /* 1px above the baseline of the "perspectiv" wordmark (76% down the 25.8px logo) */
.ft-logo.ss-brand img{height:25.8px}
.ss-nav .ss-brand{position:relative;top:-3px}
.site-nav .ss-mods-btn{padding:6px 10px;border:1px solid var(--line);border-radius:var(--r-box)}
.site-nav a.ss-home{display:inline-flex;align-items:center;gap:6px;color:var(--blue)}
.ss-home-i{width:15px;height:15px}
.ss-stage.ss-alpha{background:var(--alpha-bg);color:var(--alpha)}
.ss-stage{margin-left:6px;padding:1px 6px;border-radius:var(--r-tag);background:var(--beta-bg);color:var(--beta);font-style:normal;font-size:var(--fs-xs);font-weight:var(--fw-semibold);vertical-align:1px}
@media(max-width:999px){.ss-nav .nav-links > a.ss-home{justify-content:flex-start}.ss-nav .nav-links{margin-left:0}.ss-nav-gap{display:none}.site-nav .ss-mods-btn{border:0;padding:12px 0}.site-nav a.nl.on{box-shadow:none}}
@media(max-width:1180px) and (min-width:1000px){.ss-nav .nav-links{gap:16px;margin-left:24px}.site-nav a.ss-home{display:none}}

.ss .hero-band h1{margin:0;font-size:clamp(34px,4.4vw,48px);font-weight:var(--fw-heading);letter-spacing:-0.02em;line-height:1.08;color:var(--h1)}
.ss-acc{color:var(--h1-accent)}
.ss-hero > div{max-width:1200px;margin:0 auto;padding:48px 24px 64px}
.ss-intro{margin:18px 0 0;max-width:600px;font-size:18px;line-height:1.6;color:var(--muted)}
.ss-note{margin:14px 0 0;max-width:560px;font-size:var(--fs-small);line-height:1.6;color:var(--soft)}
.ss .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.ss-btn-i{width:16px;height:16px;margin-left:8px}
.hp-btn-line-dark{background:transparent;color:var(--white);box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
.hp-btn-line-dark:hover{color:var(--white);box-shadow:inset 0 0 0 1px var(--white)}
.ss-chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:26px;max-width:560px}
.ss-chips a{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--white);text-decoration:none;color:inherit;transition:border-color .15s ease,transform .15s ease}
.ss-chips a:hover{border-color:var(--line-blue);transform:translateY(-2px)}
.ss-chips b{display:block;font-size:var(--fs-h6);color:var(--blue)}
.ss-chips small{display:block;margin-top:3px;font-size:var(--fs-small);line-height:1.45;color:var(--soft)}
.ss-ico{width:22px;height:22px;flex:none;color:var(--blue)}

/* Drawn app screens */
.ss-app{border:1px solid #DCE4EE;border-radius:var(--r-card);background:var(--white);box-shadow:0 18px 44px rgba(22,49,79,.13);overflow:hidden;font-size:11px;line-height:1.35;color:var(--text);text-align:left}
.ss-app-top{display:flex;align-items:center;gap:6px;padding:9px 14px;border-bottom:1px solid var(--line-soft)}
.ss-app-top img{display:block;height:12px;width:auto}
.ss-app-top span{font-family:var(--font-ui);font-size:11px;color:var(--h1)}
.ss-app-body{display:grid;grid-template-columns:auto minmax(0,1fr)}
.ss-app-nav{list-style:none;margin:0;padding:12px 8px;border-right:1px solid var(--line-soft);display:flex;flex-direction:column;gap:2px;color:var(--soft)}
.ss-app-nav li{margin:0 !important;padding:5px 9px 5px 7px;white-space:nowrap;border-radius:var(--r-tag);display:flex;gap:7px;align-items:center;font-size:10.5px}
.ss-app-nav li.on{background:var(--blue-mist);color:var(--blue);font-weight:var(--fw-semibold)}
.ss-app-i{width:12px;height:12px;flex:none;vertical-align:-2px}
.ss-app-main{padding:14px 16px 16px;min-width:0}
.ss-app-h{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}
.ss-app-h b{display:block;font-size:14px;font-weight:var(--fw-semibold);color:var(--h1)}
.ss-sub{display:block;font-size:10px;color:var(--soft)}
.ss-app-btn{flex:none;padding:4px 10px;border-radius:var(--r-btn);background:var(--blue);color:var(--white);font-size:10px;font-weight:var(--fw-semibold)}
.ss-sbar{display:flex;gap:6px;margin-bottom:8px}
.ss-sbar span{flex:1;display:flex;gap:6px;align-items:center;padding:5px 8px;border:1px solid var(--line);border-radius:var(--r-box);color:var(--soft);font-size:10px}
.ss-sbar em{padding:5px 8px;border:1px solid var(--line);border-radius:var(--r-box);color:var(--soft);font-size:10px;font-style:normal}
.ss-tbl{width:100%;border-collapse:collapse;font-size:10.5px}
.ss-tbl th{padding:6px;border-bottom:1px solid var(--line-soft);color:var(--soft);font-weight:var(--fw-medium);text-align:left;white-space:nowrap}
.ss-tbl td{padding:7px 6px;border-bottom:1px solid var(--line-soft)}
.ss-tbl tr:last-child td{border-bottom:0}
.ss-app .l{color:var(--blue)}
.ss-hidden{display:inline-block;color:var(--soft);font-style:italic}
.ss-pill{display:inline-block;padding:1px 8px;border-radius:var(--r-tag);font-size:9.5px;font-weight:var(--fw-semibold);white-space:nowrap}
.sp-blue{background:var(--blue-tint);color:var(--blue)}
.sp-green{background:var(--beta-bg);color:var(--beta)}
.sp-amber{background:var(--soon-bg);color:var(--soon)}
.sp-purple{background:#EEE8FB;color:#5B3BB0}
.sp-grey{background:var(--planned-bg);color:var(--planned)}
.ss-av{display:inline-flex;align-items:center;justify-content:center;flex:none;width:18px;height:18px;margin-right:5px;border-radius:50%;background:var(--blue-tint);color:var(--blue);font-style:normal;font-size:8px;font-weight:var(--fw-bold);vertical-align:middle}
.ss-board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.ss-col{padding:8px;border-radius:var(--r-box);background:#F6F9FC}
.ss-col.won{background:#EEF8F2}
.ss-col > b{display:block;font-size:11px;color:var(--h1)}
.ss-col > small{display:block;font-size:9.5px;color:var(--soft)}
.ss-deal{margin-top:7px;padding:7px 8px;border:1px solid var(--line);border-radius:var(--r-box);background:var(--white)}
.ss-deal b{display:block;font-size:10.5px;font-weight:var(--fw-semibold);color:var(--h1);line-height:1.25}
.ss-deal span{display:block;font-size:10px;color:var(--soft)}
.ss-deal i{display:block;height:3px;margin-top:6px;border-radius:2px;background:#2F7DE1}
.ss-col.won .ss-deal i{background:var(--beta-dot)}
.ss-tabs{display:flex;gap:14px;margin:6px 0 12px;border-bottom:1px solid var(--line-soft);color:var(--soft);font-size:10.5px;white-space:nowrap;overflow:hidden}
.ss-tabs span{padding-bottom:6px}
.ss-tabs .on{color:var(--blue);box-shadow:inset 0 -2px 0 var(--blue)}
.ss-kv{display:grid;grid-template-columns:42% 58%;gap:7px 8px;font-size:10.5px}
.ss-kv > span:nth-child(odd){color:var(--soft)}
.ss-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.ss-mini-list small,.ss-rec-sub small{display:block;margin-bottom:4px;font-size:10px;color:var(--soft)}
.ss-rec-sub{margin-top:12px;padding-top:10px;border-top:1px solid var(--line-soft)}
.ss-checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.ss-checks li{margin:0 !important;display:flex;gap:8px;align-items:center;font-size:10.5px}
.ss-checks li::before{content:"";width:10px;height:10px;flex:none;border:1px solid var(--line-input);border-radius:2px}
.ss-checks em{margin-left:auto;font-style:normal;color:var(--soft)}
.ss-feed{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ss-feed li{margin:0 !important;display:flex;gap:9px;align-items:flex-start}
.ss-feed-i{width:22px;height:22px;flex:none;padding:5px;border-radius:50%;background:var(--blue-tint);color:var(--blue);box-sizing:border-box}
.ss-feed b{display:block;font-size:10.5px;font-weight:var(--fw-semibold);color:var(--h1)}
.ss-feed small{display:block;font-size:9.5px;color:var(--soft)}
.ss-feed p{margin:2px 0 0;font-size:10px;color:var(--muted)}
.ss-notes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.ss-notes li{margin:0 !important;display:flex;gap:8px;align-items:flex-start}
.ss-notes .ss-av{width:24px;height:24px;font-size:9px}
.ss-notes b{font-size:10.5px;color:var(--h1)}
.ss-notes small{margin-left:6px;font-size:9.5px;color:var(--soft)}
.ss-notes p{margin:2px 0 0;font-size:10.5px;line-height:1.45;color:var(--muted)}
.ss-card{padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--white);box-shadow:0 10px 26px rgba(22,49,79,.07);font-size:11px;line-height:1.35;color:var(--text);align-self:start}
.ss-card-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.ss-card-h b{font-size:12.5px;color:var(--h1)}
.ss-card-h em{padding:2px 8px;border:1px solid var(--line);border-radius:var(--r-btn);font-style:normal;font-size:10px;color:var(--soft)}
.ss-row-card{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:6px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-box)}
.ss-row-card b{display:block;font-size:10.5px;font-weight:var(--fw-semibold);color:var(--h1)}
.ss-row-card small{display:block;font-size:9.5px;color:var(--soft)}
.ss-rec-h{display:flex;gap:10px;align-items:center}
.ss-rec-h b{display:block;font-size:12.5px;color:var(--h1)}
.ss-rec-h small{display:block;font-size:9.5px;color:var(--soft)}
.ss-logo-tile{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:var(--r-box);background:var(--blue);color:var(--white);font-style:normal;font-size:11px;font-weight:var(--fw-bold)}
.ss-person{display:flex;gap:6px;align-items:center}
.ss-person b{display:block;font-size:10.5px;color:var(--h1)}
.ss-person small{display:block;margin:0;font-size:9.5px;color:var(--soft)}
.ss-card-hub{padding:18px}
.ss-hub{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:96px 40px;padding:6px 0}
.ss-hub::before{content:"";position:absolute;inset:22% 22%;border:1.5px dashed var(--line-blue);border-radius:var(--r-card)}
.ss-hub-n{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--white);font-size:10.5px}
.ss-hub-n b{color:var(--h1)}
.ss-hub-mid{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;display:flex;flex-direction:column;align-items:center;gap:2px;width:44%;padding:10px 8px;border:1px solid var(--line-blue);border-radius:var(--r-card);background:var(--blue-wash);text-align:center}
.ss-hub-mid b{font-size:11px;color:var(--h1)}
.ss-hub-mid small{font-size:9.5px;color:var(--soft)}

/* Sections */
.ss-main{max-width:1200px;margin:0 auto;padding:0 24px}
.ss-sec{padding:64px 0}
.ss-sec + .ss-sec{padding-top:0}
.ss-head{max-width:760px;margin-bottom:32px}
.ss-head h2,.ss-tour-text h2,.ss-road h2,.ss-join h2,.ss-form h2,.ss-thanks h1{margin:0;font-size:clamp(26px,3vw,34px);font-weight:var(--fw-heading);letter-spacing:-0.015em;line-height:1.15;color:var(--h1)}
.ss-head p:not(.eyebrow){margin:12px 0 0;font-size:var(--fs-lead);line-height:1.6;color:var(--muted)}
.ss-feats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.ss-feat{padding:28px;border:1px solid var(--line-soft);border-radius:var(--r-card);background:var(--blue-wash)}
.ss-feat-h{display:flex;gap:16px;align-items:flex-start;margin-bottom:22px}
.ss-feat-ico{display:inline-flex;align-items:center;justify-content:center;flex:none;width:48px;height:48px;border-radius:50%;background:var(--blue-tint)}
.ss-feat-ico .ss-ico{width:24px;height:24px}
.ss-feat h3{margin:0;font-size:var(--fs-h4);font-weight:var(--fw-heading);color:var(--h1)}
.ss-feat-h p:not(.eyebrow){margin:6px 0 0;font-size:var(--fs-body);line-height:1.55;color:var(--muted)}
.ss-feat .eyebrow{margin-bottom:6px}
.ss-feat-b{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:20px;align-items:start}
.ss-ilist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px}
.ss-ilist li{margin:0 !important;display:flex;gap:12px;align-items:flex-start}
.ss-ilist b{display:block;font-size:var(--fs-h6);color:var(--h1)}
.ss-ilist span{display:block;margin-top:2px;font-size:var(--fs-small);line-height:1.5;color:var(--muted)}
.ss-ilist.ss-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 24px;margin-top:26px}
.ss-road{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:32px;align-items:center;padding:36px 0 !important;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);margin-bottom:64px}
.ss-road h2{font-size:var(--fs-h3)}
.ss-road-text p:not(.eyebrow){margin:10px 0 0;font-size:var(--fs-body);line-height:1.6;color:var(--muted)}
.ss-road-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.ss-road-list li{margin:0 !important;display:flex;gap:12px;align-items:flex-start;padding-left:20px;border-left:1px solid var(--line-soft)}
.ss-road-list .tag{display:inline-block;margin-bottom:6px}
.ss-road-list b{display:block;font-size:var(--fs-h6);color:var(--h1)}
.ss-road-list span:not(.tag){display:block;margin-top:2px;font-size:var(--fs-small);line-height:1.5;color:var(--muted)}

.ss-jumps{display:flex;flex-wrap:wrap;gap:6px 24px;max-width:1152px;margin:0 auto;padding:16px 24px;border-bottom:1px solid var(--line-soft)}
.ss-jumps a{display:inline-flex;gap:8px;align-items:center;font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);color:var(--prose);text-decoration:none}
.ss-jumps a:hover{color:var(--blue)}
.ss-jumps em{font-style:normal;color:var(--blue)}
.ss-jumps-in{padding:0;margin:0;border:0}
.ss-tour,.ss-case{padding:64px 24px;scroll-margin-top:80px}
.ss-tint{background:var(--blue-wash)}
.ss-tour-in{max-width:1152px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:56px;align-items:center}
.ss-flip .ss-tour-text{order:2}
.ss-tour-text > p:not(.eyebrow){margin:12px 0 0;font-size:var(--fs-lead);line-height:1.6;color:var(--muted)}
.ss-n{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;margin-bottom:14px;border-radius:50%;background:var(--blue-tint);color:var(--blue);font-size:var(--fs-h5);font-weight:var(--fw-bold)}
.ss-tour-pic{min-width:0}
.ss-dark{background:var(--navy);color:var(--white)}
.ss-dark h2{color:var(--white) !important}
.ss-dark .eyebrow{color:var(--sky-light)}
.ss-dark .ss-tour-text > p:not(.eyebrow){color:var(--on-dark)}
.ss-num-list{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:18px;counter-reset:n}
.ss-num-list li{counter-increment:n;position:relative;margin:0 !important;padding-left:54px;min-height:38px}
.ss-num-list li::before{content:counter(n);position:absolute;left:0;top:0;width:38px;height:38px;border-radius:50%;background:var(--blue-tint);color:var(--blue);display:flex;align-items:center;justify-content:center;font-weight:var(--fw-bold)}
.ss-num-list b{display:block;font-size:var(--fs-h6);color:var(--h1)}
.ss-num-list span{display:block;margin-top:3px;font-size:var(--fs-body-sm);line-height:1.55;color:var(--muted)}
.ss-dark .ss-num-list li::before{background:rgba(255,255,255,.1);color:var(--white);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.ss-dark .ss-num-list b{color:var(--white)}
.ss-dark .ss-num-list span{color:var(--on-dark)}
.ss-steps li::before{width:30px;height:30px;font-size:var(--fs-small)}
.ss-steps li{padding-left:46px}
.ss-pnls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ss-pnls .ss-ico{margin-bottom:12px}
.ss-flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:24px}
.ss-flow li{position:relative;margin:0 !important;padding:16px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--white)}
.ss-flow li:not(:last-child)::after{content:"\2192";position:absolute;right:-19px;top:50%;transform:translateY(-50%);color:var(--blue);font-size:16px}
.ss-flow b{display:block;margin-top:10px;font-size:var(--fs-h6);color:var(--h1)}
.ss-flow span{display:block;margin-top:3px;font-size:var(--fs-small);line-height:1.45;color:var(--muted)}
.ss-box{display:flex;flex-wrap:wrap;align-items:center;gap:20px 28px;padding:28px 32px;border-radius:var(--r-card);background:var(--blue-mist)}
.ss-box-ico{display:inline-flex;align-items:center;justify-content:center;flex:none;width:64px;height:64px;border-radius:50%;background:var(--white)}
.ss-box-ico .ss-ico{width:30px;height:30px}
.ss-box-text{flex:1 1 380px}
.ss-box h3{margin:0;font-size:var(--fs-h4);font-weight:var(--fw-heading);color:var(--h1)}
.ss-box-text p:not(.eyebrow){margin:6px 0 0;font-size:var(--fs-body);line-height:1.55;color:var(--muted)}
.ss-box .eyebrow{margin-bottom:6px}
.ss-close{background:var(--navy);color:var(--white);padding:56px 24px 64px}
.ss-close > div{max-width:1152px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px}
.ss-close-text{flex:1 1 480px}
.ss-close h2{margin:0;color:var(--white) !important;font-size:var(--fs-h2);font-weight:var(--fw-medium)}
.ss-close p{margin:8px 0 0;font-size:var(--fs-body);line-height:1.6;color:var(--on-dark)}
.ss-close-act{display:flex;flex-wrap:wrap;gap:12px}
.ss-join{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;padding:36px;border-radius:var(--r-card);background:var(--blue-wash);border:1px solid var(--line-soft)}
.ss-join-a .ss-box-ico{margin-bottom:16px;background:var(--blue-tint)}
.ss-join-a p:not(.eyebrow){margin:10px 0 22px;font-size:var(--fs-body);line-height:1.6;color:var(--muted)}
.ss-join-b{padding-left:40px;border-left:1px solid var(--line-blue)}
.ss-join-b h3{margin:0;font-size:var(--fs-h4);font-weight:var(--fw-heading);color:var(--h1)}
.ss-join-b .ss-num-list{margin-top:18px}
.ss-two-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px}
.ss-two-col .ss-head{margin-bottom:20px}
.ss-two-col h2{font-size:var(--fs-h3)}
.ss-td-i{width:18px;height:18px;margin-right:10px;vertical-align:-4px;color:var(--blue)}
.ss .ptable{font-size:var(--fs-body)}
.ss .ptable td:first-child{white-space:nowrap}
.ss .ptable .ss-pill{font-size:var(--fs-xs)}
.ss-faq details{border:1px solid var(--line);border-radius:var(--r-card);background:var(--white);padding:0 18px}
.ss-faq details + details{margin-top:12px}
.ss-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;font-size:15px;font-weight:var(--fw-semibold);color:var(--h1)}
.ss-faq summary::-webkit-details-marker{display:none}
.ss-faq summary::after{content:"+";flex:none;width:26px;height:26px;border-radius:50%;background:var(--blue-tint);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:var(--fw-regular)}
.ss-faq details[open] summary::after{content:"\2212"}
.ss-faq details p{margin:0 0 18px;font-size:var(--fs-body);line-height:1.65;color:var(--muted)}
.ss-faq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
.ss-faq-grid details + details{margin-top:0}
.ss-more{margin:24px 0 0;display:flex;flex-wrap:wrap;gap:8px 20px;font-size:var(--fs-body-sm);color:var(--soft)}
.ss-more a{font-weight:var(--fw-semibold);text-decoration:none}
.ss-guides{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ss-guide{position:relative;display:flex;flex-direction:column;padding:26px 26px 64px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--white);text-decoration:none;color:inherit;transition:border-color .15s ease,transform .15s ease}
.ss-guide:hover{border-color:var(--line-blue);transform:translateY(-2px)}
.ss-guide > em{position:absolute;right:24px;top:22px;font-style:normal;font-size:var(--fs-h4);color:var(--blue)}
.ss-guide > b{margin-top:18px;font-size:var(--fs-h5);color:var(--h1)}
.ss-guide > span:not(.ss-feat-ico){margin-top:8px;font-size:var(--fs-body);line-height:1.55;color:var(--muted)}
.ss-guide-go{position:absolute;left:26px;bottom:20px;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--blue-tint);color:var(--blue)}
.ss-guide-go .ss-ico{width:18px;height:18px}
.ss-guide-sec{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:40px;padding:40px 0;border-bottom:1px solid var(--line-soft);scroll-margin-top:80px}
.ss-guides + .ss-guide-sec{margin-top:24px}
.ss-guide-sec h3{margin:0;font-size:var(--fs-h4);font-weight:var(--fw-heading);color:var(--h1)}
.ss-guide-sec > div > p:not(.eyebrow){margin:8px 0 0;font-size:var(--fs-body);line-height:1.6;color:var(--muted)}
.ss-guide-sec .ss-num-list{margin:0}
.ss-docs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ss-docs-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ss-doc{display:flex;gap:14px;align-items:center;padding:20px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--white);text-decoration:none;color:inherit;transition:border-color .15s ease}
.ss-doc:hover{border-color:var(--line-blue)}
.ss-doc > span:not(.ss-feat-ico){flex:1}
.ss-doc b{display:block;font-size:var(--fs-h6);color:var(--h1)}
.ss-doc small{display:block;margin-top:3px;font-size:var(--fs-small);line-height:1.45;color:var(--muted)}
.ss-doc em{display:block;margin-top:10px;font-style:normal;font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);color:var(--blue)}
.ss-doc-go{width:18px;height:18px;color:var(--blue)}
.ss-trust td:first-child{width:34%}

/* Contact and thank-you */
.ss-contact-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
.ss-contact-text{padding-top:16px}
.ss-contact-steps{list-style:none;margin:32px 0 0;padding:0;display:flex;flex-direction:column;gap:22px}
.ss-contact-steps li{margin:0 !important;display:flex;gap:16px;align-items:flex-start}
.ss-contact-steps b{display:block;font-size:var(--fs-h6);color:var(--h1)}
.ss-contact-steps span:not(.ss-feat-ico){display:block;margin-top:3px;font-size:var(--fs-body-sm);line-height:1.55;color:var(--muted)}
.ss-form-card{padding:32px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--white);box-shadow:0 18px 44px rgba(22,49,79,.08)}
.ss-form{display:flex;flex-direction:column;gap:16px}
.ss-form h2{margin-bottom:6px}
.ss-form .eyebrow{margin:0}
.ss-choices{margin:0;padding:0;border:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ss-choices label{display:flex;gap:8px;align-items:center;padding:10px 12px;border:1px solid var(--line-input);border-radius:var(--r-box);font-size:var(--fs-small);font-weight:var(--fw-semibold);color:var(--prose);cursor:pointer}
.ss-choices label:has(input:checked){background:var(--blue-mist);border-color:var(--blue);color:var(--blue)}
.ss-choices input{margin:0;accent-color:var(--blue)}
.ss-field{display:flex;flex-direction:column;gap:6px}
.ss-field > label{font-size:var(--fs-small);font-weight:var(--fw-semibold);color:var(--ink)}
.ss-form input[type=text],.ss-form input[type=email],.ss-form select,.ss-form textarea{font:inherit;font-size:var(--fs-h6);padding:10px 12px;border:1px solid var(--line-input);border-radius:var(--r-box);background:var(--white);color:var(--ink)}
.ss-form textarea{resize:vertical}
.ss-form :is(input,select,textarea,button):focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.ss-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.ss-check{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-small);line-height:1.5;color:var(--prose)}
.ss-check input{width:18px;height:18px;margin:1px 0 0;flex:none;accent-color:var(--blue)}
.ss-form .req{color:var(--error)}
.ss-form .optional{font-weight:var(--fw-regular);color:var(--grey)}
.ss-form .error{margin:0;font-size:var(--fs-small);color:var(--error)}
.ss-form .error:empty{display:none}
.ss-submit{width:100%;border:0;cursor:pointer;padding:13px 20px}
.ss-submit:disabled{opacity:.6;cursor:default}
.ss-req{margin:0;text-align:center;font-size:var(--fs-small);color:var(--grey)}
.ss-contact-faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:40px}
.ss-thanks-band{padding:56px 24px;background:linear-gradient(180deg,var(--blue-wash) 0%,var(--white) 100%)}
.ss-thanks{max-width:860px;margin:0 auto;padding:48px 40px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--white);box-shadow:0 18px 44px rgba(22,49,79,.08);text-align:center}
.ss-thanks-ico{display:inline-flex;align-items:center;justify-content:center;width:84px;height:84px;margin-bottom:20px;border-radius:50%;background:var(--blue-tint)}
.ss-thanks-ico .ss-ico{width:40px;height:40px}
.ss-thanks .ss-intro{margin:16px auto 0}
.ss-thanks .hero-actions{justify-content:center}
.ss-progress{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ss-progress li{position:relative;margin:0 !important;display:flex;flex-direction:column;align-items:center}
.ss-progress li:not(:last-child)::after{content:"";position:absolute;top:22px;left:calc(50% + 34px);right:calc(-50% + 34px);border-top:1px solid var(--line-blue)}
.ss-progress i{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--blue-wash);color:var(--h1);font-style:normal;font-weight:var(--fw-bold)}
.ss-progress li.done i{background:var(--blue);color:var(--white)}
.ss-progress li.done .ss-ico{color:var(--white);width:20px;height:20px}
.ss-progress b{margin-top:12px;font-size:var(--fs-h6);color:var(--h1)}
.ss-progress span{margin-top:3px;font-size:var(--fs-small);color:var(--muted)}
.ss-small{margin:28px 0 0;font-size:var(--fs-small);color:var(--soft)}

@media(max-width:960px){
  .ss-feats,.ss-feat-b,.ss-tour-in,.ss-road,.ss-join,.ss-two-col,.ss-guide-sec,.ss-contact-in,.ss-contact-faq{grid-template-columns:minmax(0,1fr)}
  .ss-flip .ss-tour-text{order:0}
  .ss-road-list,.ss-guides,.ss-docs,.ss-pnls{grid-template-columns:minmax(0,1fr)}
  .ss-flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ss-flow li::after{display:none}
  .ss-faq-grid,.ss-docs-2{grid-template-columns:minmax(0,1fr)}
  .ss-join-b{padding-left:0;border-left:0;padding-top:28px;border-top:1px solid var(--line-blue)}
  .ss-tour-pic,.ss .hero-pic{max-width:640px}
}
@media(max-width:600px){
  .ss-chips,.ss-ilist.ss-two,.ss-pair,.ss-choices,.ss-progress{grid-template-columns:minmax(0,1fr)}
  .ss-feat-h{flex-direction:column;gap:12px}
  .ss-progress li::after{display:none}
  .ss-app-body{grid-template-columns:minmax(0,1fr)}
  .ss-app-nav{display:none}
  .ss-board{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ss-feat,.ss-form-card,.ss-join,.ss-thanks{padding:22px}
  .ss-tbl th:nth-child(n+4),.ss-tbl td:nth-child(n+4){display:none}
  .ss .ptable td:first-child{white-space:normal}
}
/* Drawn screens for the Learning and Sites module sites */
.ss-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ss-tiles.t3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ss-tiles.t4{grid-template-columns:repeat(4,minmax(0,1fr))}
.ss-tile{min-width:0;padding:9px 10px;border:1px solid var(--line);border-radius:var(--r-box);background:var(--white)}
.ss-tile > b{display:flex;gap:6px;align-items:center;font-size:10.5px;color:var(--h1)}
.ss-tile small{display:block;margin-top:3px;font-size:9.5px;color:var(--soft)}
.ss-tile .ss-big{display:block;margin-top:4px;font-size:18px;font-weight:var(--fw-bold);color:var(--h1);line-height:1.1}
.ss-tile .bad{color:#C2410C}
.ss-prog{display:block;height:4px;margin-top:6px;border-radius:2px;background:var(--blue-tint);overflow:hidden}
.ss-prog i{display:block;height:100%;border-radius:2px;background:#2F7DE1}
.ss-prog.warn i{background:var(--soon-dot)}
.ss-thumb{display:block;height:46px;margin:-2px -3px 8px;border-radius:var(--r-tag);background:linear-gradient(135deg,#D7E8FB 0%,#EEF5FD 60%,#F8FBFE 100%)}
.ss-thumb.b{background:linear-gradient(135deg,#E3E0FA 0%,#F1EFFC 60%,#FAF9FE 100%)}
.ss-thumb.c{background:linear-gradient(135deg,#D9F1E5 0%,#EDF8F2 60%,#F8FCFA 100%)}
.ss-date{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:30px;padding:3px 0;border:1px solid var(--line);border-radius:var(--r-tag);font-size:12px;font-weight:var(--fw-bold);color:var(--h1);line-height:1}
.ss-date small{font-size:8px;font-weight:var(--fw-regular);color:var(--soft);margin-top:2px}
.ss-toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:6px 10px;margin-bottom:12px;border:1px solid var(--line-soft);border-radius:var(--r-box);color:var(--soft);font-size:10px}
.ss-toolbar b{color:var(--prose)}
.ss-doc-title{display:block;margin:2px 0 8px;font-size:16px;font-weight:var(--fw-semibold);color:var(--h1)}
.ss-text{margin:0 0 6px;font-size:10.5px;line-height:1.5;color:var(--muted)}
.ss-callout{display:flex;gap:8px;align-items:flex-start;margin-top:8px;padding:8px 10px;border:1px solid var(--line-blue);border-radius:var(--r-box);background:var(--blue-wash);font-size:10.5px;color:var(--prose)}
.ss-lines i{display:block;height:6px;margin-top:7px;border-radius:3px;background:#E9EEF4}
.ss-side{display:grid;grid-template-columns:minmax(0,1fr) 112px;gap:14px}
.ss-props{padding-left:12px;border-left:1px solid var(--line-soft);font-size:10px}
.ss-props small{display:block;margin-top:8px;color:var(--soft)}
.ss-props small:first-child{margin-top:0}
.ss-props span{display:block;margin-top:2px;color:var(--h1)}
.ss-reader{display:grid;grid-template-columns:118px minmax(0,1fr);gap:14px}
.ss-tree{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px;font-size:10.5px;color:var(--soft)}
.ss-tree li{margin:0 !important;padding:4px 7px;border-radius:var(--r-tag)}
.ss-tree li.h{padding-top:8px;font-weight:var(--fw-semibold);color:var(--h1)}
.ss-tree li.sub{padding-left:18px}
.ss-tree li.on{background:var(--blue-mist);color:var(--blue);font-weight:var(--fw-semibold)}
.ss-crumb{display:block;margin-bottom:4px;font-size:9.5px;color:var(--soft)}
.ss-photo-ph{display:block;height:58px;margin:6px 0 8px;border-radius:var(--r-box);background:linear-gradient(135deg,#DCEAF8 0%,#EEF4FB 55%,#E4EEF8 100%)}
.ss-ol{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:7px;counter-reset:s}
.ss-ol li{counter-increment:s;margin:0 !important;display:flex;gap:8px;align-items:center;font-size:10.5px}
.ss-ol li::before{content:counter(s);display:inline-flex;align-items:center;justify-content:center;flex:none;width:18px;height:18px;border-radius:50%;background:var(--blue-tint);color:var(--blue);font-size:9px;font-weight:var(--fw-bold)}
.ss-checks.done li::before,.ss-checks li.done::before{background:var(--blue);border-color:var(--blue)}
.ss-folder{display:flex;flex-direction:column;gap:3px;padding:12px;border:1px solid var(--line);border-radius:var(--r-box)}
.ss-folder i{width:22px;height:18px;margin-bottom:6px;border-radius:3px;background:#9CC4F2}
.ss-folder i.p{background:#C3B5F2}
.ss-folder i.g{background:#9ED8B9}
.ss-folder i.a{background:#F2CF95}
.ss-folder b{font-size:11.5px;color:var(--h1)}
.ss-folder small{font-size:9.5px;color:var(--soft)}
.ss-flow.f5{grid-template-columns:repeat(5,minmax(0,1fr))}
.ss-pnls .pnl ul{margin-top:12px}
@media(max-width:960px){.ss-flow.f5{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.ss-tiles.t3,.ss-tiles.t4{grid-template-columns:repeat(2,minmax(0,1fr))}.ss-side,.ss-reader{grid-template-columns:minmax(0,1fr)}.ss-props,.ss-reader .ss-tree{display:none}}
.ss-card li,.ss-app li{font-size:10.5px !important;line-height:1.35 !important}
.ss-pnls-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:960px){.ss-pnls-2{grid-template-columns:minmax(0,1fr)}}
/* Module sites: a faint topic photo behind the title area (tools/subsite-photos.txt) */
.hero-band.ss-hero.has-photo{background:linear-gradient(90deg,rgba(245,247,249,.95) 0%,rgba(245,247,249,.9) 35%,rgba(245,247,249,.62) 52%,rgba(245,247,249,.18) 72%,rgba(245,247,249,0) 100%),var(--ss-photo) right center / cover no-repeat !important}
/* every module-site page has the home page's tall title area */
.ss-hero > div{padding-top:88px;padding-bottom:104px}
.ss-hero .hero-split{min-height:420px}
@media(max-width:960px){.hero-band.ss-hero.has-photo,.hero-band.ss-hero.has-photo.ss-home-hero{background:linear-gradient(rgba(255,255,255,.84),rgba(255,255,255,.84)),var(--ss-photo) center / cover no-repeat !important}.ss-hero > div{padding-top:56px;padding-bottom:64px}.ss-hero .hero-split{min-height:0}}
.hero-band.ss-hero.has-photo.ss-contact{background:linear-gradient(90deg,rgba(245,247,249,.95) 0%,rgba(245,247,249,.9) 42%,rgba(245,247,249,.62) 60%,rgba(245,247,249,.18) 80%,rgba(245,247,249,0) 100%),var(--ss-photo) right center / cover no-repeat !important}
/* Module sites: the top menu links, All modules and Perspectiv home are Poppins (ITC Avant Garde is only for bold text) */
.ss-nav :is(a.nl,.nav-drop-btn){font-family:var(--font) !important}

/* Home3: the main home page with the screenshot beside the text. site.css owns everything else. */
.home3-inner { position:relative; z-index:1; max-width:1200px; margin:0 auto; padding:64px 24px 80px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:64px; align-items:center; }
.home3-hero > .hp-ribbon { top:auto; bottom:40px; transform:translateX(-50%) scale(-1,0.8); opacity:0; }
.home3-hero > .hp-lines { opacity:1; }
/* A faint team photo behind the hero, fading to grey on the left, like the module sites. */
.home3-hero { background:linear-gradient(90deg,rgba(245,247,249,.95) 0%,rgba(245,247,249,.9) 35%,rgba(245,247,249,.62) 52%,rgba(245,247,249,.18) 72%,rgba(245,247,249,0) 100%),url("images/home-hero-photo.webp") right center / cover no-repeat; }
@media (max-width:999px) { .home3-hero { background:linear-gradient(rgba(255,255,255,.84),rgba(255,255,255,.84)),url("images/home-hero-photo.webp") center / cover no-repeat; } }
/* Three app screens at one scale: widths follow the screens' own widths (expense claims 880, project plan 1000, CRM 800).
   Vertical offsets use padding and margin percentages, which follow the width, so the arrangement holds at every size. */
.home3-art { position:relative; padding-bottom:40%; }
.home3-art .hp-shot { box-shadow:0 0 0 1px #B7C4D4, 0 18px 44px rgba(22,49,79,0.14); }
.home3-back { width:81%; margin-left:auto; }
.home3-front { position:absolute; left:-40px; top:0; margin-top:26%; width:92%; z-index:1; }
.home3-third { position:absolute; right:11%; bottom:0; width:73.6%; z-index:2; }
@media (min-width:1000px) {
  .home3-inner { box-sizing:border-box; min-height:760px; align-content:start; align-items:start; padding-top:96px; }
  .home3-hero > .hp-ribbon { bottom:-100px; }
  .home3-hero > .hp-lines { top:310px; }
}
@media (max-width:999px) {
  .home3-inner { grid-template-columns:1fr; gap:40px; padding:132px 24px 64px; }
  .home3-front { left:0; }
}
/* Home page title area: office photo, light grey fading in from the left */
.hp-hero.home3-hero{background:linear-gradient(90deg,rgba(245,247,249,.95) 0%,rgba(245,247,249,.9) 35%,rgba(245,247,249,.62) 52%,rgba(245,247,249,.18) 72%,rgba(245,247,249,0) 100%),url("images/home-hero-one-clear-view.webp") right center / cover no-repeat}
/* Main-site module pages share their module site's home photo (matched by canonical address, so page rebuilds keep it) */
html:has(link[rel="canonical"][href="https://perspectiv.io/crm-for-professional-services"]) .hero-band{background:linear-gradient(90deg,rgba(245,247,249,.95) 0%,rgba(245,247,249,.9) 35%,rgba(245,247,249,.62) 52%,rgba(245,247,249,.18) 72%,rgba(245,247,249,0) 100%),url("images/ss-crm-home.webp") right center / cover no-repeat !important}
html:has(link[rel="canonical"][href="https://perspectiv.io/learning-management-system"]) .hero-band{background:linear-gradient(90deg,rgba(245,247,249,.95) 0%,rgba(245,247,249,.9) 35%,rgba(245,247,249,.62) 52%,rgba(245,247,249,.18) 72%,rgba(245,247,249,0) 100%),url("images/hero-learning-management.webp") right center / cover no-repeat !important}
html:has(link[rel="canonical"][href="https://perspectiv.io/insights-knowledge-hub"]) .hero-band{background:linear-gradient(90deg,rgba(245,247,249,.95) 0%,rgba(245,247,249,.9) 35%,rgba(245,247,249,.62) 52%,rgba(245,247,249,.18) 72%,rgba(245,247,249,0) 100%),url("images/hero-knowledge-hub.webp") right center / cover no-repeat !important}
html:has(link[rel="canonical"][href="https://perspectiv.io/project-accounting-software"]) .hero-band{background:linear-gradient(90deg,rgba(245,247,249,.95) 0%,rgba(245,247,249,.9) 35%,rgba(245,247,249,.62) 52%,rgba(245,247,249,.18) 72%,rgba(245,247,249,0) 100%),url("images/hero-project-accounting.webp") right center / cover no-repeat !important}
html:has(link[rel="canonical"][href="https://perspectiv.io/sales-quotes-and-orders"]) .hero-band{background:linear-gradient(90deg,rgba(245,247,249,.95) 0%,rgba(245,247,249,.9) 35%,rgba(245,247,249,.62) 52%,rgba(245,247,249,.18) 72%,rgba(245,247,249,0) 100%),url("images/hero-sales.webp") right center / cover no-repeat !important}
html:has(link[rel="canonical"][href="https://perspectiv.io/sales-catalog-and-pricing"]) .hero-band{background:linear-gradient(90deg,rgba(245,247,249,.95) 0%,rgba(245,247,249,.9) 35%,rgba(245,247,249,.62) 52%,rgba(245,247,249,.18) 72%,rgba(245,247,249,0) 100%),url("images/hero-catalog.webp") right center / cover no-repeat !important}
html:has(link[rel="canonical"][href="https://perspectiv.io/contract-management-software"]) .hero-band{background:linear-gradient(90deg,rgba(245,247,249,.95) 0%,rgba(245,247,249,.9) 35%,rgba(245,247,249,.62) 52%,rgba(245,247,249,.18) 72%,rgba(245,247,249,0) 100%),url("images/hero-contract-management.webp") right center / cover no-repeat !important}
html:has(link[rel="canonical"][href="https://perspectiv.io/project-management-software"]) .hero-band{background:linear-gradient(90deg,rgba(245,247,249,.95) 0%,rgba(245,247,249,.9) 35%,rgba(245,247,249,.62) 52%,rgba(245,247,249,.18) 72%,rgba(245,247,249,0) 100%),url("images/hero-project-management.webp") right center / cover no-repeat !important}
html:has(link[rel="canonical"][href="https://perspectiv.io/projects-product-management"]) .hero-band{background:linear-gradient(90deg,rgba(245,247,249,.95) 0%,rgba(245,247,249,.9) 35%,rgba(245,247,249,.62) 52%,rgba(245,247,249,.18) 72%,rgba(245,247,249,0) 100%),url("images/hero-product-management.webp") right center / cover no-repeat !important}
html:has(link[rel="canonical"][href="https://perspectiv.io/timesheet-and-expense-software"]) .hero-band{background:linear-gradient(90deg,rgba(245,247,249,.95) 0%,rgba(245,247,249,.9) 35%,rgba(245,247,249,.62) 52%,rgba(245,247,249,.18) 72%,rgba(245,247,249,0) 100%),url("images/hero-time-and-expense.webp") right center / cover no-repeat !important}
html:has(link[rel="canonical"][href="https://perspectiv.io/resource-management-software"]) .hero-band{background:linear-gradient(90deg,rgba(245,247,249,.95) 0%,rgba(245,247,249,.9) 35%,rgba(245,247,249,.62) 52%,rgba(245,247,249,.18) 72%,rgba(245,247,249,0) 100%),url("images/hero-resource-management.webp") right center / cover no-repeat !important}
html:has(link[rel="canonical"][href="https://perspectiv.io/finance-financial-planning-and-budgeting"]) .hero-band{background:linear-gradient(90deg,rgba(245,247,249,.95) 0%,rgba(245,247,249,.9) 35%,rgba(245,247,249,.62) 52%,rgba(245,247,249,.18) 72%,rgba(245,247,249,0) 100%),url("images/hero-financial-planning.webp") right center / cover no-repeat !important}
html:has(link[rel="canonical"][href="https://perspectiv.io/finance-asset-management"]) .hero-band{background:linear-gradient(90deg,rgba(245,247,249,.95) 0%,rgba(245,247,249,.9) 35%,rgba(245,247,249,.62) 52%,rgba(245,247,249,.18) 72%,rgba(245,247,249,0) 100%),url("images/hero-asset-management.webp") right center / cover no-repeat !important}
html:has(link[rel="canonical"][href="https://perspectiv.io/finance-accounts-payable"]) .hero-band{background:linear-gradient(90deg,rgba(245,247,249,.95) 0%,rgba(245,247,249,.9) 35%,rgba(245,247,249,.62) 52%,rgba(245,247,249,.18) 72%,rgba(245,247,249,0) 100%),url("images/hero-accounts-payable.webp") right center / cover no-repeat !important}
html:has(link[rel="canonical"][href="https://perspectiv.io/finance-accounts-receivable"]) .hero-band{background:linear-gradient(90deg,rgba(245,247,249,.95) 0%,rgba(245,247,249,.9) 35%,rgba(245,247,249,.62) 52%,rgba(245,247,249,.18) 72%,rgba(245,247,249,0) 100%),url("images/hero-accounts-receivable.webp") right center / cover no-repeat !important}
html:has(link[rel="canonical"][href="https://perspectiv.io/finance-general-ledger-and-accounting"]) .hero-band{background:linear-gradient(90deg,rgba(245,247,249,.95) 0%,rgba(245,247,249,.9) 35%,rgba(245,247,249,.62) 52%,rgba(245,247,249,.18) 72%,rgba(245,247,249,0) 100%),url("images/hero-general-ledger.webp") right center / cover no-repeat !important}
html:has(link[rel="canonical"][href="https://perspectiv.io/service-internal-service-desk"]) .hero-band{background:linear-gradient(90deg,rgba(245,247,249,.95) 0%,rgba(245,247,249,.9) 35%,rgba(245,247,249,.62) 52%,rgba(245,247,249,.18) 72%,rgba(245,247,249,0) 100%),url("images/hero-internal-service-desk.webp") right center / cover no-repeat !important}
html:has(link[rel="canonical"][href="https://perspectiv.io/service-desk-software"]) .hero-band{background:linear-gradient(90deg,rgba(245,247,249,.95) 0%,rgba(245,247,249,.9) 35%,rgba(245,247,249,.62) 52%,rgba(245,247,249,.18) 72%,rgba(245,247,249,0) 100%),url("images/hero-customer-support.webp") right center / cover no-repeat !important}
html:has(link[rel="canonical"][href="https://perspectiv.io/procurement-inventory-management"]) .hero-band{background:linear-gradient(90deg,rgba(245,247,249,.95) 0%,rgba(245,247,249,.9) 35%,rgba(245,247,249,.62) 52%,rgba(245,247,249,.18) 72%,rgba(245,247,249,0) 100%),url("images/hero-inventory-management.webp") right center / cover no-repeat !important}
html:has(link[rel="canonical"][href="https://perspectiv.io/procurement-purchasing"]) .hero-band{background:linear-gradient(90deg,rgba(245,247,249,.95) 0%,rgba(245,247,249,.9) 35%,rgba(245,247,249,.62) 52%,rgba(245,247,249,.18) 72%,rgba(245,247,249,0) 100%),url("images/hero-purchasing.webp") right center / cover no-repeat !important}
html:has(link[rel="canonical"][href="https://perspectiv.io/procurement-supplier-management"]) .hero-band{background:linear-gradient(90deg,rgba(245,247,249,.95) 0%,rgba(245,247,249,.9) 35%,rgba(245,247,249,.62) 52%,rgba(245,247,249,.18) 72%,rgba(245,247,249,0) 100%),url("images/hero-supplier-management.webp") right center / cover no-repeat !important}
html:has(link[rel="canonical"][href="https://perspectiv.io/people-hrms"]) .hero-band{background:linear-gradient(90deg,rgba(245,247,249,.95) 0%,rgba(245,247,249,.9) 35%,rgba(245,247,249,.62) 52%,rgba(245,247,249,.18) 72%,rgba(245,247,249,0) 100%),url("images/hero-hrms.webp") right center / cover no-repeat !important}
html:has(link[rel="canonical"][href="https://perspectiv.io/recruiting-software"]) .hero-band{background:linear-gradient(90deg,rgba(245,247,249,.95) 0%,rgba(245,247,249,.9) 35%,rgba(245,247,249,.62) 52%,rgba(245,247,249,.18) 72%,rgba(245,247,249,0) 100%),url("images/hero-recruiting.webp") right center / cover no-repeat !important}
html:has(link[rel="canonical"][href="https://perspectiv.io/people-talent-and-performance"]) .hero-band{background:linear-gradient(90deg,rgba(245,247,249,.95) 0%,rgba(245,247,249,.9) 35%,rgba(245,247,249,.62) 52%,rgba(245,247,249,.18) 72%,rgba(245,247,249,0) 100%),url("images/hero-talent-and-performance.webp") right center / cover no-repeat !important}
html:has(link[rel="canonical"][href="https://perspectiv.io/people-time-and-attendance"]) .hero-band{background:linear-gradient(90deg,rgba(245,247,249,.95) 0%,rgba(245,247,249,.9) 35%,rgba(245,247,249,.62) 52%,rgba(245,247,249,.18) 72%,rgba(245,247,249,0) 100%),url("images/hero-time-and-attendance.webp") right center / cover no-repeat !important}
html:has(link[rel="canonical"][href="https://perspectiv.io/people-workforce"]) .hero-band{background:linear-gradient(90deg,rgba(245,247,249,.95) 0%,rgba(245,247,249,.9) 35%,rgba(245,247,249,.62) 52%,rgba(245,247,249,.18) 72%,rgba(245,247,249,0) 100%),url("images/hero-workforce.webp") right center / cover no-repeat !important}
html:has(link[rel="canonical"][href="https://perspectiv.io/events-attendees-and-registration"]) .hero-band{background:linear-gradient(90deg,rgba(245,247,249,.95) 0%,rgba(245,247,249,.9) 35%,rgba(245,247,249,.62) 52%,rgba(245,247,249,.18) 72%,rgba(245,247,249,0) 100%),url("images/hero-attendees-and-registration.webp") right center / cover no-repeat !important}
html:has(link[rel="canonical"][href="https://perspectiv.io/event-management-software"]) .hero-band{background:linear-gradient(90deg,rgba(245,247,249,.95) 0%,rgba(245,247,249,.9) 35%,rgba(245,247,249,.62) 52%,rgba(245,247,249,.18) 72%,rgba(245,247,249,0) 100%),url("images/hero-event-management.webp") right center / cover no-repeat !important}
html:has(link[rel="canonical"][href="https://perspectiv.io/events-portal-and-communications"]) .hero-band{background:linear-gradient(90deg,rgba(245,247,249,.95) 0%,rgba(245,247,249,.9) 35%,rgba(245,247,249,.62) 52%,rgba(245,247,249,.18) 72%,rgba(245,247,249,0) 100%),url("images/hero-event-portal.webp") right center / cover no-repeat !important}
html:has(link[rel="canonical"][href="https://perspectiv.io/insights-reporting-and-analytics"]) .hero-band{background:linear-gradient(90deg,rgba(245,247,249,.95) 0%,rgba(245,247,249,.9) 35%,rgba(245,247,249,.62) 52%,rgba(245,247,249,.18) 72%,rgba(245,247,249,0) 100%),url("images/hero-reporting-and-analytics.webp") right center / cover no-repeat !important}
html:has(link[rel="canonical"][href="https://perspectiv.io/admin-setup"]) .hero-band{background:linear-gradient(90deg,rgba(245,247,249,.95) 0%,rgba(245,247,249,.9) 35%,rgba(245,247,249,.62) 52%,rgba(245,247,249,.18) 72%,rgba(245,247,249,0) 100%),url("images/hero-admin-setup.webp") right center / cover no-repeat !important}
html:has(link[rel="canonical"][href="https://perspectiv.io/admin-identity-and-access"]) .hero-band{background:linear-gradient(90deg,rgba(245,247,249,.95) 0%,rgba(245,247,249,.9) 35%,rgba(245,247,249,.62) 52%,rgba(245,247,249,.18) 72%,rgba(245,247,249,0) 100%),url("images/hero-identity-and-access.webp") right center / cover no-repeat !important}
html:has(link[rel="canonical"][href="https://perspectiv.io/admin-application-configuration"]) .hero-band{background:linear-gradient(90deg,rgba(245,247,249,.95) 0%,rgba(245,247,249,.9) 35%,rgba(245,247,249,.62) 52%,rgba(245,247,249,.18) 72%,rgba(245,247,249,0) 100%),url("images/hero-application-configuration.webp") right center / cover no-repeat !important}
html:has(link[rel="canonical"][href="https://perspectiv.io/admin-workflow-and-automation"]) .hero-band{background:linear-gradient(90deg,rgba(245,247,249,.95) 0%,rgba(245,247,249,.9) 35%,rgba(245,247,249,.62) 52%,rgba(245,247,249,.18) 72%,rgba(245,247,249,0) 100%),url("images/hero-workflow-and-automation.webp") right center / cover no-repeat !important}
html:has(link[rel="canonical"][href="https://perspectiv.io/admin-data-management"]) .hero-band{background:linear-gradient(90deg,rgba(245,247,249,.95) 0%,rgba(245,247,249,.9) 35%,rgba(245,247,249,.62) 52%,rgba(245,247,249,.18) 72%,rgba(245,247,249,0) 100%),url("images/hero-data-management.webp") right center / cover no-repeat !important}
html:has(link[rel="canonical"][href="https://perspectiv.io/admin-integrations-and-apis"]) .hero-band{background:linear-gradient(90deg,rgba(245,247,249,.95) 0%,rgba(245,247,249,.9) 35%,rgba(245,247,249,.62) 52%,rgba(245,247,249,.18) 72%,rgba(245,247,249,0) 100%),url("images/hero-integrations-and-apis.webp") right center / cover no-repeat !important}
html:has(link[rel="canonical"][href="https://perspectiv.io/admin-system-operations"]) .hero-band{background:linear-gradient(90deg,rgba(245,247,249,.95) 0%,rgba(245,247,249,.9) 35%,rgba(245,247,249,.62) 52%,rgba(245,247,249,.18) 72%,rgba(245,247,249,0) 100%),url("images/hero-system-operations.webp") right center / cover no-repeat !important}
html:has(link[rel="canonical"][href="https://perspectiv.io/admin-tenant-settings"]) .hero-band{background:linear-gradient(90deg,rgba(245,247,249,.95) 0%,rgba(245,247,249,.9) 35%,rgba(245,247,249,.62) 52%,rgba(245,247,249,.18) 72%,rgba(245,247,249,0) 100%),url("images/hero-tenant-settings.webp") right center / cover no-repeat !important}
html:has(link[rel="canonical"][href="https://perspectiv.io/framework-customization"]) .hero-band{background:linear-gradient(90deg,rgba(245,247,249,.95) 0%,rgba(245,247,249,.9) 35%,rgba(245,247,249,.62) 52%,rgba(245,247,249,.18) 72%,rgba(245,247,249,0) 100%),url("images/hero-make-it-yours.webp") right center / cover no-repeat !important}
html:has(link[rel="canonical"][href="https://perspectiv.io/framework-lists-and-views"]) .hero-band{background:linear-gradient(90deg,rgba(245,247,249,.95) 0%,rgba(245,247,249,.9) 35%,rgba(245,247,249,.62) 52%,rgba(245,247,249,.18) 72%,rgba(245,247,249,0) 100%),url("images/hero-lists-and-views.webp") right center / cover no-repeat !important}
html:has(link[rel="canonical"][href="https://perspectiv.io/framework-documents-and-e-signature"]) .hero-band{background:linear-gradient(90deg,rgba(245,247,249,.95) 0%,rgba(245,247,249,.9) 35%,rgba(245,247,249,.62) 52%,rgba(245,247,249,.18) 72%,rgba(245,247,249,0) 100%),url("images/hero-documents-and-e-signature.webp") right center / cover no-repeat !important}
html:has(link[rel="canonical"][href="https://perspectiv.io/framework-forms-and-questionnaires"]) .hero-band{background:linear-gradient(90deg,rgba(245,247,249,.95) 0%,rgba(245,247,249,.9) 35%,rgba(245,247,249,.62) 52%,rgba(245,247,249,.18) 72%,rgba(245,247,249,0) 100%),url("images/hero-forms-and-questionnaires.webp") right center / cover no-repeat !important}
html:has(link[rel="canonical"][href="https://perspectiv.io/framework-workflow-notifications-and-my-work"]) .hero-band{background:linear-gradient(90deg,rgba(245,247,249,.95) 0%,rgba(245,247,249,.9) 35%,rgba(245,247,249,.62) 52%,rgba(245,247,249,.18) 72%,rgba(245,247,249,0) 100%),url("images/hero-workflow-notifications.webp") right center / cover no-repeat !important}
html:has(link[rel="canonical"][href="https://perspectiv.io/agenda"]) .hero-band{background:linear-gradient(90deg,rgba(245,247,249,.95) 0%,rgba(245,247,249,.9) 35%,rgba(245,247,249,.62) 52%,rgba(245,247,249,.18) 72%,rgba(245,247,249,0) 100%),url("images/hero-agenda.webp") right center / cover no-repeat !important}
html:has(link[rel="canonical"][href="https://perspectiv.io/bookings"]) .hero-band{background:linear-gradient(90deg,rgba(245,247,249,.95) 0%,rgba(245,247,249,.9) 35%,rgba(245,247,249,.62) 52%,rgba(245,247,249,.18) 72%,rgba(245,247,249,0) 100%),url("images/hero-bookings.webp") right center / cover no-repeat !important}
html:has(link[rel="canonical"][href="https://perspectiv.io/framework-portals-and-sites"]) .hero-band{background:linear-gradient(90deg,rgba(245,247,249,.95) 0%,rgba(245,247,249,.9) 35%,rgba(245,247,249,.62) 52%,rgba(245,247,249,.18) 72%,rgba(245,247,249,0) 100%),url("images/hero-portals-and-sites.webp") right center / cover no-repeat !important}
html:has(link[rel="canonical"][href="https://perspectiv.io/framework-ai"]) .hero-band{background:linear-gradient(90deg,rgba(245,247,249,.95) 0%,rgba(245,247,249,.9) 35%,rgba(245,247,249,.62) 52%,rgba(245,247,249,.18) 72%,rgba(245,247,249,0) 100%),url("images/hero-ai.webp") right center / cover no-repeat !important}
html:has(link[rel="canonical"][href="https://perspectiv.io/sales"]) .hero-band{background:linear-gradient(90deg,rgba(245,247,249,.95) 0%,rgba(245,247,249,.9) 35%,rgba(245,247,249,.62) 52%,rgba(245,247,249,.18) 72%,rgba(245,247,249,0) 100%),url("images/hero-sales-area.webp") right center / cover no-repeat !important}
html:has(link[rel="canonical"][href="https://perspectiv.io/projects"]) .hero-band{background:linear-gradient(90deg,rgba(245,247,249,.95) 0%,rgba(245,247,249,.9) 35%,rgba(245,247,249,.62) 52%,rgba(245,247,249,.18) 72%,rgba(245,247,249,0) 100%),url("images/hero-projects-area.webp") right center / cover no-repeat !important}
html:has(link[rel="canonical"][href="https://perspectiv.io/service"]) .hero-band{background:linear-gradient(90deg,rgba(245,247,249,.95) 0%,rgba(245,247,249,.9) 35%,rgba(245,247,249,.62) 52%,rgba(245,247,249,.18) 72%,rgba(245,247,249,0) 100%),url("images/hero-service-area.webp") right center / cover no-repeat !important}
html:has(link[rel="canonical"][href="https://perspectiv.io/events"]) .hero-band{background:linear-gradient(90deg,rgba(245,247,249,.95) 0%,rgba(245,247,249,.9) 35%,rgba(245,247,249,.62) 52%,rgba(245,247,249,.18) 72%,rgba(245,247,249,0) 100%),url("images/hero-events-area.webp") right center / cover no-repeat !important}
html:has(link[rel="canonical"][href="https://perspectiv.io/insights"]) .hero-band{background:linear-gradient(90deg,rgba(245,247,249,.95) 0%,rgba(245,247,249,.9) 35%,rgba(245,247,249,.62) 52%,rgba(245,247,249,.18) 72%,rgba(245,247,249,0) 100%),url("images/hero-insights-area.webp") right center / cover no-repeat !important}
html:has(link[rel="canonical"][href="https://perspectiv.io/finance"]) .hero-band{background:linear-gradient(90deg,rgba(245,247,249,.95) 0%,rgba(245,247,249,.9) 35%,rgba(245,247,249,.62) 52%,rgba(245,247,249,.18) 72%,rgba(245,247,249,0) 100%),url("images/hero-finance-area.webp") right center / cover no-repeat !important}
html:has(link[rel="canonical"][href="https://perspectiv.io/procurement"]) .hero-band{background:linear-gradient(90deg,rgba(245,247,249,.95) 0%,rgba(245,247,249,.9) 35%,rgba(245,247,249,.62) 52%,rgba(245,247,249,.18) 72%,rgba(245,247,249,0) 100%),url("images/hero-procurement-area.webp") right center / cover no-repeat !important}
html:has(link[rel="canonical"][href="https://perspectiv.io/people"]) .hero-band{background:linear-gradient(90deg,rgba(245,247,249,.95) 0%,rgba(245,247,249,.9) 35%,rgba(245,247,249,.62) 52%,rgba(245,247,249,.18) 72%,rgba(245,247,249,0) 100%),url("images/hero-people-area.webp") right center / cover no-repeat !important}
html:has(link[rel="canonical"][href="https://perspectiv.io/admin"]) .hero-band{background:linear-gradient(90deg,rgba(245,247,249,.95) 0%,rgba(245,247,249,.9) 35%,rgba(245,247,249,.62) 52%,rgba(245,247,249,.18) 72%,rgba(245,247,249,0) 100%),url("images/hero-admin-area.webp") right center / cover no-repeat !important}
html:has(link[rel="canonical"][href="https://perspectiv.io/framework"]) .hero-band{background:linear-gradient(90deg,rgba(245,247,249,.95) 0%,rgba(245,247,249,.9) 35%,rgba(245,247,249,.62) 52%,rgba(245,247,249,.18) 72%,rgba(245,247,249,0) 100%),url("images/hero-framework-area.webp") right center / cover no-repeat !important}