/* Vanilla Cloud Plus add-on pages: Sentra, Dimensions, CallCabinet, plus shared add-on cards.
   Builds on site.css tokens. Light sections use navy text, dark sections use --t-* text. */

/* add-on hero badge */
.ao-badge{display:inline-flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--line-d2);font-size:13.5px;font-weight:600;color:var(--t-hi);width:max-content;max-width:100%}
.ao-badge i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(146,214,60,.16);color:var(--spark)}
.ao-badge i svg{width:15px;height:15px}
.ao-hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,72px);align-items:center}
.ao-hero .in{max-width:640px}
@media (max-width:960px){.ao-hero .wrap{grid-template-columns:1fr}}

/* reactive vs proactive comparison */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,24px)}
.vs-c{display:grid;gap:16px;align-content:start;padding:clamp(22px,2.6vw,32px);border-radius:26px;background:#fff;border:1px solid var(--line-l);box-shadow:var(--shadow-l);color:var(--d-hi)}
.vs-c.good{background:linear-gradient(180deg,var(--ink-3),var(--ink-2));border-color:rgba(146,214,60,.35);color:var(--t-hi)}
.vs-k{font:700 12px var(--f-display);letter-spacing:.16em;text-transform:uppercase;color:var(--d-lo)}
.vs-c.good .vs-k{color:var(--spark)}
.vs-c h3{font-size:var(--fs-xl)}
.vs-c p{color:var(--d-mid);font-size:15.5px;line-height:1.6}
.vs-c.good p{color:var(--t-mid)}
.vs-c ul{display:grid;gap:10px}
.vs-c li{display:flex;gap:10px;font-size:15px;line-height:1.5;font-weight:600}
.vs-c li svg{flex:none;width:20px;height:20px;padding:3px;border-radius:50%;margin-top:1px}
.vs-c.bad li svg{background:rgba(242,118,139,.14);color:#C9445B}
.vs-c.good li svg{background:rgba(146,214,60,.16);color:var(--spark)}
.vs-meter{display:grid;gap:8px;padding:14px 16px;border-radius:16px;background:var(--pearl);border:1px solid var(--line-l)}
.vs-c.good .vs-meter{background:rgba(255,255,255,.04);border-color:var(--line-d)}
.vs-meter .row{display:flex;justify-content:space-between;font-size:13px;font-weight:600;color:var(--d-mid)}
.vs-c.good .vs-meter .row{color:var(--t-mid)}
.vs-meter .bar{position:relative;height:10px;border-radius:999px;background:rgba(11,20,48,.08);overflow:hidden}
.vs-c.good .vs-meter .bar{background:rgba(255,255,255,.08)}
.vs-meter .bar i{position:absolute;inset:0 auto 0 0;border-radius:inherit}
.vs-c.bad .vs-meter .bar i{width:100%;background:linear-gradient(90deg,#F4B740,#F2768B)}
.vs-c.good .vs-meter .bar i{width:6%;background:var(--grad-btn)}
.vs-meter small{font-size:12.5px;color:var(--d-lo)}
.vs-c.good .vs-meter small{color:var(--t-lo)}
@media (max-width:860px){.vs{grid-template-columns:1fr}}

/* feature tiles */
.ft{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ft.c2{grid-template-columns:repeat(2,1fr)}
.ft.c4{grid-template-columns:repeat(4,1fr)}
.ft>div{display:grid;gap:10px;align-content:start;padding:22px;border-radius:22px;background:#fff;border:1px solid var(--line-l);color:var(--d-hi)}
.dark .ft>div,.deep .ft>div{background:rgba(255,255,255,.04);border-color:var(--line-d);color:var(--t-hi)}
.ft b{font-family:var(--f-display);font-size:17px;line-height:1.3}
.ft p{font-size:14.5px;line-height:1.55;color:var(--d-mid)}
.dark .ft p,.deep .ft p{color:var(--t-mid)}
.ft .ic-sq{margin-bottom:4px}
@media (max-width:960px){.ft,.ft.c4{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ft,.ft.c2,.ft.c4{grid-template-columns:1fr}}

/* two operating modes */
.modes{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,24px)}
.mode{padding:clamp(22px,2.6vw,30px);border-radius:24px;background:rgba(255,255,255,.04);border:1px solid var(--line-d)}
.mode.on{border-color:rgba(146,214,60,.4);background:rgba(146,214,60,.06)}
.mode h3{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:var(--fs-xl);margin-bottom:6px}
.mode h3 span{font:700 11.5px var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--spark)}
.mode>p{color:var(--t-mid);margin-bottom:16px}
.mode ul{display:grid;gap:10px}
.mode li{display:flex;gap:10px;font-size:15px;font-weight:600}
.mode li svg{flex:none;width:18px;height:18px;color:var(--spark);margin-top:2px}
@media (max-width:860px){.modes{grid-template-columns:1fr}}

/* Sentra alert console (illustrative) */
.sx{display:grid;gap:10px}
.sx-alert{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;padding:14px;border-radius:16px;background:rgba(242,118,139,.12);border:1px solid rgba(242,118,139,.4)}
.sx-alert i{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#F2768B;color:#fff}
.sx-alert i svg{width:18px;height:18px}
.sx-alert b{display:block;font-size:14px}
.sx-alert small{font-size:12.5px;color:var(--t-mid)}
.sx-map{position:relative;aspect-ratio:2/1;border-radius:16px;background:radial-gradient(circle at 50% 50%,rgba(60,99,184,.25),transparent 70%),rgba(5,9,20,.5);border:1px solid var(--line-d);overflow:hidden}
.sx-map svg{position:absolute;inset:0;width:100%;height:100%}
.sx-map .land{fill:rgba(169,194,238,.16)}
.sx-map .pt{fill:var(--lime)}
.sx-map .pt.warn{fill:#F4B740}
.sx-map .pt.hot{fill:#F2768B}
.sx-map .ring{fill:none;stroke:#F2768B;stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:sxPing 2.2s ease-out infinite}
@keyframes sxPing{0%{transform:scale(.4);opacity:1}100%{transform:scale(2.6);opacity:0}}
.sx-legend{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:12px;color:var(--t-mid)}
.sx-legend span{display:inline-flex;align-items:center;gap:6px}
.sx-legend span::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c)}
.sx-acts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sx-acts span{padding:10px;border-radius:12px;text-align:center;font-size:12.5px;font-weight:700;background:rgba(255,255,255,.05);border:1px solid var(--line-d)}
.sx-acts span.k{background:rgba(242,118,139,.16);border-color:rgba(242,118,139,.4);color:#FFC3CD}
@media (prefers-reduced-motion:reduce){.sx-map .ring{animation:none}}

/* hours heat strip */
.hrs{display:grid;grid-template-columns:repeat(24,1fr);gap:3px}
.hrs i{height:26px;border-radius:4px;background:rgba(146,214,60,var(--a,.1))}
.hrs i.hot{background:#F2768B}
.hrs-l{display:flex;justify-content:space-between;margin-top:6px;font-size:11.5px;color:var(--t-lo)}

/* notification channels */
.chan{display:flex;flex-wrap:wrap;gap:10px}
.chan span{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:#fff;border:1px solid var(--line-l);font-weight:600;font-size:14px;color:var(--d-hi)}
.chan svg{width:16px;height:16px;color:var(--emerald)}

/* Dimensions wallboard mock (illustrative) */
.wbx{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.wbx div{display:grid;gap:4px;padding:12px;border-radius:12px;background:#4FB3E8;color:#06233A}
.wbx div:nth-child(4n+2){background:#7FD0F5}
.wbx div.dk{background:#1E5A8A;color:#fff}
.wbx div.al{background:#F2768B;color:#fff}
.wbx small{font-size:11px;font-weight:700;line-height:1.2}
.wbx b{font:700 clamp(20px,2.4vw,30px)/1 var(--f-display);font-variant-numeric:tabular-nums}
.wbx-cap{display:flex;justify-content:space-between;margin-top:10px;font-size:12px;color:var(--t-lo)}
@media (max-width:480px){.wbx{grid-template-columns:repeat(2,1fr)}}

/* report categories cloud */
.cats{display:flex;flex-wrap:wrap;gap:8px}
.cats span{padding:8px 14px;border-radius:999px;background:#fff;border:1px solid var(--line-l);font-size:14px;font-weight:600;color:var(--d-hi)}

/* tile types list */
.tt{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;border-radius:22px;overflow:hidden;background:var(--line-l);border:1px solid var(--line-l)}
.tt div{padding:18px 20px;background:#fff}
.tt b{display:block;font-family:var(--f-display);font-size:16px;color:var(--d-hi)}
.tt span{font-size:14px;color:var(--d-mid)}
@media (max-width:760px){.tt{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.tt{grid-template-columns:1fr}}

/* before / after (standard 3CX vs add-on) */
.ba3{display:grid;grid-template-columns:1fr 1fr;border-radius:24px;overflow:hidden;border:1px solid var(--line-l);background:#fff}
.ba3>div{padding:clamp(20px,2.4vw,28px)}
.ba3>div+div{border-left:1px solid var(--line-l);background:linear-gradient(180deg,#F4FAEC,#fff)}
.ba3 h3{font-size:var(--fs-lg);margin-bottom:12px;color:var(--d-hi)}
.ba3 .k{display:block;margin-bottom:6px;font:700 11.5px var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--d-lo)}
.ba3>div+div .k{color:var(--emerald)}
.ba3 ul{display:grid;gap:9px}
.ba3 li{display:flex;gap:10px;font-size:15px;line-height:1.5;color:var(--d-mid)}
.ba3 li svg{flex:none;width:18px;height:18px;margin-top:2px;color:var(--d-lo)}
.ba3>div+div li{color:var(--d-hi);font-weight:600}
.ba3>div+div li svg{color:var(--emerald)}
@media (max-width:760px){.ba3{grid-template-columns:1fr}.ba3>div+div{border-left:0;border-top:1px solid var(--line-l)}}

/* licence matrix */
.mx-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:22px;border:1px solid var(--line-l);background:#fff}
.mx{width:100%;min-width:620px;border-collapse:collapse;font-size:14.5px;color:var(--d-hi)}
.mx th,.mx td{padding:12px 16px;border-bottom:1px solid var(--line-l);text-align:left}
.mx thead th{position:sticky;top:0;background:var(--ink-2);color:var(--t-hi);font:700 13.5px var(--f-display);vertical-align:bottom}
.mx thead th small{display:block;font-weight:500;color:var(--t-mid);font-size:12px}
.mx td:not(:first-child),.mx th:not(:first-child){text-align:center;width:17%}
.mx tbody tr:nth-child(even){background:var(--pearl)}
.mx tbody tr.grp td{background:#EDF2FB;font:700 12px var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--d-mid)}
.mx .y svg{width:18px;height:18px;color:var(--emerald);margin:0 auto}
.mx .n{color:#B5BED3}
.mx tbody tr:last-child td{border-bottom:0}

/* plan cards (CallCabinet tiers) */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.tier{display:grid;gap:12px;align-content:start;padding:24px;border-radius:24px;background:#fff;border:1px solid var(--line-l);box-shadow:var(--shadow-l);color:var(--d-hi)}
.tier.hl{background:linear-gradient(180deg,var(--ink-3),var(--ink-2));color:var(--t-hi);border-color:rgba(146,214,60,.35)}
.tier .k{font:700 11.5px var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--emerald)}
.tier.hl .k{color:var(--spark)}
.tier h3{font-size:var(--fs-xl)}
.tier p{font-size:14.5px;color:var(--d-mid)}
.tier.hl p{color:var(--t-mid)}
.tier ul{display:grid;gap:8px;margin-top:4px}
.tier li{display:flex;gap:9px;font-size:14px;font-weight:600;line-height:1.45}
.tier li svg{flex:none;width:17px;height:17px;margin-top:2px;color:var(--emerald)}
.tier.hl li svg{color:var(--spark)}
@media (max-width:960px){.tiers{grid-template-columns:1fr}}

/* partner/vendor attribution line */
.vendor{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:22px;font-size:13px;color:var(--d-lo)}
.dark .vendor,.deep .vendor,.phero .vendor{color:var(--t-lo)}

/* ---------- 3CX page additions ---------- */
/* partner credentials pair */
.cx-creds{display:flex;flex-wrap:wrap;gap:10px 14px;margin-top:6px}
.cx-cred{display:flex;align-items:center;gap:12px;padding:8px 16px 8px 8px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid var(--line-d2);color:var(--t-mid);font-size:14px;line-height:1.3}
.cx-cred img{width:48px;height:48px}
.cx-cred .gold{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:rgba(244,183,64,.14);border:1px solid rgba(244,183,64,.4);color:#F4C55B}
.cx-cred .gold svg{width:22px;height:22px}
.cx-cred b{display:block;color:var(--t-hi);font-weight:700;font-size:15.5px}

/* what is 3CX */
.wi{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,72px);align-items:start}
.wi-copy{display:grid;gap:18px}
.wi-copy p{color:var(--d-mid);font-size:var(--fs-md);line-height:1.7}
.wi-copy .h-1{color:var(--d-hi)}
.wi-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.wi-grid div{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;padding:18px;border-radius:20px;background:#fff;border:1px solid var(--line-l)}
.wi-grid .ic-sq{grid-row:span 2}
.wi-grid b{font-family:var(--f-display);font-size:16px;color:var(--d-hi)}
.wi-grid span{font-size:14px;line-height:1.5;color:var(--d-mid)}
.wi-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;border-radius:20px;overflow:hidden;background:var(--line-l);border:1px solid var(--line-l);margin-top:6px}
.wi-facts div{padding:16px 18px;background:#fff}
.wi-facts b{display:block;font:700 var(--fs-xl)/1.1 var(--f-display);color:var(--d-hi);letter-spacing:-.02em}
.wi-facts span{font-size:13px;color:var(--d-mid)}
@media (max-width:960px){.wi{grid-template-columns:1fr}}
@media (max-width:520px){.wi-grid,.wi-facts{grid-template-columns:1fr}}

/* integration logo links (click logo -> 3CX's own guide) */
.intg{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.intg a{position:relative;display:grid;justify-items:center;align-content:center;gap:10px;min-height:126px;padding:18px 14px 16px;border-radius:20px;background:#fff;border:1px solid var(--line-l);color:var(--d-hi);text-align:center;transition:transform .35s var(--ease),border-color .3s,box-shadow .3s}
.intg a:hover,.intg a:focus-visible{transform:translateY(-3px);border-color:rgba(30,156,107,.45);box-shadow:var(--shadow-l)}
.intg .lg{display:flex;align-items:center;justify-content:center;gap:8px;height:40px}
.intg .lg{width:100%;min-width:0}
.intg .lg img{height:32px;width:auto;max-width:100%;object-fit:contain;flex:0 1 auto;min-width:0}
.intg .lg b{min-width:0;font-size:14px;line-height:1.2;text-align:left;overflow-wrap:anywhere}
.intg .lg b{font:700 15px var(--f-display)}
.intg small{font-size:12.5px;font-weight:600;color:var(--d-lo);padding:0 22px;line-height:1.35}
.intg .ext{position:absolute;bottom:10px;right:10px;width:20px;height:20px;display:grid;place-items:center;border-radius:50%;background:var(--pearl);color:var(--d-lo);transition:color .3s,background .3s}
.intg .ext svg{width:12px;height:12px;transform:rotate(-45deg)}
.intg a:hover .ext{background:rgba(30,156,107,.12);color:var(--emerald)}
.intg.c6{grid-template-columns:repeat(6,1fr)}
.intg.c6 a{min-height:112px;padding:18px 12px 16px}
.intg-note{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;margin-top:16px;font-size:14px;color:var(--d-mid)}
@media (max-width:1100px){.intg.c6{grid-template-columns:repeat(4,1fr)}}
@media (max-width:960px){.intg,.intg.c6{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.intg,.intg.c6{grid-template-columns:repeat(2,1fr)}}

/* 3CX sector links */
.sect{display:flex;flex-wrap:wrap;gap:8px}
.sect a{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:#fff;border:1px solid var(--line-l);font-size:14px;font-weight:600;color:var(--d-hi);transition:border-color .3s,color .3s}
.sect a svg{width:15px;height:15px;color:var(--emerald)}
.sect a:hover{border-color:var(--emerald);color:#147A52}

/* add-on cards (used on 3CX page, solutions, add-on pages) */
.aoc{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.aoc.c2{grid-template-columns:repeat(2,1fr)}
.aoc a{display:grid;gap:12px;align-content:start;padding:26px;border-radius:26px;background:linear-gradient(180deg,var(--ink-3),var(--ink-2));border:1px solid var(--line-d2);color:var(--t-hi);transition:transform .4s var(--ease),border-color .3s}
.aoc a:hover,.aoc a:focus-visible{transform:translateY(-4px);border-color:rgba(146,214,60,.5)}
.aoc .tag{justify-self:start;padding:5px 10px;border-radius:999px;background:rgba(146,214,60,.14);color:var(--spark);font:700 11px var(--f-display);letter-spacing:.12em;text-transform:uppercase}
.aoc .tag.sky{background:rgba(169,194,238,.14);color:var(--ice)}
.aoc h3{font-size:var(--fs-xl)}
.aoc p{font-size:15px;line-height:1.55;color:var(--t-mid)}
.aoc .link-arrow{margin-top:4px;color:var(--spark)}
@media (max-width:960px){.aoc{grid-template-columns:1fr}}

/* ---------- downloads ---------- */
.dlf{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(16px,2.4vw,28px);align-items:center;padding:clamp(22px,3vw,34px);border-radius:28px;background:radial-gradient(70% 120% at 100% 0%,rgba(146,214,60,.22),transparent 60%),linear-gradient(170deg,var(--ink-3),var(--ink-1));border:1px solid var(--line-d2);color:var(--t-hi)}
.dlf .cv{width:88px;aspect-ratio:3/4;border-radius:10px;background:linear-gradient(180deg,#fff 0 30%,#EBEFF7 30% 33%,#fff 33% 46%,#EBEFF7 46% 49%,#fff 49% 62%,#EBEFF7 62% 65%,#fff 65%);box-shadow:0 18px 40px rgba(0,0,0,.45);position:relative}
.dlf .cv::before{content:"";position:absolute;left:10px;right:10px;top:10px;height:14px;border-radius:4px;background:var(--grad-btn)}
.dlf .k{font:700 12px var(--f-display);letter-spacing:.16em;text-transform:uppercase;color:var(--spark)}
.dlf h3{margin:6px 0 6px;font-size:var(--fs-xl)}
.dlf p{color:var(--t-mid);font-size:15px}
.dlf .meta{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px}
.dlf .meta span{padding:5px 11px;border-radius:999px;font-size:12.5px;font-weight:600;background:rgba(255,255,255,.06);border:1px solid var(--line-d)}
@media (max-width:760px){.dlf{grid-template-columns:1fr}.dlf .cv{display:none}}
.dll{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.dll a{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:18px 20px;border-radius:20px;background:#fff;border:1px solid var(--line-l);color:var(--d-hi);transition:border-color .3s,transform .35s var(--ease)}
.dll a:hover,.dll a:focus-visible{border-color:rgba(30,156,107,.5);transform:translateY(-2px)}
.dll i{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--ink-2);color:var(--spark)}
.dll i svg{width:20px;height:20px}
.dll b{display:block;font-family:var(--f-display);font-size:16.5px;line-height:1.3}
.dll small{display:block;font-size:13.5px;color:var(--d-mid);line-height:1.45}
.dll em{font-style:normal;font-size:12.5px;font-weight:700;color:#147A52;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.dll em svg{width:15px;height:15px}
@media (max-width:760px){.dll{grid-template-columns:1fr}}
.dl-sub{margin:clamp(30px,4vw,44px) 0 4px;font:700 13px var(--f-display);letter-spacing:.16em;text-transform:uppercase;color:var(--d-lo)}

/* ---------- schools: Algo safety ---------- */
.algo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center}
.algo-ph{position:relative;margin:0;border-radius:26px;overflow:hidden;background:#EEF2F9}
.algo-ph img{display:block;width:100%;height:auto}
.algo-ph figcaption{position:absolute;left:14px;bottom:14px;padding:8px 12px;border-radius:12px;background:rgba(11,20,48,.82);color:var(--t-hi);font-size:12.5px;font-weight:600}
.algo-copy{display:grid;gap:16px}
.algo-copy p{color:var(--d-mid)}
.algo-dev{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:clamp(28px,3vw,40px)}
.algo-dev div{display:grid;gap:6px;align-content:start;padding:18px;border-radius:20px;background:#fff;border:1px solid var(--line-l)}
.algo-dev .m{font:700 11.5px var(--f-display);letter-spacing:.12em;color:var(--emerald)}
.algo-dev b{font-family:var(--f-display);font-size:16px;color:var(--d-hi)}
.algo-dev span{font-size:14px;line-height:1.5;color:var(--d-mid)}
.ml{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;margin-top:clamp(20px,2.4vw,28px);padding:22px 24px;border-radius:22px;background:var(--ink-2);color:var(--t-hi)}
.ml i{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:rgba(146,214,60,.16);color:var(--spark)}
.ml i svg{width:21px;height:21px}
.ml b{display:block;font-family:var(--f-display);font-size:16.5px;margin-bottom:4px}
.ml p{font-size:14.5px;line-height:1.6;color:var(--t-mid)}
.ml a{color:var(--spark);text-decoration:underline;text-underline-offset:3px}
@media (max-width:960px){.algo{grid-template-columns:1fr}.algo-dev{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.algo-dev{grid-template-columns:1fr}}

/* ---------- network: HA modes switcher ---------- */
.nm-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.nm-tabs button{padding:9px 16px;border-radius:999px;border:1px solid var(--line-d2);background:rgba(255,255,255,.04);color:var(--t-mid);font:600 13.5px var(--f-display);transition:all .25s}
.nm-tabs button[aria-selected="true"]{background:rgba(146,214,60,.14);border-color:rgba(146,214,60,.45);color:var(--spark)}
.nm-panel[hidden]{display:none}
.nm-cap{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.nm-cap div{padding:14px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--line-d)}
.nm-cap b{display:block;font-family:var(--f-display);font-size:14.5px;color:var(--t-hi);margin-bottom:2px}
.nm-cap span{font-size:13px;line-height:1.5;color:var(--t-mid)}
@media (max-width:760px){.nm-cap{grid-template-columns:1fr}}
.nwd .dn.pas rect{fill:rgba(255,255,255,.03);stroke-dasharray:4 4}
.nwd .dn.grp rect{fill:rgba(60,99,184,.10);stroke:rgba(169,194,238,.22)}
.nwd .dn.core rect{fill:rgba(116,194,45,.16);stroke:rgba(184,235,79,.5)}
.nwd .lbl{fill:#7383A9;font:700 9.5px Urbanist,sans-serif;letter-spacing:.12em}
.nwd .dn text.c{font-size:11px;fill:#DDE8C9;font-weight:600}

/* linked logos outside the main grid */
.trust-logos .tl-a{display:inline-flex;align-items:center;flex:none;border-radius:8px;transition:opacity .3s}
.trust-logos .tl-a:hover img{opacity:1}
a.int{color:inherit;text-decoration:none;transition:transform .35s var(--ease),box-shadow .3s,border-color .3s}
a.int:hover{border-color:rgba(30,156,107,.45)}

/* ---------- schools: Algo / Fanvil option tabs ---------- */
.sch-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(20px,2.4vw,28px)}
.sch-tabs button{display:grid;gap:2px;text-align:left;padding:12px 20px;border-radius:16px;border:1px solid var(--line-l);background:#fff;color:var(--d-hi);font:700 16px var(--f-display);transition:all .25s}
.sch-tabs button small{font:500 12.5px var(--f-body,inherit);color:var(--d-mid)}
.sch-tabs button:hover{border-color:rgba(116,194,45,.5)}
.sch-tabs button[aria-selected="true"]{border-color:var(--emerald);box-shadow:0 0 0 3px rgba(116,194,45,.18)}
.sch-panel[hidden]{display:none}
.sch-sub{margin-top:clamp(26px,3vw,36px);font:700 13px var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--d-mid)}
.sch-sub+.algo-dev{margin-top:12px}
.sch-logo{margin:0;display:grid;place-items:center;min-height:260px;padding:40px;border-radius:26px;background:#fff;border:1px solid var(--line-l)}
.sch-logo img{width:min(320px,80%);height:auto}
.sch .vendor a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.ml-l{display:grid;gap:6px;margin:4px 0 10px;padding-left:18px;font-size:14.5px;line-height:1.6;color:var(--t-mid)}
.ml-l li{list-style:disc}

/* ---------- 3CX screenshot gallery ---------- */
.gx{display:grid;grid-template-columns:minmax(220px,.42fr) 1fr;gap:clamp(18px,2.6vw,32px);align-items:start}
.gx-tabs{display:grid;gap:8px}
.gx-tabs button{display:grid;gap:2px;text-align:left;padding:14px 18px;border-radius:16px;border:1px solid var(--line-l);background:#fff;color:var(--d-hi);transition:all .25s}
.gx-tabs button b{font:700 15.5px var(--f-display)}
.gx-tabs button small{font-size:13px;color:var(--d-mid)}
.gx-tabs button:hover{border-color:rgba(116,194,45,.5)}
.gx-tabs button[aria-selected="true"]{border-color:var(--emerald);box-shadow:0 0 0 3px rgba(116,194,45,.18)}
.gx-panel{margin:0}
.gx-panel[hidden]{display:none}
.gx-frame{border-radius:20px;overflow:hidden;background:#1B1F27;border:1px solid var(--line-l);box-shadow:0 30px 60px -34px rgba(11,20,48,.45);aspect-ratio:1200/680}
.gx-frame img{display:block;width:100%;height:100%;object-fit:cover}
.gx-panel figcaption{margin-top:14px;font-size:15px;line-height:1.55;color:var(--d-mid);max-width:62ch}
.gx-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:clamp(24px,3vw,36px)}
.gx-pair figure{margin:0}
.gx-pair figcaption{margin-top:12px;font-size:14px;line-height:1.5;color:var(--d-mid)}
.gx-pair figcaption b{display:block;font-family:var(--f-display);font-size:15.5px;color:var(--d-hi)}
@media (max-width:860px){.gx{grid-template-columns:1fr}.gx-tabs{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.gx-tabs button{padding:11px 12px;text-align:center;place-items:center}.gx-tabs button b{font-size:14px;line-height:1.25}.gx-tabs button small{display:none}.gx-pair{grid-template-columns:1fr}}
@media (max-width:520px){.gx-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- Dimensions: real product images + brand logo ---------- */
.dm-logo{width:clamp(170px,18vw,220px);height:auto}
.dm-hero{margin:0;display:grid;gap:12px}
.dm-hero img{display:block;width:100%;height:auto;filter:drop-shadow(0 30px 50px rgba(0,0,0,.45))}
.dm-hero figcaption,.dm-shot figcaption,.dm-dash figcaption{font-size:12.5px;color:var(--t-lo);text-align:center}
.dm-wb-r{display:grid;gap:16px}
.dm-shot,.dm-dash{margin:0;display:grid;gap:10px}
.dm-shot img{display:block;width:100%;height:auto;border-radius:18px;border:6px solid #0B1430;box-shadow:0 26px 50px -30px rgba(11,20,48,.55)}
.dm-shot figcaption{color:var(--d-mid)}
.dm-dash{margin-top:clamp(26px,3vw,40px)}
.dm-dash img{display:block;width:100%;height:auto;border-radius:20px;border:1px solid var(--line-d2);box-shadow:0 34px 70px -40px rgba(0,0,0,.8)}
.aoc-logo{width:150px;height:auto}
/* Brand logos + real Sentra screen */
.br-logo{width:clamp(170px,18vw,220px);height:auto}
.sx-hero{margin:0;display:grid;gap:12px}
.sx-hero img{display:block;width:100%;height:auto;border-radius:20px;border:6px solid #0B1430;box-shadow:0 30px 60px rgba(0,0,0,.45)}
.sx-hero figcaption{font-size:12.5px;color:var(--t-lo);text-align:center}