/* ============================================================
   VPNBQ — base.css
   Design tokens / reset / typography / buttons / header / footer
   Theme: "Line Cube" (线路魔方) — porcelain light
   ============================================================ */

:root{
  /* ---- 基底 / 面板层次 ---- */
  --bg:#F7F7F5;
  --bg-top:#FBFBF9;
  --bg-bottom:#ECECE7;
  --bg-panel:#FFFFFF;
  --bg-panel-2:#EEEEEA;
  --bg-panel-3:#F2F2EE;

  /* ---- 边框 / 分割线 ---- */
  --border:#E1E1DA;
  --border-soft:rgba(225,225,218,.75);
  --border-strong:#D2D2C9;

  /* ---- 强调色 ---- */
  --accent:#0E5E6F;
  --accent-2:#2A8C9C;
  --accent-dark:#0A4652;
  --accent-soft:rgba(14,94,111,.06);
  --on-accent:#FFFFFF;

  /* ---- 文字 ---- */
  --text:#16181A;
  --text-2:#5E6266;
  --text-3:#8A8F94;

  /* ---- 语义色 ---- */
  --success:#1F8A5B;
  --warn:#C58A12;
  --error:#B93A2E;

  /* ---- 石墨材质(装置) ---- */
  --graphite-hi:#2B2E33;
  --graphite-lo:#1C1F23;
  --graphite-body:#13151A;
  --tile-ink:#B6BAC0;
  --tile-ink-dim:#8D9298;

  /* ---- 半透白高光 ---- */
  --hl-06:rgba(255,255,255,.06);
  --hl-08:rgba(255,255,255,.08);
  --hl-14:rgba(255,255,255,.14);
  --hl-28:rgba(255,255,255,.28);
  --hl-btn:rgba(255,255,255,.18);
  --shade-18:rgba(0,0,0,.18);
  --shade-08:rgba(0,0,0,.08);

  /* ---- 强调色 tint ---- */
  --tint-05:rgba(14,94,111,.05);
  --tint-06:rgba(14,94,111,.06);
  --tint-10:rgba(14,94,111,.10);
  --tint-16:rgba(14,94,111,.16);
  --tint-cta:rgba(14,94,111,.38);
  --tint-glow:rgba(42,140,156,.55);
  --ink-shadow:rgba(22,24,26,.10);

  /* ---- 旗帜色 ---- */
  --flag-red:#C8102E;
  --flag-blue:#1F3F7A;
  --flag-green:#1E8A4C;
  --flag-edge:rgba(22,24,26,.14);

  /* ---- 签名:彩虹渐变细边 ---- */
  --rainbow:linear-gradient(90deg,#C77D8C 0%,#C9A24A 25%,#5FAF8A 50%,#2A8C9C 75%,#7A6FC9 100%);

  /* ---- 字体栈 ---- */
  --font-display:Georgia,'Songti SC','Noto Serif CJK SC','Source Han Serif SC','Times New Roman',serif;
  --font-body:'Inter','Noto Sans SC','PingFang SC','Microsoft YaHei',system-ui,-apple-system,sans-serif;
  --font-mono:'JetBrains Mono','SFMono-Regular',Menlo,Consolas,'Noto Sans SC',monospace;

  /* ---- 圆角 ---- */
  --r-sm:6px;
  --r-md:8px;
  --r-lg:10px;
  --r-pill:999px;

  /* ---- 尺寸节奏 ---- */
  --nav-h:72px;
  --gutter:40px;
  --wrap-max:1280px;

  /* ---- 带色柔影 ---- */
  --shadow-panel:0 1px 0 var(--hl-28) inset,0 0 0 1px var(--border),0 20px 44px -22px var(--tint-16),0 8px 18px -12px var(--tint-10);
  --shadow-soft:0 1px 0 var(--hl-28) inset,0 8px 20px -14px var(--ink-shadow);
  --shadow-raised:0 1px 0 var(--hl-28) inset,0 12px 28px -14px var(--tint-16);
}

/* ============================================================
   Reset
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 16px);
}
body{
  background:var(--bg);
  color:var(--text);
  font:400 15px/1.6 var(--font-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
  min-height:100%;
}
img,svg{max-width:100%}
svg{display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
strong{font-weight:600;color:var(--text)}
em{font-style:normal}
ul,ol{list-style:none}
code,kbd,samp{
  font-family:var(--font-mono);
  font-size:.92em;
  overflow-wrap:anywhere;
  word-break:break-word;
}
pre{
  font-family:var(--font-mono);
  font-size:13px;
  line-height:1.7;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  max-width:100%;
  background:var(--bg-panel-2);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:14px 16px;
  color:var(--text);
}
pre code{overflow-wrap:normal;word-break:normal;white-space:pre}
hr{border:0;border-top:1px solid var(--border);margin:28px 0}
::selection{background:var(--tint-16);color:var(--text)}

/* ---- 键盘焦点可见 ---- */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[role="tab"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:var(--r-sm);
}

/* ============================================================
   版心与工具类
   ============================================================ */
.wrap{
  max-width:var(--wrap-max);
  margin:0 auto;
  padding-inline:var(--gutter);
  padding-block:0;
  width:100%;
}
.wrap-narrow{max-width:880px}
.wrap-wide{max-width:1440px}

.sr-only{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.no-break{white-space:nowrap}
.hi{color:var(--accent)}
.mono{font-family:var(--font-mono)}
.muted{color:var(--text-2)}

/* 区块纵向节奏:只声明纵向,横向留白归 .wrap */
.sec{padding-top:88px;padding-bottom:88px}
.sec-sm{padding-top:56px;padding-bottom:56px}
.sec-lg{padding-top:112px;padding-bottom:112px}
.sec-tight{padding-top:40px;padding-bottom:56px}

.sec-head{max-width:720px}
.sec-head .eyebrow{margin-bottom:14px}
.eyebrow{
  font:500 12px/1 var(--font-mono);
  letter-spacing:.08em;
  color:var(--text-3);
  text-transform:uppercase;
}

/* ============================================================
   排版层级
   ============================================================ */
h1,h2,h3,h4{font-weight:400;color:var(--text)}
h1{
  font-family:var(--font-display);
  font-size:clamp(52px,5.2vw,68px);
  line-height:1.12;
  letter-spacing:-.02em;
}
h2{
  font-family:var(--font-display);
  font-size:clamp(30px,3vw,38px);
  line-height:1.22;
  letter-spacing:-.015em;
}
h3{
  font-size:20px;
  line-height:1.35;
  font-weight:500;
  letter-spacing:-.005em;
}
h4{
  font-size:16px;
  line-height:1.4;
  font-weight:600;
}
.lede{
  font-size:17px;
  line-height:1.7;
  color:var(--text-2);
  max-width:560px;
}
.lede strong{color:var(--text);font-weight:600}
.prose{max-width:760px;min-width:0}
.prose p{margin:14px 0;color:var(--text-2);line-height:1.8}
.prose p strong{color:var(--text)}
.prose h2{margin:40px 0 14px}
.prose h3{margin:28px 0 10px}
.prose ul,.prose ol{margin:14px 0 14px 20px;color:var(--text-2);line-height:1.8}
.prose ul li{list-style:disc}
.prose ol li{list-style:decimal}
.prose li{margin:6px 0}
.prose a{color:var(--accent);border-bottom:1px solid var(--tint-16)}
.prose a:hover{border-bottom-color:var(--accent)}
.prose > .data-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;min-width:0}
.prose blockquote{margin:20px 0;padding:12px 18px;border-left:3px solid var(--accent-2);background:var(--bg-panel-2);border-radius:0 var(--r-md) var(--r-md) 0;color:var(--text-2)}

/* ============================================================
   按钮
   ============================================================ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  height:auto;
  padding:11px 22px;
  border-radius:var(--r-md);
  font-size:15px;
  font-weight:500;
  white-space:nowrap;
  flex-shrink:0;
  transition:transform .15s,box-shadow .15s,border-color .15s,color .15s;
}
.btn svg{width:14px;height:14px;flex-shrink:0}
.btn-primary{
  color:var(--on-accent);
  background:linear-gradient(135deg,var(--accent-2),var(--accent));
  box-shadow:inset 0 1px 0 var(--hl-btn),0 12px 24px -10px var(--tint-cta);
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 var(--hl-btn),0 16px 28px -10px var(--tint-cta)}
.btn-secondary{
  color:var(--on-accent);
  background:linear-gradient(135deg,var(--accent),var(--accent-dark));
  box-shadow:inset 0 1px 0 var(--hl-btn),0 10px 20px -12px var(--tint-cta);
}
.btn-secondary:hover{transform:translateY(-1px)}
.btn-ghost{
  color:var(--text);
  background:var(--bg-panel);
  border:1px solid var(--border);
  box-shadow:0 1px 0 var(--hl-28) inset,0 8px 18px -12px var(--ink-shadow);
}
.btn-ghost:hover{border-color:var(--accent-2);color:var(--accent)}
.btn-quiet{
  color:var(--accent);
  background:transparent;
  border:1px solid var(--tint-16);
}
.btn-quiet:hover{background:var(--accent-soft);border-color:var(--accent-2)}
.btn-sm{min-height:34px;padding:7px 14px;font-size:13.5px;border-radius:var(--r-sm)}
.btn-block{width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none}
.btn-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

/* ============================================================
   徽章 / 标签 / 事实胶囊
   ============================================================ */
.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:30px;
  padding:4px 12px 4px 11px;
  border-radius:var(--r-pill);
  border:1px solid transparent;
  background:linear-gradient(var(--bg-panel),var(--bg-panel)) padding-box,var(--rainbow) border-box;
  font-size:13px;
  color:var(--text-2);
  max-width:100%;
  box-shadow:0 8px 20px -14px var(--tint-16);
}
.badge b{font-weight:500;color:var(--text)}
.badge-dot{width:6px;height:6px;border-radius:50%;background:var(--accent-2);flex-shrink:0}
.badge svg{width:12px;height:12px;color:var(--text-3);flex-shrink:0}

