/* ============================================================
   HANYA 360 PRODUCT SUITE
   Loaded by the home page and by every /products/ page.

   One rule holds the suite together: the frame is always Hanya's
   (drafting stock, hairlines, mono annotations, the ultramarine
   accent) and each product brings only its own signal colour,
   through --pa. Three products, one visual language.
   ============================================================ */

/* ---------- product signal colours ----------
   Taken from each product's own brand: MetaLens360's beam cyan,
   Property360's blue, and the indigo of Personal360's preview card
   (its UI blue is the same as Property360's, so the suite uses the
   indigo to keep the two apart). The -ink values are the text-safe
   variants; each clears 4.5:1 on its own theme's surfaces. */
.p-ml{--pa:#0B8FA6;--pa-ink:#076F81;--pa-wash:rgba(11,143,166,.09);--pa-on:#fff;}
.p-p3{--pa:#2563EB;--pa-ink:#1D4ED8;--pa-wash:rgba(37,99,235,.08);--pa-on:#fff;}
.p-pe{--pa:#4F46E5;--pa-ink:#4338CA;--pa-wash:rgba(79,70,229,.08);--pa-on:#fff;}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .p-ml{--pa:#2DD4E8;--pa-ink:#5EE3F0;--pa-wash:rgba(45,212,232,.11);--pa-on:#05070E;}
  :root:not([data-theme="light"]) .p-p3{--pa:#60A5FA;--pa-ink:#93C5FD;--pa-wash:rgba(96,165,250,.12);--pa-on:#05070E;}
  :root:not([data-theme="light"]) .p-pe{--pa:#A5B4FC;--pa-ink:#C7D2FE;--pa-wash:rgba(165,180,252,.12);--pa-on:#05070E;}
}
:root[data-theme="dark"] .p-ml{--pa:#2DD4E8;--pa-ink:#5EE3F0;--pa-wash:rgba(45,212,232,.11);--pa-on:#05070E;}
:root[data-theme="dark"] .p-p3{--pa:#60A5FA;--pa-ink:#93C5FD;--pa-wash:rgba(96,165,250,.12);--pa-on:#05070E;}
:root[data-theme="dark"] .p-pe{--pa:#A5B4FC;--pa-ink:#C7D2FE;--pa-wash:rgba(165,180,252,.12);--pa-on:#05070E;}

/* ---------- product glyph tile ---------- */
/* The product's own application icon. The artwork carries its tile, so the
   wrapper only sizes it. The 1px ring keeps the dark MetaLens360 tile from
   dissolving into the dark theme's ground. */
.pg{display:inline-block;flex:none;width:34px;height:34px;border-radius:8px;box-shadow:0 0 0 1px var(--rule);}
.pg img{display:block;width:100%;height:100%;}
.pg--s{width:22px;height:22px;border-radius:5px;}
.pg--l{width:clamp(46px,5vw,60px);height:clamp(46px,5vw,60px);border-radius:13px;}

/* Button in the product's own colour, for the one action that leaves for
   the product itself. Everything else stays a Hanya button. */
.btn.btn--p{background:var(--pa);border-color:var(--pa);color:var(--pa-on);}
.btn.btn--p:hover{box-shadow:0 9px 22px -12px var(--pa);}
.ext{font-family:var(--f-m);font-size:12px;}

/* ---------- nav: the 360 Suite menu ---------- */
/* .mega prefixes: the home page's inline .mega__g and .mega__l rules load after
   this file, so equal-specificity rules here would silently lose. */
.mega .mega__g--suite{grid-template-columns:minmax(320px,1fr);}
.mega .mega__l--p{display:grid;grid-template-columns:auto minmax(0,1fr);gap:13px;align-items:center;}
/* .mega__l span is display:block for the menu's description lines; the tile
   has to win that back or its glyph loses its centring. */
.mega .mega__l--p .pg{display:block;width:34px;height:34px;}
.mega__l--p > span:last-child{display:block;}
.mega__badge{
  font-style:normal;font-family:var(--f-m);font-size:9px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent-ink);border:1px solid var(--accent);
  padding:1px 5px;border-radius:2px;margin-left:7px;vertical-align:2px;
}
.mega__lane{display:block;padding:8px 12px 4px;color:var(--ink-4);}

/* the suite band inside the "What we do" menu */
.mega__suite{
  display:flex;flex-direction:column;gap:5px;margin-top:6px;padding:12px 12px 13px;
  border-radius:3px;background:var(--accent-wash);text-decoration:none;color:inherit;
  transition:background .14s ease;
}
.mega__suite:hover{background:var(--accent-wash-2);}
.mega__suite-k{color:var(--accent-ink);}
.mega__suite b{font-family:var(--f-d);font-size:14.5px;font-weight:600;letter-spacing:-.012em;}
.mega__suite-ps{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:3px;}
.mega__suite-ps > span{display:flex;align-items:center;gap:7px;font-family:var(--f-d);font-size:13.5px;font-weight:500;color:var(--ink-2);}
.mega__suite-ps .pg{display:block;}

/* Seven menu items plus the CTA need ~1240px; below 1081px the drawer takes
   over. In between, the two plain links step aside: Careers is still under
   Why Hanya, Contact is the Talk-to-an-architect button beside them, and both
   stay in the footer. #menu outranks the home page's inline .menu__b rules. */
@media (min-width:1081px) and (max-width:1300px){
  #menu > a.menu__b{display:none;}
  #menu .menu__b{padding:9px 10px;}
}
.dgrp__p a.dgrp__all{color:var(--accent-ink);font-weight:600;}

/* ============================================================
   PRODUCT WINDOW
   An illustrative interface that walks through one real workflow.
   The progress bar's own animationend advances the walkthrough, so
   pausing the animation (hover, focus, off-screen, the pause
   button) pauses the walkthrough with it and nothing drifts.
   ============================================================ */
.pw{
  margin:0;border:1px solid var(--rule);border-radius:var(--r);background:var(--surface);
  box-shadow:var(--shadow-l);overflow:hidden;display:flex;flex-direction:column;min-width:0;
}
.pw__bar{
  display:flex;align-items:center;gap:12px;padding:9px 10px 9px 13px;
  border-bottom:1px solid var(--rule);background:var(--surface-2);
}
.pw__wd{display:flex;gap:5px;flex:none;}
.pw__wd i{width:9px;height:9px;border-radius:50%;background:var(--rule-strong);display:block;}
.pw__url{
  flex:1;min-width:0;text-align:center;text-transform:none;letter-spacing:.03em;
  background:var(--surface-3);border:1px solid var(--rule);border-radius:3px;
  padding:4px 10px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pw__url b{color:var(--pa-ink);font-weight:600;}
/* Transport: previous, play/pause, next, replay — the same four controls,
   and the same glyphs, as the MetaLens360 showcase in the home hero. */
.pw__tp{display:flex;gap:4px;flex:none;}
.pw__b{
  flex:none;width:28px;height:28px;display:grid;place-items:center;cursor:pointer;position:relative;
  border:1px solid var(--rule-strong);border-radius:3px;background:transparent;color:var(--ink-2);
  transition:border-color .16s ease,color .16s ease;
}
/* 28px drawn, ~36px tappable; -4px meets the neighbour's reach across the 4px gap without overlap */
.pw__b::after{content:"";position:absolute;inset:-4px -2px;}
.pw__b:hover{border-color:var(--pa);color:var(--pa-ink);}
.pw__b svg{width:12px;height:12px;fill:currentColor;}
@media (max-width:380px){.pw__wd{display:none;}}
.pw__pp .i-play{display:none;}
.pw.is-paused .pw__pp .i-play{display:block;}
.pw.is-paused .pw__pp .i-pause{display:none;}

.pw__steps{position:relative;display:flex;border-bottom:1px solid var(--rule);overflow-x:auto;scrollbar-width:none;}
.pw__steps::-webkit-scrollbar{display:none;}
.pw__st{
  flex:1 0 auto;position:relative;display:flex;align-items:center;gap:8px;
  background:none;border:none;border-right:1px solid var(--rule-faint);cursor:pointer;
  padding:10px 14px;font-family:var(--f-d);font-size:13px;font-weight:500;color:var(--ink-3);
  white-space:nowrap;transition:color .16s ease,background .16s ease;
}
.pw__st:last-child{border-right:none;}
.pw__st:hover{color:var(--ink);}
.pw__st:focus-visible{outline-offset:-3px;}
.pw__st[aria-selected="true"]{color:var(--ink);background:var(--pa-wash);}
.pw__sn{font-family:var(--f-m);font-size:10px;color:var(--pa-ink);}
.pw__prog{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--pa);}
.pw__st[aria-selected="true"] .pw__prog{width:100%;}
/* --pw-dur is set per window: a walkthrough with more chapters moves faster. */
.pw.is-playing .pw__st[aria-selected="true"] .pw__prog{animation:pwProg var(--pw-dur,5.6s) linear forwards;}
.pw.is-held .pw__st[aria-selected="true"] .pw__prog{animation-play-state:paused;}
@keyframes pwProg{from{width:0;}to{width:100%;}}

.pw__body{display:grid;grid-template-columns:150px minmax(0,1fr);flex:1;min-height:284px;}
.pw__side{
  list-style:none;margin:0;padding:12px 8px;border-right:1px solid var(--rule);
  background:var(--surface-2);display:flex;flex-direction:column;gap:2px;
}
.pw__side li{
  font-family:var(--f-d);font-size:12.5px;color:var(--ink-3);padding:6px 9px;border-radius:3px;
  transition:background .25s ease,color .25s ease;
}
.pw__side li.on{background:var(--pa-wash);color:var(--pa-ink);font-weight:600;}
.pw__side li.pw__brand{
  display:flex;align-items:center;gap:8px;color:var(--ink);font-weight:600;
  padding:2px 6px 12px;margin-bottom:6px;border-bottom:1px solid var(--rule);border-radius:0;
}
@media (max-width:620px){.pw__body{grid-template-columns:1fr;min-height:300px;}.pw__side{display:none;}}
.pw__main{padding:16px 18px 18px;min-width:0;}
.pw__pane[hidden]{display:none;}
.pw__pane{animation:pwIn .38s cubic-bezier(.16,.84,.3,1) both;}
@keyframes pwIn{from{opacity:0;transform:translateY(5px);}to{opacity:1;transform:none;}}
.pw__k{display:block;color:var(--pa-ink);margin-bottom:6px;}
.pw__t{font-family:var(--f-d);font-size:15.5px;font-weight:600;letter-spacing:-.018em;line-height:1.32;margin:0 0 10px;}
.pw code{
  font-family:var(--f-m);font-size:.82em;color:var(--ink);background:var(--surface-3);
  border:1px solid var(--rule);border-radius:2px;padding:1px 4px;overflow-wrap:anywhere;
}
.pw__cap{padding:9px 14px;border-top:1px solid var(--rule);background:var(--surface-2);color:var(--ink-4);line-height:1.5;}

/* drawn-interface atoms */
.pw-row{
  display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;
  padding:9px 0;border-top:1px solid var(--rule-faint);font-size:13.5px;line-height:1.4;
}
.pw-row > span:first-child{color:var(--ink-2);flex:1 1 150px;min-width:0;}
.pw-row b{font-family:var(--f-d);font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;}
.pw-chip{
  --c:var(--ink-3);
  font-family:var(--f-m);font-size:9.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  white-space:nowrap;padding:3px 7px;border-radius:2px;line-height:1.2;
  color:var(--c);border:1px solid color-mix(in srgb,var(--c) 55%,transparent);
  background:color-mix(in srgb,var(--c) 9%,transparent);
}
.pw-chip--ok,.pw-chip--obs{--c:var(--live);}
.pw-chip--warn{--c:var(--amber);}
.pw-chip--bad{--c:var(--legacy);}
.pw-chip--der{--c:var(--accent);}
.pw-chip--mute{--c:var(--ink-3);background:transparent;}
.pw-chip--non{--c:var(--ink-3);background:transparent;border-style:dashed;}
.pw-note{margin-top:12px;font-size:12.5px;line-height:1.5;color:var(--ink-3);display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.pw-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:8px;}
.pw-kpi{border:1px solid var(--rule);border-radius:3px;padding:8px 10px;background:var(--surface-2);min-width:0;}
.pw-kpi span{display:block;font-family:var(--f-m);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);}
.pw-kpi b{display:block;margin-top:3px;font-family:var(--f-d);font-size:17px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.pw-tbl{border:1px solid var(--rule);border-radius:3px;overflow-x:auto;font-size:12.5px;font-variant-numeric:tabular-nums;}
.pw-tbl > div{display:grid;grid-template-columns:1.1fr repeat(4,minmax(50px,1fr));gap:6px;padding:8px 10px;border-top:1px solid var(--rule-faint);min-width:340px;}
.pw-tbl > div:first-child{border-top:none;}
.pw-tbl > div > *:not(:first-child){text-align:right;}
.pw-tbl__h{background:var(--surface-2);font-family:var(--f-m);font-size:9px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-4);}
.pw-tbl b{font-family:var(--f-d);font-weight:600;}
.pw-spark{width:80px;height:22px;flex:none;}
.pw-spark path{fill:none;stroke:var(--pa);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.pw-ans{border-left:2px solid var(--pa);padding:4px 0 4px 13px;}
.pw-ans p{font-size:14.5px;line-height:1.5;color:var(--ink);}
.pw-cite{display:inline-block;margin-top:8px;font-family:var(--f-m);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--pa-ink);}

@media (prefers-reduced-motion:reduce){
  .pw__pane{animation:none;}
  .pw.is-playing .pw__st[aria-selected="true"] .pw__prog{animation:none;width:100%;}
}

/* ============================================================
   TWO BUSINESSES
   ============================================================ */
.biz{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;
}
@media (max-width:820px){.biz{grid-template-columns:1fr;}}
.biz__c{
  display:flex;flex-direction:column;gap:10px;text-decoration:none;color:inherit;
  background:var(--surface);padding:clamp(20px,2.6vw,30px);transition:background .18s ease;
}
.biz__c:hover{background:var(--surface-2);}
.biz__c--suite{background:var(--accent-wash);}
.biz__c--suite:hover{background:var(--accent-wash-2);}
.biz__c > .mono-sm{color:var(--accent-ink);}
.biz__c h3{font-size:clamp(20px,2.4vw,26px);line-height:1.15;}
.biz__c p{color:var(--ink-2);font-size:15.5px;line-height:1.55;max-width:56ch;}
.biz__ps{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 16px;}
.biz__ps li{display:flex;align-items:center;gap:8px;font-family:var(--f-d);font-weight:600;font-size:14.5px;}
.biz__go{margin-top:auto;padding-top:6px;color:var(--accent-ink);font-family:var(--f-d);font-weight:600;font-size:14px;}
.biz__c:hover .biz__go{text-decoration:underline;text-underline-offset:3px;}

/* product bands inside the Solutions and Insights menus */
.mega__band{margin-top:6px;padding:10px 4px 4px;border-top:1px solid var(--rule);}
.mega__band > .mega__suite-k{display:block;padding:0 8px 6px;}
.mega__band-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;}
.mega__band-g--1{grid-template-columns:minmax(0,1fr);}
@media (max-width:1180px){.mega__band-g{grid-template-columns:minmax(0,1fr);}}
.mega__bl{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;
  text-decoration:none;color:inherit;padding:9px 8px;border-radius:3px;transition:background .14s ease;
}
.mega__bl:hover{background:var(--accent-wash);}
.mega__bl .pg{display:block;margin-top:1px;}
.mega__bl b{display:block;font-family:var(--f-d);font-size:13.5px;font-weight:600;letter-spacing:-.012em;line-height:1.3;}
.mega__bl span span{display:block;margin-top:2px;font-size:13px;color:var(--pa-ink);}

/* ============================================================
   PRODUCT SOLUTIONS under the consulting accordion (home page)
   ============================================================ */
.ps{margin-top:clamp(36px,4.4vw,56px);padding-top:clamp(26px,3.2vw,38px);border-top:1px solid var(--rule-strong);}
.ps__h{
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(16px,3vw,44px);align-items:end;
  margin-bottom:clamp(20px,2.6vw,30px);
}
@media (max-width:900px){.ps__h{grid-template-columns:1fr;align-items:start;}}
.ps__h .mono-sm{display:block;color:var(--accent-ink);margin-bottom:10px;}
.ps__h h3{font-size:clamp(22px,2.8vw,30px);line-height:1.14;}
.ps__h p{color:var(--ink-2);font-size:16px;line-height:1.56;}
.ps__g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;}
@media (max-width:1000px){.ps__g{grid-template-columns:1fr;}}
.psc{background:var(--surface);padding:clamp(20px,2.4vw,26px);display:flex;flex-direction:column;gap:16px;border-top:3px solid var(--pa);scroll-margin-top:96px;}
.psc__hd{display:flex;align-items:center;gap:12px;}
.psc__hd .mono-sm{display:block;color:var(--pa-ink);}
.psc__hd h4{font-family:var(--f-d);font-size:18px;font-weight:600;letter-spacing:-.02em;line-height:1.22;margin-top:3px;}
.psc__dl{margin:0;display:grid;gap:13px;}
.psc__dl dt{font-family:var(--f-m);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-4);margin-bottom:4px;}
.psc__dl dd{margin:0;color:var(--ink-2);font-size:15px;line-height:1.55;}
.psc__caps{list-style:none;margin:0;padding:12px 0 0;border-top:1px solid var(--rule-faint);display:flex;flex-direction:column;gap:7px;}
.psc__caps li{display:flex;gap:9px;align-items:baseline;font-family:var(--f-d);font-size:14.5px;font-weight:500;color:var(--ink);}
.psc__caps li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--pa);flex:none;transform:translateY(-1px);}
.psc__o{background:var(--pa-wash);border-radius:3px;padding:12px 14px;}
.psc__o .mono-sm{display:block;color:var(--pa-ink);margin-bottom:5px;}
.psc__o p{color:var(--ink);font-size:15px;line-height:1.52;}
.psc__cta{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;}

