/* ============================================================
   自架字型 — 不要改成 Google Fonts CDN
   ------------------------------------------------------------
   正式站與 dev 的 CSP 是 `style-src 'self' 'unsafe-inline'; font-src 'self' data:`
   （infra/Caddyfile:88、infra/Caddyfile.dev:44），外部字型主機一律被擋，
   實測 document.fonts.size = 0——CDN 寫了也是白寫，整站會退到系統字型。
   另外這個站在推銷歐盟法規資料，不適合把訪客 IP 送給 Google Fonts
   （LG Munchen I, 3 O 17493/20, 2022-01）。

   檔案由 scripts/build-landing-fonts.py 產生（subset 過，只含站上用到的字）。
   改內容之後要重跑，否則新字會逐字掉回系統字型。說明見 docs/guides/landing-fonts.md。
   ============================================================ */
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:300;font-display:swap;
  src:url("/fonts/plex-sans-300.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;
  src:url("/fonts/plex-sans-400.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:300;font-display:swap;
  src:url("/fonts/plex-mono-300.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("/fonts/plex-mono-400.woff2") format("woff2")}
@font-face{font-family:"Noto Sans TC";font-style:normal;font-weight:300;font-display:swap;
  src:url("/fonts/noto-sans-tc-300.woff2") format("woff2")}
@font-face{font-family:"Noto Sans TC";font-style:normal;font-weight:400;font-display:swap;
  src:url("/fonts/noto-sans-tc-400.woff2") format("woff2")}

/* ============================================================
   site.css — Animfy / Product Flow 全站共用樣式
   ------------------------------------------------------------
   為什麼有這支檔：landing 底下 17 支 HTML 原本各自內嵌一份 99–136 行
   的 CSS（零共用），改一次設計要改 18 次、而且一定會漂移。
   這支是唯一正本；頁面只留自己獨有的區塊樣式。

   引用方式：<link rel="stylesheet" href="/site.css">
   （blog/ 底下的文章同樣用絕對路徑 /site.css）

   內容：設計 token / 重置 / 字級 / 版面容器 / 進場動畫 /
         導覽列（含手機選單）/ 按鈕 / 頁尾 / 內文排版
   ============================================================ */

:root{
  --bg:#070A09; --bg-2:#0E1312;
  --ink:#F2F5F4; --ink-mid:#8D9895;
  /* 品牌綠取自簡報「PRODUCT」字樣的填色 #4B6E48。
     它在近黑底上只有 3.43:1，當文字不合格，所以另備一階亮的 --accent-t（8.9:1）。 */
  --accent:#4B6E48; --accent-t:#8FB886; --accent-rgb:143,184,134;
  --sage:#B2AC88; --warn:#D9A03E; --bad:#D96A5E;
  --line:rgba(242,245,244,.14); --line-2:rgba(242,245,244,.07);
  --r:4px; --r-lg:24px;
  /* 導覽列高度：它是 position:fixed，分屏的上內距要拿它當底線，
     所以做成變數，兩邊不會各自漂移。窄視窗的值在下面的 @media 覆寫。 */
  --nav-h:92px;
  --wrap:1280px; --pad:max(26px,calc((100vw - var(--wrap))/2));
  --sans:"IBM Plex Sans","Noto Sans TC",-apple-system,"Segoe UI","PingFang TC","Microsoft JhengHei",sans-serif;
  --serif:"Instrument Serif","Noto Serif TC",Georgia,"Songti TC","PMingLiU",serif;
  --mono:"IBM Plex Mono","Noto Sans TC",ui-monospace,Consolas,monospace;
  --font-display:var(--sans);   /* 標題字體，可由控制台切換 */
  --disp-w:400; --disp-ls:0em;
  --btn-r:999px;                /* 全圓（Ray 定案）。面板一律 4px，兩種圓角各司其職 */
}
/* 標題改用明體：中文網站少見，一上去就跟所有 AI 產物拉開距離。
   明體筆畫細，字重要往上帶一階、字距略放，否則深底上會虛掉。 */
[data-font="serif"]{--font-display:var(--serif);--disp-w:400;--disp-ls:.012em}
[data-font="sans"]{--font-display:var(--sans);--disp-w:400;--disp-ls:0em}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
html[data-snap="on"]{scroll-snap-type:y proximity}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

.t-display{font-family:var(--font-display);font-size:clamp(27px,2.9vw,40px);
  font-weight:var(--disp-w);letter-spacing:var(--disp-ls);line-height:1.3;margin:0}
.t-h2{font-family:var(--font-display);font-size:clamp(21px,2.1vw,29px);
  font-weight:var(--disp-w);letter-spacing:var(--disp-ls);line-height:1.45;margin:0}
.t-lead{font-size:clamp(16px,1.2vw,18.5px);line-height:1.82;color:var(--ink-mid);margin:0;
  font-weight:300;max-width:640px}
.t-micro{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mid)}
/* .wrap 只給「通欄橫條」用（導覽列、頁尾、首頁各區塊）：滿版寬度，左右留頁面邊距。
   ⚠️ 不要把 .wrap 跟任何自己有 max-width 的元件疊在同一個元素上。
   全站是 box-sizing:border-box，--pad 會從那個 max-width「裡面」扣掉——
   螢幕愈寬 --pad 愈大，內容欄反而愈窄，到 2560px 直接被扣成 0 而整個塌掉。
   要置中的閱讀欄請用 .doc（它自己有 max-width + margin-inline:auto + 左右留白），
   兩者不可同時掛。實例見 2026-08-18 的 .doc.wrap 事故。 */
.wrap{padding-left:var(--pad);padding-right:var(--pad);width:100%}


/* ============ 進場／轉場 ============ */
/* 進場升起淡入；離開視窗時反向淡出，捲回來再出現 */
/* 隱藏初態只在 html[data-anim] 之下生效，而那個屬性是由 JS 掛的。
   JS 沒跑到（載入失敗、被擋、腳本被砍掉）時整頁照樣看得見，不會變空白。 */
.rv{transition:opacity .68s cubic-bezier(.22,.61,.36,1),transform .68s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--d,0ms)}
html[data-anim] .rv{opacity:0;transform:translateY(22px)}
html[data-anim] .rv.in{opacity:1;transform:none}
html[data-anim] .rv.out{opacity:0;transform:translateY(-16px);transition-duration:.45s;transition-delay:0ms}
@media(prefers-reduced-motion:reduce){html[data-anim] .rv{opacity:1;transform:none;transition:none}}


/* ============ NAV（放大：字、logo、按鈕都加大） ============ */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;border-bottom:1px solid transparent;
  transition:background .3s,border-color .3s}