.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 11px;
  border-radius:var(--r-pill);
  border:1px solid var(--border);
  background:var(--bg-panel);
  font-size:12.5px;
  color:var(--text-2);
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
}
.chip.is-on{background:var(--accent-soft);border-color:var(--tint-16);color:var(--accent)}
.chip-row{display:flex;flex-wrap:wrap;gap:8px}

.fact-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 12px;
  border-radius:var(--r-sm);
  background:var(--bg-panel-2);
  border:1px solid var(--border-soft);
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.01em;
  color:var(--text-2);
  max-width:100%;
  overflow:hidden;
}
.fact-pill b{color:var(--text);font-weight:600}
.fact-row{display:flex;flex-wrap:wrap;gap:8px}

/* 小圆点状态 */
.dot{width:7px;height:7px;border-radius:50%;background:var(--success);flex-shrink:0;box-shadow:0 0 0 3px rgba(31,138,91,.14)}
.dot-warn{background:var(--warn);box-shadow:0 0 0 3px rgba(197,138,18,.14)}
.dot-idle{background:var(--text-3);box-shadow:0 0 0 3px rgba(138,143,148,.14)}

/* ============================================================
   面板 / 卡片
   ============================================================ */
.panel{
  background:var(--bg-panel);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-panel);
  padding:26px 26px 28px;
  min-width:0;
}
.panel-flat{
  background:var(--bg-panel);
  border-radius:var(--r-lg);
  border:1px solid var(--border);
  padding:22px 22px 24px;
  min-width:0;
}
.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.panel-head h3{margin-bottom:4px}
.panel-note{font-size:13px;color:var(--text-3)}