/* ---------- Insights: product resources ---------- */
.rs{margin-top:clamp(30px,3.6vw,46px);}
.rs__h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 20px;padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--rule);}
.rs__h .mono-sm{color:var(--accent-ink);}
.rs__h p{color:var(--ink-3);font-size:14.5px;}
.ic.ic--p{border-top:3px solid var(--pa);}
.ic--p .ic__k{color:var(--pa-ink);}
.ic--p .ic__go{color:var(--pa-ink);}

/* ============================================================
   SUITE PITCH under the expertise grid (home page)
   ============================================================ */
.xs{
  margin-top:clamp(24px,3vw,36px);border:1px solid var(--accent);border-radius:var(--r);
  background:var(--accent-wash);padding:clamp(20px,2.8vw,34px);
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(20px,3vw,44px);align-items:center;
}
@media (max-width:900px){.xs{grid-template-columns:1fr;}}
.xs__t > .mono-sm{display:block;color:var(--accent-ink);margin-bottom:10px;}
.xs__t h3{font-size:clamp(21px,2.6vw,28px);line-height:1.16;margin-bottom:10px;}
.xs__t p{color:var(--ink-2);font-size:16px;line-height:1.56;max-width:56ch;}
.xs__cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;}
.xs__ps{list-style:none;margin:0;padding:0;display:grid;gap:8px;}
.xs__p{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;
  text-decoration:none;color:inherit;background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--r);padding:13px 16px;transition:border-color .18s ease,transform .18s ease;
}
.xs__p:hover{border-color:var(--pa);transform:translateY(-1px);}
.xs__p b{display:block;font-family:var(--f-d);font-size:16px;font-weight:600;letter-spacing:-.018em;}
.xs__p span span{display:block;margin-top:2px;font-size:14px;line-height:1.4;color:var(--ink-3);}
.xs__p .arw{color:var(--pa-ink);transition:transform .2s ease;}
.xs__p:hover .arw{transform:translateX(4px);}