.nav.stuck{background:rgba(7,10,9,.74);backdrop-filter:saturate(1.3) blur(16px);border-bottom-color:var(--line)}
.nav-in{display:flex;align-items:center;gap:44px;height:var(--nav-h)}
.nav-logo img{height:34px;width:auto}
.nav-links{display:flex;gap:32px;font-size:15.5px;color:var(--ink-mid);font-weight:400}
.nav-links a{position:relative;padding:4px 0}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--ink);transition:right .28s}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{right:0}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:26px}
@media(max-width:900px){:root{--nav-h:76px}
  .nav-links{display:none}.nav-in{gap:12px}.nav-logo{flex:none}.nav-logo img{height:28px}}


/* ============ 手機選單 ============
   原本 900 以下只是把連結 display:none，等於手機完全沒有導覽。 */
.nav-toggle{display:none;width:42px;height:42px;margin-left:auto;border:1px solid var(--line);
  border-radius:var(--r);background:transparent;cursor:pointer;position:relative;flex:none}
.nav-toggle span{position:absolute;left:11px;right:11px;height:1px;background:var(--ink);
  transition:transform .28s cubic-bezier(.22,.61,.36,1),opacity .18s}
.nav-toggle span:nth-child(1){top:15px}
.nav-toggle span:nth-child(2){top:20px}
.nav-toggle span:nth-child(3){top:25px}
[data-menu="open"] .nav-toggle span:nth-child(1){transform:translateY(5px) rotate(45deg)}
[data-menu="open"] .nav-toggle span:nth-child(2){opacity:0}
[data-menu="open"] .nav-toggle span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
.nav-drawer{display:none}
@media(max-width:900px){
  .nav-toggle{display:block;margin-left:0}
  /* 「進入後台」不再只藏在選單裡：手機最上排直接跟漢堡鈕並排（Ray 2026-08-18）。
     語言切換仍然收起——320px 實測三顆並排會把 logo 擠成 0 寬並換行。 */
  .nav-right{display:flex;margin-left:auto;gap:0}
  .nav-right .lang{display:none}
  .nav-right .btn-sm{height:38px;padding:0 15px;font-size:13.5px}
  .nav-drawer{display:block;position:fixed;top:var(--nav-h);left:0;right:0;z-index:55;
    background:rgba(7,10,9,.97);backdrop-filter:saturate(1.3) blur(16px);
    border-bottom:1px solid var(--line);
    max-height:0;overflow:hidden;transition:max-height .34s cubic-bezier(.22,.61,.36,1)}
  [data-menu="open"] .nav-drawer{max-height:70svh;overflow:auto}
  .nav-drawer-in{padding:8px var(--pad) 26px}
  .nav-drawer a{display:block;padding:15px 0;font-size:17px;border-bottom:1px solid var(--line-2)}
  [data-menu="open"]{overflow:hidden}
  /* 語言切換：頂端列那顆 .lang 在這個斷點是 display:none（見上面，三顆並排會擠爆
     320px），於是 ≤900px 的訪客完全沒有辦法切語言。抽屜裡沒有那個限制——
     這裡橫向只有兩顆、各佔一半，320px 實測每顆 130px。
     做成兩顆明確的語言鈕而不是一顆 toggle：使用者要看得出「現在是哪一個」，
     狀態走 aria-pressed，樣式與無障礙同一個來源。 */
  .drawer-lang{display:flex;gap:8px;margin-top:18px}
  .drawer-lang-btn{flex:1;min-width:0;height:44px;border:1px solid var(--line);
    border-radius:var(--btn-r);background:transparent;color:var(--ink-mid);
    font-family:var(--sans);font-size:15px;font-weight:400;letter-spacing:.015em;
    cursor:pointer;transition:color .2s,border-color .2s,background .2s}
  .drawer-lang-btn[aria-pressed="true"]{color:var(--ink);
    border-color:rgba(242,245,244,.44);background:rgba(242,245,244,.06)}
  .drawer-lang-btn:focus-visible{outline:none;
    box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent-t)}
}
@media(max-width:360px){.nav-in{gap:8px}.nav-right .btn-sm{padding:0 12px}}
@media(prefers-reduced-motion:reduce){.nav-toggle span,.nav-drawer{transition:none}}