/* 图标底板(参考站 SDK 图标语汇) */
.ic-plate{
  width:40px;height:40px;
  border-radius:var(--r-md);
  display:grid;place-items:center;
  color:var(--tile-ink);
  background:linear-gradient(160deg,var(--graphite-hi),var(--graphite-lo));
  box-shadow:inset 0 0 0 1px var(--hl-08),inset 0 1px 0 var(--hl-14),0 8px 16px -8px var(--ink-shadow);
  flex-shrink:0;
}
.ic-plate svg{width:20px;height:20px}
.ic-plate-lg{width:48px;height:48px}
.ic-plate-lg svg{width:24px;height:24px}
.ic-plate-sm{width:32px;height:32px;border-radius:var(--r-sm)}
.ic-plate-sm svg{width:16px;height:16px}
.ic-plate.is-accent{
  background:linear-gradient(160deg,var(--accent-2),var(--accent));
  color:var(--on-accent);
  box-shadow:inset 0 0 0 1px var(--hl-28),0 12px 22px -10px var(--tint-cta);
}

/* ============================================================
   顶栏(header.js 注入)
   ============================================================ */
.top{
  position:relative;
  z-index:10;
  height:var(--nav-h);
  border-bottom:1px solid var(--border-soft);
  background:var(--bg-top);
}
.top-inner{height:100%;display:flex;align-items:center;gap:24px}
.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto;min-width:0}
.brand img{width:26px;height:26px;flex-shrink:0}
.brand-en{font:600 17px/1 var(--font-body);letter-spacing:.01em;color:var(--text);white-space:nowrap}
.brand-zh{font-size:13px;color:var(--text-3);font-weight:400;white-space:nowrap}

