/* ============================================================
   CPAP 单产品成交页 — 唯一样式档
   三语共用（/ 中文 · /en/ 英文 · /ms/ 马来文）。改这里，三版同时生效。
   绝不把样式内联回 HTML。

   设计语言来源：ResMed 官方（区域版医疗蓝）
   ref: brandup_os/drafts/ref_resmed_official_design.md
   ============================================================ */

:root{
  /* —— 主色：ResMed 医疗蓝 —— */
  --blue:        #0073E6;   /* 主色 / 连结 */
  --blue-dk:     #154172;   /* 深蓝：深色区块底 */
  --blue-mid:    #2467B2;   /* 中蓝 */
  --blue-pale:   #EAF3FD;   /* 淡蓝：卡片 / 强调底 */

  /* —— 中性 —— */
  --ink:         #0D0A15;   /* 标题 */
  --body:        #212529;   /* 正文 */
  --grey:        #6E6C73;   /* 次要文字 */
  --line:        #E3E6EA;   /* 描边 */
  --ground:      #F6F6F6;   /* 页面底 */
  --paper:       #FFFFFF;   /* 卡片 */

  /* —— 功能色 —— */
  --wa:          #25D366;   /* WhatsApp 绿：唯一的 CTA 色 */
  --wa-dk:       #1DA851;
  --save:        #C2410C;   /* 省下金额：暖橘，全站只用在价差 */

  /* 路径相对于「本 CSS 档」，不是 HTML —— SOP §10 头号陷阱 */
  --hero-photo:  url("../img/hero.jpg");
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

/* 中文字体 stack：Hiragino/STHeiti 必须在前。
   "PingFang SC" 放第一位会在 headless Chrome 渲染成空白（静默失败）。 */
body{
  /* 拉丁 Jakarta + 中文 Noto Sans SC。
     Jakarta 本身没有中文字符，先前中文一路 fallback 到系统预设——
     Mac 上是 Hiragino，Windows／Android 完全不可控（实测 2026-08-28）。
     Noto Sans SC 由 Google Fonts 提供，几何感与 Jakarta 相容。 */
  font-family:"Plus Jakarta Sans","Noto Sans SC","Hiragino Sans GB","STHeiti Medium",
              -apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  background:var(--ground);
  color:var(--body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
strong{font-weight:700}

.wrap{
  max-width:520px;margin:0 auto;background:var(--paper);
  min-height:100vh;box-shadow:0 0 40px rgba(13,10,21,.08);
  overflow:hidden;
}
section{padding:40px 24px}

h1,h2,h3{color:var(--ink);font-weight:600;line-height:1.2;letter-spacing:0}
h1{font-size:30px}
h2{font-size:23px;margin-bottom:6px}
h3{font-size:17px}
.lead{color:var(--grey);font-size:14.5px;margin-top:8px}
.eyebrow{
  font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:#0A57AE;margin-bottom:10px;   /* 实测 var(--blue) 在淡蓝底仅 4.08:1 */
}

/* ============================================================
   1. TOPBAR — sticky，永远可见的 CTA
   ============================================================ */
.topbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:10px;
  padding:6px 14px;background:rgba(255,255,255,.96);   /* 手机 sticky 头不宜过高 */
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--line);
}
.topbar .brand{display:flex;align-items:center;min-height:44px;font-weight:700;font-size:16px;color:var(--ink);white-space:nowrap}
.topbar .brand img{height:26px;width:auto}
.topbar .spacer{flex:1}
.topbar-cta{min-height:44px;padding:10px 17px;font-size:14.5px}  /* 触控目标不得低于 44px */

/* 语言切换：单一按钮 + 下拉。
   注意：站内有裸 details 规则（见 §FAQ），这里必须显式覆写，否则会多出 +/− 符号 */
.langsw{position:relative;border:none;padding:0;background:none}
.langsw summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;gap:5px;
  font-size:13px;font-weight:600;color:var(--body);
  padding:7px 11px;border:1px solid var(--line);border-radius:50px;
  line-height:1;white-space:nowrap;
}
.langsw summary::-webkit-details-marker{display:none}
.langsw summary::after{content:"▾";font-size:10px;color:var(--grey)}
.langsw .menu{
  display:none;
  position:absolute;right:0;top:calc(100% + 6px);min-width:132px;
  background:var(--paper);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 10px 28px rgba(13,10,21,.14);overflow:hidden;z-index:60;
}
.langsw[open] .menu{display:block}
.langsw .menu a{display:block;padding:10px 14px;font-size:14px}
.langsw .menu a:hover{background:var(--blue-pale)}
.langsw .menu a[aria-current="true"]{color:var(--blue);font-weight:700}