/* ============ 按鈕 ============
   三組主按鈕配色可切換（html[data-btn]）。米白是深底站最常見的做法，
   深橄欖壓在近黑上容易顯濁，所以預設走米白。 */
:root,[data-btn="cream"]{--btn-bg:#EFEBE3;--btn-fg:#0A0F0E;--btn-bg-h:#FFFEFA}
[data-btn="light"]{--btn-bg:#8FB886;--btn-fg:#07140F;--btn-bg-h:#A5CB9C}
[data-btn="olive"]{--btn-bg:#4B6E48;--btn-fg:#F4F7F3;--btn-bg-h:#5C8757}

/* 留白比例也影響質感：48px 高配 30px 左右內距，比原本的 24px 鬆一階 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:48px;padding:0 32px;border-radius:var(--btn-r);
  font-size:15px;font-weight:400;letter-spacing:.015em;
  border:1px solid transparent;white-space:nowrap;
  transition:background .2s ease,border-color .2s ease,color .2s ease,
             box-shadow .2s ease,transform .12s ease}
.btn-sm{height:40px;padding:0 20px;font-size:14px;gap:7px}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent-t)}

.btn-primary{background:var(--btn-bg);color:var(--btn-fg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 1px 2px rgba(0,0,0,.4), 0 8px 22px -12px rgba(0,0,0,.9)}
.btn-primary:hover{background:var(--btn-bg-h);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 2px 4px rgba(0,0,0,.4), 0 12px 26px -12px rgba(0,0,0,.95)}

.btn-ghost{border-color:rgba(242,245,244,.22);color:var(--ink)}
.btn-ghost:hover{border-color:rgba(242,245,244,.44);background:rgba(242,245,244,.06)}

.btn .arw{font-family:var(--mono);font-size:13px;opacity:.6;
  transition:transform .22s cubic-bezier(.22,.61,.36,1),opacity .22s}
.btn:hover .arw{transform:translateX(3px);opacity:.95}
@media(prefers-reduced-motion:reduce){.btn,.btn .arw{transition:none}}


.foot{border-top:1px solid var(--line);padding-block:40px 32px;font-size:13.5px;color:var(--ink-mid);font-weight:300}
.foot-in{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.foot a:hover{color:var(--ink)}

/* ============ 內文排版（blog 與法務頁用；首頁不需要） ============ */
.page{padding-block:132px 96px}
.page-head{max-width:820px;margin-bottom:44px}
.page-head .t-micro{display:block;margin-bottom:18px}
.page-head h1{font-size:clamp(28px,3vw,42px);font-weight:400;line-height:1.3;margin:0}
.page-head .sub{font-size:clamp(16px,1.2vw,18.5px);line-height:1.8;color:var(--ink-mid);
  font-weight:300;margin:18px 0 0;max-width:640px}

.prose{max-width:720px;font-size:16.5px;line-height:1.9;color:var(--ink-mid);font-weight:300}
.prose>*+*{margin-top:22px}
.prose h2{font-size:clamp(20px,1.9vw,25px);font-weight:400;line-height:1.5;color:var(--ink);
  margin-top:52px;padding-top:22px;border-top:1px solid var(--line)}
.prose h3{font-size:17.5px;font-weight:400;line-height:1.55;color:var(--ink);margin-top:34px}
.prose p{margin:0}
.prose a{color:var(--ink);border-bottom:1px solid var(--line-2);
  transition:border-color .18s}
.prose a:hover{border-bottom-color:var(--accent-t)}
.prose strong{color:var(--ink);font-weight:400}
.prose ul,.prose ol{margin:0;padding-left:20px}
.prose li+li{margin-top:9px}
.prose li::marker{color:var(--ink-mid);opacity:.6}
.prose blockquote{margin:0;padding-left:18px;border-left:2px solid var(--accent-t);
  color:var(--ink);font-size:17px}
.prose code{font-family:var(--mono);font-size:14px;color:var(--ink);
  background:rgba(242,245,244,.06);padding:2px 6px;border-radius:3px}
.prose pre{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);
  padding:18px;overflow-x:auto}
.prose pre code{background:none;padding:0;font-size:13px;line-height:1.7}
.prose hr{border:0;border-top:1px solid var(--line);margin-block:40px}
.prose img{border-radius:var(--r);border:1px solid var(--line)}
.prose figcaption{font-size:13px;color:var(--ink-mid);margin-top:9px}
.prose table{width:100%;border-collapse:collapse;font-size:14.5px}
.prose th,.prose td{text-align:left;padding:11px 14px 11px 0;
  border-bottom:1px solid var(--line-2);vertical-align:top}
.prose th{font-weight:400;color:var(--ink);font-family:var(--mono);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mid)}

/* 文章清單（blog 首頁） */
.post-list{border-top:1px solid var(--line);max-width:820px}
.post-item{display:block;padding:24px 0;border-bottom:1px solid var(--line-2)}
.post-item .d{font-family:var(--mono);font-size:11px;letter-spacing:.09em;color:var(--ink-mid)}
.post-item .t{font-size:19px;line-height:1.5;margin-top:7px;color:var(--ink)}
.post-item .x{font-size:14px;line-height:1.75;color:var(--ink-mid);margin-top:6px;font-weight:300}
.post-item:hover .t{color:var(--accent-t)}

@media(max-width:768px){
  .page{padding-block:104px 64px}
  .prose{font-size:16px}
  .prose h2{margin-top:40px}
}


/* ============ 雙語切換 ============
   沿用站上既有的機制（成對的 data-zh / data-en span、localStorage 鍵
   gs1tw_lang、?lang=en）。把它放進共用檔的用意：那 16 支頁面內文
   本來就已經是成對雙語 span，只要引用這支 CSS 就自動生效，
   完全不必動它們的內文。 */
body[data-lang="zh"] [data-en],
body[data-lang="en"] [data-zh]{display:none !important}
.lang{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;color:var(--ink-mid);
  background:none;border:0;cursor:pointer;padding:6px 2px}
.lang:hover{color:var(--ink)}
/* 中文標題的字身較滿，行高與字距要跟西文分開設定 */
body[data-lang="zh"] .t-display,
body[data-lang="zh"] .page-head h1{letter-spacing:0}
body[data-lang="en"] .t-display,
body[data-lang="en"] .page-head h1{letter-spacing:-.01em}


/* ============================================================
   內文相容層 — 給 about / blog / 法務頁用
   ------------------------------------------------------------
   刻意不改那 16 支的內文 markup（它們的成對雙語 span 一動就有風險），
   改成讓共用樣式認得它們既有的 class。全部收斂在 .doc 底下，
   不會跟首頁的同名 class（例如 .eyebrow）互相干擾。
   ============================================================ */
/* .doc 自己就是「置中的閱讀欄」：max-width + margin-inline:auto + 固定 26px 左右留白，
   所以它不需要、也不可以再加 .wrap（理由見上面 .wrap 的註解）。
   26px 是窄螢幕時不讓字貼邊的最小邊距，與 --pad 的下限一致；
   固定值而非 var(--pad)，才不會隨螢幕變寬把閱讀欄愈擠愈細。 */
.doc{padding-block:132px 96px;padding-inline:26px;max-width:820px;margin-inline:auto;
  font-size:16.5px;line-height:1.9;color:var(--ink-mid);font-weight:300}
.doc>*+*{margin-top:22px}

.doc .eyebrow{display:block;margin:0 0 16px;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mid)}
.doc h1{font-size:clamp(28px,3vw,40px);font-weight:400;line-height:1.32;color:var(--ink);margin:0}
.doc .lede{font-size:clamp(16px,1.2vw,18.5px);line-height:1.8;color:var(--ink-mid);
  font-weight:300;margin-top:18px;max-width:660px}
