/* 8-554 · /pricing /about 的 DS-8 页眉页尾 —— 由 pkg8554/mk8554.mjs 从 assets/ds8/land.css 机械抽取，别手改（改 land.css 后重跑生成器）。
   land.css 的 :root 变量（--ink 等）与 tokens.css 同名 ⇒ 这里改挂到 #topnav,#tn-sheet,#ft，正文照旧吃 tokens.css。 */
#topnav,#tn-sheet,#ft{--ink:#0F4C3F;--ink2:#08302A;--sand:#F3E7D3;--sand2:#FAF3E6;--red:#E63B2E;--red-act:#D22619;--gold:#F2C14E;--water:#7FB7D6;
  --disp:"Bricolage Grotesque","Instrument Sans",sans-serif;--sans:"Instrument Sans",sans-serif;--mono:"IBM Plex Mono",ui-monospace,monospace}
#topnav,#topnav *,#tn-sheet,#tn-sheet *,#ft,#ft *{box-sizing:border-box}
#topnav,#tn-sheet,#ft{color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
#topnav{position:fixed;z-index:96;left:0;right:0;top:0;display:flex;align-items:center;gap:10px;padding:18px 40px;pointer-events:none;
  transform:translateY(-110%);transition:transform .32s ease}
#topnav.on{transform:none}
#topnav>*{pointer-events:auto}
#topnav a{color:var(--ink);text-decoration:none}
.tn-brand{font:700 21px/1 var(--disp);letter-spacing:-.02em;background:rgba(250,243,230,.94);padding:11px 16px 12px;border-left:4px solid var(--red);box-shadow:0 10px 26px rgba(8,48,42,.12)}
.tn-links{margin-left:auto;display:flex;background:rgba(250,243,230,.94);box-shadow:0 10px 26px rgba(8,48,42,.12)}
.tn-links a{font:500 15px/1 var(--sans);padding:14px 16px}
.tn-links a:hover,.tn-links a:focus-visible{background:var(--sand);outline:none;text-decoration:underline;text-underline-offset:4px}
#topnav .tn-cta,#tn-sheet .tn-cta{font:700 15px/1 var(--disp);background:var(--ink);color:var(--sand2);padding:14px 18px}
#topnav .tn-cta:hover{background:var(--ink2)}
#topnav .tn-go,#tn-sheet .tn-go{font:700 19px/1 var(--disp);background:var(--red-act);color:var(--sand2);padding:12px 18px;white-space:nowrap;box-shadow:0 10px 26px rgba(8,48,42,.12)}
#topnav .tn-go:hover{background:var(--ink2)}
.tn-menu{display:none;margin-left:auto;font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);background:rgba(250,243,230,.94);border:0;padding:14px 16px;box-shadow:0 10px 26px rgba(8,48,42,.12);cursor:pointer}
#tn-sheet{position:fixed;z-index:95;left:12px;right:12px;top:66px;background:var(--sand2);box-shadow:0 18px 40px rgba(8,48,42,.2);display:flex;flex-direction:column;padding:6px 0}
#tn-sheet[hidden]{display:none}
#tn-sheet a{font:500 18px/1 var(--sans);color:var(--ink);text-decoration:none;padding:16px 20px;border-bottom:1px solid rgba(15,76,63,.12)}
#tn-sheet a.tn-cta{margin:12px 20px 8px;border:0;text-align:center}
#tn-sheet a.tn-go{margin:10px 20px 8px;border:0;text-align:center;color:var(--sand2);box-shadow:none}
#topnav :focus-visible,#tn-sheet :focus-visible,#ft :focus-visible{outline:2px solid var(--red);outline-offset:2px}
@media (max-width:960px){#topnav{padding:18px 20px}.tn-links a{padding:14px 10px}#topnav .tn-go{padding:12px 14px}}
@media (max-aspect-ratio:1/1),(max-width:760px){#topnav{padding:12px}.tn-links,#topnav .tn-cta,#topnav .tn-go{display:none}.tn-brand{font-size:18px;padding:10px 13px 11px}.tn-menu{display:block}}
@media (prefers-reduced-motion:reduce){#topnav{transition:none}}
.tn-brand:has(.tn-logo){display:flex;align-items:center;padding:6px 14px;border-left:0;background:none;box-shadow:none}
.logo-w .tn-brand:has(.tn-logo){padding:11px 16px}
.tn-logo{display:block;height:38px;width:auto}
.logo-w .tn-logo{height:28px}
.ft-logo{display:block;height:48px;width:auto}
.logo-w .ft-logo{height:40px}
@media (max-aspect-ratio:1/1),(max-width:760px){.tn-brand:has(.tn-logo){padding:5px 11px}.logo-w .tn-brand:has(.tn-logo){padding:9px 12px}.tn-logo{height:32px}.logo-w .tn-logo{height:24px}}
#ft{position:relative;overflow:hidden;background:var(--ink2);color:var(--sand);padding:88px 40px 32px;font-family:var(--sans)}
#ft a{color:var(--sand);text-decoration:none}
#ft a:hover,#ft a:focus-visible{color:var(--sand2);text-decoration:underline;text-underline-offset:4px}
.ft-plot{position:absolute;right:-10%;top:-46%;width:min(52vw,640px);height:auto;pointer-events:none}
.ft-plot path{fill:none;stroke:var(--red);stroke-width:.22;opacity:.45;stroke-linejoin:round}
.ft-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1.3fr) minmax(0,.8fr) minmax(0,1fr);gap:48px;max-width:1280px;margin:0 auto}
.ft-word{font:700 44px/1 var(--disp);letter-spacing:-.03em;display:inline-block;margin-bottom:18px}
.ft-brand p{margin:0 0 24px;max-width:34ch;font:400 16px/1.55 var(--sans);opacity:.8}
.ft-col b{display:block;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin:10px 0 18px}
.ft-col ul{list-style:none;margin:0;padding:0}
.ft-col li{margin:0 0 12px;font:400 16px/1.35 var(--sans)}
.ft-two{columns:2;column-gap:28px}
.ft-two li{break-inside:avoid}
.ft-social{display:flex;gap:10px}
.ft-ico{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1.5px solid rgba(243,231,211,.35)}
.ft-ico[data-soon]{opacity:.55;cursor:not-allowed}
#ft .ft-ico:hover{text-decoration:none;color:var(--sand)}
.ft-ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#topnav .sr,#tn-sheet .sr,#ft .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ft-base{position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;max-width:1280px;margin:64px auto 0;padding-top:22px;border-top:1px solid rgba(243,231,211,.16);background:var(--ink2);font:400 13px/1.5 var(--mono);letter-spacing:.02em;opacity:.7}
@media (max-width:980px){.ft-grid{grid-template-columns:1fr 1fr;gap:40px 28px}.ft-brand{grid-column:1/-1}}
@media (max-width:560px){#ft{padding:64px 20px 28px}.ft-grid{grid-template-columns:1fr 1fr}.ft-col:nth-of-type(1){grid-column:1/-1}.ft-word{font-size:38px}}
@media (max-width:560px){.ft-logo{height:40px}.logo-w .ft-logo{height:34px}}
.ft-a #ft{background:var(--sand2);color:var(--ink);padding-top:100px}
.ft-a #ft::before{content:"";position:absolute;left:0;right:0;top:0;height:16px;border-top:7px solid var(--ink);border-bottom:1.5px solid var(--ink);box-sizing:border-box}
.ft-a #ft a{color:var(--ink)}
.ft-a #ft a:hover,.ft-a #ft a:focus-visible{color:var(--ink2)}
.ft-a .ft-col b{color:var(--ink2)}
.ft-a .ft-col b::before{content:"";display:inline-block;width:8px;height:8px;background:var(--red);margin-right:9px;vertical-align:0}
.ft-a .ft-ico{border-color:rgba(15,76,63,.35)}
.ft-a #ft .ft-ico:hover{color:var(--ink)}
.ft-a .ft-plot path{opacity:.3}
.ft-a .ft-base{background:var(--sand2);border-top-color:rgba(15,76,63,.22);opacity:.78}
.ft-b #ft{background:#03110E;box-shadow:inset 0 1px 0 rgba(243,231,211,.5);padding-top:104px}
.ft-b #ft::before{content:"";position:absolute;left:0;right:0;top:1px;height:14px;pointer-events:none;
  background:repeating-linear-gradient(90deg,var(--red) 0 2px,transparent 2px 120px) 0 0/100% 14px no-repeat,repeating-linear-gradient(90deg,rgba(243,231,211,.42) 0 1px,transparent 1px 12px) 0 0/100% 7px no-repeat}
.ft-b .ft-base{background:#03110E}
.ft-ico:not([data-soon]):hover{border-color:currentColor}
body.ft-a{padding-top:86px}
@media (max-aspect-ratio:1/1),(max-width:760px){body.ft-a{padding-top:66px}}