.nav{margin-left:auto;flex:0 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.nav::-webkit-scrollbar{display:none}
.nav ul{
  display:flex;
  align-items:center;
  gap:2px;
  list-style:none;
  margin:0;
  padding:0;
  flex-wrap:nowrap;
}
.nav-a{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 11px;
  border-radius:var(--r-md);
  font-size:14px;
  color:var(--text-2);
  white-space:nowrap;
  transition:color .15s,background-color .15s;
}
.nav-a svg{width:15px;height:15px;color:var(--text-3);flex-shrink:0}
.nav-a:hover{color:var(--text);background:var(--bg-panel-2)}
.nav-a.is-active{color:var(--text);background:var(--bg-panel);box-shadow:inset 0 0 0 1px var(--border)}
.nav-a.is-active svg{color:var(--accent)}

.top-tools{display:flex;align-items:center;gap:12px;flex:0 0 auto;margin-left:auto}
.lang-wrap{position:relative}
.lang{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  min-height:36px;
  padding:8px 8px;
  font-size:13px;
  color:var(--text-2);
  border-radius:var(--r-sm);
  white-space:nowrap;
}
.lang:hover{color:var(--text);background:var(--bg-panel-2)}
.caret{font-size:11px;color:var(--text-3)}
.lang-menu{
  position:absolute;
  top:calc(100% + 6px);
  right:0;
  min-width:150px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-panel);
  padding:6px;
  display:none;
  z-index:30;
}
.lang-menu.is-open{display:block}
.lang-menu a{
  display:flex;
  align-items:center;
  min-height:36px;
  padding:8px 10px;
  border-radius:var(--r-sm);
  font-size:13.5px;
  color:var(--text-2);
}
.lang-menu a:hover{background:var(--bg-panel-2);color:var(--text)}
.lang-menu a[aria-current="true"]{color:var(--accent);background:var(--accent-soft)}

.btn-login{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:8px 16px;
  border-radius:var(--r-md);
  font-size:14px;
  font-weight:500;
  color:var(--text);
  background:var(--bg-panel);
  border:1px solid var(--border);
  box-shadow:0 1px 0 var(--hl-28) inset,0 6px 14px -8px var(--ink-shadow);
  white-space:nowrap;
}
.btn-login:hover{border-color:var(--accent-2);color:var(--accent)}

/* 汉堡 */
.burger{
  display:none;
  min-width:44px;
  min-height:44px;
  align-items:center;
  justify-content:center;
  border-radius:var(--r-sm);
  color:var(--text);
  border:1px solid var(--border);
  background:var(--bg-panel);
}
.burger:hover{border-color:var(--accent-2);color:var(--accent)}
.burger svg{width:20px;height:20px}

/* 抽屉 */
.drawer{
  display:none;
  position:absolute;
  top:var(--nav-h);
  left:0;
  right:0;
  background:var(--bg-panel);
  border-bottom:1px solid var(--border);
  box-shadow:0 24px 40px -24px var(--ink-shadow);
  max-height:calc(100dvh - var(--nav-h));
  overflow-y:auto;
  overscroll-behavior:contain;
  z-index:25;
  padding:10px 0 16px;
}
.drawer.is-open{display:block}
.drawer a{
  display:flex;
  width:100%;
  align-items:center;
  gap:10px;
  min-height:48px;
  padding:12px var(--gutter);
  font-size:15px;
  color:var(--text-2);
  border-bottom:1px solid var(--border-soft);
}
.drawer a:hover,.drawer a.is-active{color:var(--accent);background:var(--accent-soft)}
.drawer a svg{width:16px;height:16px;flex-shrink:0;color:var(--text-3)}
.drawer .drawer-label{
  display:block;
  padding:14px var(--gutter) 6px;
  font:500 11.5px/1 var(--font-mono);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text-3);
}
.drawer-veil{
  display:none;
  position:fixed;
  inset:var(--nav-h) 0 0 0;
  background:rgba(22,24,26,.32);
  z-index:20;
}
.drawer-veil.is-open{display:block}
html.nav-open{overflow:hidden}

/* ============================================================
   页脚(footer.js 注入)
   ============================================================ */