.doc h2{font-size:clamp(19px,1.8vw,24px);font-weight:400;line-height:1.5;color:var(--ink);
  margin-top:52px;padding-top:22px;border-top:1px solid var(--line)}
.doc h3{font-size:17px;font-weight:400;line-height:1.55;color:var(--ink);margin-top:32px}
.doc p{margin:0}
.doc strong{color:var(--ink);font-weight:400}
.doc a{color:var(--ink);border-bottom:1px solid var(--line-2);transition:border-color .18s}
.doc a:hover{border-bottom-color:var(--accent-t)}
.doc ul,.doc ol{margin:0;padding-left:20px}
.doc li+li{margin-top:9px}
.doc li::marker{color:var(--ink-mid)}
/* 行內 code 常常是網址或識別碼，中間沒有任何可斷點。
   gs1-digital-link-taiwan-manufacturers 那篇的
   `https://id.example.com/01/08712345678901/10/LOT2024A/21/SN00123`
   實測寬 541.2px，375px 手機上把整頁的 layout viewport 撐到 568px——
   不是那一行溢出而已，是整頁被縮小、要左右平移才看得完。
   規則只掛在 .doc code：那是唯一會塞長網址的地方，其餘排版碰不到。
   用 break-word 而不是 anywhere：兩者都會把塞不下的長字斷開，
   但 anywhere 連 min-content 也一起算進去，會讓 .doc table 的欄寬跟著縮
   （cookies.html 有 15 個 code 在表格裡）。break-word 不動內在尺寸。 */
