/* Fonts (Google Sans, Google Sans Flex) are loaded by a <link> in each page head — see tools/site/build.py */

/* ============================================================
   BRILLIENTA — design tokens
   ============================================================ */
:root{
  --navy:#17232e;
  --muted:#647079;
  --lime:#caf578;
  --line:#dfe5e6;
  --light:#f4f7f7;
  --sage:#5e872f;
  --paper:#fff;
  --maxw:1440px;
  --inner:1296px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px;-webkit-text-size-adjust:100%}
body{
  margin:0;color:var(--navy);
  font:16px/1.65 'Google Sans',sans-serif;
  background:#fff;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;display:block;height:auto}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:3px solid #427dba;outline-offset:5px
}
::selection{background:var(--lime);color:var(--navy)}

/* ---------- header ---------- */
header{
  height:91px;display:flex;align-items:center;gap:40px;
  max-width:var(--maxw);padding:0 5%;margin:auto;
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(160%) blur(10px);
  position:sticky;top:0;z-index:60;
}
.brand{display:flex;align-items:center;font:800 25px 'Google Sans Flex',sans-serif;letter-spacing:-1px;gap:9px}
.brandmark{
  width:30px;height:34px;background:var(--navy);color:var(--lime);
  border-radius:8px 8px 8px 2px;font:bold 31px/32px 'Google Sans Flex';
  text-align:center;display:inline-block;flex-shrink:0
}
nav{display:flex;gap:28px;margin:auto;font-size:14px;font-weight:600}
nav a{position:relative;padding:6px 0;transition:color .2s}
nav a:hover{color:#578124}
nav a[aria-current=page]{color:var(--navy)}
nav a[aria-current=page]::after{
  content:'';position:absolute;left:0;right:0;bottom:-2px;height:3px;
  background:var(--lime);border-radius:3px
}
.navcta{border:1px solid var(--navy);border-radius:7px;padding:11px 17px;font-size:14px;font-weight:650;transition:background .2s,color .2s}
.navcta:hover{background:var(--navy);color:#fff}
.navcta span{margin-left:15px}
.menu{display:none}

/* ---------- typography ---------- */
h1,h2,h3,p{margin-top:0}
h1,h2,h3,h4{font-family:'Google Sans Flex',sans-serif}
.eyebrow{font-size:12px;font-weight:750;letter-spacing:1.6px;margin:0 0 20px}
.miniicon{color:#5e872f;font-size:20px;vertical-align:middle;margin-right:8px}
h1{font-size:clamp(48px,5.9vw,84px);line-height:1.1;letter-spacing:-4px;margin-bottom:27px;font-weight:650}
h2{font-size:43px;line-height:1.22;font-weight:600;letter-spacing:-1.9px;margin-bottom:0}
h3{letter-spacing:-.6px}
.underline{position:relative;isolation:isolate}
.underline::after{
  content:'';position:absolute;left:0;right:0;bottom:3px;height:16px;
  background:var(--lime);z-index:-1;transform:rotate(-2deg)
}
.lead{font-size:17px;line-height:1.8;color:#59656d;max-width:660px}
.desktop{display:inline}

/* ---------- buttons / links ---------- */
.actions{display:flex;align-items:center;gap:27px;margin-top:29px;flex-wrap:wrap}
.button{
  display:inline-flex;gap:28px;align-items:center;justify-content:center;
  border:0;border-radius:7px;font-weight:600;font-size:14px;padding:15px 23px;
  transition:transform .2s,box-shadow .2s;font-family:'Google Sans',sans-serif
}
.button:hover{transform:translateY(-3px);box-shadow:0 8px 20px #17232e20}
.dark{background:var(--navy);color:#fff}
.lime{background:var(--lime);color:var(--navy)}
.ghost{border:1px solid var(--navy);background:transparent}
.ghost:hover{background:var(--navy);color:#fff}
.textlink{font-size:14px;font-weight:600}
.textlink span{margin-left:10px;transition:margin .2s}
.textlink:hover span{margin-left:16px}
.heronotes{display:flex;gap:22px;font-size:12px;color:var(--muted);margin-top:23px;flex-wrap:wrap}
.cornerstar{font-size:92px;line-height:1;color:#82a855;display:block}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  background:radial-gradient(ellipse at 88% 35%,#eaf5e4 0,transparent 48%),linear-gradient(#fff,#f4f7f6);
  padding:62px 5% 0;position:relative;overflow:hidden
}
.herotop{max-width:var(--inner);margin:auto;display:flex;justify-content:space-between;align-items:center;gap:40px}
.heroCopy{max-width:760px;animation:fade .7s ease both}
.sideNote{padding-right:40px;transform:rotate(5deg);text-align:center;flex-shrink:0}
.sideNote p{font-family:'Google Sans Flex',sans-serif;font-size:20px;line-height:1.4;margin:15px 0}
.small{font-size:10px;letter-spacing:1.5px}

/* sub-page hero */
.pagehero{
  background:radial-gradient(ellipse at 88% 35%,#eaf5e4 0,transparent 48%),linear-gradient(#fff,#f4f7f6);
  padding:70px 5% 66px;position:relative;overflow:hidden;
  border-bottom:1px solid var(--line)
}
.pagehero .inner{max-width:var(--inner);margin:auto;display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:center}
.pagehero .inner>*{min-width:0}
.pagehero h1{font-size:clamp(42px,4.6vw,66px);letter-spacing:-3px}
.crumbs{font-size:12px;letter-spacing:1.4px;color:var(--muted);margin-bottom:22px;font-weight:650}
.crumbs a:hover{color:var(--sage)}
.statband{display:flex;gap:34px;flex-wrap:wrap;margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
.statband div strong{display:block;font:650 32px/1.1 'Google Sans Flex',sans-serif;letter-spacing:-1.5px}
.statband div span{font-size:12px;color:var(--muted);display:block;max-width:22ch}
/* word-valued stats: a sentence fragment must not be set at numeral size */
.statband.words div strong{font:650 19px/1.3 'Google Sans Flex',sans-serif;letter-spacing:-.3px;max-width:16ch}

/* Microsoft 365 four-square icon (ecosystem strip) */
.msicon{display:inline-grid;grid-template-columns:repeat(2,9px);gap:2px}
.msicon i{width:9px;height:9px;background:#f25022;display:block}
.msicon i:nth-child(2){background:#7fba00}
.msicon i:nth-child(3){background:#00a4ef}
.msicon i:nth-child(4){background:#ffb900}

/* ============================================================
   ECOSYSTEM STRIP
   ============================================================ */
.ecosystem{max-width:var(--inner);margin:auto;padding:36px 0 30px;text-align:center}
.ecosystem>span{font-size:10px;letter-spacing:1.5px;color:#76817e}
.ecosystem>div{display:flex;justify-content:center;align-items:center;gap:57px;margin-top:16px;flex-wrap:wrap}
.ecosystem b{font-size:19px;color:#5f6b6a;font-weight:600;letter-spacing:-.5px}
.msword{display:flex;align-items:center;gap:9px}

/* ============================================================
   SECTIONS
   ============================================================ */
.section{padding:85px 5%;max-width:var(--maxw);margin:auto}
.sectionhead{display:flex;justify-content:space-between;align-items:end;gap:35px;margin-bottom:35px}
.sectionhead p:not(.eyebrow){font-size:15px;color:var(--muted);margin-bottom:8px;max-width:420px}
.band{background:#f8faf7;max-width:none}
.band-grey{background:#f6f8f9;max-width:none}
.band-inner{max-width:var(--inner);margin:auto;padding-left:max(5%,calc((100% - var(--inner))/2));padding-right:max(5%,calc((100% - var(--inner))/2))}

/* ---------- app cards ---------- */
.appgrid{display:grid;grid-template-columns:1.05fr 1fr 1fr;gap:18px}
.appgrid article{
  padding:25px;border:1px solid var(--line);border-radius:10px;
  display:flex;flex-direction:column;transition:transform .25s,border-color .25s;background:#fff
}
.appgrid article:hover{transform:translateY(-4px);border-color:#9baa97}
.appgrid .suite{grid-row:span 2;background:#edf4e6;border-color:#edf4e6;position:relative;padding:30px}
.tileicon{width:40px;height:40px;display:grid;place-items:center;font-size:25px;border-radius:9px;background:#d5e8b7;margin-bottom:23px}
.blue{background:#e5eef7}.peach{background:#f8e9df}.violet{background:#eeebf7}.yellow{background:#f6f0d6}
.pill{font-size:9px;letter-spacing:1px;position:absolute;right:24px;top:40px}
.appgrid h3{font-size:20px;letter-spacing:-.5px;margin-bottom:10px}
.appgrid p{font-size:14px;color:#65716e;line-height:1.8;margin-bottom:18px}
.appgrid ul{list-style:none;padding:0;margin:10px 0 30px;font-size:13px;line-height:2.6}
.appgrid li::before{content:'✓';margin-right:10px;color:var(--sage)}
.cardlink{display:flex;justify-content:space-between;gap:15px;background:none;border:0;border-top:1px solid #dce4dc;text-align:left;padding:15px 0 0;font-size:12px;font-weight:600;margin-top:auto;width:100%}
.cardlink span{transition:transform .2s}
.cardlink:hover span{transform:translate(3px,-3px)}
.suite h3{font-size:28px}
.suite .tileicon{margin-bottom:38px}
.moreapps{display:flex;align-items:center;justify-content:center;gap:25px;margin-top:28px;flex-wrap:wrap}
.moreapps>span{font-size:10px;letter-spacing:1px;color:#7d8783}
.moreapps p{font-size:13px;margin:0}
.moreapps b{padding:0 14px;font-weight:400;color:#8e9991}

/* ============================================================
   EXPLORE (tabbed content)
   ============================================================ */
.explore{border-top:1px solid var(--line)}
.explorehead{max-width:800px}
.explorehead>p:last-child{color:var(--muted);font-size:16px;margin:22px 0 32px;line-height:1.8}
.contenttabs{
  display:flex;gap:6px;overflow-x:auto;padding:7px;background:#f0f4ef;
  border:1px solid #e0e7dc;border-radius:9px;margin-bottom:30px;scrollbar-width:thin
}
.contenttabs button{
  flex:1;white-space:nowrap;border:0;background:transparent;font-size:14px;
  padding:12px 16px;border-radius:6px;transition:background .2s
}
.contenttabs button[aria-selected=true]{background:var(--navy);color:#fff;box-shadow:0 3px 10px #17232e15}
.contenttabs button:hover:not([aria-selected=true]){background:#e1e9da}
.contentpanel[hidden]{display:none}
.contentpanel:not([hidden]){animation:fade .3s ease}
.panelintro{display:flex;gap:30px;align-items:flex-start;max-width:950px;padding:12px 0 25px}
.chapter{font-size:13px;color:#728267;border:1px solid #dbe4d6;border-radius:5px;padding:8px 13px;white-space:nowrap;margin-top:4px}
.panelintro h3{font-size:28px;line-height:1.35;letter-spacing:-.9px;margin-bottom:15px}
.panelintro p{font-size:16px;line-height:1.8;color:var(--muted);margin:0}
.featuregrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.featuregrid article{border:1px solid var(--line);border-radius:9px;padding:24px;background:#fff}
.featurecount{font-size:13px;color:#7b8a70}
.featuregrid h4{font:650 17px/1.5 'Google Sans Flex',sans-serif;margin:16px 0 10px;letter-spacing:-.3px}
.featuregrid p{font-size:15px;line-height:1.8;color:var(--muted);margin:0}
.workflow{margin-top:28px;padding:25px 28px;background:#f5f7f4;border-radius:9px}
.workflow .eyebrow{margin-bottom:18px}
.workflow ol{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin:0;padding:0;list-style:none;counter-reset:steps}
.workflow li{counter-increment:steps;position:relative;padding-left:36px;font-size:14px;line-height:1.6}
.workflow li::before{
  content:counter(steps);position:absolute;left:0;top:0;border-radius:50%;
  background:#dce9cc;display:grid;place-items:center;width:25px;height:25px;
  font-size:12px;font-weight:700
}
.outcome{margin:22px 0 0;border-left:3px solid #afce8b;padding:12px 20px;font-size:14px;line-height:1.8;color:var(--muted)}
.outcome strong{display:block;color:var(--navy);font-size:14px;margin-bottom:4px}
#apps-explore{background:#f8faf7;max-width:none}
#m365-explore{background:#f6f8f9;max-width:none}
#apps-explore,#m365-explore{padding-left:max(5%,calc((100% - var(--inner))/2));padding-right:max(5%,calc((100% - var(--inner))/2))}
#services-explore{padding-top:30px;border:0}

/* ============================================================
   SECURITY / M365
   ============================================================ */
.security{
  background:var(--navy);color:#fff;max-width:none;display:grid;
  grid-template-columns:1fr 1fr;gap:50px;
  padding-left:max(5%,calc((100% - var(--inner))/2));
  padding-right:max(5%,calc((100% - var(--inner))/2))
}
.securitycopy>p:not(.eyebrow){color:#b5c2c9;font-size:15px;max-width:480px;margin-bottom:15px}
.security h2{margin-bottom:25px}
.security em{font-style:normal;color:var(--lime)}
.security .eyebrow{color:#b9c6cc}
.security .button{margin-top:13px}
.tenant{align-self:center;border:1px solid #516048;padding:26px;background:#ffffff04;border-radius:13px;min-width:0}
.tenanttop{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:11px;letter-spacing:1.6px;color:#d1e8b5}
.tenanttop>span:last-child{font-size:26px;line-height:1}
.tenantapps{display:flex;justify-content:space-between;gap:9px;margin-top:28px}
.tenantapps span{background:#2e3a44;padding:10px 12px;border:1px solid #44505a;border-radius:6px;
  font-size:12px;flex:1 1 0;min-width:0;text-align:center;overflow-wrap:anywhere;line-height:1.3}
.connector{text-align:center;font-size:10px;color:#92a187;margin:20px 0}
.sharepoint{border:1px solid #53634b;border-radius:9px;background:#263632;display:flex;align-items:center;gap:15px;padding:24px}
.spbadge{display:grid;place-items:center;background:#068a8c;color:#fff;border-radius:8px;width:44px;height:44px;font:bold 28px 'Google Sans Flex';flex-shrink:0}
.sharepoint h3{font-size:18px;margin:0}
.sharepoint p{font-size:12px;color:#a6b5b3;margin:3px 0 0}
.sharepoint>span:last-child{margin-left:auto;font-size:24px;color:var(--lime)}
.tenantfeatures{display:flex;gap:6px;justify-content:space-between;margin-top:23px;font-size:10px;color:#c2cdc8;flex-wrap:wrap}
.tenantnote{font-size:10px;color:#93a2aa;text-align:center;margin:22px 0 0}
.securityfeatures{display:grid;grid-template-columns:repeat(3,1fr);grid-column:1/-1;gap:45px;border-top:1px solid #3c4750;padding-top:28px;margin-top:4px}
.securityfeatures>div>span{color:#9cacb5;font-size:11px}
.securityfeatures h3{font-size:16px;margin:10px 0}
.securityfeatures p{font-size:13px;color:#aebbc3;margin:0}

/* ============================================================
   SERVICES
   ============================================================ */
.servicerows :is(button,a){
  border-top:1px solid var(--line);width:100%;
  background:#fff;display:grid;grid-template-columns:50px 1fr 1fr 45px;gap:18px;
  align-items:center;text-align:left;padding:26px 0;transition:background .2s
}
.servicerows :is(button,a):last-child{border-bottom:1px solid var(--line)}
.servicerows :is(button,a):hover{background:#f7f9f5}
.servicenum{font-size:12px;color:#8b9797}
.servicerows h3{margin:0;font-size:21px;letter-spacing:-.7px}
.servicerows p{margin:0;font-size:13px;color:var(--muted);max-width:310px}
.roundarrow{border:1px solid var(--line);width:40px;height:40px;border-radius:50%;display:grid;place-items:center;transition:transform .2s,background .2s}
.servicerows :is(button,a):hover .roundarrow{transform:translate(3px,-3px);background:var(--lime)}

/* ============================================================
   CLOSING / CTA / FAQ / FOOTER
   ============================================================ */
.closing{background:var(--lime);margin:0 5%;border-radius:12px;text-align:center;padding:52px 25px;position:relative;overflow:hidden}
.closing .cornerstar{position:absolute;left:6%;top:35%;color:#6a883c;font-size:95px}
.closing h2{margin-bottom:25px}
.closing .eyebrow{font-size:10px}
/* The FAQ heading and the questions sit side by side. `.faq` itself is a plain
   block — the columns come from the `.faqcols` wrapper inside it, so the
   section can also carry the `.band` background without a nested grid. */
.faq{display:block}
.faq .faqcols{display:grid;grid-template-columns:1fr 1.4fr;gap:60px;align-items:start}
.questions details{border-bottom:1px solid var(--line);padding:19px 0}
.questions details:first-child{padding-top:0}
.questions details:last-child{border-bottom:0}
.questions summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;
  align-items:flex-start;gap:24px;font-size:15px;font-weight:550;line-height:1.5
}
.questions summary::-webkit-details-marker{display:none}
.questions summary::after{
  content:'+';font-size:21px;font-weight:400;flex:0 0 auto;line-height:1.25;
  transition:transform .2s,color .2s;color:var(--sage)
}
.questions details[open] summary::after{content:'−'}
.questions summary:hover::after{color:var(--navy)}
.questions p{font-size:14px;color:var(--muted);padding-right:25px;margin:13px 0 0}

footer{border-top:1px solid var(--line);padding:28px 5%;display:flex;align-items:center;gap:30px;max-width:var(--maxw);margin:auto}
footer .brand{font-size:21px}
footer p{font-size:12px;color:var(--muted);margin:0}
footer>span{font-size:11px;color:var(--muted);margin-left:auto}
footer>a:last-child{font-size:12px}

dialog{
  width:min(560px,90vw);border:1px solid var(--line);border-radius:15px;padding:40px;
  color:var(--navy);box-shadow:0 30px 100px #0003;background:#fff
}
dialog::backdrop{background:#17232eb3;backdrop-filter:blur(5px)}
dialog h2{font-size:31px;margin:10px 0 20px}
dialog>p:not(.eyebrow){font-size:15px;color:var(--muted)}
dialog ul{padding-left:20px;font-size:14px;line-height:2.1;margin-bottom:25px}
.close{position:absolute;right:15px;top:10px;background:none;border:0;font-size:27px}

@keyframes fade{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1500px){.closing{max-width:var(--inner);margin:auto}}

/* ============================================================
   SCREENSHOT SHOWCASE
   ============================================================ */
.shot{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;
  box-shadow:0 18px 50px #2838310d;transition:transform .25s,box-shadow .25s}
.shot:hover{transform:translateY(-3px);box-shadow:0 26px 60px #2838311a}
.shot img{width:100%;display:block;border-bottom:1px solid var(--line);background:#f4f7f7}
.shot .cap{padding:14px 16px}
.shot .cap b{display:block;font:650 14px/1.4 'Google Sans Flex',sans-serif;letter-spacing:-.3px;margin-bottom:3px}
.shot .cap span{font-size:12.5px;color:var(--muted);line-height:1.65;display:block}

.appgrid.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.appgrid.shots .wide{grid-column:span 2}
.appgrid.shots .shot .cap{padding:18px 20px}
.appgrid.shots .shot .cap b{font-size:17px;margin-bottom:6px}
.appgrid.shots .shot .cap span{font-size:13.5px}
.appgrid.shots .shot img{aspect-ratio:16/9;object-fit:cover;object-position:top left}

.figpair{display:grid;grid-template-columns:1.15fr .85fr;gap:22px;align-items:center}
.figpair.rev{grid-template-columns:.85fr 1.15fr}
.figstack{display:grid;gap:16px}
.figstack .shot img{aspect-ratio:16/10;object-fit:cover;object-position:top left}
/* images that keep their own proportions (diagrams, illustrations) instead of
   being cropped to a fixed ratio. The ratio is declared explicitly so space is
   reserved even before an SVG finishes loading. */
.shot img.natural,
.figstack .shot img.natural,
.prodfigs .shot.wide img.natural{
  aspect-ratio:1180/760;object-fit:contain;height:auto;background:var(--navy)
}
.figbleed{margin:0 -5% 0 0}
.figbleed .shot img{border-radius:12px 0 0 12px}
.figbleed .shot{border-radius:12px 0 0 12px;box-shadow:0 24px 70px #17232e1a}
.figbleed{padding-right:5%}

/* ---------- feature bullets ---------- */
.ticks{list-style:none;padding:0;margin:0 0 26px}
.ticks li{position:relative;padding-left:30px;font-size:15px;line-height:1.7;color:#4d5a63;margin-bottom:9px}
.ticks li::before{
  content:'✓';position:absolute;left:0;top:2px;width:18px;height:18px;border-radius:50%;
  background:#e3f0cf;color:var(--sage);font-size:10px;font-weight:800;display:grid;place-items:center
}
.ticks.tight li{font-size:14px;margin-bottom:6px}

/* ---------- numbered steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;counter-reset:s}
.steps>div{counter-increment:s;position:relative;padding-top:44px}
.steps>div::before{
  content:counter(s,decimal-leading-zero);position:absolute;top:0;left:0;font:800 34px/1 'Google Sans Flex',sans-serif;
  color:#dfe9d4;letter-spacing:-2px
}
.steps>div::after{content:'';position:absolute;top:12px;left:52px;right:0;height:1px;background:var(--line)}
/* no trailing connector after the final step, but keep its number */
.steps>div:last-child::after{display:none}
.steps b{display:block;font:650 15px/1.5 'Google Sans Flex',sans-serif;letter-spacing:-.2px;margin-bottom:6px}
.steps p{font-size:14px;color:var(--muted);margin:0;line-height:1.75}

/* ---------- comparison table ---------- */
.cmp{width:100%;border-collapse:collapse;font-size:14px;min-width:640px}
.cmp th,.cmp td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.cmp thead th{font:650 13px 'Google Sans Flex',sans-serif;background:var(--light);letter-spacing:-.2px}
.cmp tbody th{font-weight:600}
.cmp td{color:var(--muted)}
.cmp td.yes{color:var(--sage);font-weight:700}
.cmpwrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px;background:#fff}

/* ---------- stat cards ---------- */
.statcard{border:1px solid var(--line);border-radius:10px;padding:22px;background:#fff}
.statcard b{display:block;font:700 34px/1.1 'Google Sans Flex',sans-serif;letter-spacing:-1.6px;margin-bottom:5px}
.statcard span{font-size:13px;color:var(--muted);line-height:1.6;display:block}

/* ---------- quote ---------- */
.quote{background:var(--light);border-radius:12px;padding:36px 40px;position:relative}
.quote p{font:600 20px/1.6 'Google Sans Flex',sans-serif;letter-spacing:-.5px;margin:0 0 18px;max-width:900px}
.quote footer{border:0;padding:0;font-size:13px;color:var(--muted)}
.quote .cornerstar{position:absolute;right:34px;top:22px;font-size:52px;opacity:.35}

/* ---------- logos / trust strip ---------- */
.trust{display:flex;gap:44px;justify-content:center;align-items:center;flex-wrap:wrap;opacity:.72}
.trust span{font:700 15px 'Google Sans Flex',sans-serif;letter-spacing:-.3px;color:#8b9797;white-space:nowrap}

/* ---------- reveal (only when JS is available, so content is never stuck hidden) ---------- */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.js .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none}}

/* ---------- contact ---------- */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:15px}
.field label{font-size:12px;font-weight:650;letter-spacing:.4px;color:#4d5a63}
.field input,.field select,.field textarea{
  font:inherit;font-size:14px;padding:11px 13px;border:1px solid var(--line);border-radius:8px;
  background:#fff;color:var(--navy);width:100%
}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:#9baa97}
.note{font-size:12.5px;color:var(--muted);line-height:1.7}
.pill-list{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.pill-list label{display:inline-flex;align-items:center;font-weight:500;cursor:pointer;user-select:none}
.pill-list label:has(input:checked){background:var(--navy);color:#fff;border-color:var(--navy)}
.pill-list label:has(input:focus-visible){outline:3px solid #427dba;outline-offset:3px}
.pill-list a{font-size:13px;border:1px solid var(--line);border-radius:20px;padding:6px 13px;transition:background .2s,border-color .2s}
.pill-list a:hover{background:var(--light);border-color:#c3cec6}
.info-row{display:flex;gap:14px;padding:14px 0;border-top:1px solid var(--line)}
.info-row b{display:block;font-size:14px;margin-bottom:2px}
.info-row span{font-size:13px;color:var(--muted);line-height:1.6;display:block}
.info-ic{width:34px;height:34px;border-radius:9px;background:#e3f0cf;color:var(--sage);
  display:grid;place-items:center;font-size:15px;flex:0 0 34px}

/* ---------- misc ---------- */
.badge-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.badge{font-size:11.5px;font-weight:600;border:1px solid var(--line);border-radius:20px;padding:5px 12px;color:#4d5a63;background:#fff}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.splitspace{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.mt-s{margin-top:22px}.mt-l{margin-top:42px}
.hr{height:1px;background:var(--line);border:0;margin:0}

/* ============================================================
   PRODUCT SECTIONS
   ============================================================ */
.prodjump{
  position:sticky;top:91px;z-index:50;background:rgba(255,255,255,.95);
  backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid var(--line)
}
.prodjump .inner{max-width:var(--inner);margin:auto;display:flex;gap:6px;padding:11px 5%;overflow-x:auto;scrollbar-width:thin}
.prodjump a{
  white-space:nowrap;font-size:12.5px;font-weight:600;color:var(--muted);
  padding:7px 14px;border-radius:20px;border:1px solid transparent;transition:all .2s
}
.prodjump a:hover{background:var(--light);color:var(--navy)}
.prodjump a.on{background:var(--navy);color:#fff}

.product{padding:82px 5%;max-width:var(--maxw);margin:auto;scroll-margin-top:140px}
.product+.product{border-top:1px solid var(--line)}
.product .inner{max-width:var(--inner);margin:auto}
.prodhead{display:flex;align-items:flex-start;gap:26px;margin-bottom:34px}
.prodnum{
  flex:0 0 auto;width:56px;height:56px;border-radius:14px;background:var(--navy);color:var(--lime);
  display:grid;place-items:center;font:800 18px 'Google Sans Flex',sans-serif;letter-spacing:-.5px
}
.prodhead h2{font-size:clamp(30px,3.4vw,44px);letter-spacing:-1.7px;margin-bottom:10px}
.prodhead .tagline{font-size:17px;color:var(--muted);margin:0;max-width:660px;line-height:1.7}
.prodmeta{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-bottom:34px}
.prodmeta>div{border-left:2px solid #afce8b;padding:2px 0 2px 18px}
.prodmeta h4{font:650 12px 'Google Sans Flex',sans-serif;letter-spacing:.6px;text-transform:uppercase;color:var(--sage);margin:0 0 7px}
.prodmeta p{font-size:14.5px;color:var(--muted);line-height:1.75;margin:0}
.prodfigs{display:grid;grid-template-columns:1.25fr .75fr;gap:18px;margin-bottom:8px;align-items:start}
.prodfigs .shot.wide img{aspect-ratio:16/9;object-fit:cover;object-position:top left}
.prodout{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:26px 0}
.prodout div{border:1px solid var(--line);border-radius:10px;padding:18px;background:#fff}
.prodout b{display:block;font:700 26px/1.1 'Google Sans Flex',sans-serif;letter-spacing:-1.1px;margin-bottom:4px}
.prodout span{font-size:12.5px;color:var(--muted);line-height:1.55;display:block}
.prodfoot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-top:24px;border-top:1px solid var(--line)}
.prodfoot .note{margin-right:auto}

@media(max-width:1000px){
  .prodjump{top:74px}
  .prodfigs{grid-template-columns:1fr}
  .prodmeta{grid-template-columns:1fr;gap:18px}
  .prodout{grid-template-columns:repeat(2,1fr)}
  .prodhead{gap:18px}
  .prodnum{width:46px;height:46px;font-size:16px;border-radius:12px}
}
@media(max-width:720px){
  .prodout{grid-template-columns:1fr}
  .product{padding:56px 5%}
  .prodjump .inner{padding:9px 5%}
  .prodfoot .note{margin-right:0;width:100%}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* ============================================================
   INTRANET BUILDER — architecture, packages, code, flows
   ============================================================ */

/* architecture layer stack */
.arch{display:grid;gap:10px}
.arch .layer{
  display:grid;grid-template-columns:210px 1fr;gap:20px;align-items:center;
  border:1px solid var(--line);border-radius:10px;padding:14px 18px;background:#fff
}
.arch .layer.key{border-color:#cfe0bd;background:#f5faef}
.arch .layer.key .lt{color:var(--sage)}
.arch .lt{font:650 13.5px/1.4 'Google Sans Flex',sans-serif;letter-spacing:-.2px}
.arch .lt span{display:block;font:400 11px/1.4 'Google Sans',sans-serif;color:var(--muted);letter-spacing:0;margin-top:3px}
.arch .lv{display:flex;gap:7px;flex-wrap:wrap}
.arch .lv i{font-style:normal;font-size:11.5px;background:var(--light);border:1px solid var(--line);
  border-radius:5px;padding:4px 9px;color:#48555e;white-space:nowrap}
.arch .arrow{text-align:center;color:#b6c0c4;font-size:13px;line-height:1}

/* solution package cards */
.pkggrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pkg{border:1px solid var(--line);border-radius:10px;padding:18px;background:#fff;transition:transform .2s,border-color .2s}
.pkg:hover{transform:translateY(-2px);border-color:#c3cec6}
.pkg .file{
  display:inline-block;font:600 11.5px ui-monospace,SFMono-Regular,Menlo,monospace;
  background:var(--navy);color:var(--lime);border-radius:5px;padding:4px 9px;margin-bottom:11px
}
.pkg h4{font:650 15px/1.4 'Google Sans Flex',sans-serif;margin:0 0 7px;letter-spacing:-.2px}
.pkg p{font-size:13px;color:var(--muted);line-height:1.7;margin:0}

/* code / manifest block */
.codeblock{background:#12202b;border-radius:10px;overflow:hidden}
.codeblock .bar{
  display:flex;align-items:center;gap:8px;padding:10px 16px;background:#0d1922;
  font:500 11.5px ui-monospace,SFMono-Regular,Menlo,monospace;color:#8fa2ae
}
.codeblock .bar i{width:9px;height:9px;border-radius:50%;background:#3d4d59;display:block}
.codeblock .bar b{margin-left:6px;font-weight:500;color:#c6d3db}
.codeblock pre{margin:0;padding:18px 20px;overflow-x:auto;font:12.5px/1.75 ui-monospace,SFMono-Regular,Menlo,monospace;color:#d7e2e9}
.codeblock pre .c{color:#7f929e}
.codeblock pre .k{color:#9fd6a0}
.codeblock pre .s{color:#e5c07b}
.codeblock pre .f{color:#7fc7e8}

/* provisioning flow */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.flow div{
  position:relative;border:1px solid var(--line);border-radius:8px;padding:12px 13px;background:#fff;font-size:12.5px
}
.flow div b{display:block;font:650 12.5px 'Google Sans Flex',sans-serif;margin-bottom:3px}
.flow div span{font-size:11.5px;color:var(--muted);line-height:1.55;display:block}
.flow div::after{
  content:'';position:absolute;top:50%;right:-7px;width:12px;height:1px;background:#c8d2d6;z-index:1
}
.flow div:nth-child(4n)::after,.flow div:last-child::after{display:none}
.flow div.on{border-color:#cfe0bd;background:#f5faef}
.states{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.states b{font:600 11.5px ui-monospace,SFMono-Regular,Menlo,monospace;border:1px solid var(--line);
  border-radius:20px;padding:5px 12px;background:#fff;color:#48555e}
.states b.ok{border-color:#cfe0bd;background:#f5faef;color:var(--sage)}
.states b.warn{border-color:#f0dcb8;background:#fdf7ec;color:var(--amber)}
.states b.bad{border-color:#f0cfcb;background:#fdf1ef;color:var(--red)}

/* identity cards */
.identgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ident{border:1px solid var(--line);border-radius:10px;padding:20px;background:#fff}
.ident h4{font:650 15px 'Google Sans Flex',sans-serif;margin:0 0 4px;display:flex;align-items:center;gap:9px}
.ident h4 em{width:9px;height:9px;border-radius:50%;display:block;flex:0 0 9px}
.ident .role{font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);margin:0 0 11px}
.ident ul{list-style:none;padding:0;margin:0}
.ident li{font-size:13px;color:#55626b;line-height:1.7;padding-left:16px;position:relative;margin-bottom:5px}
.ident li::before{content:'';position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:#c3cec6}

/* dense specification table */
.spec{width:100%;border-collapse:collapse;font-size:13.5px;min-width:620px}
.spec th,.spec td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.spec thead th{font:650 12px 'Google Sans Flex',sans-serif;background:var(--light);letter-spacing:.3px;white-space:nowrap}
.spec tbody th{font-weight:600;white-space:nowrap;color:var(--navy)}
.spec td{color:var(--muted)}
.spec td code{font:12px ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--light);
  border-radius:4px;padding:1px 5px;color:#48555e}
.spec .w60{width:60%}.spec .w35{width:35%}.spec .w20{width:20%}
.spec tbody tr:hover{background:#fbfcfa}

/* wizard stages */
.wizard{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;counter-reset:w}
.wizard>div{counter-increment:w;position:relative;padding:16px 16px 16px 0;border-top:2px solid var(--line)}
.wizard>div::before{
  content:counter(w,decimal-leading-zero);font:800 12px/1 'Google Sans Flex',sans-serif;color:var(--sage);
  display:block;margin-bottom:9px
}
.wizard>div.on{border-top-color:var(--lime)}
.wizard b{display:block;font:650 13.5px/1.45 'Google Sans Flex',sans-serif;margin-bottom:5px}
.wizard p{font-size:12.5px;color:var(--muted);line-height:1.65;margin:0}

/* guidance / callout */
.guide{border-left:3px solid var(--lime);background:#f7faf4;border-radius:0 8px 8px 0;padding:16px 20px;margin:22px 0}
.guide p{margin:0;font-size:14px;line-height:1.75;color:#4d5a63}
.guide code{font:12.5px ui-monospace,SFMono-Regular,Menlo,monospace;background:#fff;border:1px solid var(--line);
  border-radius:4px;padding:2px 6px;color:var(--sage)}
.warnbox{border-left:3px solid #d9a441;background:#fdf9f0;border-radius:0 8px 8px 0;padding:16px 20px;margin:22px 0}
.warnbox p{margin:0;font-size:14px;line-height:1.75;color:#5a4a2c}
.warnbox b{display:block;margin-bottom:4px;color:#7a5c15;font:650 13.5px 'Google Sans Flex',sans-serif}
.warnbox code{font:12.5px ui-monospace,SFMono-Regular,Menlo,monospace;background:#fff;
  border:1px solid #f0dcb8;border-radius:4px;padding:1px 6px;color:#8a5a1c}
.warnbox em{font-style:italic;font-weight:600}

/* home page promo banner */
.promo{
  position:relative;overflow:hidden;background:var(--navy);color:#fff;border-radius:14px;
  padding:44px 5%;margin:0 0 22px
}
.promo .inner{max-width:var(--inner);margin:auto;display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.promo .eyebrow{color:var(--lime);margin-bottom:16px}
.promo h2{color:#fff;font-size:clamp(28px,3.2vw,42px);letter-spacing:-1.6px;margin-bottom:16px}
.promo p.lead{color:#b5c2c9;margin-bottom:0}
.promo .badge-row .badge{background:transparent;border-color:#3c4750;color:#c3cdd3}
.promo .button.lime{margin-top:26px}
.promo .pfig{align-self:stretch;display:flex;align-items:center;justify-content:center}
.promo .pfig img{width:100%;height:auto;border-radius:10px;box-shadow:0 24px 70px #0006}
.promo .pstats{display:flex;gap:26px;margin-top:26px;flex-wrap:wrap}
.promo .pstats div b{display:block;font:700 24px/1.1 'Google Sans Flex',sans-serif;letter-spacing:-1px;color:var(--lime)}
.promo .pstats div span{font-size:12px;color:#93a2aa}

/* shared framework capability chips */
.caps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.caps div{border:1px solid var(--line);border-radius:9px;padding:15px;background:#fff}
.caps b{display:block;font:650 13px 'Google Sans Flex',sans-serif;margin-bottom:5px}
.caps p{font-size:12.5px;color:var(--muted);line-height:1.6;margin:0}

@media(max-width:1200px){
  .pkggrid{grid-template-columns:repeat(2,1fr)}
  .caps{grid-template-columns:repeat(2,1fr)}
  .flow{grid-template-columns:repeat(2,1fr)}
  .flow div:nth-child(4n)::after{display:block}
  .flow div:nth-child(2n)::after{display:none}
  .wizard{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:1000px){
  .promo .inner{grid-template-columns:1fr;gap:32px}
  .identgrid{grid-template-columns:1fr}
  .arch .layer{grid-template-columns:1fr;gap:9px}
}
@media(max-width:720px){
  .pkggrid,.caps,.flow{grid-template-columns:1fr}
  .flow div::after{display:none!important}
  .wizard{grid-template-columns:1fr;gap:0}
  .wizard>div{padding:14px 0}
  .promo{padding:32px 5%}
}

@media(max-width:1200px){
  .featuregrid{grid-template-columns:repeat(2,1fr)}
  .workflow ol{grid-template-columns:repeat(2,1fr)}
  nav{gap:16px}header{gap:20px}
  .steps{grid-template-columns:repeat(2,1fr);gap:28px 24px}
  .appgrid.shots{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:1000px){
  .figpair,.figpair.rev,.splitspace{grid-template-columns:1fr;gap:32px}
  .figbleed{margin:0;padding-right:0}
  .figbleed .shot{border-radius:12px}
  .figbleed .shot img{border-radius:12px 12px 0 0}
  .appgrid.shots{grid-template-columns:1fr}
  .appgrid.shots .wide{grid-column:auto}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .quote{padding:28px 24px}
}
@media(max-width:1000px){
  header{gap:20px}nav{gap:18px}.navcta{display:none}
  .sideNote{padding-right:0}
  .ecosystem>div{gap:25px}
  .appsidebar{width:180px}
  .appgrid{gap:12px}.appgrid article{padding:20px}
  .pill{position:static;margin-bottom:15px}
  .suite .tileicon{margin-bottom:15px}
  .tenant{padding:18px}.tenantapps span{padding:8px 6px}
  .moreapps{flex-direction:column;gap:8px}
  .security{gap:30px}
  .servicerows :is(button,a){grid-template-columns:28px 1fr 1fr 40px}
  footer{gap:18px}
  .closing .cornerstar{font-size:60px;left:4%}
  .pagehero .inner{grid-template-columns:1fr;gap:35px}
}@media(max-width:720px){
  header{height:74px;justify-content:space-between;position:sticky}
  .brand{font-size:23px}
  .menu{display:block;border:1px solid var(--line);border-radius:5px;padding:4px 10px;font-size:18px}
  nav{display:none;position:absolute;top:74px;left:0;right:0;background:#fff;padding:24px 5%;z-index:60;border-bottom:1px solid var(--line);box-shadow:0 15px 25px #0001;margin:0}
  nav.open{display:flex;flex-direction:column;gap:18px}
  .hero{padding-top:38px}
  h1{letter-spacing:-2.4px;font-size:53px}
  .hero .eyebrow{font-size:10px}
  .sideNote{display:none}
  .lead{font-size:15px}
  .desktop{display:none}
  .actions{gap:18px;flex-wrap:wrap}
  .heronotes{gap:8px;flex-direction:column}
  .product{margin-top:0}
  .appsidebar{width:100%;padding:9px;display:flex;flex-direction:row;overflow:auto;gap:5px;border-bottom:1px solid var(--line)}
  .appbrand,.workspace,.sidelabel,.sidebottom{display:none}
  .appsidebar button{white-space:nowrap;padding:8px;font-size:11px}
  .appbar{padding:10px 14px}
  .appbar .sample{font-size:7px;letter-spacing:.3px}
  .appbar>.avatar{display:none}
  #preview{padding:15px 12px}
  .previewtitle h3{font-size:18px}
  .previewdate{display:none}
  .metrics{gap:6px;grid-template-columns:repeat(2,1fr)}
  .metric{padding:8px}.metric strong{font-size:20px}
  .overviewbottom{grid-template-columns:1fr;gap:10px;margin-top:10px}
  .overviewbottom .panel:last-child{display:none}
  .ecosystem{padding:25px 0}.ecosystem>span{font-size:9px}
  .ecosystem>div{flex-wrap:wrap;gap:15px 22px}
  .ecosystem b{font-size:14px}
  .section{padding:55px 5%}
  .sectionhead{display:block}
  .sectionhead p:not(.eyebrow){margin-top:20px;font-size:14px}
  h2{font-size:34px;letter-spacing:-1.3px}
  .eyebrow{font-size:10px}
  .appgrid{grid-template-columns:1fr}
  .appgrid .suite{grid-row:auto}
  .appgrid article{padding:24px}
  .appgrid .tileicon{margin-bottom:18px}
  .appgrid p{font-size:15px}
  .appgrid .cardlink{font-size:13px}
  .pill{position:absolute;top:37px;font-size:9px}
  .suite .tileicon{margin-bottom:23px}
  .moreapps p{font-size:12px;text-align:center;line-height:2}
  .moreapps b{padding:0 5px}
  .security{grid-template-columns:1fr;gap:35px}
  .securityfeatures{grid-template-columns:1fr;gap:23px}
  .securityfeatures h3{margin-top:4px}
  .tenantfeatures{font-size:9px}
  .servicerows :is(button,a){grid-template-columns:22px 1fr 37px;gap:10px}
  .servicerows h3{font-size:18px}
  .servicerows p{grid-column:2;grid-row:2;font-size:13px}
  .roundarrow{grid-row:1/3;grid-column:3;width:34px;height:34px}
  .closing{padding:40px 20px}
  .closing h2{font-size:29px}
  .closing .cornerstar{display:none}
  .faq .faqcols{grid-template-columns:1fr;gap:30px}
  .questions summary{font-size:14px}
  .grid-4{grid-template-columns:1fr;gap:14px}
  .steps{grid-template-columns:1fr;gap:24px}
  .steps>div{padding-top:40px}  .statband{gap:20px}
  .statband div strong{font-size:26px;letter-spacing:-1px}
  .statband.words div strong{font-size:17px}
  footer{flex-wrap:wrap;padding:25px 5%;gap:15px}
  footer p{width:100%;order:2}
  footer>span{margin-left:auto}
  footer>a:last-child{order:3}
  .previewtable{font-size:10px}
  .previewtable th,.previewtable td{padding:10px 5px}
  .previewtable td:last-child{font-size:9px}
  .board{gap:5px}
  .board>div{padding:6px;font-size:10px}
  .board article{padding:8px;font-size:10px}
  dialog{padding:30px 24px}
  .panelintro{display:block}
  .chapter{display:inline-block;margin-bottom:20px}
  .panelintro h3{font-size:25px}
  .featuregrid{grid-template-columns:1fr}
  .featuregrid article{padding:22px}
  .featuregrid h4{margin-top:7px}
  .contenttabs{margin-left:-1px;margin-right:-1px}
  .contenttabs button{font-size:14px;padding:10px 14px}
  .workflow ol{grid-template-columns:1fr;gap:20px}
  .workflow{padding:22px}
  .explorehead>p:last-child,.panelintro p{font-size:16px}
  .outcome{font-size:15px}
  .statband{gap:22px}
  .statband div strong{font-size:26px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation:none!important;transition:none!important}
}

/* ============================================================
   BRILLIENTA 2026 refresh — real product screens, product cards,
   M365 consulting, plans, guides and the sitemap footer
   ============================================================ */

/* header: eight links need the drawer earlier than 720px */
@media(max-width:1180px){
  header{height:74px;justify-content:space-between;gap:20px}
  .menu{display:block;border:1px solid var(--line);border-radius:5px;padding:4px 10px;font-size:18px}
  nav{display:none;position:absolute;top:74px;left:0;right:0;background:#fff;padding:24px 5%;z-index:60;border-bottom:1px solid var(--line);box-shadow:0 15px 25px #0001;margin:0}
  nav.open{display:flex;flex-direction:column;gap:18px}
  nav a[aria-current=page]::after{right:auto;width:40px}
  .navcta{margin-left:auto}
}
@media(max-width:720px){.navcta{display:none}}

/* browser-framed screenshot */
.frame{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 30px 70px #2838311c}
.frame .chrome{display:flex;align-items:center;gap:7px;padding:10px 14px;border-bottom:1px solid var(--line);background:#f7f9f9}
.frame .chrome i{width:9px;height:9px;border-radius:50%;background:#d7dee0;display:block}
.frame .chrome span{margin-left:10px;font-size:11.5px;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:6px;padding:3px 12px;flex:1;max-width:420px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.frame img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top left;background:#f4f7f7}

/* home hero: product switcher with real screens */
.showcase{max-width:var(--inner);margin:46px auto 0;position:relative}
.showtabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.showtabs button{border:1px solid var(--line);background:#fff;border-radius:30px;padding:8px 16px;font-size:13.5px;font-weight:600;transition:background .2s,border-color .2s}
.showtabs button:hover{border-color:#9baa97}
.showtabs button[aria-selected=true]{background:var(--navy);border-color:var(--navy);color:#fff}
.showpanel[hidden]{display:none}
.showpanel .frame{border-bottom-left-radius:0;border-bottom-right-radius:0}
.showcap{display:flex;justify-content:space-between;gap:20px;align-items:center;flex-wrap:wrap;border:1px solid var(--line);border-top:0;border-radius:0 0 14px 14px;background:#fff;padding:16px 20px}
.showcap p{margin:0;font-size:14px;color:var(--muted);max-width:760px}
.showcap p b{color:var(--navy);font-family:'Google Sans Flex',sans-serif}

/* product cards */
.prodcards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.prodcard{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;display:flex;flex-direction:column;transition:transform .25s,border-color .25s,box-shadow .25s}
.prodcard:hover{transform:translateY(-4px);border-color:#9baa97;box-shadow:0 22px 50px #2838311a}
.prodcard img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top left;border-bottom:1px solid var(--line);background:#f4f7f7}
.prodcard .body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.prodcard .kicker{font-size:11px;font-weight:750;letter-spacing:1.4px;color:var(--sage);margin-bottom:8px}
.prodcard h3{font-size:21px;letter-spacing:-.6px;margin:0 0 8px}
.prodcard p{font-size:14px;color:var(--muted);line-height:1.75;margin:0 0 14px}
.prodcard ul{list-style:none;padding:0;margin:0 0 18px;font-size:13px;line-height:2.1;color:#4d5a63}
.prodcard li::before{content:'✓';margin-right:9px;color:var(--sage)}
.prodcard .more{margin-top:auto;font-weight:650;font-size:14px;display:flex;gap:16px;flex-wrap:wrap}
.prodcard .more a span{margin-left:6px;transition:margin .2s}
.prodcard .more a:hover span{margin-left:10px}
.prodcard .more a:last-child{color:var(--muted);font-weight:500}

/* plan / role tags */
.tags{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px;padding:0;list-style:none}
.tags li{font-size:11px;font-weight:650;border-radius:20px;padding:3px 10px;background:var(--light);border:1px solid var(--line);color:#4d5a63}
.tags li.plan{background:#eef6e2;border-color:#d5e8b7;color:#46691f}

/* feature rows with real screenshots */
.featrow{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center;padding:46px 0;border-top:1px solid var(--line)}
.featrow:first-of-type{border-top:0}
.featrow.rev{grid-template-columns:1.1fr .9fr}
.featrow.rev>.copy{order:2}
.featrow>*{min-width:0}
.featrow h3{font-size:28px;letter-spacing:-1px;line-height:1.25;margin-bottom:14px}
.featrow .copy>p{color:var(--muted);font-size:15.5px;line-height:1.85}
.featrow .shot img{aspect-ratio:16/10;object-fit:cover;object-position:top left}
.featrow .phone{max-width:260px;margin:auto}
.featrow .phone img{aspect-ratio:auto}

/* small screenshot strip */
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.thumbs .shot img{aspect-ratio:16/10;object-fit:cover;object-position:top left}

/* fact row (product facts from the guides) */
.facts{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.facts div{border:1px solid var(--line);border-radius:10px;padding:16px 18px;background:#fff}
.facts b{display:block;font:700 26px/1.1 'Google Sans Flex',sans-serif;letter-spacing:-1px;margin-bottom:4px}
.facts span{font-size:12.5px;color:var(--muted);line-height:1.5;display:block}

/* service cards (consulting) */
.svcgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.svc{border:1px solid var(--line);border-radius:12px;padding:26px;background:#fff;display:flex;flex-direction:column}
.svc .ic{width:44px;height:44px;border-radius:10px;display:grid;place-items:center;background:#e9f3dc;font:700 15px 'Google Sans Flex',sans-serif;color:#46691f;margin-bottom:18px;letter-spacing:-.5px}
.svc h3{font-size:19px;letter-spacing:-.5px;margin:0 0 8px}
.svc>p{font-size:14px;color:var(--muted);line-height:1.75;margin:0 0 14px}
.svc ul{list-style:none;padding:0;margin:0;font-size:13px;line-height:1.7;color:#4d5a63}
.svc li{position:relative;padding-left:20px;margin-bottom:6px}
.svc li::before{content:'✓';position:absolute;left:0;color:var(--sage)}
.svc.darkcard{background:var(--navy);color:#fff;border-color:var(--navy)}
.svc.darkcard>p,.svc.darkcard ul{color:#c4cdd2}
.svc.darkcard .ic{background:var(--lime);color:var(--navy)}

/* engagement / pricing-style cards */
.offer{border:1px solid var(--line);border-radius:12px;padding:28px;background:#fff;display:flex;flex-direction:column}
.offer.hl{border:2px solid var(--navy)}
.offer .kicker{font-size:11px;font-weight:750;letter-spacing:1.4px;color:var(--sage)}
.offer h3{font-size:22px;letter-spacing:-.6px;margin:8px 0}
.offer .term{font:650 14px 'Google Sans Flex',sans-serif;margin-bottom:12px}
.offer>p{font-size:14px;color:var(--muted);line-height:1.75}
.offer .button{margin-top:auto;align-self:flex-start}

/* guide cards */
.guidecard{display:grid;grid-template-columns:200px 1fr;gap:22px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:16px;background:#fff;transition:transform .2s,border-color .2s}
.guidecard:hover{transform:translateY(-3px);border-color:#9baa97}
.guidecard img{border-radius:8px;border:1px solid var(--line);aspect-ratio:16/10;object-fit:cover;object-position:top left}
.guidecard h3{font-size:18px;letter-spacing:-.4px;margin:0 0 6px}
.guidecard p{font-size:13.5px;color:var(--muted);margin:0 0 10px;line-height:1.7}
.guidecard .meta{font-size:12px;color:var(--muted)}
.guidecard .meta b{color:var(--navy)}

/* sitemap footer */
.sitefoot{border-top:1px solid var(--line);background:#fbfcfb;max-width:none;display:block;padding:56px 5% 28px}
.sitefoot .cols{max-width:var(--inner);margin:auto;display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:32px}
.sitefoot .brand{font-size:22px;margin-bottom:12px}
.sitefoot p{font-size:13px;color:var(--muted);margin:0 0 14px;max-width:300px;line-height:1.7}
.sitefoot h4{font:700 12px 'Google Sans Flex',sans-serif;letter-spacing:1.3px;margin:4px 0 14px}
.sitefoot ul{list-style:none;padding:0;margin:0;font-size:13.5px;line-height:2.15}
.sitefoot ul a{color:#4d5a63}
.sitefoot ul a:hover{color:var(--sage)}
.sitefoot .legal{max-width:var(--inner);margin:40px auto 0;padding-top:20px;border-top:1px solid var(--line);display:flex;gap:20px;flex-wrap:wrap;justify-content:space-between;font-size:11.5px;color:var(--muted)}

@media(max-width:1200px){
  .prodcards,.svcgrid{grid-template-columns:repeat(2,1fr)}
  .facts{grid-template-columns:repeat(3,1fr)}
  .thumbs{grid-template-columns:repeat(2,1fr)}
  .sitefoot .cols{grid-template-columns:repeat(3,1fr)}
  .sitefoot .cols>div:first-child{grid-column:1/-1}
}
@media(max-width:1000px){
  .featrow,.featrow.rev{grid-template-columns:1fr;gap:28px;padding:36px 0}
  .featrow.rev>.copy{order:0}
}
@media(max-width:720px){
  .prodcards,.svcgrid{grid-template-columns:1fr}
  .facts{grid-template-columns:repeat(2,1fr)}
  .guidecard{grid-template-columns:1fr}
  .sitefoot .cols{grid-template-columns:repeat(2,1fr)}
  .showtabs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;margin-left:-5%;margin-right:-5%;padding-left:5%;padding-right:5%}
  .showtabs button{white-space:nowrap}
  .frame .chrome span{display:none}
  .featrow h3{font-size:24px}
}
.card{border:1px solid var(--line);border-radius:12px;padding:26px;background:#fff}
/* keep pill checkboxes keyboard-focusable while visually hidden */
.pill-list label{position:relative}
.pill-list input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
/* brand logo (images/brand/brillienta-mark.svg) */
.brand .logo{height:30px;width:auto;flex-shrink:0}
.sitefoot .brand .logo{height:27px}
@media(max-width:720px){.brand .logo{height:26px}}

/* ============================================================
   THEME · LIFTOFF (2026)
   An airy, agent-era look: white canvas, Google Sans, huge centred
   type, pill controls, soft rounded surfaces and a floating-particle
   hero. This layer restyles every page; the components above keep
   their structure.
   ============================================================ */
:root{
  --navy:#121317;          /* ink: text, dark surfaces */
  --ink:#121317;
  --muted:#5f6368;
  --line:#e8eaed;
  --light:#f1f3f4;
  --surface:#f6f7f8;
  --brand:#008d62;          /* logo green */
  --brand-2:#19c48a;
  --lime:#c9f2df;           /* soft mint highlight */
  --sage:#00805a;
  --inner:1240px;
  --r-xl:40px;--r-l:28px;--r-m:20px;
  --ease:cubic-bezier(.2,.7,.1,1);
}
body{font:16px/1.65 'Google Sans',system-ui,sans-serif;color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,h4{font-family:'Google Sans Flex','Google Sans',sans-serif;font-weight:500;color:var(--ink)}
h1{font-size:clamp(46px,7.2vw,108px);line-height:1.02;letter-spacing:-.045em;font-weight:500;margin-bottom:28px}
h2{font-size:clamp(36px,4.7vw,66px);line-height:1.06;letter-spacing:-.04em;font-weight:500}
h3{letter-spacing:-.02em;font-weight:500}
.lead{font-size:clamp(17px,1.35vw,20px);line-height:1.6;color:var(--muted);max-width:700px}
.eyebrow{font:500 13px/1.4 'Google Sans',sans-serif;letter-spacing:.14em;color:var(--muted);margin:0 0 22px}
.miniicon{color:var(--brand);font-size:16px}
.cornerstar,.sideNote{display:none!important}
.underline{background:linear-gradient(100deg,var(--brand) 0%,#0aa56f 45%,#3fbf9a 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.underline::after{display:none}
::selection{background:var(--lime);color:var(--ink)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--brand);outline-offset:4px;border-radius:8px}

/* pills */
.button{border-radius:999px;padding:14px 26px;font:500 15px/1 'Google Sans',sans-serif;gap:12px;transition:background .25s,color .25s,box-shadow .25s,transform .25s var(--ease)}
.button:hover{transform:none;box-shadow:none}
.button span{transition:transform .25s var(--ease)}
.button:hover span{transform:translate(2px,-2px)}
.dark{background:var(--ink);color:#fff}
.dark:hover{background:#2b2d33}
.ghost,.button.ghost{background:var(--light);border:0;color:var(--ink)}
.ghost:hover{background:#e3e6e8;color:var(--ink)}
.lime,.button.lime{background:#fff;color:var(--ink)}
.lime:hover{background:var(--lime)}
.textlink{font-weight:500;font-size:15px}
.actions{gap:12px}
.actions .textlink{padding:14px 18px;border-radius:999px;background:var(--light)}
.actions .textlink:hover{background:#e3e6e8}

/* header */
header{height:72px;max-width:none;padding:0 max(24px,calc((100% - 1320px)/2));gap:24px;background:rgba(255,255,255,.72);border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
header.scrolled{border-bottom-color:var(--line);background:rgba(255,255,255,.88)}
.brand{font:600 22px 'Google Sans Flex',sans-serif;letter-spacing:-.03em;gap:10px}
nav{gap:4px;font:500 14px 'Google Sans',sans-serif}
nav a{padding:8px 13px;border-radius:999px;color:#3c4043;transition:background .2s,color .2s}
nav a:hover{background:var(--light);color:var(--ink)}
nav a[aria-current=page]{background:var(--light);color:var(--ink)}
nav a[aria-current=page]::after{display:none}
.navcta{border:0;border-radius:999px;background:var(--ink);color:#fff;padding:11px 20px;font:500 14px 'Google Sans',sans-serif}
.navcta:hover{background:#2b2d33}
.navcta span{margin-left:8px}
@media(max-width:1180px){
  header{height:64px;padding:0 20px}
  nav{top:64px;padding:16px 20px 22px;gap:2px}
  nav a{padding:12px 14px;font-size:16px}
  .menu{border:0;background:var(--light);border-radius:999px;width:42px;height:42px;padding:0}
}

/* sections */
.section{padding:120px 5%}
.band,.band-grey{background:#fff}
.sectionhead{display:block;text-align:center;max-width:860px;margin:0 auto 56px}
.sectionhead>div{display:contents}
.sectionhead p:not(.eyebrow){max-width:620px;margin:22px auto 0;font-size:18px;line-height:1.6;color:var(--muted)}
.explore{border-top:0}
.explorehead{max-width:860px;margin:0 auto;text-align:center}
.explorehead>p:last-child{margin:22px auto 36px;max-width:640px;font-size:18px}
.contenttabs{background:var(--light);border-radius:999px;padding:6px;gap:4px;justify-content:center;width:max-content;max-width:100%;margin:0 auto 40px;overflow-x:auto}
.contenttabs button{border-radius:999px;padding:10px 18px;font:500 14px 'Google Sans',sans-serif;white-space:nowrap}
.contenttabs button[aria-selected=true]{background:#fff;color:var(--ink);box-shadow:0 1px 3px #0000001f}
.contenttabs button:hover:not([aria-selected=true]){background:#e3e6e8}

/* page heroes become centred, with the screen below */
.pagehero{background:#fff;border-bottom:0;padding:96px 5% 40px;text-align:center}
.pagehero .inner{grid-template-columns:1fr;gap:56px;max-width:1180px}
.pagehero .inner>div:first-child{max-width:940px;margin:0 auto}
.pagehero h1{font-size:clamp(42px,6.2vw,92px);letter-spacing:-.045em}
.pagehero .lead{margin-left:auto;margin-right:auto}
.pagehero .actions,.pagehero .badge-row{justify-content:center}
.pagehero .statband{justify-content:center;border-top:0;gap:14px;margin-top:40px}
.pagehero .statband div{background:var(--surface);border-radius:var(--r-m);padding:18px 22px;text-align:left;min-width:150px}
.pagehero .inner>div:last-child{max-width:1180px;width:100%;margin:0 auto}
.pagehero .inner>div:last-child .note{text-align:center}
.crumbs{letter-spacing:.12em;font-weight:500;margin-bottom:28px}
.statband div strong{font-weight:500;letter-spacing:-.04em}

/* surfaces */
.frame{border:1px solid var(--line);border-radius:var(--r-l);box-shadow:0 40px 120px -40px #12131740,0 8px 24px -12px #1213171a}
.frame .chrome{background:#fff;border-bottom-color:var(--line);padding:12px 16px}
.frame .chrome span{border-radius:999px;background:var(--light);border:0}
.shot{border:1px solid var(--line);border-radius:var(--r-m);box-shadow:none}
.shot:hover{transform:none;box-shadow:0 24px 60px -30px #12131733}
.shot img{border-bottom-color:var(--line)}
.statcard,.featuregrid article,.offer,.svc,.card,.facts div,.prodout div,.caps div,.pkg,.prodmeta>div,.workflow,.quote{border:0;background:var(--surface);border-radius:var(--r-m)}
.statcard{padding:28px}
.statcard b,.facts b,.prodout b{font-weight:500;letter-spacing:-.04em}
.featuregrid article{padding:30px}
.featuregrid h4{font-weight:500;font-size:19px}
.featurecount{color:var(--brand);font-weight:500}
.offer{padding:34px}
.offer.hl{border:0;background:var(--ink);color:#fff}
.offer.hl h3,.offer.hl .term{color:#fff}
.offer.hl>p{color:#b9bec4}
.offer.hl .kicker{color:var(--brand-2)}
.offer.hl .button.dark{background:#fff;color:var(--ink)}
.offer .kicker,.prodcard .kicker{color:var(--brand);font-weight:500;letter-spacing:.12em}
.svc{padding:32px}
.svc .ic{border-radius:14px;background:#fff;color:var(--brand)}
.svc.darkcard{background:var(--ink)}
.svc.darkcard .ic{background:var(--brand);color:#fff}
.prodcard{border:0;background:var(--surface);border-radius:var(--r-l)}
.prodcard:hover{border-color:transparent;box-shadow:0 30px 80px -40px #12131755;transform:translateY(-4px)}
.prodcard img{border-bottom:0;margin:14px 14px 0;width:calc(100% - 28px);border-radius:16px;border:1px solid var(--line)}
.prodcard .body{padding:24px 28px 30px}
.prodcard h3{font-size:24px}
.guidecard{border:0;background:var(--surface);border-radius:var(--r-l);padding:18px}
.cmpwrap{border-radius:var(--r-m);border-color:var(--line)}
.cmp thead th,.spec thead th{background:var(--surface);font-weight:500;font-family:'Google Sans',sans-serif}
.cmp td.yes{color:var(--brand)}
.tags li{border:0;background:var(--light)}
.tags li.plan{background:var(--lime);color:#00513a}
.ticks li::before,.prodcard li::before,.svc li::before{color:var(--brand)}
.steps>div::before{color:var(--brand);font-weight:500}
.badge{border:0;background:var(--light);font-weight:500}
.trust span{font-weight:500;font-family:'Google Sans Flex',sans-serif;color:#80868b}

/* dark showcase panels */
.promo{border-radius:var(--r-xl);background:var(--ink);overflow:hidden;position:relative}
.promo .eyebrow{color:var(--brand-2)}
.promo .pstats div b{color:#fff;font-weight:500}
.security{border-radius:var(--r-xl);background:var(--ink);margin:0 auto;max-width:var(--inner)}
.security em{color:var(--brand-2)}
.closing{background:var(--ink);color:#fff;border-radius:var(--r-xl);padding:110px 24px;margin:0 auto;max-width:calc(var(--inner) + 0px);width:calc(100% - 10%)}
.closing h2{color:#fff;position:relative;font-size:clamp(34px,4.8vw,68px)}
.closing .eyebrow{color:#9aa0a6;font-size:13px;position:relative}
.closing .button.dark{background:#fff;color:var(--ink);position:relative}
.closing .button.dark:hover{background:var(--lime)}

/* FAQ */
.faq .faqcols{grid-template-columns:1fr 1.5fr;gap:80px}
.questions details{border-bottom-color:var(--line);padding:24px 0}
.questions summary{font:500 19px/1.4 'Google Sans',sans-serif;letter-spacing:-.01em}
.questions p{font-size:16px;line-height:1.7}

/* jump bar + product sections */
.prodjump{background:rgba(255,255,255,.88);border-bottom-color:var(--line)}
.prodjump a{border-radius:999px;font-weight:500}
.prodjump a.on{background:var(--ink)}
.product+.product{border-top:0}
.product .inner{background:#fff}
.prodnum{background:var(--ink);color:#fff;border-radius:16px;font-weight:500}
.prodhead h2{font-size:clamp(34px,4vw,54px)}
.featrow{border-top:0;padding:56px 0}
.featrow h3{font-size:clamp(26px,2.4vw,34px);letter-spacing:-.03em}
.featrow .shot{border-radius:var(--r-l);box-shadow:0 40px 100px -50px #12131755}

/* sitemap footer with giant wordmark */
.sitefoot{background:#fff;border-top:1px solid var(--line);padding:80px 5% 0;overflow:hidden}
.sitefoot h4{font:500 13px 'Google Sans',sans-serif;letter-spacing:.12em;color:var(--muted)}
.sitefoot ul a{color:var(--ink)}
.sitefoot ul a:hover{color:var(--brand)}
.sitefoot .legal{border-top-color:var(--line)}

/* ============================================================
   HOME · LIFTOFF COMPONENTS
   ============================================================ */
/* floating particle field (js/site.js draws into [data-particles]) */
[data-particles]{position:relative;isolation:isolate}
.particles{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.closing .particles{opacity:.8}

.lift{min-height:calc(100svh - 72px);display:grid;place-items:center;text-align:center;padding:80px 5% 120px;overflow:hidden}
.lift .inner{max-width:1080px;margin:auto}
.lift h1{font-size:clamp(52px,8.6vw,132px);margin:26px 0 26px}
.lift .lead{margin:0 auto;font-size:clamp(18px,1.5vw,22px)}
.lift .actions{justify-content:center;margin-top:40px}
.pill-note{display:inline-flex;align-items:center;gap:10px;padding:7px 8px 7px 16px;border-radius:999px;background:rgba(241,243,244,.85);backdrop-filter:blur(6px);font-size:14px;color:#3c4043;transition:background .2s}
.pill-note b{font-weight:500;color:var(--ink)}
.pill-note span{background:#fff;border-radius:999px;padding:3px 10px;font-size:12.5px}
.pill-note:hover{background:#e3e6e8}
.scrollcue{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);font-size:12.5px;letter-spacing:.14em;color:#80868b;display:flex;flex-direction:column;align-items:center;gap:10px}
.scrollcue i{width:1px;height:36px;background:linear-gradient(var(--ink),transparent);animation:cue 2s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* stage: auto-cycling product screens */
.stage{max-width:1240px;margin:-40px auto 0;padding:0 5%;position:relative;z-index:2}
.stage .showtabs{justify-content:center;background:var(--light);border-radius:999px;padding:6px;gap:4px;width:max-content;max-width:100%;margin:28px auto 0;flex-wrap:nowrap;overflow-x:auto}
.stage .showtabs button{flex-shrink:0;border:0;background:transparent;border-radius:999px;padding:10px 18px;font:500 14px 'Google Sans',sans-serif;position:relative;overflow:hidden;white-space:nowrap}
.stage .showtabs button[aria-selected=true]{background:#fff;color:var(--ink);box-shadow:0 1px 3px #0000001f}
.stage .showtabs button[aria-selected=true]::after{content:'';position:absolute;left:18px;right:18px;bottom:5px;height:2px;border-radius:2px;background:var(--brand);transform-origin:left;transform:scaleX(var(--p,0))}
.stage .showcap{border:0;background:transparent;justify-content:center;text-align:center;padding:20px 0 0}
.stage .showcap p{font-size:16px}
.stage .showpanel .frame{border-radius:var(--r-l)}
.stage .frame img{aspect-ratio:16/9.6}

/* statement: words light up as you scroll */
.statement{max-width:1100px;margin:auto;padding:160px 5%;text-align:center}
.statement p{font:500 clamp(30px,3.9vw,56px)/1.18 'Google Sans Flex',sans-serif;letter-spacing:-.035em;margin:0}
.statement .w{transition:color .3s}
.js .statement .w{color:#d4d7db}
.js .statement .w.on{color:var(--ink)}
.statement .hl.on{color:var(--brand)}

/* sticky feature scroller */
.sticky-feature{display:grid;grid-template-columns:.85fr 1.15fr;gap:72px;max-width:var(--inner);margin:auto;align-items:start}
.sf-steps{padding:10vh 0}
.sf-step{min-height:62vh;display:flex;flex-direction:column;justify-content:center;opacity:.3;transition:opacity .45s var(--ease)}
.sf-step.on{opacity:1}
.sf-step .num{font:500 14px 'Google Sans',sans-serif;color:var(--brand);margin-bottom:16px}
.sf-step h3{font-size:clamp(28px,2.8vw,42px);line-height:1.12;letter-spacing:-.035em;margin:0 0 16px}
.sf-step p{color:var(--muted);font-size:18px;line-height:1.65;margin:0;max-width:460px}
.sf-media{position:sticky;top:calc(50vh - min(30vw,330px));aspect-ratio:16/10.4}
.sf-media figure{position:absolute;inset:0;margin:0;opacity:0;transform:scale(.97) translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.sf-media figure.on{opacity:1;transform:none}
.sf-media .frame img{aspect-ratio:16/9.4}
.sf-step .sf-inline{display:none}

/* horizontal product carousel */
.carousel{position:relative}
.carousel-track{display:grid;grid-auto-flow:column;grid-auto-columns:min(440px,82vw);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px max(5%,calc((100% - var(--inner))/2)) 30px;scrollbar-width:none}
.carousel-track::-webkit-scrollbar{display:none}
.carousel-track>*{scroll-snap-align:start}
.carousel-nav{display:flex;gap:10px;justify-content:center;margin-top:8px}
.carousel-nav button{width:48px;height:48px;border-radius:50%;background:var(--light);font-size:18px;transition:background .2s}
.carousel-nav button:hover{background:#e3e6e8}
.carousel-nav button:disabled{opacity:.35;cursor:default}

/* who it's for */
.personas{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:var(--inner);margin:auto}
.persona{background:var(--surface);border-radius:var(--r-l);padding:30px 28px 32px;display:flex;flex-direction:column;min-height:330px;transition:background .3s}
.persona:hover{background:#eef0f1}
.persona .glyph{width:52px;height:52px;border-radius:16px;background:#fff;display:grid;place-items:center;margin-bottom:auto}
.persona .glyph svg{width:26px;height:26px;stroke:var(--brand);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.persona h3{font-size:24px;margin:40px 0 10px;letter-spacing:-.03em}
.persona p{color:var(--muted);font-size:15px;margin:0 0 18px;line-height:1.6}
.persona a{font-weight:500;font-size:15px}
.persona a span{display:inline-block;transition:transform .25s var(--ease)}
.persona a:hover span{transform:translateX(4px)}

/* big numbers */
.bignums{display:grid;grid-template-columns:repeat(4,1fr);max-width:var(--inner);margin:auto;border-top:1px solid var(--line)}
.bignums div{padding:36px 28px 0 0}
.bignums b{display:block;font:500 clamp(48px,5.6vw,84px)/1 'Google Sans Flex',sans-serif;letter-spacing:-.05em;margin-bottom:14px}
.bignums span{color:var(--muted);font-size:15px;display:block;max-width:240px}

@media(max-width:1200px){
  .personas{grid-template-columns:repeat(2,1fr)}
  .bignums{grid-template-columns:repeat(2,1fr);row-gap:30px}
}
@media(max-width:1000px){
  .faq .faqcols{grid-template-columns:1fr;gap:36px}
  .sticky-feature{grid-template-columns:1fr;gap:0}
  .sf-media{display:none}
  .sf-steps{padding:0}
  .sf-step{min-height:0;opacity:1;padding:28px 0}
  .sf-step .sf-inline{display:block;margin-top:24px}
  .section{padding:84px 5%}
  .statement{padding:100px 5%}
}
@media(max-width:720px){
  h1{letter-spacing:-.04em}
  .lift{padding:56px 20px 100px;min-height:calc(100svh - 64px)}
  .lift h1{font-size:clamp(44px,13vw,64px)}
  .stage{margin-top:-20px;padding:0 16px}
  .stage .showtabs{justify-content:flex-start;margin-left:0}
  .personas,.bignums{grid-template-columns:1fr}
  .persona{min-height:0}
  .closing{width:calc(100% - 32px);padding:72px 20px}
  .pagehero{padding:56px 20px 24px}
  .pagehero .statband div{min-width:0;flex:1 1 40%}
    .scrollcue{display:none}
  .pill-note{font-size:13px;padding:7px 14px}
  .pill-note span{display:none}
}
@media(prefers-reduced-motion:reduce){
  .sf-media figure,.sf-step{transition:none}
  .scrollcue i{animation:none}
}
.pagehero{isolation:isolate}
.pagehero .card,.pagehero .tenant,.pagehero .frame,.pagehero .servicerows{text-align:left;max-width:760px;margin-left:auto;margin-right:auto}
.pagehero .frame{max-width:none}

/* ============================================================
   IMAGERY & MOTION (2026)
   One consistent way to present screenshots, plus scroll and
   load animations. Everything here falls back to static under
   prefers-reduced-motion or when JavaScript is off.
   ============================================================ */
figure{margin:0}                      /* browsers indent <figure> by 40px */
img{max-width:100%}

/* --- screenshots: one look everywhere --- */
.shot{background:#fff;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-m);transition:box-shadow .5s var(--ease),transform .5s var(--ease)}
.shot img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top left;border-bottom:1px solid var(--line);transition:transform .9s var(--ease)}
.shot:hover img{transform:scale(1.025)}
.shot .cap{padding:16px 18px 18px}
.shot .cap b{font-weight:500;font-size:15px}

/* feature rows: the screen sits on a soft tinted canvas */
.featrow{grid-template-columns:.82fr 1.18fr;gap:clamp(32px,5vw,80px);align-items:center;padding:clamp(40px,6vw,72px) 0}
.featrow.rev{grid-template-columns:1.18fr .82fr}
.featrow figure.shot{border:0;border-radius:var(--r-l);padding:clamp(18px,3vw,44px) clamp(18px,3vw,44px) 0;background:
  radial-gradient(120% 90% at 0% 0%,#dff5ea 0%,transparent 55%),
  radial-gradient(120% 90% at 100% 100%,#e8eefc 0%,transparent 60%),#f4f6f7;box-shadow:none}
.featrow.rev figure.shot{background:
  radial-gradient(120% 90% at 100% 0%,#dff5ea 0%,transparent 55%),
  radial-gradient(120% 90% at 0% 100%,#f3ecdf 0%,transparent 60%),#f4f6f7}
.featrow figure.shot img{border:1px solid #dfe3e6;border-bottom:0;border-radius:14px 14px 0 0;box-shadow:0 30px 70px -30px #12131766;aspect-ratio:16/10.5}
.featrow figure.shot:hover{transform:none;box-shadow:none}
.featrow figure.shot:hover img{transform:translateY(-6px)}
.featrow .copy{max-width:520px}
.featrow.rev .copy{justify-self:end}

/* thumbnail strips: equal tiles, captions aligned */
.thumbs{gap:18px;align-items:stretch}
.thumbs .shot{display:flex;flex-direction:column;background:var(--surface);border:0;padding:10px 10px 0}
.thumbs .shot img{border:1px solid var(--line);border-radius:12px;aspect-ratio:16/10.5}
.thumbs .shot .cap{padding:14px 6px 16px}
/* small web-part captures: show the whole component, never crop it */
.thumbs .shot img[src*="/intranet/"]:not([src*="20-"]):not([src*="21-"]):not([src*="22-"]){object-fit:contain;object-position:center;background:#fff;padding:10px}

/* two-up and three-up screenshot grids line up */
.grid-2>.shot,.grid-3>.shot{display:flex;flex-direction:column}
.grid-2>.shot .cap,.grid-3>.shot .cap{flex:1}

/* frames */
.frame{overflow:hidden}
.frame img{display:block;width:100%;object-fit:cover;object-position:top left}

/* product cards: image sits in a tinted header */
.prodcard{overflow:hidden}
.prodcard img{margin:0;width:100%;border-radius:0;border:0;padding:22px 22px 0;aspect-ratio:auto;height:auto;
  background:linear-gradient(160deg,#e3f5ec,#eef1f6);object-fit:cover;object-position:top left;display:block}
.prodcard .imgwrap{overflow:hidden}
.prodcard:hover img{transform:translateY(-4px)}
.prodcard img{transition:transform .7s var(--ease)}
.carousel .prodcard img{aspect-ratio:16/11}
.prodcards .prodcard img{aspect-ratio:16/11}

/* guide cards */
.guidecard img{border-radius:14px;aspect-ratio:16/10;object-fit:cover;object-position:top left;transition:transform .7s var(--ease)}
.guidecard:hover img{transform:scale(1.03)}
.guidecard{overflow:hidden}

/* promo screenshot */
.promo .pfig{overflow:hidden;border-radius:18px}
.promo .pfig img{transition:transform 1s var(--ease)}

/* --- logo marquee --- */
.marquee{overflow:hidden;padding:46px 0 10px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee p{text-align:center;font-size:13px;letter-spacing:.14em;color:#80868b;margin:0 0 22px}
.marquee-track{display:flex;gap:64px;width:max-content;animation:marquee 38s linear infinite}
.marquee-track span{font:500 22px 'Google Sans Flex',sans-serif;letter-spacing:-.02em;color:#9aa0a6;white-space:nowrap;display:inline-flex;align-items:center;gap:10px}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}

/* --- entrance on load --- */
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes riseword{from{opacity:0;transform:translateY(.45em) rotate(2deg);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.js .lift .pill-note,.js .lift .lead,.js .lift .actions,
.js .pagehero .crumbs,.js .pagehero .eyebrow,.js .pagehero .lead,.js .pagehero .actions,.js .pagehero .statband,.js .pagehero .badge-row{animation:rise .9s var(--ease) both}
.js .lift .pill-note,.js .pagehero .crumbs{animation-delay:.05s}
.js .pagehero .eyebrow{animation-delay:.1s}
.js .lift .lead,.js .pagehero .lead{animation-delay:.55s}
.js .lift .actions,.js .pagehero .actions{animation-delay:.7s}
.js .pagehero .statband,.js .pagehero .badge-row{animation-delay:.85s}
.js .pagehero .inner>div:last-child{animation:rise 1.1s .7s var(--ease) both}
h1 .word{display:inline-block;white-space:nowrap}
.js h1.split .word{animation:riseword .9s var(--ease) both;animation-delay:calc(.15s + var(--i) * .07s)}

/* --- reveal on scroll (classes added by js/site.js) --- */
.js .rv{opacity:0;transform:translateY(36px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
.js .rv.rv-left{transform:translateX(-48px)}
.js .rv.rv-right{transform:translateX(48px)}
.js .rv.rv-zoom{transform:scale(.94) translateY(30px)}
.js .rv.in{opacity:1;transform:none}
.js .reveal{transition-timing-function:var(--ease);transition-duration:.9s}

/* stage tilts flat as it scrolls into view (--t: 0 → 1) */
.stage .showpanel .frame{transform:perspective(1600px) rotateX(calc((1 - var(--t,1)) * 14deg)) scale(calc(.93 + var(--t,1) * .07));transform-origin:50% 0;transition:transform .1s linear}

/* section headings: underline-free accent sweep */
.sectionhead h2,.explorehead h2{background-size:100% 100%}

/* hover micro-interactions */
.persona .glyph{transition:transform .5s var(--ease),background .3s}
.persona:hover .glyph{transform:translateY(-4px) rotate(-6deg);background:var(--lime)}
.statcard,.featuregrid article,.offer,.svc,.persona,.facts div{transition:transform .5s var(--ease),box-shadow .5s var(--ease),background .3s}
.statcard:hover,.featuregrid article:hover,.svc:hover,.facts div:hover{transform:translateY(-4px);box-shadow:0 24px 50px -30px #12131740}
.offer:hover{transform:translateY(-4px)}
.button.dark,.navcta{position:relative;overflow:hidden;isolation:isolate}
.button.dark::before,.navcta::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,#ffffff2e 50%,transparent 70%);transform:translateX(-120%);transition:transform .8s var(--ease)}
.button.dark:hover::before,.navcta:hover::before{transform:translateX(120%)}

@media(max-width:1000px){
  .featrow,.featrow.rev{grid-template-columns:1fr}
  .featrow .copy,.featrow.rev .copy{max-width:none;justify-self:stretch}
}
@media(max-width:720px){
  .marquee-track span{font-size:18px}
  .marquee-track{gap:40px}
  .prodcard img{padding:14px 14px 0}
}
@media(prefers-reduced-motion:reduce){
  .js .rv,.js .rv.in{opacity:1;transform:none;transition:none}
  .js .lift *,.js .pagehero *,.js .pagehero .inner>div:last-child,.js h1.split .word{animation:none!important}
  .marquee-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto}
  .stage .showpanel .frame{transform:none}
  .shot:hover img,.featrow figure.shot:hover img,.prodcard:hover img,.guidecard:hover img{transform:none}
}
/* persona cards: headings line up, links sit on the bottom edge */
.persona .glyph{margin-bottom:40px}
.persona h3{margin-top:0}
.persona a{margin-top:auto}
/* carousel snaps to the content edge, not the screen edge */
.carousel-track{scroll-padding-inline:max(5%,calc((100% - var(--inner))/2))}

/* ============================================================
   PRODUCTS MENU, PRODUCT TABS, PRODUCTS PAGE & PLANS (2026)
   ============================================================ */
/* calmer motion everywhere: short fade-ups, no sideways slides */
.js .rv{transform:translateY(16px);transition-duration:.6s}
.js .rv.rv-left,.js .rv.rv-right,.js .rv.rv-zoom{transform:translateY(16px)}
.js .rv.in{transform:none}

/* product icon tiles, one tint per product */
.picon{width:40px;height:40px;border-radius:12px;display:inline-grid;place-items:center;flex-shrink:0;background:var(--pbg);color:var(--pfg)}
.picon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.picon.big{width:64px;height:64px;border-radius:18px}
.picon.big svg{width:32px;height:32px}
.t-hrms{--pbg:#dff5ea;--pfg:#008d62;--pglow:#bfead6}
.t-helpdesk{--pbg:#e3ecff;--pfg:#2f6fde;--pglow:#c9d9fb}
.t-assets{--pbg:#fdeed8;--pfg:#b86e0b;--pglow:#f8dcb2}
.t-directory{--pbg:#efe7ff;--pfg:#7447d1;--pglow:#dccdfb}
.t-tasks{--pbg:#dcf3f5;--pfg:#0d8590;--pglow:#b9e5ea}
.t-intranet{--pbg:#e6e9ff;--pfg:#3c52d1;--pglow:#cdd3fb}

/* --- header: Products dropdown --- */
.navdrop{position:relative}
.navdrop-btn{padding:8px 13px;border-radius:999px;color:#3c4043;font:500 14px 'Google Sans',sans-serif;display:inline-flex;align-items:center;gap:6px;transition:background .2s,color .2s}
.navdrop-btn span{font-size:12px;transition:transform .25s var(--ease);display:inline-block;transform:translateY(-2px)}
.navdrop-btn:hover,.navdrop-btn[aria-expanded=true],.navdrop-btn[aria-current=page]{background:var(--light);color:var(--ink)}
.navdrop-btn[aria-expanded=true] span{transform:translateY(1px) rotate(180deg)}
.megamenu{position:absolute;left:50%;top:calc(100% + 14px);width:min(680px,92vw);background:#fff;border:1px solid var(--line);border-radius:24px;
  box-shadow:0 30px 80px -30px #12131740,0 6px 20px -10px #1213171f;padding:14px;opacity:0;visibility:hidden;transform:translate(-50%,-6px);
  transition:opacity .2s,transform .25s var(--ease),visibility 0s .25s;z-index:80}
.megamenu::before{content:'';position:absolute;left:0;right:0;top:-16px;height:16px}
.navdrop.open .megamenu{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .2s,transform .25s var(--ease)}
.mm-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.mm-item{display:flex;gap:14px;align-items:center;padding:12px;border-radius:16px;transition:background .2s}
.mm-item:hover{background:var(--surface)}
.mm-item b{display:block;font-weight:500;font-size:15px;color:var(--ink)}
.mm-item small{display:block;font-size:13px;color:var(--muted);line-height:1.4}
.mm-item .picon{transition:transform .3s var(--ease)}
.mm-item:hover .picon{transform:scale(1.08)}
.mm-foot{display:flex;gap:18px;align-items:center;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:10px;padding:14px 12px 4px;font-size:14px}
.mm-foot a{font-weight:500}
.mm-foot a:hover{color:var(--brand)}
.mm-foot span{margin-left:auto;color:var(--muted);font-size:13px}
.mm-foot a span{margin-left:4px;color:inherit;font-size:inherit}
@media(max-width:1180px){
  .navdrop{width:100%}
  .navdrop-btn{width:100%;justify-content:space-between;padding:12px 14px;font-size:16px}
  .megamenu{position:static;width:auto;transform:none;box-shadow:none;border:0;padding:4px 0 8px;display:none;opacity:1;visibility:visible}
  .navdrop.open .megamenu{display:block;transform:none}
  .mm-grid{grid-template-columns:1fr}
  .mm-foot span{display:none}
}

/* --- home: hero facts + logo row --- */
.herofacts{list-style:none;padding:0;margin:34px 0 0;display:flex;gap:10px 26px;justify-content:center;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.herofacts li::before{content:'✓';color:var(--brand);margin-right:8px}
.logos{max-width:var(--inner);margin:0 auto;padding:10px 5% 40px;text-align:center}
.logos p{font-size:13px;letter-spacing:.14em;color:#80868b;margin:0 0 20px}
.logos>div{display:flex;gap:16px 48px;justify-content:center;flex-wrap:wrap}
.logos>div>span{font:500 20px 'Google Sans Flex',sans-serif;letter-spacing:-.02em;color:#9aa0a6;display:inline-flex;align-items:center;gap:10px}
.section.soft{background:var(--surface);max-width:none}
.section.soft>*{max-width:var(--inner);margin-left:auto;margin-right:auto}
.section.soft>.sectionhead{max-width:860px}
.lift{min-height:calc(88svh - 72px)}

/* --- home: product tabs --- */
.ptabs{display:grid;grid-template-columns:330px 1fr;gap:24px;max-width:var(--inner);margin:auto;align-items:start}
.ptabs-list{display:flex;flex-direction:column;gap:6px;background:none;padding:0;border-radius:0;width:auto;margin:0}
.ptabs-list button{display:flex;align-items:center;gap:14px;text-align:left;padding:12px 14px;border-radius:18px;border:1px solid transparent;transition:background .25s,border-color .25s}
.ptabs-list button:hover{background:var(--surface)}
.ptabs-list button[aria-selected=true]{background:#fff;border-color:var(--line);box-shadow:0 10px 30px -18px #12131740}
.ptabs-list b{display:block;font-weight:500;font-size:16px}
.ptabs-list small{display:block;font-size:13px;color:var(--muted)}
.ptabs-panel{position:relative;overflow:hidden;border-radius:var(--r-l);padding:clamp(28px,4vw,52px);min-height:100%;
  background:radial-gradient(90% 80% at 100% 0%,var(--pglow) 0%,transparent 60%),var(--surface)}
.ptabs-panel .picon.big{margin-bottom:22px}
.ptabs-panel .kicker{font-size:12.5px;letter-spacing:.14em;color:var(--pfg);font-weight:500;margin:0 0 10px}
.ptabs-panel h3{font-size:clamp(28px,3vw,40px);line-height:1.1;letter-spacing:-.035em;margin:0 0 14px;max-width:620px}
.ptabs-panel>p{color:var(--muted);font-size:17px;max-width:620px}
.ptabs-panel .ticks{display:grid;grid-template-columns:1fr 1fr;gap:6px 24px;margin:22px 0 28px;max-width:720px}
.ptabs-panel .ticks li::before{color:var(--pfg)}
.pfoot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0;padding-top:22px;border-top:1px solid #1213171a}
.pfoot>span{margin-right:auto;font-size:14px;color:var(--muted)}
.pfoot b{color:var(--ink);font-weight:500}
.ptabs-panel:not([hidden]),.xp-panel:not([hidden]),.pl-panel:not([hidden]){animation:panelin .45s var(--ease) both}
@keyframes panelin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* --- principles (icon-free cards) --- */
.principles{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:var(--inner);margin:auto}
.principles.six{grid-template-columns:repeat(3,1fr)}
.principles article{background:#fff;border-radius:var(--r-l);padding:30px;border:1px solid var(--line)}
.section:not(.soft) .principles article{background:var(--surface);border:0}
.principles .pi{font:500 14px 'Google Sans',sans-serif;color:var(--brand)}
.principles h3{font-size:21px;margin:26px 0 10px;letter-spacing:-.025em}
.principles p{color:var(--muted);font-size:15px;margin:0;line-height:1.65}

/* --- home: consulting list (no screenshots) --- */
.promo-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.promo-list li{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:18px;padding:16px 20px;transition:background .25s}
.promo-list li:hover{background:#ffffff17}
.promo-list b{display:block;color:#fff;font-weight:500;font-size:17px}
.promo-list span{color:#9aa0a6;font-size:14px}

/* --- products page: hero with orbit --- */
.prod-hero{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;max-width:var(--maxw);margin:auto;padding:80px 5% 60px;overflow:hidden}
.prod-hero h1{font-size:clamp(44px,5.8vw,86px)}
.prod-hero .lead{max-width:560px}
.orbit{position:relative;aspect-ratio:1;width:min(560px,100%);justify-self:center;container-type:inline-size}
.orbit-ring{position:absolute;border-radius:50%;border:1px dashed #12131726;inset:10%}
.orbit-ring.r2{inset:26%;border-style:solid;border-color:#1213170f}
.orbit-ring.r3{inset:-2%;border-color:#12131714}
.orbit-core{position:absolute;left:50%;top:50%;width:26%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:30%;background:#fff;box-shadow:0 30px 80px -30px #008d6266,0 0 0 12px #e3f5ec80;display:grid;place-items:center}
.orbit-core img{width:52%;animation:corepulse 4s ease-in-out infinite}
@keyframes corepulse{50%{transform:scale(1.06)}}
.orbit-spin{position:absolute;inset:0;animation:spin 48s linear infinite}
.orbit:hover .orbit-spin,.orbit:hover .orb-in{animation-play-state:paused}
.orb{position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(var(--a)) translateY(-40cqw) rotate(calc(var(--a) * -1))}
.orb-in{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:8px;animation:spin 48s linear infinite reverse}
.orb .picon{width:64px;height:64px;border-radius:20px;box-shadow:0 18px 40px -18px #12131755;transition:transform .3s var(--ease)}
.orb .picon svg{width:30px;height:30px}
.orb em{font-style:normal;font-size:13px;font-weight:500;white-space:nowrap;background:#fffffff2;padding:3px 10px;border-radius:999px;box-shadow:0 4px 14px -8px #1213174d}
.orb:hover .picon,.orb:focus-visible .picon{transform:scale(1.12)}
@keyframes spin{to{transform:rotate(360deg)}}

/* --- products page: explorer --- */
.xp-tabs,.pl-tabs{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;max-width:var(--inner);margin:0 auto 40px}
.xp-tabs{position:sticky;top:84px;z-index:20;background:rgba(255,255,255,.85);backdrop-filter:blur(10px);padding:8px;border-radius:999px;border:1px solid var(--line);width:max-content;max-width:100%;flex-wrap:nowrap;overflow-x:auto}
.xp-tabs button,.pl-tabs button{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 8px;border-radius:999px;font:500 14px 'Google Sans',sans-serif;white-space:nowrap;flex-shrink:0;transition:background .2s,color .2s}
.xp-tabs .picon,.pl-tabs .picon{width:30px;height:30px;border-radius:999px}
.xp-tabs .picon svg,.pl-tabs .picon svg{width:17px;height:17px}
.xp-tabs button:hover,.pl-tabs button:hover{background:var(--light)}
.xp-tabs button[aria-selected=true],.pl-tabs button[aria-selected=true]{background:var(--ink);color:#fff}
.pl-tabs{background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px;width:max-content;max-width:100%;flex-wrap:nowrap;overflow-x:auto}
.xp-panel{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,4vw,64px);align-items:center;max-width:var(--inner);margin:auto;
  border-radius:var(--r-xl);padding:clamp(24px,4vw,56px);background:radial-gradient(70% 70% at 100% 0%,var(--pglow) 0%,transparent 70%),radial-gradient(60% 60% at 0% 100%,var(--pbg) 0%,transparent 70%),var(--surface)}
.xp-head{display:flex;align-items:center;gap:18px;margin-bottom:18px}
.xp-head .kicker{font-size:12.5px;letter-spacing:.14em;color:var(--pfg);font-weight:500;margin:0 0 4px}
.xp-head h3{font-size:clamp(26px,2.6vw,36px);margin:0;letter-spacing:-.035em}
.xp-title{font:500 clamp(20px,1.8vw,24px)/1.3 'Google Sans Flex',sans-serif;letter-spacing:-.02em;margin:0 0 10px}
.xp-desc{color:var(--muted);font-size:16px;margin:0 0 20px}
.xp-list{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:9px}
.xp-list li{position:relative;padding-left:30px;font-size:15px;line-height:1.5}
.xp-list li::before{content:'';position:absolute;left:0;top:2px;width:19px;height:19px;border-radius:50%;background:var(--pbg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m6 10.5 2.6 2.5L14 7.5' fill='none' stroke='%23121317' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.xp-panel:not([hidden]) .xp-list li{animation:rise .5s var(--ease) both;animation-delay:calc(.12s + var(--i) * .06s)}
.xp-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:24px}
.xp-facts div{background:#ffffffb3;border-radius:16px;padding:14px 16px}
.xp-facts b{display:block;font:500 26px/1.1 'Google Sans Flex',sans-serif;letter-spacing:-.04em}
.xp-facts span{font-size:12.5px;color:var(--muted);line-height:1.4;display:block;margin-top:4px}
.xp-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.xp-actions .xp-plan{margin-left:6px}
.screens .frame{border-radius:20px;box-shadow:0 40px 90px -40px #12131766}
.screens-stack{position:relative;aspect-ratio:16/10;overflow:hidden;background:#f4f6f7}
.screens-stack img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left;opacity:0;transform:scale(1.04);transition:opacity .9s var(--ease),transform 6s linear}
.screens-stack img.on{opacity:1;transform:scale(1)}
.screens-dots{display:flex;gap:8px;justify-content:center;margin-top:16px}
.screens-dots button{width:8px;height:8px;border-radius:999px;background:#12131733;transition:width .3s var(--ease),background .3s}
.screens-dots button.on{width:26px;background:var(--pfg)}

/* --- plans --- */
.plangrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:var(--inner);margin:auto;align-items:stretch}
.plangrid.one{grid-template-columns:minmax(0,560px);justify-content:center}
.plancard{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:30px;display:flex;flex-direction:column;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.plancard:hover{transform:translateY(-4px);box-shadow:0 30px 60px -36px #12131755}
.pl-panel:not([hidden]) .plancard{animation:rise .55s var(--ease) both;animation-delay:calc(var(--i) * .08s)}
.pc-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pc-top h3{font-size:26px;margin:0;letter-spacing:-.03em}
.pc-badge{font-size:12px;font-weight:500;padding:4px 10px;border-radius:999px;background:var(--brand);color:#fff}
.pc-tag{color:var(--muted);font-size:15px;margin:10px 0 20px;min-height:3.2em}
.pc-seats{padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:18px;color:var(--muted);font-size:14px}
.pc-seats .seatnum{display:block;font:500 40px/1 'Google Sans Flex',sans-serif;letter-spacing:-.045em;color:var(--ink);margin-bottom:6px}
.pc-inc{font-size:13.5px;font-weight:500;margin:0 0 10px}
.pc-list{list-style:none;padding:0;margin:0 0 26px;display:grid;gap:9px;flex:1}
.pc-list li{position:relative;padding-left:26px;font-size:14.5px;line-height:1.5}
.pc-list li::before{content:'✓';position:absolute;left:0;color:var(--brand);font-weight:600}
.plancard .button{align-self:stretch;justify-content:center}
.plancard.pc-hl{background:var(--ink);color:#fff;border-color:var(--ink)}
.plancard.pc-hl h3,.plancard.pc-hl .seatnum{color:#fff}
.plancard.pc-hl .pc-tag,.plancard.pc-hl .pc-seats{color:#b9bec4}
.plancard.pc-hl .pc-seats{border-color:#ffffff1f}
.plancard.pc-hl .pc-list li::before{color:var(--brand-2)}
.plancard.pc-hl .button.dark{background:#fff;color:var(--ink)}
.pc-note{text-align:center;max-width:760px;margin:22px auto 0;font-size:14px}
.pc-note a{text-decoration:underline}
.pc-all{max-width:var(--inner);margin:18px auto 0}
.pc-all summary{cursor:pointer;list-style:none;text-align:center;font-weight:500;padding:12px;border-radius:999px;background:#fff;border:1px solid var(--line);width:max-content;margin:0 auto 18px}
.pc-all summary::-webkit-details-marker{display:none}
.pc-all summary::after{content:' +';color:var(--brand)}
.pc-all[open] summary::after{content:' −'}
.trialstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:var(--inner);margin:48px auto 0}
.trialstrip div{background:#fff;border-radius:var(--r-m);padding:20px 22px;border:1px solid var(--line)}
.trialstrip b{display:block;font:500 24px 'Google Sans Flex',sans-serif;letter-spacing:-.03em}
.trialstrip span{font-size:13.5px;color:var(--muted)}
#plans .sectionhead{margin-bottom:36px}

@media(max-width:1200px){
  .principles{grid-template-columns:repeat(2,1fr)}
  .principles.six{grid-template-columns:repeat(2,1fr)}
  .trialstrip{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:1000px){
  .ptabs{grid-template-columns:1fr}
  .ptabs-list{flex-direction:row;overflow-x:auto;padding-bottom:6px}
  .ptabs-list button{flex-shrink:0}
  .ptabs-list small{display:none}
  .prod-hero{grid-template-columns:1fr;text-align:center;padding-top:56px}
  .prod-hero .lead{margin-left:auto;margin-right:auto}
  .prod-hero .actions{justify-content:center}
  .orbit{width:min(460px,92%)}
  .xp-panel{grid-template-columns:1fr}
  .plangrid{grid-template-columns:1fr;max-width:560px}
}
@media(max-width:720px){
  .ptabs-panel .ticks{grid-template-columns:1fr}
  .pfoot>span{width:100%}
  .principles,.principles.six,.trialstrip{grid-template-columns:1fr}
  .xp-tabs{top:72px;justify-content:flex-start;border-radius:22px}
  .pl-tabs{justify-content:flex-start;border-radius:22px}
  .xp-facts b{font-size:21px}
  .orb .picon{width:46px;height:46px;border-radius:14px}
  .orb .picon svg{width:22px;height:22px}
  .orb em{display:none}
  .logos>div>span{font-size:16px}
}
@media(prefers-reduced-motion:reduce){
  .orbit-spin,.orb-in,.orbit-core img{animation:none}
  .ptabs-panel:not([hidden]),.xp-panel:not([hidden]),.pl-panel:not([hidden]),.xp-panel .xp-list li,.pl-panel .plancard{animation:none!important}
  .screens-stack img{transition:none;transform:none}
}
.xp-panel[hidden],.pl-panel[hidden],.ptabs-panel[hidden],.showpanel[hidden]{display:none}
.pc-list{align-content:start}
.section.soft>.pl-tabs{max-width:100%}

/* ============================================================
   FEATURE ROWS v3 — text header in two columns, then the screen
   large and whole underneath (readable at every width)
   ============================================================ */
.featrow,.featrow.rev{display:block;padding:clamp(48px,6vw,80px) 0;border-top:1px solid var(--line)}
.featrow:first-of-type,.sectionhead+.featrow,.facts+.featrow{border-top:0}
.featrow>.copy,.featrow.rev>.copy{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:18px clamp(32px,5vw,72px);
  max-width:none;justify-self:auto;order:0;margin:0 0 clamp(26px,3vw,40px);align-items:start}
.ft-head .tags{margin-bottom:14px}
.ft-head h3{font-size:clamp(28px,3vw,42px);line-height:1.08;letter-spacing:-.035em;margin:0}
.ft-body>p{margin:0 0 18px;color:var(--muted);font-size:17px;line-height:1.7}
.ft-body .ticks{display:grid;grid-template-columns:1fr 1fr;gap:6px 28px;margin:0}
.ft-body .ticks li{font-size:15px;margin:0}
.featrow figure.shot,.featrow.rev figure.shot{padding:clamp(14px,2.6vw,36px);border-radius:var(--r-l)}
.featrow figure.shot img{border:1px solid #dfe3e6;border-radius:14px;aspect-ratio:16/10;box-shadow:0 30px 70px -36px #12131766}
.featrow figure.shot:hover img{transform:translateY(-4px)}
@media(max-width:900px){
  .featrow>.copy,.featrow.rev>.copy{grid-template-columns:1fr}
  .ft-body .ticks{grid-template-columns:1fr}
}

/* product detail blocks (home tabs + products explorer) */
.pfacts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 18px;max-width:720px}
.pfacts div{background:#ffffffb3;border-radius:16px;padding:14px 16px}
.pfacts b{display:block;font:500 24px/1.1 'Google Sans Flex',sans-serif;letter-spacing:-.04em}
.pfacts span{font-size:12.5px;color:var(--muted);display:block;margin-top:4px;line-height:1.4}
.pmeta{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:0 0 18px;max-width:720px;background:#ffffffb3;border-radius:16px;overflow:hidden}
.pmeta div{padding:14px 16px;border-left:1px solid #1213170f}
.pmeta div:first-child{border-left:0}
.pmeta dt{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--pfg,var(--brand));font-weight:500;margin-bottom:4px}
.pmeta dd{margin:0;font-size:14px;line-height:1.5;color:var(--ink)}
.tiers{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 22px}
.tier{display:inline-flex;flex-direction:column;padding:9px 14px;border-radius:14px;background:#fff;border:1px solid #1213171a;min-width:130px}
.tier b{font-weight:500;font-size:14px}
.tier small{font-size:12.5px;color:var(--muted)}
.tier:last-child:not(.one){background:var(--ink);border-color:var(--ink);color:#fff}
.tier:last-child:not(.one) small{color:#b9bec4}
.xp-panel .pmeta,.xp-panel .pfacts{max-width:none}
.xp-panel .pmeta{grid-template-columns:1fr;background:#ffffffb3}
.xp-panel .pmeta div{border-left:0;border-top:1px solid #1213170f;display:grid;grid-template-columns:110px 1fr;gap:12px;align-items:baseline}
.xp-panel .pmeta div:first-child{border-top:0}
.xp-panel .pmeta dt{margin:0}
@media(max-width:720px){
  .pmeta{grid-template-columns:1fr}
  .pmeta div{border-left:0;border-top:1px solid #1213170f}
  .pmeta div:first-child{border-top:0}
  .pfacts b{font-size:20px}
  .xp-panel .pmeta div{grid-template-columns:1fr;gap:2px}
}
.xp-panel{align-items:start}.xp-media{position:sticky;top:170px}@media(max-width:1000px){.xp-media{position:static}}
.svc.darkcard h3,.offer.hl h3{color:#fff}

/* ============================================================
   HOME · ECOSYSTEM & SECURITY
   ============================================================ */
.picon.xs{width:26px;height:26px;border-radius:8px}
.picon.xs svg{width:15px;height:15px}
.ecogrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:var(--inner);margin:auto}
.eco{background:var(--surface);border-radius:var(--r-l);padding:26px 26px 22px;display:flex;flex-direction:column;transition:background .3s,transform .4s var(--ease)}
.eco:hover{background:#eef0f1;transform:translateY(-3px)}
.eco-mark{width:46px;height:46px;border-radius:14px;background:#fff;display:grid;place-items:center;font:600 15px 'Google Sans Flex',sans-serif;letter-spacing:-.02em;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);margin-bottom:22px}
.eco h3{font-size:20px;margin:0 0 8px;letter-spacing:-.025em}
.eco p{color:var(--muted);font-size:14.5px;line-height:1.65;margin:0 0 18px;flex:1}
.eco-chips{display:flex;gap:6px;flex-wrap:wrap;padding-top:14px;border-top:1px solid #1213170f}

.secpanel{max-width:var(--inner);margin:auto;background:var(--ink);color:#fff;border-radius:var(--r-xl);padding:clamp(32px,5vw,72px);
  display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(32px,5vw,72px);position:relative;overflow:hidden}
.secpanel::before{content:'';position:absolute;right:-20%;top:-40%;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#008d6233,transparent 65%);pointer-events:none}
.secpanel>*{position:relative}
.sec-copy .eyebrow{color:var(--brand-2)}
.sec-copy h2{color:#fff;font-size:clamp(32px,3.8vw,52px)}
.sec-copy h2 em{font-style:normal;color:#9aa0a6}
.sec-copy>p{color:#b9bec4;font-size:17px;margin:20px 0 26px;max-width:520px}
.sec-graph{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:20px;padding:20px 22px;margin-bottom:28px}
.sec-k{font-size:12px;letter-spacing:.14em;color:var(--brand-2);margin:0 0 12px}
.sec-graph dl{margin:0;display:grid;gap:0}
.sec-graph dl div{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-top:1px solid #ffffff14;font-size:14px}
.sec-graph dl div:first-child{border-top:0}
.sec-graph dt{color:#fff}
.sec-graph dd{margin:0;color:#b9bec4;text-align:right}
.sec-note{font-size:12.5px;color:#80868b;margin:12px 0 0}
.sec-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:start}
.sec-list li{background:#ffffff0a;border:1px solid #ffffff14;border-radius:20px;padding:20px 20px 22px;transition:background .3s}
.sec-list li:hover{background:#ffffff14}
.sec-list li::before{content:'';display:block;width:30px;height:30px;border-radius:10px;margin-bottom:14px;
  background:#19c48a26 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2319c48a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 5 6v5c0 4.4 3 8.3 7 9.5 4-1.2 7-5.1 7-9.5V6z'/%3E%3Cpath d='m9 12 2.2 2.2L15.5 10'/%3E%3C/svg%3E") center/18px no-repeat}
.sec-list b{display:block;font-weight:500;font-size:16px;margin-bottom:6px}
.sec-list span{color:#9aa0a6;font-size:14px;line-height:1.6}
@media(max-width:1200px){.ecogrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:1000px){.secpanel{grid-template-columns:1fr}}
@media(max-width:720px){
  .ecogrid,.sec-list{grid-template-columns:1fr}
  .sec-graph dl div{flex-direction:column;gap:2px}
  .sec-graph dd{text-align:left}
}
.eco-legend{display:flex;gap:10px 22px;flex-wrap:wrap;justify-content:center;max-width:var(--inner);margin:28px auto 0;font-size:13.5px;color:var(--muted)}.eco-legend span{display:inline-flex;align-items:center;gap:8px}
@media(max-width:720px){.principles article{padding:22px}.principles h3{margin:14px 0 6px}}

/* band sections: the section already pads 5%; the inner wrapper only caps
   width (it used to add centring padding on top, squeezing content to
   ~770px on wide screens) */
.band-inner{max-width:var(--inner);margin:0 auto;padding-left:0;padding-right:0}

/* ============================================================
   HRMS · APP INDEX + SHOWCASE
   ============================================================ */
.appsx{max-width:none}
.appsx>*{max-width:1320px;margin-left:auto;margin-right:auto}
.appsx-head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px);align-items:end;margin-bottom:48px}
.appsx-head h2{margin:0}
.appsx-head p{color:var(--muted);font-size:18px;line-height:1.65;margin:0 0 18px}
.planlegend{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.planlegend a{margin-left:8px;font-weight:500;font-size:14px}
.planlegend a:hover{color:var(--brand)}
.plantag{font-size:12px;font-weight:500;border-radius:999px;padding:3px 10px;white-space:nowrap}
.p-plus{background:#e8f6ef;color:#00684a}
.p-pro{background:#e3ecff;color:#2457b8}
.p-enterprise{background:var(--ink);color:#fff}
.appindex{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.appcard{position:relative;background:var(--surface);border-radius:20px;padding:20px 18px 18px;display:flex;flex-direction:column;gap:14px;min-height:188px;transition:background .3s,transform .4s var(--ease)}
.appcard:hover{background:#eceff1;transform:translateY(-3px)}
.appic{width:40px;height:40px;border-radius:12px;background:#fff;display:grid;place-items:center;color:var(--brand);box-shadow:inset 0 0 0 1px var(--line);flex-shrink:0}
.appic svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.appcard h3{font-size:16.5px;margin:0 0 5px;letter-spacing:-.015em;line-height:1.3}
.appcard p{font-size:13.5px;color:var(--muted);margin:0;line-height:1.55}
.appcard .plantag{position:absolute;top:18px;right:16px}

.hs{margin-top:clamp(64px,8vw,110px)}
.hs-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:24px}
.hs-head .eyebrow{margin:0 0 10px}
.hs-head h3{font-size:clamp(26px,2.8vw,38px);letter-spacing:-.035em;margin:0}
.hs{display:grid;grid-template-columns:300px 1fr;column-gap:28px;align-items:start}
.hs-head{grid-column:1/-1}
.hs-tabs{display:flex;flex-direction:column;gap:6px;position:sticky;top:100px}
.hs-tabs button{display:flex;align-items:center;gap:14px;text-align:left;padding:12px 14px;border-radius:18px;border:1px solid transparent;transition:background .25s,border-color .25s}
.hs-tabs button:hover{background:var(--surface)}
.hs-tabs button[aria-selected=true]{background:#fff;border-color:var(--line);box-shadow:0 10px 30px -18px #12131740}
.hs-tabs button[aria-selected=true] .appic{background:var(--brand);color:#fff;box-shadow:none}
.hs-tabs b{display:block;font-weight:500;font-size:15px;line-height:1.3}
.hs-tabs small{font-size:12.5px;color:var(--muted)}
.hs-panel{background:radial-gradient(70% 60% at 100% 0%,#dff5ea 0%,transparent 70%),var(--surface);border-radius:var(--r-xl);padding:clamp(18px,2.4vw,32px);min-width:0}
.hs-panel[hidden]{display:none}
.hs-panel:not([hidden]){animation:panelin .45s var(--ease) both}
.hs-shot{border-radius:18px;overflow:hidden;border:1px solid #dfe3e6;box-shadow:0 30px 70px -36px #12131766;background:#fff}
.hs-shot img{display:block;width:100%;aspect-ratio:16/9.2;object-fit:cover;object-position:top left}
.hs-text{display:grid;grid-template-columns:.8fr 1.2fr;gap:12px clamp(24px,4vw,56px);padding:clamp(22px,2.6vw,34px) clamp(4px,1vw,12px) 6px}
.hs-text h3{font-size:clamp(24px,2.4vw,32px);letter-spacing:-.03em;margin:12px 0 0;line-height:1.15}
.hs-text p{color:var(--muted);font-size:16px;line-height:1.7;margin:0 0 16px}
.hs-text .ticks{display:grid;grid-template-columns:1fr 1fr;gap:6px 22px;margin:0}
.hs-text .ticks li{font-size:14.5px;margin:0}

@media(max-width:1200px){.appindex{grid-template-columns:repeat(3,1fr)}}
@media(max-width:1000px){
  .appsx-head{grid-template-columns:1fr}
  .hs{grid-template-columns:1fr}
  .hs-tabs{position:static;flex-direction:row;overflow-x:auto;padding-bottom:8px;margin-bottom:14px}
  .hs-tabs button{flex-shrink:0}
  .hs-text{grid-template-columns:1fr}
}
@media(max-width:720px){
  .appindex{grid-template-columns:1fr 1fr}
  .appcard{min-height:0;padding:16px 14px}
  .appcard .plantag{position:static;align-self:flex-start;order:3}
  .hs-text .ticks{grid-template-columns:1fr}
}
@media(max-width:420px){.appindex{grid-template-columns:1fr}}
.hs-head{display:block}

/* ============================================================
   FOOTER v2 — Microsoft 365 logo strip, brand block, columns
   ============================================================ */
.sitefoot{background:#fafbfb;border-top:1px solid var(--line);padding:0 5%;overflow:visible}
.ms-strip{max-width:var(--inner);margin:0 auto;padding:44px 0 40px;border-bottom:1px solid var(--line);text-align:center}
.ms-strip p{font-size:12px;letter-spacing:.14em;color:#80868b;margin:0 0 22px}
.ms-logos{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:14px 30px}
.ms-logos li{display:inline-flex;align-items:center;gap:9px;font:500 15px 'Google Sans',sans-serif;color:#3c4043;transition:transform .3s var(--ease)}
.ms-logos li:hover{transform:translateY(-2px)}
.ms-logos img{width:26px;height:26px;display:block}
.foot-main{max-width:var(--inner);margin:0 auto;padding:56px 0 48px;display:grid;grid-template-columns:1.1fr 2fr;gap:clamp(32px,6vw,96px)}
.foot-brand .brand{font-size:22px;margin-bottom:14px}
.foot-brand p{font-size:14.5px;color:var(--muted);line-height:1.7;margin:0 0 22px;max-width:340px}
.foot-cta{display:flex;gap:10px;flex-wrap:wrap}
.foot-cta .button{padding:12px 20px;font-size:14px}
.foot-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.foot-cols h4{font:500 14px 'Google Sans',sans-serif;letter-spacing:0;color:var(--ink);margin:4px 0 16px}
.foot-cols ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.foot-cols a{font-size:14px;color:var(--muted);transition:color .2s}
.foot-cols a:hover{color:var(--brand)}
.sitefoot .legal{max-width:var(--inner);margin:0 auto;padding:22px 0 30px;border-top:1px solid var(--line);display:grid;grid-template-columns:auto 1fr auto;gap:12px 28px;align-items:start;font-size:12.5px;color:#80868b}
.sitefoot .legal .tm{line-height:1.6}
.sitefoot .legal a:hover{color:var(--ink)}
@media(max-width:1000px){
  .foot-main{grid-template-columns:1fr}
  .foot-cols{grid-template-columns:repeat(2,1fr)}
  .sitefoot .legal{grid-template-columns:1fr}
}
@media(max-width:720px){
  .ms-logos{gap:12px 20px}
  .ms-logos li{font-size:13.5px}
  .ms-logos img{width:22px;height:22px}
}
/* home: Microsoft logo row, quiet grey */
.logos .mslogo{display:inline-flex;align-items:center;gap:10px;font:500 18px 'Google Sans Flex',sans-serif;color:#80868b}
.logos .mslogo img{width:24px;height:24px;filter:grayscale(1) opacity(.65);transition:filter .3s}
.logos .mslogo:hover img{filter:none}
.ms-strip p{max-width:none}.foot-cols ul{line-height:1.5}.foot-cols li{margin:0}

/* ============================================================
   APP PAGES + PRICING
   ============================================================ */
.app-eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--pfg)}
.app-eyebrow .picon{width:32px;height:32px;border-radius:10px}
.app-eyebrow .picon svg{width:18px;height:18px}
.apphero{background:radial-gradient(60% 50% at 50% 0%,var(--pbg) 0%,transparent 70%),#fff}
.fromprice{margin:18px 0 0;font-size:15px;color:var(--muted)}
.fromprice b,.pfoot b{color:var(--ink);font-weight:500}

.morefeat-head{max-width:var(--inner);margin:56px auto 18px}
.morefeat-head h3{font-size:clamp(24px,2.4vw,32px);letter-spacing:-.03em;margin:0}
.morefeat,.admingrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:var(--inner);margin:auto}
.morefeat article,.admingrid article{background:var(--surface);border-radius:20px;padding:22px}
.section.soft .admingrid article,.section.soft .morefeat article{background:#fff;border:1px solid var(--line)}
.morefeat h3,.admingrid h3{font-size:17px;margin:0 0 6px;letter-spacing:-.015em}
.morefeat p,.admingrid p{font-size:14px;color:var(--muted);margin:0;line-height:1.6}
.hwrow{display:flex;align-items:stretch;gap:12px;max-width:var(--inner);margin:auto}
.hw{flex:1;background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:26px}
.hw h3{font-size:20px;margin:18px 0 8px;letter-spacing:-.02em}
.hw p{color:var(--muted);font-size:14.5px;margin:0;line-height:1.65}
.hw-arrow{align-self:center;color:#9aa0a6;font-size:22px}
.steps.five{grid-template-columns:repeat(5,1fr)}
.goodtoknow{max-width:var(--inner);margin-left:auto;margin-right:auto;background:var(--surface);border-radius:var(--r-l);padding:28px 32px}
.goodtoknow h3{font-size:20px;margin:0 0 14px}
.goodtoknow .ticks{display:grid;grid-template-columns:1fr 1fr;gap:6px 28px;margin:0}

/* pricing */
.billing{display:flex;gap:4px;width:max-content;margin:0 auto 28px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px}
.billing button{padding:9px 18px;border-radius:999px;font:500 14px 'Google Sans',sans-serif;transition:background .2s,color .2s}
.billing button span{font-size:12px;color:var(--brand);margin-left:6px}
.billing button[aria-pressed=true]{background:var(--ink);color:#fff}
.billing button[aria-pressed=true] span{color:var(--brand-2)}
.pc-price{display:flex;align-items:flex-start;gap:2px;margin:6px 0 2px}
.pc-price .cur{font:500 22px/1.4 'Google Sans Flex',sans-serif}
.pc-price b{font:500 54px/1 'Google Sans Flex',sans-serif;letter-spacing:-.05em}
.pc-price b.custom{font-size:42px}
.pc-price .per{align-self:flex-end;font-size:14px;color:var(--muted);margin:0 0 8px 6px}
.plancard.pc-hl .pc-price .per{color:#b9bec4}
.pc-bill{font-size:13px;color:var(--muted);margin:0 0 4px}
.pc-unit{font-size:13px;font-weight:500;color:var(--brand);margin:0 0 16px}
.plancard.pc-hl .pc-bill{color:#9aa0a6}
.plancard.pc-hl .pc-unit{color:var(--brand-2)}
.pc-seats{padding:14px 0;font-size:14px}
.pc-seats .seatnum.sm{display:inline;font-size:20px;letter-spacing:-.02em;margin:0 2px}
.pc-tag{min-height:0}
.plancard{position:relative}
.plancard.pc-hl{transform:translateY(-8px);box-shadow:0 40px 80px -40px #12131788}
.plancard.pc-hl:hover{transform:translateY(-12px)}
.pricing [data-annual]{transition:opacity .2s}
.suite-offer{max-width:var(--inner);margin:28px auto 0;display:grid;grid-template-columns:1.3fr 1fr;gap:28px;align-items:center;background:var(--ink);color:#fff;border-radius:var(--r-l);padding:clamp(24px,3.5vw,44px);
  background-image:radial-gradient(60% 120% at 100% 0%,#008d6240,transparent 60%)}
.suite-offer .sk{font-size:12px;letter-spacing:.14em;color:var(--brand-2);margin:0 0 10px}
.suite-offer h3{color:#fff;font-size:clamp(24px,2.6vw,34px);margin:0 0 8px;letter-spacing:-.03em}
.suite-offer p{color:#b9bec4;margin:0;font-size:15px}
.suite-price{text-align:right;justify-self:end}
.suite-price .was{color:#9aa0a6;text-decoration:line-through;font-size:14px}
.suite-price .pc-price{justify-content:flex-end}
.suite-price .pc-price .per{color:#b9bec4}
.suite-price p{margin:0 0 14px}
@media(max-width:1200px){
  .morefeat,.admingrid{grid-template-columns:repeat(2,1fr)}
  .steps.five{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:1000px){
  .hwrow{flex-direction:column}
  .hw-arrow{transform:rotate(90deg)}
  .plancard.pc-hl{transform:none}
  .suite-offer{grid-template-columns:1fr}
  .suite-price{text-align:left;justify-self:start}
  .suite-price .pc-price{justify-content:flex-start}
}
@media(max-width:720px){
  .morefeat,.admingrid,.steps.five,.goodtoknow .ticks{grid-template-columns:1fr}
  .pc-price b{font-size:46px}
}

/* ============================================================
   MICROSOFT LOGOS — large, with meaning
   ============================================================ */
/* home: band right under the hero */
.msband{max-width:var(--maxw);margin:0 auto;padding:30px 5% 90px}
.msband-head{text-align:center;max-width:820px;margin:0 auto 36px}
.msband-head h2{font-size:clamp(30px,3.6vw,48px)}
.msband-grid{list-style:none;margin:0 auto;padding:0;max-width:var(--inner);display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.mst{display:flex;flex-direction:column;align-items:flex-start;gap:6px;background:var(--surface);border-radius:var(--r-l);padding:24px 22px 22px;transition:background .3s,transform .4s var(--ease)}
.mst:hover{background:#eceff1;transform:translateY(-4px)}
.mst-logo{width:72px;height:72px;border-radius:20px;background:#fff;display:grid;place-items:center;box-shadow:0 12px 30px -18px #12131755,inset 0 0 0 1px var(--line);margin-bottom:14px;transition:transform .4s var(--ease)}
.mst:hover .mst-logo{transform:scale(1.06) rotate(-3deg)}
.mst-logo img{width:44px;height:44px}
.mst b{font:500 19px/1.3 'Google Sans Flex',sans-serif;letter-spacing:-.02em}
.mst small{font-size:14px;color:var(--muted);line-height:1.55}
/* ecosystem cards: real logos */
.eco-mark.logo{width:56px;height:56px;border-radius:16px}
.eco-mark.logo img{width:32px;height:32px}
/* footer (every page): bigger tiles */
.ms-strip{padding:56px 0 52px}
.ms-strip-head{text-align:center;margin-bottom:30px}
.ms-strip-head p{margin:0 0 10px}
.ms-strip-head h3{font-size:clamp(22px,2.4vw,30px);letter-spacing:-.03em;margin:0}
.ms-logos{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;max-width:var(--inner);margin:0 auto}
.ms-logos li{flex-direction:column;justify-content:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px 10px 18px;font-size:14.5px;text-align:center}
.ms-logos li:hover{transform:translateY(-3px);box-shadow:0 18px 40px -26px #12131755}
.msf-logo{display:grid;place-items:center;height:44px}
.ms-logos img{width:40px;height:40px}
@media(max-width:1000px){.msband-grid{grid-template-columns:repeat(2,1fr)}.ms-logos{grid-template-columns:repeat(4,1fr)}}
@media(max-width:720px){
  .msband{padding:10px 20px 60px}
  .mst{padding:18px 16px}
  .mst-logo{width:56px;height:56px;border-radius:16px}
  .mst-logo img{width:34px;height:34px}
  .ms-logos{grid-template-columns:repeat(3,1fr)}
  .ms-logos li{padding:16px 6px 14px;font-size:12.5px}
  .ms-logos img{width:32px;height:32px}
}

/* ================= RESOURCES, KB, BLOG, ABOUT, DEMO BOOKING, TRUST ================= */
.megamenu.small{width:min(400px,92vw)}
.megamenu.small .mm-grid{grid-template-columns:1fr}
.t-res{--pbg:#eef1f3;--pfg:#3c4043;--pglow:#dfe3e6}
.mm-item:hover .t-res{--pbg:#dff5ea;--pfg:#008d62}
.legal-links{display:inline-flex;gap:16px;flex-wrap:wrap}
.legal-links a:hover{color:var(--ink);text-decoration:underline}

/* trust strip */
.truststrip{list-style:none;margin:0 auto;padding:0;max-width:var(--inner);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.truststrip li{position:relative;background:var(--surface);border-radius:22px;padding:24px 22px 22px 22px;display:grid;gap:6px;align-content:start}
.truststrip li::before{content:'';width:30px;height:30px;border-radius:10px;background:#dff5ea url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23008d62' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/16px no-repeat;margin-bottom:8px}
.truststrip b{font:500 17px/1.3 'Google Sans Flex',sans-serif;letter-spacing:-.01em}
.truststrip span{font-size:14.5px;color:var(--muted);line-height:1.55}
@media(max-width:1000px){.truststrip{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.truststrip{grid-template-columns:minmax(0,1fr)}}

/* knowledge base search on the main site */
.kbpanel{max-width:var(--inner);margin:0 auto;background:var(--ink);color:#fff;border-radius:32px;padding:56px clamp(22px,5vw,64px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:40px;align-items:center;position:relative;overflow:visible}
.kbpanel h2{color:#fff;font-size:clamp(30px,3.6vw,46px);letter-spacing:-.03em}
.kbpanel p{color:#c4c7c5;font-size:17px;line-height:1.6;margin:14px 0 0}
.kbpanel .eyebrow{color:#7ee2b8}
.kbpanel .kbsearch{position:relative}
.kbsearch svg{position:absolute;left:18px;top:50%;transform:translateY(-50%);width:20px;height:20px;fill:none;stroke:#5f6368;stroke-width:2;stroke-linecap:round;pointer-events:none}
.kbsearch input{width:100%;font:inherit;font-size:17px;padding:18px 20px 18px 50px;border:0;border-radius:999px;background:#fff;color:var(--ink)}
.kbsearch input:focus{outline:3px solid #19c48a;outline-offset:2px}
.kbsuggest{position:absolute;top:calc(100% + 8px);left:0;right:0;background:#fff;border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.3);padding:6px;max-height:420px;overflow:auto;z-index:30;color:var(--ink);text-align:left}
.kbsuggest a{display:block;padding:10px 12px;border-radius:10px}
.kbsuggest a:hover,.kbsuggest a[aria-selected=true]{background:var(--surface)}
.kbsuggest b{display:block;font-weight:500}
.kbsuggest small{color:var(--muted);font-size:12.5px}
.kbsuggest .all{color:var(--brand);font-weight:500;font-size:14px}
.kbsuggest .none{padding:12px;color:var(--muted);font-size:14px;margin:0}
.kbsuggest mark{background:#c9f2df;color:inherit;border-radius:3px}
.kbtopics{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.kbtopics a{font-size:14px;padding:6px 14px;border-radius:999px;border:1px solid #3c4043;color:#e8eaed;transition:border-color .2s,background .2s}
.kbtopics a:hover{border-color:#19c48a;background:#ffffff10}
.kbprodrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:var(--inner);margin:0 auto}
.kbp{display:grid;gap:12px;background:var(--surface);border-radius:24px;padding:24px;transition:background .25s,transform .3s var(--ease)}
.kbp:hover{background:#eceff1;transform:translateY(-3px)}
.kbp-top{display:flex;gap:14px;align-items:center}
.kbp h3{font-size:20px;letter-spacing:-.02em;margin:0}
.kbp small{color:var(--muted);font-size:13px}
.kbp p{color:var(--muted);font-size:14.5px;line-height:1.55;margin:0}
.kbp-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.kbp-links a{font-size:13.5px;font-weight:500;padding:7px 13px;border-radius:999px;background:#fff;border:1px solid var(--line)}
.kbp-links a:hover{border-color:var(--ink)}
@media(max-width:1000px){.kbpanel{grid-template-columns:minmax(0,1fr)}.kbprodrow{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.kbprodrow{grid-template-columns:minmax(0,1fr)}.kbpanel{border-radius:24px;padding:36px 20px}}

/* blog */
.postgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;max-width:var(--inner);margin:0 auto}
.postcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:24px;overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s}
.postcard:hover{transform:translateY(-4px);box-shadow:0 24px 50px -30px #12131766}
.postcard .pc-art{aspect-ratio:16/9;background:var(--pbg,#eef1f3);display:grid;place-items:center;position:relative;overflow:hidden}
.postcard .pc-art::after{content:'';position:absolute;inset:auto -20% -60% -20%;height:90%;background:radial-gradient(closest-side,var(--pglow,#dfe3e6),transparent);opacity:.9}
.postcard .pc-art .picon{width:72px;height:72px;border-radius:22px;background:#fff;position:relative;z-index:1;box-shadow:0 12px 30px -16px #12131755}
.postcard .pc-art .picon svg{width:34px;height:34px}
.postcard .pc-body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.postcard .pc-meta{font-size:13px;color:var(--muted);display:flex;gap:10px;flex-wrap:wrap}
.postcard .pc-meta b{font-weight:500;color:var(--brand)}
.postcard h3{font-size:21px;line-height:1.3;letter-spacing:-.02em;margin:0}
.postcard p{color:var(--muted);font-size:15px;line-height:1.6;margin:0}
.postcard .pc-more{margin-top:auto;font-weight:500;font-size:14.5px}
.postcard.feat{grid-column:span 3;flex-direction:row}
.postcard.feat .pc-art{aspect-ratio:auto;flex:1 1 50%;min-height:320px}
.postcard.feat .pc-body{flex:1 1 50%;padding:40px;justify-content:center}
.postcard.feat h3{font-size:clamp(26px,2.6vw,34px)}
@media(max-width:1000px){.postgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.postcard.feat{grid-column:span 2}}
@media(max-width:700px){.postgrid{grid-template-columns:minmax(0,1fr)}.postcard.feat{grid-column:auto;flex-direction:column}.postcard.feat .pc-art{min-height:200px}.postcard.feat .pc-body{padding:24px}}
.postwrap{max-width:760px;margin:0 auto;padding:0 20px}
.posthead{max-width:860px;margin:0 auto;padding:64px 20px 28px;text-align:center}
.posthead h1{font-size:clamp(34px,5vw,56px);letter-spacing:-.035em;line-height:1.08;margin:14px 0 18px}
.posthead .lead{font-size:19px;color:var(--muted);line-height:1.6;max-width:640px;margin:0 auto}
.postby{display:flex;gap:10px;justify-content:center;align-items:center;margin-top:22px;font-size:14px;color:var(--muted);flex-wrap:wrap}
.postby img{width:30px;height:27px}
.postbody{font-size:18px;line-height:1.75;color:#2d3035}
.postbody>*+*{margin-top:1.1em}
.postbody h2{font-size:28px;letter-spacing:-.025em;line-height:1.25;margin-top:1.8em;color:var(--ink)}
.postbody h3{font-size:21px;margin-top:1.5em;color:var(--ink)}
.postbody ul,.postbody ol{padding-left:1.3em}
.postbody li+li{margin-top:.45em}
.postbody li::marker{color:var(--brand)}
.postbody a{text-decoration:underline;text-decoration-color:#19c48a;text-underline-offset:3px}
.postbody blockquote{margin:1.6em 0;padding:4px 0 4px 22px;border-left:3px solid var(--brand);font:500 21px/1.5 'Google Sans Flex',sans-serif;color:var(--ink)}
.postbody figure{margin:1.8em 0}
.postbody figure img{border-radius:16px;border:1px solid var(--line);width:100%;height:auto}
.postbody figcaption{font-size:14px;color:var(--muted);margin-top:8px}
.postbody .callout{background:var(--surface);border-radius:18px;padding:20px 22px;font-size:16px}
.postbody table{width:100%;border-collapse:collapse;font-size:15.5px}
.postbody th,.postbody td{border-bottom:1px solid var(--line);padding:10px 8px;text-align:left;vertical-align:top}
.postbody th{font-weight:500;color:var(--muted);font-size:13.5px}
.postfoot{max-width:760px;margin:48px auto 0;padding:26px 20px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
.posttags{display:flex;gap:8px;flex-wrap:wrap}
.posttags span{font-size:13px;padding:5px 12px;border-radius:999px;background:var(--surface)}

/* about */
.mvgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-width:var(--inner);margin:0 auto}
.mvcard{border-radius:32px;padding:48px clamp(24px,4vw,48px);display:grid;gap:16px;align-content:start;position:relative;overflow:hidden}
.mvcard.mission{background:var(--ink);color:#fff}
.mvcard.vision{background:#dff5ea}
.mvcard .eyebrow{margin:0}
.mvcard.mission .eyebrow{color:#7ee2b8}
.mvcard h2{font-size:clamp(28px,3.2vw,40px);letter-spacing:-.03em;line-height:1.15;margin:0}
.mvcard.mission h2{color:#fff}
.mvcard p{font-size:17px;line-height:1.65;margin:0}
.mvcard.mission p{color:#c4c7c5}
.mvcard.vision p{color:#2d4a3e}
.mvcard .mv-ic{width:56px;height:56px;border-radius:18px;display:grid;place-items:center}
.mvcard.mission .mv-ic{background:#ffffff14;color:#7ee2b8}
.mvcard.vision .mv-ic{background:#fff;color:var(--brand)}
.mvcard .mv-ic svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.valgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:var(--inner);margin:0 auto}
.valcard{background:var(--surface);border-radius:24px;padding:28px 26px;display:grid;gap:10px;align-content:start}
.valcard .num{font:500 14px 'Google Sans',sans-serif;color:var(--brand)}
.valcard h3{font-size:21px;letter-spacing:-.02em;margin:0}
.valcard p{color:var(--muted);font-size:15px;line-height:1.6;margin:0}
.promise{max-width:var(--inner);margin:0 auto;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:start}
.promise ol{list-style:none;margin:0;padding:0;counter-reset:pr;display:grid;gap:0}
.promise li{counter-increment:pr;display:grid;grid-template-columns:52px 1fr;gap:16px;padding:20px 0;border-bottom:1px solid var(--line)}
.promise li:first-child{padding-top:0}
.promise li::before{content:counter(pr,decimal-leading-zero);font:500 15px 'Google Sans Flex',sans-serif;color:var(--brand);padding-top:3px}
.promise li b{display:block;font:500 18px/1.35 'Google Sans Flex',sans-serif;margin-bottom:4px}
.promise li span{color:var(--muted);font-size:15px;line-height:1.6}
@media(max-width:1000px){.valgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.promise{grid-template-columns:minmax(0,1fr);gap:28px}}
@media(max-width:720px){.mvgrid,.valgrid{grid-template-columns:minmax(0,1fr)}.mvcard{border-radius:24px;padding:32px 22px}}

/* demo booking */
.booker{max-width:var(--inner);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:28px;align-items:start}
.bk-main{background:#fff;border:1px solid var(--line);border-radius:28px;padding:clamp(20px,3.4vw,40px);box-shadow:0 30px 80px -50px #12131755}
.bk-step{border:0;margin:0;padding:0 0 30px;min-width:0}
.bk-step+.bk-step{border-top:1px solid var(--line);padding-top:28px}
.bk-step legend{display:flex;align-items:center;gap:12px;font:500 20px 'Google Sans Flex',sans-serif;letter-spacing:-.02em;margin-bottom:6px;padding:0}
.bk-step legend i{font-style:normal;width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:14px}
.bk-hint{color:var(--muted);font-size:14.5px;margin:0 0 16px 42px}
.bk-chips{display:flex;flex-wrap:wrap;gap:8px}
.bk-chip{position:relative}
.bk-chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.bk-chip>span{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid var(--line);border-radius:999px;font-size:14.5px;font-weight:500;transition:border-color .2s,background .2s;cursor:pointer;background:#fff}
.bk-chip>span .picon{width:24px;height:24px;border-radius:8px}
.bk-chip>span .picon svg{width:14px;height:14px}
.bk-chip input:checked+span{border-color:var(--brand);background:#e7f6ef;color:#00543a}
.bk-chip input:focus-visible+span{outline:2px solid var(--brand);outline-offset:2px}
.bk-chip>span:hover{border-color:#9aa0a6}
.bk-days{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.bk-day{display:grid;gap:2px;justify-items:center;padding:12px 4px;border:1px solid var(--line);border-radius:16px;background:#fff;font:inherit;cursor:pointer;transition:border-color .2s,background .2s}
.bk-day small{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.bk-day b{font:500 22px 'Google Sans Flex',sans-serif}
.bk-day span{font-size:12px;color:var(--muted)}
.bk-day:hover{border-color:#9aa0a6}
.bk-day[aria-pressed=true]{border-color:var(--ink);background:var(--ink);color:#fff}
.bk-day[aria-pressed=true] small,.bk-day[aria-pressed=true] span{color:#c4c7c5}
.bk-weeknav{display:flex;justify-content:space-between;align-items:center;margin:0 0 10px;font-size:14px;color:var(--muted)}
.bk-weeknav button{font:inherit;font-weight:500;color:var(--ink);padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:#fff;cursor:pointer}
.bk-weeknav button:disabled{opacity:.35;cursor:default}
.bk-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px;margin-top:14px}
.bk-slot{font:inherit;font-size:15px;font-weight:500;padding:11px 6px;border:1px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;transition:border-color .2s,background .2s}
.bk-slot:hover{border-color:var(--brand);color:var(--brand)}
.bk-slot[aria-pressed=true]{background:var(--brand);border-color:var(--brand);color:#fff}
.bk-tz{font-size:13.5px;color:var(--muted);margin-top:12px}
.bk-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
.bk-form .full{grid-column:1/-1}
.bk-form .field label{font-size:13px;font-weight:500;letter-spacing:0;color:#3c4043}
.bk-form .field input,.bk-form .field select,.bk-form .field textarea{border-radius:12px;font-size:15px;padding:12px 14px}
.bk-form .field input:focus,.bk-form .field select:focus,.bk-form .field textarea:focus{border-color:var(--brand);outline:none;box-shadow:0 0 0 3px rgba(0,141,98,.14)}
.bk-err{color:#b3261e;font-size:14px;margin:8px 0 0;min-height:1em}
.bk-consent{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--muted);line-height:1.5;margin:6px 0 18px}
.bk-consent input{margin-top:3px;width:16px;height:16px;accent-color:var(--brand);flex-shrink:0}
.bk-consent a{text-decoration:underline}
.bk-side{position:sticky;top:96px;display:grid;gap:14px}
.bk-summary{background:var(--ink);color:#fff;border-radius:24px;padding:26px}
.bk-summary h3{color:#fff;font-size:19px;margin:0 0 16px}
.bk-summary dl{margin:0;display:grid;gap:12px}
.bk-summary dt{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#9aa0a6}
.bk-summary dd{margin:2px 0 0;font-size:15.5px;color:#fff}
.bk-summary dd.empty{color:#9aa0a6}
.bk-summary .button{width:100%;justify-content:center;margin-top:20px;background:#fff;color:var(--ink)}
.bk-summary .button:disabled{opacity:.45;cursor:not-allowed}
.bk-expect{background:var(--surface);border-radius:24px;padding:24px}
.bk-expect h3{font-size:17px;margin:0 0 12px}
.bk-expect ul{margin:0;padding-left:18px;display:grid;gap:8px;font-size:14.5px;color:#3c4043;line-height:1.5}
.bk-expect li::marker{color:var(--brand)}
.bk-done{text-align:center;padding:24px 8px}
.bk-done .ok{width:72px;height:72px;border-radius:50%;background:#dff5ea;display:grid;place-items:center;margin:0 auto 18px}
.bk-done .ok svg{width:34px;height:34px;fill:none;stroke:var(--brand);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.bk-done h2{font-size:clamp(26px,3vw,36px);letter-spacing:-.03em;margin:0 0 10px}
.bk-done p{color:var(--muted);font-size:16.5px;line-height:1.6;max-width:540px;margin:0 auto}
.bk-done .when{font:500 19px 'Google Sans Flex',sans-serif;color:var(--ink);margin:18px auto 22px}
.bk-done .actions{justify-content:center}
@media(max-width:1000px){.booker{grid-template-columns:minmax(0,1fr)}.bk-side{position:static}}
@media(max-width:600px){.bk-days{grid-template-columns:repeat(3,minmax(0,1fr))}.bk-form{grid-template-columns:minmax(0,1fr)}.bk-hint{margin-left:0}}

/* trust center & legal */
.trustgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:var(--inner);margin:0 auto}
.tcard{background:var(--surface);border-radius:24px;padding:28px 26px;display:grid;gap:10px;align-content:start}
.tcard .tic{width:48px;height:48px;border-radius:15px;background:#fff;display:grid;place-items:center;color:var(--brand);box-shadow:inset 0 0 0 1px var(--line)}
.tcard .tic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tcard h3{font-size:20px;letter-spacing:-.02em;margin:6px 0 0}
.tcard p{color:var(--muted);font-size:15px;line-height:1.6;margin:0}
.tcard a{font-weight:500;font-size:14.5px;margin-top:4px}
.tcard a:hover{color:var(--brand)}
.sla{max-width:var(--inner);margin:0 auto}
.sla .cmpwrap{margin-top:0}
@media(max-width:1000px){.trustgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.trustgrid{grid-template-columns:minmax(0,1fr)}}
.legal-doc{max-width:var(--inner);margin:0 auto;display:grid;grid-template-columns:240px minmax(0,1fr);gap:56px;padding:0 0 40px}
.legal-toc{position:sticky;top:96px;align-self:start;font-size:14px}
.legal-toc p{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.legal-toc ol{margin:0;padding:0;list-style:none;display:grid;gap:2px}
.legal-toc a{display:block;padding:6px 10px;border-radius:8px;color:var(--muted)}
.legal-toc a:hover{background:var(--surface);color:var(--ink)}
.legal-body{max-width:760px;font-size:16.5px;line-height:1.75;color:#2d3035}
.legal-body h2{font-size:24px;letter-spacing:-.02em;margin:2em 0 .5em;color:var(--ink);scroll-margin-top:96px}
.legal-body h2:first-child{margin-top:0}
.legal-body p,.legal-body ul{margin:0 0 1em}
.legal-body ul{padding-left:1.3em}
.legal-body li+li{margin-top:.35em}
.legal-body li::marker{color:var(--brand)}
.legal-body a{text-decoration:underline;text-underline-offset:3px}
.legal-body .updated{display:inline-block;font-size:14px;color:var(--muted);background:var(--surface);border-radius:999px;padding:6px 14px;margin-bottom:24px}
@media(max-width:900px){.legal-doc{grid-template-columns:minmax(0,1fr);gap:24px}.legal-toc{position:static}}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px}
.info-row .info-ic{display:grid;place-items:center;font-size:15px;font-weight:500;line-height:1;background:#dff5ea;color:var(--brand)}
.megamenu .mm-item b,.megamenu .mm-item small{letter-spacing:0}
.postrelated{margin-top:40px;padding:22px 24px;border-radius:18px;border:1px solid var(--line)}
.postrelated h2{font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 10px;font-family:'Google Sans',sans-serif;font-weight:500}
.postrelated ul{margin:0;padding-left:1.2em;display:grid;gap:6px}
.postrelated a{text-decoration:underline;text-decoration-color:#19c48a;text-underline-offset:3px}
/* service landing pages */
.svc-kind{margin-top:18px;font-size:14px;color:var(--muted);max-width:56ch}
.svc-kind a,.svc-links a{text-decoration:underline;text-decoration-color:#19c48a;text-underline-offset:3px}
.svc-links{margin-top:28px;display:grid;gap:8px}
.svc-links h3{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-family:'Google Sans',sans-serif;font-weight:500;margin:10px 0 0}
.svc-links ul{margin:0;padding-left:1.1em;display:grid;gap:6px;font-size:15px}
.svcmap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;max-width:var(--inner);margin:0 auto}
.svcmap a{display:grid;gap:6px;padding:20px;border-radius:20px;background:var(--surface);transition:background .2s,transform .3s var(--ease)}
.svcmap a:hover{background:#eceff1;transform:translateY(-3px)}
.svcmap b{font:500 17px/1.3 'Google Sans Flex',sans-serif}
.svcmap span{font-size:14px;color:var(--muted);line-height:1.5}
@media(max-width:1000px){.svcmap{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.svcmap{grid-template-columns:minmax(0,1fr)}}
/* product resources block */
.resgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:var(--inner);margin:0 auto}
.rescol{background:var(--surface);border-radius:24px;padding:26px 24px}
.rescol h3{font-size:18px;margin:0 0 12px}
.rescol ul{margin:0;padding-left:1.1em;display:grid;gap:10px;font-size:15px;color:var(--muted);line-height:1.5}
.rescol li::marker{color:var(--brand)}
.rescol a{color:var(--ink);text-decoration:underline;text-decoration-color:#19c48a;text-underline-offset:3px}
@media(max-width:1000px){.resgrid{grid-template-columns:minmax(0,1fr)}}
.lift .lead a{color:inherit;text-decoration:underline;text-decoration-color:#19c48a88;text-underline-offset:4px}
.hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.pagehero .svc-kind{margin-left:auto;margin-right:auto;text-align:center}
.svc-links li::marker{color:var(--brand)}
.lift .lead a{text-decoration-thickness:1px;text-decoration-color:#19c48a99}