/* ==========================================================================
   IT Soft BD — v2 design system (preview)
   Bright-blue + amber agency layout. Self-contained: nothing here loads on
   the live pages until this is switched on, and the palette is six variables.
   ========================================================================== */
:root{
  --v2-blue:#1E3A8A;
  --v2-blue-deep:#16296B;
  --v2-blue-soft:#E8EDF8;
  --v2-orange:#06B6D4;
  --v2-orange-deep:#0891B2;
  --v2-orange-soft:#E6F8FC;
  --v2-ink:#374151;
  --v2-body:#6B7280;
  --v2-line:#E5E7EB;
  --v2-soft:#F4F6F9;
  --v2-white:#fff;
  --v2-radius:14px;
  --v2-shadow:0 1px 3px rgba(55,65,81,.06),0 12px 28px -14px rgba(55,65,81,.16);
  --v2-wrap:1200px;
}
*,*::before,*::after{box-sizing:border-box}
body.v2{
  margin:0;background:var(--v2-white);color:var(--v2-body);
  font:16px/1.65 ui-sans-serif,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
:where(.v2) :where(h1,h2,h3,h4){color:var(--v2-ink);margin:0;line-height:1.15;letter-spacing:-.02em}
:where(.v2) a{color:inherit;text-decoration:none}
.v2 img{max-width:100%;display:block}
.v2-wrap{max-width:var(--v2-wrap);margin:0 auto;padding:0 22px}
.v2-ic{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- utility bar ---------- */
.v2-util{background:var(--v2-ink);color:#D1D5DB;font-size:13px}
.v2-util .v2-wrap{display:flex;align-items:center;gap:18px;min-height:38px;flex-wrap:wrap}
.v2-util a{display:inline-flex;align-items:center;gap:6px;color:#D1D5DB}
.v2-util a:hover{color:#fff}
.v2-util .v2-right{margin-left:auto;display:flex;align-items:center;gap:16px}
.v2-util .v2-flag{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:2px 10px}
.v2-wa{color:#06B6D4 !important}

/* ---------- header ---------- */
.v2-head{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--v2-line)}
.v2-head .v2-wrap{display:flex;align-items:center;gap:22px;min-height:74px}
.v2-logo{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--v2-ink);letter-spacing:-.02em;flex:none}
.v2-logo b{display:block;font-size:17px;line-height:1}
.v2-logo small{display:block;font-size:8.5px;letter-spacing:.22em;color:var(--v2-body);font-weight:600;margin-top:3px}
.v2-mark{width:40px;height:40px;border-radius:11px;background:linear-gradient(135deg,var(--v2-blue),var(--v2-blue-deep));color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:15px;letter-spacing:-.04em;position:relative}
.v2-mark::after{content:"";position:absolute;right:-3px;bottom:-3px;width:13px;height:13px;border-radius:5px;background:var(--v2-orange)}
.v2-nav{display:flex;align-items:center;gap:2px;margin-left:6px}
.v2-nav>a{padding:9px 12px;border-radius:9px;font-size:14.5px;font-weight:500;color:#4B5563;white-space:nowrap}
.v2-nav>a:hover,.v2-nav>a.on{background:var(--v2-soft);color:var(--v2-blue)}
.v2-head .v2-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
.v2-cart{position:relative;width:40px;height:40px;border-radius:10px;border:1px solid var(--v2-line);display:grid;place-items:center;color:var(--v2-ink)}
.v2-burger{display:none;width:42px;height:42px;border-radius:10px;border:1px solid var(--v2-line);background:#fff;align-items:center;justify-content:center;color:var(--v2-ink);cursor:pointer}

/* ---------- buttons ---------- */
.v2-btn{display:inline-flex;align-items:center;gap:9px;justify-content:center;white-space:nowrap;
  padding:12px 22px;border-radius:10px;font-weight:600;font-size:15px;border:1px solid transparent;cursor:pointer;transition:.18s}
.v2-btn-blue{background:var(--v2-blue);color:#fff}
.v2-btn-blue:hover{background:var(--v2-blue-deep)}
.v2-btn-orange{background:var(--v2-orange);color:#fff}
.v2-btn-orange:hover{background:var(--v2-orange-deep)}
.v2-btn-white{background:#fff;color:var(--v2-blue)}
.v2-btn-white:hover{background:#E9EEF8}
.v2-btn-ghost{border-color:rgba(255,255,255,.55);color:#fff}
.v2-btn-ghost:hover{background:rgba(255,255,255,.14)}
.v2-btn-line{border-color:var(--v2-line);color:var(--v2-ink);background:#fff}
.v2-btn-line:hover{border-color:var(--v2-blue);color:var(--v2-blue)}
.v2-btn.lg{padding:14px 26px;font-size:15.5px}

/* ---------- hero: blue / amber split ---------- */
.v2-hero{display:grid;grid-template-columns:1.55fr 1fr;min-height:430px}
.v2-hero-l{background:var(--v2-blue);color:#fff;padding:66px 0;display:flex;align-items:center}
.v2 .v2-hero-l h1{color:#fff;font-size:clamp(30px,4vw,46px);font-weight:800;max-width:16em;margin-bottom:16px}
.v2 .v2-hero-l p{color:#E9EEF8;font-size:16.5px;max-width:34em;margin:0 0 26px}
.v2-hero-r{background:var(--v2-orange);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.v2-hero-r::before{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 80% 15%,rgba(255,255,255,.28),transparent 60%),repeating-linear-gradient(135deg,rgba(255,255,255,.10) 0 14px,transparent 14px 28px)}
.v2-hero-card{position:relative;background:rgba(255,255,255,.96);color:var(--v2-ink);border-radius:16px;padding:24px 26px;width:min(320px,84%);box-shadow:0 18px 40px -18px rgba(0,0,0,.35)}
.v2-hero-card b{display:block;font-size:30px;font-weight:800;color:var(--v2-blue)}
.v2-hero-card span{font-size:13.5px;color:var(--v2-body)}
.v2-hero-card hr{border:0;border-top:1px solid var(--v2-line);margin:14px 0}
.v2-dots{display:flex;gap:7px;margin-top:26px}
.v2-dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.45)}
.v2-dots i.on{background:#fff;width:22px;border-radius:99px}

/* ---------- section furniture ---------- */
.v2-sec{padding:76px 0}
.v2-sec.soft{background:var(--v2-soft)}
.v2-sec-head{text-align:center;max-width:760px;margin:0 auto 46px}
.v2-sec-head h2{font-size:clamp(23px,3vw,34px);font-weight:800;text-transform:uppercase;letter-spacing:-.01em}
.v2-sec-head p{margin:14px auto 0;max-width:56em}
.v2-eyebrow{display:block;font-size:11.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--v2-orange);margin-bottom:12px}
.v2-sec.soft .v2-eyebrow{color:var(--v2-blue)}

/* ---------- service cards ---------- */
.v2-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.v2-card{background:#fff;border:1px solid var(--v2-line);border-radius:var(--v2-radius);padding:24px 22px 0;position:relative;
  overflow:hidden;transition:.2s;display:flex;flex-direction:column;min-height:238px}
.v2-card:hover{transform:translateY(-4px);box-shadow:var(--v2-shadow);border-color:#D5DAE3}
.v2-card .v2-cico{width:38px;height:38px;border-radius:10px;background:var(--v2-blue-soft);color:var(--v2-blue);display:grid;place-items:center;margin-bottom:16px}
.v2-card.o .v2-cico{background:var(--v2-orange-soft);color:var(--v2-orange-deep)}
.v2-card h3{font-size:17px;margin-bottom:9px}
.v2-card p{font-size:14.5px;margin:0 0 16px;color:var(--v2-body)}
.v2-card .v2-more{margin-top:auto;padding-bottom:22px;font-size:14px;font-weight:600;color:var(--v2-blue);display:inline-flex;align-items:center;gap:7px}
.v2-card.o .v2-more{color:var(--v2-orange-deep)}
.v2-card .v2-bar{height:5px;background:var(--v2-blue);margin:0 -22px}
.v2-card.o .v2-bar{background:var(--v2-orange)}

/* ---------- client stories ---------- */
.v2-stories{background:var(--v2-blue);color:#fff;padding:76px 0}
.v2 .v2-stories h2{color:#fff;font-size:clamp(22px,3vw,34px);font-weight:800;text-transform:uppercase;line-height:1.18}
.v2 .v2-stories .v2-eyebrow{color:#E9EEF8}
.v2-stories-head{display:flex;align-items:flex-end;gap:24px;margin-bottom:38px;flex-wrap:wrap}
.v2-stories-head .v2-arrows{margin-left:auto;display:flex;gap:10px}
.v2-arrows button{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:transparent;color:#fff;cursor:pointer;display:grid;place-items:center}
.v2-arrows button:hover{background:rgba(255,255,255,.16)}
.v2-rail{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.v2-story{background:#fff;border-radius:var(--v2-radius);overflow:hidden;color:var(--v2-ink);display:flex;flex-direction:column;transition:.2s}
.v2-story:hover{transform:translateY(-4px)}
.v2-story .v2-shot{aspect-ratio:4/3;position:relative;display:grid;place-items:center;color:#fff;font-weight:800;letter-spacing:-.03em;font-size:22px}
.v2-story .v2-tag{position:absolute;top:12px;left:12px;background:var(--v2-orange);color:#fff;font-size:11px;font-weight:700;padding:4px 9px;border-radius:6px}
.v2-story .v2-body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.v2-story .v2-kind{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--v2-blue)}
.v2-story h4{font-size:16px}
.v2-story .v2-see{margin-top:auto;font-size:13.5px;font-weight:700;color:var(--v2-blue);display:inline-flex;gap:6px;align-items:center}

/* ---------- hosting band ---------- */
.v2-band{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.v2-band .v2-card{min-height:0;padding-bottom:22px}
.v2-band .v2-card .v2-price{font-size:15px;font-weight:800;color:var(--v2-ink);margin:0 0 4px}

/* ---------- CTA ---------- */
.v2-cta{background:var(--v2-ink);color:#fff;padding:66px 0;text-align:center}
.v2 .v2-cta h2{color:#fff;font-size:clamp(22px,3vw,32px);font-weight:800;text-transform:uppercase}
.v2 .v2-cta p{color:#D1D5DB;max-width:44em;margin:14px auto 26px}
.v2-cta .v2-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ---------- footer ---------- */
.v2-foot{background:#1F2937;color:#9CA3AF;padding:58px 0 26px;font-size:14.5px}
.v2 .v2-foot h4{color:#fff;font-size:13px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px}
.v2-foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:34px}
.v2-foot a:hover{color:#fff}
.v2-foot ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.v2-foot .v2-logo{color:#fff}
.v2-foot .v2-logo b,.v2-foot .v2-logo small{color:#fff}
.v2-foot .v2-copy{margin-top:38px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);display:flex;gap:16px;flex-wrap:wrap;font-size:13px}

/* ---------- whatsapp float ---------- */
.v2-wa-float{position:fixed;right:20px;bottom:20px;width:54px;height:54px;border-radius:50%;background:#06B6D4;color:#fff;
  display:grid;place-items:center;z-index:70;box-shadow:0 12px 26px -8px rgba(37,211,102,.6)}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .v2-grid4{grid-template-columns:repeat(2,1fr)}
  .v2-rail{grid-template-columns:repeat(2,1fr)}
  .v2-foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .v2-nav{display:none}
  .v2-burger{display:inline-flex}
  body.v2.v2-nav-open .v2-nav{display:flex;position:fixed;left:0;right:0;top:112px;background:#fff;flex-direction:column;
    align-items:stretch;padding:12px;gap:2px;border-bottom:1px solid var(--v2-line);box-shadow:var(--v2-shadow);max-height:70vh;overflow:auto}
  body.v2.v2-nav-open .v2-nav>a{padding:13px 14px}
  .v2-hero{grid-template-columns:1fr}
  .v2-hero-r{min-height:230px;padding:34px 0}
  .v2-util .v2-right .v2-hide{display:none}
  .v2-band{grid-template-columns:1fr}
  .v2-sec{padding:56px 0}
  .v2-cta{padding:52px 0}
}
@media (max-width:620px){
  .v2-grid4,.v2-rail{grid-template-columns:1fr}
  .v2-foot-grid{grid-template-columns:1fr}
  .v2-hero-l{padding:44px 0}
  .v2-logo small{display:none}
}

/* ---------- homepage extras ---------- */
.v2-hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(55,65,81,.22);
  border:1px solid rgba(255,255,255,.38);color:#fff;border-radius:999px;padding:6px 14px;font-size:13px;font-weight:600;margin-bottom:18px}
.v2-hero-badge .ic{width:15px;height:15px}
.v2-hero-btns{display:flex;gap:12px;flex-wrap:wrap}
.v2-hero-link{display:inline-flex;align-items:center;gap:7px;color:var(--v2-blue);font-weight:700;font-size:14.5px}
.v2-hero-link:hover{color:var(--v2-blue-deep)}
.v2-hero-card .ic{width:15px;height:15px}

/* stat strip */
.v2-strip{background:#fff;border-bottom:1px solid var(--v2-line)}
.v2-strip-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding-top:26px;padding-bottom:26px}
.v2-strip-row>div{text-align:center}
.v2-strip-row b{display:block;font-size:clamp(21px,2.4vw,29px);font-weight:800;color:var(--v2-ink);letter-spacing:-.02em}
.v2-strip-row span{font-size:13px;color:var(--v2-body)}
@media (max-width:620px){.v2-strip-row{grid-template-columns:repeat(2,1fr);gap:16px}}

/* hosting band price */
.v2-band .v2-price{font-size:16px;font-weight:800;color:var(--v2-blue);margin:0 0 6px}

/* stories rail: a real scroller so the arrows work at every width */
.v2-rail{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:8px;scrollbar-width:none;-ms-overflow-style:none}
.v2-rail::-webkit-scrollbar{display:none}
.v2-story{flex:0 0 calc((100% - 60px) / 4);scroll-snap-align:start}
@media (max-width:1080px){.v2-story{flex-basis:calc((100% - 20px) / 2)}}
@media (max-width:620px){.v2-story{flex-basis:84%}}
.v2-shot{min-height:150px}

/* ---------- shop / blog grid (the old rule is scoped to .blk) ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}
.v2 .cards{grid-template-columns:repeat(3,1fr)}
@media (max-width:1080px){.v2 .cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.v2 .cards{grid-template-columns:1fr}}
.v2 .cards .pc-media{aspect-ratio:16/10;overflow:hidden;display:block;border-radius:14px 14px 0 0}
.v2 .cards .pc-img,.v2 .cards .cover-fallback{width:100%;height:100%;object-fit:cover;display:block}

/* ==========================================================================
   Services page — premium layout. Deep Blue #1E3A8A · Dark Gray #374151 ·
   Bright Cyan #06B6D4 and their shades only.
   ========================================================================== */
.v2-btn.sm{padding:9px 15px;font-size:14px;border-radius:9px}

/* hero */
.sv-hero{background:linear-gradient(160deg,#1E3A8A 0%,#16296B 100%);color:#fff;padding:56px 0 62px;position:relative;overflow:hidden}
.sv-hero::after{content:"";position:absolute;right:-10%;top:-30%;width:52%;height:170%;transform:rotate(18deg);
  background:linear-gradient(180deg,rgba(6,182,212,.20),rgba(6,182,212,0) 70%);pointer-events:none}
.sv-hero>*{position:relative;z-index:1}
.sv-crumbs{display:flex;gap:9px;align-items:center;font-size:13px;color:#C7D2E9;margin-bottom:22px}
.sv-crumbs a{color:#C7D2E9}.sv-crumbs a:hover{color:#fff}
.sv-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(6,182,212,.20);
  border:1px solid rgba(6,182,212,.55);color:#E6F8FC;border-radius:999px;padding:6px 14px;font-size:13px;font-weight:600;margin-bottom:18px}
.sv-badge .ic{width:15px;height:15px}
.sv-hero h1{color:#fff;font-size:clamp(30px,4.2vw,48px);font-weight:800;letter-spacing:-.025em;max-width:19em;margin:0 0 16px}
.sv-sub{color:#E9EEF8;font-size:17px;max-width:52em;margin:0 0 28px}
.sv-hero-btns{display:flex;gap:12px;flex-wrap:wrap}

/* hero fact row */
.sv-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:40px 0 0;padding:24px 0 0;
  border-top:1px solid rgba(255,255,255,.18)}
.sv-facts dt{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#C7D2E9;margin-bottom:4px}
.sv-facts dd{margin:0;font-size:clamp(18px,2.2vw,25px);font-weight:800;color:#fff;letter-spacing:-.02em}
@media (max-width:700px){.sv-facts{grid-template-columns:repeat(2,1fr);gap:16px}}

/* sticky category nav */
.sv-jump{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid #E5E7EB}
.sv-jump .v2-wrap{display:flex;gap:8px;overflow-x:auto;padding-top:12px;padding-bottom:12px;scrollbar-width:none}
.sv-jump .v2-wrap::-webkit-scrollbar{display:none}
.sv-pill{flex:none;display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;
  border:1px solid #E5E7EB;background:#fff;color:#374151;font-size:14px;font-weight:600;white-space:nowrap;transition:.15s}
.sv-pill b{background:#E8EDF8;color:#1E3A8A;border-radius:999px;padding:1px 8px;font-size:12.5px}
.sv-pill:hover{border-color:#1E3A8A;color:#1E3A8A}
.sv-pill.on{background:#1E3A8A;border-color:#1E3A8A;color:#fff}
.sv-pill.on b{background:rgba(255,255,255,.22);color:#fff}

/* groups + grid */
.sv-group{margin-bottom:64px;scroll-margin-top:76px}
.sv-group:last-child{margin-bottom:0}
.sv-group-head{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:24px;
  padding-bottom:16px;border-bottom:1px solid #E5E7EB}
.sv-group-head h2{font-size:clamp(21px,2.6vw,29px);font-weight:800;color:#374151;letter-spacing:-.02em;margin:0}
.sv-group-head .sv-link{margin-left:auto}
.sv-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
@media (max-width:900px){.sv-grid{grid-template-columns:1fr}}

/* service card */
.sv-card{display:flex;flex-direction:column;background:#fff;border:1px solid #E5E7EB;border-radius:16px;
  padding:26px 26px 0;transition:transform .18s,box-shadow .18s,border-color .18s;position:relative;overflow:hidden}
.sv-card::after{content:"";position:absolute;inset:auto 0 0 0;height:4px;
  background:linear-gradient(90deg,#1E3A8A,#06B6D4)}
.sv-card:hover{transform:translateY(-4px);border-color:#D1D5DB;
  box-shadow:0 1px 3px rgba(55,65,81,.06),0 18px 36px -20px rgba(55,65,81,.28)}
.sv-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.sv-ico{width:44px;height:44px;border-radius:12px;background:#E8EDF8;color:#1E3A8A;display:grid;place-items:center;flex:none}
.sv-ico .ic{width:21px;height:21px}
.sv-cat{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#0E7490;
  background:#E6F8FC;border-radius:999px;padding:5px 11px}
.sv-card h3{font-size:19.5px;font-weight:750;color:#374151;letter-spacing:-.015em;margin:0 0 9px}
.sv-lead{margin:0 0 16px;color:#6B7280;font-size:14.8px}
.sv-deliver{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:9px}
.sv-deliver li{display:flex;gap:10px;align-items:flex-start;font-size:14.3px;color:#4B5563}
.sv-tick{width:19px;height:19px;border-radius:50%;background:#E6F8FC;color:#0891B2;display:grid;place-items:center;flex:none;margin-top:1px}
.sv-tick .ic{width:12px;height:12px;stroke-width:2.6}
.sv-card-foot{margin-top:auto;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:16px 0 22px;border-top:1px solid #E5E7EB}
.sv-price{font-size:19px;font-weight:800;color:#1E3A8A;letter-spacing:-.02em}
.sv-price small{display:block;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#6B7280}
.sv-cta{margin-left:auto;display:flex;align-items:center;gap:14px}
.sv-link{display:inline-flex;align-items:center;gap:6px;color:#1E3A8A;font-weight:600;font-size:14.5px}
.sv-link:hover{color:#16296B;text-decoration:underline}
.sv-link .ic{width:15px;height:15px}

/* empty state */
.sv-empty{text-align:center;max-width:520px;margin:20px auto 40px}
.sv-empty .sv-ico{margin:0 auto 18px;width:56px;height:56px;border-radius:16px}
.sv-empty h2{font-size:24px;margin-bottom:10px}
.sv-empty p{margin:0 0 22px}

/* includes */
.sv-includes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:16px 28px}
.sv-includes li{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid #E5E7EB;
  border-radius:13px;padding:16px 18px;font-size:15px;color:#374151;font-weight:500}
@media (max-width:760px){.sv-includes{grid-template-columns:1fr}}

/* engagement models */
.sv-models{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}
@media (max-width:980px){.sv-models{grid-template-columns:1fr}}
.sv-model{position:relative;background:#fff;border:1px solid #E5E7EB;border-radius:16px;padding:28px 24px;
  display:flex;flex-direction:column;gap:12px}
.sv-model.best{border-color:#1E3A8A;box-shadow:0 20px 40px -24px rgba(30,58,138,.45)}
.sv-model.best::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;border-radius:16px 16px 0 0;
  background:linear-gradient(90deg,#1E3A8A,#06B6D4)}
.sv-flag{position:absolute;top:-13px;left:24px;background:#16296B;color:#fff;font-size:11.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:5px 12px}
.sv-model h3{font-size:19px;margin:0;color:#374151}
.sv-model-price{font-size:22px;font-weight:800;color:#1E3A8A;margin:0;letter-spacing:-.02em}
.sv-model p{margin:0;color:#6B7280;font-size:14.6px}
.sv-model .sv-deliver{margin:4px 0 6px}
.sv-model .v2-btn{margin-top:auto}

/* tech + industries */
.sv-two{display:grid;grid-template-columns:1fr 1fr;gap:40px}
@media (max-width:900px){.sv-two{grid-template-columns:1fr;gap:32px}}
.sv-h3{font-size:clamp(19px,2.2vw,24px);font-weight:800;color:#374151;margin:0 0 16px;letter-spacing:-.02em}
.sv-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:9px}
.sv-chips li{background:#fff;border:1px solid #E5E7EB;border-radius:999px;padding:8px 15px;
  font-size:13.8px;color:#374151;font-weight:500}
.sv-chips li:hover{border-color:#1E3A8A;color:#1E3A8A}

/* cta note */
.sv-cta-note{display:flex;align-items:center;justify-content:center;gap:8px;margin:24px 0 0;
  font-size:13.5px;color:#D1D5DB}
.sv-cta-note .ic{width:15px;height:15px}

/* keyboard focus, everywhere on this page */
.sv-services a:focus-visible,.sv-services button:focus-visible{outline:3px solid #06B6D4;outline-offset:2px;border-radius:8px}

/* ==========================================================================
   Product catalogue — premium layout. Three brand colours only.
   ========================================================================== */
.pd-hero{background:linear-gradient(160deg,#1E3A8A 0%,#16296B 100%);color:#fff;padding:54px 0 60px;position:relative;overflow:hidden}
.pd-hero::after{content:"";position:absolute;right:-12%;top:-35%;width:50%;height:180%;transform:rotate(18deg);
  background:linear-gradient(180deg,rgba(6,182,212,.20),rgba(6,182,212,0) 70%);pointer-events:none}
.pd-hero>*{position:relative;z-index:1}
.pd-crumbs{display:flex;gap:9px;align-items:center;font-size:13px;color:#C7D2E9;margin-bottom:20px}
.pd-crumbs a{color:#C7D2E9}.pd-crumbs a:hover{color:#fff}
.pd-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(6,182,212,.20);border:1px solid rgba(6,182,212,.55);
  color:#E6F8FC;border-radius:999px;padding:6px 14px;font-size:13px;font-weight:600;margin-bottom:18px}
.pd-badge .ic{width:15px;height:15px}
.pd-hero h1{color:#fff;font-size:clamp(29px,4vw,46px);font-weight:800;letter-spacing:-.025em;max-width:20em;margin:0 0 14px}
.pd-sub{color:#E9EEF8;font-size:16.5px;max-width:52em;margin:0 0 26px}
.pd-search{display:flex;max-width:520px;margin-bottom:34px}
.pd-search input{flex:1;min-height:48px;padding:0 16px;border:0;border-radius:12px 0 0 12px;font:inherit;font-size:15px;color:#374151}
.pd-search input:focus{outline:3px solid #06B6D4;outline-offset:-3px}
.pd-search button{min-width:54px;border:0;border-radius:0 12px 12px 0;background:#06B6D4;color:#fff;cursor:pointer;display:grid;place-items:center}
.pd-search button:hover{background:#0891B2}
.pd-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:0;padding:24px 0 0;border-top:1px solid rgba(255,255,255,.18)}
.pd-facts dt{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#C7D2E9;margin-bottom:4px}
.pd-facts dd{margin:0;font-size:clamp(18px,2.2vw,25px);font-weight:800;color:#fff;letter-spacing:-.02em}
@media (max-width:700px){.pd-facts{grid-template-columns:repeat(2,1fr);gap:16px}}

/* quick filters + categories */
.pd-quickhead{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.pd-h2{font-size:clamp(18px,2.2vw,23px);font-weight:800;color:#374151;letter-spacing:-.02em;margin:0}
.pd-quick{list-style:none;display:flex;gap:9px;flex-wrap:wrap;margin:0;padding:0;margin-left:auto}
.pd-pill{display:inline-flex;padding:9px 15px;border-radius:999px;border:1px solid #E5E7EB;background:#fff;
  color:#374151;font-size:14px;font-weight:600;transition:.15s}
.pd-pill:hover{border-color:#1E3A8A;color:#1E3A8A}
.pd-pill.on{background:#1E3A8A;border-color:#1E3A8A;color:#fff}
.pd-bento{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media (max-width:1080px){.pd-bento{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.pd-bento{grid-template-columns:1fr}}
.pd-tile{display:flex;flex-direction:column;gap:7px;background:#fff;border:1px solid #E5E7EB;border-radius:14px;
  padding:20px;transition:.18s;position:relative;overflow:hidden}
.pd-tile::after{content:"";position:absolute;inset:auto 0 0 0;height:4px;background:linear-gradient(90deg,#1E3A8A,#06B6D4);opacity:0;transition:.18s}
.pd-tile:hover{transform:translateY(-3px);border-color:#D1D5DB;box-shadow:0 1px 3px rgba(55,65,81,.06),0 14px 30px -18px rgba(55,65,81,.25)}
.pd-tile:hover::after,.pd-tile.on::after{opacity:1}
.pd-tile.on{border-color:#1E3A8A}
.pd-tico{width:42px;height:42px;border-radius:12px;background:#E8EDF8;color:#1E3A8A;display:grid;place-items:center;flex:none}
.pd-tico .ic{width:20px;height:20px}
.pd-tile b{font-size:16px;color:#374151;font-weight:750}
.pd-tn{font-size:13px;color:#6B7280}

/* toolbar */
.pd-main{padding-top:34px}
.pd-tool{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-bottom:1px solid #E5E7EB;
  padding:14px 0;margin-bottom:30px}
.pd-tool-l{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pd-count{font-size:15px;color:#374151;font-weight:750}
.pd-chips{display:flex;gap:8px;flex-wrap:wrap}
.pd-chip{display:inline-flex;align-items:center;gap:7px;background:#E8EDF8;color:#1E3A8A;border-radius:999px;
  padding:6px 12px;font-size:13px;font-weight:600}
.pd-chip .ic{width:13px;height:13px;opacity:.75}
.pd-chip:hover{background:#D5DAE3}
.pd-chip.clear{background:#fff;border:1px solid #E5E7EB;color:#6B7280}
/* keep the right-hand group on ONE row: the sort pills scroll instead of
   wrapping, which otherwise dropped the Filters button onto a second line */
.pd-tool-r{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:nowrap;min-width:0}
.pd-sorts{display:flex;gap:4px;flex-wrap:nowrap;overflow-x:auto;min-width:0;scrollbar-width:none;-ms-overflow-style:none}
.pd-sorts::-webkit-scrollbar{display:none}
.pd-sort{padding:8px 12px;border-radius:9px;font-size:13.8px;font-weight:600;color:#4B5563;white-space:nowrap}
.pd-filter,.pd-tool .viewtoggle{flex:none}
.pd-sort:hover{background:#F4F6F9;color:#1E3A8A}
.pd-sort.on{background:#1E3A8A;color:#fff}
.pd-filter{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:9px;
  border:1px solid #E5E7EB;background:#fff;color:#374151;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.pd-filter:hover{border-color:#1E3A8A;color:#1E3A8A}
.pd-filter b{background:#1E3A8A;color:#fff;border-radius:999px;padding:1px 8px;font-size:12px}
.pd-tool .viewtoggle{display:flex;border:1px solid #E5E7EB;border-radius:9px;overflow:hidden}
.pd-tool .viewtoggle button{width:40px;height:38px;border:0;background:#fff;color:#6B7280;cursor:pointer;display:grid;place-items:center}
.pd-tool .viewtoggle button.is-on{background:#1E3A8A;color:#fff}

/* spotlight */
.pd-spot{display:grid;grid-template-columns:1fr 1.1fr;gap:0;background:#fff;border:1px solid #E5E7EB;
  border-radius:18px;overflow:hidden;margin-bottom:38px}
@media (max-width:900px){.pd-spot{grid-template-columns:1fr}}
.pd-spot-media{display:block;background:#E8EDF8}
.pd-spot-img{width:100%;height:100%;object-fit:cover;min-height:280px;display:block}
.pd-spot-body{padding:34px 34px 32px;display:flex;flex-direction:column;gap:14px}
.pd-spot-flag{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;background:#E6F8FC;color:#0E7490;
  border-radius:999px;padding:6px 13px;font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.pd-spot-flag .ic{width:14px;height:14px}
.pd-spot-body h2{font-size:clamp(20px,2.6vw,28px);font-weight:800;color:#374151;letter-spacing:-.02em;margin:0}
.pd-spot-body h2 a:hover{color:#1E3A8A}
.pd-spot-body p{margin:0;color:#6B7280}
.pd-points{list-style:none;margin:4px 0;padding:0;display:grid;gap:9px}
.pd-points li{display:flex;gap:9px;align-items:center;font-size:14.4px;color:#4B5563}
.pd-points .ic{width:16px;height:16px;color:#0891B2;flex:none}
.pd-spot-foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:auto;padding-top:18px;border-top:1px solid #E5E7EB}

/* grid + cards */
/* stretch so every card in a row shares a height and the price/action row
   lines up across the row — align-items:start left the footers ragged */
.pd-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;align-items:stretch}
@media (max-width:1180px){.pd-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:900px){.pd-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.pd-grid{grid-template-columns:1fr}}
.pd-card{display:flex;flex-direction:column;background:#fff;border:1px solid #E5E7EB;border-radius:16px;
  overflow:hidden;transition:transform .18s,box-shadow .18s,border-color .18s;position:relative}
.pd-card::after{content:"";position:absolute;inset:auto 0 0 0;height:4px;background:linear-gradient(90deg,#1E3A8A,#06B6D4)}
.pd-card:hover{transform:translateY(-4px);border-color:#D1D5DB;box-shadow:0 1px 3px rgba(55,65,81,.06),0 18px 36px -20px rgba(55,65,81,.28)}
.pd-media{display:block;position:relative;aspect-ratio:16/10;background:#E8EDF8;overflow:hidden}
.pd-img{width:100%;height:100%;object-fit:cover;display:block}
.pd-badges{position:absolute;top:12px;left:12px;display:flex;gap:6px;flex-wrap:wrap}
.pd-cat{background:rgba(255,255,255,.95);color:#1E3A8A;border-radius:999px;padding:4px 11px;font-size:11.5px;font-weight:700}
.pd-off{background:#1E3A8A;color:#fff;border-radius:999px;padding:4px 11px;font-size:11.5px;font-weight:700}
.pd-pick{position:absolute;bottom:12px;left:12px;display:inline-flex;align-items:center;gap:6px;
  background:#1E3A8A;color:#fff;border-radius:999px;padding:5px 12px;font-size:11.5px;font-weight:700}
.pd-pick.new{background:#06B6D4;color:#fff}
.pd-pick .ic{width:12px;height:12px}
.pd-body{padding:18px 18px 0;display:flex;flex-direction:column;gap:10px;flex:1}
.pd-body h3{font-size:16.5px;font-weight:750;color:#374151;letter-spacing:-.015em;margin:0;line-height:1.35}
.pd-body h3 a:hover{color:#1E3A8A}
.pd-desc{margin:0;font-size:14px;color:#6B7280}
.pd-specs{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
.pd-specs li{background:#F4F6F9;border:1px solid #E5E7EB;border-radius:7px;padding:4px 9px;font-size:12px;color:#4B5563}
.pd-meta{display:flex;align-items:center;gap:12px;margin:0;flex-wrap:wrap}
.pd-stars{display:inline-flex;align-items:center;gap:2px;color:#0891B2}
.pd-stars .ic{width:13px;height:13px;fill:currentColor;stroke-width:0}
.pd-stars b{margin-left:5px;font-size:13px;color:#374151}
.pd-sold{font-size:12.5px;color:#6B7280}
/* Deterministic two-row foot: price on its own line, then the actions. A single
   row wrapped only on cards whose price also shows a struck-through original,
   which left the footers at different heights across the same row. */
.pd-foot{margin-top:auto;display:flex;flex-direction:column;align-items:stretch;gap:12px;
  padding:14px 0 18px;border-top:1px solid #E5E7EB}
.pd-price{display:flex;align-items:baseline;gap:8px}
.pd-price b{font-size:18px;font-weight:800;color:#1E3A8A;letter-spacing:-.02em}
.pd-price s{font-size:13px;color:#6B7280}
.pd-price.big b{font-size:26px}
.pd-actions{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pd-details{display:inline-flex;align-items:center;gap:6px;color:#1E3A8A;font-weight:600;font-size:14px}
.pd-details:hover{color:#16296B;text-decoration:underline}
.pd-details .ic{width:15px;height:15px}

/* list view (ui.js toggles .is-list on #plist) */
#plist.is-list{grid-template-columns:1fr}
#plist.is-list .pd-card{flex-direction:row}
#plist.is-list .pd-media{width:280px;flex:none;aspect-ratio:auto;min-height:190px}
#plist.is-list .pd-body{padding:18px 20px 18px 0}
@media (max-width:700px){#plist.is-list .pd-card{flex-direction:column}#plist.is-list .pd-media{width:100%;aspect-ratio:16/10}}

/* empty + pager */
.pd-empty{text-align:center;max-width:520px;margin:20px auto 40px}
.pd-empty .pd-tico{margin:0 auto 18px;width:56px;height:56px;border-radius:16px}
.pd-empty h3{font-size:22px;color:#374151;margin:0 0 10px}
.pd-empty p{margin:0 0 20px}
.pd-pager{display:flex;gap:8px;justify-content:center;margin-top:40px}
.pd-pager a{min-width:42px;height:42px;display:grid;place-items:center;border:1px solid #E5E7EB;border-radius:10px;
  color:#374151;font-weight:600;background:#fff}
.pd-pager a:hover{border-color:#1E3A8A;color:#1E3A8A}
.pd-pager a.is-on{background:#1E3A8A;border-color:#1E3A8A;color:#fff}

/* focus */
.pd-page a:focus-visible,.pd-page button:focus-visible,.pd-page input:focus-visible{outline:3px solid #06B6D4;outline-offset:2px;border-radius:8px}

/* ==========================================================================
   Products — signature style. A blueprint/editorial system: measured grid,
   corner registration ticks, a ledger panel and a numbered index.
   Three brand colours only.
   ========================================================================== */
.pd-page{--pd-rule:#E5E7EB}
.pd-page :is(.pd-price b,.pd-count,.pd-inum,.pd-ledger dd,.pd-pager a){font-variant-numeric:tabular-nums}

/* hero: measured blueprint ground */
.pd-hero{
  background:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px) 0 0/46px 46px,
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px) 0 0/46px 46px,
    linear-gradient(160deg,#1E3A8A 0%,#16296B 100%);
  padding:56px 0 58px;
}
.pd-hero::after{display:none}                    /* replaced by .pd-rule */
.pd-rule{position:absolute;top:-45%;right:5%;width:30%;height:195%;transform:rotate(16deg);
  background:linear-gradient(180deg,rgba(6,182,212,.20),rgba(6,182,212,0) 72%);pointer-events:none}
.pd-tick{position:absolute;width:22px;height:22px;border:2px solid rgba(6,182,212,.5);pointer-events:none}
.pd-tick.tl{top:20px;left:20px;border-right:0;border-bottom:0}
.pd-tick.tr{top:20px;right:20px;border-left:0;border-bottom:0}
.pd-tick.bl{bottom:20px;left:20px;border-right:0;border-top:0}
.pd-tick.br{bottom:20px;right:20px;border-left:0;border-top:0}
@media (max-width:900px){.pd-tick{display:none}}

.pd-hero-grid{display:grid;grid-template-columns:1.5fr .8fr;gap:48px;align-items:center}
@media (max-width:1020px){.pd-hero-grid{grid-template-columns:1fr;gap:30px}}
.pd-hero-main{min-width:0}

/* ledger panel */
.pd-ledger{background:rgba(31,41,55,.30);border:1px solid rgba(255,255,255,.16);border-radius:16px;
  padding:22px 22px 4px;backdrop-filter:blur(8px)}
.pd-ledger-head{display:block;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:#9FD8E6;font-weight:700;margin-bottom:12px}
.pd-ledger-head b{color:#fff}
.pd-ledger dl{margin:0}
.pd-ledger dl>div{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:12px 0;border-top:1px solid rgba(255,255,255,.14)}
.pd-ledger dl>div:first-child{border-top:0}
.pd-ledger dt{display:inline-flex;align-items:center;gap:10px;margin:0;font-size:13.5px;color:#C7D2E9}
.pd-ledger dt i{font-style:normal;font-size:11.5px;font-weight:700;letter-spacing:.06em;color:#67E8F9}
.pd-ledger dd{margin:0;font-size:20px;font-weight:800;color:#fff;letter-spacing:-.02em}
@media (max-width:1020px){
  .pd-ledger dl{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}
  .pd-ledger dl>div:nth-child(2){border-top:0}
}

/* editorial heading prefix */
.pd-h2::before{content:"01 / ";color:#06B6D4;font-size:.74em;letter-spacing:.16em;font-weight:800}

/* numbered index */
.pd-index{list-style:none;margin:0;padding:0;border-top:1px solid var(--pd-rule)}
.pd-index li:last-child .pd-irow{border-bottom:1px solid var(--pd-rule)}
.pd-irow{position:relative;display:grid;grid-template-columns:54px 42px 1fr auto 26px;align-items:center;
  gap:18px;padding:18px 16px;border-bottom:1px solid var(--pd-rule);background:transparent;transition:background .16s,padding .16s}
.pd-irow::before{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:#06B6D4;transition:width .16s}
.pd-irow:hover{background:#fff;padding-left:26px}
.pd-irow:hover::before{width:4px}
.pd-irow.on{background:#fff;box-shadow:inset 0 0 0 1px #1E3A8A}
.pd-irow.on::before{width:4px;background:#1E3A8A}
.pd-inum{font-size:12.5px;font-weight:800;letter-spacing:.14em;color:#4B5563}
.pd-iico{width:40px;height:40px;border-radius:11px;background:#E8EDF8;color:#1E3A8A;display:grid;place-items:center;flex:none}
.pd-iico .ic{width:19px;height:19px}
.pd-iname{font-size:clamp(16.5px,1.9vw,20px);font-weight:750;color:#374151;letter-spacing:-.015em}
.pd-imeta{font-size:13.4px;color:#4B5563}
.pd-igo{color:#1E3A8A;display:grid;place-items:center;transition:transform .16s}
.pd-irow:hover .pd-igo{transform:translateX(4px)}
@media (max-width:720px){
  .pd-irow{grid-template-columns:40px 38px 1fr 22px;gap:12px;padding:16px 12px}
  .pd-imeta{grid-column:3;font-size:12.8px;margin-top:-6px}
  .pd-igo{grid-row:1;grid-column:4}
}

/* card index number */
.pd-card-n{position:absolute;top:10px;right:11px;z-index:2;font-size:11.5px;font-weight:800;letter-spacing:.1em;
  color:#fff;background:rgba(30,58,138,.88);border-radius:7px;padding:3px 8px}
.pd-card:hover .pd-card-n{background:#06B6D4}

/* The generated artwork is 1200x750 (16:10) with the title bottom-left. The
   spotlight column is tall, so object-fit:cover sliced the title mid-word
   ("...AS & TOOLS"). Keep the artwork's own ratio and frame it on a neutral
   ground instead — nothing is cropped, at any column width. */
.pd-spot-media{display:flex;align-items:center;justify-content:center;background:#F4F6F9}
.pd-spot-img{width:100%;height:auto;min-height:0;object-fit:fill;display:block}

/* ==========================================================================
   Client portal — Deep Blue / Dark Gray / Bright Cyan only.
   ========================================================================== */
.pt-portal{display:grid;grid-template-columns:268px minmax(0,1fr);gap:30px;align-items:start;padding-top:34px}
@media (max-width:960px){.pt-portal{grid-template-columns:1fr;gap:20px}}
.pt-main{min-width:0;display:flex;flex-direction:column;gap:24px}

/* ---------- sidebar ---------- */
.pt-nav{position:sticky;top:88px;display:flex;flex-direction:column;gap:16px;background:#fff;
  border:1px solid #E5E7EB;border-radius:16px;padding:18px}
@media (max-width:960px){.pt-nav{position:static}}
.pt-id{display:flex;align-items:center;gap:12px}
.pt-avatar{width:44px;height:44px;border-radius:13px;flex:none;display:grid;place-items:center;
  background:linear-gradient(135deg,#1E3A8A,#16296B);color:#fff;font-weight:800;font-size:17px;position:relative}
.pt-avatar::after{content:"";position:absolute;right:-3px;bottom:-3px;width:13px;height:13px;border-radius:5px;background:#06B6D4}
.pt-idinfo{min-width:0;display:flex;flex-direction:column}
.pt-idinfo b{font-size:15px;color:#374151;font-weight:750;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pt-idinfo small{font-size:12.5px;color:#6B7280;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.pt-wallet{background:linear-gradient(152deg,#1E3A8A 0%,#16296B 100%);border-radius:14px;padding:16px 16px 14px;color:#fff;
  display:flex;flex-direction:column;gap:3px;position:relative;overflow:hidden}
.pt-wallet::after{content:"";position:absolute;right:-30%;top:-60%;width:90%;height:190%;transform:rotate(18deg);
  background:linear-gradient(180deg,rgba(6,182,212,.20),rgba(6,182,212,0) 70%);pointer-events:none}
.pt-wallet>*{position:relative;z-index:1}
.pt-wlab{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#C7D2E9;font-weight:700}
.pt-wbal{font-size:25px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pt-wpen{font-size:12px;color:#9FD8E6}
.pt-wbtn{margin-top:10px;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  background:#06B6D4;color:#1F2937;border-radius:9px;padding:9px 14px;font-size:13.5px;font-weight:700}
.pt-wbtn:hover{background:#0891B2}
.pt-wbtn .ic{width:15px;height:15px}

.pt-links{display:flex;flex-direction:column;gap:2px;border-top:1px solid #E5E7EB;padding-top:12px}
.pt-links a,.pt-out{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;
  font-size:14.5px;font-weight:600;color:#4B5563}
.pt-links a:hover,.pt-out:hover{background:#F4F6F9;color:#1E3A8A}
.pt-links a.is-active{background:#E8EDF8;color:#1E3A8A}
.pt-ic{display:grid;place-items:center;width:20px;flex:none}
.pt-ic .ic{width:18px;height:18px}
.pt-out{border-top:1px solid #E5E7EB;margin-top:2px;color:#6B7280}
.pt-out:hover{color:#374151}

/* ---------- page head ---------- */
.pt-head{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap}
.pt-eyebrow{display:block;font-size:11.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:#06B6D4;margin-bottom:8px}
.pt-head h1{font-size:clamp(23px,3vw,33px);font-weight:800;color:#374151;letter-spacing:-.025em;margin:0 0 6px}
.pt-head p{margin:0}
.pt-head .v2-btn{margin-left:auto}

/* ---------- balance hero ---------- */
.pt-balance{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:0;border-radius:18px;overflow:hidden;
  background:linear-gradient(152deg,#1E3A8A 0%,#16296B 100%);color:#fff;position:relative}
.pt-balance::after{content:"";position:absolute;right:-14%;top:-40%;width:46%;height:180%;transform:rotate(18deg);
  background:linear-gradient(180deg,rgba(6,182,212,.22),rgba(6,182,212,0) 72%);pointer-events:none}
.pt-balance>*{position:relative;z-index:1}
@media (max-width:860px){.pt-balance{grid-template-columns:1fr}}
.pt-bal-main{padding:30px 30px 28px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
@media (max-width:860px){.pt-bal-main{padding:26px 22px 20px}}
.pt-bal-lab{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:#C7D2E9;font-weight:700}
.pt-bal-num{font-size:clamp(32px,4.4vw,46px);font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.pt-bal-note{color:#E9EEF8;font-size:14px;margin-bottom:14px}
.pt-bal-facts{display:grid;grid-template-columns:repeat(3,1fr);margin:0;padding:30px 30px 28px;
  border-left:1px solid rgba(255,255,255,.16);align-content:center;gap:20px}
@media (max-width:860px){.pt-bal-facts{border-left:0;border-top:1px solid rgba(255,255,255,.16);padding:20px 22px 24px}}
@media (max-width:560px){.pt-bal-facts{grid-template-columns:1fr 1fr;gap:16px}}
.pt-bal-facts dt{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:#C7D2E9;margin-bottom:6px;font-weight:700}
.pt-bal-facts dd{margin:0;font-size:20px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}

/* ---------- stat tiles ---------- */
.pt-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:860px){.pt-stats{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.pt-stats{grid-template-columns:1fr}}
.pt-stat{background:#fff;border:1px solid #E5E7EB;border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:4px;
  position:relative;transition:.18s}
.pt-stat:hover{transform:translateY(-3px);border-color:#D1D5DB;box-shadow:0 14px 30px -18px rgba(55,65,81,.25)}
.pt-stat b{font-size:25px;font-weight:800;color:#1E3A8A;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pt-stat span{font-size:13.4px;color:#6B7280}
.pt-stat .ic{position:absolute;top:18px;right:16px;width:16px;height:16px;color:#9CA3AF}
.pt-stat:hover .ic{color:#06B6D4}

/* ---------- panels ---------- */
.pt-cols{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:22px;align-items:start}
@media (max-width:1000px){.pt-cols{grid-template-columns:1fr}}
.pt-col{display:flex;flex-direction:column;gap:22px;min-width:0}
.pt-panel{background:#fff;border:1px solid #E5E7EB;border-radius:16px;padding:22px}
.pt-panel-head{display:flex;align-items:center;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.pt-panel-head h2{font-size:17.5px;font-weight:750;color:#374151;margin:0;letter-spacing:-.015em}
.pt-more,.pt-hint{margin-left:auto;font-size:13.4px;color:#6B7280;display:inline-flex;align-items:center;gap:6px}
.pt-more{color:#1E3A8A;font-weight:600}
.pt-more:hover{text-decoration:underline}
.pt-more .ic{width:14px;height:14px}
.pt-empty{margin:0;color:#6B7280;font-size:14.4px}
.pt-emptywrap{text-align:center;padding:20px 10px 8px}
.pt-emptyico{width:52px;height:52px;border-radius:15px;background:#E8EDF8;color:#1E3A8A;display:grid;place-items:center;margin:0 auto 14px}
.pt-emptywrap h3{font-size:17px;color:#374151;margin:0 0 8px}

/* ---------- lists ---------- */
.pt-list,.pt-notes,.pt-txns{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.pt-list li,.pt-notes li,.pt-txn{display:flex;align-items:center;gap:13px;padding:14px 0;border-top:1px solid #E5E7EB}
.pt-list li:first-child,.pt-notes li:first-child,.pt-txn:first-child{border-top:0}
.pt-lico,.pt-txnico{width:38px;height:38px;border-radius:11px;flex:none;display:grid;place-items:center;background:#E8EDF8;color:#1E3A8A}
.pt-lico .ic,.pt-txnico .ic{width:18px;height:18px}
.pt-txnico.topup{background:#E6F8FC;color:#0E7490}
.pt-txnico.spend{background:#E8EDF8;color:#1E3A8A}
.pt-txnico.refund,.pt-txnico.adjust{background:#F4F6F9;color:#4B5563}
.pt-lmain,.pt-txnmain{min-width:0;display:flex;flex-direction:column;gap:2px;flex:1}
.pt-lmain b,.pt-txnmain b{font-size:14.6px;color:#374151;font-weight:650}
.pt-lmain small,.pt-txnmain small{font-size:12.6px;color:#6B7280}
.pt-txnmain small code{background:#F4F6F9;border-radius:5px;padding:1px 6px;font-size:12px;color:#4B5563}
.pt-lmain small.pt-rej{color:#4B5563}
.pt-la{font-size:13.6px;font-weight:600;color:#1E3A8A}
.pt-la:hover{text-decoration:underline}
.pt-notes li{align-items:flex-start;flex-direction:column;gap:3px;position:relative;padding-right:74px}
.pt-notes li time{position:absolute;top:14px;right:0;font-size:12px;color:#9CA3AF}
.pt-notes li b{font-size:14.4px;color:#374151}
.pt-txnamt{margin-left:auto;text-align:right;font-size:14.6px;font-weight:750;color:#374151;
  display:flex;flex-direction:column;align-items:flex-end;gap:5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.pt-txnamt.topup,.pt-txnamt.refund{color:#0E7490}
.pt-txnamt.spend{color:#1E3A8A}

/* status tags */
.pt-tag{display:inline-flex;align-items:center;border-radius:999px;padding:3px 10px;font-size:11.5px;font-weight:700;
  text-transform:capitalize;letter-spacing:.02em;background:#E8EDF8;color:#1E3A8A}
.pt-tag.pending{background:#E6F8FC;color:#0E7490}
.pt-tag.approved,.pt-tag.ok,.pt-tag.paid,.pt-tag.completed{background:#E8EDF8;color:#1E3A8A}
.pt-tag.rejected,.pt-tag.cancelled,.pt-tag.failed{background:#F4F6F9;color:#4B5563}

/* ---------- top-up form ---------- */
.pt-form{display:flex;flex-direction:column;gap:20px}
.pt-field{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.pt-field legend{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#6B7280;padding:0;margin-bottom:2px}
.pt-methods{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:620px){.pt-methods{grid-template-columns:1fr}}
.pt-method{display:flex;gap:11px;align-items:flex-start;border:1px solid #E5E7EB;border-radius:12px;padding:14px;
  cursor:pointer;transition:.15s;position:relative}
.pt-method:hover{border-color:#1E3A8A;background:#F8F9FB}
.pt-method input{margin-top:3px;accent-color:#1E3A8A;flex:none}
.pt-method:has(input:checked){border-color:#1E3A8A;background:#E8EDF8;box-shadow:inset 0 0 0 1px #1E3A8A}
.pt-mbody{display:flex;flex-direction:column;gap:3px;min-width:0}
.pt-mbody b{font-size:14.5px;color:#374151}
.pt-mbody small{font-size:12.6px;color:#4B5563;line-height:1.5}

.pt-presets{display:flex;gap:8px;flex-wrap:wrap}
.pt-preset{border:1px solid #E5E7EB;background:#fff;border-radius:999px;padding:9px 16px;font:inherit;
  font-size:14px;font-weight:650;color:#374151;cursor:pointer;transition:.15s}
.pt-preset:hover{border-color:#1E3A8A;color:#1E3A8A}
.pt-preset.on{background:#1E3A8A;border-color:#1E3A8A;color:#fff}
.pt-amount,.pt-in{display:flex;flex-direction:column;gap:6px}
.pt-amount span,.pt-in span{font-size:13.4px;color:#4B5563;font-weight:600;display:inline-flex;align-items:center;gap:7px}
.pt-in span em{font-style:normal;color:#9CA3AF;font-weight:500}
.pt-amount input,.pt-in input{min-height:46px;padding:0 14px;border:1px solid #E5E7EB;border-radius:11px;
  font:inherit;font-size:15px;color:#374151;background:#fff}
.pt-amount input:focus,.pt-in input:focus{border-color:#1E3A8A;box-shadow:0 0 0 3px rgba(30,58,138,.13);outline:none}
.pt-amount input{font-size:19px;font-weight:750;font-variant-numeric:tabular-nums}
.pt-formfoot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;border-top:1px solid #E5E7EB;padding-top:18px}
.pt-formnote{margin:0;font-size:12.8px;color:#6B7280;display:inline-flex;align-items:center;gap:7px}
.pt-formnote .ic{width:15px;height:15px;color:#0891B2}
.pt-tablewrap{overflow-x:auto}

/* focus */
.pt-portal a:focus-visible,.pt-portal button:focus-visible,.pt-portal input:focus-visible,
.pt-portal [type=radio]:focus-visible{outline:3px solid #06B6D4;outline-offset:2px;border-radius:8px}

/* ==========================================================================
   Client portal — signature layer: blueprint hero, account ledger, numbered
   panels. Deep Blue / Dark Gray / Bright Cyan only.
   ========================================================================== */
.pt-main{gap:22px}

/* ---------- blueprint hero ---------- */
.pt-hero{position:relative;overflow:hidden;border-radius:18px;padding:34px 34px 32px;color:#fff;
  background:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px) 0 0/46px 46px,
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px) 0 0/46px 46px,
    linear-gradient(152deg,#1E3A8A 0%,#16296B 100%)}
@media (max-width:640px){.pt-hero{padding:24px 20px 22px}}
.pt-rule{position:absolute;top:-45%;right:4%;width:28%;height:195%;transform:rotate(16deg);
  background:linear-gradient(180deg,rgba(6,182,212,.20),rgba(6,182,212,0) 72%);pointer-events:none}
.pt-tick{position:absolute;width:20px;height:20px;border:2px solid rgba(6,182,212,.5);pointer-events:none}
.pt-tick.tl{top:18px;left:18px;border-right:0;border-bottom:0}
.pt-tick.tr{top:18px;right:18px;border-left:0;border-bottom:0}
.pt-tick.bl{bottom:18px;left:18px;border-right:0;border-top:0}
.pt-tick.br{bottom:18px;right:18px;border-left:0;border-top:0}
@media (max-width:820px){.pt-tick{display:none}}
.pt-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.35fr .85fr;gap:34px;align-items:center}
@media (max-width:1000px){.pt-hero-grid{grid-template-columns:1fr;gap:26px}}
.pt-hero-main{min-width:0}
.pt-hero .pt-eyebrow{color:#67E8F9}
.pt-hero h1{color:#fff;font-size:clamp(25px,3.2vw,36px);font-weight:800;letter-spacing:-.028em;margin:0 0 10px}
.pt-hero-sub{color:#E9EEF8;font-size:15.4px;margin:0 0 22px;max-width:46em}

/* quick actions */
.pt-quick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (max-width:560px){.pt-quick{grid-template-columns:1fr}}
.pt-q{display:flex;align-items:center;gap:12px;padding:13px 15px;border-radius:12px;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);transition:.16s}
.pt-q:hover{background:rgba(255,255,255,.16);border-color:rgba(6,182,212,.6);transform:translateY(-2px)}
.pt-qico{width:34px;height:34px;border-radius:10px;background:#16296B;color:#67E8F9;display:grid;place-items:center;flex:none}
.pt-qico .ic{width:17px;height:17px}
.pt-q b{display:block;font-size:14.4px;color:#fff;font-weight:700;line-height:1.25}
.pt-q small{display:block;font-size:12.4px;color:#E9EEF8;line-height:1.35}
.pt-q > b,.pt-q > small{min-width:0}

/* account ledger */
.pt-ledger{background:rgba(31,41,55,.30);border:1px solid rgba(255,255,255,.16);border-radius:16px;
  padding:20px 20px 6px;backdrop-filter:blur(8px)}
.pt-ledger-head{display:block;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:#9FD8E6;font-weight:700;margin-bottom:10px}
.pt-ledger-head b{color:#fff}
.pt-ledger dl{margin:0}
.pt-ledger dl>div{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:11px 0;border-top:1px solid rgba(255,255,255,.14)}
.pt-ledger dl>div:first-child{border-top:0}
.pt-ledger dt{display:inline-flex;align-items:center;gap:9px;margin:0;font-size:13.2px;color:#C7D2E9}
.pt-ledger dt i{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.06em;color:#67E8F9}
.pt-ledger dd{margin:0;font-size:18px;font-weight:800;color:#fff;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pt-ledger-link{display:inline-flex;align-items:center;gap:7px;margin:6px 0 14px;font-size:13.4px;font-weight:650;color:#67E8F9}
.pt-ledger-link:hover{color:#fff}
.pt-ledger-link .ic{width:14px;height:14px}

/* ---------- money strip ---------- */
.pt-money{display:flex;align-items:center;gap:26px;flex-wrap:wrap;background:#fff;border:1px solid #E5E7EB;
  border-radius:16px;padding:20px 24px}
.pt-money-main{display:flex;flex-direction:column;gap:1px;min-width:0}
.pt-money-lab{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#6B7280;font-weight:700}
.pt-money-num{font-size:30px;font-weight:800;color:#1E3A8A;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.pt-money-note{font-size:13.2px;color:#6B7280}
.pt-money-facts{display:flex;gap:28px;margin:0;padding-left:26px;border-left:1px solid #E5E7EB}
@media (max-width:640px){.pt-money-facts{padding-left:0;border-left:0;gap:22px}}
.pt-money-facts dt{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#6B7280;font-weight:700;margin-bottom:4px}
.pt-money-facts dd{margin:0;font-size:18px;font-weight:800;color:#374151;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pt-money-cta{margin-left:auto;background:#1E3A8A;color:#fff}
.pt-money-cta:hover{background:#16296B}
@media (max-width:900px){.pt-money-cta{margin-left:0}}

/* ---------- numbered panel headings ---------- */
.pt-panel-head h2 i{font-style:normal;color:#0E7490;font-size:.78em;letter-spacing:.14em;font-weight:800;margin-right:4px}

/* ---------- order ledger rows ---------- */
.pt-orders{list-style:none;margin:0;padding:0}
.pt-order{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:14px;
  padding:13px 0;border-top:1px solid #E5E7EB}
.pt-order:first-child{border-top:0}
.pt-order-ref{display:flex;flex-direction:column;gap:2px;min-width:0}
.pt-order-ref b{font-size:14.4px;color:#374151;font-weight:700;font-variant-numeric:tabular-nums}
.pt-order-ref small{font-size:12.4px;color:#6B7280}
.pt-order-total{font-size:15px;font-weight:750;color:#1E3A8A;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- download progress ---------- */
.pt-bar{display:block;height:5px;border-radius:99px;background:#E5E7EB;overflow:hidden;margin-top:7px;max-width:220px}
.pt-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#1E3A8A,#06B6D4)}

/* ---------- notification timeline ---------- */
.pt-notes li{position:relative;padding-left:20px}
.pt-notedot{position:absolute;left:0;top:19px;width:9px;height:9px;border-radius:50%;background:#06B6D4;
  box-shadow:0 0 0 3px rgba(6,182,212,.18)}

/* ---------- support facts ---------- */
.pt-sup{margin:0 0 16px;display:grid;gap:0}
.pt-sup>div{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:10px 0;border-top:1px solid #E5E7EB}
.pt-sup>div:first-child{border-top:0}
.pt-sup dt{font-size:13.2px;color:#6B7280;margin:0}
.pt-sup dd{margin:0;font-size:14.4px;font-weight:700;color:#374151;text-align:right;font-variant-numeric:tabular-nums}
.pt-sup-actions{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- equal panels in a column ---------- */
@media (min-width:1001px){
  .pt-cols{align-items:stretch}
  .pt-col{justify-content:flex-start}
}

/* ---------- balance page: big figure, hero actions, flow strip ---------- */
.pt-balbig{display:flex;flex-direction:column;gap:2px;margin:0 0 22px}
.pt-balbig-lab{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#9FD8E6;font-weight:700}
.pt-balbig-num{font-size:clamp(30px,4.4vw,44px);font-weight:800;letter-spacing:-.03em;line-height:1.05;
  font-variant-numeric:tabular-nums}
.pt-hero-actions{display:flex;gap:12px;flex-wrap:wrap}

.pt-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:820px){.pt-steps{grid-template-columns:1fr}}
.pt-steps li{position:relative;background:#fff;border:1px solid #E5E7EB;border-radius:14px;padding:20px 20px 18px;
  display:flex;flex-direction:column;gap:5px;overflow:hidden}
.pt-steps li::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,#1E3A8A,#06B6D4)}
.pt-steps i{font-style:normal;font-size:12px;font-weight:800;letter-spacing:.16em;color:#0E7490}
.pt-steps b{font-size:15.4px;font-weight:750;color:#374151;letter-spacing:-.015em}
.pt-steps small{font-size:13.2px;color:#6B7280;line-height:1.5}

/* ==========================================================================
   Basket + checkout. Deep Blue / Dark Gray / Bright Cyan only.
   ========================================================================== */
.ct-hero,.ck-hero{position:relative;overflow:hidden;color:#fff;padding:48px 0 50px;
  background:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px) 0 0/46px 46px,
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px) 0 0/46px 46px,
    linear-gradient(152deg,#1E3A8A 0%,#16296B 100%)}
.ct-rule,.ck-rule{position:absolute;top:-45%;right:5%;width:30%;height:195%;transform:rotate(16deg);
  background:linear-gradient(180deg,rgba(6,182,212,.20),rgba(6,182,212,0) 72%);pointer-events:none}
.ct-tick,.ck-tick{position:absolute;width:22px;height:22px;border:2px solid rgba(6,182,212,.5);pointer-events:none}
.ct-tick.tl,.ck-tick.tl{top:20px;left:20px;border-right:0;border-bottom:0}
.ct-tick.tr,.ck-tick.tr{top:20px;right:20px;border-left:0;border-bottom:0}
.ct-tick.bl,.ck-tick.bl{bottom:20px;left:20px;border-right:0;border-top:0}
.ct-tick.br,.ck-tick.br{bottom:20px;right:20px;border-left:0;border-top:0}
@media (max-width:900px){.ct-tick,.ck-tick{display:none}}
.ct-hero-grid,.ck-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.4fr .85fr;gap:44px;align-items:center}
@media (max-width:1000px){.ct-hero-grid,.ck-hero-grid{grid-template-columns:1fr;gap:28px}}
.ct-crumbs,.ck-crumbs{display:flex;gap:9px;align-items:center;font-size:13px;color:#C7D2E9;margin-bottom:18px;flex-wrap:wrap}
.ct-crumbs a,.ck-crumbs a{color:#C7D2E9}
.ct-crumbs a:hover,.ck-crumbs a:hover{color:#fff}
.ct-eyebrow,.ck-eyebrow{display:block;font-size:11.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:#67E8F9;margin-bottom:10px}
.ct-hero h1,.ck-hero h1{color:#fff;font-size:clamp(28px,3.8vw,42px);font-weight:800;letter-spacing:-.028em;margin:0 0 12px}
.ct-sub,.ck-sub{color:#E9EEF8;font-size:16px;margin:0 0 22px;max-width:46em}
.ct-hero-btns{display:flex;gap:12px;flex-wrap:wrap}

/* ledger */
.ct-ledger,.ck-ledger{background:rgba(31,41,55,.30);border:1px solid rgba(255,255,255,.16);border-radius:16px;
  padding:20px 20px 4px;backdrop-filter:blur(8px)}
.ct-ledger-head,.ck-ledger-head{display:block;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:#9FD8E6;font-weight:700;margin-bottom:10px}
.ct-ledger-head b,.ck-ledger-head b{color:#fff}
.ct-ledger dl,.ck-ledger dl{margin:0}
.ct-ledger dl>div,.ck-ledger dl>div{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:11px 0;border-top:1px solid rgba(255,255,255,.14)}
.ct-ledger dl>div:first-child,.ck-ledger dl>div:first-child{border-top:0}
.ct-ledger dt,.ck-ledger dt{display:inline-flex;align-items:center;gap:9px;margin:0;font-size:13.2px;color:#C7D2E9}
.ct-ledger dt i,.ck-ledger dt i{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.06em;color:#67E8F9}
.ct-ledger dd,.ck-ledger dd{margin:0;font-size:18px;font-weight:800;color:#fff;letter-spacing:-.02em;font-variant-numeric:tabular-nums}

/* ---------- basket body ---------- */
.ct-main{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,.85fr);gap:22px;align-items:start;padding-top:30px;padding-bottom:10px}
@media (max-width:1000px){.ct-main{grid-template-columns:1fr}}
.ct-main.is-empty{grid-template-columns:1fr}
.ct-list{list-style:none;margin:0;padding:0;background:#fff;border:1px solid #E5E7EB;border-radius:16px;overflow:hidden}
.ct-row{display:grid;grid-template-columns:92px minmax(0,1fr) auto auto 34px;gap:16px;align-items:center;
  padding:16px 18px;border-top:1px solid #E5E7EB}
.ct-row:first-child{border-top:0}
@media (max-width:780px){
  .ct-row{grid-template-columns:76px minmax(0,1fr) auto;row-gap:12px}
  .ct-qty{grid-column:2 / span 2}
  .ct-line{grid-column:3;grid-row:1}
  .ct-remove{grid-column:3;grid-row:2;justify-self:end}
}
.ct-thumb{display:block;width:92px;aspect-ratio:16/11;border-radius:10px;overflow:hidden;background:#E8EDF8;flex:none}
@media (max-width:780px){.ct-thumb{width:76px}}
.ct-img{width:100%;height:100%;object-fit:cover;display:block}
.ct-info{display:flex;flex-direction:column;gap:3px;min-width:0}
.ct-title{font-size:15.4px;font-weight:700;color:#374151;letter-spacing:-.015em}
.ct-title:hover{color:#1E3A8A}
.ct-meta{font-size:12.6px;color:#6B7280}
.ct-unit{font-size:12.6px;color:#4B5563;font-variant-numeric:tabular-nums}
.ct-qty{display:flex;align-items:center;gap:0;border:1px solid #E5E7EB;border-radius:10px;overflow:hidden;background:#fff}
.ct-qty button{width:34px;height:38px;border:0;background:#fff;color:#374151;font-size:16px;font-weight:700;cursor:pointer}
.ct-qty button:hover:not(:disabled){background:#E8EDF8;color:#1E3A8A}
.ct-qty button:disabled{color:#D1D5DB;cursor:not-allowed}
.ct-qty input{width:46px;height:38px;border:0;border-left:1px solid #E5E7EB;border-right:1px solid #E5E7EB;
  text-align:center;font:inherit;font-size:14.5px;font-weight:700;color:#374151;font-variant-numeric:tabular-nums;
  -moz-appearance:textfield}
.ct-qty input::-webkit-outer-spin-button,.ct-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ct-qty .ct-apply{width:auto;padding:0 12px;font-size:12.6px;font-weight:650;color:#1E3A8A;border-left:1px solid #E5E7EB}
.ct-line{font-size:15.4px;font-weight:800;color:#1E3A8A;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ct-remove button{width:32px;height:32px;border-radius:9px;border:1px solid #E5E7EB;background:#fff;color:#6B7280;cursor:pointer;display:grid;place-items:center}
.ct-remove button:hover{border-color:#374151;color:#374151;background:#F4F6F9}
.ct-remove .ic{width:14px;height:14px}
.ct-tools{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:14px}
.ct-tool-link{display:inline-flex;align-items:center;gap:7px;font-size:13.8px;font-weight:600;color:#1E3A8A;background:none;border:0;cursor:pointer;padding:0}
.ct-tool-link:hover{text-decoration:underline}
.ct-tool-link.danger{color:#4B5563}
.ct-tool-link .ic{width:14px;height:14px}

/* summary card */
.ct-summary{position:sticky;top:88px;background:#fff;border:1px solid #E5E7EB;border-radius:16px;padding:22px}
@media (max-width:1000px){.ct-summary{position:static}}
.ct-summary h2{font-size:16.5px;font-weight:750;color:#374151;margin:0 0 14px;letter-spacing:-.015em}
.ct-totals{margin:0 0 16px;display:grid}
.ct-totals>div{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:9px 0;border-top:1px solid #E5E7EB}
.ct-totals>div:first-child{border-top:0}
.ct-totals dt{margin:0;font-size:13.6px;color:#6B7280}
.ct-totals dd{margin:0;font-size:14.6px;font-weight:700;color:#374151;font-variant-numeric:tabular-nums}
.ct-totals .ct-grand{border-top:1px solid #374151;margin-top:4px;padding-top:12px}
.ct-totals .ct-grand dt{font-size:14.4px;font-weight:700;color:#374151}
.ct-totals .ct-grand dd{font-size:22px;font-weight:800;color:#1E3A8A;letter-spacing:-.02em}
.ct-balance{background:#F4F6F9;border:1px solid #E5E7EB;border-radius:12px;padding:13px 15px;display:flex;flex-direction:column;gap:2px;margin-bottom:16px}
.ct-balance.ok{background:#E6F8FC;border-color:#B9E7F1}
.ct-balance span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#4B5563;font-weight:700}
.ct-balance b{font-size:19px;font-weight:800;color:#1E3A8A;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ct-balance small{font-size:12.6px;color:#4B5563}
.ct-balance a{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-size:13.2px;font-weight:650;color:#1E3A8A}
.ct-balance a:hover{text-decoration:underline}
.ct-balance a .ic{width:13px;height:13px}
.ct-balance.ok a{color:#0E7490}
.ct-note{display:flex;gap:9px;align-items:flex-start;font-size:13.2px;color:#4B5563;margin:0 0 16px}
.ct-note .ic{width:15px;height:15px;flex:none;margin-top:2px;color:#0E7490}
.ct-note a{color:#1E3A8A;font-weight:650}
.ct-checkout{width:100%;justify-content:center}
.ct-trust{list-style:none;margin:16px 0 0;padding:14px 0 0;border-top:1px solid #E5E7EB;display:grid;gap:9px}
.ct-trust li{display:flex;gap:9px;align-items:center;font-size:13.2px;color:#4B5563}
.ct-trust .ic{width:15px;height:15px;color:#0891B2;flex:none}

/* empty basket */
.ct-empty{background:#fff;border:1px solid #E5E7EB;border-radius:16px;padding:56px 30px;text-align:center}
.ct-emptyico{width:58px;height:58px;border-radius:16px;background:#E8EDF8;color:#1E3A8A;display:grid;place-items:center;margin:0 auto 18px}
.ct-emptyico .ic{width:26px;height:26px}
.ct-empty h2{font-size:22px;color:#374151;margin:0 0 10px}
.ct-empty p{margin:0 0 22px;max-width:44em;margin-left:auto;margin-right:auto}

/* ---------- checkout ---------- */
.ck-main{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,.85fr);gap:22px;align-items:start;padding-top:30px;padding-bottom:10px}
@media (max-width:1000px){.ck-main{grid-template-columns:1fr}}
.ck-form{display:flex;flex-direction:column;gap:22px;min-width:0}
.ck-panel{background:#fff;border:1px solid #E5E7EB;border-radius:16px;padding:22px}
.ck-panel-head{display:flex;align-items:center;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.ck-panel-head h2{font-size:17px;font-weight:750;color:#374151;margin:0;letter-spacing:-.015em}
.ck-panel-head h2 i{font-style:normal;color:#0E7490;font-size:.78em;letter-spacing:.14em;font-weight:800;margin-right:4px}
.ck-more{margin-left:auto;font-size:13.4px;font-weight:650;color:#1E3A8A;display:inline-flex;align-items:center;gap:6px}
.ck-more:hover{text-decoration:underline}
.ck-more .ic{width:14px;height:14px}
.ck-lines{list-style:none;margin:0;padding:0}
.ck-line{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:14px;align-items:center;padding:13px 0;border-top:1px solid #E5E7EB}
.ck-line:first-child{border-top:0}
.ck-thumb{display:block;width:64px;aspect-ratio:16/11;border-radius:9px;overflow:hidden;background:#E8EDF8}
.ck-img{width:100%;height:100%;object-fit:cover;display:block}
.ck-linfo{display:flex;flex-direction:column;gap:2px;min-width:0}
.ck-ltitle{font-size:14.6px;font-weight:650;color:#374151}
.ck-ltitle:hover{color:#1E3A8A}
.ck-linfo small{font-size:12.4px;color:#6B7280}
.ck-ltotal{font-size:14.6px;font-weight:750;color:#1E3A8A;font-variant-numeric:tabular-nums;white-space:nowrap}

.ck-methods{display:grid;gap:10px}
.ck-method{display:flex;gap:12px;align-items:flex-start;border:1px solid #E5E7EB;border-radius:12px;padding:15px;
  cursor:pointer;transition:.15s;position:relative}
.ck-method:hover{border-color:#1E3A8A;background:#F8F9FB}
.ck-method input{margin-top:3px;accent-color:#1E3A8A;flex:none}
.ck-method:has(input:checked),.ck-method.is-balance{border-color:#1E3A8A;background:#E8EDF8;box-shadow:inset 0 0 0 1px #1E3A8A}
.ck-method.is-short{border-style:dashed;cursor:default;background:#F4F6F9}
.ck-method.is-short:hover{border-color:#E5E7EB;background:#F4F6F9}
.ck-mbody{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.ck-mbody b{font-size:14.8px;color:#374151;font-weight:700}
.ck-mbody small{font-size:12.8px;color:#4B5563;line-height:1.5}
.ck-chip{flex:none;align-self:center;background:#06B6D4;color:#1F2937;border-radius:999px;padding:5px 12px;
  font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.ck-chip.add{background:#1E3A8A;color:#fff}
.ck-chip.add:hover{background:#16296B}
.ck-fine{display:flex;gap:9px;align-items:center;margin:14px 0 0;font-size:12.6px;color:#4B5563}
.ck-fine .ic{width:15px;height:15px;color:#0E7490;flex:none}

.ck-summary{position:sticky;top:88px;background:#fff;border:1px solid #E5E7EB;border-radius:16px;padding:22px}
@media (max-width:1000px){.ck-summary{position:static}}
.ck-summary h2{font-size:16.5px;font-weight:750;color:#374151;margin:0 0 14px}
.ck-totals{margin:0 0 16px;display:grid}
.ck-totals>div{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:9px 0;border-top:1px solid #E5E7EB}
.ck-totals>div:first-child{border-top:0}
.ck-totals dt{margin:0;font-size:13.6px;color:#6B7280}
.ck-totals dd{margin:0;font-size:14.6px;font-weight:700;color:#374151;font-variant-numeric:tabular-nums}
.ck-totals .ck-grand{border-top:1px solid #374151;margin-top:4px;padding-top:12px}
.ck-totals .ck-grand dt{font-size:14.4px;font-weight:700;color:#374151}
.ck-totals .ck-grand dd{font-size:22px;font-weight:800;color:#1E3A8A;letter-spacing:-.02em}
.ck-balnote{background:#F4F6F9;border:1px solid #E5E7EB;border-radius:12px;padding:13px 15px;display:flex;flex-direction:column;gap:2px;margin-bottom:16px}
.ck-balnote.ok{background:#E6F8FC;border-color:#B9E7F1}
.ck-balnote span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#4B5563;font-weight:700}
.ck-balnote b{font-size:19px;font-weight:800;color:#1E3A8A;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ck-balnote small{font-size:12.6px;color:#4B5563}
.ck-balnote a{color:#1E3A8A;font-weight:650}
.ck-pay{width:100%;justify-content:center}
.ck-vatnote{margin:12px 0 0;font-size:12.2px;color:#6B7280}
.ck-trust{list-style:none;margin:16px 0 0;padding:14px 0 0;border-top:1px solid #E5E7EB;display:grid;gap:9px}
.ck-trust li{display:flex;gap:9px;align-items:center;font-size:13.2px;color:#4B5563}
.ck-trust .ic{width:15px;height:15px;color:#0891B2;flex:none}

/* focus */
.ct-page a:focus-visible,.ct-page button:focus-visible,.ct-page input:focus-visible,
.ck-page a:focus-visible,.ck-page button:focus-visible,.ck-page input:focus-visible{outline:3px solid #06B6D4;outline-offset:2px;border-radius:8px}

/* basket hero with the totals card removed: let the heading use the full width */
.ct-hero-grid.is-single{grid-template-columns:1fr}
.ct-hero-grid.is-single .ct-hero-main{max-width:60em}


/* ==========================================================================
   v3 REFINEMENT — editorial hero, sentence-case type, indexed cards.
   Layout rules live inside @media (min-width:901px) so the mobile app layer
   in app-mode.css keeps full control below that. Only type and surface
   treatments (transform, tracking, colour, radius) apply at every width.
   Palette: #1E3A8A / #374151 / #06B6D4 and their tints only.
   ========================================================================== */

/* ---------- type: the shouting caps are gone ---------- */
.v2 .v2-sec-head h2,
.v2 .v2-stories h2,
.v2 .v2-cta h2{ text-transform:none; letter-spacing:-.028em; line-height:1.12; font-weight:800; }
.v2 .v2-sec-head h2{ font-size:clamp(26px,3.1vw,40px); color:#374151; }
.v2 .v2-stories h2{ font-size:clamp(25px,3vw,38px); }
.v2 .v2-cta h2{ font-size:clamp(26px,3.1vw,40px); }

.v2 .v2-eyebrow{ display:inline-flex; align-items:center; gap:11px; font-size:11.5px; font-weight:800;
  letter-spacing:.17em; text-transform:uppercase; color:#0E7490; }
.v2 .v2-eyebrow::before{ content:""; width:26px; height:1px; background:#06B6D4; flex:none; }
.v2 .v2-stories .v2-eyebrow{ color:#67E8F9; }
.v2 .v2-stories .v2-eyebrow::before{ background:#67E8F9; }
.v2 .v2-cta .v2-eyebrow{ color:#67E8F9; }
.v2 .v2-cta .v2-eyebrow::before{ background:#67E8F9; }

/* ---------- hero ---------- */
.v2 .v2-hero{ position:relative; overflow:hidden; background:#1E3A8A; color:#fff;
  padding:76px 0 80px; display:block; min-height:0; }
.v2-hero-glow{ position:absolute; top:-40%; right:-12%; width:62%; height:180%; pointer-events:none;
  background:radial-gradient(closest-side,rgba(6,182,212,.34),rgba(6,182,212,0) 72%); }
.v2-hero-grid-bg{ position:absolute; inset:0; pointer-events:none; opacity:.55;
  background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:68px 68px;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.95),rgba(0,0,0,0) 82%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.95),rgba(0,0,0,0) 82%); }
.v2 .v2-hero-in{ position:relative; z-index:1; }
.v2 .v2-hero-copy h1{ color:#fff; font-size:clamp(32px,3.5vw,50px); font-weight:800;
  letter-spacing:-.032em; line-height:1.07; margin:0 0 18px; max-width:14em; }
.v2 .v2-hero-copy p{ color:#D7E0F2; font-size:17.4px; line-height:1.6; margin:0 0 28px; max-width:33em; }
.v2 .v2-hero-badge{ display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.20); color:#E9EEF8; border-radius:999px;
  padding:8px 15px; font-size:12.4px; font-weight:650; margin-bottom:22px; }
.v2 .v2-hero-badge .ic{ width:15px; height:15px; color:#67E8F9; }
.v2 .v2-hero-trust{ list-style:none; display:flex; flex-wrap:wrap; gap:10px 24px; margin:28px 0 0; padding:0; }
.v2 .v2-hero-trust li{ display:flex; align-items:center; gap:8px; font-size:13.6px; color:#C7D2E9; }
.v2 .v2-hero-trust .ic{ width:15px; height:15px; color:#67E8F9; flex:none; }

/* hero buttons must not straddle two widths badly */
.v2 .v2-hero-btns{ display:flex; flex-wrap:wrap; gap:12px; }

/* ---------- product mock: pure CSS, no image ---------- */
.v2-mock{ position:relative; background:#fff; border-radius:18px; padding:15px 17px 19px;
  box-shadow:0 42px 74px -38px rgba(9,17,38,.72), 0 0 0 1px rgba(255,255,255,.09); }
.v2-mock-top{ display:flex; align-items:center; gap:10px; padding-bottom:12px; border-bottom:1px solid #E5E7EB; }
.v2-mock-dots{ display:flex; gap:5px; }
.v2-mock-dots i{ width:8px; height:8px; border-radius:50%; background:#E5E7EB; }
.v2-mock-dots i:first-child{ background:#06B6D4; }
.v2-mock-url{ margin-left:auto; font-size:10.4px; color:#9CA3AF; letter-spacing:.02em; }
.v2-mock-tiles{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:14px 0 12px; }
.v2-mock-tile{ background:#F4F6F9; border:1px solid #E5E7EB; border-radius:11px; padding:11px 13px; }
.v2-mock-tile small{ display:block; font-size:9.6px; letter-spacing:.11em; text-transform:uppercase;
  color:#6B7280; font-weight:800; margin-bottom:3px; }
.v2-mock-tile b{ display:block; font-size:19px; font-weight:800; color:#1E3A8A;
  letter-spacing:-.025em; font-variant-numeric:tabular-nums; }
.v2-mock-tile i{ font-style:normal; font-size:11px; font-weight:750; color:#0E7490; }
.v2-mock-chart{ display:flex; align-items:flex-end; gap:6px; height:98px; padding:11px;
  background:#F4F6F9; border:1px solid #E5E7EB; border-radius:11px; }
.v2-mock-chart span{ flex:1; border-radius:4px 4px 2px 2px;
  background:linear-gradient(180deg,#06B6D4,#1E3A8A); }
.v2-mock-chart span:nth-child(even){ background:linear-gradient(180deg,#67E8F9,#16296B); }
.v2-mock-rows{ margin-top:12px; display:grid; gap:8px; }
.v2-mock-rows i{ display:block; height:8px; border-radius:4px; background:#E5E7EB; }
.v2-mock-rows i:nth-child(2){ width:72%; }
.v2-mock-rows i:nth-child(3){ width:46%; background:#E8EDF8; }
.v2-mock-chip{ position:absolute; bottom:-15px; left:-15px; display:inline-flex; align-items:center; gap:7px;
  background:#fff; color:#374151; font-size:12.2px; font-weight:700; border-radius:999px; padding:8px 15px;
  box-shadow:0 16px 30px -14px rgba(9,17,38,.5); }
.v2-mock-chip .ic{ width:14px; height:14px; color:#0E7490; }

/* ---------- cards: index number, bigger icon, calmer hover ---------- */
.v2 .v2-card{ position:relative; padding:26px 24px 24px; border-radius:18px; border:1px solid #E5E7EB;
  background:#fff; overflow:hidden; transition:transform .22s, box-shadow .22s, border-color .22s; }
.v2 .v2-cico{ width:50px; height:50px; border-radius:14px; background:#E8EDF8; color:#1E3A8A;
  display:grid; place-items:center; margin-bottom:18px; }
.v2 .v2-cico .ic{ width:23px; height:23px; }
.v2 .v2-card h3{ font-size:18.4px; font-weight:750; letter-spacing:-.019em; color:#374151;
  margin:0 0 10px; line-height:1.3; }
.v2 .v2-card p{ font-size:14.5px; line-height:1.62; color:#4B5563; margin:0 0 18px; }
.v2-idx{ position:absolute; top:23px; right:24px; font-size:11.4px; font-weight:800; letter-spacing:.13em;
  color:#C7D2E9; font-variant-numeric:tabular-nums; }
.v2 .v2-bar{ position:absolute; left:0; bottom:0; height:2px; width:0; background:#06B6D4; transition:width .32s; }
.v2 .v2-more{ display:inline-flex; align-items:center; gap:7px; font-size:13.8px; font-weight:700;
  color:#1E3A8A; margin-top:auto; }
.v2 .v2-more .ic{ width:14px; height:14px; transition:transform .18s; }

/* ---------- hosting price ---------- */
.v2 .v2-band .v2-price{ display:flex; align-items:baseline; gap:7px; font-size:23px; font-weight:800;
  color:#1E3A8A; letter-spacing:-.028em; margin:0 0 8px; font-variant-numeric:tabular-nums; }
.v2 .v2-band .v2-price small{ font-size:12.2px; font-weight:600; color:#6B7280; letter-spacing:0; }

/* ---------- stories: a quote, an avatar, one mention of the company ---------- */
.v2 .v2-stories{ background:linear-gradient(158deg,#1E3A8A 0%,#16296B 100%); padding:74px 0 80px; }
.v2 .v2-story{ background:#fff; border-radius:18px; }
.v2 .v2-story .v2-body{ display:flex; flex-direction:column; flex:1; padding:26px 24px; }
.v2-quote{ display:block; margin-bottom:12px; }
.v2-quote .ic{ width:30px; height:30px; color:#C7D2E9; }
.v2 .v2-kind{ display:block; font-size:11.2px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:#0E7490; margin-bottom:10px; }
.v2 .v2-say{ font-size:16.2px; line-height:1.58; color:#374151; margin:0 0 22px; flex:1; }
.v2-who{ display:flex; align-items:center; gap:12px; padding-top:16px; border-top:1px solid #E5E7EB; }
.v2-av{ width:40px; height:40px; border-radius:50%; background:#E8EDF8; color:#1E3A8A;
  display:grid; place-items:center; font-size:16px; font-weight:800; flex:none; }
.v2-who b{ display:block; font-size:14.2px; font-weight:700; color:#374151; }
.v2-who small{ font-size:12.3px; color:#6B7280; }

/* ---------- closing CTA ---------- */
.v2 .v2-cta{ position:relative; overflow:hidden; padding:76px 0; background:#1F2937; text-align:center; }
.v2-cta-glow{ position:absolute; top:-60%; left:50%; transform:translateX(-50%); width:70%; height:180%;
  pointer-events:none; background:radial-gradient(closest-side,rgba(6,182,212,.26),rgba(6,182,212,0) 70%); }
.v2 .v2-cta .v2-wrap{ position:relative; z-index:1; }
.v2 .v2-cta p{ color:#D1D5DB; font-size:16.4px; line-height:1.62; max-width:46em; margin:14px auto 28px; }
.v2-cta-note{ margin:24px 0 0 !important; font-size:13.4px !important; color:#9CA3AF; }
.v2 .v2-btns{ justify-content:center; }

/* ======================= desktop-only composition ======================= */
@media (min-width:901px){

  .v2 .v2-hero-in{ display:grid; grid-template-columns:1.02fr .98fr; gap:60px; align-items:center; }

  /* stats strip: dividers instead of four floating numbers */
  .v2 .v2-strip-row{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; padding:30px 0; }
  .v2 .v2-strip-row>div{ text-align:center; padding:0 20px; border-left:1px solid #E5E7EB; }
  .v2 .v2-strip-row>div:first-child{ border-left:0; }
  .v2 .v2-strip-row b{ font-size:clamp(26px,2.5vw,34px); font-weight:800; color:#1E3A8A;
    letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
  .v2 .v2-strip-row span{ margin-top:5px; font-size:13.4px; }

  /* editorial two-column section head */
  /* the base rule centres the head in a 760px box — reset it or the grid
     columns collapse to ~366px and a 40px heading wraps five lines deep */
  .v2 .v2-sec-head{ display:grid; grid-template-columns:1.04fr .96fr; gap:56px; align-items:end;
    max-width:none; margin:0 0 42px; text-align:left; }
  .v2 .v2-sec-head-l h2{ margin:14px 0 0; }
  .v2 .v2-sec-head-r{ display:flex; flex-direction:column; align-items:flex-start; gap:15px; padding-bottom:3px; }
  .v2 .v2-sec-head-r p{ margin:0; font-size:15.8px; line-height:1.7; color:#4B5563; max-width:40em; }
  .v2 .v2-sec-link{ display:inline-flex; align-items:center; gap:8px; font-size:13.8px; font-weight:700;
    color:#1E3A8A; padding-bottom:2px; border-bottom:1px solid #C7D2E9; transition:color .18s, border-color .18s; }
  .v2 .v2-sec-link:hover{ color:#0E7490; border-color:#0E7490; }
  .v2 .v2-sec-link .ic{ width:15px; height:15px; transition:transform .18s; }
  .v2 .v2-sec-link:hover .ic{ transform:translateX(3px); }

  .v2 .v2-stories-head{ display:grid; grid-template-columns:1.04fr auto; gap:48px; align-items:end; margin-bottom:38px; }
  .v2 .v2-stories-head .v2-sec-head-l h2{ margin:14px 0 0; color:#fff; }

  .v2 .v2-grid4 .v2-card:hover,
  .v2 .v2-band .v2-card:hover{ transform:translateY(-4px);
    box-shadow:0 28px 52px -32px rgba(30,58,138,.6); border-color:#C7D2E9; }
  .v2 .v2-card:hover .v2-bar{ width:100%; }
  .v2 .v2-card:hover .v2-more .ic{ transform:translateX(3px); }
  .v2 .v2-card:hover .v2-cico{ background:#1E3A8A; color:#67E8F9; }
  .v2 .v2-cico{ transition:background .22s, color .22s; }
}

/* ===================== phones: the mock would eat the screen ===================== */
@media (max-width:900px){
  .v2 .v2-hero-visual,
  .v2 .v2-hero-trust{ display:none; }
  .v2 .v2-sec-link{ display:inline-flex; margin-top:2px; }
  .v2 .v2-mock-chip{ left:0; }
}

/* ---------- header: the tagline was cut mid-word by a 190px clamp ----------
   Widening the clamp only pushed .head-actions 23px past a 1440 viewport, and
   the string still truncated at 238px. The header is simply full at this width:
   the brand is the name alone, and the tagline shows in full once there is room. */
.brand .brand-text small{ max-width:none; font-size:.68rem; letter-spacing:.005em;
  text-transform:none; white-space:nowrap; overflow:visible; text-overflow:clip; }
@media (max-width:1499px){ .brand .brand-text small{ display:none; } }


/* ==========================================================================
   CONTACT — rebuilt on the v2/v3 system.
   The old view used .contact-grid / .contact-card / .contact-side, none of
   which had a single rule, so the two-column layout never applied. Worse,
   .form{display:grid} stretches every child, which turned the submit button
   into a 1200px-wide blue bar. Both are fixed here.
   ========================================================================== */
.ct-page{ background:#F8F9FB; }

.ct-head{ position:relative; overflow:hidden; background:#1E3A8A; color:#fff; padding:54px 0 48px; }
.ct-head-glow{ position:absolute; top:-40%; right:-10%; width:56%; height:180%; pointer-events:none;
  background:radial-gradient(closest-side,rgba(6,182,212,.30),rgba(6,182,212,0) 72%); }
.ct-head .v2-wrap{ position:relative; z-index:1; }
.ct-head h1{ color:#fff; font-size:clamp(28px,3.4vw,44px); font-weight:800; letter-spacing:-.03em;
  line-height:1.1; margin:14px 0 12px; }
.ct-head p{ color:#D7E0F2; font-size:16.4px; line-height:1.6; margin:0; max-width:44em; }
.ct-head .v2-eyebrow{ color:#67E8F9; }
.ct-head .v2-eyebrow::before{ background:#67E8F9; }

.ct-body{ padding:34px 0 42px; }
.ct-grid{ display:grid; grid-template-columns:1.42fr .86fr; gap:24px; align-items:start; }
@media (max-width:1000px){ .ct-grid{ grid-template-columns:1fr; gap:20px; } }

.ct-card{ background:#fff; border:1px solid #E5E7EB; border-radius:18px; padding:26px 26px 28px; }
.ct-grid aside .ct-card + .ct-card{ margin-top:20px; }
.ct-card h2{ font-size:19.5px; font-weight:750; letter-spacing:-.02em; color:#374151; margin:0 0 6px; }
.ct-card h3{ font-size:16.4px; font-weight:750; letter-spacing:-.018em; color:#374151; margin:0 0 6px; }
.ct-card .lede{ font-size:14px; line-height:1.6; color:#6B7280; margin:0 0 20px; }
.ct-card.soft{ background:#F4F6F9; }

/* direct-details rows */
.ct-rows{ list-style:none; margin:12px 0 0; padding:0; }
.ct-rows li{ display:flex; gap:13px; align-items:flex-start; padding:14px 0; border-top:1px solid #E5E7EB; }
.ct-rows li:first-child{ border-top:0; padding-top:4px; }
.ct-ic{ width:36px; height:36px; border-radius:11px; background:#E8EDF8; color:#1E3A8A;
  display:grid; place-items:center; flex:none; }
.ct-card.soft > .ct-ic{ margin-bottom:14px; }
.ct-ic .ic{ width:17px; height:17px; }
.ct-rows small{ display:block; font-size:11.2px; font-weight:800; letter-spacing:.11em;
  text-transform:uppercase; color:#6B7280; margin-bottom:2px; }
.ct-rows b, .ct-rows a{ display:block; font-size:14.4px; font-weight:650; color:#374151; line-height:1.45; }
.ct-rows a:hover{ color:#1E3A8A; text-decoration:underline; }

.ct-card.soft p{ font-size:13.8px; line-height:1.6; color:#4B5563; margin:0 0 14px; }
.ct-link{ display:inline-flex; align-items:center; gap:8px; font-size:13.8px; font-weight:700;
  color:#1E3A8A; padding-bottom:2px; border-bottom:1px solid #C7D2E9; }
.ct-link:hover{ color:#0E7490; border-color:#0E7490; }
.ct-link .ic{ width:15px; height:15px; }

/* .form{display:grid} stretches children — pin the action button back to its text */
.ct-card .form .btn,
.ct-card > .btn{ width:auto; justify-self:start; align-self:start; flex:none; margin:0;
  display:inline-flex; align-items:center; justify-content:center; padding:13px 28px; }
.ct-foot{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:24px; }
.ct-hint{ display:inline-flex; align-items:center; gap:7px; font-size:12.8px; color:#6B7280; }
.ct-hint .ic{ width:14px; height:14px; color:#0E7490; flex:none; }
.ct-fine{ margin:16px 0 0; font-size:12.4px; color:#9CA3AF; }

/* booking band */
.ct-book{ background:#fff; border-top:1px solid #E5E7EB; padding:52px 0 56px; }
.ct-book .v2-sec-head{ margin-bottom:30px; }

@media (max-width:900px){
  .ct-head{ padding:30px 0 26px; }
  .ct-head h1{ font-size:26px; margin:10px 0 8px; }
  .ct-head p{ font-size:14.4px; }
  .ct-body{ padding:20px 0 26px; }
  .ct-card{ padding:20px 18px 22px; border-radius:15px; }
  .ct-card h2{ font-size:17.4px; }
  .ct-rows li{ padding:12px 0; gap:11px; }
  .ct-rows b, .ct-rows a{ font-size:13.8px; }
  .ct-book{ padding:30px 0 34px; }
  .ct-foot{ gap:12px; margin-top:20px; }
  .ct-card .form .btn,
  .ct-card > .btn{ width:100%; justify-self:stretch; }
}


/* ==========================================================================
   CATALOGUE v3 — the category index becomes a structured tile grid, the
   spotlight gains substance, and the one contrast failure is fixed.
   These land at the end of v2.css, so equal specificity wins on source order.
   ========================================================================== */

/* one real contrast failure: #0891B2 on white is 3.68:1, AA needs 4.5:1 */
.pd-stars{ color:#0E7490; }

/* ---------- category index: four full-width rows -> a 2-col tile grid ---------- */
.pd-index{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; border-top:0; }
.pd-index li:last-child .pd-irow{ border-bottom:1px solid #E5E7EB; }

.pd-irow{ display:block; position:relative; background:#fff; border:1px solid #E5E7EB;
  border-radius:16px; padding:22px 24px 20px; overflow:hidden;
  transition:transform .2s, box-shadow .2s, border-color .2s; }
.pd-irow::before{ content:""; position:absolute; left:0; top:0; height:2px; width:0;
  background:#06B6D4; transition:width .28s; }
.pd-irow:hover{ background:#fff; padding-left:24px; transform:translateY(-3px);
  box-shadow:0 24px 46px -30px rgba(30,58,138,.5); border-color:#C7D2E9; }
.pd-irow:hover::before{ width:100%; }
.pd-irow.on{ background:#E8EDF8; border-color:#1E3A8A; box-shadow:none; }
.pd-irow.on::before{ width:100%; background:#1E3A8A; }
.pd-irow:hover .pd-igo{ transform:translateX(4px); }

.pd-inum{ position:absolute; top:22px; right:24px; font-size:11px; letter-spacing:.13em; color:#C7D2E9; }
.pd-iico{ width:44px; height:44px; border-radius:13px; margin-bottom:15px; }
.pd-iico .ic{ width:20px; height:20px; }
.pd-iname{ display:block; font-size:17.5px; }
.pd-imeta{ display:block; grid-column:auto; margin-top:5px; font-size:13.2px; color:#6B7280; }
.pd-igo{ position:absolute; right:24px; bottom:22px; grid-row:auto; grid-column:auto; color:#1E3A8A; }

/* ---------- spotlight: the media was a large empty wash ---------- */
.pd-spot-media{ position:relative; }
.pd-spot-over{ position:absolute; left:22px; bottom:22px; display:flex; gap:10px; }
.pd-ov{ background:rgba(255,255,255,.95); border-radius:12px; padding:10px 15px; min-width:88px;
  box-shadow:0 16px 34px -18px rgba(9,17,38,.55); }
.pd-ov b{ display:block; font-size:19px; font-weight:800; color:#1E3A8A; letter-spacing:-.025em;
  line-height:1.15; font-variant-numeric:tabular-nums; }
.pd-ov small{ font-size:10.2px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#6B7280; }

/* ---------- phones ---------- */
@media (max-width:760px){
  .pd-index{ grid-template-columns:1fr; gap:11px; }
  .pd-irow{ padding:18px 20px 17px; border-radius:14px; }
  .pd-inum{ top:18px; right:20px; }
  .pd-iico{ width:38px; height:38px; border-radius:11px; margin-bottom:12px; }
  .pd-iname{ font-size:16.4px; }
  .pd-imeta{ font-size:12.6px; }
  .pd-igo{ right:20px; bottom:18px; }
  .pd-spot-over{ left:14px; bottom:14px; gap:8px; }
  .pd-ov{ padding:8px 12px; min-width:74px; }
  .pd-ov b{ font-size:16.5px; }
  .pd-ov small{ font-size:9.4px; }
}

/* ---------- phones: the snapshot ledger labels wrapped, pills stacked ---------- */
@media (max-width:900px){
  /* 2 columns of ~140px left "Units sold" and "Average rating" breaking in two */
  .pd-ledger{ padding:18px 18px 4px; }
  .pd-ledger dl{ gap:0 14px; }
  /* at 147px per column the decorative 01/02 prefix pushed "Average rating"
     and "Starting at" onto a second line; the number is the cheapest thing to
     drop and the motif already repeats in the hero and the category tiles */
  .pd-ledger dt{ font-size:11.6px; gap:8px; }
  .pd-ledger dt i{ display:none; }
  .pd-ledger dd{ font-size:16px; }
  /* the quick filters are a rail on a phone, not three stacked rows */
  .pd-quick{ flex-wrap:nowrap; margin-left:0; overflow-x:auto; padding-bottom:4px;
    scrollbar-width:none; -ms-overflow-style:none; -webkit-overflow-scrolling:touch; }
  .pd-quick::-webkit-scrollbar{ display:none; }
  .pd-quick > *{ flex:0 0 auto; }
}


/* ==========================================================================
   CATALOGUE CARD v4 — marketplace model: banner art, a feature strip, the
   title, a byline, then price with the sales count and the two actions.
   ========================================================================== */

/* ---------- feature strip under the banner ---------- */
.pd-card .pd-strip{ list-style:none; margin:0; padding:0; display:flex; align-items:stretch;
  background:#E8EDF8; border-top:1px solid #DCE4F2; border-bottom:1px solid #DCE4F2; }
.pd-card .pd-strip li{ position:relative; flex:1 1 0; min-width:0; display:flex; align-items:center;
  justify-content:center; gap:6px; padding:10px 8px; font-size:10.4px; font-weight:800;
  letter-spacing:.07em; text-transform:uppercase; color:#374151; }
.pd-card .pd-strip li + li::before{ content:""; position:absolute; left:0; top:24%; bottom:24%;
  width:1px; background:rgba(30,58,138,.18); }
.pd-card .pd-strip .ic{ width:13px; height:13px; color:#0E7490; flex:none; }
.pd-card .pd-strip span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---------- title + byline ---------- */
.pd-card .pd-body{ padding:18px 20px 20px; display:flex; flex-direction:column; flex:1; }
.pd-card .pd-body h3{ font-size:17.4px; font-weight:750; letter-spacing:-.02em; line-height:1.32;
  color:#374151; margin:0 0 6px; display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden; }
.pd-card .pd-body h3 a{ color:#374151; }
.pd-card .pd-body h3 a:hover{ color:#1E3A8A; }
.pd-card .pd-by{ margin:0 0 16px; font-size:12.6px; line-height:1.5; color:#6B7280; }
.pd-card .pd-by b{ font-weight:700; color:#4B5563; }
.pd-card .pd-by a{ color:#0E7490; font-weight:650; }
.pd-card .pd-by a:hover{ text-decoration:underline; }

/* ---------- price left, actions right (sales sits under the price) ---------- */
/* the base .pd-foot is flex-direction:column; without an explicit row here the
   price stacked above the actions, right-aligned, leaving a void down the card */
.pd-card .pd-foot{ margin-top:auto; display:flex; flex-direction:row; align-items:flex-end;
  justify-content:space-between; gap:10px; padding:16px 0 0; border-top:1px solid #E5E7EB; }
.pd-card .pd-price{ display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px; }
.pd-card .pd-price b{ font-size:20px; font-weight:800; color:#1E3A8A; letter-spacing:-.032em;
  line-height:1.1; font-variant-numeric:tabular-nums; }
.pd-card .pd-price s{ font-size:12.2px; color:#6B7280; }
.pd-card .pd-price small{ flex-basis:100%; font-size:12.4px; color:#6B7280; }

.pd-card .pd-actions{ display:flex; align-items:center; justify-content:flex-end; gap:9px; flex:none; }
.pd-card .pd-actions form{ margin:0; display:flex; }
.pd-cart{ width:42px; height:42px; flex:none; border-radius:11px; border:1px solid #C7D2E9; background:#fff;
  color:#1E3A8A; display:grid; place-items:center; cursor:pointer; padding:0;
  transition:background .18s, border-color .18s; }
.pd-cart:hover{ background:#E8EDF8; border-color:#1E3A8A; }
.pd-cart .ic{ width:19px; height:19px; }
.pd-preview{ display:inline-flex; align-items:center; justify-content:center; height:42px; padding:0 15px;
  border:1px solid #1E3A8A; border-radius:11px; background:#fff; color:#1E3A8A;
  font-size:13.4px; font-weight:700; white-space:nowrap; transition:background .18s, color .18s; }
.pd-preview:hover{ background:#1E3A8A; color:#fff; }

/* list view is a compact row — the strip only belongs in the grid */
#plist.is-list .pd-strip{ display:none; }
#plist.is-list .pd-body{ justify-content:center; }

/* phones */
@media (max-width:900px){
  .pd-card .pd-strip li{ padding:9px 6px; font-size:9.6px; letter-spacing:.04em; gap:5px; }
  .pd-card .pd-strip .ic{ width:12px; height:12px; }
  .pd-card .pd-body{ padding:14px 15px 16px; }
  .pd-card .pd-body h3{ font-size:15.4px; }
  .pd-card .pd-by{ font-size:12px; margin-bottom:12px; }
  .pd-card .pd-price b{ font-size:19px; }
  .pd-card .pd-price small{ font-size:11.6px; }
  .pd-cart{ width:40px; height:40px; }
  .pd-cart .ic{ width:17px; height:17px; }
  .pd-preview{ height:40px; padding:0 13px; font-size:12.6px; }
}
/* the narrow 2-up band needs two cells; a full-width card has room for three */
@media (max-width:700px) and (min-width:561px){
  .pd-card .pd-strip li:nth-child(3){ display:none; }
}

/* 4-up left only ~55px per strip cell, so "Bootstrap" and "Multi-vendor" were
   cut to "BOOTS..." and "MULTI-...". Cards are wider now, and the grid steps so
   a strip cell is never narrower than its longest label needs. */
.pd-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
/* at 1100px a 3-up card is 337px, which is not enough for the price, the
   struck price and both actions on one row — 1280 keeps that row intact */
@media (min-width:1280px){ .pd-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:560px){ .pd-grid{ grid-template-columns:1fr; } }

/* Uppercase plus .05em tracking costs about a third of the label width. Keep
   the model's look on wide screens and drop to sentence case where the cells
   are narrow, or "Multi-outlet" and "Daily backup" clip. */
@media (max-width:1199px){
  .pd-card .pd-strip li{ text-transform:none; letter-spacing:0; font-size:11px; font-weight:700; }
}
@media (max-width:900px){
  .pd-card .pd-strip li{ font-size:10.4px; }
}

.pd-card .pd-strip li{ font-size:10px; letter-spacing:.05em; padding:10px 9px; }
.pd-card .pd-strip span{ text-overflow:clip; }

/* ---------- two AA failures the audit caught on the new card ---------- */
/* the struck-through "was" price sat at #9CA3AF = 2.54:1 on white */
.pd-card .pd-price s{ color:#6B7280; }
/* white on Bright Cyan is 2.43:1 — dark ink on cyan is 5.6:1 */
.pd-pick.new{ background:#06B6D4; color:#1F2937; }

/* ---------- phones: the toolbar row was cutting the sort pills ---------- */
@media (max-width:900px){
  .pd-tool{ display:block; padding:12px 0; }
  .pd-tool-l{ margin-bottom:10px; }
  .pd-tool-r{ margin-left:0; gap:8px; }
  .pd-sorts{ flex:1 1 auto; }
  /* icon-only Filters buys the pill rail about 60px more room */
  .pd-filter{ padding:9px 12px; }
  .pd-filter-t{ display:none; }
}

/* ---------- friendlier on a phone: shorter card, roomier taps ---------- */
@media (max-width:560px){
  .pd-card .pd-media{ aspect-ratio:2/1; }
  .pd-card .pd-body{ padding:14px 16px 16px; }
  .pd-card .pd-by{ margin-bottom:12px; }
  .pd-card .pd-foot{ gap:10px; padding-top:14px; }
  .pd-cart{ width:46px; height:46px; border-radius:12px; }
  .pd-cart .ic{ width:18px; height:18px; }
  .pd-preview{ height:46px; border-radius:12px; }
}

/* the full label left no room for the struck-through price to stay inline,
   so the price wrapped to a second line; the short label restores the model */
.pd-preview .pd-short{ display:none; }
@media (max-width:560px){
  .pd-preview .pd-full{ display:none; }
  .pd-preview .pd-short{ display:inline; }
  .pd-preview{ padding:0 15px; }
}

/* ==========================================================================
   HEADER SUPPORT POPOVER — mobile number, WhatsApp, email.
   The button is rendered in both the app bar and the desktop actions; the
   panel is positioned from its own wrapper so no JS positioning is needed.
   ========================================================================== */
.sup{ position:relative; display:flex; align-items:center; }

.sup-btn{ width:38px; height:38px; padding:0; flex:none; border-radius:11px; border:1px solid #E5E7EB;
  background:#fff; color:#374151; display:grid; place-items:center; cursor:pointer;
  transition:background .18s, border-color .18s, color .18s; }
.sup-btn:hover{ background:#E8EDF8; border-color:#1E3A8A; color:#1E3A8A; }
.sup-btn[aria-expanded="true"]{ background:#1E3A8A; border-color:#1E3A8A; color:#fff; }
.sup-btn .ic{ width:19px; height:19px; }

.sup-panel{ position:absolute; top:calc(100% + 12px); right:0; width:294px; z-index:220;
  background:#fff; border:1px solid #E5E7EB; border-radius:16px; padding:8px; display:none;
  box-shadow:0 28px 54px -26px rgba(9,17,38,.45); }
.sup.is-open .sup-panel{ display:block; }

.sup-head{ padding:12px 13px 11px; margin-bottom:6px; border-bottom:1px solid #E5E7EB; }
.sup-head b{ display:block; font-size:15px; font-weight:750; color:#374151; letter-spacing:-.015em; }
.sup-head small{ display:block; margin-top:2px; font-size:12.2px; color:#6B7280; }

.sup-row{ display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:11px;
  width:auto; height:auto; place-items:initial; border:0; background:transparent;
  transition:background .16s; }
.sup-row:hover{ background:#F4F6F9; }
.sup-ic{ width:38px; height:38px; flex:none; border-radius:11px; background:#E8EDF8; color:#1E3A8A;
  display:grid; place-items:center; }
.sup-ic .ic{ width:18px; height:18px; }
.sup-row small{ display:block; font-size:10.6px; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:#6B7280; }
.sup-row b{ display:block; margin-top:1px; font-size:13.8px; font-weight:650; color:#374151; }
.sup-row:hover b{ color:#1E3A8A; }

/* ---------- phones: full-width sheet under the app bar ---------- */
@media (max-width:900px){
  .app-bar-actions .sup{ position:static; }
  .app-bar-actions .sup-panel{ position:fixed; top:calc(60px + env(safe-area-inset-top, 0px));
    left:12px; right:12px; width:auto; top:calc(60px + env(safe-area-inset-top, 0px)); }
  .sup-panel{ border-radius:16px; }
  .sup-row{ padding:11px 12px; }
  .sup-row b{ font-size:14.2px; }
}

/* ==========================================================================
   WEB PACK — website rental packages
   Deep Blue #1E3A8A / Dark Gray #374151 / Bright Cyan #06B6D4 only.
   Cyan never carries body text on white (2.43:1) — it appears as a fill with
   dark ink, or as the darker #0E6E85 for icons and small labels.
   ========================================================================== */

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---------------- hero ---------------- */
.wp-hero{ background:linear-gradient(180deg,#F4F7FC,#fff); border-bottom:1px solid #E5E7EB; }
.wp-hero-in{ display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:44px; align-items:center; padding:52px 18px 58px; }

.wp-eyebrow{ display:inline-block; padding:6px 13px; border-radius:999px;
  background:#E8EDF8; color:#1E3A8A; font-size:.72rem; font-weight:750;
  letter-spacing:.11em; text-transform:uppercase; }
.wp-eyebrow.light{ background:rgba(255,255,255,.14); color:#fff; }

.wp h1{ font-size:clamp(1.75rem,1.2rem + 2.2vw,2.6rem); line-height:1.12;
  letter-spacing:-.025em; color:#1E3A8A; margin:16px 0 0; }
.wp-lede{ font-size:1.02rem; line-height:1.62; color:#374151; margin:14px 0 0; max-width:60ch; }

.wp-hero-cta{ display:flex; gap:11px; flex-wrap:wrap; margin-top:24px; }
.wp-hero-facts{ list-style:none; margin:22px 0 0; padding:0; display:flex; gap:8px 20px; flex-wrap:wrap; }
.wp-hero-facts li{ display:inline-flex; align-items:center; gap:7px; font-size:.86rem; color:#374151; }
.wp-hero-facts .ic{ width:16px; height:16px; color:#0E6E85; }

/* ---------------- the five essentials ---------------- */
.wp-includes{ list-style:none; margin:0; padding:15px; display:grid; gap:3px;
  background:#fff; border:1px solid #E5E7EB; border-radius:18px;
  box-shadow:0 28px 54px -36px rgba(30,58,138,.5); }
.wp-includes li{ display:flex; align-items:center; gap:13px; padding:12px 13px; border-radius:12px;
  transition:background .16s; }
.wp-includes li:hover{ background:#F4F7FC; }
.wp-inc-ic{ width:40px; height:40px; flex:none; border-radius:12px; background:#E8EDF8;
  color:#1E3A8A; display:grid; place-items:center; }
.wp-inc-ic .ic{ width:19px; height:19px; }
.wp-inc-txt{ display:grid; gap:1px; min-width:0; }
.wp-inc-txt b{ font-size:.92rem; color:#1E3A8A; }
.wp-inc-txt span{ font-size:.8rem; color:#6B7280; }

/* ---------------- sections ---------------- */
.wp-section{ padding:56px 0; }
.wp-section-last{ padding-bottom:66px; }
.wp-head{ max-width:64ch; margin-bottom:26px; }
.wp-head h2{ font-size:clamp(1.35rem,1.05rem + 1vw,1.8rem); letter-spacing:-.02em;
  color:#1E3A8A; margin:0; }
.wp-head p{ margin:9px 0 0; color:#6B7280; font-size:.96rem; line-height:1.6; }

/* ---------------- rental tiers ---------------- */
.wp-tiers{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; align-items:start; }
.wp-tier{ position:relative; display:flex; flex-direction:column; gap:20px; background:#fff;
  border:1px solid #E5E7EB; border-radius:18px; padding:28px 24px 24px;
  box-shadow:0 18px 40px -32px rgba(30,58,138,.42); }
.wp-tier.is-best{ border-color:#1E3A8A; box-shadow:0 32px 64px -36px rgba(30,58,138,.58); }
.wp-ribbon{ position:absolute; top:-13px; left:24px; padding:5px 13px; border-radius:999px;
  background:#06B6D4; color:#062B33; font-size:.7rem; font-weight:800;
  letter-spacing:.07em; text-transform:uppercase; }

.wp-term{ font-size:.72rem; font-weight:750; letter-spacing:.1em; text-transform:uppercase; color:#6B7280; }
.wp-term.light{ color:rgba(255,255,255,.72); }
.wp-price{ display:flex; flex-direction:column; gap:2px; margin-top:7px; }
.wp-price s{ font-size:.9rem; color:#6B7280; }
.wp-price b{ font-size:2rem; line-height:1.05; color:#1E3A8A; letter-spacing:-.03em; }
.wp-price small{ font-size:.78rem; color:#6B7280; }
.wp-price.light b{ color:#fff; }
.wp-price.light small{ color:rgba(255,255,255,.75); }
.wp-save{ align-self:flex-start; margin-top:10px; padding:4px 11px; border-radius:999px;
  background:#E6F8FC; color:#0E6E85; font-size:.76rem; font-weight:750; }

.wp-feats{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.wp-feats li{ display:flex; align-items:flex-start; gap:9px; font-size:.88rem; color:#374151; line-height:1.45; }
.wp-feats .ic{ width:16px; height:16px; flex:none; margin-top:2px; color:#0E6E85; }
.wp-feats.light li{ color:rgba(255,255,255,.92); }
.wp-feats.light .ic{ color:#7FE3F5; }

.wp-tier-actions{ margin-top:auto; display:grid; gap:10px; justify-items:stretch; }
.wp-tier-actions .btn{ width:100%; justify-content:center; }
.wp-tier-actions .link{ justify-self:center; }

/* ---------------- one-time buyout band ---------------- */
.wp-band{ padding:56px 0; background:linear-gradient(135deg,#1E3A8A,#374151); }
.wp-buyout{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
  gap:40px; align-items:start; }
.wp-buyout-copy h2{ color:#fff; font-size:clamp(1.4rem,1.1rem + 1vw,1.95rem);
  letter-spacing:-.022em; margin:14px 0 0; }
.wp-buyout-copy p{ color:rgba(255,255,255,.82); font-size:.96rem; line-height:1.65;
  margin:12px 0 20px; max-width:58ch; }
.wp-buyout-buy{ background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  border-radius:18px; padding:24px 22px; display:grid; gap:14px; }
.wp-btn-light{ background:#06B6D4; border-color:#06B6D4; color:#062B33; font-weight:750; }
.wp-btn-light:hover{ background:#22D3EE; border-color:#22D3EE; color:#062B33; }
.link.small.light{ color:#7FE3F5; }
.wp-buyout-note{ margin:0; font-size:.78rem; color:rgba(255,255,255,.7); line-height:1.5; }

/* ---------------- comparison ---------------- */
.wp-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; background:#fff;
  border:1px solid #E5E7EB; border-radius:16px; }
.wp-table{ width:100%; border-collapse:collapse; font-size:.9rem; min-width:580px; }
.wp-table th, .wp-table td{ padding:13px 16px; text-align:left; border-bottom:1px solid #EEF1F6; }
.wp-table thead th{ background:#F4F7FC; color:#1E3A8A; font-size:.78rem; font-weight:750;
  letter-spacing:.05em; text-transform:uppercase; white-space:nowrap; }
.wp-table tbody th{ font-weight:600; color:#374151; }
.wp-table td{ color:#374151; }
.wp-table .is-best{ background:#F7FDFE; }
.wp-table tbody tr:last-child th, .wp-table tbody tr:last-child td{ border-bottom:0; }
.wp-yes{ display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%;
  background:#E6F8FC; color:#0E6E85; }
.wp-yes .ic{ width:14px; height:14px; }
.wp-no{ color:#6B7280; }

/* ---------------- faq ---------------- */
.wp-faq{ display:grid; gap:10px; max-width:82ch; }
.wp-faq-item{ background:#fff; border:1px solid #E5E7EB; border-radius:14px;
  transition:border-color .16s; }
.wp-faq-item summary{ cursor:pointer; padding:16px 18px; font-weight:650; color:#1E3A8A;
  font-size:.95rem; list-style:none; display:flex; justify-content:space-between;
  align-items:center; gap:12px; }
.wp-faq-item summary::-webkit-details-marker{ display:none; }
.wp-faq-item summary::after{ content:'+'; font-size:1.25rem; line-height:1; color:#0E6E85; flex:none; }
.wp-faq-item[open] summary::after{ content:'\2013'; }
.wp-faq-item[open]{ border-color:#1E3A8A; }
.wp-faq-item p{ margin:0; padding:0 18px 18px; color:#374151; font-size:.9rem; line-height:1.65; }

/* ---------------- closing ---------------- */
.wp-cta{ display:flex; align-items:center; justify-content:space-between; gap:26px;
  flex-wrap:wrap; background:#F4F7FC; border:1px solid #E5E7EB; border-radius:18px;
  padding:28px 26px; }
.wp-cta h2{ margin:0; font-size:1.3rem; color:#1E3A8A; letter-spacing:-.02em; }
.wp-cta p{ margin:8px 0 0; color:#6B7280; font-size:.92rem; max-width:56ch; line-height:1.6; }
.wp-cta-actions{ display:flex; gap:11px; flex-wrap:wrap; }

/* ---------------- responsive ---------------- */
@media (max-width:1100px){
  .wp-tiers{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .wp-buyout{ grid-template-columns:1fr; gap:26px; }
}
@media (max-width:1000px){
  .wp-hero-in{ grid-template-columns:1fr; gap:30px; padding:38px 18px 44px; }
}
@media (max-width:760px){
  .wp-tiers{ grid-template-columns:1fr; gap:26px; }
  .wp-section{ padding:42px 0; }
  .wp-band{ padding:42px 0; }
  .wp-tier{ padding:24px 18px 20px; }
  .wp-price b{ font-size:1.72rem; }
  .wp-cta{ padding:22px 18px; }
  .wp-includes{ padding:12px; }
  .wp-inc-ic{ width:36px; height:36px; }
}

/* A two-word nav label must not break across lines. .head-nav links are
   display:block with the default white-space, so "Web Pack" rendered as
   "Web" / "Pack" and grew the row to two lines. */
.head-nav a,
.head-nav a .ndl{ white-space:nowrap; }

/* The header row is tight at 1440 and a sixth nav item tipped .head-actions
   23px past the viewport. Trimming the links' horizontal padding recovers
   ~32px without touching any other page's layout language. */
.head-nav a{ padding-left:10px; padding-right:10px; }

/* ==========================================================================
   WEB PACK — layer 2: split tier cards + the how-it-works band
   Still only Deep Blue #1E3A8A / Dark Gray #374151 / Bright Cyan #06B6D4.
   Cyan is only ever a fill with dark ink, or the darker #0E6E85 on white.
   ========================================================================== */

/* ---------- equal-height grid so the CTAs line up ---------- */
.wp-tiers{ align-items:stretch; }
.wp-tier{ padding:0; overflow:hidden; border-radius:20px; display:flex; flex-direction:column; gap:0; }

/* ---------- card head: dark panel carrying the term + price ---------- */
.wp-tier-head{ position:relative; overflow:hidden; padding:24px 22px 20px; color:#fff;
  background:linear-gradient(140deg,#374151,#4B5563); }
.wp-tier:nth-child(2) .wp-tier-head{ background:linear-gradient(140deg,#1E3A8A,#2F4FA6); }
.wp-tier-art{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.34; }
.wp-tier-head-in{ position:relative; z-index:1; }

.wp-tier-head .wp-term{ color:rgba(255,255,255,.74); }
.wp-tier-head .wp-price b{ color:#fff; }
.wp-tier-head .wp-price s{ color:rgba(255,255,255,.78); }   /* 4.44:1 -> ~5.2:1 */
.wp-tier-head .wp-price small{ color:rgba(255,255,255,.7); }

.wp-permo{ display:inline-flex; align-items:center; gap:6px; margin-top:11px; padding:5px 12px;
  border-radius:999px; background:rgba(255,255,255,.15); color:#fff;
  font-size:.78rem; font-weight:650; }
.wp-permo .ic{ width:14px; height:14px; }

/* the ribbon sits inside the head now that the head has its own surface */
.wp-ribbon{ top:20px; right:20px; left:auto; }

/* ---------- card body ---------- */
.wp-tier-body{ flex:1; display:flex; flex-direction:column; gap:16px;
  padding:20px 22px 22px; background:#fff; }
.wp-tier-body .wp-tier-actions{ margin-top:auto; }

/* ---------- the 12-month card is fully inverted: the whole card is the panel ---------- */
.wp-tier.is-best{ background:linear-gradient(155deg,#1E3A8A,#374151); border-color:transparent;
  box-shadow:0 40px 74px -40px rgba(30,58,138,.72); }
.wp-tier.is-best .wp-tier-head{ background:transparent; }
.wp-tier.is-best .wp-tier-body{ background:transparent; }
.wp-tier.is-best .wp-feats li{ color:rgba(255,255,255,.92); }
.wp-tier.is-best .wp-feats .ic{ color:#7FE3F5; }
.wp-tier.is-best .wp-save{ background:rgba(255,255,255,.17); color:#fff; }
.wp-tier.is-best .wp-tier-actions .btn{ background:#06B6D4; border-color:#06B6D4; color:#062B33;
  font-weight:750; }
.wp-tier.is-best .wp-tier-actions .btn:hover{ background:#22D3EE; border-color:#22D3EE; color:#062B33; }
.wp-tier.is-best .link.small{ color:#7FE3F5; }
.wp-tier.is-best .wp-tier-head .wp-price b{ color:#fff; }
@media (min-width:1001px){
  .wp-tier.is-best{ transform:translateY(-10px); }
}

/* ---------- how it works ---------- */
.wp-steps-band{ background:#F4F7FC; border-top:1px solid #E5E7EB; border-bottom:1px solid #E5E7EB; }
.wp-steps{ list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.wp-steps li{ position:relative; background:#fff; border:1px solid #E5E7EB; border-radius:16px;
  padding:24px 22px; display:grid; gap:9px; justify-items:start; }
.wp-steps li::after{ content:''; position:absolute; top:46px; right:-18px; width:18px; height:2px;
  background:#CBD5E1; }
.wp-steps li:last-child::after{ display:none; }
.wp-step-n{ font-size:.76rem; font-weight:800; letter-spacing:.16em; color:#0E6E85; }
.wp-step-ic{ width:44px; height:44px; border-radius:13px; background:#E8EDF8; color:#1E3A8A;
  display:grid; place-items:center; }
.wp-step-ic .ic{ width:20px; height:20px; }
.wp-steps b{ font-size:1rem; color:#1E3A8A; letter-spacing:-.012em; }
.wp-steps p{ margin:0; font-size:.88rem; color:#374151; line-height:1.62; }

/* ---------- comparison: the two money rows lead the table ---------- */
.wp-table .wp-row-price th{ font-weight:700; color:#1E3A8A; }
.wp-table .wp-row-price td b{ font-size:1.02rem; color:#1E3A8A; letter-spacing:-.02em; }
.wp-table .wp-row-price td.is-best b{ color:#1E3A8A; }

/* ---------- faq on a tinted band for rhythm ---------- */
.wp-faq-band{ background:#F4F7FC; border-top:1px solid #E5E7EB; border-bottom:1px solid #E5E7EB; }
.wp-faq-item{ background:#fff; }

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .wp-steps{ grid-template-columns:1fr; gap:14px; }
  .wp-steps li::after{ display:none; }
}
@media (max-width:760px){
  .wp-tier-head{ padding:20px 18px 18px; }
  .wp-tier-body{ padding:18px 18px 20px; }
  .wp-price b{ font-size:1.8rem; }
  .wp-steps li{ padding:20px 18px; }
}

/* ==========================================================================
   SERVICE DELIVERY TIME — chip on the card, row in the buy box
   ========================================================================== */
.sv-card-foot{ flex-wrap:wrap; }
.sv-when{ display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:999px;
  background:#E8EDF8; color:#1E3A8A; font-size:.76rem; font-weight:650; white-space:nowrap; }
.sv-when .ic{ width:14px; height:14px; }

.buy-when{ display:flex; align-items:center; gap:9px; margin:10px 0 0; padding:10px 13px;
  border-radius:11px; background:#E8EDF8; color:#374151; font-size:.85rem; line-height:1.45; }
.buy-when .ic{ width:16px; height:16px; flex:none; color:#1E3A8A; }
.buy-when b{ color:#1E3A8A; }

/* category manager */
.cat-toolbar{ align-items:flex-start; }
.cat-toolbar > div:first-child{ display:grid; gap:3px; }
.cat-toolbar b{ color:var(--dk-text); }
.cat-grp{ display:flex; align-items:center; gap:9px; margin:18px 0 8px; font-size:.74rem;
  font-weight:750; letter-spacing:.1em; text-transform:uppercase; color:var(--dk-muted); }
.cat-grp:first-of-type{ margin-top:6px; }
.cat-grp i{ font-style:normal; padding:1px 8px; border-radius:999px;
  background:rgba(255,255,255,.1); color:var(--dk-text-2); font-size:.68rem; }
.cat-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.cat-list .a-table code{ font-size:.76rem; color:var(--dk-text-2); }

/* ==========================================================================
   WHATSAPP DIRECT ORDER
   On-palette: cyan as a fill with dark ink (6.2:1) or the darker #0E6E85 on a
   cyan tint (5.6:1). No WhatsApp green — the three-colour rule wins.
   ========================================================================== */
.btn.wa-order{ background:#06B6D4; border-color:#06B6D4; color:#062B33; font-weight:750; }
.btn.wa-order:hover{ background:#22D3EE; border-color:#22D3EE; color:#062B33; }
.btn.wa-order .ic{ width:18px; height:18px; }

.pd-wa{ width:42px; height:42px; flex:none; padding:0; display:grid; place-items:center;
  border-radius:11px; border:1px solid #06B6D4; background:#E6F8FC; color:#0E6E85;
  transition:background .18s, color .18s; }
.pd-wa:hover{ background:#06B6D4; color:#062B33; }
.pd-wa .ic{ width:19px; height:19px; }

.sv-wa{ width:36px; height:36px; flex:none; padding:0; display:grid; place-items:center;
  border-radius:10px; border:1px solid #06B6D4; background:#E6F8FC; color:#0E6E85;
  transition:background .18s, color .18s; }
.sv-wa:hover{ background:#06B6D4; color:#062B33; }
.sv-wa .ic{ width:17px; height:17px; }

@media (max-width:640px){ .pd-wa{ width:46px; height:46px; } .pd-wa .ic{ width:20px; height:20px; } }

/* Live Preview with no demo URL set: visible, but inert — never opens anything else. */
.pd-preview.is-off, .btn.is-off, .sv-link.is-off{ opacity:.45; cursor:not-allowed; pointer-events:none; }

/* ==========================================================================
   SERVICES PAGE — design pass
   Appended to v2.css; every rule is scoped to .sv-* (services-only classes)
   or nested under .sv-page, so nothing else on the site is affected.

   Palette is the site's three colours only: #1E3A8A / #374151 / #06B6D4.
   Cyan never carries body text on white (2.43:1) — it is a fill with dark ink
   (#062B33 on cyan = 6.05:1) or the darker #0E6E85 on white/tint (5.35:1).
   ========================================================================== */

/* ---------------------------------------------------------------- hero ---- */
.sv-hero{
  position:relative; overflow:hidden; color:#fff;
  background:
    radial-gradient(980px 420px at 14% -8%, rgba(6,182,212,.30), transparent 62%),
    radial-gradient(760px 380px at 92% 6%, rgba(255,255,255,.09), transparent 60%),
    linear-gradient(155deg, #2450AE 0%, #1E3A8A 48%, #16306F 100%);
  padding:58px 0 64px;
}
.sv-hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:54px 54px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.55), transparent 76%);
}
.sv-hero .v2-wrap{ position:relative; z-index:1; }
.sv-crumbs{ display:flex; gap:8px; align-items:center; font-size:12.4px; color:rgba(255,255,255,.78); margin-bottom:18px; }
.sv-crumbs a{ color:rgba(255,255,255,.9); text-decoration:none; }
.sv-crumbs a:hover{ color:#67E8F9; }
.sv-badge{
  display:inline-flex; align-items:center; gap:9px; height:34px; padding:0 15px;
  border-radius:999px; background:rgba(255,255,255,.11); border:1px solid rgba(255,255,255,.24);
  font-size:11.5px; font-weight:750; letter-spacing:.10em; text-transform:uppercase; color:#67E8F9;
}
.sv-badge::before{ content:""; width:7px; height:7px; border-radius:50%; background:#06B6D4;
  box-shadow:0 0 0 4px rgba(6,182,212,.24); }
.sv-hero h1{ margin:18px 0 0; font-size:clamp(29px, 4.9vw, 48px); line-height:1.07;
  font-weight:800; letter-spacing:-.028em; color:#fff; }
.sv-lead{ margin:16px 0 0; max-width:660px; font-size:clamp(15.4px, 1.8vw, 17.6px);
  line-height:1.66; color:rgba(255,255,255,.9); }
.sv-facts{ display:flex; flex-wrap:wrap; gap:10px; margin:24px 0 0; padding:0; list-style:none; }
.sv-facts li{ display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 15px;
  border-radius:11px; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.16);
  font-size:13px; font-weight:600; color:#fff; }
.sv-facts li svg{ width:16px; height:16px; color:#67E8F9; flex:none; }
.sv-hero-btns{ display:flex; flex-wrap:wrap; gap:12px; margin:30px 0 0; }

/* -------------------------------------------------------------- grouping -- */
.sv-group{ margin-top:44px; }
.sv-group:first-of-type{ margin-top:0; }
.sv-group-head{
  display:flex; align-items:center; gap:14px; margin:0 0 20px;
  padding-bottom:14px; border-bottom:1px solid #E4E8EF;
}
.sv-group-head h2{ margin:0; font-size:clamp(20px, 2.6vw, 26px); font-weight:800;
  letter-spacing:-.022em; color:#111827; }
.sv-group-head svg{ width:20px; height:20px; color:#0E6E85; flex:none; }
.sv-jump{ margin-left:auto; font-size:12.6px; font-weight:650; color:#0E6E85; text-decoration:none; }
.sv-jump:hover{ color:#1E3A8A; }

/* ----------------------------------------------------------------- cards -- */
.sv-grid{ display:grid; gap:20px; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); align-items:start; }
.sv-card{
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  background:#fff; border:1px solid #E4E8EF; border-radius:16px;
  box-shadow:0 1px 2px rgba(16,24,40,.04), 0 20px 44px -38px rgba(16,24,40,.4);
  transition:transform .18s, box-shadow .18s, border-color .18s;
}
.sv-card::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg, #1E3A8A, #06B6D4 60%, #1E3A8A); opacity:.85; }
.sv-card:hover{ transform:translateY(-3px); border-color:#CFE6F2;
  box-shadow:0 2px 4px rgba(16,24,40,.05), 0 30px 60px -40px rgba(30,58,138,.5); }
.sv-flag{ position:absolute; top:0; right:16px; z-index:2;
  display:inline-flex; align-items:center; height:26px; padding:0 12px;
  border-radius:0 0 10px 10px; background:#06B6D4; color:#062B33;
  font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }

.sv-card-head{ display:flex; align-items:flex-start; gap:13px; padding:22px 20px 0; }
.sv-ico{ width:44px; height:44px; flex:none; display:grid; place-items:center; border-radius:13px;
  background:linear-gradient(150deg, #E6F8FC, #D6F1F9); color:#0E6E85; }
.sv-ico svg{ width:22px; height:22px; }
.sv-cat{ display:block; font-size:11px; font-weight:750; letter-spacing:.09em;
  text-transform:uppercase; color:#0E6E85; }
.sv-h3, .sv-card-head h3{ margin:4px 0 0; font-size:17.5px; font-weight:750;
  letter-spacing:-.018em; line-height:1.28; color:#111827; }
.sv-sub{ margin:11px 20px 0; font-size:13.8px; line-height:1.62; color:#5B6472; }

.sv-chips{ display:flex; flex-wrap:wrap; gap:7px; margin:15px 20px 0; }
.sv-pill, .sv-when{ display:inline-flex; align-items:center; gap:6px; height:27px; padding:0 11px;
  border-radius:8px; background:#E6F8FC; border:1px solid #BEEAF4;
  font-size:11.9px; font-weight:650; color:#0E6E85; }
.sv-pill svg, .sv-when svg{ width:14px; height:14px; }

.sv-deliver, .sv-includes{ margin:15px 20px 0; padding:0; list-style:none; display:grid; gap:8px;
  font-size:13.4px; line-height:1.5; color:#5B6472; }
.sv-deliver li, .sv-includes li{ display:flex; gap:9px; }
.sv-tick{ flex:none; width:16px; height:16px; margin-top:3px; border-radius:50%;
  background:#E6F8FC url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E6E85' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat; }
.sv-tick svg{ display:none; }

.sv-card-foot{ margin-top:auto; padding:20px; border-top:1px solid #EDF1F6; }
.sv-price{ display:flex; align-items:baseline; gap:9px; margin:0 0 14px;
  font-size:26px; font-weight:800; letter-spacing:-.022em; color:#111827; font-variant-numeric:tabular-nums; }
.sv-price small{ font-size:12.4px; font-weight:600; color:#5B6472; letter-spacing:0; }
.sv-cta{ display:flex; align-items:center; gap:9px; }
.sv-cta .v2-btn{ min-height:46px; }
.sv-link{ display:inline-flex; align-items:center; gap:7px; height:46px; padding:0 15px;
  border-radius:11px; border:1px solid #E4E8EF; background:#fff; color:#374151;
  font-size:13.4px; font-weight:700; text-decoration:none; white-space:nowrap;
  transition:background .16s, color .16s, border-color .16s; }
.sv-link:hover{ background:#1E3A8A; border-color:#1E3A8A; color:#fff; }
.sv-link svg{ width:16px; height:16px; }
.sv-link.sv-live{ border-color:#BEEAF4; background:#E6F8FC; color:#0E6E85; }
.sv-link.sv-live:hover{ background:#06B6D4; border-color:#06B6D4; color:#062B33; }
.sv-wa{ display:grid; place-items:center; width:46px; height:46px; flex:none;
  border-radius:11px; border:1px solid #BEEAF4; background:#E6F8FC; color:#0E6E85;
  transition:background .16s, color .16s; }
.sv-wa:hover{ background:#06B6D4; color:#062B33; }
.sv-wa svg{ width:19px; height:19px; }
.sv-card a:focus-visible{ outline:2px solid #06B6D4; outline-offset:2px; }

/* ------------------------------------------- the two AI options (models) --- */
.sv-models{ display:grid; gap:20px; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); align-items:start; }
.sv-model{
  position:relative; display:flex; flex-direction:column; padding-top:28px;
  background:#fff; border:1px solid #E4E8EF; border-radius:16px; overflow:hidden;
  box-shadow:0 1px 2px rgba(16,24,40,.04), 0 22px 48px -40px rgba(16,24,40,.42);
}
.sv-model::before{ content:""; position:absolute; inset:0 0 auto 0; height:28px;
  background:linear-gradient(90deg, #1E3A8A, #2450AE); }
.sv-model svg{ position:relative; z-index:1; }
.sv-model-price{ display:flex; align-items:baseline; gap:9px; margin:0 0 14px;
  font-size:27px; font-weight:800; letter-spacing:-.022em; color:#111827; font-variant-numeric:tabular-nums; }
.sv-model-price small{ font-size:12.6px; font-weight:600; color:#5B6472; letter-spacing:0; }

.sv-empty{ padding:34px 22px; text-align:center; border:1px dashed #D8E2EE; border-radius:14px;
  background:#F8FAFD; color:#5B6472; font-size:14px; }
.sv-cta-note{ display:flex; align-items:center; gap:8px; justify-content:center;
  margin:16px 0 0; font-size:12.8px; color:#5B6472; }

/* ------------------------------------------------------------ responsive -- */
@media (max-width:760px){
  .sv-hero{ padding:44px 0 50px; }
  .sv-hero-btns .v2-btn{ width:100%; }
  .sv-grid, .sv-models{ grid-template-columns:1fr; }
  .sv-card-head, .sv-card-foot{ padding-left:16px; padding-right:16px; }
  .sv-sub, .sv-chips, .sv-deliver, .sv-includes{ margin-left:16px; margin-right:16px; }
  .sv-cta{ flex-wrap:wrap; }
  .sv-cta .v2-btn{ flex:1 1 100%; }
  .sv-link{ flex:1 1 auto; justify-content:center; }
  .sv-price{ font-size:24px; }
}

/* The hero lead was being out-specified by a base rule and rendered dark-on-blue
   (~2:1). Raise the specificity so the hero's own text wins. */
.sv-hero .sv-lead{ color:rgba(255,255,255,.94); }
.sv-hero h1{ color:#fff; }
.sv-hero .sv-crumbs, .sv-hero .sv-crumbs a{ color:rgba(255,255,255,.86); }
.sv-hero .sv-crumbs a:hover{ color:#67E8F9; }
.sv-hero .sv-facts li{ color:#fff; }
.sv-hero .sv-facts li svg{ color:#67E8F9; }
.sv-hero .sv-hero-btns .v2-btn-ghost,
.sv-hero .sv-hero-btns .v2-btn-white{ color:#fff; border-color:rgba(255,255,255,.42); background:rgba(255,255,255,.07); }

/* The hero lead kept rendering dim: an existing rule (or opacity on the element)
   outranks a plain colour declaration and the source was not identifiable from
   the cascade in reasonable time. This is a deliberate, narrowly-scoped
   !important to clear a real WCAG failure (light-on-blue measures ~2:1).
   Remove it if the base rule is ever fixed at source. */
.sv-hero .sv-lead,
.sv-hero p.sv-lead,
.sv-hero .sv-lead *{ color:rgba(255,255,255,.95) !important; opacity:1 !important; }
.sv-hero .sv-facts li,
.sv-hero .sv-facts li *{ color:#ffffff !important; opacity:1 !important; }
.sv-hero .sv-crumbs,
.sv-hero .sv-crumbs *{ color:rgba(255,255,255,.88) !important; opacity:1 !important; }

/* ==========================================================================
   CART PAGE — professional design pass
   Every rule is scoped under .ct-page or .ct- (cart-only classes), so it
   cannot touch any other page. Palette: Deep Blue #1E3A8A / Dark Gray
   #374151 / Bright Cyan #06B6D4 — no added colour.
   ========================================================================== */

/* ---- the empty-state block: restructure from a plain message into a
        designed, branded module with a clear action row ---- */
.ct-page .ct-empty{ position:relative; border-color:#DCE3EF; background:linear-gradient(180deg,#F8FAFD 0%,#EEF4FB 100%);
  border-radius:20px; overflow:hidden; padding:52px 32px 44px; }
.ct-page .ct-empty::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(30,58,138,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(30,58,138,.05) 1px, transparent 1px);
  background-size:44px 44px; mask-image:linear-gradient(180deg, transparent 35%, rgba(16,24,40,.06) 75%, transparent 100%); }
.ct-pill{ display:inline-flex; align-items:center; height:34px; padding:0 13px; border-radius:999px;
  background:#E6F8FC; border:1px solid #BEEAF4; color:#0E6E85; font-size:11.6px; font-weight:750; letter-spacing:.08em; text-transform:uppercase; }
.ct-empty h2{ color:#111827; font-size:27px; font-weight:800; letter-spacing:-.024em; line-height:1.1; margin:6px 0 12px; }
.ct-empty p{ color:#5B6472; font-size:15.2px; line-height:1.66; margin:0 0 22px; max-width:56em; }
.ct-empty-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; justify-content:center;
  padding-top:20px; border-top:1px solid #E4E8EF; }
.ct-empty-actions .v2-btn{ min-height:50px; }
.ct-tell{
  display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin:18px 0 0; padding:0; list-style:none;
  font-size:13.6px; color:#5B6472; }
.ct-tell li{ display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:999px;
  background:#fff; border:1px solid #E4E8EF; color:#5B6472; transition:border-color .15s, color .15s; }
.ct-tell li:hover{ border-color:#CFE6F2; color:#0E6E85; }
.ct-tell svg{ width:16px; height:16px; }
.ct-tell a{ color:#0E6E85; font-weight:700; text-decoration:none; }
.ct-tell a:hover{ color:#1E3A8A; }

/* ---- single-action blue CTA on the empty state reads as a lifeless
        placeholder: give it a cyan primary action and re-skin the second
        as a ghost alternative ---- */
.ct-page .ct-empty .v2-btn-blue{ background:#06B6D4; border-color:#06B6D4; color:#062B33; }
.ct-page .ct-empty .v2-btn-blue:hover{ background:#062B33; border-color:#062B33; color:#fff; }

/* ---- add a subtle trust strip to the empty state so it reads like a
        product site, not a blank page ---- */
.ct-empty-trust{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:22px; }
.ct-empty-trust div{ display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 14px;
  border-radius:11px; background:#fff; border:1px solid #E4E8EF; color:#5B6472;
  font-size:12.4px; font-weight:600; }
.ct-empty-trust svg{ width:16px; height:16px; color:#0E6E85; }


/* keep the same three-colour palette throughout */