.doc code{font-family:var(--mono);font-size:14px;color:var(--ink);
  background:rgba(242,245,244,.06);padding:2px 6px;border-radius:3px;
  overflow-wrap:break-word}
.doc table{width:100%;border-collapse:collapse;font-size:14.5px;display:block;overflow-x:auto}
.doc th,.doc td{text-align:left;padding:11px 16px 11px 0;border-bottom:1px solid var(--line-2);
  vertical-align:top}
.doc th{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-mid);font-weight:400;white-space:nowrap}
.doc hr{border:0;border-top:1px solid var(--line);margin-block:40px}

/* 頁尾的行動區塊 */
.doc .cta{margin-top:64px;padding-top:26px;border-top:1px solid var(--line)}
.doc .cta p{max-width:620px}
.doc .cta-btn{display:inline-flex;align-items:center;gap:9px;height:48px;padding:0 30px;
  margin-top:20px;border-radius:var(--btn-r);background:var(--btn-bg);color:var(--btn-fg);
  font-size:15px;border-bottom:0;letter-spacing:.015em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 8px 22px -12px rgba(0,0,0,.9)}
.doc .cta-btn:hover{background:var(--btn-bg-h);border-bottom:0}
.doc .arrow{font-family:var(--mono);font-size:13px;opacity:.6}