/* ============================================================
   PRODUCT INFO BLOCK — shared by the home explorer and the
   suite page chapters
   ============================================================ */
.pi{min-width:0;}
.pi__lane{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;color:var(--pa-ink);}
.pi__badge{
  font-family:var(--f-m);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--pa-ink);border:1px solid var(--pa);border-radius:2px;padding:2px 7px;
}
.pi h3{font-size:clamp(22px,2.6vw,30px);line-height:1.12;margin:14px 0 10px;}
.pi__one{color:var(--ink-2);font-size:16px;line-height:1.56;max-width:52ch;}
.pi__dl{margin:18px 0 0;display:grid;gap:13px;}
.pi__dl dt{font-family:var(--f-m);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-4);margin-bottom:3px;}
.pi__dl dd{margin:0;color:var(--ink-2);font-size:15px;line-height:1.5;}
.pi__f{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-wrap:wrap;gap:6px;}
.pi__f li{
  font-family:var(--f-d);font-size:13px;font-weight:500;color:var(--ink-2);
  border:1px solid var(--rule-strong);border-radius:3px;padding:5px 10px;background:var(--surface);
}
.pi__cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.lnk{
  display:inline-flex;align-items:center;gap:7px;color:var(--accent-ink);text-decoration:none;
  font-family:var(--f-d);font-size:14px;font-weight:600;
}
.lnk:hover{text-decoration:underline;text-underline-offset:3px;}

