:root{
  --ink:#0E2A33; --ink-2:#3D5560; --paper:#F3F6F5; --white:#FFFFFF; --line:#D5DEE1;
  --teal:#0B6E69; --teal-bright:#5FE0D6; --night:#071A20;
  --s-mist:#7FE3E6; --s-uv:#8B6CFF; --s-ozone:#FFC53D; --s-dry:#4ADE80;
  --wrap:1240px;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth; scroll-padding-top:calc(72px + env(safe-area-inset-top,0px))}
body{margin:0; background:var(--white); color:var(--ink);
  font-family:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:17px; line-height:1.55; font-variation-settings:"wdth" 100; -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}
a{color:inherit}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 28px}
h1,h2,h3{margin:0; font-variation-settings:"wdth" 118; font-weight:800; letter-spacing:-0.02em; line-height:1.04}
h1{font-size:clamp(42px,5.6vw,84px)}
h2{font-size:clamp(32px,4.2vw,58px)}
h3{font-size:22px; letter-spacing:-0.01em; line-height:1.2}
p{margin:0}
.lede{font-size:clamp(18px,1.5vw,21px); color:var(--ink-2); max-width:34em}
.num{font-variant-numeric:tabular-nums}
:focus-visible{outline:3px solid var(--teal); outline-offset:3px; border-radius:4px}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 26px; border-radius:999px;
  font:inherit; font-weight:700; font-size:16px; text-decoration:none; cursor:pointer; border:2px solid var(--ink); background:transparent; color:var(--ink)}