/* ============================================================
   按钮 — 官方规格：药丸型 radius 50px，固定高 54px
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:54px;padding:13px 25px;
  border-radius:50px;border:2px solid transparent;
  font-size:16px;font-weight:600;line-height:1;  /* line-height:1 —— 不继承 body 的 1.65 */
  text-align:center;cursor:pointer;
  transition:background .18s ease,border-color .18s ease,transform .1s ease;
}
.btn:active{transform:translateY(1px)}
.btn-wa{background:var(--wa);border-color:var(--wa);color:#fff}
.btn-wa:hover{background:var(--wa-dk);border-color:var(--wa-dk)}
.btn-ghost{background:transparent;border-color:var(--blue);color:var(--blue)}
.btn-ghost:hover{background:var(--blue-pale)}
.btn-block{display:flex;width:100%}
.btn svg{width:20px;height:20px;flex:none}

/* CTA 区块：按钮 + 号码当标题印出来（人会截图） */
.cta-unit{text-align:center}
.cta-unit .num{
  display:block;margin-top:12px;
  font-size:20px;font-weight:700;color:var(--ink);letter-spacing:.01em;
}
.cta-unit .sub{font-size:13px;color:var(--grey);margin-top:4px}

/* ============================================================
   2. HERO — 价格对比进首屏
   ============================================================ */
.hero{
  position:relative;padding:34px 24px 40px;
  background:linear-gradient(160deg,#0B2E52 0%,var(--blue-dk) 55%,#1B5A9E 100%);
  color:#fff;
}
.hero h1{color:#fff;font-size:29px}
.hero .lead{color:rgba(255,255,255,.82);font-size:15px}
.hero .btn-ghost{border-color:rgba(255,255,255,.55);color:#fff}
.hero .btn-ghost:hover{background:rgba(255,255,255,.12)}
.hero .cta-unit .num{color:#fff}
.hero .cta-unit .sub{color:rgba(255,255,255,.7)}

/* 首屏产品照 —— 原图纯白底，深蓝上必须用白卡承载，否则是一块突兀的白矩形 */
.hero-shot{margin:22px 0 0;background:#fff;border-radius:18px;padding:16px 16px 10px;
  box-shadow:0 10px 30px rgba(0,0,0,.18)}
.hero-shot img{width:100%;height:auto;border-radius:8px}
.hero-shot figcaption{margin-top:8px;text-align:center;font-size:11.5px;color:var(--grey);letter-spacing:.01em}

/* 价格对比卡：整页的心脏 */
.pricecmp{
  margin:22px 0 24px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);border-radius:18px;overflow:hidden;
}
.pricecmp .row{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.14);
}
/* 窄屏：金额换行到标签下方，避免标签被挤成四行（375px 实测） */
@media (max-width:430px){
  .pricecmp .row{flex-direction:column;align-items:flex-start;gap:4px}
  .pricecmp .val{align-self:flex-end}
}
.pricecmp .row:last-child{border-bottom:none}
.pricecmp .label{font-size:13.5px;color:rgba(255,255,255,.78);line-height:1.35}
.pricecmp .label small{display:block;font-size:11.5px;color:rgba(255,255,255,.74);margin-top:2px}
.pricecmp .val{font-size:21px;font-weight:700;white-space:nowrap}
.pricecmp .row.was .val{color:rgba(255,255,255,.62);text-decoration:line-through}
.pricecmp .row.ours{background:rgba(255,255,255,.07)}
.pricecmp .row.ours .val{font-size:27px}
.pricecmp .row.save{background:var(--save)}
.pricecmp .row.save .label{color:rgba(255,255,255,.9);font-weight:600}
.pricecmp .row.save .val{font-size:25px}

/* ============================================================
   通用元件
   ============================================================ */
.card{
  background:var(--paper);border:1px solid var(--line);border-radius:16px;
  padding:18px 18px 20px;
}
.card + .card{margin-top:12px}
.card h3{margin-bottom:5px}
.card p{font-size:14.5px;color:var(--grey)}

.ico{
  width:42px;height:42px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:var(--blue-dk);
  color:#fff;                /* 深底图标必须显式设 color，否则 currentColor 会继承近黑 */
  margin-bottom:12px;
}
.ico svg{width:21px;height:21px}

.band{background:var(--blue-pale)}
.band-dark{background:var(--blue-dk);color:#fff}
.band-dark h2,.band-dark h3{color:#fff}
.band-dark .lead,.band-dark p{color:rgba(255,255,255,.8)}
.band-dark .card{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16)}

/* 三步骤流程 */
.steps{counter-reset:s;margin-top:18px}
.step{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.step:last-child{border-bottom:none}
.step .n{
  counter-increment:s;flex:none;
  width:30px;height:30px;border-radius:50%;
  background:var(--blue);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;line-height:1;
}
.step .n::before{content:counter(s)}
.step h3{font-size:15.5px}
.step p{font-size:14px;color:var(--grey);margin-top:2px}

/* 规格表 */
.spec{width:100%;border-collapse:collapse;margin-top:16px;font-size:14.5px}
.spec th,.spec td{padding:11px 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.spec th{color:var(--grey);font-weight:500;width:46%}
.spec td{font-weight:600;color:var(--ink)}
.spec tr:last-child th,.spec tr:last-child td{border-bottom:none}

/* 卡片列 —— 平板两栏、桌面三栏。
   实测：先前 .grid3 只写在 CSS、HTML 没套用，桌面卡片被拉到 828px 宽 */
.grid3{margin-top:18px}
@media (min-width:768px){
  .grid3{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;align-items:start}
  .grid3 .card + .card{margin-top:0}
  .grid3 .card p{font-size:15px}
}
@media (min-width:1080px){
  .grid3{grid-template-columns:repeat(3,1fr);gap:16px}
}

/* 「我们多给什么」—— 表格右侧的优势在手机上要横滑才看得到，
   所以把它抽成独立区块，确保不滑也读得到 */
.extras{
  margin-top:20px;padding:20px;border-radius:16px;
  background:var(--paper);border:1px solid var(--line);
}
.extras h3{font-size:16px;line-height:1.45;margin-bottom:14px}
.extras-list{
  list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;
}
.extras-list li{
  font-size:13.5px;font-weight:600;color:#0A57AE;
  background:var(--blue-pale);border:1px solid #CFE3F8;
  padding:7px 12px;border-radius:50px;line-height:1;
}
.extras-list li::before{content:"＋ ";opacity:.7}
.extras-foot{margin-top:14px;font-size:14px;color:var(--grey);line-height:1.6}
.extras-foot strong{color:var(--ink)}
@media (min-width:1080px){ .extras{padding:26px} .extras h3{font-size:18px} }

/* 待补图片的占位框 —— 交付前必须替换成真实照片 */
.shot-todo{
  margin:20px 0;padding:28px 20px;border:1px dashed var(--line);border-radius:16px;
  background:var(--ground);text-align:center;
}
.shot-todo small{display:block;margin-top:10px;font-size:12px;color:var(--grey);line-height:1.55}

/* 市场比较表 —— 窄屏必须自己横向捲动，不能让页面横向溢出 */
.tablewrap{margin-top:18px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:14px;background:var(--paper)}
.cmp{border-collapse:collapse;min-width:640px;width:100%;font-size:13.5px}
.cmp th,.cmp td{padding:11px 13px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line)}
/* 平板：收紧内距让整张表塞得进 700px 版心，不必横滑（612 vs 640 只差 28px） */
@media (min-width:768px) and (max-width:1079px){
  .cmp{min-width:0}
  .cmp th,.cmp td{padding:10px 8px;font-size:13px}
}
.cmp thead th{background:var(--blue-dk);color:#fff;font-weight:600;
  white-space:nowrap;border-bottom:none}
.cmp tbody td:first-child{font-weight:600;color:var(--ink);white-space:nowrap}
.cmp tbody tr:last-child td{border-bottom:none}
.cmp tr.me td{background:var(--blue-pale);color:var(--ink)}
.cmp tr.me td:first-child{color:var(--blue)}
.note{font-size:12px;color:var(--grey);margin-top:10px;line-height:1.5}

/* 世代比较表：只有三栏，不需要 640px 最小宽度 */
.cmp.gen{min-width:0}
.cmp.gen td:first-child{font-weight:500;color:var(--grey);white-space:normal}
.cmp.gen .win{color:var(--ink);font-weight:700;background:rgba(0,115,230,.06)}
/* 手机：渠道比较表同样改成堆叠卡片。
   横滑在实机上常常滑不动（外层容器、浮动按钮、手势冲突都可能吃掉滑动），
   与其修横滑，不如不横滑。 */
@media (max-width:700px){
  .cmp.chan{min-width:0;display:block}
  .cmp.chan thead{display:none}
  .cmp.chan tbody,.cmp.chan tr{display:block}
  .cmp.chan tr{padding:16px 14px;border-bottom:1px solid var(--line)}
  .cmp.chan tr:last-child{border-bottom:none}
  .cmp.chan tr.me{background:var(--blue-pale)}
  .cmp.chan td{display:block;border:none;padding:0;white-space:normal}
  .cmp.chan td:first-child{
    font-size:16px;font-weight:700;color:var(--ink);margin-bottom:10px;
  }
  .cmp.chan tr.me td:first-child{color:var(--blue)}
  .cmp.chan td[data-l]{font-size:14px;line-height:1.5;margin-bottom:8px}
  .cmp.chan td[data-l]:last-child{margin-bottom:0}
  .cmp.chan td[data-l]::before{
    content:attr(data-l);display:block;
    font-size:11.5px;font-weight:700;letter-spacing:.06em;
    color:var(--grey);text-transform:uppercase;margin-bottom:2px;
  }
  .cmp.chan td.price{font-weight:700;font-size:17px;color:var(--ink)}   /* 用 class 而非语言字串，避免每加一个语言就要改 CSS */
}

/* 手机：三栏塞不下，改成每列一张卡，两代上下堆叠 —— 
   横滑会把「AirSense 11」这个主推栏推到画面外（375px 实测） */
@media (max-width:700px){
  .cmp.gen{min-width:0;display:block}
  .cmp.gen thead{display:none}
  .cmp.gen tbody,.cmp.gen tr{display:block}
  .cmp.gen tr{padding:14px 14px 6px;border-bottom:1px solid var(--line)}
  .cmp.gen tr:last-child{border-bottom:none}
  .cmp.gen td{display:block;border:none;padding:0}
  .cmp.gen td:first-child{
    font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    color:var(--grey);margin-bottom:8px;
  }
  .cmp.gen td[data-g]{
    display:flex;justify-content:space-between;align-items:baseline;gap:12px;
    padding:7px 10px;border-radius:8px;font-size:14px;margin-bottom:5px;
  }
  .cmp.gen td[data-g]::before{
    content:attr(data-g);flex:none;
    font-size:12px;font-weight:600;color:var(--grey);
  }
  .cmp.gen td[data-g]{text-align:right}
  .cmp.gen .win{background:rgba(0,115,230,.09)}
}

/* 信任条 */
.trust{display:flex;text-align:center;gap:8px;margin-top:20px}
.trust div{flex:1}
.trust .n{font-size:22px;font-weight:700;color:var(--ink);line-height:1.15}
.trust .t{font-size:12px;color:var(--grey);margin-top:3px;line-height:1.35}

/* ============================================================
   FAQ — 裸 details 选择器：任何新增的 <details> 都会被污染，
   新增时记得在自己的 class 覆写（.langsw 已处理）
   ============================================================ */
details{border-bottom:1px solid var(--line);padding:4px 0}
details:last-of-type{border-bottom:none}
details summary{
  list-style:none;cursor:pointer;position:relative;
  padding:11px 30px 11px 0;          /* 触控目标 ≥44px，实测原本仅 22px */
  min-height:44px;display:flex;align-items:center;
  font-size:15.5px;font-weight:600;color:var(--ink);line-height:1.45;
}
details summary:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}
details summary::-webkit-details-marker{display:none}
details summary::after{
  content:"+";position:absolute;right:2px;top:50%;transform:translateY(-50%);
  font-size:21px;font-weight:400;color:var(--blue);line-height:1;
}
details[open] summary::after{content:"–"}
/* 语言切换器不是 FAQ —— 必须在裸 details[open] 规则「之后」重新夺回箭头，
   否则展开时会变成减号（2026-08-20 实测踩到，与 CLIENT_WEB_REGISTRY 记录的陷阱同源）*/
.langsw summary::after,
.langsw[open] summary::after{content:"▾";position:static;font-size:10px;color:var(--grey)}
details p{margin:0 0 12px;font-size:14.5px;color:var(--grey)}

/* 浮动 WhatsApp — 对手没有，最便宜的转化提升 */
.fab{
  position:fixed;left:16px;right:16px;bottom:14px;z-index:70;
  box-shadow:0 8px 26px rgba(13,10,21,.26);
  transition:opacity .22s ease, transform .22s ease;
}
.fab-hide{opacity:0;transform:translateY(12px);pointer-events:none}
@media (prefers-reduced-motion:reduce){.fab{transition:none}}
@media (min-width:768px){
  .fab{left:auto;right:26px;bottom:26px;width:auto;padding:13px 27px}
}

.foot{
  padding:28px 24px 96px;background:#0B1B2B;color:rgba(255,255,255,.62);
  font-size:12.5px;line-height:1.65;
}
.foot strong{color:#fff;display:block;margin-bottom:6px;font-size:14px}
.foot .disc{
  margin-top:14px;padding-top:14px;
  border-top:1px solid rgba(255,255,255,.14);
  font-size:11.5px;color:rgba(255,255,255,.45);
}

/* 占位符 — 交付前必须全部清空，绝不可上线 */
.todo{
  background:#FFE8A3;color:#6B4A00;font-weight:700;
  padding:1px 7px;border-radius:5px;font-size:.92em;
  border:1px dashed #B08400;
}

/* ============================================================
   断点 — 桌面不是「手机版拉宽」，字级必须跟着放大
   ============================================================ */
@media (min-width:768px){
  .wrap{max-width:700px;margin:24px auto;border-radius:20px}
  section{padding:52px 44px}
  .hero{padding:46px 44px 52px;border-radius:20px 20px 0 0}
  h1,.hero h1{font-size:40px}
  h2{font-size:28px}
  .lead,.hero .lead{font-size:16px}
  .pricecmp .row.ours .val{font-size:32px}
}
@media (min-width:1080px){
  .wrap{max-width:980px;margin:40px auto;border-radius:24px}
  section{padding:72px 76px}
  .hero{padding:64px 76px 72px}
  /* 桌面：论述在左、产品在右，让客人第一眼同时看到「东西」和「价格」 */
  .hero-in{
    display:grid;column-gap:48px;align-items:start;
    grid-template-columns:1.02fr .98fr;
    grid-template-areas:"eyebrow shot" "h1 shot" "lead shot" "price shot" "cta shot";
  }
  .hero-in > .eyebrow{grid-area:eyebrow}
  .hero-in > h1{grid-area:h1}
  .hero-in > .lead{grid-area:lead}
  .hero-in > .hero-shot{grid-area:shot;margin-top:6px;position:sticky;top:0}
  .hero-in > .pricecmp{grid-area:price}
  .hero-in > .cta-unit{grid-area:cta}
  h1,.hero h1{font-size:52px;line-height:1.1}
  h2{font-size:34px}
  .lead,.hero .lead{font-size:17.5px}
  .lead{max-width:62ch}
  .hero .lead{max-width:56ch}
  .card{padding:24px}
  .card p,.spec,.step p,details p{font-size:15.5px}
  .trust .n{font-size:30px}
  .trust .t{font-size:13.5px}
  .pricecmp .val{font-size:25px}
  .pricecmp .row.ours .val{font-size:38px}
  .pricecmp .row.save .val{font-size:31px}
}

/* 窄屏：品牌文字让位，保住语言切换 + CTA。
   注意：只在「有 logo 图」时才隐藏文字，否则品牌会整个消失（2026-08-20 实测踩到）*/
@media (max-width:400px){
  .topbar .brand:has(img) span{display:none}
  .topbar .brand{font-size:15px;overflow:hidden;text-overflow:ellipsis;max-width:44%}
  .btn{font-size:15px;padding:13px 18px}
}