/* ============================================================
   SUITE EXPLORER (home page)
   ============================================================ */
.sx{margin-top:clamp(26px,3.2vw,40px);}
.sx__tabs{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule);border-radius:var(--r) var(--r) 0 0;overflow:hidden;
}
@media (max-width:760px){
  .sx__tabs{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(212px,1fr);overflow-x:auto;scrollbar-width:none;}
  .sx__tabs::-webkit-scrollbar{display:none;}
}
.sx__t{
  position:relative;display:flex;align-items:center;gap:12px;text-align:left;cursor:pointer;
  background:var(--surface);border:none;padding:15px 18px;transition:background .16s ease;
}
.sx__t:hover{background:var(--surface-2);}
.sx__t:focus-visible{outline-offset:-3px;}
.sx__t b{display:block;font-family:var(--f-d);font-size:16px;font-weight:600;letter-spacing:-.018em;color:var(--ink);}
.sx__t small{display:block;margin-top:3px;font-family:var(--f-m);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);}
.sx__t .pg{opacity:.55;transition:opacity .16s ease;}
.sx__t::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--pa);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.16,.84,.3,1);}
.sx__t[aria-selected="true"]{background:var(--surface-2);}
.sx__t[aria-selected="true"] .pg,.sx__t:hover .pg{opacity:1;}
.sx__t[aria-selected="true"]::after{transform:scaleX(1);}
.sx__p{
  border:1px solid var(--rule);border-top:none;border-radius:0 0 var(--r) var(--r);
  background:var(--surface-2);padding:clamp(18px,2.6vw,32px);
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(20px,3vw,44px);align-items:start;
}
.sx__p[hidden]{display:none;}
@media (max-width:980px){.sx__p{grid-template-columns:1fr;}}
.sx__ft{margin-top:18px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;color:var(--ink-3);}

