/* ═══ VPS pages (vps.html, bdix-vps.html), owner 2026-10-30: "VPS pages ... don't design exactly the same as web hosting,
   these are different specs and a different thing". Same language as hosting.html + flat.css (light tone, hairlines,
   two-tone titles, dark product windows, FlyNode-style buttons) with server-specific parts: a typing terminal in the
   hero, a four-column plan table, an OS picker, a network panel, a BDIX route and a snapshots panel. ═══ */

/* Hero right: terminal + server card */
.vt{ width:100%; max-width:470px; margin:0 auto; border-radius:16px; background:#0A0A0A; color:#EDEDED; box-shadow:0 0 0 1px rgba(0,0,0,.4), 0 40px 80px -36px rgba(40,30,120,.55); overflow:hidden; }
.vt-bar{ height:40px; display:flex; align-items:center; gap:6px; padding:0 16px; border-bottom:1px solid rgba(255,255,255,.07); }
.vt-bar > i{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.16); }
.vt-bar span{ margin:0 auto; font:11.5px var(--mono); color:#6E6E6E; }
.vt-bar em{ font-style:normal; font:11px var(--mono); color:#6E6E6E; }
.vt-b{ margin:0; padding:16px 18px 18px; font:12.5px/1.75 var(--mono); color:#C9C9C9; white-space:pre-wrap; }
.vt-b .p{ color:var(--brand-on-dark); } .vt-b .c{ color:#fff; } .vt-b .o{ color:#8F8F8F; } .vt-b .g{ color:#5BD18B; }
.vt-b .ln{ display:block; opacity:0; transform:translateY(2px); transition:opacity .25s, transform .25s; } .vt-b .ln.on{ opacity:1; transform:none; }
.vt-cur{ display:inline-block; width:8px; height:14px; margin-left:2px; vertical-align:-2px; background:#EDEDED; animation:vtb 1s steps(1) infinite; }
@keyframes vtb{ 50%{ opacity:0; } }
.srv{ width:100%; max-width:470px; margin:0 auto; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:4px 14px; padding:16px 18px; border-radius:16px; background:var(--brand); color:#fff; box-shadow:0 30px 60px -36px rgba(40,30,120,.7); }
.srv-i{ grid-row:span 2; width:40px; height:40px; border-radius:10px; display:grid; place-items:center; background:rgba(255,255,255,.16); } .srv-i svg{ width:20px; height:20px; }
.srv b{ font-size:16px; font-weight:550; letter-spacing:-0.01em; }
.srv-st{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:500; color:#fff; background:rgba(255,255,255,.14); padding:4px 9px; border-radius:7px; }
.srv-st i{ width:7px; height:7px; border-radius:50%; background:#5BD18B; }
.srv-sp{ grid-column:2 / -1; display:flex; flex-wrap:wrap; gap:6px 14px; font:12px var(--mono); color:#DCD7FF; }

/* Plan table: four plans side by side, FlyNode style */
.vp-in{ position:relative; z-index:1; padding:104px 24px 104px; }
.vp-h{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px 24px; flex-wrap:wrap; }
.vp-h .px-t{ margin:8px 0 0; }
.vp-note{ display:inline-flex; align-items:center; gap:8px; font-size:13.5px; color:#55555C; }
.vp-note b{ font:500 12px var(--mono); color:#0E8A57; background:#E2F5EA; padding:4px 8px; border-radius:7px; }
.vpt{ margin-top:32px; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); background:#FAFAF8; border-radius:16px; box-shadow:0 0 0 1px var(--hl, #E5E8EB); overflow:hidden; }
.vpt-c{ position:relative; display:flex; flex-direction:column; padding:28px 24px 24px; }
.vpt-c + .vpt-c{ border-left:1px solid var(--hl, #E5E8EB); }
.vpt-c.pop{ background:#fff; box-shadow:inset 0 3px 0 var(--brand); }
.vpt-hd{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.vpt-hd b{ font-size:16.5px; font-weight:550; letter-spacing:-0.015em; color:#0A0A0A; }
.vpt-pop{ font-size:11px; font-weight:500; color:#fff; background:var(--brand); padding:3px 8px; border-radius:6px; white-space:nowrap; }
.vpt-pr{ margin-top:20px; display:flex; align-items:baseline; gap:4px; } .vpt-pr b{ font-size:44px; font-weight:550; letter-spacing:-0.045em; line-height:1; color:#0A0A0A; } .vpt-pr span{ font-size:14px; color:#8F8F96; }
.vpt-nt{ margin:8px 0 0; font-size:12.5px; color:#8F8F96; }
.vpt-key{ margin-top:20px; padding:12px 14px; border-radius:10px; background:var(--brand-soft); } .vpt-key b{ display:block; font-size:22px; font-weight:550; letter-spacing:-0.02em; color:var(--brand); } .vpt-key span{ font-size:12.5px; color:#6B5FD8; }
.vpt-c dl{ margin:18px 0 24px; display:grid; gap:0; }
.vpt-c dl div{ display:flex; justify-content:space-between; gap:10px; padding:10px 0; border-bottom:1px solid #EFEFEC; font-size:13.5px; } .vpt-c dl div:last-child{ border-bottom:0; }
.vpt-c dt{ display:flex; align-items:center; gap:8px; color:#66666D; } .vpt-c dt svg{ width:14px; height:14px; color:var(--brand); } .vpt-c dd{ margin:0; font-weight:550; color:#0A0A0A; }
.vpt-c .btn{ margin-top:auto; width:100%; height:46px; font-size:15px; }
.vpt-c .btn-ghost{ background:#fff; color:#0A0A0A; box-shadow:inset 0 0 0 1px var(--hl, #E5E8EB); }
.vp-inc{ margin-top:16px; display:flex; align-items:center; gap:6px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; } .vp-inc::-webkit-scrollbar{ display:none; }
.vp-inc .k{ flex:none; margin-right:4px; font:500 11px var(--mono); letter-spacing:.09em; text-transform:uppercase; color:#8F8F96; }
.vp-inc span:not(.k){ flex:none; display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 8px; border-radius:7px; background:#fff; box-shadow:inset 0 0 0 1px var(--hl, #E5E8EB); font-size:12px; color:#2A2A2E; white-space:nowrap; }
.vp-inc span:not(.k)::before{ content:""; width:11px; height:11px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.5l2.5 2.5L11 4.5' fill='none' stroke='%232FB463' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat; }
.vp-foot{ margin:14px 0 0; font-size:12.5px; color:#8F8F96; }

/* Six included items: the hairline fact grid in three columns */
.fg.g3{ grid-template-columns:repeat(3, 1fr); }
.fg.g3 .fg-c:not(:nth-child(4n+1)){ border-left:0; }
.fg.g3 .fg-c:not(:nth-child(3n+1)){ border-left:1px solid var(--hl); }
.fg.g3 .fg-c{ border-bottom:1px solid var(--hl); } .fg.g3 .fg-c:nth-last-child(-n+3){ border-bottom:0; }

/* Window: operating system picker */
.osw .os-g{ padding:14px; display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; background:#141416; }
.os{ display:flex; flex-direction:column; gap:6px; padding:12px; border-radius:10px; background:#1B1B1E; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); font-size:12.5px; color:#C9C9C9; }
.os b{ font-size:13px; font-weight:550; color:#EDEDED; } .os small{ font:11px var(--mono); color:#8F8F8F; }
.os.on{ background:rgba(110,93,242,.16); box-shadow:inset 0 0 0 1px rgba(167,156,255,.45); } .os.on small{ color:#C9C2FF; }
.os-ft{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px 14px; border-top:1px solid rgba(255,255,255,.07); background:#141416; font-size:12.5px; color:#8F8F8F; border-radius:0 0 14px 14px; }
.os-ft span:last-child{ font-weight:550; color:#fff; background:var(--brand-btn-dark); padding:6px 12px; border-radius:8px; }

/* Window: network panel (bars only, no invented numbers) */
.nw-b{ padding:16px; display:grid; gap:12px; background:#141416; border-radius:0 0 14px 14px; }
.nw-r{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px; border-radius:10px; background:#1B1B1E; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); font-size:13px; color:#C9C9C9; }
.nw-r b{ color:#EDEDED; font-weight:550; } .nw-r em{ font-style:normal; display:inline-flex; align-items:center; gap:6px; font-size:12px; color:#5BD18B; } .nw-r em i{ width:6px; height:6px; border-radius:50%; background:#5BD18B; }
.nw-bars{ display:flex; align-items:flex-end; gap:5px; height:92px; padding:12px; border-radius:10px; background:#1B1B1E; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
.nw-bars i{ flex:1; border-radius:3px 3px 1px 1px; background:rgba(167,156,255,.35); } .nw-bars i.h{ background:var(--brand-btn-dark); }
.nw-cap{ display:flex; justify-content:space-between; font:11px var(--mono); color:#6E6E6E; }

/* Window: BDIX route */
.rt-b{ padding:22px 18px; background:#141416; border-radius:0 0 14px 14px; display:grid; gap:16px; }
.rt-p{ display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:center; gap:8px; }
.rt-n{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 8px; border-radius:10px; background:#1B1B1E; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); text-align:center; font-size:12px; color:#8F8F8F; }
.rt-n b{ font-size:13px; font-weight:550; color:#EDEDED; } .rt-n.bd{ background:rgba(110,93,242,.16); box-shadow:inset 0 0 0 1px rgba(167,156,255,.45); } .rt-n.bd b{ color:#fff; }
.rt-a{ width:28px; height:2px; background:var(--brand-btn-dark); position:relative; } .rt-a::after{ content:""; position:absolute; right:-1px; top:-3px; border:4px solid transparent; border-left-color:var(--brand-btn-dark); }
.rt-ok{ display:flex; align-items:center; justify-content:center; gap:8px; padding:10px; border-radius:10px; background:rgba(47,180,99,.1); box-shadow:inset 0 0 0 1px rgba(91,209,139,.25); font-size:12.5px; color:#5BD18B; }

/* Window: snapshots */
.sn-b{ background:#141416; border-radius:0 0 14px 14px; }
.sn-a{ display:flex; gap:8px; padding:14px; border-bottom:1px solid rgba(255,255,255,.07); }
.sn-a span{ font-size:12.5px; font-weight:550; padding:7px 12px; border-radius:8px; color:#EDEDED; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); } .sn-a span:first-child{ background:var(--brand-btn-dark); color:#fff; box-shadow:none; }
.sn-r{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:11px 14px; font-size:12.5px; color:#A1A1A1; } .sn-r + .sn-r{ border-top:1px solid rgba(255,255,255,.06); } .sn-r b{ color:#EDEDED; font-weight:500; }

@media (max-width:1023px){ .vpt{ grid-template-columns:1fr 1fr; } .vpt-c:nth-child(3){ border-left:0; } .vpt-c:nth-child(n+3){ border-top:1px solid var(--hl, #E5E8EB); } .fg.g3{ grid-template-columns:1fr 1fr; } }
@media (max-width:719px){
  .vp-in{ padding:88px 16px; }
  .vpt{ grid-template-columns:1fr; } .vpt-c{ border-left:0 !important; } .vpt-c + .vpt-c{ border-top:1px solid var(--hl, #E5E8EB); }
  .fg.g3{ grid-template-columns:1fr; } .fg.g3 .fg-c{ border-left:0 !important; border-bottom:1px solid var(--hl) !important; } .fg.g3 .fg-c:last-child{ border-bottom:0 !important; }
  .osw .os-g{ grid-template-columns:1fr 1fr; } .rt-p{ grid-template-columns:1fr; } .rt-a{ width:2px; height:18px; margin:0 auto; } .rt-a::after{ right:-3px; top:auto; bottom:-6px; border-left-color:transparent; border-top-color:var(--brand-btn-dark); }
  .vt-b{ font-size:11.5px; min-height:0; }
}
@media (prefers-reduced-motion:reduce){ .vt-cur{ animation:none; } .vt-b .ln{ transition:none; } }
.rt-ok svg{ width:15px; height:15px; flex:none; }

/* ═══ Dedicated Servers (dedicated.html), same language, bare-metal parts: hardware spec sheet + delivery card in the
   hero, one grouped server table, a cores window and a managed-or-self panel ═══ */
.hw{ width:100%; max-width:470px; margin:0 auto; border-radius:16px; background:#0A0A0A; color:#EDEDED; box-shadow:0 0 0 1px rgba(0,0,0,.4), 0 40px 80px -36px rgba(40,30,120,.55); overflow:hidden; }
.hw-top{ display:flex; align-items:center; gap:14px; padding:18px; border-bottom:1px solid rgba(255,255,255,.07); }
.hw-ic{ width:44px; height:44px; flex:none; border-radius:11px; display:grid; place-items:center; background:rgba(110,93,242,.18); color:var(--brand-on-dark); } .hw-ic svg{ width:22px; height:22px; }
.hw-top b{ display:block; font-size:15px; font-weight:550; } .hw-top small{ font:11.5px var(--mono); color:#8F8F8F; }
.hw-top em{ margin-left:auto; font-style:normal; font:500 11px var(--mono); color:#C9C2FF; background:rgba(110,93,242,.16); padding:4px 8px; border-radius:6px; }
.hw dl{ margin:0; padding:6px 18px; }
.hw dl div{ display:flex; justify-content:space-between; gap:12px; padding:10px 0; font-size:13px; } .hw dl div + div{ border-top:1px solid rgba(255,255,255,.06); }
.hw dt{ color:#8F8F8F; } .hw dd{ margin:0; font-weight:500; color:#EDEDED; text-align:right; }
.hw-u{ display:grid; grid-template-columns:repeat(18, 1fr); gap:3px; padding:4px 18px 18px; } .hw-u i{ height:10px; border-radius:2px; background:var(--brand-btn-dark); opacity:.9; } .hw-u i:nth-child(odd){ opacity:.65; }
.dl{ width:100%; max-width:470px; margin:0 auto; display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:center; gap:8px; padding:14px 16px; border-radius:16px; background:var(--brand); color:#fff; }
.dl span{ display:flex; flex-direction:column; align-items:center; gap:2px; font-size:13px; font-weight:550; text-align:center; } .dl span small{ font:11px var(--mono); font-weight:400; color:#DCD7FF; }
.dl i{ width:22px; height:2px; background:rgba(255,255,255,.4); }

.dt{ margin-top:32px; background:#fff; border-radius:16px; box-shadow:0 0 0 1px var(--hl, #E5E8EB); overflow:hidden; }
.dt-g{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; padding:16px 22px; background:#FAFAF8; border-bottom:1px solid var(--hl, #E5E8EB); }
.dt-g + .dt-r, .dt-r + .dt-g{ } .dt-r + .dt-g{ border-top:1px solid var(--hl, #E5E8EB); }
.dt-g b{ font-size:15px; font-weight:550; color:#0A0A0A; } .dt-g em{ font-style:normal; font:500 11px var(--mono); color:var(--brand); background:var(--brand-soft); padding:3px 7px; border-radius:6px; } .dt-g span{ font-size:13px; color:#66666D; }
.dt-hd, .dt-r{ display:grid; grid-template-columns:minmax(0, 2.2fr) 1fr 1.2fr .9fr .9fr 120px; align-items:center; gap:14px; padding:0 22px; }
.dt-hd{ height:40px; font:500 11px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:#8F8F96; border-bottom:1px solid var(--hl, #E5E8EB); }
.dt-r{ min-height:68px; font-size:14px; color:#2A2A2E; transition:background .15s; } .dt-r + .dt-r{ border-top:1px solid #F0F0EC; } .dt-r:hover{ background:#FCFCFB; }
.dt-r .cpu b{ display:block; font-size:14.5px; font-weight:550; color:#0A0A0A; } .dt-r .cpu small{ font-size:12.5px; color:#8F8F96; }
.dt-r .pr b{ font-size:20px; font-weight:550; letter-spacing:-0.03em; color:#0A0A0A; } .dt-r .pr small{ font-size:12.5px; color:#8F8F96; }
.dt-r .btn{ height:40px; font-size:14px; padding:0 16px; width:100%; }
.dt-r .btn-ghost{ background:#fff; color:#0A0A0A; box-shadow:inset 0 0 0 1px var(--hl, #E5E8EB); }
.dt-r .k{ display:none; }
.dt-trust{ margin-top:16px; display:flex; flex-wrap:wrap; gap:8px 20px; font-size:13px; color:#55555C; } .dt-trust span{ display:inline-flex; align-items:center; gap:8px; } .dt-trust span::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--green); }

.cw-b{ padding:16px; background:#141416; border-radius:0 0 14px 14px; display:grid; gap:12px; }
.cw-g{ display:grid; grid-template-columns:repeat(12, 1fr); gap:4px; } .cw-g i{ aspect-ratio:1; border-radius:3px; background:var(--brand-btn-dark); } .cw-g i:nth-child(3n){ opacity:.75; }
.cw-l{ display:flex; justify-content:space-between; font:11.5px var(--mono); color:#8F8F8F; } .cw-l b{ color:#C9C2FF; font-weight:500; }
.mg-b{ padding:14px; background:#141416; border-radius:0 0 14px 14px; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.mg{ padding:14px; border-radius:10px; background:#1B1B1E; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); display:grid; gap:8px; font-size:12.5px; color:#A1A1A1; }
.mg b{ font-size:13.5px; font-weight:550; color:#EDEDED; } .mg.on{ background:rgba(110,93,242,.14); box-shadow:inset 0 0 0 1px rgba(167,156,255,.4); }
.mg span{ display:flex; align-items:center; gap:7px; } .mg span::before{ content:""; width:12px; height:12px; flex:none; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.5l2.5 2.5L11 4.5' fill='none' stroke='%235BD18B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; }

@media (max-width:1023px){
  .dt-hd{ display:none; }
  .dt-r{ grid-template-columns:1fr 1fr; gap:6px 16px; padding:16px 22px; } .dt-r .cpu{ grid-column:1 / -1; } .dt-r .k{ display:inline; font-size:12px; color:#8F8F96; margin-right:6px; } .dt-r .go{ grid-column:1 / -1; margin-top:6px; }
}
@media (max-width:719px){ .dt-g, .dt-r{ padding-left:16px; padding-right:16px; } .mg-b{ grid-template-columns:1fr; } .cw-g{ grid-template-columns:repeat(9, 1fr); } .dl{ grid-template-columns:1fr; } .dl i{ width:2px; height:12px; margin:0 auto; } }

/* ═══ VPS pricing, FlyNode sGTM style (owner, 2026-10-31: "make the price table identical to flynode sgtm pricing and add hover like flynode").
   Centred header, billing row, a hairline grid of four cards across the frame (gap-px on the hairline colour), the popular card white with a
   3px violet bar, lift + white + soft shadow on hover, an "Every plan includes" row under the grid. Replaces .vpt (kept above, unused). ═══ */
.sg .frame{ padding-left:0; padding-right:0; }
.sg-h{ position:relative; z-index:1; max-width:46rem; margin:0 auto; padding:112px 24px 0; text-align:center; }
.sg-k{ margin:0 0 16px; display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:#66666D; }
.sg-k i{ width:6px; height:6px; border-radius:2px; background:var(--brand); }
.sg-h h2{ margin:0; font-size:clamp(32px, 3.2vw, 44px); font-weight:550; line-height:1.1; letter-spacing:-0.035em; color:#0A0A0A; text-wrap:balance; }
.sg-h h2 span{ color:var(--brand); }
.sg-l{ margin:16px auto 0; max-width:36rem; font-size:16px; line-height:1.6; color:#66666D; text-wrap:balance; }
.sg-bill{ margin-top:32px; display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; }
.sg-seg{ display:inline-flex; align-items:center; gap:4px; padding:4px; border-radius:10px; background:#fff; box-shadow:0 0 0 1px var(--hl), 0 1px 2px rgba(35,38,44,.05); font-size:14px; font-weight:500; }
.sg-seg b{ padding:7px 18px; border-radius:7px; background:var(--brand); color:#fff; font-weight:500; }
.sg-seg em{ font-style:normal; padding:7px 14px; color:#66666D; }
.sg-ok{ padding:4px 8px; border-radius:7px; background:#E8F7EF; color:#0E7A4D; font-size:12px; font-weight:500; white-space:nowrap; }
.sg-g{ position:relative; z-index:1; margin-top:48px; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:1px; background:#DFE1E5; border-top:1px solid #DFE1E5; border-bottom:1px solid #DFE1E5; }
.sg-c{ position:relative; background:var(--pg, #F8F9FC); transition:translate .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease-out, background-color .3s ease-out; }
.sg-c.pop{ background:#fff; }
.sg-c:hover{ z-index:10; translate:0 -6px; background:#fff; box-shadow:0 0 0 1px #DFE1E5, 0 28px 50px -28px rgba(35,38,44,.38); }
.sg-bar{ position:absolute; inset:0 0 auto; height:3px; background:var(--brand); }
.sg-in{ height:100%; display:flex; flex-direction:column; padding:32px; opacity:0; transform:translateY(10px); transition:opacity .6s ease-out var(--d, 0ms), transform .6s cubic-bezier(.2,.7,.2,1) var(--d, 0ms); }
.sg-c.in .sg-in{ opacity:1; transform:none; }
.sg-hd{ display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:24px; }
.sg-hd h3{ margin:0; font-size:17px; font-weight:600; letter-spacing:-0.02em; color:#0A0A0A; }
.sg-pop{ padding:2px 8px; border-radius:6px; background:var(--brand); color:#fff; font-size:11.5px; font-weight:500; white-space:nowrap; }
.sg-sub{ margin:6px 0 0; min-height:40px; font-size:13.5px; line-height:1.4; color:#66666D; }
.sg-pr{ margin-top:24px; display:flex; align-items:baseline; gap:4px; }
.sg-pr b{ font-size:44px; font-weight:600; line-height:1; letter-spacing:-0.04em; color:#0A0A0A; font-variant-numeric:tabular-nums; }
.sg-pr span{ font-size:14px; color:#66666D; }
.sg-nt{ margin:8px 0 0; min-height:20px; font-size:12.5px; color:#66666D; }
.sg-key{ margin-top:20px; padding:10px 12px; border-radius:8px; background:#EEF0FF; }
.sg-key b{ display:block; font-size:20px; font-weight:600; line-height:1; letter-spacing:-0.02em; color:var(--brand); font-variant-numeric:tabular-nums; }
.sg-key span{ display:block; margin-top:4px; font-size:12px; color:rgba(91,76,232,.8); }
.sg-c ul{ list-style:none; margin:20px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; font-size:13.5px; color:rgba(10,10,10,.8); }
.sg-c li{ display:flex; align-items:flex-start; gap:10px; }
.sg .ck{ flex:none; width:16px; height:16px; margin-top:1px; color:#059669; }
.sg-go{ margin-top:auto; padding-top:28px; }
.sg-b{ display:inline-flex; align-items:center; justify-content:center; width:100%; height:44px; border-radius:8px; font-size:14px; font-weight:500; text-decoration:none; color:#0A0A0A; background:#fff; box-shadow:0 0 0 1px var(--hl, #E5E8EB), 0 1px 2px rgba(35,38,44,.06); transition:background-color .2s; }
.sg-b:hover{ background:var(--pg, #F8F9FC); }
.sg-b.p{ color:#fff; background:var(--brand); box-shadow:0 0 0 1px #4A3BD6, inset 1px 1px 2px rgba(199,196,255,.55), 0 6px 12px -6px rgba(91,76,232,.7); }
.sg-b.p:hover{ background:#4A3BD6; }
.sg-b:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
.sg-inc{ position:relative; z-index:1; display:flex; align-items:center; gap:16px; padding:24px 40px 104px; flex-wrap:wrap; }
.sg-inc p{ margin:0; flex:none; font-size:12px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:#66666D; }
.sg-inc ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.sg-inc li{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:6px; background:#fff; box-shadow:0 0 0 1px var(--hl, #E5E8EB); font-size:13px; color:rgba(10,10,10,.8); }
.sg-inc .ck{ width:14px; height:14px; margin:0; }
@media (max-width:1023px){ .sg-g{ grid-template-columns:1fr 1fr; } }
@media (max-width:719px){
  .sg-h{ padding:88px 16px 0; } .sg-g{ grid-template-columns:1fr; margin-top:40px; }
  .sg-in{ padding:28px 20px; } .sg-sub{ min-height:0; }
  .sg-inc{ flex-direction:column; align-items:flex-start; padding:24px 16px 88px; }
}
@media (prefers-reduced-motion:reduce){ .sg-c, .sg-in{ transition:none; } .sg-c:hover{ translate:none; } }
/* Band tone behind the pricing, like flynode.io/sgtm (owner, 2026-10-31: "table bg and body bg the same, not like flynode"):
   section #EEEFF2 with #DFE1E5 frame edges; cards stay paper, the popular card white */
.flat .sec.light.sg, .sec.light.sg{ background:#EEEFF2 !important; }
.sg .rails .in{ border-color:#DFE1E5 !important; }
.sg .sg-seg{ box-shadow:0 0 0 1px #DFE1E5, 0 1px 2px rgba(35,38,44,.05); }
.flat .sec.light.sg + .sec.light{ border-top-color:#DFE1E5; }
.sg + .sec.light, .sec.light + .sg{ border-top:1px solid #DFE1E5; }