/* === Style block:  === */
/* ==========================================================
       Microsoft 365 Licensing — premium animated edition.
       Page-scoped: every selector starts with .ml / .ml- so the
       rest of the site is untouched.
       ========================================================== */
    .ml { --y:#F7D840; --y2:#E2C52B; --ysoft:#FFF6C9; --ink:#1E252B; --ink2:#3A434B; --ink3:#69727A; --ink4:#9AA1A7;
          --grey:#F3F3EF; --grey2:#E8E8E3; --ivory:#FFFDF7; --line:rgba(30,37,43,.10); --green:#1F9D63;
          --sh1:0 1px 2px rgba(30,37,43,.05),0 10px 28px rgba(30,37,43,.08);
          --sh2:0 2px 4px rgba(30,37,43,.05),0 24px 56px rgba(30,37,43,.14);
          --ease:cubic-bezier(.22,.8,.24,1);
          color:var(--ink2); font-family:'Inter','Segoe UI',system-ui,sans-serif; font-size:16px; overflow-x:clip; }
    .ml h1,.ml h2,.ml h3,.ml .ml-display { font-family:'Manrope','Inter',sans-serif; color:var(--ink); letter-spacing:-.028em; }
    .ml .ml-wrap { max-width:1220px; margin:0 auto; padding:0 28px; position:relative; }
    .ml .ml-kick { display:inline-flex; align-items:center; gap:10px; font-size:.76rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--ink2); }
    .ml .ml-kick::before { content:""; width:22px; height:4px; border-radius:2px; background:var(--y); transform:skewX(-20deg); }
    .ml .ml-mark { background-image:linear-gradient(var(--y),var(--y)); background-repeat:no-repeat; background-position:0 88%; background-size:100% 30%; padding:0 .04em; }
    .ml .ml-h2 { font-size:clamp(1.85rem,3.2vw,2.7rem); line-height:1.1; font-weight:800; margin:14px 0 14px; }
    .ml .ml-lede { font-size:1.06rem; line-height:1.62; color:var(--ink2); max-width:36rem; }
    .ml :focus-visible { outline:3px solid var(--ink); outline-offset:3px; border-radius:8px; }
    .ml section { scroll-margin-top:150px; position:relative; }
    .ml img { max-width:100%; }

    /* buttons */
    .ml .ml-btn { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 26px; border-radius:999px; font:700 1rem/1 'Inter',sans-serif; text-decoration:none; border:1.5px solid transparent; cursor:pointer; overflow:hidden; isolation:isolate; transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .2s, background .2s, color .2s; }
    .ml .ml-btn svg { width:18px; height:18px; transition:transform .3s var(--ease); }
    .ml .ml-btn:hover svg { transform:translateX(4px); }
    .ml .ml-btn-y { background:var(--y); color:var(--ink); box-shadow:0 8px 22px -12px rgba(165,135,0,.9); }
    .ml .ml-btn-y::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%); transform:translateX(-120%); transition:transform .7s var(--ease); }
    .ml .ml-btn-y:hover { transform:translateY(-2px); box-shadow:0 14px 30px -12px rgba(165,135,0,.95); }
    .ml .ml-btn-y:hover::after { transform:translateX(120%); }
    .ml .ml-btn-o { background:#fff; color:var(--ink); border-color:rgba(30,37,43,.18); }
    .ml .ml-btn-o:hover { border-color:var(--ink); transform:translateY(-2px); }
    .ml .ml-btn-k { background:var(--ink); color:#fff; }
    .ml .ml-btn-k:hover { transform:translateY(-2px); box-shadow:0 14px 30px -14px rgba(30,37,43,.8); }
    .ml .ml-app { display:inline-flex; align-items:center; justify-content:center; background:#fff; border:1px solid var(--line); border-radius:14px; flex-shrink:0; }
    .ml .ml-app img { width:64%; height:64%; object-fit:contain; display:block; }

    /* reveal system (scroll-triggered) */
    .ml-js .ml [data-rv] { opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); transition-delay:calc(var(--d,0) * 90ms); }
    .ml-js .ml [data-rv="left"] { transform:translateX(-30px); }
    .ml-js .ml [data-rv="right"] { transform:translateX(30px); }
    .ml-js .ml [data-rv="scale"] { transform:scale(.96); }
    .ml-js .ml [data-rv].is-in { opacity:1; transform:none; }
    .ml-js .ml .ml-mark { background-size:0% 30%; transition:background-size 1s var(--ease) .35s; }
    .ml-js .ml .is-in .ml-mark, .ml-js .ml .ml-mark.is-in { background-size:100% 30%; }

    /* progress bar + section nav */
    .ml-progress { position:fixed; left:0; top:0; height:3px; width:100%; transform-origin:0 50%; transform:scaleX(0); background:#F7D840; z-index:1101; }
    .ml-subnav { position:fixed; left:0; right:0; z-index:990; top:var(--hdr,114px); background:rgba(255,255,255,.92); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid rgba(30,37,43,.08); transform:translateY(-110%); opacity:0; transition:transform .35s var(--ease), opacity .3s; }
    .ml-subnav.is-on { transform:none; opacity:1; }
    .ml-subnav .ml-wrap { display:flex; align-items:center; gap:6px; height:56px; }
    .ml-subnav .ml-sn-title { display:flex; align-items:center; gap:10px; font-weight:800; font-family:'Manrope',sans-serif; color:#1E252B; font-size:.95rem; margin-right:auto; white-space:nowrap; }
    .ml-subnav .ml-sn-title img { width:26px; height:26px; }
    .ml-subnav nav { display:flex; gap:2px; overflow-x:auto; scrollbar-width:none; }
    .ml-subnav nav::-webkit-scrollbar { display:none; }
    .ml-subnav nav a { position:relative; font-size:.88rem; font-weight:600; color:#69727A; text-decoration:none; padding:9px 13px; border-radius:999px; white-space:nowrap; transition:color .2s, background .2s; }
    .ml-subnav nav a:hover { color:#1E252B; background:#F3F3EF; }
    .ml-subnav nav a.is-active { color:#1E252B; background:#FFF6C9; }
    .ml-subnav .ml-btn { min-height:40px; padding:0 18px; font-size:.88rem; margin-left:10px; }

    /* ======================= PLANS ======================= */
    .ml-plans { padding:100px 0 90px; background:var(--grey); }
    .ml-plans .ml-top { display:flex; justify-content:space-between; align-items:flex-end; gap:32px; flex-wrap:wrap; margin-bottom:36px; }
    .ml-toggle { position:relative; display:inline-grid; grid-template-columns:1fr 1fr; background:#F8FAFC; border:1.5px solid rgba(45,55,72,.15); border-radius:999px; padding:5px; box-shadow:0 4px 18px rgba(10,31,63,.06); }
    .ml-toggle .ml-pill { position:absolute; top:5px; bottom:5px; left:5px; width:calc(50% - 5px); border-radius:999px; background:linear-gradient(135deg, #2D3748 0%, #1E293B 100%); box-shadow:0 4px 14px rgba(30,41,59,.25); border:1px solid rgba(255,255,255,0.08); transition:transform .45s var(--ease); }
    .ml-toggle[data-on="standard"] .ml-pill { transform:translateX(100%); }
    .ml-toggle button { position:relative; z-index:1; border:0; background:transparent; font:700 .95rem 'Inter',sans-serif; color:#4A5568; padding:12px 24px; border-radius:999px; cursor:pointer; min-height:46px; transition:color .3s; white-space:nowrap; }
    .ml-toggle button:hover { color:#1A202C; }
    .ml-toggle button[aria-selected="true"] { color:#ffffff; font-weight:700; }
    .ml-board { display:grid; grid-template-columns:1.4fr 1fr; gap:24px; align-items:start; }
    .ml-panel { background:#fff; border-radius:26px; padding:28px; box-shadow:var(--sh1); border:1px solid rgba(30,37,43,.05); }
    .ml-panel h3.ml-sub3 { font-size:.74rem; font-family:'Inter',sans-serif; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--ink3); margin-bottom:14px; }
    /* device strip */
    .ml-devices { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:26px; }
    .ml-dev { position:relative; border:1.5px solid var(--line); border-radius:18px; padding:16px; display:flex; flex-direction:column; gap:12px; transition:border-color .4s, background .4s, opacity .4s, transform .4s var(--ease); }
    .ml-dev svg.ml-dev-ic { width:58px; height:44px; color:var(--ink); }
    .ml-dev b { font-size:.95rem; color:var(--ink); }
    .ml-dev span { font-size:.8rem; color:var(--ink3); line-height:1.35; }
    .ml-dev .ml-st { position:absolute; top:12px; right:12px; width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#E8F6EF; color:var(--green); transition:background .3s, color .3s, transform .4s var(--ease); }
    .ml-dev .ml-st svg { width:14px; height:14px; }
    .ml-dev.is-off { opacity:.5; background:repeating-linear-gradient(-45deg,#fff 0 10px,#FAFAF7 10px 20px); }
    .ml-dev.is-off .ml-st { background:var(--grey); color:var(--ink3); transform:rotate(45deg); }
    .ml-dev.is-new { border-color:var(--ink); background:var(--ysoft); animation:mlPop .6s var(--ease); }
    @keyframes mlPop { 40% { transform:scale(1.035); } }
    /* app grid */
    .ml-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; }
    .ml-tile { position:relative; background:#fff; border:1px solid var(--line); border-radius:16px; padding:14px 6px 12px; display:flex; flex-direction:column; align-items:center; gap:9px; cursor:pointer; font:inherit; color:var(--ink); min-height:112px; transition:transform .3s var(--ease), box-shadow .3s var(--ease), opacity .4s, border-color .2s, filter .4s; }
    .ml-tile:hover { transform:translateY(-4px); box-shadow:var(--sh1); }
    .ml-tile[aria-pressed="true"] { border-color:var(--ink); box-shadow:0 0 0 2px var(--ink) inset; }
    .ml-tile img { width:44px; height:44px; object-fit:contain; transition:transform .35s var(--ease); }
    .ml-tile:hover img { transform:scale(1.1) rotate(-3deg); }
    .ml-tile span { font-size:.8rem; font-weight:700; }
    .ml-tile .ml-badge { position:absolute; top:6px; right:6px; font-size:.56rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:2px 6px; border-radius:5px; background:var(--grey); color:var(--ink3); }
    .ml-tile .ml-badge.is-desk { background:var(--ink); color:var(--y); }
    .ml-tile .ml-badge.is-add { background:var(--y); color:var(--ink); }
    .ml-tile.is-off { opacity:.35; filter:grayscale(.85); }
    .ml-tile.is-flash { animation:mlPop .55s var(--ease); }
    .ml-detail { margin-top:16px; border-radius:18px; background:var(--grey); padding:18px 20px; display:flex; gap:16px; align-items:flex-start; min-height:108px; }
    .ml-detail .ml-app { width:54px; height:54px; border:0; }
    .ml-detail h3 { font-size:1.05rem; margin-bottom:4px; }
    .ml-detail p { font-size:.94rem; line-height:1.55; }
    .ml-detail .ml-note { display:inline-flex; align-items:center; gap:6px; margin-top:8px; font-size:.78rem; font-weight:700; color:var(--ink); background:#fff; border-radius:999px; padding:4px 10px; }
    .ml-detail.is-anim { animation:mlIn .45s var(--ease); }
    @keyframes mlIn { from { opacity:0; transform:translateY(8px); } }
    /* plan card - redesigned with SmartSoft refined light enterprise palette */
    .ml-card { position:sticky; top:190px; background:#ffffff; color:#1e293b; border:1.5px solid rgba(10,31,63,0.12); border-radius:26px; padding:30px; overflow:hidden; box-shadow:0 16px 40px -12px rgba(10,31,63,0.14), 0 2px 8px rgba(0,0,0,0.04); transition:all .3s ease; }
    .ml-card::before { content:""; position:absolute; right:-35px; top:-25px; width:90px; height:180px; background:linear-gradient(135deg, #F7D840 0%, #DFC230 100%); transform:skewX(-14deg); border-radius:8px; opacity:.85; pointer-events:none; }
    .ml-card > * { position:relative; z-index:2; }
    .ml-card .ml-plan-name { font-size:.74rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:#0a1f3f; display:inline-flex; align-items:center; gap:6px; background:rgba(10,31,63,0.06); padding:4px 10px; border-radius:999px; }
    .ml-card h3 { font-size:1.85rem; margin:12px 0 8px; font-weight:800; color:#0a1f3f; letter-spacing:-0.02em; }
    .ml-card .ml-tag { font-size:.95rem; line-height:1.5; color:#475569; min-height:3em; max-width:24rem; }
    .ml-card .ml-price { display:flex; align-items:baseline; gap:8px; margin:20px 0 6px; }
    .ml-card .ml-price b { font-family:'Manrope',sans-serif; font-size:2.75rem; font-weight:800; color:#0a1f3f; letter-spacing:-.035em; font-variant-numeric:tabular-nums; }
    .ml-card .ml-price span { font-size:.92rem; color:#64748b; font-weight:600; }
    .ml-card .ml-fine { font-size:.76rem; color:#64748b; line-height:1.45; }
    .ml-card ul { list-style:none; margin:18px 0 20px; padding:16px 0 0; border-top:1px solid rgba(10,31,63,0.1); display:grid; gap:11px; }
    .ml-card li { display:flex; gap:10px; font-size:.92rem; line-height:1.45; color:#1e293b; font-weight:500; }
    .ml-card li svg { width:18px; height:18px; flex-shrink:0; margin-top:2px; color:#059669; stroke-width:2.5; }
    .ml-card li.ml-plus svg { color:#0a1f3f; background:#F7D840; border-radius:50%; padding:3px; }
    .ml-card .ml-suits { background:#F8FAFC; border:1px solid rgba(10,31,63,0.08); border-radius:14px; padding:14px 16px; font-size:.88rem; line-height:1.5; margin-bottom:20px; color:#334155; }
    .ml-card .ml-suits b { display:block; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:#b45309; margin-bottom:4px; font-weight:800; }
    .ml-card .ml-btn { width:100%; background:var(--accent, #F7D840); color:#0a1f3f; font-weight:800; border:0; box-shadow:0 6px 18px rgba(247,216,64,0.45); transition:all 0.25s ease; }
    .ml-card .ml-btn:hover { background:var(--accent-dark, #DFC230); transform:translateY(-2px); box-shadow:0 10px 24px rgba(247,216,64,0.55); }
    .ml-card .v3-cmp { width:100%; margin:12px 0 0; min-height:44px; padding:10px 18px; border-radius:999px; background:#F1F5F9; color:#0a1f3f; border:1px solid rgba(10,31,63,0.12); display:flex; align-items:center; justify-content:center; gap:8px; font-weight:700; font-size:.88rem; text-decoration:none; transition:all 0.25s ease; }
    .ml-card .v3-cmp svg { width:18px; height:18px; color:#0a1f3f; }
    .ml-card .v3-cmp:hover { background:#E2E8F0; border-color:rgba(10,31,63,0.25); transform:translateY(-2px); box-shadow:0 4px 12px rgba(10,31,63,0.08); }

    /* Copilot add-on special variant for ml-card */
    .ml-card.is-addon { background:linear-gradient(165deg, #FFFFFF 0%, #F5F7FF 55%, #FCFDFF 100%); border:1.5px solid rgba(91,95,199,0.35); box-shadow:0 18px 44px -12px rgba(91,95,199,0.2), 0 2px 8px rgba(0,0,0,0.04); }
    .ml-card.is-addon::before { background:linear-gradient(135deg, #6366f1 0%, #a855f7 100%); opacity:0.6; }
    .ml-card.is-addon .ml-plan-name { color:#4338ca; background:rgba(99,102,241,0.1); }
    .ml-card.is-addon h3 { color:#1e1b4b; }
    .ml-card.is-addon .ml-price b { color:#3730a3; }
    .ml-card.is-addon .ml-suits { background:rgba(99,102,241,0.06); border-color:rgba(99,102,241,0.15); color:#312e81; }
    .ml-card.is-addon .ml-suits b { color:#4f46e5; }
    .ml-card-logo { width:56px; height:56px; padding:10px; border-radius:16px; background:#ffffff; border:1px solid rgba(99,102,241,0.2); box-shadow:0 4px 12px rgba(99,102,241,0.12); object-fit:contain; display:block; margin-bottom:14px; }
    .ml-swap { transition:opacity .25s var(--ease), transform .25s var(--ease); }
    .ml-swap.is-out { opacity:0; transform:translateY(8px); }
    /* comparison */
    .ml-compare { margin-top:26px; border-radius:24px; overflow:hidden; background:#fff; box-shadow:var(--sh1); }
    .ml-compare summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:22px 28px; font-weight:700; color:var(--ink); font-size:1.02rem; min-height:60px; transition:background .2s; }
    .ml-compare summary:hover { background:#FCFCFA; }
    .ml-compare summary::-webkit-details-marker { display:none; }
    .ml-compare summary .ml-chev { width:36px; height:36px; border-radius:50%; background:var(--grey); display:flex; align-items:center; justify-content:center; transition:transform .35s var(--ease), background .2s; flex-shrink:0; }
    .ml-compare[open] summary .ml-chev { transform:rotate(180deg); background:var(--y); }
    .ml-compare .ml-tw { overflow-x:auto; border-top:1px solid var(--line); }
    .ml-compare[open] .ml-tw { animation:mlIn .5s var(--ease); }
    .ml-compare table { width:100%; border-collapse:collapse; min-width:620px; font-size:.94rem; }
    .ml-compare th, .ml-compare td { text-align:left; padding:15px 28px; border-bottom:1px solid var(--line); vertical-align:middle; line-height:1.45; }
    .ml-compare thead th { font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink3); background:#FAFAF7; }
    .ml-compare thead th.ml-std { background:var(--ysoft); color:var(--ink); }
    .ml-compare tbody th { font-weight:600; color:var(--ink); width:44%; }
    .ml-compare td { width:28%; color:var(--ink2); }
    .ml-compare td .ml-yes, .ml-compare td .ml-no { display:inline-flex; align-items:center; gap:8px; }
    .ml-compare td .ml-yes::before { content:""; width:20px; height:20px; border-radius:50%; background:#E8F6EF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F9D63' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center/12px no-repeat; flex-shrink:0; }
    .ml-compare td .ml-no { color:var(--ink4); }
    .ml-compare td .ml-no::before { content:""; width:12px; height:2px; background:var(--ink4); margin:0 4px; }
    .ml-compare tbody tr { transition:background .2s; }
    .ml-compare tbody tr:hover { background:#FCFCF8; }
    .ml-compare td.ml-std { background:rgba(255,246,201,.35); }
    .ml-compare .ml-src { padding:16px 28px 20px; font-size:.8rem; color:var(--ink3); line-height:1.55; }
    .ml-compare .ml-src a { color:var(--ink2); }
    .ml-plans .ml-cta-row { margin-top:28px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px 18px; text-align:center; font-weight:600; color:var(--ink2); }

    /* ======================= CHOOSER ======================= */
    .ml-help { padding:100px 0; background:#fff; }
    .ml-help .ml-wrap { display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; align-items:start; }
    .ml-help .ml-mix { margin-top:26px; display:flex; align-items:center; gap:14px; padding:16px 18px; border-radius:18px; background:var(--grey); max-width:30rem; }
    .ml-help .ml-mix .ml-split { display:flex; gap:4px; }
    .ml-help .ml-mix .ml-split i { width:12px; height:30px; border-radius:4px; background:var(--ink); display:block; }
    .ml-help .ml-mix .ml-split i.b { background:var(--y); }
    .ml-help .ml-mix p { font-size:.88rem; line-height:1.45; color:var(--ink2); }
    .ml-q { background:#fff; border-radius:24px; padding:10px; box-shadow:var(--sh2); border:1px solid rgba(30,37,43,.05); }
    .ml-q fieldset { border:0; padding:20px 20px 18px; margin:0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:34px 1fr; gap:4px 14px; }
    .ml-q fieldset:last-of-type { border-bottom:0; }
    .ml-q .ml-qn { grid-row:span 2; width:34px; height:34px; border-radius:10px; background:var(--grey); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.85rem; color:var(--ink); transition:background .3s; }
    .ml-q fieldset.is-done .ml-qn { background:var(--y); }
    .ml-q legend { font-weight:700; color:var(--ink); font-size:1rem; margin-bottom:12px; padding:0; float:left; width:100%; line-height:1.4; }
    .ml-q .ml-opts { display:flex; flex-wrap:wrap; gap:8px; grid-column:2; }
    .ml-q label { position:relative; cursor:pointer; }
    .ml-q input { position:absolute; opacity:0; pointer-events:none; }
    .ml-q label span { display:inline-flex; align-items:center; min-height:44px; padding:0 18px; border-radius:999px; border:1.5px solid rgba(30,37,43,.16); font-size:.92rem; font-weight:600; color:var(--ink2); transition:all .22s var(--ease); }
    .ml-q label:hover span { border-color:var(--ink); transform:translateY(-1px); }
    .ml-q input:checked + span { background:var(--ink); border-color:var(--ink); color:#fff; }
    .ml-q input:focus-visible + span { outline:3px solid var(--y); outline-offset:2px; }
    .ml-result { margin:8px; border-radius:18px; padding:20px 22px; background:var(--ysoft); display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap; transition:background .4s; }
    .ml-result p { font-size:.98rem; line-height:1.5; color:var(--ink); margin:0; max-width:30rem; }
    .ml-result p b { font-family:'Manrope',sans-serif; }
    .ml-result.is-empty { background:var(--grey); }
    .ml-result.is-anim p { animation:mlIn .45s var(--ease); }
    .ml-result .ml-btn { min-height:46px; }

    /* ======================= FAQ ======================= */
    .ml-faq { padding:100px 0; background:#fff; }
    .ml-faq .ml-wrap { display:grid; grid-template-columns:.8fr 1.2fr; gap:56px; align-items:start; }
    .ml-faq details { border-bottom:1px solid var(--line); }
    .ml-faq details:first-child { border-top:1px solid var(--line); }
    .ml-faq summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:22px 4px; font-weight:700; color:var(--ink); font-size:1.03rem; min-height:60px; transition:color .2s; }
    .ml-faq summary:hover { color:#000; }
    .ml-faq summary::-webkit-details-marker { display:none; }
    .ml-faq summary .ml-pm { width:32px; height:32px; border-radius:50%; background:var(--grey); position:relative; flex-shrink:0; transition:background .3s, transform .4s var(--ease); }
    .ml-faq summary .ml-pm::before, .ml-faq summary .ml-pm::after { content:""; position:absolute; left:50%; top:50%; width:12px; height:2px; background:var(--ink); transform:translate(-50%,-50%); transition:transform .35s var(--ease); }
    .ml-faq summary .ml-pm::after { transform:translate(-50%,-50%) rotate(90deg); }
    .ml-faq details[open] .ml-pm { background:var(--y); transform:rotate(180deg); }
    .ml-faq details[open] .ml-pm::after { transform:translate(-50%,-50%) rotate(0deg); }
    .ml-faq details p { padding:0 4px 22px; line-height:1.62; max-width:46rem; }
    .ml-faq details[open] p { animation:mlIn .4s var(--ease); }

    /* ======================= ENQUIRY ======================= */
    .ml-enq { padding:110px 0 120px; background:var(--grey); }
    .ml-enq .ml-wrap { display:grid; grid-template-columns:.78fr 1.22fr; gap:56px; align-items:start; }
    .ml-enq aside { position:sticky; top:190px; }
    .ml-enq aside .ml-person { margin-top:26px; display:flex; gap:14px; align-items:center; background:#fff; border-radius:18px; padding:12px; box-shadow:var(--sh1); }
    .ml-enq aside .ml-person img { width:64px; height:64px; border-radius:14px; object-fit:cover; }
    .ml-enq aside .ml-person b { display:block; color:var(--ink); font-size:.95rem; }
    .ml-enq aside .ml-person span { font-size:.84rem; color:var(--ink3); line-height:1.4; }
    .ml-enq aside ul { list-style:none; margin:22px 0 0; padding:0; display:grid; gap:12px; }
    .ml-enq aside li a { display:flex; gap:12px; align-items:center; font-weight:700; color:var(--ink); text-decoration:none; padding:6px 0; }
    .ml-enq aside li .ml-c { width:42px; height:42px; border-radius:12px; background:#fff; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background .2s, transform .3s var(--ease); }
    .ml-enq aside li a:hover .ml-c { background:var(--y); transform:rotate(-6deg); }
    .ml-enq aside li svg { width:19px; height:19px; }
    .ml-form { background:#fff; border-radius:28px; box-shadow:var(--sh2); padding:10px 34px 34px; }
    .ml-meter { position:sticky; top:178px; z-index:3; background:#fff; padding:18px 0 14px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:14px; }
    .ml-meter .ml-bar { flex:1; height:6px; border-radius:3px; background:var(--grey); overflow:hidden; }
    .ml-meter .ml-bar i { display:block; height:100%; width:100%; background:var(--y); transform-origin:0 50%; transform:scaleX(0); transition:transform .5s var(--ease); }
    .ml-meter span { font-size:.8rem; font-weight:700; color:var(--ink3); white-space:nowrap; font-variant-numeric:tabular-nums; }
    .ml-fs { border:0; margin:0; padding:26px 0 8px; border-bottom:1px solid var(--line); }
    .ml-fs:last-of-type { border-bottom:0; }
    .ml-fs > legend { display:flex; align-items:center; gap:10px; font-family:'Manrope',sans-serif; font-weight:800; color:var(--ink); font-size:1.08rem; padding:0; margin-bottom:18px; float:left; width:100%; }
    .ml-fs > legend + * { clear:both; }
    .ml-fs > legend i { font-style:normal; width:28px; height:28px; border-radius:9px; background:var(--grey); display:flex; align-items:center; justify-content:center; font-size:.8rem; font-family:'Inter',sans-serif; transition:background .3s; }
    .ml-fs.is-done > legend i { background:var(--y); }
    .ml-row2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
    .ml-field { margin-bottom:16px; }
    .ml-field > label, .ml-field > .ml-lbl { display:block; font-weight:600; font-size:.92rem; color:var(--ink); margin-bottom:8px; }
    .ml-field .ml-opt { font-weight:500; color:var(--ink3); }
    .ml-field input[type=text], .ml-field input[type=email], .ml-field input[type=tel], .ml-field select, .ml-field textarea { width:100%; min-height:52px; border:1.5px solid rgba(30,37,43,.16); border-radius:13px; padding:13px 15px; font:inherit; font-size:1rem; color:var(--ink); background:#FCFCFA; transition:border-color .2s, box-shadow .2s, background .2s; }
    .ml-field input:hover, .ml-field select:hover, .ml-field textarea:hover { border-color:rgba(30,37,43,.32); }
    .ml-field select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231E252B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 15px center; padding-right:42px; cursor:pointer; }
    .ml-field textarea { min-height:120px; resize:vertical; line-height:1.5; }
    .ml-field input:focus, .ml-field select:focus, .ml-field textarea:focus { outline:none; border-color:var(--ink); background:#fff; box-shadow:0 0 0 4px rgba(247,216,64,.5); }
    .ml-field.has-error input, .ml-field.has-error select, .ml-field.has-error textarea { border-color:#B3261E; background:#FFFBFA; }
    .ml-field.has-error.ml-shake { animation:mlShake .4s; }
    @keyframes mlShake { 20%,60% { transform:translateX(-5px); } 40%,80% { transform:translateX(5px); } }
    .ml-err { display:none; color:#B3261E; font-size:.84rem; font-weight:600; margin-top:6px; }
    .ml-field.has-error .ml-err { display:block; animation:mlIn .3s var(--ease); }
    .ml-hint { font-size:.8rem; color:var(--ink3); margin-top:6px; }
    .ml-choices { display:grid; gap:10px; }
    .ml-choices.ml-3 { grid-template-columns:repeat(3,1fr); }
    .ml-choice { position:relative; display:block; cursor:pointer; }
    .ml-choice input { position:absolute; opacity:0; pointer-events:none; }
    .ml-choice .ml-cbox { display:flex; gap:12px; align-items:center; min-height:56px; padding:12px 15px; border:1.5px solid rgba(30,37,43,.14); border-radius:14px; font-size:.94rem; font-weight:600; color:var(--ink2); transition:all .22s var(--ease); background:#FCFCFA; height:100%; }
    .ml-choice .ml-cbox::before { content:""; width:18px; height:18px; border-radius:50%; border:2px solid rgba(30,37,43,.32); flex-shrink:0; transition:all .22s var(--ease); background:#fff; }
    .ml-choice:hover .ml-cbox { border-color:var(--ink); transform:translateY(-1px); }
    .ml-choice input:checked + .ml-cbox { border-color:var(--ink); background:var(--ysoft); color:var(--ink); }
    .ml-choice input:checked + .ml-cbox::before { border-color:var(--ink); background:radial-gradient(var(--ink) 0 42%, #fff 46%); }
    .ml-choice input:focus-visible + .ml-cbox { outline:3px solid var(--ink); outline-offset:2px; }
    .ml-plan-choice .ml-cbox { flex-direction:column; align-items:flex-start; gap:8px; padding:15px; }
    .ml-plan-choice .ml-cbox::before { position:absolute; top:15px; right:15px; }
    .ml-plan-choice .ml-mini { display:flex; gap:4px; }
    .ml-plan-choice .ml-mini img { width:24px; height:24px; object-fit:contain; }
    .ml-plan-choice small { font-weight:500; color:var(--ink3); font-size:.8rem; line-height:1.35; }
    .ml-field.has-error .ml-cbox { border-color:#E4A7A2; }
    .ml-follow { display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows .45s var(--ease), opacity .35s; }
    .ml-follow > div { overflow:hidden; }
    .ml-follow.is-open { grid-template-rows:1fr; opacity:1; }
    .ml-submit { display:flex; flex-wrap:wrap; align-items:center; gap:16px 22px; margin-top:24px; padding-top:24px; border-top:1px solid var(--line); }
    .ml-submit .ml-btn { min-height:58px; font-size:1.03rem; padding:0 30px; }
    .ml-submit .ml-btn[disabled] { opacity:.7; cursor:progress; transform:none; }
    .ml-privacy { display:flex; gap:10px; font-size:.82rem; color:var(--ink3); line-height:1.5; max-width:26rem; margin:0; }
    .ml-privacy svg { width:18px; height:18px; flex-shrink:0; color:var(--ink3); margin-top:1px; }
    .ml-status { display:none; margin-top:18px; border-radius:14px; padding:16px 18px; font-size:.95rem; line-height:1.55; }
    .ml-status.is-show { display:block; animation:mlIn .4s var(--ease); }
    .ml-status.ok { background:#EAF6EF; color:#14532D; border:1px solid #BFE3CF; }
    .ml-status.info { background:var(--ysoft); color:var(--ink); border:1px solid #EEDC86; }
    .ml-status.bad { background:#FDECEA; color:#7A1A14; border:1px solid #F3C2BD; }
    .ml-status a { color:inherit; font-weight:700; }
    .ml-hp { position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }
    .ml-skip { position:fixed; left:12px; top:-60px; z-index:2000; background:#F7D840; color:#1E252B; font-weight:700; padding:10px 16px; border-radius:10px; text-decoration:none; }
    .ml-skip:focus { top:12px; }

    /* sticky mobile CTA */
    .ml-sticky { position:fixed; left:12px; right:12px; bottom:12px; z-index:900; display:none; transition:opacity .3s, transform .3s var(--ease); }
    .ml-sticky a { width:100%; box-shadow:0 12px 32px rgba(30,37,43,.28); }
    .ml-sticky.is-hidden { opacity:0; pointer-events:none; transform:translateY(16px); }

    /* ======================= RESPONSIVE ======================= */
    @media (max-width:1180px) {
      .ml-grid { grid-template-columns:repeat(4,1fr); }
      .ml-subnav .ml-sn-title span { display:none; }
    }
    @media (max-width:1024px) {
      .ml-hero .ml-wrap, .ml-why .ml-wrap, .ml-enq .ml-wrap, .ml-help .ml-wrap, .ml-faq .ml-wrap { grid-template-columns:1fr; gap:44px; }
      .ml-board { grid-template-columns:1fr; }
      .ml-card, .ml-enq aside { position:relative; top:auto; }
      .ml-stage { height:520px; max-width:640px; }
      .ml-stats .ml-wrap { grid-template-columns:repeat(2,1fr); }
      .ml-stat:nth-child(3) { border-left:0; padding-left:0; }
      .ml-stat:nth-child(n+3) { border-top:1px solid var(--line); }
      .ml-why .ml-pic .ml-frame { aspect-ratio:16/11; }
      .ml-meter { top:var(--meter-top,80px); }
    }
    @media (max-width:640px) {
      .ml .ml-wrap { padding:0 20px; }
      .ml-hero { padding:118px 0 0; }
      .ml-hero h1 { font-size:clamp(1.85rem,8.4vw,2.3rem); }
      .ml-stage { height:440px; }
      .ml-stage .ml-photo { left:0; right:6%; top:6%; bottom:14%; }
      .ml-stage .ml-slash { width:70px; right:0; }
      .ml-ui-mail { top:0; width:220px; } .ml-ui-meet { top:34%; width:190px; right:-4px; }
      .ml-ui-xl { left:4%; width:250px; }
      .ml-stat { padding:22px 14px 24px; } .ml-stat b { font-size:1.8rem; }
      .ml-ribbon, .ml-plans, .ml-help, .ml-why, .ml-faq, .ml-enq { padding:68px 0; }
      .ml-panel { padding:18px; border-radius:22px; }
      .ml-devices { grid-template-columns:1fr; gap:8px; }
      .ml-dev { flex-direction:row; align-items:center; padding:12px 14px; }
      .ml-dev svg.ml-dev-ic { width:44px; height:34px; flex-shrink:0; }
      .ml-grid { grid-template-columns:repeat(3,1fr); }
      .ml-toggle { display:grid; width:100%; } .ml-toggle button { padding:12px 8px; font-size:.9rem; }
      .ml-card { padding:24px; }
      .ml-row2, .ml-choices.ml-3 { grid-template-columns:1fr; }
      .ml-form { padding:4px 18px 24px; border-radius:22px; }
      .ml-meter { top:var(--meter-top,64px); }
      .ml-sticky { display:block; }
      .ml-submit .ml-btn { width:100%; }
      .ml-subnav nav a { padding:8px 10px; font-size:.82rem; }
      .ml-subnav .ml-btn, .ml-subnav .ml-sn-title { display:none; }
    }
    @media (prefers-reduced-motion: reduce) {
      .ml *, .ml *::before, .ml *::after, .ml-subnav, .ml-sticky { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
      .ml-js .ml [data-rv], .ml-js .ml-hero h1 .ml-ln > span, .ml-js .ml-ui { opacity:1 !important; transform:none !important; }
      .ml-js .ml .ml-mark { background-size:100% 30% !important; }
      .ml-track { transform:none !important; flex-wrap:wrap; width:auto; justify-content:center; }
      .ml-track [aria-hidden="true"] { display:none; }
      .ml-progress { display:none; }
    }

    /* ==========================================================
       V3 — motion-led SaaS edition (product canvas, connected
       workflow, plan explorer, bento, conversion panel).
       Layered on the shared .ml component styles above.
       ========================================================== */
    @keyframes mlIn { from { opacity:0; transform:translateY(8px); } }
    @keyframes mlFloat { 50% { translate:0 -8px; } }
    @keyframes v3Dash { to { stroke-dashoffset:-24; } }
    @keyframes v3Ring { 0% { box-shadow:0 0 0 0 rgba(247,216,64,.0), var(--sh2); } 30% { box-shadow:0 0 0 6px rgba(247,216,64,.85), var(--sh2); } 100% { box-shadow:0 0 0 22px rgba(247,216,64,0), var(--sh2); } }
    @keyframes v3Blink { 50% { opacity:.35; } }

    /* Page-only: the site sets overflow-x:hidden on html/body, which silently disables position:sticky.
       'clip' prevents sideways scroll the same way without breaking sticky (older browsers keep 'hidden'). */
    @supports (overflow:clip) { html, body { overflow-x:clip; } }
    .v3 { background:#fff; }
    .v3 .v3-head { max-width:46rem; margin-bottom:48px; }
    .v3 .v3-center { margin-left:auto; margin-right:auto; text-align:center; }
    .v3 .v3-center .ml-lede { margin:0 auto; }
    .v3 .ml-kick { display:inline-flex; align-items:center; gap:10px; font-size:.76rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--ink3); }

    /* ---------- HERO ---------- */
    .v3-hero {
      position: relative;
      padding: 138px 0 0;
      background: #ffffff;
      overflow: hidden;
    }
    .v3-hero-bg-art {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      pointer-events: none;
      z-index: 0;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .v3-hero-bg-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 20%;
      opacity: 0.46;
      filter: saturate(1.2) contrast(1.08);
      transform: scale(1.02);
    }
    .v3-hero-bg-art::after {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 50% 32%, rgba(255, 255, 255, 0.86) 0%, rgba(255, 255, 255, 0.80) 42%, rgba(255, 255, 255, 0.45) 75%, rgba(255, 255, 255, 0.20) 100%);
      pointer-events: none;
    }
    .v3-hero .v3-hero-copy {
      position: relative;
      z-index: 2;
    }
    .v3-hero h1 {
      color: #07152B;
      text-shadow: 0 1px 3px rgba(255, 255, 255, 0.95), 0 0 24px rgba(255, 255, 255, 0.92), 0 0 45px #ffffff;
    }
    .v3-hero .v3-lede {
      color: #0f172a !important;
      font-weight: 500 !important;
      text-shadow: 0 1px 2px rgba(255, 255, 255, 0.95), 0 0 18px rgba(255, 255, 255, 0.95), 0 0 32px #ffffff;
    }
    .v3-hero .ml-crumbs {
      background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      padding: 4px 16px;
      border-radius: 999px;
      border: 1px solid rgba(10, 31, 63, 0.08);
      display: inline-flex;
      margin-bottom: 22px;
      box-shadow: 0 2px 8px rgba(10, 31, 63, 0.03);
    }
    .v3-hero .v3-trust {
      background: rgba(255, 255, 255, 0.92);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      padding: 14px 22px;
      border-radius: 16px;
      border: 1px solid rgba(10, 31, 63, 0.08);
      box-shadow: 0 4px 16px rgba(10, 31, 63, 0.04);
    }
    .v3-hero-copy, .v3-canvas-wrap, .v3-hero .ml-wrap {
      position: relative;
      z-index: 1;
    }
    .v3 .v3-hero .v3-hero-copy { text-align:center; display:flex; flex-direction:column; align-items:center; gap:0; }
    .v3-hero .ml-crumbs { font-size:.82rem; color:var(--ink4); margin-bottom:26px; }
    .v3-hero .ml-crumbs a { color:var(--ink3); text-decoration:none; } .v3-hero .ml-crumbs a:hover { color:var(--ink); }
    .v3-eyebrow { display:inline-flex; align-items:center; gap:12px; padding:7px 16px 7px 8px; border-radius:999px; background:#fff; border:1px solid var(--line); box-shadow:0 1px 2px rgba(30,37,43,.04); font-size:.86rem; font-weight:600; color:var(--ink2); }
    .v3-ey2 { display:inline-flex; align-items:center; gap:12px; }
    .v3-eyebrow i { width:4px; height:4px; border-radius:50%; background:var(--ink4); }
    .v3-stack { display:flex; }
    .v3-stack img { width:28px; height:28px; padding:4px; border-radius:50%; background:#fff; border:1px solid var(--line); margin-left:-7px; object-fit:contain; }
    .v3-stack img:first-child { margin-left:0; }
    .v3-hero h1 { font-size:clamp(2.5rem,5.2vw,4.4rem); line-height:1.02; font-weight:800; letter-spacing:-.04em; margin:24px 0 20px; max-width:22ch; }
    .v3-hero h1 .ml-ln { display:block; overflow:hidden; padding-bottom:.07em; }
    .v3-hero h1 .ml-ln > span { display:block; }
    .ml-js .v3-hero h1 .ml-ln > span { transform:translateY(106%); transition:transform 1s var(--ease) .15s; }
    .ml-js .v3-hero h1 .ml-ln + .ml-ln > span { transition-delay:.27s; }
    .ml-js .v3-hero h1.is-in .ml-ln > span { transform:none; }
    .v3-lede { font-size:1.13rem; line-height:1.6; color:var(--ink2); max-width:38rem; }
    .v3-ctas { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:30px; }

    /* product canvas */
    .v3-canvas-wrap { max-width:1280px; margin:52px auto 0; padding:0 28px; perspective:1600px; }
    .v3-canvas { --t:0; --mx:0; --my:0; position:relative; height:600px; transform-origin:50% 0; transform:rotateX(calc(var(--t) * 16deg)) scale(calc(1 - var(--t) * .05)); will-change:transform; }
    .v3-links { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
    .v3-links path { fill:none; stroke:rgba(30,37,43,.22); stroke-width:1.4; stroke-dasharray:4 5; vector-effect:non-scaling-stroke; }
    .v3-canvas.is-go .v3-links path { animation:v3Dash 1.6s linear infinite; }
    .ml-js .v3-links { opacity:0; transition:opacity .8s ease 1.1s; }
    .ml-js .v3-canvas.is-go .v3-links { opacity:1; }

    .v3-ic { position:absolute; left:var(--x); top:var(--y); z-index:3; display:flex; flex-direction:column; align-items:center; gap:8px; translate:-50% -50%; }
    .v3-ic > span { width:76px; height:76px; border-radius:22px; background:#fff; border:1px solid rgba(30,37,43,.07); box-shadow:0 1px 2px rgba(30,37,43,.05), 0 16px 34px -14px rgba(30,37,43,.28);
                    display:flex; align-items:center; justify-content:center; transform:translate(calc(var(--mx) * var(--z) * -14px), calc(var(--my) * var(--z) * -10px)); transition:transform .5s var(--ease); }
    .v3-ic.is-lg > span { width:92px; height:92px; border-radius:26px; }
    .v3-ic img { width:58%; height:58%; object-fit:contain; animation:mlFloat 7s ease-in-out infinite; animation-delay:calc(var(--i) * -.7s); }
    .v3-ic b { font:600 .74rem 'Inter',sans-serif; color:var(--ink3); background:rgba(255,255,255,.9); padding:2px 8px; border-radius:999px; }
    .v3-icons .v3-ic:nth-child(-n+5) { --fx:150px; } .v3-icons .v3-ic:nth-child(n+6) { --fx:-150px; }
    .ml-js .v3-ic { opacity:0; transform:translateX(var(--fx,0)) scale(.5); }
    .v3-ic { transition:opacity .7s var(--ease), transform 1.1s var(--ease); transition-delay:calc(var(--i) * 70ms + 250ms); }
    .ml-js .v3-canvas.is-go .v3-ic { opacity:1; transform:none; }

    .v3-win { position:absolute; left:22%; right:22%; top:4%; bottom:6%; z-index:2; background:#fff; border-radius:24px; border:1px solid rgba(30,37,43,.08);
              box-shadow:0 2px 4px rgba(30,37,43,.04), 0 40px 80px -30px rgba(30,37,43,.32); overflow:hidden; display:flex; flex-direction:column; }
    .v3-chrome { display:flex; align-items:center; gap:12px; padding:14px 20px; border-bottom:1px solid var(--line); background:#FCFCFA; font-size:.85rem; }
    .v3-chrome b { font-family:'Manrope',sans-serif; color:var(--ink); font-size:.95rem; }
    .v3-dots { display:flex; gap:6px; } .v3-dots i { width:10px; height:10px; border-radius:50%; background:#E3E3DE; }
    .v3-tag { font-size:.72rem; font-weight:700; padding:3px 10px; border-radius:999px; background:var(--grey); color:var(--ink3); }
    .v3-site { margin-left:auto; font-size:.76rem; color:var(--ink4); font-weight:600; }
    .v3-thead, .v3-row { display:grid; grid-template-columns:44px 1fr 1.5fr 112px; align-items:center; gap:14px; padding:0 22px; }
    .v3-thead { grid-template-columns:1fr 1.5fr 112px; padding:14px 22px 8px 80px; font-size:.7rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--ink4); }
    .v3-rows { flex:1; display:flex; flex-direction:column; justify-content:space-evenly; }
    .v3-row { min-height:62px; border-top:1px solid rgba(30,37,43,.06); }
    .v3-row:first-child { border-top:0; }
    .v3-av { width:40px; height:40px; border-radius:50%; background:var(--grey); color:var(--ink2); font:800 .75rem 'Manrope',sans-serif; display:flex; align-items:center; justify-content:center; }
    .v3-row:nth-child(-n+2) .v3-av { background:#1E252B; color:var(--y); }
    .v3-who b { display:block; color:var(--ink); font-size:.95rem; } .v3-who small { color:var(--ink3); font-size:.8rem; }
    .v3-need { display:flex; align-items:center; gap:10px; font-size:.88rem; color:var(--ink2); }
    .v3-need img { width:22px; height:22px; object-fit:contain; }
    .v3-lic { justify-self:end; font-size:.78rem; font-weight:800; padding:7px 14px; border-radius:999px; background:var(--grey); color:var(--ink2); border:1px solid var(--line); }
    .v3-lic.is-std { background:var(--y); border-color:var(--y); color:var(--ink); }
    .ml-js .v3-row { opacity:0; transform:translateY(12px); transition:opacity .6s var(--ease), transform .6s var(--ease); transition-delay:calc(var(--r) * 120ms + 900ms); }
    .ml-js .v3-row .v3-lic { opacity:0; transform:scale(.7); transition:opacity .4s ease, transform .5s cubic-bezier(.3,1.5,.5,1); transition-delay:calc(var(--r) * 120ms + 1350ms); }
    .ml-js .v3-canvas.is-go .v3-row, .ml-js .v3-canvas.is-go .v3-row .v3-lic { opacity:1; transform:none; }
    .v3-sum { display:flex; align-items:center; gap:18px; padding:16px 22px; border-top:1px solid var(--line); background:#FCFCFA; font-size:.86rem; color:var(--ink3); }
    .v3-sum b { color:var(--ink); font-family:'Manrope',sans-serif; font-size:1.05rem; margin-right:4px; }
    .v3-split { flex:1; display:flex; gap:4px; height:10px; max-width:260px; }
    .v3-split i { width:var(--w); border-radius:4px; background:#D9D9D3; transform-origin:0 50%; }
    .v3-split i.s { background:var(--y); }
    .ml-js .v3-split i { transform:scaleX(0); transition:transform 1s var(--ease) 1.9s; }
    .ml-js .v3-canvas.is-go .v3-split i { transform:none; }

    .v3-chip { position:absolute; z-index:4; display:flex; align-items:center; gap:12px; padding:12px 18px 12px 12px; background:#fff; border-radius:16px; border:1px solid rgba(30,37,43,.07);
               box-shadow:0 22px 44px -18px rgba(30,37,43,.35); font-size:.86rem; color:var(--ink3); transition:opacity .7s var(--ease) 2.1s, transform .9s var(--ease) 2.1s; }
    .v3-chip img { width:36px; height:36px; padding:6px; border-radius:10px; background:var(--grey); object-fit:contain; }
    .v3-chip b { display:block; color:var(--ink); font-family:'Manrope',sans-serif; font-size:1.1rem; }
    .v3-chip-a { right:24%; bottom:-6%; } .v3-chip-b { right:35%; top:-5%; }
    .ml-js .v3-chip { opacity:0; transform:translateY(18px); }
    .ml-js .v3-canvas.is-go .v3-chip { opacity:1; transform:none; }

    .v3-trust { list-style:none; margin:56px 0 0; padding:26px 0 30px; border-top:1px solid var(--line); display:flex; justify-content:center; flex-wrap:wrap; gap:14px 44px; }
    .v3-trust li { display:flex; align-items:center; gap:10px; font-size:.92rem; font-weight:600; color:var(--ink2); }
    .v3-trust svg { width:20px; height:20px; color:var(--ink); }

    /* ---------- CONNECTED WORKFLOW ---------- */
    .v3-flow { padding:120px 0 110px; background:#fff; }
    .v3-flow-grid { display:grid; grid-template-columns:1fr 1.05fr; gap:64px; align-items:start; }
    .v3-steps { list-style:none; margin:0; padding:0; }
    .v3-step { position:relative; padding:30px 0 30px 34px; border-left:2px solid var(--grey2); min-height:32vh; display:flex; flex-direction:column; justify-content:center; transition:border-color .4s; }
    .v3-step::before { content:""; position:absolute; left:-2px; top:0; width:2px; height:100%; background:var(--ink); transform:scaleY(0); transform-origin:50% 0; transition:transform .6s var(--ease); }
    .v3-step.is-act::before { transform:none; }
    .v3-k { font:800 .8rem 'Manrope',sans-serif; color:var(--ink4); letter-spacing:.1em; }
    .v3-apps { display:flex; gap:8px; margin:14px 0 14px; }
    .v3-apps img { width:46px; height:46px; padding:9px; border-radius:14px; background:#fff; border:1px solid var(--line); box-shadow:0 8px 18px -12px rgba(30,37,43,.3); object-fit:contain; transition:transform .5s var(--ease); }
    .v3-step.is-act .v3-apps img { transform:translateY(-3px); }
    .v3-step h3 { font-size:1.55rem; font-weight:800; margin:0 0 8px; }
    .v3-step p { line-height:1.6; max-width:30rem; }
    .v3-step .v3-eg { margin-top:14px; padding:12px 16px; border-radius:14px; background:var(--grey); font-size:.92rem; color:var(--ink2); }
    .v3-step .v3-eg b { display:block; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink3); margin-bottom:4px; }
    .v3-step:not(.is-act) { color:var(--ink3); }
    .v3-step:not(.is-act) h3 { color:var(--ink3); }
    .v3-step, .v3-step h3 { transition:color .4s; }

    .v3-hub-wrap { position:sticky; top:calc(var(--hdr,114px) + 90px); }
    .v3-hub { position:relative; aspect-ratio:1/1; max-height:68vh; margin-left:auto; border-radius:32px; background:var(--grey);
              background-image:radial-gradient(rgba(30,37,43,.10) 1px, transparent 1.2px); background-size:22px 22px; }
    .v3-hub-lines { position:absolute; inset:0; width:100%; height:100%; }
    .v3-hub-lines path { fill:none; stroke:rgba(30,37,43,.18); stroke-width:1.5; stroke-dasharray:5 6; vector-effect:non-scaling-stroke; transition:stroke .4s; }
    .v3-hub[data-k="0"] .l0, .v3-hub[data-k="1"] .l1, .v3-hub[data-k="2"] .l2, .v3-hub[data-k="3"] .l3 { stroke:#1E252B; stroke-width:2; animation:v3Dash 1.2s linear infinite; }
    .v3-core { position:absolute; left:50%; top:50%; width:40%; aspect-ratio:1/1; translate:-50% -50%; border-radius:26px; overflow:hidden; box-shadow:0 30px 60px -24px rgba(30,37,43,.45); border:5px solid #fff; }
    .v3-core img { width:100%; height:100%; object-fit:cover; }
    .v3-core span { position:absolute; left:10px; bottom:10px; background:#fff; color:var(--ink); font:800 .78rem 'Manrope',sans-serif; padding:6px 12px; border-radius:999px; }
    .v3-node { position:absolute; width:34%; display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; translate:-50% -50%; transition:transform .5s var(--ease), opacity .4s; opacity:.55; }
    .v3-node.n0 { left:22%; top:20%; } .v3-node.n1 { left:78%; top:20%; } .v3-node.n2 { left:78%; top:80%; } .v3-node.n3 { left:22%; top:80%; }
    .v3-ni { display:flex; gap:6px; padding:10px; background:#fff; border-radius:18px; box-shadow:0 14px 30px -16px rgba(30,37,43,.35); border:1px solid rgba(30,37,43,.06); transition:box-shadow .4s, border-color .4s; }
    .v3-ni img { width:34px; height:34px; object-fit:contain; }
    .v3-node b { font:700 .82rem 'Inter',sans-serif; color:var(--ink); background:#fff; padding:4px 10px; border-radius:999px; }
    .v3-hub[data-k="0"] .n0, .v3-hub[data-k="1"] .n1, .v3-hub[data-k="2"] .n2, .v3-hub[data-k="3"] .n3 { opacity:1; transform:scale(1.08); }
    .v3-hub[data-k="0"] .n0 .v3-ni, .v3-hub[data-k="1"] .n1 .v3-ni, .v3-hub[data-k="2"] .n2 .v3-ni, .v3-hub[data-k="3"] .n3 .v3-ni { border-color:var(--y); box-shadow:0 0 0 4px rgba(247,216,64,.45), 0 18px 36px -16px rgba(30,37,43,.4); }

    /* ---------- PLAN EXPLORER ---------- */
    .v3-plans { padding:56px 0 32px; background:var(--grey); border-radius:44px 44px 0 0; }
    .v3-plans .v3-head { margin-bottom:30px; }
    .v3-switch { display:flex; justify-content:center; margin-bottom:34px; }
    .v3-plans .ml-toggle { padding:6px; box-shadow:0 10px 30px -14px rgba(30,37,43,.3); }
    .v3-plans .ml-toggle button { padding:14px 30px; font-size:1rem; }
    .v3-plans .ml-board { grid-template-columns:1.45fr 1fr; gap:20px; }
    .v3-plans .ml-panel { border-radius:28px; padding:30px; box-shadow:0 1px 2px rgba(30,37,43,.04); }
    .v3-plans .ml-card { border-radius:28px; }
    .v3-plans .ml-tile { transition:transform .35s var(--ease), box-shadow .35s var(--ease), opacity .35s, filter .35s, border-color .3s; }
    .v3-plans .ml-tile:hover { transform:translateY(-4px); box-shadow:0 16px 30px -18px rgba(30,37,43,.4); }
    .v3-plans .ml-compare { margin-top:20px; border-radius:24px; }
    /* full comparison: opened from the compact button in the plan card; hidden until then */
    .v3-plans .ml-compare:not([open]) { display:none; }
    .v3-plans .ml-compare { scroll-margin-top:calc(var(--hdr,114px) + 80px); }
    .v3-plans .ml-compare summary .v3-hide { margin-left:auto; margin-right:10px; font-size:.82rem; font-weight:700; color:var(--ink3); }
    .ml-card .v3-cmp { display:flex; align-items:center; justify-content:center; gap:8px; width:max-content; margin:12px auto 0; padding:8px 16px; min-height:36px;
                       border-radius:999px; border:1px solid rgba(255,255,255,.22); color:#E7EAEC; font:600 .84rem 'Inter',sans-serif; text-decoration:none;
                       transition:border-color .25s, background .25s, color .25s; }
    .ml-card .v3-cmp svg { width:16px; height:16px; }
    .ml-card .v3-cmp:hover { border-color:var(--y); color:#fff; background:rgba(255,255,255,.06); }
    .ml-card .v3-cmp:focus-visible { outline:3px solid var(--y); outline-offset:3px; }

    /* ---------- CHOOSER ---------- */
    .v3-help { padding:120px 0; background:#fff; }
    .v3-help .ml-wrap { display:block; }
    .v3-help .v3-help-inner { }
    .v3-help-head { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:end; margin-bottom:34px; }
    .v3-help .ml-mix { background:var(--grey); }
    .v3-help .ml-q { display:grid; grid-template-columns:repeat(3,1fr); padding:8px; border-radius:28px; border:1px solid var(--line); box-shadow:var(--sh1); }
    .v3-help .ml-q fieldset { border-bottom:0; border-right:1px solid var(--line); padding:24px 24px 26px; grid-template-columns:1fr; align-content:start; }
    .v3-help .ml-q fieldset:nth-of-type(3) { border-right:0; }
    .v3-help .ml-q .ml-qn { margin-bottom:10px; }
    .v3-help .ml-q .ml-result { grid-column:1 / -1; margin:0; border-radius:22px; }

    /* ---------- WHY (bento) ---------- */
    .v3-why { padding:56px 0; background:#fff; border-top:1px solid var(--line); }
    .v3-bento { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:minmax(150px,auto); gap:16px; }
    .v3-b { border-radius:26px; background:var(--grey); padding:28px; position:relative; overflow:hidden; margin:0; }
    .v3-b-head { grid-column:1 / 3; background:transparent; padding:8px 24px 8px 0; }
    .v3-b-photo { grid-column:3 / 5; grid-row:1 / 4; padding:0; min-height:420px; }
    .v3-b-photo img { position:absolute; inset:-8% 0; width:100%; height:116%; object-fit:cover; will-change:transform; }
    .v3-b-photo figcaption { position:absolute; left:18px; right:18px; bottom:18px; display:flex; gap:14px; align-items:flex-start; background:rgba(255,255,255,.95); border-radius:18px; padding:16px 18px; box-shadow:var(--sh1); }
    .v3-b-photo .ml-qm { font:800 2.4rem/0.8 'Manrope',sans-serif; color:var(--y); }
    .v3-b-photo figcaption b { display:block; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink3); margin-bottom:4px; }
    .v3-b-photo figcaption span span, .v3-b-photo figcaption > span:last-child { font:700 1.05rem/1.35 'Manrope',sans-serif; color:var(--ink); }
    .v3-b-step { display:flex; flex-direction:column; transition:transform .4s var(--ease), background .4s; }
    .v3-b-step:hover { transform:translateY(-4px); background:#EFEFEA; }
    .v3-bn { font:800 .85rem 'Manrope',sans-serif; width:40px; height:40px; border-radius:12px; background:var(--y); color:var(--ink); display:flex; align-items:center; justify-content:center; margin-bottom:22px; }
    .v3-b-step h3 { font-size:1.15rem; font-weight:800; margin:0 0 8px; }
    .v3-b-step p { font-size:.95rem; line-height:1.55; margin-bottom:16px; }
    .v3-b-step a { margin-top:auto; display:inline-block; margin-right:14px; font-weight:700; font-size:.9rem; color:var(--ink); text-decoration:none; border-bottom:2px solid var(--y); width:max-content; }
    .v3-b-step a + a { margin-top:6px; }
    .v3-b-stat { background:linear-gradient(145deg, #FFFFFF 0%, #FFFDF5 100%); color:#334155; border:1.5px solid rgba(223,194,48,0.5); box-shadow:0 12px 32px rgba(247,216,64,0.14), inset 0 2px 0 #F7D840; display:flex; flex-direction:column; justify-content:space-between; position:relative; }
    .v3-b-stat::after { content:"AUTHORISED PARTNER"; position:absolute; top:18px; right:18px; font-size:.64rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; padding:4px 8px; border-radius:6px; background:rgba(10,31,63,0.06); color:#0a1f3f; }
    .v3-b-stat b { font:800 4rem/1 'Manrope',sans-serif; color:#0a1f3f; letter-spacing:-.04em; }
    .v3-b-stat b span { background:linear-gradient(135deg, #0a1f3f 0%, #1e3a8a 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
    .v3-b-stat sup { font-size:.34em; color:#b45309; font-weight:800; margin-left:4px; top:-1.6em; background:rgba(247,216,64,0.25); padding:2px 6px; border-radius:6px; -webkit-text-fill-color:#b45309; }
    .v3-b-stat > span { font-size:.95rem; line-height:1.55; color:#475569; font-weight:500; }

    /* ---------- FAQ ---------- */
    .v3-faq { padding:56px 0; background:#fff; border-top:1px solid var(--line); }
    .v3-faq .ml-wrap { grid-template-columns:.8fr 1.2fr; }
    .v3-faq-side { position:sticky; top:calc(var(--hdr,114px) + 90px); }
    .v3-ask { margin-top:28px; padding:22px; border-radius:22px; background:var(--grey); display:flex; flex-direction:column; gap:10px; max-width:22rem; }
    .v3-ask b { color:var(--ink); font-family:'Manrope',sans-serif; }
    .v3-ask a { color:var(--ink); font-weight:700; text-decoration:none; border-bottom:2px solid var(--y); width:max-content; }
    .v3-faq-list details { transition:background .3s; border-radius:0; }
    .v3-faq-list summary:hover { padding-left:10px; }
    .v3-faq-list summary { transition:padding .3s var(--ease); }

    /* ---------- CONVERSION ---------- */
    .v3-enq { padding:0 0 110px; background:var(--grey); border-radius:0 0 44px 44px; }  /* continues the grey plan block */
    .v3-enq .ml-choices.ml-2 { grid-template-columns:repeat(2,1fr); }
    .v3-cta-note { margin-top:16px; font-size:.9rem; color:var(--ink3); }
    .v3-enq .ml-wrap { display:block; }
    .v3-conv { display:grid; grid-template-columns:.85fr 1.15fr; border-radius:36px; background:#fff; box-shadow:var(--sh2); }
    .v3-conv.is-ring { animation:v3Ring 1.4s var(--ease); }
    .v3-next { list-style:none; margin:26px 0 0; padding:0; display:grid; gap:10px; }
    .v3-next li { display:flex; align-items:center; gap:12px; font-weight:600; font-size:.95rem; }
    .v3-next i { font-style:normal; width:28px; height:28px; border-radius:50%; background:var(--ink); color:var(--y); font:800 .78rem 'Manrope',sans-serif; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .v3-contact { list-style:none; margin:22px 0 0; padding:0; display:grid; gap:4px; }
    .v3-contact a { display:inline-flex; align-items:center; gap:12px; padding:8px 0; color:var(--ink); font-weight:700; text-decoration:none; }
    .v3-contact a:hover { text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px; }
    .v3-contact svg { width:20px; height:20px; }
    .v3-conv-form { padding:8px 48px 40px; background:#fff; border-radius:36px; }
    .v3-conv-form .ml-meter { background:#fff; top:var(--meter-top,170px); }
    .v3-conv .ml-plan-choice .ml-cbox { padding-right:40px; }
    .v3-conv-form .ml-form { box-shadow:none; border:0; padding:0; background:transparent; border-radius:0; }
    .v3-enq aside { position:relative; top:auto; }

    /* ---------- RESPONSIVE ---------- */
    @media (max-width:1180px) {
      .v3-canvas { height:560px; }
      .v3-win { left:20%; right:20%; }
      .v3-thead, .v3-row { grid-template-columns:40px 1fr 1.3fr 100px; gap:10px; padding:0 16px; }
      .v3-thead { grid-template-columns:1fr 1.3fr 100px; padding-left:66px; }
    }
    @media (max-width:1024px) {
      .v3-canvas-wrap { perspective:none; }
      .v3-canvas { height:auto; transform:none !important; display:flex; flex-direction:column; gap:22px; }
      .v3-links, .v3-chip { display:none; }
      .v3-icons { display:flex; flex-wrap:wrap; justify-content:center; gap:10px 12px; order:0; }
      .v3-ic { position:relative; left:auto; top:auto; translate:none; }
      .v3-ic > span, .v3-ic.is-lg > span { width:58px; height:58px; border-radius:16px; transform:none; }
      .v3-ic b { display:none; }
      .ml-js .v3-ic { transform:translateY(16px) scale(.8); }
      .v3-icons .v3-ic { --fx:0px; }
      .v3-win { position:relative; left:auto; right:auto; top:auto; bottom:auto; order:1; }
      .v3-rows { gap:0; }
      .v3-flow-grid { grid-template-columns:1fr; gap:40px; }
      .v3-hub-wrap { position:relative; top:auto; order:-1; }
      .v3-hub { max-height:none; max-width:560px; margin:0 auto; }
      .v3-step { min-height:0; padding:22px 0 22px 26px; }
      .v3-step:not(.is-act), .v3-step:not(.is-act) h3 { color:inherit; }
      .v3-step::before { transform:none; background:var(--y); }
      .v3-plans .ml-board { grid-template-columns:1fr; }
      .v3-help-head { grid-template-columns:1fr; gap:10px; }
      .v3-help .ml-q { grid-template-columns:1fr; }
      .v3-help .ml-q fieldset { border-right:0; border-bottom:1px solid var(--line); }
      .v3-bento { grid-template-columns:1fr 1fr; }
      .v3-b-head { grid-column:1 / -1; }
      .v3-b-photo { grid-column:1 / -1; grid-row:auto; min-height:380px; }
      .v3-b-stat { grid-column:auto; }
      .v3-faq .ml-wrap { grid-template-columns:1fr; gap:30px; }
      .v3-faq-side { position:static; }
      .v3-conv { grid-template-columns:1fr; }
    }
    @media (max-width:640px) {
      .v3-hero { padding-top:118px; }
      .v3-hero h1 { font-size:clamp(2rem,9vw,2.6rem); }
      .v3-eyebrow { font-size:.8rem; gap:10px; } .v3-ey2 { display:none; }
      .v3-ctas { flex-direction:column; width:100%; } .v3-ctas .ml-btn { width:100%; }
      .v3-canvas-wrap { padding:0 16px; margin-top:40px; }
      .v3-ic > span, .v3-ic.is-lg > span { width:48px; height:48px; border-radius:14px; }
      .v3-chrome { padding:12px 14px; } .v3-site { display:none; }
      .v3-thead { display:none; }
      .v3-row { grid-template-columns:34px 1fr auto; padding:10px 14px; gap:10px; }
      .v3-row .v3-need { grid-column:2 / 4; grid-row:2; font-size:.82rem; margin-top:-4px; }
      .v3-av { width:34px; height:34px; font-size:.68rem; }
      .v3-sum { flex-wrap:wrap; gap:8px 16px; padding:14px; } .v3-split { flex-basis:100%; max-width:none; }
      .v3-trust { gap:12px 22px; justify-content:flex-start; } .v3-trust li { font-size:.85rem; }
      .v3-flow, .v3-plans, .v3-why, .v3-faq { padding:72px 0; }
      .v3-help { padding:72px 0; } .v3-plans { padding-bottom:36px; } .v3-enq { padding-bottom:64px; border-radius:0 0 28px 28px; }
      .v3-enq .ml-choices.ml-2 { grid-template-columns:1fr; }
      .ml-card .ml-btn { font-size:.93rem; padding:0 16px; gap:8px; white-space:nowrap; }
      .v3-plans { border-radius:28px 28px 0 0; }
      .v3-node b { font-size:.7rem; padding:3px 8px; }
      .v3-ni { padding:7px; gap:4px; border-radius:14px; } .v3-ni img { width:24px; height:24px; }
      .v3-core { border-width:3px; border-radius:18px; }
      .v3-step h3 { font-size:1.3rem; }
      .v3-bento { grid-template-columns:1fr; }
      .v3-b-photo { min-height:320px; }
      .v3-conv { border-radius:26px; }
      .v3-conv-form { padding:8px 16px 24px; }
      .v3-switch .ml-toggle { width:100%; } .v3-plans .ml-toggle button { padding:12px 6px; font-size:.92rem; }
    }

    @media (prefers-reduced-motion: reduce) {
      .v3-canvas { transform:none !important; }
      .ml-js .v3-ic, .ml-js .v3-row, .ml-js .v3-row .v3-lic, .ml-js .v3-chip, .ml-js .v3-links, .ml-js .v3-split i { opacity:1 !important; transform:none !important; }
      .v3-ic > span { transform:none !important; }
      .v3-hub-lines path, .v3-links path { animation:none !important; }
    }

    /* ---------- added: outcomes, upgrade paths, form heading ---------- */
    .v3-out { margin-top:90px; padding-top:56px; border-top:1px solid var(--line); }
    .v3-out-h { margin-bottom:26px; }
    .v3-out-h h3 { font-size:clamp(1.4rem,2.2vw,1.85rem); font-weight:800; margin:10px 0 0; }
    .v3-out-list { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
    .v3-out-list li { background:var(--grey); border-radius:22px; padding:22px 20px 22px; transition:transform .35s var(--ease), background .35s; }
    .v3-out-list li:hover { transform:translateY(-4px); background:#EDEDE8; }
    .ml-js .v3-out .v3-out-list li { opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease); transition-delay:calc(var(--d) * 90ms + 150ms); }
    .ml-js .v3-out.is-in .v3-out-list li { opacity:1; transform:none; }
    .v3-oi { display:flex; gap:6px; margin-bottom:16px; min-height:40px; align-items:center; }
    .v3-oi img { width:40px; height:40px; padding:8px; border-radius:12px; background:#fff; border:1px solid var(--line); object-fit:contain; }
    .v3-oi-t { display:inline-flex; width:max-content; padding:0 12px; height:40px; border-radius:12px; background:var(--ink); color:var(--y); font:800 .78rem 'Manrope',sans-serif; letter-spacing:.04em; }
    .v3-out-list b { display:block; color:var(--ink); font-family:'Manrope',sans-serif; font-size:1.02rem; margin-bottom:6px; }
    .v3-out-list p { font-size:.9rem; line-height:1.5; }


    .v3-enq-head { margin-bottom:34px; padding-top:30px; }
    .v3-side-h { font-family:'Manrope',sans-serif; font-size:1.5rem; line-height:1.2; font-weight:800; color:var(--ink); margin:14px 0 12px; }
    .v3-form-title { padding:28px 0 4px; display:flex; flex-direction:column; gap:4px; }
    .v3-form-title b { font-family:'Manrope',sans-serif; font-size:1.3rem; color:var(--ink); }
    .v3-form-title span { font-size:.88rem; color:var(--ink3); }
    .v3-help { border-top:1px solid var(--line); }
    @media (max-width:1180px) { .v3-out-list { grid-template-columns:repeat(3,1fr); } }
    @media (max-width:640px) {
      .v3-out { margin-top:56px; padding-top:40px; }
      .v3-out-list { grid-template-columns:1fr; gap:10px; }
      .v3-out-list li { display:grid; grid-template-columns:auto 1fr; column-gap:14px; padding:16px; border-radius:18px; }
      .v3-out-list li .v3-oi { grid-row:1 / 3; margin:0; align-self:start; flex-direction:column; gap:4px; }
      .v3-out-list li .v3-oi img { width:34px; height:34px; padding:6px; border-radius:10px; }
      .v3-out-list li { grid-template-columns:48px 1fr; }
      .v3-out-list li .v3-oi { align-items:center; }
      .v3-out-list li .v3-oi-t { width:48px; height:34px; padding:0; justify-content:center; align-items:center; font-size:.56rem; letter-spacing:0; border-radius:10px; }
      .v3-out-list b { margin-bottom:2px; }
      .v3-enq-head { padding-top:10px; margin-bottom:24px; }
      .v3-form-title { padding-top:20px; }
    }
    @media (prefers-reduced-motion: reduce) { .ml-js .v3-out .v3-out-list li { opacity:1 !important; transform:none !important; } }

    /* ---------- plan card: original-page pricing ---------- */
    .ml-card .ml-price span { line-height:1.25; }


    /* ---------- quote request: one column ---------- */
    .v3-conv.v3-one { display:block; max-width:880px; margin:0 auto; }
    .v3-how { margin:20px 0 6px; padding:18px 20px 20px; border-radius:20px; background:var(--y); }
    .v3-how-k { display:block; font-size:.7rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); margin-bottom:12px; }
    .v3-how .v3-next { margin:0; grid-template-columns:repeat(3,1fr); gap:12px; }
    .v3-how .v3-next li { align-items:flex-start; font-weight:500; font-size:.86rem; line-height:1.4; color:var(--ink); }
    .v3-how .v3-next li b { display:block; font-weight:800; font-size:.92rem; margin-bottom:2px; }
    .v3-how .v3-next i { flex-shrink:0; }
    .v3-desk { margin-top:30px; padding-top:22px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; }
    .v3-desk .ml-person { display:flex; gap:12px; align-items:center; }
    .v3-desk .ml-person img { width:50px; height:50px; border-radius:12px; object-fit:cover; }
    .v3-desk .ml-person b { display:block; color:var(--ink); font-size:.95rem; } .v3-desk .ml-person span { font-size:.82rem; color:var(--ink3); }
    .v3-desk .v3-contact { margin:0; display:flex; flex-wrap:wrap; gap:4px 20px; }
    .v3-desk .v3-contact a { font-size:.9rem; padding:6px 0; } .v3-desk .v3-contact svg { width:18px; height:18px; }

    @media (max-width:640px) {
      .v3-conv-form { padding:8px 16px 24px; }
      .v3-how { padding:14px 16px 16px; margin-top:12px; }
      .v3-form-title span { display:none; }  /* section intro above already says this */
      .v3-how .v3-next { grid-template-columns:1fr; gap:8px; }
      .v3-how .v3-next li span { font-size:.82rem; }
      .v3-desk { flex-direction:column; align-items:flex-start; }
      .v3-desk .v3-contact { flex-direction:column; gap:0; }
    }

    /* ---------- three-way switch: Basic | Standard | Copilot add-on ---------- */
    .v3-plans .ml-toggle { grid-template-columns:1fr 1fr 1.25fr; }
    .v3-plans .ml-toggle .ml-pill { left:0; background:linear-gradient(135deg, #2D3748 0%, #1E293B 100%); box-shadow:0 4px 14px rgba(30,41,59,.25); border:1px solid rgba(255,255,255,0.08); transition:transform .45s var(--ease), width .45s var(--ease); }  /* position/width set from the active button by script */
    .ml-toggle .ml-tab-cp { display:inline-flex; align-items:center; gap:10px; text-align:left; margin-left:6px; }
    .ml-toggle .ml-tab-cp::before { content:""; position:absolute; left:-4px; top:22%; bottom:22%; width:1px; background:var(--line); }
    .ml-toggle .ml-tab-cp img { width:24px; height:24px; object-fit:contain; flex-shrink:0; }
    .ml-tab-txt { display:flex; flex-direction:column; line-height:1.1; }
    .ml-tab-txt small { font-size:.62rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--ink3); margin-bottom:3px; transition:color .3s; }
    .ml-toggle .ml-tab-cp[aria-selected="true"] small { color:var(--y); }
    .ml-card-logo { width:56px; height:56px; padding:10px; border-radius:16px; background:#fff; object-fit:contain; display:block; margin-bottom:14px; }
    .ml-swap.is-addon { position:relative; }
    .ml-badge.is-cp { background:linear-gradient(90deg,#E9F1FF,#F4E9FF); color:#3B2A7A; }

    /* "Compare plans side by side": button box matching quote CTA */
    .ml-card .v3-cmp { width:100%; margin:12px 0 0; min-height:50px; padding:0 22px; border-radius:999px; background:#F8FAFC; color:#0a1f3f; border:1.5px solid #0a1f3f;
                       font:700 .95rem 'Inter',sans-serif; box-shadow:0 2px 8px rgba(10,31,63,.08); display:inline-flex; align-items:center; justify-content:center; gap:10px; text-decoration:none; transition:all .25s ease; }
    .ml-card .v3-cmp svg { width:18px; height:18px; color:#0a1f3f; flex-shrink:0; transition:transform .25s ease; }
    .ml-card .v3-cmp:hover { background:#0a1f3f; color:#ffffff; border-color:#0a1f3f; transform:translateY(-2px); box-shadow:0 8px 22px rgba(10,31,63,.2); }
    .ml-card .v3-cmp:hover svg { color:#ffffff; transform:scale(1.08); }

    /* also-included chips */
    .v3-also { margin-top:16px; display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
    .v3-also b { font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--ink3); margin-right:4px; }
    .v3-also span { font-size:.84rem; font-weight:600; color:var(--ink2); padding:6px 12px; border-radius:999px; background:var(--grey); }
    .v3-also small { flex-basis:100%; font-size:.74rem; color:var(--ink4); }

    /* form: Copilot add-on checkbox */
    .ml-addon-check { margin-top:12px; display:flex; align-items:center; gap:12px; padding:14px 16px; border:1.5px dashed rgba(30,37,43,.25); border-radius:14px; cursor:pointer; transition:border-color .25s, background .25s; position:relative; }
    .ml-addon-check:hover { border-color:var(--ink); }
    .ml-addon-check input { position:absolute; opacity:0; width:1px; height:1px; }
    .ml-ac-box { width:22px; height:22px; border-radius:6px; border:2px solid rgba(30,37,43,.35); flex-shrink:0; position:relative; transition:background .2s, border-color .2s; }
    .ml-addon-check input:checked ~ .ml-ac-box { background:var(--ink); border-color:var(--ink); }
    .ml-addon-check input:checked ~ .ml-ac-box::after { content:""; position:absolute; left:6px; top:2px; width:6px; height:11px; border:solid var(--y); border-width:0 2.5px 2.5px 0; transform:rotate(45deg); }
    .ml-addon-check input:checked ~ .ml-ac-txt b { color:var(--ink); }
    .ml-addon-check:has(input:checked) { border-style:solid; border-color:var(--ink); background:var(--ysoft); }
    .ml-addon-check input:focus-visible ~ .ml-ac-box { outline:3px solid var(--ink); outline-offset:2px; }
    .ml-addon-check img { width:28px; height:28px; object-fit:contain; }
    .ml-ac-txt { display:flex; flex-direction:column; } .ml-ac-txt b { font-size:.94rem; color:var(--ink2); } .ml-ac-txt small { font-size:.8rem; color:var(--ink3); }

    /* ---------- Beyond the licence ---------- */
    .v3-build { padding:110px 0; background:var(--grey); }
    .v3-build-flow { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; }
    .v3-build-flow::before { content:""; position:absolute; left:6%; right:6%; top:44px; border-top:2px dashed rgba(30,37,43,.18); }
    .v3-build-flow li { position:relative; padding:0 18px; text-align:left; }
    .v3-bf-ic { position:relative; z-index:1; display:inline-flex; gap:6px; padding:12px; border-radius:22px; background:#fff; box-shadow:0 16px 30px -18px rgba(30,37,43,.45); border:1px solid var(--line); }
    .v3-bf-ic img { width:40px; height:40px; object-fit:contain; }
    .v3-bf-n { display:block; margin:18px 0 6px; font:800 .78rem 'Manrope',sans-serif; color:var(--ink4); letter-spacing:.1em; }
    .v3-build-flow h3 { font-size:1.12rem; font-weight:800; margin:0 0 8px; }
    .v3-build-flow p { font-size:.92rem; line-height:1.55; }
    .ml-js .v3-build-flow li { opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease); transition-delay:calc(var(--d) * 140ms + 100ms); }
    .ml-js .v3-build-flow.is-in li { opacity:1; transform:none; }
    .v3-uses { margin-top:46px; display:grid; grid-template-columns:.7fr 1fr 1fr 1fr auto; gap:14px; align-items:center; background:#fff; border-radius:24px; padding:22px 24px; border:1px solid var(--line); }
    .v3-uses > b { font-family:'Manrope',sans-serif; font-size:1.05rem; color:var(--ink); }
    .v3-uses h4 { font-family:'Manrope',sans-serif; font-size:.98rem; font-weight:800; color:var(--ink); margin:0 0 4px; }
    .v3-uses p { font-size:.86rem; line-height:1.45; }
    .v3-uses > div { padding-left:16px; border-left:3px solid var(--y); }
    .v3-build-note { margin-top:14px; font-size:.84rem; color:var(--ink3); }

    @media (max-width:1180px) { .v3-uses { grid-template-columns:1fr 1fr 1fr; } .v3-uses > b, .v3-uses .ml-btn { grid-column:1 / -1; } .v3-uses .ml-btn { justify-self:start; } }
    @media (max-width:1024px) {
      .v3-build-flow { grid-template-columns:1fr 1fr; gap:34px 0; } .v3-build-flow::before { display:none; }
      .v3-plans .ml-toggle button { padding:12px 16px; }
    }
    @media (max-width:640px) {
      .v3-plans .ml-toggle { grid-template-columns:1fr 1fr; border-radius:26px; background:#F8FAFC; border:1.5px solid rgba(45,55,72,.15); }
      .v3-plans .ml-toggle .ml-pill { display:none; }
      .v3-plans .ml-toggle button { border-radius:20px; color:#4A5568; }
      .v3-plans .ml-toggle button[aria-selected="true"] { background:linear-gradient(135deg, #2D3748 0%, #1E293B 100%); color:#ffffff; font-weight:700; box-shadow:0 4px 12px rgba(45,55,72,.25); }
      .ml-toggle .ml-tab-cp { grid-column:1 / -1; margin:4px 0 0; justify-content:center; }
      .ml-toggle .ml-tab-cp::before { left:18%; right:18%; top:-3px; bottom:auto; width:auto; height:1px; }
      .v3-build { padding:72px 0; }
      .v3-build-flow { grid-template-columns:1fr; gap:26px; }
      .v3-build-flow li { padding:0; display:grid; grid-template-columns:auto 1fr; column-gap:16px; }
      .v3-bf-ic { grid-row:1 / 4; align-self:start; padding:8px; border-radius:16px; flex-direction:column; } .v3-bf-ic img { width:32px; height:32px; }
      .v3-bf-n { margin:2px 0 4px; }
      .v3-uses { grid-template-columns:1fr; padding:20px; } .v3-uses .ml-btn { width:100%; }
    }
    @media (prefers-reduced-motion: reduce) { .ml-js .v3-build-flow li { opacity:1 !important; transform:none !important; } }

    /* ---------- Licensing at a glance (right after the hero) ---------- */
    .v3-glance { padding:84px 0 96px; background:var(--grey); border-radius:44px 44px 0 0; }
    .v3-glance .v3-head { margin-bottom:34px; }
    .v3-gl { display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px; align-items:stretch; }
    .v3-gc { position:relative; display:flex; flex-direction:column; background:#fff; border-radius:28px; padding:28px 26px 24px; border:1px solid var(--line);
             box-shadow:0 1px 2px rgba(30,37,43,.04); text-decoration:none; color:inherit; transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
    .v3-gc:hover { transform:translateY(-5px); box-shadow:0 24px 46px -26px rgba(30,37,43,.45); }
    .v3-gc.is-std { background:var(--ink); color:#C9CED3; border-color:var(--ink); }
    .v3-gc.is-cp { border:1.5px dashed rgba(30,37,43,.3); background:#FFFEFA; }
    .v3-gc-tag { align-self:flex-start; font-size:.66rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; padding:5px 11px; border-radius:999px; background:var(--grey); color:var(--ink3); }
    .v3-gc.is-std .v3-gc-tag { background:var(--y); color:var(--ink); }
    .v3-gc.is-cp .v3-gc-tag { background:var(--ink); color:var(--y); }
    .v3-gc-ic { display:flex; gap:6px; margin:18px 0 14px; }
    .v3-gc-ic img { width:42px; height:42px; padding:8px; border-radius:12px; background:#fff; border:1px solid var(--line); object-fit:contain; }
    .v3-gc.is-std .v3-gc-ic img { border-color:rgba(255,255,255,.12); }
    .v3-gc h3 { font-size:1.35rem; font-weight:800; margin:0 0 4px; }
    .v3-gc.is-std h3 { color:#fff; }
    .v3-gc-price { margin:8px 0 4px; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
    .v3-gc-price b { font:800 2.4rem/1 'Manrope',sans-serif; color:var(--ink); letter-spacing:-.035em; }
    .v3-gc.is-std .v3-gc-price b { color:var(--y); }
    .v3-gc-price span { font-size:.88rem; font-weight:600; color:var(--ink3); }
    .v3-gc.is-std .v3-gc-price span { color:#AEB5BB; }
    .v3-gc-terms { font-size:.78rem; color:var(--ink3); margin-bottom:14px; }
    .v3-gc.is-std .v3-gc-terms { color:#9AA1A7; }
    .v3-gc ul { list-style:none; margin:0 0 18px; padding:14px 0 0; border-top:1px solid var(--line); display:grid; gap:8px; }
    .v3-gc.is-std ul { border-color:rgba(255,255,255,.12); }
    .v3-gc li { position:relative; padding-left:22px; font-size:.9rem; line-height:1.45; }
    .v3-gc li::before { content:""; position:absolute; left:2px; top:.42em; width:8px; height:8px; border-radius:50%; background:var(--y); }
    .v3-gc-go { margin-top:auto; display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:.9rem; color:var(--ink); }
    .v3-gc.is-std .v3-gc-go { color:#fff; }
    .v3-gc-go svg { width:16px; height:16px; transition:transform .3s var(--ease); }
    .v3-gc:hover .v3-gc-go svg { transform:translateX(4px); }
    .v3-gl-note { margin-top:18px; display:flex; justify-content:space-between; align-items:center; gap:16px 24px; flex-wrap:wrap; font-size:.84rem; color:var(--ink3); }
    .v3-gl-note .ml-btn { min-height:46px; }
    .ml-js .v3-gl .v3-gc { opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease), box-shadow .4s var(--ease); transition-delay:calc(var(--d) * 110ms + 100ms); }
    .ml-js .v3-gl.is-in .v3-gc { opacity:1; transform:none; }
    .ml-js .v3-gl.is-in .v3-gc:hover { transform:translateY(-5px); transition-delay:0s; }
    .v3-glance + .v3-flow { padding-top:110px; }
    @media (max-width:1024px) { .v3-gl { grid-template-columns:1fr 1fr; } .v3-gc.is-cp { grid-column:1 / -1; } }
    @media (max-width:640px) {
      .v3-glance { padding:60px 0 64px; border-radius:28px 28px 0 0; }
      .v3-gl { grid-template-columns:1fr; gap:12px; }
      .v3-gc { padding:22px 20px 20px; border-radius:22px; }
      .v3-gc-ic { margin:14px 0 10px; } .v3-gc-ic img { width:36px; height:36px; padding:6px; }
      .v3-gc-price b { font-size:2.1rem; }
      .v3-gl-note .ml-btn { width:100%; }
    }
    @media (prefers-reduced-motion: reduce) { .ml-js .v3-gl .v3-gc { opacity:1 !important; transform:none !important; } }

    /* ---------- glance: price-free cards ---------- */
    .v3-gc-run { margin:6px 0 14px; font-size:.9rem; color:var(--ink2); }
    .v3-gc-run b, .v3-gc-best b { display:block; font-size:.66rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--ink3); margin-bottom:3px; }
    .v3-gc.is-std .v3-gc-run { color:#E7EAEC; } .v3-gc.is-std .v3-gc-run b, .v3-gc.is-std .v3-gc-best b { color:var(--y); }
    .v3-gc-best { margin:-4px 0 18px; padding:12px 14px; border-radius:14px; background:var(--grey); font-size:.86rem; line-height:1.45; color:var(--ink2); }
    .v3-gc.is-std .v3-gc-best { background:rgba(255,255,255,.07); color:#E7EAEC; }
    .v3-gc.is-cp .v3-gc-best { background:#F6F4EC; }
    .v3-glance .ml-lede a { color:var(--ink); font-weight:700; text-decoration:none; border-bottom:2px solid var(--y); }
    .v3-explore { min-height:54px; padding:0 28px; font-size:1.02rem; }

    /* ---------- Why: Microsoft 365 setup view (replaces the people photo) ---------- */
    .v3-setup { background:linear-gradient(160deg,#FFF6C9 0%,#F3F3EF 58%); display:flex; flex-direction:column; justify-content:flex-start; padding:26px 26px 112px; }
    .v3-su-win { background:#fff; border-radius:20px; border:1px solid rgba(30,37,43,.08); box-shadow:0 30px 60px -32px rgba(30,37,43,.45); overflow:hidden; }
    .v3-su-top { display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--line); background:#FCFCFA; }
    .v3-su-top b { font-family:'Manrope',sans-serif; font-size:.92rem; color:var(--ink); }
    .v3-su-by { margin-left:auto; font-size:.72rem; font-weight:700; color:var(--ink3); background:var(--grey); padding:3px 10px; border-radius:999px; }
    .v3-su-list { list-style:none; margin:0; padding:6px 14px 10px; }
    .v3-su-list li { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; padding:11px 2px; border-top:1px solid rgba(30,37,43,.06); }
    .v3-su-list li:first-child { border-top:0; }
    .v3-setup .v3-su-ic { display:flex; gap:4px; min-width:76px; }
    .v3-setup .v3-su-ic img { position:static; inset:auto; width:34px; height:34px; padding:6px; border-radius:10px; background:#fff; border:1px solid var(--line); object-fit:contain; will-change:auto; }
    .v3-su-list b { display:block; font-size:.88rem; color:var(--ink); line-height:1.3; }
    .v3-su-list small { display:block; font-size:.76rem; color:var(--ink3); line-height:1.35; }
    .v3-su-ok { width:22px; height:22px; border-radius:50%; background:#E7F5EE; position:relative; flex-shrink:0; }
    .v3-su-ok::after { content:""; position:absolute; left:8px; top:4px; width:5px; height:10px; border:solid #1F9D63; border-width:0 2.2px 2.2px 0; transform:rotate(45deg); }
    .v3-su-bar { display:block; height:5px; border-radius:3px; background:var(--grey); margin-top:6px; overflow:hidden; max-width:200px; }
    .v3-su-bar i { display:block; height:100%; width:100%; background:var(--y); transform-origin:0 50%; }
    .ml-js .v3-setup .v3-su-list li { opacity:0; transform:translateY(10px); transition:opacity .5s var(--ease), transform .5s var(--ease); transition-delay:calc(var(--r) * 120ms + 300ms); }
    .ml-js .v3-setup.is-in .v3-su-list li { opacity:1; transform:none; }
    .ml-js .v3-setup .v3-su-bar i { transform:scaleX(.15); transition:transform 1.4s var(--ease) 1s; }
    .ml-js .v3-setup.is-in .v3-su-bar i { transform:none; }
    .ml-js .v3-setup .v3-su-ok { transform:scale(0); transition:transform .4s cubic-bezier(.3,1.5,.5,1); transition-delay:calc(var(--r) * 120ms + 700ms); }
    .ml-js .v3-setup .is-run .v3-su-ok { transition-delay:2.3s; }
    .ml-js .v3-setup.is-in .v3-su-ok { transform:none; }
    .v3-desk-ic { display:flex; gap:4px; padding:8px; border-radius:14px; background:#fff; border:1px solid var(--line); }
    .v3-desk-ic img { width:26px; height:26px; object-fit:contain; }
    @media (min-width:1025px) {
      .v3-setup { justify-content:center; padding:34px 34px 120px; }
      .v3-su-top { padding:15px 20px; } .v3-su-top b { font-size:1rem; }
      .v3-su-list { padding:8px 20px 14px; }
      .v3-su-list li { padding:16px 2px; gap:16px; }
      .v3-setup .v3-su-ic { min-width:88px; } .v3-setup .v3-su-ic img { width:40px; height:40px; padding:7px; }
      .v3-su-list b { font-size:.98rem; } .v3-su-list small { font-size:.82rem; }
      .v3-su-ok { width:26px; height:26px; } .v3-su-ok::after { left:9px; top:5px; width:6px; height:11px; }
    }
    @media (max-width:640px) {
      .v3-setup { padding:16px 14px 118px; }
      .v3-su-top { padding:10px 12px; } .v3-su-by { display:none; }
      .v3-su-list { padding:4px 10px 8px; }
      .v3-setup .v3-su-ic { min-width:0; flex-direction:column; } .v3-setup .v3-su-ic img { width:30px; height:30px; padding:5px; }
      .v3-su-list li { gap:10px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .ml-js .v3-setup .v3-su-list li, .ml-js .v3-setup .v3-su-ok, .ml-js .v3-setup .v3-su-bar i { opacity:1 !important; transform:none !important; }
    }

    /* ---------- workflow hub centre: "Your business" Microsoft 365 tenant (replaces the people photo) ---------- */
    .v3-core.v3-org { background:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; padding:8% 8% 11%; }
    .v3-core.v3-org > .v3-org-dom, .v3-core.v3-org > .v3-org-grid { position:relative; left:auto; bottom:auto; }
    .v3-core.v3-org > .v3-org-grid { background:transparent; padding:0; border-radius:0; }
    .v3-org-dom { font:700 .64rem 'Inter',sans-serif; color:var(--ink3); background:var(--grey); padding:4px 10px; border-radius:999px; white-space:nowrap; max-width:none; overflow:visible; }
    .v3-org-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; width:84%; }
    .v3-org-grid img { width:100%; height:auto; aspect-ratio:1/1; object-fit:contain; padding:16%; border-radius:12px; background:#fff; border:1px solid var(--line); }
    .v3-org-ppl { display:flex; }
    .v3-org-ppl i { font:800 .58rem 'Manrope',sans-serif; font-style:normal; width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--grey); color:var(--ink2); border:2px solid #fff; margin-left:-6px; }
    .v3-org-ppl i:first-child { margin-left:0; background:var(--ink); color:var(--y); }
    .v3-org-ppl i:last-child { background:var(--y); color:var(--ink); }
    .v3-core.v3-org .v3-org-lbl { position:absolute; left:50%; bottom:-14px; translate:-50% 0; background:var(--ink); color:#fff; font:800 .78rem 'Manrope',sans-serif; padding:6px 14px; border-radius:999px; white-space:nowrap; }
    .v3-core.v3-org { overflow:visible; }
    .v3-hub[data-k] .v3-org-grid img { transition:transform .4s var(--ease), border-color .4s; }
    .v3-hub[data-k="0"] .v3-org-grid img:nth-child(1), .v3-hub[data-k="0"] .v3-org-grid img:nth-child(9),
    .v3-hub[data-k="1"] .v3-org-grid img:nth-child(2),
    .v3-hub[data-k="2"] .v3-org-grid img:nth-child(6), .v3-hub[data-k="2"] .v3-org-grid img:nth-child(7),
    .v3-hub[data-k="3"] .v3-org-grid img:nth-child(3), .v3-hub[data-k="3"] .v3-org-grid img:nth-child(4), .v3-hub[data-k="3"] .v3-org-grid img:nth-child(5), .v3-hub[data-k="3"] .v3-org-grid img:nth-child(8)
      { border-color:var(--y); box-shadow:0 0 0 2px var(--y); transform:scale(1.06); }
    @media (max-width:640px) {
      .v3-core.v3-org { gap:0; padding:10% 9% 12%; }
      .v3-org-dom { display:none; }
      .v3-org-grid { gap:4px; width:84%; } .v3-org-grid img { border-radius:7px; padding:12%; }
      .v3-org-ppl i { width:16px; height:16px; font-size:.42rem; margin-left:-4px; border-width:1px; }
      .v3-core.v3-org .v3-org-lbl { font-size:.62rem; padding:4px 9px; bottom:-11px; }
    }

    /* simplified page: the plans block now follows the hero section flow directly */
    .ml-help-check { margin-top:12px; }
    .ml-help-check + .ml-addon-check { margin-top:10px; }

    /* ---------- Why SmartSoft: compact "built on your licences" strip (from the original campaign page) ---------- */
    .v3-builds { margin-top:18px; border-radius:26px; background:var(--grey); padding:26px 28px; }
    .v3-bd-h b { display:block; font-family:'Manrope',sans-serif; font-size:1.25rem; font-weight:800; color:var(--ink); margin-top:8px; }
    .v3-bd-list { list-style:none; margin:20px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
    .v3-bd-list li { display:flex; flex-direction:column; gap:12px; background:#fff; border-radius:18px; padding:16px; border:1px solid var(--line); transition:transform .35s var(--ease), box-shadow .35s; }
    .v3-bd-list li:hover { transform:translateY(-3px); box-shadow:var(--sh1); }
    .v3-bd-ic { display:flex; gap:6px; flex-shrink:0; } .v3-bd-ic img { flex-shrink:0; } .v3-bd-cta svg { flex-shrink:0; }
    .v3-bd-ic img { width:38px; height:38px; padding:7px; border-radius:11px; background:var(--grey); object-fit:contain; }
    .v3-bd-list b { display:block; font-size:.98rem; color:var(--ink); margin-bottom:3px; }
    .v3-bd-list span span, .v3-bd-list li > span:last-child { font-size:.88rem; line-height:1.45; color:var(--ink2); }
    .v3-bd-foot { margin-top:16px; display:flex; justify-content:space-between; align-items:center; gap:12px 24px; flex-wrap:wrap; font-size:.92rem; color:var(--ink2); }
    .v3-bd-foot b { color:var(--ink); }
    .v3-bd-cta { display:inline-flex; align-items:center; gap:8px; font-weight:700; color:var(--ink); text-decoration:none; border-bottom:2px solid var(--y); padding-bottom:2px; }
    .v3-bd-cta svg { width:16px; height:16px; transition:transform .3s var(--ease); } .v3-bd-cta:hover svg { transform:translateX(4px); }
    .ml-js .v3-builds .v3-bd-list li { opacity:0; transform:translateY(14px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
    .ml-js .v3-builds.is-in .v3-bd-list li { opacity:1; transform:none; }
    .ml-js .v3-builds.is-in .v3-bd-list li:nth-child(2) { transition-delay:.08s; } .ml-js .v3-builds.is-in .v3-bd-list li:nth-child(3) { transition-delay:.16s; } .ml-js .v3-builds.is-in .v3-bd-list li:nth-child(4) { transition-delay:.24s; }
    @media (max-width:1024px) { .v3-bd-list { grid-template-columns:1fr 1fr; } }
    @media (max-width:640px) {
      .v3-builds { padding:20px 16px; border-radius:22px; }
      .v3-bd-list { grid-template-columns:1fr; gap:10px; }
      .v3-bd-list li { flex-direction:row; align-items:flex-start; padding:14px; }
      .v3-bd-ic { flex-direction:column; } .v3-bd-ic img { width:34px; height:34px; padding:6px; }
    }
    @media (prefers-reduced-motion: reduce) { .ml-js .v3-builds .v3-bd-list li { opacity:1 !important; transform:none !important; } }

/* === Style block: services-discovery-css === */
/* ============================================================
   Services Discovery System (Top Ribbon, Hero Pill, Smart Dock)
   ============================================================ */
/* --- 1. Top Smart Announcement Ribbon --- */
.top-services-ribbon {
  background: #0A1F3F;
  color: #ffffff;
  padding: 8px 16px;
  font-size: 13px;
  border-bottom: 1px solid rgba(247, 216, 64, 0.3);
  position: relative;
  z-index: 1001;
}
.tsr-wrap {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  text-align: center;
}
.tsr-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #F7D840;
  color: #0A1F3F;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border-radius: 999px;
  flex-shrink: 0;
}
.tsr-text {
  color: #E2E8F0;
  font-weight: 500;
}
.tsr-text strong {
  color: #ffffff;
}
.tsr-cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #F7D840;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(247, 216, 64, 0.4);
  padding-bottom: 1px;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.tsr-cta:hover {
  color: #ffffff;
  border-bottom-color: #ffffff;
}
.tsr-cta svg {
  transition: transform 0.25s ease;
}
.tsr-cta:hover svg {
  transform: translateX(3px);
}
@media (max-width: 768px) {
  .top-services-ribbon {
    padding: 7px 12px;
    font-size: 12px;
  }
  .tsr-text {
    display: none;
  }
}

/* --- 2. Interactive Clickable Hero Outcome Pill --- */
.v3-hero-outcome.v3-ho-clickable {
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.v3-hero-outcome.v3-ho-clickable:hover {
  transform: translateY(-2px);
  background: #ffffff !important;
  border-color: rgba(223, 194, 48, 0.7) !important;
  box-shadow: 0 6px 20px rgba(10, 31, 63, 0.08), 0 0 0 1px rgba(223, 194, 48, 0.3) !important;
}
.v3-ho-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #0284c7;
  font-weight: 700;
  margin-left: 6px;
  transition: transform 0.2s ease, color 0.2s ease;
}
.v3-hero-outcome.v3-ho-clickable:hover .v3-ho-more {
  color: #0369a1;
  transform: translateX(3px);
}

/* --- 3. Smart Floating Services Dock (Bottom Right) --- */
.v3-smart-dock {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9990;
  width: 320px;
  max-width: calc(100vw - 32px);
  background: #ffffff;
  border-radius: 20px;
  border: 1.5px solid rgba(10, 31, 63, 0.12);
  box-shadow: 0 16px 40px -8px rgba(10, 31, 63, 0.2), 0 4px 12px rgba(10, 31, 63, 0.06);
  padding: 18px 20px 16px;
  opacity: 0;
  transform: translateY(30px) scale(0.96);
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.v3-smart-dock.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.v3-dock-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 26px;
  height: 26px;
  border: none;
  background: #F1F5F9;
  color: #64748b;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  transition: all 0.2s ease;
}
.v3-dock-close:hover {
  background: #e2e8f0;
  color: #0a1f3f;
}
.v3-dock-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #0a1f3f;
  margin-bottom: 10px;
}
.v3-dock-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #16A34A;
  box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.7);
  animation: v3DockPulse 2s infinite;
}
@keyframes v3DockPulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(22, 163, 74, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}
.v3-dock-content {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
}
.v3-dock-thumb {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #F8FAFC;
  border: 1px solid rgba(10, 31, 63, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.v3-dock-thumb img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}
.v3-dock-info strong {
  display: block;
  font-size: 13.5px;
  font-weight: 800;
  color: #0a1f3f;
  margin-bottom: 3px;
  line-height: 1.25;
}
.v3-dock-info p {
  font-size: 12px;
  color: #475569;
  line-height: 1.4;
  margin: 0;
}
.v3-dock-footer {
  display: flex;
}
.v3-dock-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #F7D840;
  color: #0A1F3F;
  font-weight: 800;
  font-size: 12.5px;
  padding: 9px 16px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 4px 14px -4px rgba(223, 194, 48, 0.8);
  transition: all 0.25s ease;
}
.v3-dock-btn:hover {
  background: #fadb50;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -4px rgba(223, 194, 48, 0.95);
}
.v3-dock-btn svg {
  transition: transform 0.25s ease;
}
.v3-dock-btn:hover svg {
  transform: translateX(3px);
}

/* Minimized Dock Trigger Pill */
.v3-dock-min-pill {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9989;
  background: #0A1F3F;
  color: #F7D840;
  border: 1.5px solid #F7D840;
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 800;
  display: none;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(10, 31, 63, 0.25);
  transition: all 0.25s ease;
}
.v3-dock-min-pill:hover {
  background: #142e5a;
  transform: translateY(-2px);
}

/* === Style block: ml-services-solutions-css === */
/* ============================================================
/* --- Hero Value Proposition & Outcome Polish --- */
.v3-lede {
  font-size: 1.16rem !important;
  line-height: 1.68 !important;
  color: #475569 !important;
  max-width: 44rem !important;
  margin: 0 auto !important;
  text-align: center !important;
}
.v3-lede .v3-lede-highlight {
  color: #0a1f3f !important;
  font-weight: 700 !important;
}
.v3-hero-outcome {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #F8FAFC;
  border: 1px solid rgba(10, 31, 63, 0.08);
  border-radius: 999px;
  padding: 6px 18px 6px 8px;
  margin: 18px auto 0;
  box-shadow: 0 2px 8px rgba(10, 31, 63, 0.04);
}
.v3-ho-pill {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #0a1f3f;
  background: #ffffff;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(10, 31, 63, 0.08);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.v3-ho-pill i {
  color: #059669;
}
.v3-ho-txt {
  font-size: 0.92rem;
  font-weight: 600;
  color: #334155;
  line-height: 1.4;
}
@media (max-width: 640px) {
  .v3-hero-outcome {
    border-radius: 16px;
    padding: 10px 14px;
    flex-direction: column;
    gap: 8px;
  }
}


   SmartSoft - Microsoft 365 Connected Workspace Styles
   Brand Identity: Navy (#0a1f3f), Gold (#F7D840 / #DFC230),
   Graphite Grey (#2D3748), Warm Grey (#F4F6F9 / #F8FAFC)
   ============================================================ */

/* --- Plan Toggle: Graphite Grey Palette --- */
.v3-plans .ml-toggle {
  background: #F8FAFC !important;
  border: 1.5px solid rgba(45, 55, 72, 0.15) !important;
  box-shadow: 0 4px 18px rgba(10, 31, 63, 0.06) !important;
}
.v3-plans .ml-toggle .ml-pill {
  background: linear-gradient(135deg, #2D3748 0%, #1E293B 100%) !important;
  box-shadow: 0 4px 14px rgba(30, 41, 59, 0.25) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 999px !important;
}
.v3-plans .ml-toggle button {
  color: #4A5568 !important;
  background: transparent !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  transition: color 0.25s ease !important;
}
.v3-plans .ml-toggle button:hover {
  color: #1A202C !important;
}
.v3-plans .ml-toggle button[aria-selected="true"] {
  background: transparent !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}
.v3-plans .ml-toggle .ml-tab-cp small {
  color: #64748B !important;
  transition: color 0.2s ease !important;
}
.v3-plans .ml-toggle .ml-tab-cp[aria-selected="true"] small {
  color: #F7D840 !important;
  font-weight: 800 !important;
}
.v3-plans .ml-toggle .ml-tab-cp::before {
  background: rgba(45, 55, 72, 0.15) !important;
}

/* --- Plan Card Secondary Action: Compare Plans Side by Side Box --- */
.ml-card .v3-cmp {
  width: 100% !important;
  margin-top: 12px !important;
  min-height: 50px !important;
  padding: 0 22px !important;
  border-radius: 999px !important;
  background: #F8FAFC !important;
  border: 1.5px solid #0a1f3f !important;
  color: #0a1f3f !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(10, 31, 63, 0.08) !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
}
.ml-card .v3-cmp svg {
  width: 18px !important;
  height: 18px !important;
  color: #0a1f3f !important;
  flex-shrink: 0 !important;
  transition: transform 0.25s ease !important;
}
.ml-card .v3-cmp:hover {
  background: #0a1f3f !important;
  color: #ffffff !important;
  border-color: #0a1f3f !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(10, 31, 63, 0.2) !important;
}
.ml-card .v3-cmp:hover svg {
  color: #ffffff !important;
  transform: scale(1.08) !important;
}
.ml-card.is-addon .v3-cmp {
  border-color: #4338ca !important;
  color: #4338ca !important;
}
.ml-card.is-addon .v3-cmp svg {
  color: #4338ca !important;
}
.ml-card.is-addon .v3-cmp:hover {
  background: #4338ca !important;
  color: #ffffff !important;
  border-color: #4338ca !important;
}
.ml-card.is-addon .v3-cmp:hover svg {
  color: #ffffff !important;
}

/* --- Early Quote Gateway Styles --- */
.v3-plan-quote-gate {
  padding: 10px 0 48px;
  background: var(--grey, #F8FAFC);
}
.v3-gate-card {
  background: #ffffff;
  border: 1.5px solid rgba(10, 31, 63, 0.12);
  border-radius: 28px;
  padding: 36px 36px 28px;
  box-shadow: 0 16px 40px -16px rgba(10, 31, 63, 0.1);
}
.v3-gate-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #0a1f3f;
  background: rgba(247, 216, 64, 0.25);
  border: 1px solid rgba(223, 194, 48, 0.45);
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.v3-gate-content h2 {
  font-family: 'Manrope', sans-serif;
  font-size: 1.65rem;
  font-weight: 800;
  color: #0a1f3f;
  margin: 0 0 10px;
  letter-spacing: -0.02em;
}
.v3-gate-content p {
  font-size: 0.98rem;
  line-height: 1.6;
  color: #4A5568;
  max-width: 820px;
  margin: 0 0 22px;
}
.v3-gate-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(10, 31, 63, 0.08);
}
.v3-gate-btn {
  background: #F7D840 !important;
  color: #0a1f3f !important;
  font-weight: 800 !important;
  padding: 0 28px !important;
  min-height: 50px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  box-shadow: 0 6px 18px rgba(247, 216, 64, 0.45) !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
}
.v3-gate-btn:hover {
  background: #DFC230 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px rgba(247, 216, 64, 0.55) !important;
}
.v3-gate-btn svg {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
}
.v3-gate-direct {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.v3-gate-or {
  font-size: 0.88rem;
  font-weight: 700;
  color: #64748B;
}
.v3-gate-links {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.v3-gate-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  background: #F8FAFC;
  border: 1px solid rgba(10, 31, 63, 0.12);
  font-size: 0.86rem;
  font-weight: 700;
  color: #0a1f3f;
  text-decoration: none;
  transition: all 0.2s ease;
}
.v3-gate-chip svg {
  width: 15px !important;
  height: 15px !important;
  flex-shrink: 0 !important;
  stroke-width: 2.2 !important;
}
.v3-gate-chip:hover {
  background: #ffffff;
  border-color: #0a1f3f;
  transform: translateY(-1.5px);
  box-shadow: 0 4px 12px rgba(10, 31, 63, 0.08);
}
.v3-gate-chip.v3-wa {
  background: #25D366;
  color: #ffffff !important;
  border-color: #25D366;
}
.v3-gate-chip.v3-wa:hover {
  background: #20bd5a;
  border-color: #20bd5a;
}
.v3-gate-badges {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 28px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.v3-gb-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  font-weight: 600;
  color: #475569;
}
.v3-gb-item svg {
  width: 16px !important;
  height: 16px !important;
  color: #059669 !important;
  flex-shrink: 0 !important;
}
@media (max-width: 768px) {
  .v3-gate-card { padding: 24px 20px; }
  .v3-gate-actions { flex-direction: column; align-items: stretch; gap: 16px; }
  .v3-gate-btn { width: 100%; justify-content: center; }
  .v3-gate-direct { flex-direction: column; align-items: flex-start; }
  .v3-gate-badges { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* --- Section 1: Services Grid (#services) --- */
.v3-services {
  padding: 56px 0;
  background: radial-gradient(circle at 50% 0%, rgba(247, 216, 64, 0.05) 0%, #ffffff 42%);
  border-top: 1px solid rgba(10, 31, 63, 0.08);
  position: relative;
}
.v3-srv-head {
  max-width: 860px;
  margin: 0 auto 40px;
  text-align: center;
}
.v3-srv-pill-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(10, 31, 63, 0.04);
  border: 1px solid rgba(10, 31, 63, 0.09);
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #0a1f3f;
  margin-bottom: 14px;
}
.v3-srv-pill-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #DFC230;
  box-shadow: 0 0 8px rgba(223, 194, 48, 0.8);
}
.v3-srv-chips {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 18px;
}
.v3-srv-chip {
  font-size: 12px;
  font-weight: 600;
  color: #4A5568;
  background: #F8FAFC;
  border: 1px solid rgba(10, 31, 63, 0.07);
  padding: 4px 12px;
  border-radius: 999px;
}
.v3-srv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 1040px) {
  .v3-srv-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}
@media (max-width: 680px) {
  .v3-srv-grid {
    grid-template-columns: 1fr;
  }
}
.v3-srv-card {
  background: #ffffff;
  border-radius: 22px;
  border: 1.5px solid rgba(10, 31, 63, 0.08);
  padding: 28px 24px 22px;
  box-shadow: 0 4px 20px rgba(10, 31, 63, 0.035);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s ease;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.v3-srv-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3.5px;
  background: linear-gradient(90deg, #0a1f3f 0%, #F7D840 25%, #ffe66d 50%, #0a1f3f 75%, #F7D840 100%);
  background-size: 200% 100%;
  opacity: 0.25;
  transition: opacity 0.35s ease, height 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 3;
}
.v3-srv-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: -130%;
  width: 70%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.55) 45%, rgba(247, 216, 64, 0.2) 60%, transparent 100%);
  transform: skewX(-24deg);
  pointer-events: none;
  opacity: 0;
  z-index: 2;
}
.v3-srv-card:hover,
.ml-js .ml .v3-srv-card[data-rv].is-in:hover {
  transform: translateY(-8px) scale(1.008) !important;
  box-shadow: 0 24px 48px -12px rgba(10, 31, 63, 0.16), 0 0 0 1.5px rgba(223, 194, 48, 0.55), 0 8px 24px -4px rgba(247, 216, 64, 0.15) !important;
  border-color: rgba(223, 194, 48, 0.6) !important;
}
.v3-srv-card:hover::before {
  opacity: 1;
  height: 4.5px;
  animation: srvBarFlow 2.8s linear infinite;
}
.v3-srv-card:hover::after {
  animation: srvSheenSweep 0.95s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes srvBarFlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
@keyframes srvSheenSweep {
  0% { left: -130%; opacity: 0; }
  20% { opacity: 0.85; }
  100% { left: 210%; opacity: 0; }
}

.v3-srv-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.v3-srv-icon-badge {
  display: flex;
  align-items: center;
  gap: 12px;
}
.v3-srv-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #ffffff;
  border: 1.5px solid rgba(10, 31, 63, 0.09);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(10, 31, 63, 0.04);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.25s ease, box-shadow 0.3s ease, background 0.25s ease;
  flex-shrink: 0;
}
.v3-srv-card:hover .v3-srv-icon {
  background: #ffffff;
  border-color: rgba(223, 194, 48, 0.7);
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 10px 22px -3px rgba(10, 31, 63, 0.14);
  animation: srvIconFloat 2.6s ease-in-out infinite alternate;
}
@keyframes srvIconFloat {
  0% { transform: translateY(-3px) scale(1.08) rotate(0deg); }
  50% { transform: translateY(-5px) scale(1.1) rotate(2deg); }
  100% { transform: translateY(-3px) scale(1.08) rotate(-1.5deg); }
}
.v3-srv-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
  display: block;
}
.v3-srv-icon svg {
  width: 22px !important;
  height: 22px !important;
  display: block;
}
.v3-srv-badge {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(10, 31, 63, 0.05);
  color: #0a1f3f;
  border: 1px solid rgba(10, 31, 63, 0.08);
  transition: transform 0.25s ease, background 0.25s ease;
}
.v3-srv-badge.badge-gold {
  background: rgba(247, 216, 64, 0.2);
  color: #854d0e;
  border-color: rgba(223, 194, 48, 0.45);
  font-weight: 800;
}
.v3-srv-card:hover .v3-srv-badge {
  transform: scale(1.04);
}
.v3-srv-num {
  font-family: 'Manrope', sans-serif;
  font-size: 1.6rem;
  font-weight: 900;
  color: rgba(10, 31, 63, 0.1);
  letter-spacing: -0.04em;
  line-height: 1;
  transition: color 0.3s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.v3-srv-card:hover .v3-srv-num {
  color: rgba(223, 194, 48, 0.55);
  transform: scale(1.1) translateY(-2px);
}
.v3-srv-card h3 {
  font-family: 'Manrope', sans-serif;
  font-size: 1.22rem;
  font-weight: 800;
  color: #0a1f3f;
  margin: 0 0 8px;
  line-height: 1.32;
  letter-spacing: -0.015em;
  transition: color 0.25s ease;
}
.v3-srv-card:hover h3 {
  color: #002B49;
}
.v3-srv-card p {
  font-size: 13.5px;
  color: #4A5568;
  line-height: 1.58;
  margin: 0 0 16px;
}

/* Micro-diagram Visuals for each service */
.v3-srv-viz {
  background: #F8FAFC;
  border: 1px solid rgba(10, 31, 63, 0.08);
  border-radius: 12px;
  padding: 11px 13px;
  margin-bottom: 16px;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.v3-srv-card:hover .v3-srv-viz {
  background: #ffffff;
  border-color: rgba(223, 194, 48, 0.35);
  box-shadow: 0 4px 14px rgba(10, 31, 63, 0.05);
  transform: translateY(-1px);
}
.v3-sviz-flow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 8px;
}
.v3-sviz-node {
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  background: #ffffff;
  border: 1px solid rgba(10, 31, 63, 0.08);
  padding: 4px 8px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  white-space: nowrap;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.v3-sviz-node.active {
  background: #0a1f3f;
  color: #ffffff;
  border-color: #0a1f3f;
}
.v3-sviz-node.active i {
  color: #F7D840;
}
.v3-srv-card:hover .v3-sviz-node.active {
  transform: scale(1.03);
  box-shadow: 0 3px 10px rgba(10, 31, 63, 0.22);
}
.v3-sviz-arrow {
  color: #94A3B8;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.v3-srv-card:hover .v3-sviz-arrow svg {
  animation: srvArrowSlide 1.3s ease-in-out infinite;
}
@keyframes srvArrowSlide {
  0%, 100% { transform: translateX(0); opacity: 0.65; }
  50% { transform: translateX(3.5px); opacity: 1; color: #0a1f3f; }
}
.v3-sviz-metrics {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px dashed rgba(10, 31, 63, 0.1);
  padding-top: 7px;
  font-size: 11px;
  font-weight: 600;
  color: #64748B;
}
.v3-sviz-metrics span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.v3-sviz-metrics i {
  color: #059669;
}

.v3-srv-features {
  list-style: none;
  padding: 12px 14px;
  margin: auto 0 18px;
  background: #F8FAFC;
  border: 1px solid rgba(10, 31, 63, 0.06);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  transition: all 0.3s ease;
}
.v3-srv-card:hover .v3-srv-features {
  background: #ffffff;
  border-color: rgba(10, 31, 63, 0.1);
  box-shadow: 0 2px 8px rgba(10, 31, 63, 0.03);
}
.v3-srv-features li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  color: #334155;
  line-height: 1.45;
  font-weight: 500;
}
.v3-srv-features li strong {
  color: #0a1f3f;
  font-weight: 700;
  margin-right: 3px;
}
.v3-srv-check-ic {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: rgba(5, 150, 105, 0.12);
  color: #059669;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.25s ease;
}
.v3-srv-card:hover .v3-srv-check-ic {
  transform: scale(1.15);
  background: rgba(5, 150, 105, 0.2);
}
.v3-srv-check-ic svg {
  width: 11px !important;
  height: 11px !important;
}
.v3-srv-cta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(10, 31, 63, 0.07);
}
.v3-srv-learn-btn {
  font-size: 12.8px;
  font-weight: 800;
  color: #0a1f3f;
  background: #ffffff;
  border: 1.5px solid #0a1f3f;
  padding: 8px 16px;
  border-radius: 999px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 6px rgba(10, 31, 63, 0.05);
  transition: all 0.25s ease;
}
.v3-srv-learn-btn svg {
  width: 14px !important;
  height: 14px !important;
  transition: transform 0.25s ease, color 0.25s ease;
}
.v3-srv-learn-btn:hover,
.v3-srv-card:hover .v3-srv-learn-btn {
  background: #0a1f3f;
  color: #ffffff;
  border-color: #0a1f3f;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(10, 31, 63, 0.18);
}
.v3-srv-learn-btn:hover svg {
  transform: translateX(4px);
  color: #F7D840;
}
.v3-srv-quote-link {
  font-size: 12.5px;
  font-weight: 700;
  color: #64748B;
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 8px;
  transition: all 0.2s ease;
}
.v3-srv-quote-link:hover {
  color: #0a1f3f;
  background: rgba(10, 31, 63, 0.06);
}


/* --- Premium Highlights Bar for Service Cards --- */
.v3-srv-highlights {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 14px 0 20px;
  padding: 12px 14px;
  background: #F8FAFC;
  border: 1px solid rgba(10, 31, 63, 0.07);
  border-radius: 12px;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.v3-srv-card:hover .v3-srv-highlights {
  background: #ffffff;
  border-color: rgba(223, 194, 48, 0.4);
  box-shadow: 0 4px 14px rgba(10, 31, 63, 0.05);
  transform: translateY(-1px);
}
.v3-srv-hl-item {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  color: #334155;
  font-weight: 600;
  line-height: 1.4;
}
.v3-srv-hl-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(5, 150, 105, 0.12);
  color: #059669;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.25s ease, background 0.25s ease;
}
.v3-srv-card:hover .v3-srv-hl-dot {
  transform: scale(1.15);
  background: rgba(5, 150, 105, 0.22);
}
.v3-srv-hl-dot svg {
  width: 10px !important;
  height: 10px !important;
}

/* --- Enterprise Credentials Trust Banner --- */
.v3-srv-trust-banner {
  margin-top: 40px;
  padding: 24px 32px;
  background: #ffffff;
  border-radius: 20px;
  border: 1.5px solid rgba(10, 31, 63, 0.09);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  box-shadow: 0 8px 24px -10px rgba(10, 31, 63, 0.06);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.v3-srv-trust-banner:hover {
  border-color: rgba(223, 194, 48, 0.4);
  box-shadow: 0 12px 32px -10px rgba(10, 31, 63, 0.1);
}
.v3-stb-items {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.v3-stb-col {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  border-radius: 12px;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.25s ease, box-shadow 0.25s ease;
  cursor: default;
}
.v3-stb-col:hover {
  background: #F8FAFC;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(10, 31, 63, 0.06);
}
.v3-stb-ic {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}
.v3-stb-col:hover .v3-stb-ic {
  transform: scale(1.12);
}
.v3-stb-ic.gold {
  background: rgba(247, 216, 64, 0.2);
  color: #b45309;
  border: 1px solid rgba(223, 194, 48, 0.35);
}
.v3-stb-ic.navy {
  background: rgba(10, 31, 63, 0.06);
  color: #0a1f3f;
  border: 1px solid rgba(10, 31, 63, 0.1);
}
.v3-stb-text {
  display: flex;
  flex-direction: column;
}
.v3-stb-text strong {
  font-size: 13.5px;
  font-weight: 800;
  color: #0a1f3f;
  line-height: 1.25;
}
.v3-stb-text span {
  font-size: 12px;
  color: #64748B;
  font-weight: 500;
}
.v3-stb-divider {
  width: 1px;
  height: 32px;
  background: rgba(10, 31, 63, 0.1);
}
.v3-stb-btn {
  background: #F7D840 !important;
  color: #0a1f3f !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  padding: 0 22px !important;
  min-height: 44px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  box-shadow: 0 4px 14px rgba(247, 216, 64, 0.4) !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
}
.v3-stb-btn:hover {
  background: #DFC230 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(247, 216, 64, 0.5) !important;
}
.v3-stb-btn svg {
  width: 15px !important;
  height: 15px !important;
  flex-shrink: 0 !important;
}
@media (max-width: 960px) {
  .v3-srv-trust-banner {
    flex-direction: column;
    align-items: flex-start;
  }
  .v3-stb-divider {
    display: none;
  }
  .v3-stb-items {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .v3-stb-btn {
    width: 100%;
    justify-content: center;
  }
}

/* --- Universal Section Header Pill Badges (Matching .v3-srv-pill-tag) --- */
.ml-kick,
.v3-srv-pill-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 5px 14px !important;
  border-radius: 999px !important;
  background: rgba(10, 31, 63, 0.04) !important;
  border: 1px solid rgba(10, 31, 63, 0.09) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: #0a1f3f !important;
  margin-bottom: 14px !important;
  box-shadow: 0 1px 3px rgba(10, 31, 63, 0.04) !important;
}
.ml-kick::before {
  content: "" !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #DFC230 !important;
  box-shadow: 0 0 8px rgba(223, 194, 48, 0.8) !important;
  transform: none !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
}
.v3-srv-pill-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #DFC230 !important;
  box-shadow: 0 0 8px rgba(223, 194, 48, 0.8) !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
}

/* --- Enterprise Credentials Trust Banner --- */
.v3-srv-trust-banner {
  margin-top: 40px;
  padding: 24px 32px;
  background: #ffffff;
  border-radius: 20px;
  border: 1.5px solid rgba(10, 31, 63, 0.09);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  box-shadow: 0 8px 24px -10px rgba(10, 31, 63, 0.06);
}
.v3-stb-items {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.v3-stb-col {
  display: flex;
  align-items: center;
  gap: 12px;
}
.v3-stb-ic {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.v3-stb-ic.gold {
  background: rgba(247, 216, 64, 0.2);
  color: #b45309;
  border: 1px solid rgba(223, 194, 48, 0.35);
}
.v3-stb-ic.navy {
  background: rgba(10, 31, 63, 0.06);
  color: #0a1f3f;
  border: 1px solid rgba(10, 31, 63, 0.1);
}
.v3-stb-text {
  display: flex;
  flex-direction: column;
}
.v3-stb-text strong {
  font-size: 13.5px;
  font-weight: 800;
  color: #0a1f3f;
  line-height: 1.25;
}
.v3-stb-text span {
  font-size: 12px;
  color: #64748B;
  font-weight: 500;
}
.v3-stb-divider {
  width: 1px;
  height: 32px;
  background: rgba(10, 31, 63, 0.1);
}
.v3-stb-btn {
  background: #F7D840 !important;
  color: #0a1f3f !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  padding: 0 22px !important;
  min-height: 44px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  box-shadow: 0 4px 14px rgba(247, 216, 64, 0.4) !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
}
.v3-stb-btn:hover {
  background: #DFC230 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(247, 216, 64, 0.5) !important;
}
.v3-stb-btn svg {
  width: 15px !important;
  height: 15px !important;
  flex-shrink: 0 !important;
}
@media (max-width: 960px) {
  .v3-srv-trust-banner {
    flex-direction: column;
    align-items: flex-start;
  }
  .v3-stb-divider {
    display: none;
  }
  .v3-stb-items {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .v3-stb-btn {
    width: 100%;
    justify-content: center;
  }
}

/* CSP Credentials Bar */
.v3-plan-quote-gate {
  margin-top: 36px;
}
.v3-gate-card {
  background: #F8FAFC;
  border: 1px solid rgba(10, 31, 63, 0.08);
  border-radius: 18px;
  padding: 20px 24px;
}
.v3-gate-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
}
.v3-gb-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: #0a1f3f;
}
.v3-gb-item svg {
  width: 16px !important;
  height: 16px !important;
  color: #059669;
  flex-shrink: 0;
}

/* --- Section 2: Outlook Quotation Workflow (#workflow) --- */
.v3-workflow {
  padding: 56px 0;
  background: #F4F6F9;
  border-top: 1px solid rgba(10, 31, 63, 0.08);
}
.v3-wf-head {
  max-width: 820px;
  margin: 0 auto 34px;
  text-align: center;
}
.v3-wf-pipeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 24px;
}
@media (max-width: 980px) {
  .v3-wf-pipeline {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 580px) {
  .v3-wf-pipeline {
    grid-template-columns: 1fr;
  }
}
.v3-wf-step-card {
  background: #ffffff;
  border: 1px solid rgba(10, 31, 63, 0.08);
  border-radius: 18px;
  padding: 22px 18px;
  box-shadow: 0 4px 16px rgba(10, 31, 63, 0.03);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.v3-wf-step-card:hover {
  transform: translateY(-3px);
  border-color: rgba(223, 194, 48, 0.6);
  box-shadow: 0 12px 28px rgba(10, 31, 63, 0.07);
}
.v3-wf-step-badge {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #0a1f3f;
  color: #F7D840;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 12px;
}
.v3-wf-step-card h4 {
  font-size: 15.5px;
  font-weight: 800;
  color: #0a1f3f;
  margin: 0 0 8px;
  line-height: 1.35;
}
.v3-wf-step-card p {
  font-size: 13px;
  color: #475569;
  line-height: 1.5;
  margin: 0 0 14px;
}
.v3-wf-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #0369a1;
  background: rgba(2, 132, 199, 0.08);
  padding: 4px 9px;
  border-radius: 6px;
  margin-top: auto;
  align-self: flex-start;
}
.v3-wf-tag svg {
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0;
}
.v3-wf-outcomes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: #ffffff;
  border: 1px solid rgba(10, 31, 63, 0.08);
  border-radius: 16px;
  padding: 18px 24px;
  box-shadow: 0 4px 16px rgba(10, 31, 63, 0.03);
}
@media (max-width: 780px) {
  .v3-wf-outcomes {
    flex-direction: column;
    align-items: flex-start;
  }
}
.v3-wf-outcome-item {
  flex: 1;
  font-size: 13px;
  color: #334155;
  line-height: 1.5;
}
.v3-wf-outcome-item b {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: #0a1f3f;
  margin-bottom: 3px;
}
.v3-wf-outcome-stats {
  display: flex;
  gap: 16px;
  flex-shrink: 0;
}
.v3-wf-stat {
  text-align: center;
  padding: 6px 14px;
  background: #F8FAFC;
  border: 1px solid rgba(10, 31, 63, 0.06);
  border-radius: 8px;
}
.v3-stat-num {
  display: block;
  font-size: 20px;
  font-weight: 800;
  color: #0a1f3f;
  line-height: 1.2;
}
.v3-stat-lbl {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: #64748b;
  margin-top: 1px;
}

/* --- Section 3: Real-World Deployments (#solutions) --- */
.v3-solutions {
  padding: 56px 0;
  background: #ffffff;
  border-top: 1px solid rgba(10, 31, 63, 0.08);
  position: relative;
}
.v3-sol-head {
  max-width: 820px;
  margin: 0 auto 38px;
  text-align: center;
}
.v3-sol-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media (max-width: 860px) {
  .v3-sol-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}
.v3-sol-card {
  background: #ffffff;
  border: 1.5px solid rgba(10, 31, 63, 0.08);
  border-radius: 22px;
  padding: 28px 24px 22px;
  box-shadow: 0 4px 20px rgba(10, 31, 63, 0.035);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s ease;
}
.v3-sol-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3.5px;
  background: linear-gradient(90deg, #0a1f3f 0%, #F7D840 25%, #ffe66d 50%, #0a1f3f 75%, #F7D840 100%);
  background-size: 200% 100%;
  opacity: 0.25;
  transition: opacity 0.35s ease, height 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 3;
}
.v3-sol-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: -130%;
  width: 70%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.55) 45%, rgba(247, 216, 64, 0.2) 60%, transparent 100%);
  transform: skewX(-24deg);
  pointer-events: none;
  opacity: 0;
  z-index: 2;
}
.v3-sol-card:hover,
.ml-js .ml .v3-sol-card[data-rv].is-in:hover {
  transform: translateY(-8px) scale(1.008) !important;
  box-shadow: 0 24px 48px -12px rgba(10, 31, 63, 0.16), 0 0 0 1.5px rgba(223, 194, 48, 0.55), 0 8px 24px -4px rgba(247, 216, 64, 0.15) !important;
  border-color: rgba(223, 194, 48, 0.6) !important;
}
.v3-sol-card:hover::before {
  opacity: 1;
  height: 4.5px;
  animation: srvBarFlow 2.8s linear infinite;
}
.v3-sol-card:hover::after {
  animation: srvSheenSweep 0.95s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Card Top Section */
.v3-sol-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.v3-sol-ind-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
}
.v3-sol-ind-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #ffffff;
  border: 1.5px solid rgba(10, 31, 63, 0.09);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(10, 31, 63, 0.04);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.25s ease, box-shadow 0.3s ease, background 0.25s ease;
  flex-shrink: 0;
}
.v3-sol-card:hover .v3-sol-ind-icon {
  background: #ffffff;
  border-color: rgba(223, 194, 48, 0.7);
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 10px 22px -3px rgba(10, 31, 63, 0.14);
  animation: srvIconFloat 2.6s ease-in-out infinite alternate;
}
.v3-sol-ind-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
  display: block;
}
.v3-sol-ind-icon svg {
  width: 22px !important;
  height: 22px !important;
  display: block;
}
.v3-sol-ind {
  font-family: 'Manrope', sans-serif;
  font-size: 1.18rem;
  font-weight: 800;
  color: #0a1f3f;
  line-height: 1.3;
  letter-spacing: -0.015em;
  transition: color 0.25s ease;
}
.v3-sol-card:hover .v3-sol-ind {
  color: #002B49;
}
.v3-sol-top-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.v3-sol-tag {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(10, 31, 63, 0.05);
  color: #0a1f3f;
  border: 1px solid rgba(10, 31, 63, 0.08);
  transition: transform 0.25s ease, background 0.25s ease;
}
.v3-sol-card:hover .v3-sol-tag {
  transform: scale(1.04);
}
.v3-sol-num {
  font-family: 'Manrope', sans-serif;
  font-size: 1.6rem;
  font-weight: 900;
  color: rgba(10, 31, 63, 0.1);
  letter-spacing: -0.04em;
  line-height: 1;
  transition: color 0.3s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.v3-sol-card:hover .v3-sol-num {
  color: rgba(223, 194, 48, 0.55);
  transform: scale(1.1) translateY(-2px);
}

/* App Pills */
.v3-sol-apps {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.v3-sol-app-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  background: #F8FAFC;
  padding: 5px 11px;
  border-radius: 20px;
  border: 1px solid rgba(10, 31, 63, 0.08);
  color: #334155;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  transition: all 0.2s ease;
}
.v3-sol-card:hover .v3-sol-app-pill {
  background: #ffffff;
  border-color: rgba(10, 31, 63, 0.12);
  box-shadow: 0 2px 6px rgba(10, 31, 63, 0.04);
}
.v3-sol-app-pill img {
  width: 16px !important;
  height: 16px !important;
  display: block;
}

/* Challenge & Flow Pipeline */
.v3-sol-pipeline {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}
.v3-sol-pain {
  background: #FFF5F5;
  border: 1px solid rgba(239, 68, 68, 0.18);
  border-left: 3.5px solid #ef4444;
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 13px;
  color: #7f1d1d;
  line-height: 1.5;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.v3-sol-pain:hover {
  background: #fff0f0;
  border-color: rgba(239, 68, 68, 0.4);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.1);
}
.v3-sol-pain b {
  color: #991b1b;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.v3-sol-pain b::before {
  content: "⚠";
  font-size: 12px;
}
.v3-sol-fix {
  background: #F0FDF4;
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-left: 3.5px solid #059669;
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 13px;
  color: #064e3b;
  line-height: 1.5;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.v3-sol-fix:hover {
  background: #e6fcf5;
  border-color: rgba(5, 150, 105, 0.4);
  box-shadow: 0 4px 14px rgba(5, 150, 105, 0.12);
}
.v3-sol-fix b {
  color: #065f46;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.v3-sol-fix b::before {
  content: "⚡";
  font-size: 12px;
}
.v3-sol-card:hover .v3-sol-pain {
  background: #fef2f2;
  border-color: rgba(239, 68, 68, 0.3);
}
.v3-sol-card:hover .v3-sol-fix {
  background: #ecfdf5;
  border-color: rgba(16, 185, 129, 0.35);
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.06);
}

/* Outcome & Result Box */
.v3-sol-result {
  font-size: 13.5px;
  color: #334155;
  line-height: 1.55;
  margin-top: auto;
  border-top: 1px solid rgba(10, 31, 63, 0.08);
  padding-top: 14px;
}
.v3-sol-result b {
  font-weight: 800;
  color: #0a1f3f;
}
.v3-sol-metric-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 12px;
  font-weight: 800;
  color: #0a1f3f;
  background: rgba(247, 216, 64, 0.22);
  border: 1px solid rgba(223, 194, 48, 0.45);
  padding: 7px 14px;
  border-radius: 10px;
  align-self: flex-start;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.25s ease, box-shadow 0.25s ease;
}
.v3-sol-card:hover .v3-sol-metric-badge {
  transform: translateY(-2px) scale(1.02);
  background: rgba(247, 216, 64, 0.35);
  box-shadow: 0 4px 12px rgba(223, 194, 48, 0.2);
}
.v3-sol-metric-badge svg {
  width: 15px !important;
  height: 15px !important;
  color: #059669;
  flex-shrink: 0;
}

/* Credentials Strip */
.v3-clients-strip {
  margin-top: 36px;
  padding: 18px 24px;
  background: #ffffff;
  border: 1.5px solid rgba(10, 31, 63, 0.09);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13.5px;
  color: #0a1f3f;
  box-shadow: 0 4px 20px rgba(10, 31, 63, 0.04);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.v3-clients-strip:hover {
  border-color: rgba(223, 194, 48, 0.4);
  box-shadow: 0 10px 28px -8px rgba(10, 31, 63, 0.08);
}
.v3-clients-strip b {
  font-weight: 800;
  color: #0a1f3f;
}
.v3-client-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  font-size: 12.8px;
  background: #F8FAFC;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1.5px solid rgba(10, 31, 63, 0.08);
  color: #0a1f3f;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  cursor: default;
}
.v3-client-tag:hover {
  background: #0a1f3f;
  color: #ffffff;
  border-color: #0a1f3f;
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 4px 12px rgba(10, 31, 63, 0.18);
}
.v3-client-tag:hover svg {
  color: #F7D840;
}
.v3-client-tag svg {
  width: 14px !important;
  height: 14px !important;
  color: #059669;
  transition: color 0.2s ease;
}

/* --- Section 4: Why SmartSoft Pillars (#why) --- */
.v3-why {
  padding: 56px 0;
}
.v3-why-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 36px;
}
@media (max-width: 900px) {
  .v3-why-pillars {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 580px) {
  .v3-why-pillars {
    grid-template-columns: 1fr;
  }
}
.v3-pillar-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 18px 16px;
  border: 1px solid rgba(10, 31, 63, 0.08);
  box-shadow: 0 3px 14px rgba(10, 31, 63, 0.03);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.v3-pillar-card:hover {
  transform: translateY(-3px);
  border-color: rgba(223, 194, 48, 0.6);
  box-shadow: 0 8px 24px rgba(10, 31, 63, 0.06);
}
.v3-pillar-num {
  font-size: 11px;
  font-weight: 800;
  background: #0a1f3f;
  color: #F7D840;
  min-width: 30px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.v3-pillar-content h3 {
  font-size: 14px;
  font-weight: 800;
  color: #0a1f3f;
  margin: 0 0 4px;
  line-height: 1.3;
}
.v3-pillar-content p {
  font-size: 12.5px;
  color: #64748b;
  line-height: 1.45;
  margin: 0;
}

/* Outlook & SharePoint Spotlight Cards */
.v3-bd-sub {
  font-size: 14px;
  color: #475569;
  line-height: 1.55;
  margin-top: 8px;
  max-width: 820px;
}
.v3-app-spotlights {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin: 28px 0 24px;
}
@media (max-width: 800px) {
  .v3-app-spotlights {
    grid-template-columns: 1fr;
  }
}
.v3-app-card {
  background: #ffffff;
  border: 1.5px solid rgba(10,31,63,0.1);
  border-radius: 20px;
  padding: 24px 24px 20px;
  box-shadow: 0 6px 20px rgba(10,31,63,0.05);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.v3-app-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(10,31,63,0.09);
  border-color: #dfc230;
}
.v3-app-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.v3-app-header-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.v3-app-ic-wrap {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #F4F6F9;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(10,31,63,0.08);
}
.v3-app-ic-wrap img {
  width: 28px !important;
  height: 28px !important;
  object-fit: contain;
}
.v3-app-cat {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748b;
}
.v3-app-card-header h4 {
  font-size: 18px;
  font-weight: 800;
  color: #0a1f3f;
  margin: 0;
}
.v3-app-lic-pill {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(10,31,63,0.06);
  color: #0a1f3f;
}
.v3-app-desc {
  font-size: 13.5px;
  color: #475569;
  line-height: 1.5;
  margin-bottom: 16px;
}
.v3-cap-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}
.v3-cap-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12.5px;
  line-height: 1.45;
  color: #334155;
}
.v3-cap-icon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(247, 216, 64, 0.25);
  color: #0a1f3f;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.v3-cap-icon svg {
  width: 14px !important;
  height: 14px !important;
  color: #059669;
}
.v3-cap-item b {
  display: block;
  font-size: 13px;
  color: #0a1f3f;
  margin-bottom: 1px;
}
.v3-cap-item span {
  display: block;
  color: #64748b;
  font-size: 12px;
}
.v3-app-card-foot {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(10,31,63,0.06);
}
.v3-app-note {
  font-size: 11.5px;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* --- Section 5: Final CTA Section (#cta-consultation) --- */
.v3-final-cta {
  padding: 56px 0;
  background: #F8FAFC;
  position: relative;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.v3-final-cta-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 48px 40px 42px;
  color: #1A1A2E;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.05), 0 2px 8px rgba(0, 0, 0, 0.02);
  border: 1.5px solid rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease, border-color 0.3s ease;
}
.v3-final-cta-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #DFC230 0%, #F7D840 50%, #DFC230 100%);
  background-size: 200% 100%;
}
.v3-final-cta-card:hover,
.ml-js .ml .v3-final-cta-card[data-rv].is-in:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(223, 194, 48, 0.55) !important;
  box-shadow: 0 20px 48px -10px rgba(0, 0, 0, 0.09), 0 0 0 1px rgba(223, 194, 48, 0.3) !important;
}

@media (max-width: 680px) {
  .v3-final-cta-card {
    padding: 34px 20px 30px;
    border-radius: 20px;
  }
}

.v3-final-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 5px 15px;
  border-radius: 999px;
  background: rgba(247, 216, 64, 0.2);
  color: #854d0e;
  border: 1px solid rgba(223, 194, 48, 0.45);
  margin-bottom: 18px;
}
.v3-final-badge svg {
  width: 14px !important;
  height: 14px !important;
  fill: #854d0e;
  color: #854d0e;
}
.v3-final-h2 {
  font-family: 'Manrope', sans-serif;
  font-size: clamp(1.65rem, 2.6vw, 2.2rem);
  font-weight: 800;
  color: #1A1A2E;
  margin: 0 auto 14px;
  line-height: 1.28;
  letter-spacing: -0.02em;
  max-width: 760px;
}
.v3-final-p {
  font-size: 1.05rem;
  color: #475569;
  max-width: 680px;
  margin: 0 auto 12px;
  line-height: 1.6;
}
.v3-final-pills {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 20px auto 6px;
  max-width: 720px;
}
.v3-fpill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  background: #F8FAFC;
  color: #1A1A2E;
  border: 1px solid rgba(0, 0, 0, 0.08);
  padding: 5px 13px;
  border-radius: 999px;
  transition: all 0.25s ease;
}
.v3-final-cta-card:hover .v3-fpill {
  background: #ffffff;
  border-color: rgba(223, 194, 48, 0.5);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
.v3-fpill svg {
  color: #059669;
  width: 11px !important;
  height: 11px !important;
}
.v3-final-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 24px;
}
.v3-final-btn-pri {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #F7D840 0%, #DFC230 100%) !important;
  color: #1A1A2E !important;
  font-weight: 800 !important;
  font-size: 15.5px !important;
  padding: 14px 32px !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  box-shadow: 0 6px 22px rgba(247, 216, 64, 0.38) !important;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s ease !important;
}
.v3-final-btn-pri:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 10px 28px rgba(247, 216, 64, 0.5) !important;
}
.v3-final-btn-pri svg {
  width: 16px !important;
  height: 16px !important;
  transition: transform 0.25s ease;
}
.v3-final-btn-pri:hover svg {
  transform: translateX(4px);
}
.v3-final-subtext {
  margin: 12px auto 0;
  font-size: 12px;
  color: #64748B;
  font-weight: 500;
}

/* --- Section 6: Quote Builder Form & Aside (#enquiry) --- */
.v3-enq {
  padding: 56px 0 64px;
  background: #F4F6F9;
  border-top: 1px solid rgba(0,0,0,0.08);
}
.v3-enq-head {
  max-width: 820px;
  margin: 0 auto 28px;
  text-align: center;
}
.v3-enhanced-conv {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: 32px;
  align-items: start;
}
@media (max-width: 960px) {
  .v3-enhanced-conv {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}
.v3-conv-form {
  background: #ffffff;
  border-radius: 24px;
  padding: 34px 32px;
  box-shadow: 0 16px 44px rgba(10,31,63,0.08);
  border: 1px solid rgba(10,31,63,0.08);
}
@media (max-width: 600px) {
  .v3-conv-form {
    padding: 24px 18px;
  }
}

/* Step 2 Copilot Add-on Integration */
.v3-copilot-tier {
  margin: 14px 0 16px;
}
.v3-copilot-addon-card.ml-addon-check {
  margin-top: 0 !important;
  padding: 15px 18px !important;
  border: 1.5px solid rgba(10, 31, 63, 0.12) !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, #FFFFFF 0%, #F9FAFD 100%) !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  position: relative !important;
  box-shadow: 0 2px 8px rgba(10, 31, 63, 0.03) !important;
}
.v3-copilot-addon-card.ml-addon-check:hover {
  border-color: #0a1f3f !important;
  background: #ffffff !important;
  transform: none !important;
  box-shadow: 0 4px 14px rgba(10, 31, 63, 0.06) !important;
}
.v3-copilot-addon-card.ml-addon-check:has(input:checked) {
  border-color: #0a1f3f !important;
  background: linear-gradient(135deg, rgba(247, 216, 64, 0.15) 0%, rgba(255, 255, 255, 0.96) 100%) !important;
  box-shadow: 0 0 0 1.5px #0a1f3f, 0 8px 22px rgba(10, 31, 63, 0.08) !important;
}
.v3-copilot-addon-card .ml-ac-box {
  width: 22px !important;
  height: 22px !important;
  border-radius: 7px !important;
  border: 2px solid rgba(30, 37, 43, 0.3) !important;
  flex-shrink: 0 !important;
  position: relative !important;
  transition: all 0.2s ease !important;
}
.v3-copilot-addon-card input:checked ~ .ml-ac-box {
  background: #0a1f3f !important;
  border-color: #0a1f3f !important;
}
.v3-copilot-addon-card input:checked ~ .ml-ac-box::after {
  content: "" !important;
  position: absolute !important;
  left: 6px !important;
  top: 2px !important;
  width: 6px !important;
  height: 11px !important;
  border: solid #F7D840 !important;
  border-width: 0 2.5px 2.5px 0 !important;
  transform: rotate(45deg) !important;
}
.v3-copilot-ico {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid rgba(10, 31, 63, 0.08);
  box-shadow: 0 2px 6px rgba(10, 31, 63, 0.05);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}
.v3-copilot-addon-card:hover .v3-copilot-ico,
.v3-copilot-addon-card:has(input:checked) .v3-copilot-ico {
  transform: none;
}
.v3-copilot-ico img {
  width: 32px !important;
  height: 32px !important;
  object-fit: contain;
  display: block;
}
.v3-copilot-addon-card .ml-ac-txt {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.v3-copilot-addon-card .ml-ac-txt b {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #0a1f3f !important;
  line-height: 1.3 !important;
}
.v3-copilot-addon-card .ml-ac-txt small {
  font-size: 11.8px !important;
  color: #64748b !important;
  line-height: 1.35 !important;
  margin-top: 3px !important;
}
.v3-copilot-badge {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(247, 216, 64, 0.25);
  color: #854d0e;
  border: 1px solid rgba(223, 194, 48, 0.45);
  white-space: nowrap;
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .v3-copilot-addon-card.ml-addon-check {
    flex-wrap: wrap;
    gap: 10px;
  }
  .v3-copilot-badge {
    margin-left: auto;
  }
}

/* Aside: Immediate Assistance — Repositioned with scroll-direction slide-in */
.v3-conv-aside {
  position: -webkit-sticky;
  position: sticky;
  top: 96px;
  z-index: 15;
  align-self: start;
}
.v3-aside-box {
  background: #ffffff;
  border-radius: 24px;
  padding: 26px 22px;
  box-shadow: 0 16px 44px rgba(10,31,63,0.08);
  border: 1.5px solid rgba(10, 31, 63, 0.09);
  transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
  will-change: transform;
}
.v3-aside-box.v3-slide-from-top {
  animation: v3SlideFromTop 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.v3-aside-box.v3-slide-from-bottom {
  animation: v3SlideFromBottom 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes v3SlideFromTop {
  0% {
    transform: translateY(-12px);
    box-shadow: 0 8px 24px rgba(10, 31, 63, 0.05);
  }
  50% {
    box-shadow: 0 20px 48px rgba(10, 31, 63, 0.12);
  }
  100% {
    transform: translateY(0);
    box-shadow: 0 16px 44px rgba(10, 31, 63, 0.08);
  }
}
@keyframes v3SlideFromBottom {
  0% {
    transform: translateY(12px);
    box-shadow: 0 8px 24px rgba(10, 31, 63, 0.05);
  }
  50% {
    box-shadow: 0 20px 48px rgba(10, 31, 63, 0.12);
  }
  100% {
    transform: translateY(0);
    box-shadow: 0 16px 44px rgba(10, 31, 63, 0.08);
  }
}

.v3-aside-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 12px;
  border-radius: 20px;
  background: rgba(10, 31, 63, 0.06);
  color: #0a1f3f;
  margin-bottom: 12px;
}
.v3-aside-pill i {
  color: #DFC230;
}
.v3-aside-box h3 {
  font-size: 21px;
  font-weight: 800;
  color: #0a1f3f;
  margin: 0 0 8px;
  line-height: 1.25;
}
.v3-aside-box p {
  font-size: 13.5px;
  color: #64748b;
  line-height: 1.5;
  margin: 0 0 20px;
}
.v3-direct-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.v3-contact-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #F8FAFC;
  border: 1px solid rgba(10, 31, 63, 0.08);
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}
.v3-contact-card:hover {
  background: #ffffff;
  border-color: #0a1f3f;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(10, 31, 63, 0.09);
}
.v3-cc-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: #ffffff;
  border: 1.5px solid rgba(10, 31, 63, 0.09);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(10, 31, 63, 0.05);
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.v3-contact-card:hover .v3-cc-icon {
  transform: scale(1.06);
  border-color: rgba(223, 194, 48, 0.7);
  box-shadow: 0 6px 16px rgba(10, 31, 63, 0.12);
}
.v3-cc-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
  display: block;
}
.v3-cc-icon svg {
  width: 22px !important;
  height: 22px !important;
  display: block;
}
.v3-cc-phone {
  background: #ffffff;
}
.v3-cc-wa-icon {
  background: #ffffff;
}
.v3-cc-email {
  background: #ffffff;
}
.v3-cc-details {
  flex: 1;
  min-width: 0;
}
.v3-contact-card small {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
  font-weight: 700;
  margin-bottom: 2px;
}
.v3-contact-card b {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  color: #0a1f3f;
  line-height: 1.25;
}
.v3-contact-card span {
  display: block;
  font-size: 11.5px;
  color: #64748b;
  margin-top: 2px;
  line-height: 1.3;
}
.v3-cc-arrow {
  color: #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
}
.v3-contact-card:hover .v3-cc-arrow {
  color: #0a1f3f;
}

/* Quote Scope Box — Removed per user request to keep form clean and focused */
.v3-scope-box {
  display: none !important;
}

.v3-aside-trust {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(10, 31, 63, 0.08);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.v3-at-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: #475569;
}
.v3-at-item svg {
  width: 15px !important;
  height: 15px !important;
  color: #059669;
  flex-shrink: 0;
}

/* --- Section 7: Common Questions (#faq) --- */
.v3-faq {
  padding: 56px 0;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .v3-srv-card, .v3-wf-step-card, .v3-sol-card, .v3-pillar-card, .v3-contact-card, .v3-final-btn-pri {
    transition: none !important;
    transform: none !important;
  }
}

/* --- Services Discovery Gateway Banner --- */
.v3-services-gateway {
  padding: 56px 0 64px;
  background: #ffffff;
}
.v3-sg-card {
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFDF7 100%);
  border-radius: 28px;
  padding: 50px 40px 46px;
  text-align: center;
  color: #1A1A2E;
  box-shadow: 0 16px 48px rgba(10, 31, 63, 0.07), 0 2px 8px rgba(0, 0, 0, 0.02);
  border: 1.5px solid rgba(10, 31, 63, 0.09);
  position: relative;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease, border-color 0.3s ease;
}
.v3-sg-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #DFC230 0%, #F7D840 50%, #DFC230 100%);
  background-size: 200% 100%;
}
.v3-sg-card:hover {
  transform: translateY(-4px);
  border-color: rgba(223, 194, 48, 0.55);
  box-shadow: 0 22px 54px rgba(10, 31, 63, 0.1), 0 0 0 1px rgba(223, 194, 48, 0.25);
}
.v3-sg-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(247, 216, 64, 0.18);
  border: 1px solid rgba(223, 194, 48, 0.45);
  color: #0A1F3F;
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 20px;
}
.v3-sg-card h2 {
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 2.1rem;
  font-weight: 800;
  color: #0A1F3F;
  margin: 0 0 14px;
  letter-spacing: -0.015em;
}
.v3-sg-card p {
  font-size: 1.05rem;
  color: #475569;
  max-width: 760px;
  margin: 0 auto 28px;
  line-height: 1.6;
}
.v3-sg-pills {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.v3-sg-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1.5px solid rgba(10, 31, 63, 0.09);
  box-shadow: 0 2px 6px rgba(10, 31, 63, 0.03);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #1E293B;
  transition: all 0.2s ease;
}
.v3-sg-pill:hover {
  background: #F8FAFC;
  border-color: #0A1F3F;
  transform: translateY(-2px);
}
.v3-sg-pill img {
  border-radius: 4px;
  display: block;
}
.v3-sg-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #F7D840;
  color: #0A1F3F;
  font-weight: 800;
  font-size: 15px;
  padding: 15px 34px;
  border-radius: 999px;
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 6px 20px rgba(247, 216, 64, 0.35);
}
.v3-sg-btn:hover {
  background: #DFC230;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(247, 216, 64, 0.45);
}
@media (max-width: 640px) {
  .v3-sg-card { padding: 32px 20px; border-radius: 20px; }
  .v3-sg-card h2 { font-size: 1.6rem; }
  .v3-sg-btn { width: 100%; justify-content: center; }
}


/* Office Locations in Aside */
.v3-aside-locations {
  margin-top: 16px;
  padding: 14px 14px;
  background: #F8FAFC;
  border-radius: 14px;
  border: 1px solid rgba(10, 31, 63, 0.08);
}
.v3-al-header {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #0a1f3f;
  margin-bottom: 10px;
}
.v3-al-header svg {
  color: #DFC230;
  flex-shrink: 0;
}
.v3-al-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.v3-al-city {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  color: #0a1f3f;
  background: #ffffff;
  border: 1px solid rgba(10, 31, 63, 0.08);
  padding: 4px 9px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(10, 31, 63, 0.04);
}
.v3-al-city i {
  font-size: 10px;
  color: #DFC230;
}
.v3-al-city.hq {
  border-color: rgba(223, 194, 48, 0.4);
  background: rgba(247, 216, 64, 0.08);
}