/* ============================================================
   PRODUCT AND SUITE PAGES
   ============================================================ */
.crumb{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-wrap:wrap;gap:6px;color:var(--ink-3);}
.crumb li{display:flex;align-items:center;gap:6px;}
.crumb li + li::before{content:"/";color:var(--ink-4);}
.crumb a{color:var(--ink-2);text-decoration:none;}
.crumb a:hover{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px;}

.ph{position:relative;padding:clamp(30px,4.4vw,60px) 0 clamp(44px,5.4vw,76px);overflow:hidden;}
.ph::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(to right,var(--grid-line) 1px,transparent 1px),
                   linear-gradient(to bottom,var(--grid-line) 1px,transparent 1px);
  background-size:68px 68px;
  -webkit-mask-image:radial-gradient(120% 90% at 78% -10%,#000 0%,transparent 72%);
  mask-image:radial-gradient(120% 90% at 78% -10%,#000 0%,transparent 72%);
}
.ph__in{position:relative;display:grid;gap:clamp(30px,4vw,60px);}
@media (min-width:1060px){.ph__in{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);align-items:center;}}
.ph__lane{display:flex;align-items:center;flex-wrap:wrap;gap:10px;color:var(--pa-ink,var(--accent-ink));}
.ph h1{
  display:flex;align-items:center;gap:clamp(12px,1.6vw,18px);margin-top:16px;
  font-size:clamp(40px,6vw,74px);letter-spacing:-.042em;line-height:1;
}
.ph__tag{
  font-family:var(--f-s);font-style:italic;font-weight:400;letter-spacing:-.01em;
  font-size:clamp(23px,2.9vw,34px);line-height:1.16;color:var(--pa-ink,var(--accent));margin-top:16px;max-width:24ch;
}
.ph__lede{margin-top:16px;color:var(--ink-2);font-size:clamp(16.5px,1.9vw,19px);line-height:1.58;max-width:56ch;}
.ph__cta{margin-top:26px;display:flex;flex-wrap:wrap;gap:10px;}
.ph__host{margin-top:16px;color:var(--ink-4);}
.ph__host a{color:var(--ink-2);}

