/* ══════════════════════════════════════════════════════════════════
   BeBetter 銷售頁元件庫　sales-kit.css
   ──────────────────────────────────────────────────────────────────
   母版：ricky.tw/witness-wall-preview-8x2k（Ricky 親手精修的學員見證牆）
   規範：../../設計語言/BeBetter官網設計語言.md

   ⚠️ 字體與字級**不在這裡定義**。全站唯一標竿 = ricky.tw/bmr_tdee
   （Ricky 2026-08-08：「全網頁所有的文字跟字體，我都要按照 TDEE 的頁面當成標竿。」）
   → 字體吃 style.css :root 的 --sans / --mono，字級只用 --t-3xs…--t-glyph 八階。
   這支檔案負責的是**版面與元件**：不對稱、磚砌見證牆、大圖贈品、價格劃線、深色 band。
   銷售頁跟工具頁的差別靠這些做，不是靠換字體。

   用法：頁面最外層加 class="sk"，再視漏斗加調性 class：
     .sk.t-course  免費課程漏斗（磚橘，母版原色）
     .sk.t-live    直播漏斗（偏金褐，更「現場」）
     .sk.t-quiz    代謝檢測漏斗（偏赭紅，更「診斷」）
   → 同一套骨架，換主色與強調節奏，三條漏斗就不會長得一樣。
   ══════════════════════════════════════════════════════════════════ */

.sk{
  /* 見證牆母版的色票，逐字沿用 */
  --paper:#FBF5EC; --ink:#241C14; --body:#42372B; --muted:#6F6152;
  --brand:#C8481F; --brand2:#9E3714; --gold:#B07C34;
  --line:#E6D9C6; --card:#fff; --tint:#F6EADA; --warm:#FBF1E2;
  /* 深底專用的金：--gold 是為淺底調的，放到 #33261C 上只有 3.7:1 */
  --gold-dark-bg:#D3AE68;
  /* 螢光筆的洗色＝該調性 --gold 的 42%（同一個色，不是新色） */
  --hl-wash:rgba(176,124,52,.22);
  /* 字體與字階不在這裡定義——直接吃 style.css :root 的 --sans / --mono / --t-*，
     那一套就是 ricky.tw/bmr_tdee 的。Ricky 2026-08-08：「全網頁所有的文字跟字體，
     都要按照 TDEE 的頁面當成標竿。」銷售頁跟工具頁的差異改由**版面**做
     （不對稱、磚砌、大圖、價格劃線），不再由換字體做。 */
  --shadow-card:0 26px 64px -46px var(--sh-warm-4);
  --shadow-lift:0 34px 74px -44px var(--sh-warm-2);
  --shadow-deep:0 46px 90px -46px var(--sh-warm-3);
  --shadow-soft:0 10px 24px -18px var(--sh-warm);
  /* 半透明只有三個來源：暖棕陰影／深棕遮罩／主色光暈。不是新色，是這三個的不同濃度 */
  --sh-warm:rgba(120,70,30,.4); --sh-warm-2:rgba(120,70,30,.45);
  --sh-warm-3:rgba(120,70,30,.6); --sh-warm-4:rgba(120,70,30,.42);
  --sh-deep:rgba(90,50,20,.55); --scrim:rgba(36,26,16,.66);
  --glow-brand:rgba(200,72,31,.5); --glow-brand-0:rgba(200,72,31,0);
  --glow-brand-6:rgba(200,72,31,.6); --glow-brand-7:rgba(200,72,31,.7);

  /* 行高與字重也照 TDEE：1.9 行高、正常字重（原本 1.8/300 是見證牆的襯線設定，
     換成 PingFang 之後 300 會太細，中文在小字級下會糊掉） */
  font-family:var(--sans);color:var(--body);background:var(--paper);
  font-size:var(--t-sm);line-height:1.9;font-weight:400;-webkit-font-smoothing:antialiased;
  position:relative;
}
/* 三條漏斗各自的調性：只換主色，骨架不動 */
.sk.t-live{--brand:#B0631F;--brand2:#8A4B12;--gold:#9C7A3A;--hl-wash:rgba(156,122,58,.22);}
.sk.t-quiz{--brand:#B03A2E;--brand2:#8C2C22;--gold:#A87840;--hl-wash:rgba(168,120,64,.22);}

.sk *{box-sizing:border-box;margin:0;padding:0;}
.sk img{max-width:100%;display:block;}
/* 標題：跟 TDEE 一樣靠字重與字級做層級，不靠換字體家族 */
.sk h1,.sk h2,.sk h3{font-family:var(--sans);font-weight:900;line-height:1.35;
  letter-spacing:-.01em;text-wrap:balance;color:var(--ink);}
.sk .sec{max-width:1280px;margin:0 auto;padding:clamp(52px,8vw,104px) clamp(20px,5vw,48px);}
.sk .narrow{max-width:760px;margin:0 auto;}
.sk a:focus-visible,.sk button:focus-visible{outline:3px solid var(--brand);outline-offset:3px;}

/* ── 進場：一種而已 ────────────────────────────────────── */
.sk .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease;}
.sk .reveal.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){
  .sk .reveal{opacity:1;transform:none;transition:none;}
  .sk *{animation:none!important;}
}