/* 文章／清單相關 */
.doc .back{display:inline-block;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;
  color:var(--ink-mid);border-bottom:0;margin-bottom:26px}
.doc .back:hover{color:var(--ink);border-bottom:0}
.doc .post{display:block;padding:24px 0;border-bottom:1px solid var(--line-2);border-bottom-color:var(--line-2)}
.doc .post h2,.doc .post h3{border-top:0;padding-top:0;margin-top:0;font-size:19px}
.doc .post:hover h2,.doc .post:hover h3{color:var(--accent-t)}
.doc .post-meta,.doc .meta-dim,.doc .updated{font-family:var(--mono);font-size:11px;
  letter-spacing:.08em;color:var(--ink-mid);opacity:.8}
.doc .cat,.doc .chip{display:inline-block;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-mid);
  border:1px solid var(--line);border-radius:999px;padding:3px 11px;margin-right:8px}
.doc .read-more{font-family:var(--mono);font-size:11.5px;color:var(--accent-t);border-bottom:0}
.doc .legal-banner{border:1px solid var(--line);border-radius:var(--r);padding:16px 20px;
  font-size:14px;background:rgba(242,245,244,.03)}
.doc .filters{display:flex;gap:10px;flex-wrap:wrap;margin-block:26px}
.doc .filters a,.doc .filters .chip{border-bottom:0}
.doc .filters .on{color:var(--ink);border-color:var(--ink)}
.doc .feat{padding:26px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.doc .posts{border-top:1px solid var(--line)}
.doc .hub-cta{margin-top:56px}

@media(max-width:768px){
  .doc{padding-block:104px 64px;font-size:16px}
  .doc h2{margin-top:40px}
}