/* suite hero: the three products as a way in */
.ph__ps{list-style:none;margin:0;padding:0;display:grid;gap:10px;}
.ph__pl{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;
  text-decoration:none;color:inherit;border:1px solid var(--rule);border-radius:var(--r);
  background:var(--surface);padding:18px 20px;box-shadow:var(--shadow-s);
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.ph__pl:hover{border-color:var(--pa);transform:translateY(-1px);box-shadow:var(--shadow);}
.ph__pl b{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;font-family:var(--f-d);font-size:19px;font-weight:600;letter-spacing:-.02em;}
.ph__pl span.mono-sm{display:block;margin-top:3px;color:var(--pa-ink);}
.ph__pl p{margin-top:6px;color:var(--ink-2);font-size:14.5px;line-height:1.45;}
.ph__pl .arw{color:var(--pa-ink);transition:transform .2s ease;}
.ph__pl:hover .arw{transform:translateX(4px);}

/* answers to the five questions */
.gl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;}
@media (max-width:900px){.gl{grid-template-columns:1fr;}}
.gl__c{background:var(--surface);padding:clamp(20px,2.4vw,28px);}
.gl__c > .mono-sm{display:block;color:var(--pa-ink,var(--accent-ink));margin-bottom:12px;}
.gl__c p{color:var(--ink-2);font-size:16px;line-height:1.56;}
.gl__c ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;}
.gl__c li{padding:9px 0;border-top:1px solid var(--rule-faint);color:var(--ink-2);font-size:15px;line-height:1.48;}
.gl__c li:first-child{border-top:none;padding-top:0;}

/* features, grouped */
.fg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;}
@media (max-width:820px){.fg{grid-template-columns:1fr;}}
.fg__g{background:var(--surface);padding:clamp(20px,2.4vw,28px);display:flex;flex-direction:column;gap:16px;}
.fg__g > .mono-sm{color:var(--pa-ink);display:flex;align-items:center;gap:9px;}
.fg__g > .mono-sm::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--pa);}
.fg__i h3{font-size:17.5px;font-weight:600;letter-spacing:-.02em;line-height:1.25;}
.fg__i p{margin-top:6px;color:var(--ink-2);font-size:15.5px;line-height:1.56;}

/* workflows */
.wf{display:grid;gap:clamp(26px,3vw,40px);}
.wf__s h3{font-size:clamp(18px,2.2vw,22px);margin-bottom:18px;}
.wf__ol{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:clamp(14px,2vw,24px);counter-reset:wf;}
.wf__ol li{position:relative;padding-top:28px;color:var(--ink-2);font-size:15.5px;line-height:1.5;counter-increment:wf;}
.wf__ol li::before{
  content:counter(wf,decimal-leading-zero);position:absolute;top:0;left:0;
  font-family:var(--f-m);font-size:10px;letter-spacing:.12em;color:var(--pa-ink);
  background:var(--ground);padding-right:9px;z-index:1;
}
.wf__ol li::after{content:"";position:absolute;top:6px;left:0;right:calc(-1 * clamp(14px,2vw,24px));height:1px;background:var(--rule-strong);}
.wf__ol li:last-child::after{right:0;}
@media (max-width:820px){
  .wf__ol{grid-auto-flow:row;gap:0;}
  .wf__ol li{padding:0 0 18px 40px;}
  .wf__ol li::before{top:2px;}
  .wf__ol li::after{top:22px;left:9px;right:auto;width:1px;bottom:4px;height:auto;}
  .wf__ol li:last-child::after{display:none;}
}

/* access */
.acc{
  border:1px solid var(--pa);border-radius:var(--r);background:var(--pa-wash);
  padding:clamp(22px,2.8vw,34px);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:clamp(18px,3vw,40px);align-items:center;
}
@media (max-width:860px){.acc{grid-template-columns:1fr;}}
.acc h2{font-size:clamp(22px,2.8vw,30px);line-height:1.15;margin-bottom:10px;}
.acc p{color:var(--ink-2);font-size:16px;line-height:1.56;max-width:56ch;}
.acc__a{display:flex;flex-direction:column;align-items:flex-start;gap:12px;}
@media (min-width:861px){.acc__a{align-items:flex-end;}}
.acc__b{display:flex;flex-wrap:wrap;gap:10px;}
@media (min-width:861px){.acc__b{justify-content:flex-end;}}

/* more from the suite */
.mr{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;}
.mr__c{
  display:flex;flex-direction:column;gap:10px;text-decoration:none;color:inherit;
  border:1px solid var(--rule);border-radius:var(--r);background:var(--surface);padding:20px 22px;
  transition:border-color .18s ease,transform .18s ease;
}
.mr__c:hover{border-color:var(--pa,var(--accent));transform:translateY(-1px);}
.mr__h{display:flex;align-items:center;gap:12px;}
.mr__h b{font-family:var(--f-d);font-size:18px;font-weight:600;letter-spacing:-.02em;display:block;}
.mr__h .mono-sm{display:block;color:var(--pa-ink,var(--accent-ink));margin-top:2px;}
.mr__c p{color:var(--ink-2);font-size:15px;line-height:1.5;}
.mr__go{margin-top:auto;color:var(--pa-ink,var(--accent-ink));font-family:var(--f-d);font-weight:600;font-size:14px;}