.site-foot{
  border-top:1px solid var(--border);
  background:var(--bg-bottom);
  margin-top:0;
}
.foot-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1.1fr;
  gap:36px;
  padding-top:56px;
  padding-bottom:40px;
}
.foot-brand{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.foot-brand img{width:24px;height:24px}
.foot-brand span{font:600 16px/1 var(--font-body);color:var(--text)}
.foot-desc{font-size:13.5px;line-height:1.7;color:var(--text-2);max-width:320px}
.foot-h{
  font:500 11.5px/1 var(--font-mono);
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--text-3);
  margin-bottom:14px;
}
.foot-list li{margin:0 0 9px}
.foot-list a{font-size:13.5px;color:var(--text-2)}
.foot-list a:hover{color:var(--accent)}
.foot-tags{display:flex;flex-wrap:wrap;gap:7px}
.foot-tags a{
  display:inline-block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  padding:4px 10px;
  border-radius:var(--r-pill);
  border:1px solid var(--border);
  background:var(--bg-panel);
  font-size:12px;
  color:var(--text-2);
}
.foot-tags a:hover{border-color:var(--accent-2);color:var(--accent)}
.foot-langs{display:flex;flex-wrap:wrap;gap:8px}
.foot-langs a{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:5px 11px;
  border-radius:var(--r-pill);
  border:1px solid var(--border);
  background:var(--bg-panel);
  font-size:12.5px;
  color:var(--text-2);
}
.foot-langs a:hover{border-color:var(--accent-2);color:var(--accent)}
.foot-langs a[aria-current="true"]{color:var(--accent);border-color:var(--tint-16);background:var(--accent-soft)}
.foot-bottom{
  border-top:1px solid var(--border);
  padding-top:18px;
  padding-bottom:26px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  font-size:12.5px;
  color:var(--text-3);
}
.foot-legal{display:flex;flex-wrap:wrap;gap:16px}
.foot-legal a{color:var(--text-3)}
.foot-legal a:hover{color:var(--accent)}

/* ============================================================
   滚动淡入(可见性逻辑反转:.reveal 默认可见)
   ============================================================ */
.reveal{transition:opacity .5s ease,transform .5s ease}
.reveal.pending{opacity:0;transform:translateY(16px)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal,.reveal.pending{opacity:1;transform:none;transition:none}
}

/* ============================================================
   窄屏防御
   ============================================================ */
@media (max-width:1560px){
  .top-inner{gap:16px}
  .nav ul{gap:0}
  .nav-a{padding:8px 8px}
}
@media (max-width:1024px){
  :root{--gutter:32px}
  .nav{display:none}
  .burger{display:inline-flex}
  .top-tools{margin-left:auto}
  .foot-grid{grid-template-columns:1fr 1fr;gap:28px}
}
@media (max-width:768px){
  :root{--gutter:22px;--nav-h:64px}
  .sec{padding-top:64px;padding-bottom:64px}
  .sec-lg{padding-top:76px;padding-bottom:76px}
  h1{font-size:clamp(28px,7.4vw,40px)}
  h2{font-size:clamp(24px,5.6vw,30px)}
  .lede{font-size:15.5px}
}
@media (max-width:640px){
  :root{--gutter:18px}
  .no-break{white-space:normal}
  .foot-grid{grid-template-columns:1fr;gap:26px;padding-top:40px}
  .foot-bottom{flex-direction:column;align-items:flex-start;gap:12px}
  .badge{white-space:normal;line-height:1.4}
  .chip-row{gap:6px}
  .btn{width:100%}
  .btn-row{flex-direction:column;align-items:stretch;gap:10px}
  .btn-row .btn{width:100%}
  .tilt,.tilt-sm{transform:none !important}
}
@media (max-width:360px){
  :root{--gutter:16px}
}

/* 装饰性微倾斜:禁止作用在长内容容器上,窄屏一律归零 */
.tilt{transform:rotate(-.45deg)}
.tilt-sm{transform:rotate(.3deg)}

/* ============================================================
   悬浮 CTA(本站常驻)
   ============================================================ */
.float-cta{
  position:fixed;
  right:28px;
  bottom:calc(28px + env(safe-area-inset-bottom,0px));
  z-index:20;
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:42px;
  padding:10px 18px;
  border-radius:var(--r-pill);
  font-size:14px;
  font-weight:500;
  color:var(--on-accent);
  background:linear-gradient(135deg,var(--accent-2),var(--accent));
  box-shadow:inset 0 1px 0 var(--hl-btn),0 12px 26px -10px var(--tint-cta);
  white-space:nowrap;
}
.float-cta:hover{transform:translateY(-1px)}
.float-cta svg{width:15px;height:15px;flex-shrink:0}
body:has(.float-cta)::after{
  content:'';
  display:block;
  height:calc(88px + env(safe-area-inset-bottom,0px));
}
@media (max-width:640px){
  .float-cta{right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));padding:10px 15px;font-size:13.5px}
}