/* ── 標記 ──────────────────────────────────────────────── */
.sk .kicker{font-family:var(--mono);font-size:var(--t-2xs);letter-spacing:.26em;font-weight:700;color:var(--brand2);margin-bottom:14px;}
.sk .eyebrow{display:inline-block;font-family:var(--mono);font-size:var(--t-2xs);letter-spacing:.24em;font-weight:700;
  color:var(--brand2);border:1px solid var(--line);border-radius:999px;padding:8px 18px;
  background:#fffc;margin-bottom:20px;}
/* 螢光筆：改用可斷行的背景做法（2026-08-08 修）。
   ⚠️ 原本是 ::after 絕對定位 ＋ white-space:nowrap ——nowrap 是為了不讓底線被斷行切成兩段，
   但那讓「已寄到你的信箱」這種長詞在 390px 手機上**無法斷行，直接把版面推寬**，
   實測 thanks／success／register 三頁都溢出、右邊字被切掉。
   background-image ＋ box-decoration-break:clone 可以跟著斷行走，每一段都有自己的底線，
   所以 nowrap 可以拿掉。高度與位置照樣用 em，中文全形字不會被切到。

   ⚠️ 換成 background 之後掃描器**第一次解得出螢光筆的真實對比**（舊的 ::after 疊層它解不出來，
   所以一直靜靜地放過）。實測 --brand 疊在 42% 洗色上只有 2.6–3.5:1，三個調性全部不合格。
   故：字色改 --brand2、洗色降到 22%。三調性實測 4.91／5.09／6.13:1，過 AA 內文標準。 */
.sk .hl{color:var(--brand2);
  background-image:linear-gradient(var(--hl-wash),var(--hl-wash));
  background-repeat:no-repeat;background-size:100% .16em;
  background-position:0 calc(100% - .1em);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;}

/* ── 權威 chip 列 ──────────────────────────────────────── */
.sk .creds{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;}
.sk .creds span{font-size:var(--t-2xs);font-weight:600;color:var(--brand2);background:#fff;
  border:1px solid var(--line);border-radius:999px;padding:6px 13px;}

/* ── 大數字（襯線）────────────────────────────────────── */
.sk .stats{display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,44px);margin-top:30px;}
.sk .sn{font-family:var(--sans);font-weight:900;font-size:clamp(var(--t-xl),4vw,var(--t-2xl));
  color:var(--ink);line-height:1;}
.sk .sn .su{font-size:var(--t-2xs);}
.sk .sl{font-size:var(--t-2xs);letter-spacing:.1em;color:var(--muted);margin-top:8px;}

/* ── 按鈕 ──────────────────────────────────────────────── */
.sk .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:16px 32px;border-radius:999px;font-weight:700;font-size:var(--t-sm);
  font-family:var(--sans);text-decoration:none;border:none;cursor:pointer;
  transition:transform .2s,box-shadow .2s;}