/* suite chapters */
.ch{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,60px);align-items:center;}
.ch--flip > .pi{order:2;}
@media (max-width:980px){.ch{grid-template-columns:1fr;}.ch--flip > .pi{order:0;}}

/* at a glance */
.tg{overflow-x:auto;border:1px solid var(--rule);border-radius:var(--r);background:var(--surface);}
.tg table{width:100%;border-collapse:collapse;min-width:760px;font-size:15px;}
.tg th,.tg td{text-align:left;vertical-align:top;padding:14px 16px;border-top:1px solid var(--rule);line-height:1.5;}
.tg thead th{border-top:none;background:var(--surface-2);font-family:var(--f-m);font-size:10px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-4);}
.tg tbody th{font-family:var(--f-d);font-weight:600;font-size:16px;white-space:nowrap;}
.tg tbody th span{display:flex;align-items:center;gap:10px;}
.tg td{color:var(--ink-2);}
.tg a{color:var(--pa-ink);font-weight:600;text-decoration:none;}
.tg a:hover{text-decoration:underline;text-underline-offset:3px;}

/* what the suite shares */
.sh{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,30px);}
@media (max-width:860px){.sh{grid-template-columns:1fr;}}
.sh__i{border-top:2px solid var(--accent);padding-top:16px;}
.sh__i h3{font-size:18px;font-weight:600;letter-spacing:-.02em;margin-bottom:8px;}
.sh__i p{color:var(--ink-2);font-size:15.5px;line-height:1.56;}
.sh__ps{display:flex;gap:6px;margin-top:12px;}

.sec--rule{border-top:1px solid var(--rule);}

/* product name as a section heading on the suite page */
.pi__name{display:flex;align-items:center;gap:14px;font-size:clamp(30px,3.8vw,44px);letter-spacing:-.036em;line-height:1;margin-top:14px;}
.pi__hl{
  font-family:var(--f-s);font-style:italic;font-weight:400;letter-spacing:-.01em;
  font-size:clamp(20px,2.3vw,26px);line-height:1.2;color:var(--pa-ink);margin:12px 0 10px;
}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;}

/* ============================================================
   HOME HERO SPOTLIGHT
   The hero card holds two products: MetaLens360 (default, with
   its own showcase untouched) and Property360. The banner strip
   becomes the tab bar and takes the active product's colour.
   Selectors start at .mlc[data-spot] so they outrank the page's
   inline .mlc rules, which load after this file.
   ============================================================ */
.mlc[data-spot]{transition:border-color .3s ease;}
.mlc[data-spot] .mlc__b{padding:0;align-items:stretch;transition:background .3s ease,color .3s ease;}
.mlc[data-spot].p-p3{border-color:var(--pa);}
.mlc[data-spot].p-p3 .mlc__b{background:var(--pa);color:var(--pa-on);}
.mlc__tab{
  flex:1;min-width:0;position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  background:none;border:none;color:inherit;cursor:pointer;text-align:left;
  font:inherit;letter-spacing:inherit;text-transform:inherit;
  padding:10px 18px 11px;opacity:.6;transition:opacity .2s ease;
}
.mlc__tab:hover{opacity:.85;}
.mlc__tab[aria-selected="true"]{opacity:1;}
.mlc__tab + .mlc__tab{border-left:1px solid color-mix(in srgb,currentColor 24%,transparent);}
/* The selected tab is the plain strip; the other one sits in shade. No
   underline: on the coloured strip it read as a stray rule, not a state. */
.mlc__tab{transition:opacity .2s ease,background .2s ease;}
.mlc__tab:not([aria-selected="true"]){background:rgba(0,0,0,.16);}
.mlc__tab:focus-visible{outline:2px solid currentColor;outline-offset:-4px;}
.mlc__tab .mlc__bt,.mlc__bt2{font-size:10.5px;}
.mlc__tab:not([aria-selected="true"]) .mlc__bt{animation:none;}
.mlc__tn{font-family:var(--f-d);font-size:15px;font-weight:600;letter-spacing:-.012em;text-transform:none;line-height:1.1;}
/* An unread signal on the second product until it has been looked at. */
.mlc__td{position:absolute;top:11px;right:14px;width:7px;height:7px;border-radius:50%;background:var(--live);animation:annpulse 2.4s ease-in-out infinite;}
.mlc__tab[aria-selected="true"] .mlc__td,.mlc[data-seen] .mlc__td{display:none;}
@media (prefers-reduced-motion:reduce){.mlc__td{animation:none;}}
.sp__p[hidden]{display:none;}
.sp__n{display:flex;align-items:center;gap:12px;}
.mlc__a.sp__a{background:var(--pa);color:var(--pa-on);}

/* compact product window: no sidebar, for tight spaces */
.pw--c{margin-top:16px;box-shadow:none;}
.pw--c .pw__body{grid-template-columns:1fr;min-height:228px;}
.pw--c .pw__side{display:none;}
.pw--c .pw__cap{display:none;}

/* ============================================================
   HOME — PROPERTY360 FEATURED SECTION
   ============================================================ */
.mega .mega__badge--p{color:var(--pa-ink);border-color:var(--pa);}