.btn-solid{background:var(--ink); color:#fff}
.btn-solid:hover{background:var(--teal); border-color:var(--teal)}
.btn:hover{border-color:var(--teal); color:var(--teal)}
.btn-solid:hover{color:#fff}
.on-dark .btn{border-color:rgba(255,255,255,.6); color:#fff}
.on-dark .btn-solid{background:var(--teal-bright); border-color:var(--teal-bright); color:var(--night)}

/* header */
.top{position:sticky; top:env(safe-area-inset-top,0px); z-index:20; background:rgba(255,255,255,.92); backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--line)}
.top .wrap{display:flex; align-items:center; gap:28px; height:72px}
.logo svg{height:30px; width:auto; display:block}
.nav{display:flex; gap:22px; margin-left:auto; font-weight:600; font-size:15px; white-space:nowrap}
.nav a{text-decoration:none; color:var(--ink-2)}
.nav a:hover{color:var(--teal)}
.top .btn{min-height:42px; padding:0 20px; font-size:15px; white-space:nowrap}

/* hero */
.hero{background:var(--paper); overflow:hidden}
.hero .wrap{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:32px; align-items:end; padding-top:72px}
.hero-copy{padding-bottom:84px}
.hero h1{margin-bottom:26px}
.hero .lede{margin-bottom:34px}
.cta{display:flex; flex-wrap:wrap; gap:14px}
.hero-art{position:relative; display:flex; align-items:flex-end; justify-content:center; gap:0; min-height:520px}
.hero-art img{mix-blend-mode:multiply; height:auto}
.hero-art .a{width:46%; margin-right:-8%; position:relative; z-index:1}
.hero-art .b{width:62%}
.hero-note{position:absolute; left:0; bottom:18px; font-size:13px; color:var(--ink-2)}

/* facts */
.facts{border-bottom:1px solid var(--line)}
.facts .wrap{display:grid; grid-template-columns:repeat(4,minmax(0,1fr))}
.fact{padding:34px 28px 34px 0; border-right:1px solid var(--line)}
.fact + .fact{padding-left:28px}
.fact:last-child{border-right:0}
.fact b{display:block; font-variation-settings:"wdth" 118; font-weight:800; font-size:clamp(22px,2.1vw,32px); letter-spacing:-0.02em; line-height:1.15; margin-bottom:6px}
.fact span{color:var(--ink-2); font-size:15px}

section{padding:112px 0}
.sec-head{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px; align-items:end; margin-bottom:56px}
.sec-head p{color:var(--ink-2); max-width:32em}

/* process (dark) */
.process{background:var(--night); color:#fff}
.process .sec-head p{color:#A9BEC4}
.stagebox{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:0; border:1px solid rgba(255,255,255,.14); border-radius:20px; overflow:hidden}
.stage-canvas{position:relative; background:radial-gradient(120% 90% at 50% 40%, #0E2C36 0%, #04121A 70%); min-height:440px}
.stage-canvas canvas{position:absolute; inset:0; width:100%; height:100%}
.stages{display:flex; flex-direction:column; border-left:1px solid rgba(255,255,255,.14)}
.stage{flex:1; text-align:left; background:transparent; color:#fff; border:0; border-bottom:1px solid rgba(255,255,255,.14); padding:24px 28px; cursor:pointer; font:inherit; display:grid; grid-template-columns:44px 1fr; gap:4px 14px; align-items:start; opacity:.72; transition:opacity .25s, background .25s}
.stage:last-child{border-bottom:0}
.stage i{grid-row:1 / span 2; width:44px; height:44px; border-radius:50%; border:2px solid var(--c); display:flex; align-items:center; justify-content:center; font-style:normal; font-weight:800; color:var(--c)}
.stage b{font-size:20px; font-variation-settings:"wdth" 112}
.stage span{color:#A9BEC4; font-size:15px; line-height:1.45}
.stage[aria-pressed="true"]{opacity:1; background:rgba(255,255,255,.05)}
.stage[aria-pressed="true"] i{background:var(--c); color:var(--night)}
.modes{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; margin-top:28px; border:1px solid rgba(255,255,255,.14); border-radius:20px}
.mode{padding:26px 28px; border-right:1px solid rgba(255,255,255,.14)}
.mode:last-child{border-right:0}
.mode b{font-size:44px; font-variation-settings:"wdth" 118; font-weight:800; letter-spacing:-0.03em; line-height:1}
.mode b small{font-size:17px; font-weight:600; letter-spacing:0; margin-left:6px; color:#A9BEC4}
.mode h3{font-size:18px; margin:10px 0 4px}
.mode p{color:#A9BEC4; font-size:15px}

/* products */
.products{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px}
.product{background:var(--paper); border-radius:20px; padding:28px; display:flex; flex-direction:column}
.product figure{margin:0 0 20px; height:380px; display:flex; align-items:flex-end; justify-content:center}
.product figure img{max-height:100%; width:auto; mix-blend-mode:multiply}
.product .tag{align-self:flex-start; font-size:13px; font-weight:700; color:var(--teal); background:#DDF0EE; border-radius:999px; padding:4px 12px; margin-bottom:12px}
.product h3{font-size:30px; font-variation-settings:"wdth" 118; font-weight:800}
.product .sub{color:var(--ink-2); margin:6px 0 18px}
.specs{list-style:none; margin:0 0 22px; padding:0; border-top:1px solid var(--line)}
.specs li{display:flex; justify-content:space-between; gap:16px; padding:10px 0; border-bottom:1px solid var(--line); font-size:15px}
.specs li span:first-child{color:var(--ink-2)}
.specs li span:last-child{font-weight:600; text-align:right}
.price{margin-top:auto; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.price b{font-size:34px; font-variation-settings:"wdth" 118; font-weight:800; letter-spacing:-0.02em}
.price span{color:var(--ink-2); font-size:14px}
.fineprint{color:var(--ink-2); font-size:14px; margin-top:22px; max-width:60em}

/* ROI */
.roi{background:var(--paper)}
.roi-box{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0; background:#fff; border:1px solid var(--line); border-radius:20px; overflow:hidden}
.roi-in{padding:36px}
.roi-out{padding:36px; background:var(--ink); color:#fff; display:flex; flex-direction:column}
.field{margin-bottom:22px}
.field label{display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-weight:600; font-size:15px; margin-bottom:8px}
.field output{font-variant-numeric:tabular-nums; font-weight:800; font-size:18px}
.field small{display:block; color:var(--ink-2); font-size:13px; margin-top:6px}
.seg{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.seg button{min-height:48px; border-radius:12px; border:2px solid var(--line); background:#fff; font:inherit; font-weight:700; cursor:pointer; color:var(--ink)}
.seg button[aria-pressed="true"]{border-color:var(--ink); background:var(--ink); color:#fff}
input[type=range]{width:100%; accent-color:var(--teal); height:28px; margin:0}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.numin{width:100%; min-height:48px; border:2px solid var(--line); border-radius:12px; padding:0 14px; font:inherit; font-weight:600; font-variant-numeric:tabular-nums; color:var(--ink); background:#fff}
.numin:focus{border-color:var(--teal); outline:none}
.payback{font-variation-settings:"wdth" 118; font-weight:800; font-size:clamp(48px,6vw,84px); letter-spacing:-0.03em; line-height:1; color:var(--teal-bright)}
.payback small{font-size:20px; font-weight:600; letter-spacing:0; color:#fff; margin-left:8px}
.roi-out .k{color:#A9BEC4; font-size:15px; margin-bottom:6px}
.rows{margin:26px 0 22px; border-top:1px solid rgba(255,255,255,.18)}
.rows div{display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.18)}
.rows span{color:#A9BEC4}
.rows b{font-variant-numeric:tabular-nums}
.chart{margin-top:auto}
.chart svg{width:100%; height:120px; display:block}
.chart p{color:#A9BEC4; font-size:13px; margin-top:8px}
.roi-note{color:var(--ink-2); font-size:14px; margin-top:20px; max-width:66em}
.points{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px 40px; margin-top:64px}
.points h3{margin-bottom:6px}
.points p{color:var(--ink-2)}

/* places */
.places{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px}
.place{position:relative; border-radius:16px; overflow:hidden; aspect-ratio:4/5; background:var(--ink)}
.place img{width:100%; height:100%; object-fit:cover; opacity:.78}
.place b{position:absolute; left:18px; right:18px; bottom:16px; color:#fff; font-size:20px; font-variation-settings:"wdth" 112; line-height:1.15; text-shadow:0 1px 12px rgba(0,0,0,.5)}
.more-places{margin-top:26px; color:var(--ink-2); max-width:60em}

/* pay */
.pay{background:var(--paper)}
.pay-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px}
.card{background:#fff; border:1px solid var(--line); border-radius:20px; padding:32px}
.card h3{margin-bottom:10px}
.card p{color:var(--ink-2)}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 0; padding:0; list-style:none}
.chips li{border:1.5px solid var(--ink); border-radius:999px; padding:6px 14px; font-weight:600; font-size:14px}

/* built */
.built-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px}
.built-grid figure{margin:0; border-radius:16px; overflow:hidden; background:var(--paper)}
.built-grid img{width:100%; height:100%; object-fit:cover}
.built-grid .wide{grid-column:1 / -1; aspect-ratio:1500/933}
.built-grid figure:not(.wide){aspect-ratio:4/5}
.terms{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; margin-top:56px; border-top:2px solid var(--ink)}
.terms div{padding:22px 24px 0 0}
.terms b{display:block; font-size:19px; margin-bottom:4px}
.terms span{color:var(--ink-2); font-size:15px}
.docs{margin-top:44px; border:1px solid var(--line); border-radius:16px; padding:8px 24px}
.docs div{display:flex; justify-content:space-between; gap:20px; padding:14px 0; border-bottom:1px solid var(--line); font-size:15px}
.docs div:last-child{border-bottom:0}
.docs span{color:var(--ink-2); text-align:right}

/* faq */
.faq{max-width:900px}
details{border-bottom:1px solid var(--line)}
details:first-of-type{border-top:1px solid var(--line)}
summary{list-style:none; cursor:pointer; padding:22px 44px 22px 0; font-weight:700; font-size:19px; position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; position:absolute; right:6px; top:16px; font-size:28px; font-weight:400; color:var(--teal)}
details[open] summary::after{content:"–"}
details p{padding:0 44px 24px 0; color:var(--ink-2); max-width:44em}

/* partner */
.partner{background:var(--ink); color:#fff}
.partner .wrap{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:64px}
.partner p{color:#A9BEC4}
.partner h2{margin-bottom:20px}
.benefits{list-style:none; padding:0; margin:30px 0 0}
.benefits li{padding:14px 0; border-top:1px solid rgba(255,255,255,.18); font-weight:600}
.form{background:#fff; color:var(--ink); border-radius:20px; padding:32px}
.form label{display:block; font-weight:600; font-size:14px; margin:0 0 6px}
.form .numin, .form select, .form textarea{width:100%; margin-bottom:16px}
.form select{min-height:48px; border:2px solid var(--line); border-radius:12px; padding:0 12px; font:inherit; background:#fff; color:var(--ink)}
.form textarea{min-height:96px; border:2px solid var(--line); border-radius:12px; padding:12px 14px; font:inherit; color:var(--ink); resize:vertical}
.form .btn{width:100%}
.form small{display:block; color:var(--ink-2); font-size:13px; margin-top:12px}
.direct{display:flex; align-items:center; gap:18px; margin-top:34px}
.direct img{width:96px; height:96px; border-radius:10px; background:#fff}
.direct a{color:#fff; font-weight:700}

footer{background:var(--night); color:#A9BEC4; padding:44px 0; font-size:14px}
footer .wrap{display:flex; flex-wrap:wrap; gap:16px 40px; align-items:center; justify-content:space-between}
footer svg{height:22px; width:auto}
footer a{color:#fff; text-decoration:none}

@media (max-width:1180px){ .nav{display:none} .top .wrap{justify-content:space-between} }
@media (max-width:1020px){
  .nav{display:none}
  .top .wrap{justify-content:space-between}
  .hero .wrap{grid-template-columns:1fr; padding-top:48px}
  .hero-copy{padding-bottom:24px}
  .hero-art{min-height:0}
  .hero-note{position:static; margin:10px 0 0}
  .facts .wrap{grid-template-columns:1fr 1fr}
  .fact{border-bottom:1px solid var(--line); padding:24px 16px 24px 0}
  .fact:nth-child(2n){border-right:0; padding-left:20px}
  .fact:nth-child(2n+1){padding-left:0}
  .fact:nth-last-child(-n+2){border-bottom:0}
  section{padding:76px 0}
  .sec-head{grid-template-columns:1fr; gap:16px; margin-bottom:36px}
  .stagebox{grid-template-columns:1fr}
  .stage-canvas{min-height:320px}
  .stages{border-left:0; border-top:1px solid rgba(255,255,255,.14)}
  .modes{grid-template-columns:1fr}
  .mode{border-right:0; border-bottom:1px solid rgba(255,255,255,.14)}
  .mode:last-child{border-bottom:0}
  .products{grid-template-columns:1fr}
  .product figure{height:320px}
  .roi-box{grid-template-columns:1fr}
  .points{grid-template-columns:1fr; gap:24px}
  .places{grid-template-columns:1fr 1fr}
  .pay-grid{grid-template-columns:1fr}
  .built-grid{grid-template-columns:1fr 1fr 1fr; gap:10px}
  .terms{grid-template-columns:1fr 1fr}
  .terms div{padding-bottom:6px}
  .docs div{flex-direction:column; gap:2px}
  .docs span{text-align:left}
  .partner .wrap{grid-template-columns:1fr; gap:40px}
}
@media (max-width:520px){
  body{font-size:16px}
  .wrap{padding:0 20px}
  .top .btn{display:none}
  .roi-in,.roi-out,.form,.card{padding:24px}
  .grid2{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .stage{transition:none} }

/* v3 hero: full-width title */
.hero2 .wrap{display:block; text-align:center; max-width:1400px; padding-top:64px}
.hero2 .pname{font-weight:800; color:var(--ink); margin:0 auto 10px; font-size:clamp(34px,7.4vw,60px); font-variation-settings:"wdth" 104; letter-spacing:-0.02em; line-height:1.04}
.hero2 h1{font-size:clamp(34px,7.4vw,60px); font-variation-settings:"wdth" 104; margin:0 auto 22px}
.hero2 .lede{margin:0 auto 30px; max-width:40em}
.hero2 .cta{justify-content:center}
.hero2 .hero-art{min-height:0; margin-top:48px; align-items:flex-end; gap:3%}
.hero2 .hero-art img{mix-blend-mode:multiply}
.hero2 .hero-art .a{width:19%; margin:0} .hero2 .hero-art .b{width:24%} .hero2 .hero-art .c{width:21%}
@media (max-width:700px){ .hero2 .hero-art .a{width:28%} .hero2 .hero-art .b{width:36%} .hero2 .hero-art .c{width:31%} .hero2 .hero-art{gap:1%} }
.vision{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin:0 0 44px}
.vision div{background:var(--ink); color:#fff; border-radius:20px; padding:30px 32px}
.vision small{display:block; color:var(--teal-bright); font-weight:700; margin-bottom:8px}
.vision b{font-size:clamp(20px,2vw,28px); font-variation-settings:"wdth" 112; font-weight:800; line-height:1.2; letter-spacing:-0.01em}
.pn{display:block; color:var(--ink-2); font-size:13px; font-weight:600; margin-bottom:6px}
.places.p8{grid-template-columns:repeat(4,minmax(0,1fr))}
.places.p8 .place{aspect-ratio:4/3}
.place.ph{background:linear-gradient(160deg,#143742,#0A2028); display:flex; align-items:center; justify-content:center}
.place.ph svg{width:34%; height:auto; fill:none; stroke:var(--teal-bright); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; opacity:.9; margin-bottom:12%}
.stage span{font-size:14.5px}
@media (max-width:899px){ .hero.hero2 .pname{font-size:clamp(28px,7.4vw,48px); margin-bottom:12px} .hero.hero2 h1{font-size:clamp(22px,5.8vw,38px)} }
@media (max-width:1020px){ .vision{grid-template-columns:1fr} .places.p8{grid-template-columns:1fr 1fr} }

/* v2: full-width centred section heads */
.sec-head{display:block; text-align:center; margin-bottom:56px}
.sec-head h2{font-size:clamp(26px,3vw,42px); font-variation-settings:"wdth" 110; text-wrap:balance}
@media (min-width:1100px){ .sec-head h2{white-space:nowrap} }
.fact b{font-size:clamp(20px,1.9vw,28px)}
.sec-head p{margin:18px auto 0; max-width:46em; color:var(--ink-2); font-size:clamp(17px,1.3vw,19px)}
.process .sec-head p, .dark .sec-head p{color:#A9BEC4}
.hero h1{font-size:clamp(40px,5vw,76px)}
/* at a glance */
.glance{background:#fff}
.glance .def{font-size:clamp(19px,1.7vw,24px); line-height:1.5; max-width:52em; margin:0 auto 44px; text-align:center}
.kf{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; border-top:2px solid var(--ink); margin:0}
.kf div{padding:18px 20px 18px 0; border-bottom:1px solid var(--line)}
.kf dt{color:var(--ink-2); font-size:14px}
.kf dd{margin:2px 0 0; font-weight:700}
/* why */
.why{background:var(--paper)}
.cmp{width:100%; border-collapse:separate; border-spacing:0; background:#fff; border:1px solid var(--line); border-radius:20px; overflow:hidden}
.cmp th,.cmp td{padding:22px 26px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line)}
.cmp tr:last-child td{border-bottom:0}
.cmp thead th{font-size:15px; color:var(--ink-2); font-weight:600}
.cmp thead th.us{background:var(--ink); color:#fff; font-weight:800; font-size:18px}
.cmp td.us{background:#EEF6F5; font-weight:700}
.cmp td.us small{display:block; font-weight:400; color:var(--ink-2); margin-top:4px; font-size:15px}
.cmp td:first-child{font-weight:700; width:22%}
.cmp td.them{color:var(--ink-2)}
.cmp-note{color:var(--ink-2); font-size:14px; margin-top:16px; text-align:center}
.plus{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-top:40px}
/* cloud */
.cloud .shots{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.shot{margin:0; border-radius:14px; overflow:hidden; border:1px solid var(--line); box-shadow:0 18px 40px -24px rgba(14,42,51,.45); background:#fff}
.shot img{width:100%; height:auto; display:block}
.shots .big{grid-column:1 / -1}
.cap{color:var(--ink-2); font-size:13px; margin-top:14px; text-align:center}
.feat{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px 40px; margin-top:52px}
.feat h3{margin-bottom:6px} .feat p{color:var(--ink-2)}
/* partner system */
.psys{background:var(--paper)}
.tiers{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; background:#fff; border:1px solid var(--line); border-radius:20px; overflow:hidden; margin-bottom:24px}
.tier{padding:26px; border-right:1px solid var(--line); position:relative}
.tier:last-child{border-right:0}
.tier small{color:var(--teal); font-weight:700; font-size:13px}
.tier h3{margin:6px 0 6px} .tier p{color:var(--ink-2); font-size:15px}
.cards4{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px}
/* map */
.reach{background:var(--night); color:#fff}
.reach .map svg{width:100%; height:auto; display:block}
.reach circle{fill:#22404A}
.reach circle.sea,.reach circle.lat,.reach circle.afr,.reach circle.eur{fill:var(--teal-bright)}
.regions{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; border-top:1px solid rgba(255,255,255,.18); margin-top:36px}
.regions div{padding:22px 20px 0 0}
.regions b{display:block; font-size:20px; font-variation-settings:"wdth" 112}
.regions span{color:#A9BEC4; font-size:15px}
/* downloads + knowledge */
.dl{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px}
.file{display:flex; flex-direction:column; gap:6px; border:1px solid var(--line); border-radius:16px; padding:22px; text-decoration:none; background:#fff}
.file:hover{border-color:var(--teal)}
.file small{color:var(--teal); font-weight:700; font-size:13px}
.file b{font-size:18px; line-height:1.25}
.file span{color:var(--ink-2); font-size:14px}
.file em{font-style:normal; font-weight:700; margin-top:10px; font-size:15px}
.know{background:var(--paper)}
.arts{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px}
.art{background:#fff; border:1px solid var(--line); border-radius:16px; padding:26px; display:flex; flex-direction:column}
.art small{color:var(--teal); font-weight:700; font-size:13px; margin-bottom:8px}
.art h3{margin-bottom:10px}
.art p{color:var(--ink-2); font-size:15.5px}
.art a{margin-top:auto; padding-top:16px; font-weight:700; color:var(--ink); text-decoration:underline; text-underline-offset:4px}
/* faq groups */
.faq{max-width:980px; margin:0 auto}
details.grp{border:1px solid var(--line); border-radius:16px; margin-bottom:12px; background:#fff; border-bottom:1px solid var(--line)}
details.grp:first-of-type{border-top:1px solid var(--line)}
details.grp > summary{padding:22px 60px 22px 24px; font-size:20px; font-variation-settings:"wdth" 112; display:flex; justify-content:space-between; gap:16px}
details.grp > summary::after{right:24px; top:15px}
details.grp > summary em{font-style:normal; color:var(--ink-2); font-weight:600; font-size:15px}
.qs{padding:0 24px 8px}
.qs details:first-of-type{border-top:1px solid var(--line)}
.qs details:last-of-type{border-bottom:0}
.qs summary{font-size:17px; padding:16px 40px 16px 0}
.qs summary::after{top:10px}
.qs p{padding:0 40px 18px 0}
.faq-tools{display:flex; justify-content:center; gap:12px; margin-bottom:28px}
/* footer */
footer .wrap{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px; align-items:start}
footer h3{color:#fff; font-size:15px; margin-bottom:10px; font-variation-settings:"wdth" 100}
footer p, footer li{margin:0 0 6px}
footer ul{list-style:none; margin:0; padding:0}
footer a:hover{color:var(--teal-bright)}
.social{display:flex; flex-wrap:wrap; gap:8px}
.social a{border:1px solid rgba(255,255,255,.3); border-radius:999px; padding:6px 14px; font-weight:600}
.legal{grid-column:1 / -1; border-top:1px solid rgba(255,255,255,.15); padding-top:18px; margin-top:8px}
@media (max-width:1020px){
  .sec-head{margin-bottom:36px}
  .kf{grid-template-columns:1fr 1fr}
  .cmp{table-layout:fixed} .cmp th,.cmp td{padding:12px 10px; font-size:14px; overflow-wrap:break-word; hyphens:auto} .cmp td.us small{font-size:13px}
  .cmp td:first-child, .cmp thead th:first-child{width:27%; font-size:13px}
  .cmp td:first-child{width:auto}
  .plus,.feat,.cards4,.dl,.arts{grid-template-columns:1fr; gap:20px}
  .cloud .shots{grid-template-columns:1fr} .shots .big{grid-column:auto}
  .tiers{grid-template-columns:1fr} .tier{border-right:0; border-bottom:1px solid var(--line)} .tier:last-child{border-bottom:0}
  .regions{grid-template-columns:1fr 1fr}
  footer .wrap{grid-template-columns:1fr}
}
@media (max-width:520px){ .kf{grid-template-columns:1fr} .cmp thead th.us{font-size:15px} details.grp > summary{font-size:18px; padding-left:18px} .qs{padding:0 18px 8px} }

/* article pages */
.article{max-width:820px; margin:0 auto; padding:72px 28px 96px}
.article .crumb{font-size:14px; color:var(--ink-2); margin-bottom:22px}
.article .crumb a{color:var(--teal); text-decoration:none}
.article .cat{color:var(--teal); font-weight:700; font-size:14px}
.article h1{font-size:clamp(30px,4vw,48px); margin:8px 0 20px; font-variation-settings:"wdth" 110}
.article .lead{font-size:clamp(19px,1.6vw,22px); color:var(--ink-2); margin-bottom:8px}
.article h2{font-size:clamp(22px,2.2vw,28px); margin:40px 0 12px; font-variation-settings:"wdth" 108}
.article p{margin:0 0 16px; font-size:18px; line-height:1.65}
.article .take{background:var(--paper); border-radius:16px; padding:26px 30px; margin:40px 0}
.article .take h2{margin-top:0}
.article .take ul{margin:0; padding-left:20px} .article .take li{margin-bottom:8px; font-size:17px}
.article .cta-box{background:var(--ink); color:#fff; border-radius:20px; padding:32px; margin-top:48px}
.article .cta-box h2{margin:0 0 8px; color:#fff} .article .cta-box p{color:#A9BEC4}
.article .more{margin-top:48px; border-top:2px solid var(--ink); padding-top:20px}
.article .more a{display:block; padding:10px 0; border-bottom:1px solid var(--line); font-weight:600; text-decoration:none}
.article .more a:hover{color:var(--teal)}
.notfound{text-align:center; padding:140px 28px}

/* language switcher */
.lang{position:relative; font-size:15px; font-weight:600}
.lang summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:6px; padding:9px 12px; border:1px solid var(--line); border-radius:999px; font-size:15px; white-space:nowrap}
.lang summary::-webkit-details-marker{display:none}
.lang summary::after{content:none}
.lang summary svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6}
.lang-menu{position:absolute; right:0; top:calc(100% + 8px); background:#fff; border:1px solid var(--line); border-radius:14px; padding:8px; min-width:190px; box-shadow:0 18px 40px -20px rgba(14,42,51,.45); z-index:30; display:grid}
.lang-menu a{padding:9px 12px; border-radius:8px; text-decoration:none; color:var(--ink)}
.lang-menu a:hover{background:var(--paper)}
.lang-menu a[aria-current]{color:var(--teal); font-weight:800}
details.lang{border:0}
@media (max-width:520px){ .lang summary span{display:none} .lang summary{padding:9px} }
.top .wrap{max-width:1400px; gap:20px}
.nav{gap:18px; font-size:14.5px}
@media (max-width:1300px){ .nav{display:none} .top .wrap{justify-content:space-between} .lang{margin-left:auto} }
@media (max-width:1560px){ html:not([lang="en"]) .nav{display:none} html:not([lang="en"]) .lang{margin-left:auto} }
/* translated pages: let long headings wrap */
html:not([lang="en"]) .sec-head h2{white-space:normal}
/* right-to-left */
[dir="rtl"] .nav{margin-left:0; margin-right:auto}
[dir="rtl"] .stage{text-align:right}
[dir="rtl"] .cmp th,[dir="rtl"] .cmp td{text-align:right}
[dir="rtl"] .specs li span:last-child{text-align:left}
[dir="rtl"] .fact{padding:34px 0 34px 28px; border-right:0; border-left:1px solid var(--line)}
[dir="rtl"] .fact + .fact{padding-right:28px}
[dir="rtl"] .fact:last-child{border-left:0}
[dir="rtl"] summary{padding:22px 0 22px 44px}
[dir="rtl"] summary::after{right:auto; left:6px}
[dir="rtl"] details.grp > summary{padding:22px 24px 22px 60px}
[dir="rtl"] details p{padding:0 0 24px 44px}
[dir="rtl"] .lang-menu{right:auto; left:0}
[dir="rtl"] .docs span{text-align:left}
[dir="rtl"] .tier{border-right:0; border-left:1px solid var(--line)}
[dir="rtl"] .tier:last-child{border-left:0}
[dir="rtl"] .num, [dir="rtl"] output{direction:ltr; unicode-bidi:isolate}
[dir="rtl"] body{font-family:"Noto Sans Arabic","Archivo",system-ui,sans-serif}
[lang="th"] body{font-family:"Noto Sans Thai","Archivo",system-ui,sans-serif}
[lang="zh"] body{font-family:"Archivo","PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif}
[lang="zh"] h1,[lang="zh"] h2,[lang="zh"] h3,[lang="zh"] .pname{letter-spacing:0}