.sk .btn-p{background:var(--brand);color:#fff;box-shadow:0 14px 30px -12px var(--glow-brand-6);}
.sk .btn-p:hover{transform:translateY(-3px);}
.sk .btn-g{background:transparent;color:var(--brand2);box-shadow:inset 0 0 0 1.5px var(--line);}
.sk .btn-g:hover{box-shadow:inset 0 0 0 1.5px var(--brand);}
.sk .btn[disabled]{opacity:.45;cursor:not-allowed;transform:none!important;}
.sk .btn-note{font-size:var(--t-2xs);color:var(--muted);margin-top:12px;}

/* ── 解鎖條：深色＋脈衝光環＋金色推進箭頭（母版 .mm-unlock）──
   用在「隱藏任務」的狀態顯示：鎖住時灰、解鎖時脈衝。 */
.sk .unlock{display:flex;align-items:center;gap:12px;background:#1B120A;color:#fff;
  border-radius:14px;padding:15px 18px;margin:18px 0;}
.sk .unlock.live{animation:skpulse 2.2s ease-out infinite;}
@keyframes skpulse{0%{box-shadow:0 0 0 0 var(--glow-brand)}70%,100%{box-shadow:0 0 0 14px var(--glow-brand-0)}}
.sk .unlock .lk{font-size:var(--t-md);flex:none;}
.sk .unlock .ut{flex:1;min-width:0;}
.sk .unlock .ut b{font-family:var(--sans);font-size:var(--t-sm);display:block;}
.sk .unlock .ut span{display:block;font-size:var(--t-3xs);color:#C9B79E;margin-top:3px;}
.sk .unlock .go{font-size:var(--t-md);color:var(--gold-dark-bg);flex:none;animation:sknudge 1.3s ease-in-out infinite;}
@keyframes sknudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
.sk .unlock.done{background:linear-gradient(135deg,#2A5C46,#1E4433);}
.sk .unlock.done .go{color:#8FD6B0;animation:none;}

/* ── 倒數計時：真的會走完、走完才解鎖 ─────────────────── */
.sk .timer{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:16px 20px;box-shadow:var(--shadow-card);}
.sk .timer .tnum{font-family:var(--sans);font-weight:900;font-size:var(--t-xl);color:var(--brand);
  font-variant-numeric:tabular-nums;line-height:1;flex:none;}
.sk .timer .tlbl{font-size:var(--t-2xs);color:var(--muted);line-height:1.5;}
.sk .timer .tbar{flex:1;height:8px;background:#EFE1CD;border-radius:99px;overflow:hidden;min-width:60px;}
.sk .timer .tbar u{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--brand),var(--gold));border-radius:99px;
  transition:transform 1s linear;}

/* ── 前後對比 ──────────────────────────────────────────── */
.sk .ba{display:grid;grid-template-columns:1fr 1fr;gap:3px;background:var(--line);
  border-radius:20px;overflow:hidden;box-shadow:0 30px 60px -30px var(--sh-deep);}
.sk .ba figure{position:relative;margin:0;aspect-ratio:3/4;background:#efe3d2;overflow:hidden;}
.sk .ba img{width:100%;height:100%;object-fit:cover;}
.sk .ba figcaption{position:absolute;left:8px;top:8px;font-size:var(--t-3xs);font-weight:700;
  letter-spacing:.12em;color:#fff;background:var(--scrim);padding:3px 8px;border-radius:6px;}
.sk .ba figure:last-child figcaption{background:var(--brand);}

/* ── 數字亮點卡 ────────────────────────────────────────── */
.sk .hls{display:flex;gap:12px;flex-wrap:wrap;}
.sk .hcard{flex:1;min-width:104px;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:16px 12px;text-align:center;
  box-shadow:var(--shadow-soft);}
.sk .hcard b{font-family:var(--sans);font-weight:900;color:var(--brand);line-height:1;
  font-size:clamp(var(--t-lg),2.8vw,var(--t-xl));font-variant-numeric:tabular-nums;}
.sk .hcard .u{font-size:var(--t-3xs);}  /* .6em 在小父層會掉到 9.6px */
.sk .hcard .lbl{display:block;font-size:var(--t-3xs);color:var(--muted);margin-top:7px;line-height:1.3;}

/* ── XL → M 尺寸縮放 ──────────────────────────────────── */
.sk .asize{display:flex;align-items:center;justify-content:center;gap:20px;}
.sk .as-tag{font-family:var(--sans);font-weight:900;border:2px solid var(--brand);
  border-radius:14px;color:var(--brand);display:flex;align-items:center;justify-content:center;}
.sk .as-xl{width:96px;height:96px;font-size:var(--t-2xl);opacity:.55;}
.sk .as-m{width:62px;height:62px;font-size:var(--t-lg);background:var(--brand);color:#fff;}
.sk .as-arrow{font-size:var(--t-lg);color:var(--gold);}

/* ── 引言卡 ──────────────────────────────────────────────
   impeccable-disable side-tab -- 左側金色粗邊是「引言」的排版慣例（blockquote），
   不是拿來裝飾卡片的 accent bar；見證牆母版的學員引言就是這個做法。 */
.sk .pull{padding:22px 26px 20px;background:#fff;border-left:4px solid var(--gold);
  border-radius:0 14px 14px 0;font-family:var(--sans);font-weight:500;font-size:var(--t-md);
  color:var(--ink);position:relative;box-shadow:var(--shadow-soft);}
.sk .pull .qm{font-family:var(--sans);font-size:var(--t-2xl);color:var(--gold);position:absolute;
  top:26px;left:12px;line-height:0;opacity:.5;}
.sk .pull cite{display:block;font-family:var(--sans);font-style:normal;font-weight:500;
  font-size:var(--t-2xs);color:var(--muted);margin-top:12px;}

/* ── 見證磚牆 ──────────────────────────────────────────── */
.sk .wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,244px),1fr));gap:16px;}
.sk .tile{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  transition:transform .25s,box-shadow .25s;}
.sk .tile:hover{transform:translateY(-5px);box-shadow:0 18px 36px -20px rgba(120,70,30,.42);}
.sk .tile .ba{border-radius:0;box-shadow:none;gap:2px;}
.sk .tile figure{aspect-ratio:3/4;}
.sk .tile figcaption{left:7px;top:7px;font-size:var(--t-3xs);padding:2px 7px;}
.sk .tmeta{padding:13px 15px;display:flex;align-items:center;justify-content:space-between;gap:8px;}
.sk .tjob{font-family:var(--sans);font-weight:700;font-size:var(--t-sm);color:var(--ink);}
.sk .m-big{font-family:var(--sans);font-weight:900;font-size:var(--t-lg);color:var(--brand);line-height:1;}
.sk .m-u{font-size:var(--t-2xs);color:var(--muted);margin-left:4px;}
.sk .tile .m-u{font-size:var(--t-3xs);}

/* ── 價值堆疊表：把「值多少」逐條攤開，最後劃掉總價 ──── */
.sk .stack{background:#fff;border:1px solid var(--line);border-radius:20px;
  padding:clamp(22px,3vw,34px);box-shadow:var(--shadow-card);}
.sk .stack .srow{display:flex;align-items:flex-start;gap:14px;padding:15px 0;
  border-bottom:1px dashed var(--line);}
.sk .stack .srow:last-of-type{border-bottom:none;}
.sk .stack .si{font-size:var(--t-md);flex:none;width:40px;height:40px;border-radius:11px;
  background:var(--warm);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;}
.sk .stack .sb{flex:1;min-width:0;}
.sk .stack .sb b{display:block;font-family:var(--sans);font-size:var(--t-sm);color:var(--ink);}
.sk .stack .sb span{display:block;font-size:var(--t-2xs);color:var(--muted);margin-top:3px;line-height:1.65;}
.sk .stack .sv{font-family:var(--sans);font-weight:900;font-size:var(--t-sm);color:var(--brand2);
  flex:none;font-variant-numeric:tabular-nums;white-space:nowrap;}
.sk .stack .total{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin-top:18px;padding-top:18px;border-top:2px solid var(--ink);}
.sk .stack .total .tl{font-family:var(--sans);font-weight:900;font-size:var(--t-sm);color:var(--ink);}

/* ── 價格：先出現原價，再劃掉 ──────────────────────────
   .price-strike 進場時 <s> 的刪除線才畫過去（不是一開始就是劃掉的）。 */
.sk .price{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;}
.sk .price s{position:relative;text-decoration:none;font-family:var(--sans);font-weight:900;
  font-size:clamp(var(--t-lg),3.4vw,var(--t-2xl));color:var(--muted);opacity:.8;}
.sk .price s::after{content:"";position:absolute;left:-4px;right:-4px;top:52%;height:3px;
  background:var(--brand);border-radius:2px;transform:scaleX(0);transform-origin:left;
  transition:transform .55s cubic-bezier(.2,.8,.3,1) .35s;}
.sk .price.in s::after{transform:scaleX(1);}
.sk .price .now{font-family:var(--sans);font-weight:900;font-size:clamp(var(--t-xl),4.4vw,var(--t-glyph));
  color:var(--brand);line-height:1;opacity:0;transform:translateY(8px);
  transition:opacity .5s ease .8s,transform .5s ease .8s;}
.sk .price.in .now{opacity:1;transform:none;}
.sk .price .tagfree{font-family:var(--sans);font-size:var(--t-2xs);font-weight:700;color:#fff;
  background:var(--brand);border-radius:999px;padding:5px 14px;letter-spacing:.06em;}

/* ── 贈品展示：圖要大、價值要看得見 ───────────────────── */
.sk .gift{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(22px,3.4vw,44px);
  align-items:center;background:linear-gradient(160deg,#FDF6EA,#fff);
  border:1px solid var(--line);border-radius:24px;padding:clamp(24px,3.4vw,44px);
  box-shadow:var(--shadow-lift);}
.sk .gift-img{position:relative;}
.sk .gift-img img{width:100%;border-radius:16px;box-shadow:var(--shadow-deep);
  transform:rotate(-2deg);transition:transform .4s;}
.sk .gift:hover .gift-img img{transform:rotate(0) scale(1.02);}
.sk .gift-img .seal{position:absolute;right:-10px;top:-12px;background:var(--brand);color:#fff;
  font-family:var(--sans);font-weight:900;font-size:var(--t-2xs);border-radius:999px;
  padding:9px 15px;box-shadow:0 10px 24px -10px var(--glow-brand-7);transform:rotate(6deg);}

/* ── 團隊：不要只放一個人 ─────────────────────────────── */
.sk .team{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:14px;}
.sk .tm{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 14px;
  text-align:center;box-shadow:var(--shadow-soft);}
.sk .tm .av{width:64px;height:64px;border-radius:50%;margin:0 auto 10px;object-fit:cover;
  background:var(--warm);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:var(--t-lg);}
.sk .tm b{display:block;font-family:var(--sans);font-size:var(--t-sm);color:var(--ink);}
.sk .tm span{display:block;font-size:var(--t-3xs);color:var(--muted);margin-top:4px;line-height:1.5;}

/* ── 影片框 ────────────────────────────────────────────── */
.sk .vwrap{position:relative;border-radius:20px;overflow:hidden;background:#000;
  box-shadow:var(--shadow-deep);aspect-ratio:16/9;}
.sk .vwrap video,.sk .vwrap iframe{width:100%;height:100%;display:block;border:0;object-fit:cover;}

/* ── 章節底 ────────────────────────────────────────────── */
.sk .band-soft{background:linear-gradient(180deg,#fff,#FCF6EC);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.sk .band-dark{background:radial-gradient(120% 100% at 50% 0%,#33261C,#221A14);color:#F3E7D6;}
.sk .band-dark h2{color:#fff;} .sk .band-dark p{color:#D6C5B0;} .sk .band-dark .kicker{color:var(--gold-dark-bg);}

.sk .fine{text-align:center;font-size:var(--t-2xs);color:var(--muted);padding:28px 20px 56px;}

@media(max-width:860px){
  .sk .gift{grid-template-columns:1fr;}
  .sk .stack .srow{flex-wrap:wrap;}
}

/* ── 與 style.css 的彈窗／表單共存 ────────────────────────
   `.sk *{margin:0;padding:0}` 跟 style.css 的 `.popup`、`.field-row` 是**同特異度**
   （都是 0,1,0），而 sales-kit.css 後載入 → reset 會贏，彈窗變成沒有內距、
   表單失去置中。這裡把被吃掉的那幾條補回來。
   ⚠️ 只在 body 掛 .sk 的頁面才會撞到（live/register、vsl）；
      join/apply/book 只在內層 div 掛 .sk，彈窗不在作用域內，不受影響。 */
.sk .popup{padding:clamp(28px,5vw,44px);}
.sk .popup h2{margin-bottom:8px;}
.sk .popup p{margin-bottom:18px;}
.sk .popup .x{top:12px;right:16px;}
.sk .popup .field-row{margin:0 auto;}
.sk .field-row input{padding:15px 18px;}
/* 只給螢幕閱讀器的標籤（style.css 只有 .sr-h2，這裡補通用版） */
.sk .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* ── 見證牆的第二種排法：磚砌（masonry）────────────────────
   為什麼要有：學員見證是**真實截圖**，長寬比天生不一致。
   用 grid 排會出現高矮不齊＋最後一列開天窗（實測 13 張在 4 欄下缺 2 格）。
   改用 CSS columns，磚塊自己往上填，沒有空洞，也不用裁掉圖上的姓名與數字。 */
.sk .wall-mas{columns:4 244px;column-gap:16px;}
.sk .wall-mas .tile{break-inside:avoid;margin-bottom:16px;display:inline-block;width:100%;}
@media(max-width:900px){.sk .wall-mas{columns:2 160px;}}

/* ── 交付卡：感謝頁用「已經寄給你了」而不是「即將寄出」 ────
   收件匣的視覺提示（寄件者、主旨）比一句「已寄出」更能讓人真的去找信。 */
.sk .inbox{background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:clamp(20px,2.6vw,28px);box-shadow:var(--shadow-card);}
.sk .inbox .ihead{display:flex;align-items:center;gap:12px;
  padding-bottom:14px;border-bottom:1px dashed var(--line);}
.sk .inbox .iav{width:40px;height:40px;border-radius:11px;flex:none;background:var(--brand);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:var(--t-sm);}
.sk .inbox .ifrom b{display:block;font-size:var(--t-sm);font-weight:900;color:var(--ink);}
.sk .inbox .ifrom span{display:block;font-size:var(--t-3xs);color:var(--muted);}
.sk .inbox .isub{font-size:var(--t-sm);font-weight:700;color:var(--ink);margin-top:14px;}
.sk .inbox ul{list-style:none;margin-top:10px;}
.sk .inbox li{position:relative;padding:6px 0 6px 26px;font-size:var(--t-2xs);color:var(--body);}
.sk .inbox li::before{content:"📎";position:absolute;left:0;top:6px;}

/* ── 電子報訂閱入口 ────────────────────────────────────────
   Ricky 2026-08-07 定：凡是適合出現的頁面都要整合訂閱入口，不是只做一個孤立訂閱頁。
   感謝頁／成功頁是最適合的位置——人已經完成動作，這裡不搶主 CTA。 */
.sk .news{background:linear-gradient(160deg,var(--warm),#fff);border:1px solid var(--line);
  border-radius:24px;padding:clamp(22px,3vw,32px);text-align:center;box-shadow:var(--shadow-soft);}
.sk .news h3{font-size:var(--t-md);margin-bottom:6px;}
.sk .news p{font-size:var(--t-2xs);color:var(--muted);max-width:34em;margin:0 auto;}
.sk .news .newsrow{display:flex;gap:10px;max-width:460px;margin:16px auto 0;flex-wrap:wrap;
  justify-content:center;}
.sk .news input{flex:1;min-width:200px;padding:14px 18px;border-radius:999px;
  border:1.5px solid var(--line);background:#fff;font-family:var(--sans);
  font-size:var(--t-2xs);color:var(--ink);}
.sk .news input:focus{outline:none;border-color:var(--brand);}
.sk .news .newsnote{font-size:var(--t-3xs);color:var(--muted);margin-top:12px;}