.cy{border:1px solid var(--rule);border-radius:var(--r);background:var(--surface);padding:clamp(20px,2.6vw,32px);box-shadow:var(--shadow);}
.cy__hd{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin-bottom:24px;}
.cy__hd > .mono-sm{color:var(--pa-ink);}
.cy__by{display:flex;align-items:center;gap:8px;font-family:var(--f-d);font-size:14px;font-weight:600;}
.cy__ol{list-style:none;margin:0;padding:0;position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,1.8vw,24px);}
.cy__s{position:relative;padding-top:34px;}
.cy__s::before{
  content:"";position:absolute;top:10px;left:0;right:calc(-1 * clamp(12px,1.8vw,24px));height:2px;
  background:linear-gradient(to right,var(--pa),color-mix(in srgb,var(--pa) 30%,transparent));
}
.cy__s:last-child::before{right:0;}
.cy__n{position:absolute;top:0;left:0;z-index:1;background:var(--pa);color:var(--pa-on);padding:5px 8px;border-radius:2px;line-height:1;}
.cy__s h3{font-size:17.5px;font-weight:600;letter-spacing:-.02em;margin-bottom:7px;transition:color .2s ease;}
.cy__s:hover h3{color:var(--pa-ink);}
.cy__s p{color:var(--ink-2);font-size:14.5px;line-height:1.52;}
/* the month travelling along the track */
.cy__ol::after{
  content:"";position:absolute;top:7px;left:0;width:8px;height:8px;border-radius:50%;
  background:var(--pa);box-shadow:0 0 0 4px var(--pa-wash),0 0 14px var(--pa);
  animation:cyRun 7s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes cyRun{0%{left:0;opacity:0;}6%{opacity:1;}90%{opacity:1;}100%{left:calc(100% - 8px);opacity:0;}}
.cy__loop{margin-top:22px;padding-top:15px;border-top:1px dashed var(--rule-strong);color:var(--ink-3);display:flex;align-items:center;gap:10px;line-height:1.5;}
.cy__loop span{color:var(--pa-ink);font-size:17px;letter-spacing:0;}
@media (max-width:900px){
  .cy__ol{grid-template-columns:1fr;gap:0;}
  .cy__ol::after{display:none;}
  .cy__s{padding:2px 0 20px 52px;}
  .cy__s:last-child{padding-bottom:0;}
  .cy__s::before{top:24px;left:15px;right:auto;width:2px;height:calc(100% - 22px);background:color-mix(in srgb,var(--pa) 45%,transparent);}
  .cy__s:last-child::before{display:none;}
}
@media (prefers-reduced-motion:reduce){.cy__ol::after{display:none;}}

.rl{margin-top:clamp(24px,3vw,36px);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(20px,3vw,48px);align-items:start;}
@media (max-width:900px){.rl{grid-template-columns:1fr;}}
.rl__h h3{font-size:clamp(21px,2.6vw,28px);line-height:1.15;margin-bottom:10px;}
.rl__h p{color:var(--ink-2);font-size:16px;line-height:1.56;}
.rl__g{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;}
@media (max-width:560px){.rl__g{grid-template-columns:1fr;}}
.rl__g li{background:var(--surface);padding:16px 18px;}
.rl__g b{display:flex;align-items:center;gap:9px;font-family:var(--f-d);font-size:16px;font-weight:600;letter-spacing:-.018em;}
.rl__g b::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--pa);flex:none;}
.rl__g p{margin-top:6px;color:var(--ink-2);font-size:14.5px;line-height:1.5;}
#property360 .acc{margin-top:clamp(24px,3vw,36px);}

/* chat, for the bot chapter */
.pw-chat{display:flex;flex-direction:column;gap:7px;}
.pw-chat p{max-width:86%;font-size:13.5px;line-height:1.42;padding:8px 11px;border-radius:12px;}
.pw-chat__q{align-self:flex-end;background:var(--pa);color:var(--pa-on);border-bottom-right-radius:3px;}
.pw-chat__a{align-self:flex-start;background:var(--surface-3);color:var(--ink);border:1px solid var(--rule);border-bottom-left-radius:3px;}
/* the hero's compact window holds its height while chapters of different length cycle */
.pw--c .pw__main{min-height:292px;}
.fg__g:last-child:nth-child(odd){grid-column:1 / -1;}

/* home: Property360 module map */
.md{margin-top:clamp(22px,2.8vw,32px);}
.md__h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 18px;margin-bottom:12px;}
.md__h .mono-sm{color:var(--pa-ink);}
.md__g{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;}
@media (max-width:1100px){.md__g{grid-template-columns:repeat(4,minmax(0,1fr));}}
@media (max-width:700px){.md__g{grid-template-columns:repeat(2,minmax(0,1fr));}}
.md__g li{background:var(--surface);padding:13px 14px;display:flex;flex-direction:column;gap:5px;transition:background .18s ease;}
.md__g li:hover{background:var(--pa-wash);}
.md__g .mono-sm{color:var(--pa-ink);}
.md__g b{font-family:var(--f-d);font-size:14.5px;font-weight:600;letter-spacing:-.014em;line-height:1.25;}