:root {
  --wrap:1200px;
  --header-h:64px;
  --h1:64px;
  --h2:44px;
  --h2-compact:32px;
  --h3:22px;
  --body:16px;
  --body-lead:18px;
  --body-ui:14px;
  --small:12px;
  --s1:8px;
  --s2:16px;
  --s3:24px;
  --s4:32px;
  --s5:48px;
  --s6:64px;
  --s7:128px;
  --ink:#1d2320;
  --muted:#66716b;
  --line:#e3e8e5;
  --paper:#ffffff;
  --mist:#f4f7f5;
  --night:#131614;
  --night2:#1b1f1c;
  --night3:#232825;
  --nline:#2c322e;
  --ntext:#eef2ef;
  --nmuted:#98a39d;
  --jade:#098456;
  --jade-ink:#ffffff;
  --jade-soft:#7fdcb5;
  --jade-hover:#08734b;
  --jade-wash:#16382a;
  --black:#000000;
  --code-bg:#0e100f;
  --footer-bg:#0c0e0d;
  --footer-line:#1f2421;
  --brand-muted:#c4ccc7;
  --nav-ink:#e9eeeb;
  --badge-muted:#c9d1cc;
  --mail-ink:#cfd7d2;
  --toggle-off:#3a413c;
  --warning:#f0a36b;
  --demo-red:#e53238;
  --demo-blue:#0064d2;
  --demo-yellow:#f5af02;
  --demo-green:#86b817;
  --demo-netflix:#e50914;
  --shadow:rgba(19,22,20,.45);
  --soft-shadow:rgba(19,22,20,.35);
  --photo-shade:rgba(19,22,20,.55);
  --transparent:rgba(19,22,20,0);
  --glass:rgba(255,255,255,.96);
  --overlay:rgba(19,22,20,.65);
  --radius-control:999px;
  --radius-card:20px;
  --r1:10px;
  --r2:var(--radius-card);
  --pill:var(--radius-control);
  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Noto Sans SC","Microsoft YaHei","Segoe UI",sans-serif;
  --mono:"SF Mono",ui-monospace,Menlo,Consolas,"Roboto Mono",monospace;
}
* { box-sizing:border-box; margin:0; padding:0; }
html { background:var(--paper); scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + var(--s4)); }
body { font-family:var(--sans); color:var(--ink); font-size:var(--body); line-height:1.7; -webkit-font-smoothing:antialiased; min-width:320px; }
a { color:inherit; text-decoration:none; }
button,input,textarea { font:inherit; }
button { cursor:pointer; border:0; }
button:disabled { cursor:wait; opacity:.6; }
input,textarea { min-width:0; }
img,svg { max-width:100%; }
[hidden] { display:none !important; }
a:focus-visible,button:focus-visible,summary:focus-visible { outline:2px solid var(--jade); outline-offset:4px; }
input:focus,textarea:focus { outline:1px solid var(--ink); outline-offset:-2px; border-color:var(--ink); box-shadow:none; }
.wrap { width:min(var(--wrap),calc(100% - 48px)); margin:0 auto; }
.mono { font-family:var(--mono); letter-spacing:0; white-space:nowrap; }
.skip-link { position:fixed; top:8px; left:8px; z-index:150; padding:8px 16px; border-radius:var(--r1); background:var(--paper); color:var(--ink); transform:translateY(-160%); }
.skip-link:focus { transform:none; }
.top { background:var(--night); color:var(--ntext); height:var(--header-h); position:sticky; top:0; z-index:50; }
.top .wrap { height:var(--header-h); display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:flex; align-items:center; gap:12px; color:var(--paper); font-weight:700; font-size:var(--h3); letter-spacing:-.02em; flex:none; }
.brand img,.brand svg { width:32px; height:32px; display:block; flex:none; }
.nav { display:flex; align-items:center; gap:32px; font-size:var(--body-ui); color:var(--nav-ink); font-weight:500; }
.nav a { white-space:nowrap; }
.nav a:hover { color:var(--paper); }
.nav > a:not(.pill),.nav-drawer > a { padding:6px 12px; }
.nav > a[aria-current="page"]:not(.pill),.nav-drawer > a[aria-current="page"] { color:var(--jade-soft); padding-inline:12px; }
.lang-wrap { position:relative; flex:none; }
.lang { display:inline-flex; align-items:center; position:relative; gap:8px; background:var(--night); color:var(--brand-muted); font-size:var(--body-ui); padding:8px 22px 8px 24px; border-radius:var(--pill); min-height:36px; }
.chevron { position:absolute; right:5px; top:50%; width:7px; height:7px; border-right:1px solid currentColor; border-bottom:1px solid currentColor; transform:translateY(-65%) rotate(45deg); pointer-events:none; }
.lang-globe { display:none; width:18px; height:18px; flex:none; }
.lang-menu,.filter-menu { position:absolute; top:calc(100% + 12px); right:0; z-index:75; min-width:180px; padding:8px; background:var(--paper); color:var(--ink); border:1px solid var(--line); border-radius:var(--r1); box-shadow:0 16px 32px -16px var(--soft-shadow); }
.lang-menu a,.filter-menu button { display:block; width:100%; padding:10px 12px; font-size:var(--body-ui); text-align:left; background:var(--paper); color:var(--ink); border-radius:var(--r1); }
.lang-menu a:hover,.filter-menu button:hover { background:var(--mist); color:var(--ink); }
.lang-menu a[aria-current] { background:var(--mist); color:var(--jade-hover); }
.pill { display:inline-flex; align-items:center; justify-content:center; min-height:36px; padding:6px 16px; border-radius:var(--pill); background:var(--jade); color:var(--jade-ink); font-size:var(--body-ui); font-weight:500; line-height:1.4; }
.pill:hover { background:var(--jade-hover); color:var(--jade-ink); }
.mobile-menu-button { display:none; width:36px; height:36px; border-radius:var(--r1); background:var(--night3); color:var(--ntext); align-items:center; justify-content:center; flex:none; }
.mobile-menu-button svg { width:20px; height:20px; }
.mobile-tools { display:none; }
.nav-drawer { position:fixed; top:calc(var(--header-h) + 8px); left:max(16px,calc((100vw - var(--wrap))/2)); right:auto; width:min(320px,calc(100% - 32px)); z-index:80; padding:16px; border:1px solid var(--nline); border-radius:var(--r2); background:var(--night2); color:var(--ntext); box-shadow:0 16px 32px -16px var(--shadow); text-align:left; }
.nav-drawer > a { display:block; padding:12px 16px; font-size:var(--body-ui); }
.hero { background:var(--paper); padding:96px 0; }
.hero-head { text-align:center; }
.hero h1 { font-size:var(--h1); line-height:1.2; font-weight:700; letter-spacing:-.02em; color:var(--ink); }
.hero h1 em { font-style:normal; color:var(--jade); }
.hero-lead { margin:24px auto 0; width:min(680px,100%); font-size:var(--body-lead); line-height:1.75; color:var(--muted); }
.hero-actions { position:relative; display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:12px; margin-top:32px; }
.hero-actions .badge { margin-top:0; min-height:48px; padding:8px 22px 8px 16px; border-radius:var(--pill); background:var(--ink); gap:10px; }
.hero-actions .badge svg { width:20px; height:20px; }
.hero-actions .badge small { display:none; }
.hero-actions .badge b { font-size:var(--body-ui); font-weight:600; line-height:1.3; }
.hero-inbox-link {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  position:static;
  min-height:48px;
  padding:8px 22px;
  border:1.5px solid var(--ink);
  border-radius:var(--pill);
  background:var(--paper);
  color:var(--ink);
  font-size:var(--body-ui);
  font-weight:600;
  line-height:1.3;
  white-space:nowrap;
}
.hero-inbox-link:hover { color:var(--ink); background:var(--mist); }
.hero-actions .badge:hover { background:var(--night); color:var(--paper); }
.badge { display:inline-flex; align-items:center; gap:12px; min-height:48px; padding:8px 22px 8px 16px; background:var(--ink); color:var(--paper); border-radius:var(--pill); text-align:left; }
.badge svg { width:20px; height:20px; flex:none; }
.badge small { display:block; font-size:var(--small); line-height:1.2; color:var(--badge-muted); }
.badge b { display:block; font-size:var(--body-ui); line-height:1.3; font-weight:600; }
.app { margin:64px auto 0; width:100%; background:var(--night); border-radius:var(--r2); overflow:hidden; color:var(--ntext); box-shadow:0 32px 64px -24px var(--shadow); scroll-margin-top:calc(var(--header-h) + 24px); }
.bar { display:flex; align-items:center; gap:16px; padding:16px 24px; border-bottom:1px solid var(--nline); }
.addr { display:flex; align-items:center; gap:16px; flex:1; min-width:0; height:48px; padding:0 8px 0 24px; background:var(--night3); color:var(--ntext); border-radius:var(--pill); }
.addr .lbl { font-size:var(--small); color:var(--nmuted); flex:none; }
.addr .mono { font-size:var(--body-lead); color:var(--paper); flex:1; min-width:0; overflow-x:auto; scrollbar-width:thin; }
.addr .mono span { color:var(--nmuted); }
.copy { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:36px; padding:0 16px; border-radius:var(--pill); background:var(--jade); color:var(--paper); font-size:var(--body-ui); font-weight:500; flex:none; }
.copy:hover { background:var(--jade-hover); color:var(--paper); }
.copy svg { width:14px; height:14px; }
.timer {
  display:flex;
  flex-direction:column;
  justify-content:center;
  height:48px;
  padding:0 16px;
  font-size:var(--small);
  color:var(--nmuted);
  line-height:1.4;
  flex:none;
  white-space:nowrap;
}
.timer b { font-family:var(--mono); font-size:var(--body); color:var(--paper); font-weight:500; letter-spacing:0; }
.ghost { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:48px; padding:0 20px; border-radius:var(--pill); background:var(--night3); color:var(--ntext); font-size:var(--body-ui); font-weight:500; white-space:nowrap; flex:none; }
.ghost svg { width:16px; height:16px; flex:none; }
.ghost small { color:var(--nmuted); font-size:var(--small); font-weight:400; }
.icon { width:48px; height:48px; border-radius:var(--pill); background:var(--night3); color:var(--ntext); display:flex; align-items:center; justify-content:center; flex:none; }
.icon svg { width:18px; height:18px; }
.ghost:hover,.icon:hover { background:var(--nline); color:var(--ntext); }
.body { display:grid; grid-template-columns:380px minmax(0,1fr); height:560px; }
.list { border-right:1px solid var(--nline); display:flex; flex-direction:column; min-width:0; min-height:0; }
.list-h { display:flex; justify-content:space-between; align-items:center; min-height:48px; padding:0 24px; font-size:var(--body-ui); font-weight:500; border-bottom:1px solid var(--nline); flex:none; }
.list-h span { color:var(--nmuted); font-weight:400; font-size:var(--small); }
.mail-list { min-height:0; overflow-y:auto; flex:none; max-height:calc(100% - 48px); }
.row { display:grid; grid-template-columns:40px minmax(0,1fr); gap:12px; height:76px; width:100%; padding:0 24px; align-items:center; border-bottom:1px solid var(--nline); background:var(--night); color:var(--ntext); text-align:left; }
.row.on,.row.is-active { background:var(--night3); color:var(--ntext); box-shadow:inset 3px 0 0 var(--jade); }
.row:hover { background:var(--night3); color:var(--ntext); }
.logo { width:40px; height:40px; border-radius:var(--r1); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:var(--body-ui); letter-spacing:-.04em; flex:none; }
.lg-ebay { background:var(--paper); color:var(--ink); }
.lg-nf { background:var(--black); color:var(--demo-netflix); font-size:var(--h3); }
.e1 { color:var(--demo-red); }
.e2 { color:var(--demo-blue); }
.e3 { color:var(--demo-yellow); }
.e4 { color:var(--demo-green); }
.row-copy { min-width:0; }
.r-top { display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:var(--body-ui); line-height:1.4; }
.r-top b { font-weight:500; min-width:0; }
.r-top time { font-size:var(--small); color:var(--nmuted); flex:none; align-self:center; }
.r-sub { font-size:var(--small); line-height:1.5; color:var(--nmuted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.r-sub i { font-style:normal; color:var(--ntext); }
.demo { display:inline-block; margin-left:8px; padding:0 8px; border-radius:var(--pill); font-size:var(--small); line-height:18px; color:var(--jade-soft); background:var(--jade-wash); font-weight:500; }
.slot { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; color:var(--nmuted); font-size:var(--small); text-align:center; padding:24px 48px; }
.slot svg { width:96px; height:64px; flex:none; }
.read { display:flex; flex-direction:column; background:var(--night2); color:var(--ntext); min-width:0; min-height:0; overflow-y:auto; }
.r-head { display:flex; align-items:center; gap:16px; padding:24px 32px; border-bottom:1px solid var(--nline); flex:none; }
.r-head .logo,
.reader-letterhead [data-demo-brand],
.reader-letterhead [data-demo-brand] span {
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
}
.r-meta { flex:1; line-height:1.5; min-width:0; }
.r-meta h3 { font-size:var(--body-lead); font-weight:500; overflow-wrap:anywhere; }
.r-meta p { font-size:var(--small); color:var(--nmuted); overflow-wrap:anywhere; }
.r-meta p .mono { font-size:var(--small); white-space:normal; }
.r-head time { font-size:var(--small); color:var(--nmuted); flex:none; }
.mail { flex:1; padding:32px 32px 24px; font-size:var(--body-ui); line-height:1.75; color:var(--mail-ink); }
.wordmark { font-size:var(--h2-compact); font-weight:700; letter-spacing:-.06em; line-height:1.15; min-height:37px; display:flex; align-items:center; }
.mail h4 { margin-top:24px; font-size:var(--body-lead); font-weight:500; color:var(--paper); }
.mail p { margin-top:8px; }
.mail .mail-follow { margin-top:24px; }
.code { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:24px; width:min(440px,100%); min-height:76px; padding:12px 24px; border-radius:var(--r1); background:var(--code-bg); color:var(--ntext); border:1px solid var(--nline); }
.code .mono { font-size:var(--h2-compact); font-weight:500; color:var(--paper); letter-spacing:.12em; }
.code small { font-size:var(--small); color:var(--nmuted); }
.mail .fine { margin-top:24px; font-size:var(--small); color:var(--nmuted); }
.r-act { display:flex; gap:8px; padding:16px 32px; border-top:1px solid var(--nline); flex:none; }
.r-act a,.r-act button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:36px; padding:6px 16px; border-radius:var(--pill); background:var(--night3); font-size:var(--body-ui); color:var(--ntext); }
.r-act .pri { background:var(--jade); color:var(--paper); }
.r-act svg { width:14px; height:14px; flex:none; }
.r-act .sp { flex:1; }
.reader-close { display:none; }
.reader-frame { display:block; border:0; width:100%; min-height:360px; background:var(--paper); color:var(--ink); }
.mail pre,.archive-body pre { white-space:pre-wrap; overflow-wrap:anywhere; font-family:var(--mono); font-size:var(--body-ui); }
.ttl { height:4px; background:var(--night3); }
.ttl i { display:block; height:4px; width:89.5%; background:var(--jade); }
.hero-art { display:grid; margin-top:64px; border-radius:var(--r2); overflow:hidden; }
.hero-art .art-photo { grid-area:1/1; width:100%; height:clamp(22rem,38vw,34rem); object-fit:cover; display:block; }
.hero-art .shade { grid-area:1/1; background:linear-gradient(90deg,var(--photo-shade),var(--transparent) 55%); }
.hero-art .float-card { grid-area:1/1; align-self:end; justify-self:start; margin:24px; width:400px; padding:24px; background:var(--glass); color:var(--ink); border-radius:var(--r2); box-shadow:0 16px 32px -16px var(--soft-shadow); z-index:1; }
.fc-h { display:flex; align-items:center; gap:12px; font-size:var(--body-ui); font-weight:500; }
.fc-h svg,.fc-h img { width:32px; height:32px; flex:none; }
.fc-row { display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:12px 0; border-bottom:1px solid var(--line); font-size:var(--body-ui); color:var(--muted); }
.fc-row:last-child { border-bottom:0; padding-bottom:0; }
.fc-row b { color:var(--ink); font-weight:500; }
.fc-row b em { font-style:normal; font-family:var(--mono); color:var(--jade); font-size:var(--body); }
.sec { padding:128px 0; }
.mist { background:var(--mist); color:var(--ink); }
.dark { background:var(--night); color:var(--ntext); }
.eyebrow { margin:0 0 20px; font-size:var(--small); font-weight:700; letter-spacing:.16em; color:var(--jade); text-align:left; }
.dark .eyebrow { color:var(--jade-soft); }
h2 { margin-top:20px; font-size:var(--h2); line-height:1.3; font-weight:700; letter-spacing:-.02em; }
.eyebrow + h2 { margin-top:0; }
.lead,.section-intro { margin-top:24px; font-size:var(--body-lead); line-height:1.75; color:var(--muted); }
.dark .lead,.dark .section-intro { color:var(--nmuted); }
.section-head,.content-head { margin-bottom:var(--s5); }
.split { display:grid; grid-template-columns:520px minmax(0,1fr); gap:64px; align-items:center; }
.split > * { min-width:0; }
.split.rev { grid-template-columns:minmax(0,1fr) 480px; }
.points { margin-top:48px; display:flex; flex-direction:column; gap:32px; }
.pt { display:grid; grid-template-columns:48px minmax(0,1fr); gap:16px; }
.pt .n { width:48px; height:48px; border-radius:var(--r1); background:var(--paper); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:var(--body-ui); color:var(--jade); font-weight:500; }
.pt h3 { font-size:var(--h3); line-height:1.4; font-weight:500; letter-spacing:-.01em; }
.pt p { margin-top:8px; color:var(--muted); font-size:var(--body); }
.photo2 { width:100%; height:640px; object-fit:cover; border-radius:var(--r2); display:block; box-shadow:0 32px 64px -32px var(--soft-shadow); }
.panel { background:var(--night2); color:var(--ntext); border-radius:var(--r2); overflow:hidden; }
.p-h { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:24px 32px; border-bottom:1px solid var(--nline); }
.p-h b { font-size:var(--body); font-weight:500; }
.p-h p { font-size:var(--small); color:var(--nmuted); line-height:1.6; }
.p-h p .mono { font-size:var(--small); color:var(--ntext); }
.p-row { display:grid; grid-template-columns:minmax(0,1fr) 120px 96px 52px; align-items:center; gap:16px; min-height:72px; padding:12px 32px; border-bottom:1px solid var(--nline); font-size:var(--body-ui); }
.p-row:last-child { border-bottom:0; }
.p-row .mono { font-size:var(--body-ui); color:var(--paper); }
.p-row .site { color:var(--nmuted); font-size:var(--small); }
.p-row .cnt { color:var(--nmuted); font-size:var(--small); text-align:right; }
.p-row.off .mono { color:var(--nmuted); text-decoration:line-through; }
.p-row.off .site { color:var(--warning); }
.tg { width:44px; height:24px; border-radius:var(--pill); background:var(--jade); display:flex; align-items:center; padding:0 3px; justify-content:flex-end; }
.tg i { width:18px; height:18px; border-radius:var(--pill); background:var(--paper); }
.p-row.off .tg { background:var(--toggle-off); justify-content:flex-start; }
.p-row.off .tg i { background:var(--nmuted); }
.p-foot { display:flex; justify-content:space-between; gap:16px; align-items:center; padding:16px 32px; background:var(--night3); color:var(--nmuted); font-size:var(--small); }
.login-steps { margin-top:48px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.ls b { display:block; font-family:var(--mono); font-size:var(--body-ui); color:var(--jade-soft); font-weight:500; letter-spacing:0; }
.ls h3 { margin-top:8px; font-size:var(--body); font-weight:500; color:var(--paper); }
.ls p { margin-top:4px; font-size:var(--body-ui); line-height:1.6; color:var(--nmuted); }
.btns,.actions { margin-top:48px; display:flex; flex-wrap:wrap; gap:16px; align-items:center; }
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:12px 24px; border-radius:var(--pill); font-size:var(--body-ui); font-weight:500; line-height:1.4; max-width:100%; text-align:center; background:var(--night3); color:var(--ntext); }
.btn.pri { background:var(--jade); color:var(--paper); }
.btn.pri:hover { background:var(--jade-hover); color:var(--paper); }
.btn.line { color:var(--ntext); background:var(--night3); }
.btn.line:hover { color:var(--paper); background:var(--nline); }
.btn.lt { background:var(--mist); color:var(--ink); }
.btn.lt:hover { background:var(--line); color:var(--ink); }
.btn.outline { border:1px solid var(--line); background:var(--paper); color:var(--ink); }
.center { text-align:center; }
.center .eyebrow { text-align:center; }
.center .lead { width:min(680px,100%); margin-left:auto; margin-right:auto; }
.center .actions,.center .btns { justify-content:center; }
.steps { margin-top:64px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; }
.st { background:var(--mist); color:var(--ink); border-radius:var(--r2); padding:32px 24px; text-align:left; min-width:0; }
.st .sn { font-family:var(--mono); font-size:var(--body-ui); color:var(--jade); font-weight:500; }
.st svg { display:block; width:40px; height:40px; margin-top:24px; }
.st h3 { margin-top:24px; font-size:var(--h3); line-height:1.4; font-weight:500; letter-spacing:-.01em; }
.st p { margin-top:8px; font-size:var(--body-ui); color:var(--muted); line-height:1.75; }
.bounds { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-top:64px; }
.bd { background:var(--paper); color:var(--ink); border-radius:var(--r2); padding:48px; min-width:0; }
.bd h3 { font-size:var(--h3); font-weight:500; display:flex; align-items:center; gap:12px; }
.bd h3 svg { width:24px; height:24px; flex:none; }
.bd ul { list-style:none; margin-top:24px; }
.bd li { display:grid; grid-template-columns:120px minmax(0,1fr); gap:16px; padding:16px 0; border-bottom:1px solid var(--line); font-size:var(--body); color:var(--muted); }
.bd li:last-child { border-bottom:0; padding-bottom:0; }
.bd li b { color:var(--ink); font-weight:500; }
.faq { display:grid; grid-template-columns:400px minmax(0,1fr); gap:64px; }
.qa { border-bottom:1px solid var(--line); padding:24px 0; }
.qa:first-child { padding-top:0; }
.qa h3,.qa summary { font-size:var(--body-lead); font-weight:500; line-height:1.5; }
.qa p { margin-top:8px; color:var(--muted); font-size:var(--body); }
details.qa summary { cursor:pointer; list-style:none; position:relative; padding-right:32px; }
details.qa summary::-webkit-details-marker { display:none; }
details.qa summary::after { content:""; position:absolute; right:4px; top:.65em; width:7px; height:7px; border-right:1px solid currentColor; border-bottom:1px solid currentColor; transform:rotate(45deg); }
details.qa[open] summary::after { transform:rotate(225deg); }
details.qa[open] p { margin-top:16px; margin-bottom:8px; }
.more { display:inline-block; margin-top:32px; font-size:var(--body-ui); font-weight:500; color:var(--jade); }
.cta { padding:128px 0; text-align:center; }
.cta .q { width:56px; height:56px; margin:0 auto; }
.cta h2 { margin-top:32px; font-size:var(--h2); color:var(--paper); }
.cta .lead { width:min(640px,100%); margin:24px auto 0; }
.cta .btns { justify-content:center; }
.foot { background:var(--footer-bg); color:var(--nmuted); padding:96px 0 48px; font-size:var(--body-ui); }
.f-grid { display:grid; grid-template-columns:360px repeat(2,minmax(0,1fr)) 240px; gap:48px; }
.f-brand p { margin-top:16px; line-height:1.75; }
.f-col { min-width:0; }
.f-col .f-title { display:block; color:var(--ntext); font-weight:500; font-size:var(--body-ui); margin-bottom:16px; }
.f-col a { display:block; line-height:2.2; overflow-wrap:anywhere; }
.f-col a:hover { color:var(--paper); }
.footer-help { padding:24px; border-radius:var(--r2); background:var(--night3); color:var(--ntext); align-self:start; }
.footer-help p { color:var(--nmuted); margin:8px 0 16px; }
.footer-help .btn { min-height:36px; padding:8px 16px; background:var(--mist); color:var(--ink); width:100%; overflow-wrap:anywhere; font-size:var(--small); }
.footer-help .btn:hover { background:var(--paper); color:var(--ink); }
.f-bot { margin-top:64px; padding-top:24px; border-top:1px solid var(--footer-line); display:flex; justify-content:space-between; gap:16px; font-size:var(--small); }
.card { padding:32px; background:var(--mist); color:var(--ink); border-radius:var(--r2); min-width:0; }
.card h3 { font-size:var(--body-lead); font-weight:500; line-height:1.4; }
.card p { font-size:var(--body); color:var(--muted); margin-top:12px; }
.field { display:grid; gap:8px; font-size:var(--body-ui); }
.field input,.field textarea,.text-input { width:100%; padding:12px 16px; min-height:48px; border:1px solid var(--line); background:var(--paper); color:var(--ink); border-radius:var(--r1); font-size:var(--body-ui); line-height:1.5; }
input::placeholder,textarea::placeholder { font-size:var(--body-ui); color:var(--muted); }
.form-stack { display:grid; gap:24px; }
.form-error { color:var(--ink); background:var(--mist); padding:12px 16px; border-radius:var(--r1); font-size:var(--body-ui); }
.table-scroll { overflow-x:auto; margin:24px 0 32px; }
table { width:100%; border-collapse:collapse; font-size:var(--body-ui); }
th,td { text-align:left; padding:16px; border-bottom:1px solid var(--line); vertical-align:middle; }
th { font-weight:500; background:var(--mist); color:var(--ink); }
.status-pill { display:inline-flex; align-items:center; width:fit-content; max-width:100%; padding:4px 10px; border-radius:var(--pill); font-size:var(--small); line-height:1.5; background:var(--line); color:var(--ink); margin:0; }
.status-pill.active { background:var(--jade-wash); color:var(--jade-soft); }
.filter { position:relative; display:inline-flex; }
.filter-trigger { display:inline-flex; align-items:center; position:relative; width:auto; gap:12px; min-height:40px; margin-block:16px; padding:8px 32px 8px 16px; border:1px solid var(--line); border-radius:var(--pill); font-size:var(--body-ui); background:var(--paper); color:var(--ink); }
.filter-trigger .chevron { right:14px; }
.filter-menu { left:0; right:auto; min-width:220px; }
.toast { position:fixed; bottom:24px; left:50%; transform:translate(-50%,12px); z-index:150; width:max-content; max-width:min(430px,calc(100% - 32px)); padding:14px 20px; background:var(--night3); color:var(--ntext); border:1px solid var(--nline); border-radius:var(--r1); font-size:var(--body-ui); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .18s,transform .18s,visibility .18s; overflow-wrap:anywhere; }
.toast.show { opacity:1; visibility:visible; transform:translate(-50%,0); }
.modal-backdrop { position:fixed; inset:0; z-index:110; background:var(--overlay); display:grid; place-items:center; padding:24px; }
.modal { width:min(420px,100%); max-height:calc(100dvh - 48px); overflow-y:auto; background:var(--paper); color:var(--ink); padding:32px; border-radius:var(--r2); }
.modal > svg { width:32px; height:32px; margin-bottom:12px; }
.modal h2 { margin:0; font-size:var(--h3); line-height:1.35; }
.modal p { margin-top:16px; font-size:var(--body); color:var(--muted); }
.modal .actions { justify-content:flex-end; margin-top:24px; gap:12px; }
.empty-state { width:min(420px,calc(100% - 32px)); height:auto; min-height:0; padding:20px; border:1px solid var(--nline); border-radius:var(--r1); background:var(--night3); color:var(--ntext); margin:auto; }
.empty-state h3 { font-size:var(--body-lead); font-weight:500; }
.empty-state p { margin-top:8px; font-size:var(--body-ui); color:var(--nmuted); }
.has-empty { display:grid; place-items:center; }
.auth-layout { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:64px; align-items:center; padding-top:64px; padding-bottom:96px; }
.auth-panel { min-width:0; order:2; }
.auth-story { min-width:0; order:1; }
.auth-story h1 { font-size:var(--h2); line-height:1.3; letter-spacing:-.02em; }
.auth-story p { margin-top:24px; color:var(--muted); }
.login-card { background:var(--mist); color:var(--ink); padding:48px; border-radius:var(--r2); }
.login-card h2 { font-size:var(--h3); line-height:1.4; margin:0 0 24px; }
.login-card input { font-size:var(--body-ui); background:var(--paper); color:var(--ink); border:1px solid var(--muted); }
.login-card input[type="email"] { background:var(--paper); color:var(--ink); border:1px solid var(--muted); }
.login-notice { margin:48px 0 16px; padding:12px 16px; background:var(--paper); color:var(--ink); border-radius:var(--r1); font-size:var(--body-ui); }
.login-secondary { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:24px; }
.login-secondary button { min-height:40px; padding:8px 16px; border-radius:var(--pill); background:var(--paper); color:var(--ink); border:1px solid var(--line); font-size:var(--body-ui); }
.desk-layout { padding-top:64px; padding-bottom:96px; display:grid; gap:48px; }
.desk-session { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; font-size:var(--body-ui); }
.desk-session [data-session-email] { overflow-wrap:anywhere; }
.alias-surface { background:var(--night); color:var(--ntext); padding:32px; border-radius:var(--r2); min-width:0; }
.alias-surface h2,.archive-surface h2,.surface-safety h2 { font-size:var(--h3); line-height:1.4; margin:0; }
.alias-compose { display:flex; align-items:center; gap:12px; margin-top:24px; }
.prefix-group { display:flex; align-items:center; flex:1; min-width:0; gap:8px; padding-right:16px; border-radius:var(--pill); background:var(--paper); color:var(--ink); }
.prefix-group:focus-within { box-shadow:inset 0 0 0 1px var(--ink); }
.prefix-group input { width:100%; min-width:0; min-height:48px; border:0; border-radius:var(--pill); font-size:var(--body-ui); padding:12px 16px; background:var(--paper); color:var(--ink); }
.prefix-group input:focus { outline:0; box-shadow:none; }
.prefix-suffix { font-size:var(--body-ui); color:var(--muted); flex:none; }
.alias-compose button { min-height:48px; font-size:var(--body-ui); }
.alias-compose [type="submit"] { min-width:112px; }
.alias-compose [data-random-prefix] { background:var(--night); color:var(--ntext); border:1px solid var(--nmuted); border-radius:var(--pill); padding:12px 20px; }
.alias-list { margin-top:32px; }
.alias-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; align-items:center; padding:20px 0; border-bottom:1px solid var(--nline); }
.alias-address { overflow-wrap:anywhere; white-space:normal; font-family:var(--mono); font-size:var(--body-ui); }
.alias-row-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.alias-empty { margin-top:32px; padding:20px; border:1px solid var(--nline); border-radius:var(--r1); width:100%; color:var(--nmuted); font-size:var(--body-ui); }
.archive-surface { padding:32px 0; min-width:0; background:var(--paper); color:var(--ink); }
.archive-top { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:32px; }
.archive-list { border-top:0; }
.archive-row { width:100%; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; align-items:center; padding:20px 16px; border:0; border-bottom:1px solid var(--line); background:var(--paper); color:var(--ink); text-align:left; font-size:var(--body-ui); }
.archive-row:hover { background:var(--mist); color:var(--ink); }
.archive-row .sender { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); }
.archive-row-meta { display:flex; align-items:center; justify-content:flex-end; gap:16px; font-size:var(--small); }
.archive-empty { width:100%; padding:20px; border-radius:var(--r1); background:var(--mist); color:var(--ink); }
.archive-empty h3 { font-size:var(--body-lead); font-weight:500; }
.archive-empty p { margin-top:8px; font-size:var(--body-ui); color:var(--muted); }
.archive-detail { margin-top:32px; border-radius:var(--r2); background:var(--mist); color:var(--ink); padding:32px; }
.archive-detail-header { display:flex; gap:24px; justify-content:space-between; align-items:flex-start; }
.archive-detail-header h3 { font-size:var(--body-lead); overflow-wrap:anywhere; }
.archive-detail-header p { font-size:var(--body-ui); color:var(--muted); margin-top:8px; }
.archive-detail-header button { align-self:flex-start; flex:none; }
.archive-body { margin-top:24px; overflow-wrap:anywhere; }
.surface-safety { background:var(--mist); color:var(--ink); padding:32px; border-radius:var(--r2); min-width:0; }
.twofa-idle { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px; }
.twofa-status { display:flex; align-items:center; gap:12px; font-size:var(--body-ui); margin-top:16px; }
.twofa-status [data-2fa-badge] { background:var(--night3); color:var(--ntext); border:1px solid var(--nline); margin:0; margin-bottom:0; }
.twofa-idle [data-twofa-start] { align-self:center; flex:none; }
.twofa-steps { display:flex; gap:24px; flex-wrap:wrap; margin-top:24px; font-size:var(--body-ui); color:var(--muted); }
.twofa-step { display:flex; align-items:center; gap:12px; }
.twofa-step .number { display:inline-flex; width:28px; height:28px; border-radius:var(--pill); justify-content:center; align-items:center; background:var(--paper); color:var(--ink); flex:none; }
.twofa-setup { margin-top:24px; margin-bottom:24px; padding-top:24px; border-top:1px solid var(--line); }
.setup-grid { display:grid; grid-template-columns:180px minmax(0,1fr); gap:32px; align-items:start; }
[data-twofa-qr] { display:block; width:180px; height:180px; aspect-ratio:1; object-fit:contain; background:var(--paper); border-radius:var(--r1); padding:8px; }
.secret-line { display:flex; gap:12px; align-items:center; margin-top:16px; flex-wrap:wrap; }
.secret-line code { color:var(--ink); overflow-wrap:anywhere; font-family:var(--mono); }
.secret-line button { width:auto; flex:none; }
.twofa-actions,
.form-actions {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  margin-top:24px;
}
.twofa-actions input { width:160px; min-height:48px; padding:12px 16px; border:1px solid var(--line); border-radius:var(--r1); background:var(--paper); color:var(--ink); font-size:var(--body-ui); }
.twofa-actions button { margin:0; min-height:48px; }
.article-layout { width:min(1120px,calc(100% - 48px)); margin:64px auto 96px; display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:64px; align-items:start; }
.prose { min-width:0; font-size:var(--body); line-height:1.85; }
.prose h2 { font-size:var(--h2-compact); line-height:1.4; margin:48px 0 24px; }
.prose h3 { font-size:var(--body-lead); line-height:1.5; margin:32px 0 16px; }
.prose p,.prose ul,.prose ol { margin:0 0 24px; }
.prose ul,.prose ol { padding-left:24px; }
.prose a:not(.btn) { color:var(--jade-hover); text-decoration:underline; text-underline-offset:3px; }
.prose .btn.pri { color:var(--paper); text-decoration:none; }
.prose .card { margin:24px 0 32px; }
.toc { position:sticky; top:calc(var(--header-h) + 16px); padding:24px; border:1px solid var(--line); border-radius:var(--r2); background:var(--mist); color:var(--ink); font-size:var(--body-ui); }
.toc ol { padding-left:20px; margin-top:16px; }
.toc li + li { margin-top:8px; }
.toc-count { margin-top:16px; }
.recommend-float { position:fixed; right:24px; bottom:24px; z-index:60; width:min(320px,calc(100% - 32px)); background:var(--paper); color:var(--ink); border:1px solid var(--line); border-radius:var(--r2); overflow:hidden; box-shadow:0 16px 32px -16px var(--soft-shadow); }
.recommend-content { padding:24px; }
.recommend-content h3 { font-size:var(--body-lead); font-weight:500; }
.recommend-content p { font-size:var(--body-ui); color:var(--muted); margin-top:12px; }
.recommend-content .btn { margin-top:24px; white-space:normal; height:auto; line-height:1.35; }
.float-close { position:absolute; top:8px; right:8px; width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:var(--pill); background:var(--mist); color:var(--ink); }
.float-close svg { width:16px; height:16px; }
body.reader-open { overflow:hidden; }
@media (max-width:1100px) {
  .nav { gap:12px; }
  .lang { padding-left:12px; }
  .hero { padding:72px 0 80px; }
  .hero h1 { font-size:var(--h2); }
  .bar { flex-wrap:wrap; gap:12px; }
  .addr { flex-basis:calc(100% - 180px); }
  .body { grid-template-columns:minmax(0,34%) minmax(0,66%); }
  .r-head,.mail { padding-left:24px; padding-right:24px; }
  .r-head { flex-wrap:wrap; }
  .r-head time { margin-left:56px; }
  .row { padding:0 16px; }
  .list-h { padding:0 16px; gap:8px; }
  .split { grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px; }
  .split.rev { grid-template-columns:repeat(2,minmax(0,1fr)); }
  h2 { font-size:var(--h2-compact); }
  .p-row { grid-template-columns:minmax(0,1fr) auto; padding:16px 24px; gap:8px 16px; }
  .p-row .mono { white-space:normal; overflow-wrap:anywhere; grid-column:1; }
  .p-row .site { grid-column:1; }
  .p-row .cnt { grid-column:2; grid-row:2; }
  .p-row .tg { grid-column:2; grid-row:1; justify-self:end; }
  .p-h { padding:24px; }
  .p-foot { flex-direction:column; align-items:flex-start; padding:16px 24px; }
  .faq { grid-template-columns:300px minmax(0,1fr); gap:40px; }
  .bd { padding:32px; }
  .bd li { grid-template-columns:88px minmax(0,1fr); }
  .f-grid { grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr)); gap:32px; }
  .footer-help { grid-column:1/-1; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:0 32px; }
  .footer-help p { grid-column:1; margin-bottom:0; }
  .footer-help .btn { grid-column:2; grid-row:1/3; }
  .auth-layout { gap:40px; }
  .login-card { padding:32px; }
}
@media (max-width:860px) {
  .top .wrap { position:relative; }
  .top .brand { margin-left:48px; }
  .nav > a,.nav > .lang-wrap { display:none; }
  .mobile-menu-button { display:flex; position:absolute; left:0; top:14px; }
  .mobile-tools { display:flex; align-items:center; gap:16px; margin-left:auto; }
  .nav { display:none; }
  .hero h1 { font-size:var(--h2); }
  .hero-lead { font-size:var(--body-lead); }
  .hero-inbox-link { position:static; order:0; }
  .hero-actions { gap:12px; }
  .body { height:auto; min-height:560px; grid-template-columns:minmax(0,1fr); }
  .list { border-right:0; min-height:300px; }
  .mail-list { max-height:380px; }
  .list .slot { min-height:148px; padding:24px; }
  .read { display:none; }
  .read.mobile-reader { display:flex; position:fixed; top:var(--header-h); bottom:0; left:0; width:100%; height:calc(100dvh - var(--header-h)); z-index:100; background:var(--night2); color:var(--ntext); overflow-y:auto; overscroll-behavior:auto; border-radius:0; }
  .mobile-reader .reader-close { display:inline-flex; }
  .mobile-reader .r-act { order:-1; position:sticky; top:0; z-index:2; background:var(--night); color:var(--ntext); padding:12px 16px; }
  .mobile-reader .mail { flex:1 0 auto; }
  .hero,.hero .wrap,.app { transform:none; animation:none; }
  .sec { padding:80px 0; }
  .split,.split.rev { grid-template-columns:minmax(0,1fr); gap:48px; }
  .photo2 { height:480px; }
  .steps { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-top:48px; }
  .bounds { grid-template-columns:minmax(0,1fr); margin-top:48px; }
  .faq { grid-template-columns:minmax(0,1fr); gap:48px; }
  .cta { padding:80px 0; }
  .cta h2 { font-size:var(--h2-compact); }
  .f-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .f-brand { grid-column:1/-1; }
  .auth-layout { grid-template-columns:minmax(0,1fr); padding-top:40px; }
  .auth-panel { order:1; }
  .auth-story { order:2; }
  .article-layout { grid-template-columns:minmax(0,1fr); gap:32px; }
  .toc { position:static; grid-row:1; }
  .alias-compose { flex-wrap:wrap; }
  .prefix-group { flex-basis:100%; }
  .alias-row { grid-template-columns:minmax(0,1fr); }
  .alias-row-actions { justify-content:flex-start; }
  .archive-row { grid-template-columns:minmax(0,1fr); gap:12px; }
  .archive-row-meta { justify-content:flex-start; }
  .setup-grid { grid-template-columns:180px minmax(0,1fr); gap:24px; }
}
@media (max-width:560px) {
  .wrap { width:calc(100% - 32px); }
  .top .wrap { gap:12px; }
  .top .brand { font-size:var(--body-lead); gap:8px; margin-left:44px; }
  .brand img { width:28px; height:28px; }
  .mobile-tools { gap:8px; }
  .mobile-tools .pill { padding:8px 12px; font-size:var(--small); }
  .mobile-tools .lang { padding:8px 19px 8px 8px; }
  .lang-text { display:none; }
  .lang-globe { display:block; }
  .lang .chevron { right:5px; }
  .lang-menu { right:-56px; }
  .hero { padding:48px 0 64px; }
  .hero h1 { font-size:var(--h2-compact); line-height:1.3; }
  .hero-lead { font-size:var(--body); margin-top:24px; }
  .hero-actions { flex-direction:column; align-items:stretch; gap:12px; margin-top:24px; width:min(100%,360px); margin-inline:auto; }
  .hero-inbox-link { order:0; width:100%; white-space:normal; text-align:center; }
  .hero-actions .badge { order:1; width:100%; justify-content:center; }
  .app { margin-top:40px; }
  .bar { padding:16px; gap:12px 8px; }
  .addr { flex-basis:100%; padding-left:16px; gap:8px; }
  .addr .lbl { display:none; }
  .addr .mono { font-size:var(--body-ui); }
  .copy { padding:0 12px; font-size:var(--small); }
  .timer { padding:0 8px 0 0; }
  .ghost { padding:0 12px; height:40px; font-size:var(--small); gap:6px; }
  .ghost small { display:none; }
  .icon { width:40px; height:40px; }
  .body { min-height:0; }
  .list { min-height:360px; }
  .list-h { font-size:var(--body-ui); }
  .list-h span { font-size:var(--small); }
  .r-head { padding:24px 16px; gap:12px; }
  .r-head time { margin-left:52px; }
  .r-meta h3 { font-size:var(--body-lead); }
  .mail { padding:24px 16px; }
  .code { padding:16px; flex-wrap:wrap; }
  .code .mono { font-size:var(--h2-compact); }
  .r-act { flex-wrap:wrap; }
  .r-act a,.r-act button { padding:8px 12px; font-size:var(--small); }
  .hero-art { margin-top:40px; }
  .hero-art .art-photo { height:440px; }
  .hero-art .float-card { width:calc(100% - 32px); margin:16px; padding:20px; }
  .fc-row { font-size:var(--small); }
  .sec { padding:64px 0; }
  h2 { font-size:var(--h2-compact); }
  .lead,.section-intro { font-size:var(--body); }
  .points { margin-top:32px; gap:24px; }
  .pt { grid-template-columns:40px minmax(0,1fr); gap:12px; }
  .pt .n { width:40px; height:40px; }
  .pt h3 { font-size:var(--body-lead); }
  .photo2 { height:400px; }
  .login-steps { grid-template-columns:minmax(0,1fr); gap:24px; margin-top:32px; }
  .btns,.actions { gap:12px; margin-top:32px; }
  .btn { padding:12px 20px; white-space:normal; }
  .p-h { padding:20px; flex-wrap:wrap; }
  .p-row { padding:16px 20px; }
  .p-row .mono { font-size:var(--small); }
  .p-foot { padding:16px 20px; }
  .steps { grid-template-columns:minmax(0,1fr); margin-top:32px; }
  .st { padding:24px; }
  .st svg { margin-top:16px; }
  .st h3 { margin-top:20px; font-size:var(--body-lead); }
  .bd { padding:24px; }
  .bd h3 { font-size:var(--body-lead); }
  .bd li { grid-template-columns:80px minmax(0,1fr); gap:12px; font-size:var(--body-ui); }
  .cta { padding:64px 0; }
  .cta h2 { font-size:var(--h2-compact); }
  .cta .lead { font-size:var(--body); }
  .foot { padding:64px 0 32px; }
  .f-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px 24px; }
  .footer-help { display:block; padding:24px; }
  .footer-help p { margin:8px 0 16px; }
  .footer-help .btn { width:auto; }
  .f-bot { margin-top:40px; flex-direction:column; gap:8px; }
  .auth-layout { padding-top:32px; padding-bottom:64px; }
  .login-card { padding:24px; }
  .auth-story h1 { font-size:var(--h2-compact); }
  .desk-layout { padding-top:32px; gap:32px; }
  .alias-surface,.surface-safety { padding:24px 20px; }
  .alias-compose { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; }
  .prefix-group { flex-wrap:wrap; padding:0 16px 12px; }
  .prefix-group input { flex-basis:100%; padding-inline:0; }
  .alias-compose button { width:100%; }
  .alias-row-actions button { max-width:100%; }
  .archive-top { flex-wrap:wrap; }
  .archive-detail { padding:20px; }
  .archive-detail-header { flex-wrap:wrap; }
  .setup-grid { grid-template-columns:minmax(0,1fr); }
  .twofa-idle { align-items:flex-start; }
  .twofa-actions input { width:100%; }
  .twofa-actions button { width:auto; }
  .article-layout { width:calc(100% - 32px); margin:32px auto 64px; }
  .prose h2 { font-size:var(--h3); }
  .recommend-float { right:16px; bottom:16px; }
  .empty-state { width:calc(100% - 32px); padding:16px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none !important; transition:none !important; }
}

/* Mail and workspace extensions share the approved surface tokens. */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.sender-mark { display:inline-flex; align-items:center; justify-content:center; background:var(--jade-wash); color:var(--jade-soft); font-family:var(--mono); letter-spacing:0; }
.row { position:relative; }
.unread-dot { position:absolute; left:9px; top:50%; transform:translateY(-50%); width:5px; height:5px; border-radius:var(--pill); background:var(--jade-soft); }
.row .r-top b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.row .r-top time { display:flex; align-items:center; align-self:center; }
.read.is-real [data-demo-badge] { display:none; }
.read.is-empty { justify-content:center; }
.read.is-empty .r-act { margin-top:auto; }
.read.is-empty [data-reader-empty] { margin:auto; }
.inline-mail-notice { margin:0 0 20px; padding:12px 16px; border-radius:var(--r1); background:var(--night3); color:var(--ntext); font-size:var(--body-ui); }
.reader-frame { border-radius:var(--r1); }
.mail-list.has-empty { flex:1; }
body.reader-open .hero-art { visibility:hidden; }
.signin-card-heading { display:flex; align-items:center; gap:12px; margin-bottom:32px; color:var(--jade-hover); font-size:var(--small); font-weight:500; }
.signin-card-heading svg { width:32px; height:32px; flex:none; }
.signin-card-intro { color:var(--muted); font-size:var(--body-ui); line-height:1.75; margin:-8px 0 24px; }
.signin-code { font-family:var(--mono); letter-spacing:.12em; }
.signin-proof { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-top:32px; }
.signin-proof > div { display:grid; gap:8px; }
.signin-proof strong { font-family:var(--mono); font-size:var(--h2-compact); line-height:1.2; font-weight:500; color:var(--jade-hover); letter-spacing:-.02em; }
.signin-proof span { font-size:var(--body-ui); color:var(--muted); }
.signin-route { margin-top:32px; padding:8px 20px; background:var(--night); color:var(--ntext); border-radius:var(--r2); }
.signin-route-item { display:grid; grid-template-columns:24px minmax(0,1fr) auto; gap:12px; align-items:center; padding:16px 0; font-size:var(--body-ui); }
.signin-route-item svg { width:24px; height:24px; color:var(--jade-soft); }
.signin-route-item .status-pill { background:var(--night3); color:var(--nmuted); }
.signin-route-item .status-pill.active { background:var(--jade-wash); color:var(--jade-soft); }
.auth-story .signin-footnote { margin-top:24px; font-size:var(--body-ui); }
.signin-footnote a,.signin-legal a,.desk-endnote a { color:var(--jade-hover); text-decoration:underline; text-underline-offset:3px; }
.signin-legal { margin-top:32px; padding-top:24px; border-top:1px solid var(--line); font-size:var(--small); line-height:1.85; color:var(--muted); }
.signin-session-hint { margin-top:24px; padding:12px 16px; border-radius:var(--r1); background:var(--paper); color:var(--ink); font-size:var(--body-ui); }
.login-card [data-form-error] { margin-top:24px; border:1px solid var(--line); background:var(--paper); color:var(--ink); }
.login-card .form-stack > .btn { width:100%; }
.login-card .login-notice { overflow-wrap:anywhere; margin:32px 0 16px; }
.session-identity { display:flex; align-items:center; gap:16px; min-width:0; }
.session-identity > div { display:grid; gap:4px; min-width:0; }
.session-identity strong { font-weight:500; font-size:var(--body); line-height:1.5; overflow-wrap:anywhere; }
.session-caption { display:block; color:var(--muted); font-size:var(--small); }
.session-dot { width:10px; height:10px; flex:none; border-radius:var(--pill); background:var(--jade); }
.session-actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.session-actions .btn { min-height:40px; padding:8px 16px; }
.desk-notice { padding:16px 20px; border:1px solid var(--line); border-radius:var(--r1); background:var(--mist); color:var(--ink); font-size:var(--body-ui); }
.alias-mast { display:flex; justify-content:space-between; align-items:flex-start; gap:32px; }
.alias-mast > div { min-width:0; max-width:780px; }
.alias-surface .eyebrow { color:var(--jade-soft); margin-bottom:20px; }
.alias-surface h1 { margin:0; font-size:var(--h2-compact); line-height:1.3; font-weight:500; letter-spacing:-.02em; color:var(--ntext); }
.desk-section-intro { margin-top:24px; max-width:720px; color:var(--nmuted); font-size:var(--body); }
.alias-quota { flex:none; padding:8px 12px; border-radius:var(--pill); background:var(--night3); color:var(--jade-soft); font-family:var(--mono); font-size:var(--small); white-space:nowrap; }
.alias-surface .alias-compose { margin-top:32px; }
.alias-compose [type="submit"] { min-width:132px; }
.compose-help { margin-top:12px; font-size:var(--small); color:var(--nmuted); }
.alias-identity { display:flex; align-items:center; flex-wrap:wrap; gap:12px; min-width:0; }
.alias-identity .status-pill { flex:none; }
.alias-row-actions { flex:none; }
.desk-small-button { display:inline-flex; align-items:center; justify-content:center; min-height:36px; padding:6px 12px; border:1px solid var(--nline); border-radius:var(--pill); background:var(--night3); color:var(--ntext); font-size:var(--small); line-height:1.4; }
.desk-small-button:hover { background:var(--nline); color:var(--paper); }
.alias-empty strong { display:block; font-weight:500; color:var(--ntext); font-size:var(--body); }
.alias-empty p { margin-top:8px; }
.alias-boundary { margin-top:24px; color:var(--nmuted); font-size:var(--small); }
.alias-statistics { margin-top:32px; padding:24px; border-radius:var(--r1); background:var(--night3); color:var(--ntext); }
.statistics-heading { display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:16px; }
.statistics-heading h2 { font-size:var(--body-lead); line-height:1.4; font-weight:500; }
.statistics-heading p { margin-top:8px; color:var(--nmuted); }
.statistics-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-top:24px; }
.statistics-grid dt { font-size:var(--small); color:var(--nmuted); }
.statistics-grid dd { margin-top:8px; font-family:var(--mono); font-size:var(--h2-compact); line-height:1.3; color:var(--ntext); }
.statistics-senders { list-style:none; margin-top:24px; display:grid; gap:8px; font-size:var(--small); color:var(--nmuted); overflow-wrap:anywhere; }
.archive-top { align-items:flex-start; }
.archive-top > div:first-child { max-width:760px; min-width:0; }
.archive-top .section-intro { font-size:var(--body); margin-top:24px; }
.archive-top .filter { flex:none; }
.archive-row-main { display:grid; gap:4px; min-width:0; }
.archive-row-main strong { font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.archive-row-meta time { flex:none; white-space:nowrap; color:var(--muted); }
.archive-detail-identity { min-width:0; }
.archive-detail-identity h3 { margin-top:16px; }
.archive-detail-identity .status-pill { margin:0; }
.archive-detail-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; flex:none; }
.archive-detail-actions button { min-height:36px; height:auto; padding:8px 14px; font-size:var(--small); align-self:center; }
.archive-frame { display:block; width:100%; min-height:360px; border:0; border-radius:var(--r1); background:var(--paper); color:var(--ink); }
.archive-files { margin-top:24px; display:flex; flex-wrap:wrap; gap:12px; }
.attachment-button { display:inline-flex; align-items:center; justify-content:center; max-width:100%; padding:10px 16px; border:1px solid var(--line); border-radius:var(--pill); background:var(--paper); color:var(--ink); font-size:var(--body-ui); line-height:1.5; overflow-wrap:anywhere; text-align:left; }
.attachment-button:hover { background:var(--line); color:var(--ink); }
.archive-image-notice { margin:0 0 24px; font-size:var(--body-ui); color:var(--muted); }
.surface-safety .eyebrow { margin-bottom:20px; }
.safety-intro { margin-top:24px; max-width:940px; font-size:var(--body-ui); color:var(--muted); }
.safety-subtitle { font-size:var(--body-lead); line-height:1.4; font-weight:500; }
.safety-copy { margin-top:12px; color:var(--muted); font-size:var(--body-ui); }
.twofa-disable-panel { margin-top:24px; padding-top:24px; border-top:1px solid var(--line); }
.secret-line code { font-size:var(--body-ui); font-weight:500; letter-spacing:0; }
.secret-line .btn { min-height:36px; padding:8px 16px; font-size:var(--small); }
.twofa-actions .btn { min-height:48px; }
.desk-endnote { max-width:900px; font-size:var(--body-ui); line-height:1.85; color:var(--muted); }
body.desk-dialog-open { overflow:hidden; }

@media (max-width:960px) {
  .auth-layout { grid-template-columns:minmax(0,1fr); gap:40px; align-items:start; }
  .auth-panel { order:1; width:100%; max-width:600px; margin:0 auto; }
  .auth-story { order:2; width:100%; max-width:700px; margin:0 auto; }
  .alias-mast { flex-wrap:wrap; gap:24px; }
  .archive-top { flex-wrap:wrap; }
}
@media (max-width:860px) {
  .read.mobile-reader { top:0; bottom:auto; height:100dvh; padding-top:var(--header-h); z-index:100; }
  .mobile-reader .r-act { top:var(--header-h); }
  .read.mobile-reader::before { content:""; display:block; position:fixed; top:0; left:0; right:0; height:var(--header-h); background:var(--night); z-index:3; }
  .read.mobile-reader .r-act { position:sticky; margin-top:0; }
  .mobile-reader.is-empty .r-act { margin-top:0; }
  .alias-identity { align-items:center; }
}
@media (max-width:720px) {
  .alias-row { grid-template-columns:minmax(0,1fr); }
  .alias-identity { display:grid; grid-template-columns:minmax(0,1fr); justify-items:start; gap:8px; }
  .alias-address { display:block; width:100%; overflow-wrap:anywhere; }
  .alias-compose { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; }
  .alias-compose button { width:100%; }
  .prefix-group { flex-wrap:wrap; padding:0 16px 12px; }
  .prefix-group input { flex-basis:100%; padding-inline:0; }
  .alias-quota { white-space:normal; }
  .statistics-grid { gap:16px; }
}
@media (max-width:560px) {
  .signin-proof { gap:16px; }
  .signin-proof strong { font-size:var(--h2-compact); }
  .signin-route { padding:8px 16px; }
  .signin-route-item { grid-template-columns:24px minmax(0,1fr); }
  .signin-route-item .status-pill { grid-column:2; justify-self:start; }
  .signin-card-heading { margin-bottom:24px; }
  .signin-legal { margin-top:24px; }
  .session-identity { width:100%; }
  .session-actions { width:100%; }
  .alias-surface h1 { font-size:var(--h2-compact); line-height:1.35; }
  .alias-statistics { padding:20px 16px; }
  .statistics-grid dd { font-size:var(--h3); }
  .archive-row-meta { flex-wrap:wrap; gap:12px; }
  .archive-detail-header { gap:24px; }
  .archive-detail-actions { flex-wrap:wrap; }
  .archive-detail-actions button { flex:none; }
  .twofa-actions input { width:min(160px,100%); }
  .twofa-actions { gap:12px; }
  .twofa-actions button { max-width:100%; white-space:normal; }
  .secret-line { align-items:center; }
  .secret-line code { flex-basis:100%; }
  .desk-small-button { min-height:40px; }
}

/* Targeted interaction and containment repairs. */
header.top {
  position:sticky;
  top:0;
  z-index:50;
}
.brand-name {
  display:inline-block;
  flex:none;
  white-space:nowrap;
  overflow:visible;
}
.brand img[src$="swiftfwd-mark.svg"] {
  background:transparent;
  color:var(--ink, CanvasText);
  filter:none;
  flex:none;
}
[data-site-nav] a[aria-current="page"],
[data-nav-drawer] a[aria-current="page"] {
  background:color-mix(in srgb, currentColor 14%, transparent);
  color:inherit;
  padding-inline:12px;
}
.reader {
  min-width:0;
}
.reader-letterhead {
  display:flex;
  align-items:center;
  min-width:0;
}
[data-reader].is-real [data-demo-brand],
[data-reader].is-real [data-demo-badge] {
  display:none;
}
[data-demo-brand].logo,
[data-demo-brand] .logo,
[data-demo-brand] .sender-mark,
[data-demo-brand].sender-mark,
.reader-letterhead [data-demo-brand],
.reader-letterhead .logo,
[data-reader-mark],
[data-reader-mark].sender-mark {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  place-items:center;
  flex:none;
}
.reader:not(.mobile-reader) [data-reader-close],
[data-reader]:not(.mobile-reader) [data-reader-close] {
  display:none;
}
.archive-detail {
  min-width:0;
  max-width:100%;
  overflow-wrap:anywhere;
}
.archive-detail iframe,
.reader-frame,
.archive-frame {
  display:block;
  width:100%;
  min-width:0;
  max-width:100%;
  border:0;
}
[data-archive-body] {
  min-width:0;
  max-width:100%;
}
[data-login] label {
  display:block;
  margin-bottom:8px;
}
.auth-card h2 {
  font-size:var(--h3);
  line-height:1.3;
}
[data-filter-trigger] {
  display:inline-flex;
  align-items:center;
  position:relative;
  gap:10px;
  margin-block:16px;
}
.archive-filter {
  display:inline-flex;
  align-items:center;
}
.filter-menu button,
.filter-menu [role="option"],
[data-filter-menu] [data-filter-value] {
  display:flex;
  align-items:center;
}
.filter-chevron {
  display:inline-block;
  position:absolute;
  right:14px;
  top:50%;
  flex:none;
  width:7px;
  height:7px;
  border:0;
  border-right:1px solid currentColor;
  border-bottom:1px solid currentColor;
  transform:translateY(-65%) rotate(45deg);
  pointer-events:none;
}
.status-pill.is-active {
  background:color-mix(in srgb, currentColor 20%, transparent);
  color:inherit;
  border:1px solid currentColor;
}
.status-pill.is-paused {
  background:transparent;
  color:inherit;
  border:1px dashed currentColor;
}
html[lang="zh"] h1,
html[lang="zh"] h2 {
  text-wrap:balance;
}
.unread-dot {
  left:12px;
}
section .eyebrow + h1,
section .eyebrow + h2,
section .kicker + h1,
section .kicker + h2 {
  margin-top:20px;
}
[data-twofa-confirm-form] {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  margin-top:24px;
}
.twofa-actions [data-twofa-confirm] {
  margin:0;
}
[data-twofa-confirm-form].form-actions,
[data-twofa-confirm-form] .form-actions {
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:24px;
}
[data-twofa-confirm-form] .actions,
[data-twofa-confirm-form] .twofa-actions {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  margin-top:24px;
}
[data-twofa-confirm-form] .actions [data-twofa-confirm],
[data-twofa-confirm-form] .twofa-actions [data-twofa-confirm] {
  margin:0;
}
@media (max-width:720px) {
  [data-lang-trigger] .lang-text {
    display:none;
  }
}
@media (max-width:860px) {
  [data-reader].mobile-reader {
    position:fixed;
    inset:auto 0 0;
    top:var(--header-height, 64px);
    z-index:100;
    width:100%;
    max-width:100%;
    height:calc(100dvh - var(--header-height, 64px));
    max-height:calc(100dvh - var(--header-height, 64px));
    display:flex;
    flex-direction:column;
    overflow-y:auto;
    overscroll-behavior:auto;
  }
  [data-reader].mobile-reader .r-act {
    position:sticky;
    top:0;
    z-index:2;
    order:-1;
    flex-shrink:0;
  }
  [data-reader].mobile-reader [data-reader-close] {
    display:inline-flex;
    align-items:center;
  }
}

/* Privacy policy: readable records and explicit retention boundaries. */
.privacy-hero { padding:80px 0 48px; background:var(--paper); color:var(--ink); }
.privacy-hero-copy { max-width:840px; }
.privacy-hero-copy h1 { margin-top:20px; font-size:var(--h2); line-height:1.3; font-weight:700; letter-spacing:-.02em; color:var(--ink); }
.privacy-hero-copy .section-intro { max-width:760px; margin-top:24px; font-size:var(--body-lead); color:var(--muted); }
.privacy-policy-meta { display:flex; flex-wrap:wrap; gap:24px 48px; margin-top:40px; }
.privacy-policy-meta > div { display:grid; gap:4px; min-width:0; }
.privacy-policy-meta dt { font-size:var(--small); color:var(--muted); }
.privacy-policy-meta dd { font-size:var(--body-ui); color:var(--ink); overflow-wrap:anywhere; }
.privacy-policy-meta a { text-decoration:underline; text-underline-offset:4px; }
.privacy-glance.legal-glance { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-top:48px; }
.privacy-glance-card { padding:32px; border-radius:var(--r2); background:var(--mist); color:var(--ink); min-width:0; }
.privacy-glance-card > svg { display:block; width:32px; height:32px; color:var(--jade-hover); }
.privacy-glance-card h2 { margin-top:24px; font-size:var(--body-lead); line-height:1.5; font-weight:500; letter-spacing:0; }
.privacy-glance-card p { margin-top:12px; font-size:var(--body-ui); line-height:1.85; color:var(--muted); }
.privacy-jump-links { display:flex; flex-wrap:wrap; gap:12px 28px; margin-top:32px; font-size:var(--body-ui); }
.privacy-jump-links a { padding-block:4px; color:var(--jade-hover); text-decoration:underline; text-underline-offset:5px; }
.privacy-section { padding:80px 0; scroll-margin-top:calc(var(--header-h) + 24px); }
.privacy-section-layout { display:grid; grid-template-columns:180px minmax(0,1fr); gap:48px; align-items:start; }
.privacy-section-label { padding-top:6px; display:grid; gap:8px; }
.privacy-section-label > span { font-family:var(--mono); font-size:var(--body-ui); color:var(--jade-hover); }
.privacy-section-label p { font-size:var(--body-ui); color:var(--muted); }
.privacy-prose { max-width:972px; }
.privacy-prose h2 { margin:0 0 24px; font-size:var(--h2-compact); line-height:1.4; font-weight:700; letter-spacing:-.02em; }
.privacy-prose h3 { margin:32px 0 16px; font-size:var(--body-lead); line-height:1.5; font-weight:500; }
.privacy-prose > p { max-width:840px; }
.privacy-prose strong { font-weight:500; }
.privacy-table-scroll { margin:32px 0; border:1px solid var(--line); border-radius:var(--r1); background:var(--paper); color:var(--ink); }
.privacy-data-table { min-width:760px; table-layout:fixed; }
.privacy-boundary-table { min-width:640px; table-layout:fixed; }
.privacy-data-table caption,.privacy-boundary-table caption { padding:16px 20px; text-align:left; font-size:var(--body-ui); font-weight:500; background:var(--paper); color:var(--ink); }
.privacy-data-table th,.privacy-data-table td,.privacy-boundary-table th,.privacy-boundary-table td { padding:16px 20px; line-height:1.8; vertical-align:top; }
.privacy-data-table thead th,.privacy-boundary-table thead th { background:var(--mist); color:var(--ink); font-size:var(--small); }
.privacy-data-table th:first-child { width:16%; }
.privacy-boundary-table th:first-child { width:24%; }
.privacy-data-table tbody th,.privacy-boundary-table tbody th { background:var(--paper); color:var(--ink); font-size:var(--body-ui); }
.privacy-data-table td,.privacy-boundary-table td { background:var(--paper); color:var(--muted); }
.privacy-data-table tr:last-child > *,.privacy-boundary-table tr:last-child > * { border-bottom:0; }
.privacy-retention-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:32px 0; }
.privacy-retention-card { min-width:0; padding:28px 24px; border-radius:var(--r2); background:var(--night2); color:var(--ntext); }
.privacy-retention-card .privacy-retention-number { margin:0; display:flex; align-items:baseline; gap:8px; font-family:var(--mono); font-size:var(--h2); font-weight:500; line-height:1.2; letter-spacing:-.02em; color:var(--jade-soft); }
.privacy-retention-number span { font-family:var(--sans); font-size:var(--body-ui); font-weight:400; letter-spacing:0; color:var(--nmuted); }
.privacy-retention-card h3 { margin:24px 0 12px; font-size:var(--body-lead); line-height:1.5; font-weight:500; color:var(--ntext); }
.privacy-retention-card > p:not(.privacy-retention-number) { margin:0; font-size:var(--body-ui); line-height:1.85; color:var(--nmuted); }
.privacy-boundary-note { margin:32px 0; padding:24px; border:1px solid var(--line); border-radius:var(--r1); background:var(--paper); color:var(--ink); }
.privacy-boundary-note h3 { margin:0 0 12px; font-size:var(--body-lead); }
.privacy-boundary-note p { margin:0; font-size:var(--body-ui); color:var(--muted); }
.privacy-mail-path { display:grid; gap:24px; counter-reset:privacy-path; list-style:none; padding:0; margin:32px 0; }
.privacy-prose .privacy-mail-path { padding:0; }
.privacy-mail-path > li { position:relative; padding:24px 24px 24px 72px; border-radius:var(--r1); background:var(--mist); color:var(--ink); counter-increment:privacy-path; }
.privacy-mail-path > li::before { content:counter(privacy-path,decimal-leading-zero); position:absolute; left:24px; top:26px; font-family:var(--mono); font-size:var(--body-ui); color:var(--jade-hover); }
.privacy-mail-path h3 { margin:0 0 12px; font-size:var(--body-lead); }
.privacy-mail-path p { margin:0; font-size:var(--body); color:var(--muted); }
.privacy-storage-list { display:grid; gap:24px; margin:32px 0; }
.privacy-storage-list > div { display:grid; grid-template-columns:160px minmax(0,1fr); gap:24px; padding:24px; border-radius:var(--r1); background:var(--paper); color:var(--ink); }
.privacy-storage-list dt { font-size:var(--body); font-weight:500; }
.privacy-storage-list dd { font-size:var(--body-ui); color:var(--muted); }
.privacy-control-list { display:grid; gap:16px; margin:32px 0; }
.privacy-control-list li { padding-left:4px; }
.privacy-contact-panel { display:flex; align-items:center; justify-content:space-between; gap:32px; margin:32px 0 40px; padding:32px; border-radius:var(--r2); background:var(--mist); color:var(--ink); }
.privacy-contact-panel > div { min-width:0; }
.privacy-contact-panel h3 { margin:0 0 12px; font-size:var(--body-lead); }
.privacy-contact-panel p { margin:0; font-size:var(--body-ui); color:var(--muted); }
.privacy-contact-panel .btn { flex:none; max-width:100%; }
.privacy-end-actions { margin-top:32px; }

@media (max-width:860px) {
  .privacy-hero { padding:48px 0 40px; }
  .privacy-hero-copy h1 { font-size:var(--h2-compact); line-height:1.35; }
  .privacy-hero-copy .section-intro { font-size:var(--body); }
  .privacy-policy-meta { gap:20px 32px; margin-top:32px; }
  .privacy-glance.legal-glance { grid-template-columns:minmax(0,1fr); gap:16px; margin-top:32px; }
  .privacy-glance-card { padding:24px; }
  .privacy-glance-card h2 { margin-top:20px; }
  .privacy-jump-links { gap:8px 20px; margin-top:24px; }
  .privacy-section { padding:48px 0; }
  .privacy-section-layout { grid-template-columns:minmax(0,1fr); gap:24px; }
  .privacy-section-label { display:flex; align-items:center; gap:12px; padding-top:0; }
  .privacy-prose h2 { font-size:var(--h3); }
  .privacy-prose h3 { font-size:var(--body-lead); }
  .privacy-retention-grid { grid-template-columns:minmax(0,1fr); }
  .privacy-retention-card { padding:24px; }
  .privacy-retention-card .privacy-retention-number { font-size:var(--h2-compact); }
  .privacy-retention-card h3 { margin-top:16px; }
  .privacy-storage-list > div { grid-template-columns:minmax(0,1fr); gap:12px; padding:20px; }
  .privacy-contact-panel { flex-direction:column; align-items:flex-start; padding:24px; gap:24px; }
  .privacy-contact-panel .btn { white-space:normal; height:auto; }
  .privacy-mail-path > li { padding:24px 20px 24px 60px; }
  .privacy-mail-path > li::before { left:20px; }
  .privacy-boundary-note { padding:20px; }
}

/* Terms use the approved typography and surface system. */
.terms-hero { padding:80px 0 64px; background:var(--mist); color:var(--ink); }
.terms-heading { max-width:880px; margin:0 auto; text-align:center; }
.terms-heading .eyebrow { text-align:center; margin-bottom:24px; }
.terms-heading h1 { margin:0; font-size:var(--h2); font-weight:700; line-height:1.3; letter-spacing:-.02em; }
.terms-heading .section-intro { max-width:720px; margin:24px auto 0; }
.terms-date { margin-top:24px; font-size:var(--small); color:var(--muted); }
.overview-grid.terms-overview-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-top:48px; }
.overview-card.terms-overview-card { display:flex; flex-direction:column; align-items:flex-start; min-width:0; padding:32px; border-radius:var(--r2); background:var(--paper); color:var(--ink); }
.terms-card-label { font-size:var(--small); font-weight:500; color:var(--muted); }
.terms-overview-card > strong { display:block; margin-top:16px; font-size:var(--h2-compact); line-height:1.4; font-weight:500; letter-spacing:-.02em; }
.terms-overview-card > strong small { font-size:var(--body-ui); letter-spacing:0; font-weight:400; }
.terms-overview-card > p { margin-top:16px; font-size:var(--body-ui); color:var(--muted); }
.terms-overview-card > a { display:inline-block; margin-top:28px; font-size:var(--body-ui); font-weight:500; color:var(--jade-hover); }
.terms-overview-card > a:hover { text-decoration:underline; text-underline-offset:3px; }
.terms-document { display:grid; grid-template-columns:240px minmax(0,1fr); gap:64px; align-items:start; padding-top:64px; padding-bottom:96px; }
.terms-index { position:sticky; top:calc(var(--header-h) + 24px); padding:24px; background:var(--mist); color:var(--ink); border-radius:var(--r2); font-size:var(--body-ui); }
.terms-index > p { font-weight:500; }
.terms-index ol { margin-top:20px; padding-left:20px; }
.terms-index li + li { margin-top:12px; }
.terms-index a:hover { color:var(--jade-hover); }
.terms-policy-link { display:inline-block; margin-top:24px; color:var(--jade-hover); font-size:var(--small); }
.terms-copy { min-width:0; }
.terms-section { scroll-margin-top:calc(var(--header-h) + 32px); }
.terms-section + .terms-section { margin-top:64px; }
.terms-copy.prose .terms-section-number { margin:0 0 20px; font-size:var(--small); font-weight:500; color:var(--jade-hover); letter-spacing:.04em; }
.terms-copy.prose h2 { margin:0 0 24px; font-size:var(--h2-compact); line-height:1.4; font-weight:700; letter-spacing:-.02em; }
.terms-copy.prose h3 { margin:0 0 16px; font-size:var(--body-lead); line-height:1.5; font-weight:500; }
.terms-copy.prose .terms-section > p:last-child { margin-bottom:0; }
.terms-table-scroll { margin-top:32px; margin-bottom:32px; }
.terms-table-scroll table { min-width:580px; }
.terms-table-scroll caption { padding-bottom:16px; color:var(--muted); font-size:var(--small); text-align:left; caption-side:top; }
.terms-table-scroll th,.terms-table-scroll td { padding:16px 12px; vertical-align:top; }
.terms-table-scroll th[scope="row"] { width:24%; background:var(--paper); color:var(--ink); }
.terms-table-scroll td:nth-child(2) { width:30%; }
.terms-use-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin:32px 0; }
.terms-use-card { min-width:0; padding:24px; background:var(--mist); color:var(--ink); border:1px solid var(--line); border-radius:var(--r2); }
.terms-copy.prose .terms-use-card h3 { display:flex; align-items:flex-start; gap:12px; margin:0 0 24px; }
.terms-use-card h3 svg { width:24px; height:24px; flex:none; color:var(--jade-hover); }
.terms-use-restricted h3 svg { color:var(--ink); }
.terms-copy.prose .terms-use-card ul { list-style:none; padding:0; margin:0; font-size:var(--body-ui); }
.terms-use-card li + li { margin-top:20px; }
.terms-use-card li { color:var(--muted); }
.terms-use-card li strong { font-weight:500; color:var(--ink); }
.terms-responsibility-note { margin:32px 0; padding:24px 32px; background:var(--mist); color:var(--ink); border-radius:var(--r2); }
.terms-copy.prose .terms-responsibility-note p { margin:0; font-size:var(--body-ui); color:var(--muted); }
.terms-boundary-list { display:grid; gap:24px; margin:32px 0; padding:32px; border:1px solid var(--line); border-radius:var(--r2); background:var(--paper); color:var(--ink); }
.terms-copy.prose .terms-boundary-list h3 { margin:0 0 8px; }
.terms-copy.prose .terms-boundary-list p { margin:0; color:var(--muted); font-size:var(--body-ui); }
.terms-next { padding:80px 0; background:var(--night); color:var(--ntext); text-align:center; }
.terms-next-inner { display:flex; flex-direction:column; align-items:center; }
.terms-next .eyebrow { margin:0 0 24px; color:var(--jade-soft); text-align:center; }
.terms-next h2 { margin:0; font-size:var(--h2-compact); line-height:1.3; }
.terms-next .section-intro { max-width:680px; margin:24px auto 0; color:var(--nmuted); }
.terms-next .actions { justify-content:center; margin-top:32px; }
.terms-footer-space { height:48px; background:var(--mist); }

@media (max-width:860px) {
  .terms-hero { padding:48px 0; }
  .terms-heading h1 { font-size:var(--h2); }
  .overview-grid.terms-overview-grid { grid-template-columns:minmax(0,1fr); gap:16px; margin-top:32px; }
  .overview-card.terms-overview-card { padding:24px; }
  .terms-overview-card > strong { font-size:var(--h2-compact); }
  .terms-document { grid-template-columns:minmax(0,1fr); gap:40px; padding-top:40px; padding-bottom:64px; }
  .terms-index { position:static; }
  .terms-index ol { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 24px; }
  .terms-index li + li { margin-top:0; }
  .terms-use-grid { gap:16px; }
  .terms-use-card { padding:24px 20px; }
  .terms-section + .terms-section { margin-top:48px; }
  .terms-next { padding:64px 0; }
  .terms-next h2 { font-size:var(--h2-compact); }
}
@media (max-width:560px) {
  .terms-heading h1 { font-size:var(--h2-compact); line-height:1.35; }
  .terms-heading .section-intro { font-size:var(--body); }
  .terms-date { line-height:1.8; }
  .terms-index ol { grid-template-columns:minmax(0,1fr); }
  .terms-copy.prose h2 { font-size:var(--h3); }
  .terms-copy.prose h3 { font-size:var(--body-lead); }
  .terms-use-grid { grid-template-columns:minmax(0,1fr); }
  .terms-responsibility-note,.terms-boundary-list { padding:24px 20px; }
  .terms-next .actions { width:100%; flex-direction:column; align-items:center; }
  .terms-next .btn { max-width:100%; height:auto; white-space:normal; }
  .terms-footer-space { height:32px; }
}

/* Website-to-alias tracing workspace. */
.trace-hero { padding:80px 0 64px; background:var(--paper); color:var(--ink); }
.trace-hero-copy { max-width:880px; margin:0 auto; text-align:center; }
.trace-hero-copy .eyebrow { text-align:center; }
.trace-hero-copy h1 { margin-top:20px; font-size:var(--h2); line-height:1.3; font-weight:700; letter-spacing:-.02em; }
.trace-hero-copy h1 em { font-style:normal; color:var(--jade); }
.trace-hero-copy .section-intro { max-width:720px; margin:24px auto 0; font-size:var(--body-lead); }
.trace-anchor { display:inline-flex; align-items:center; gap:16px; margin-top:32px; padding:8px 0; color:var(--jade-hover); font-size:var(--body-ui); font-weight:500; }
.trace-anchor:hover { color:var(--ink); }
.trace-route { display:grid; grid-template-columns:minmax(0,1fr) 32px minmax(0,1fr) 32px minmax(0,1fr); align-items:center; gap:24px; margin-top:64px; padding:40px; border-radius:var(--r2); background:var(--night); color:var(--ntext); }
.trace-route-item { display:flex; align-items:center; gap:16px; min-width:0; }
.trace-route-item > div { min-width:0; }
.trace-route-item strong { display:block; font-size:var(--body-lead); font-weight:500; }
.trace-route-item > div > span { display:block; margin-top:8px; font-size:var(--small); color:var(--nmuted); }
.trace-route-number { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; flex:none; border-radius:var(--r1); background:var(--night3); color:var(--jade-soft); font-family:var(--mono); font-size:var(--body-ui); }
.trace-route-arrow { width:32px; height:24px; color:var(--nmuted); }
.trace-boundary { max-width:920px; margin:32px auto 0; font-size:var(--body-ui); color:var(--muted); text-align:center; }
.trace-boundary strong { font-weight:500; color:var(--ink); }
.trace-section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:32px; margin-bottom:48px; }
.trace-section-head > div { max-width:800px; min-width:0; }
.trace-section-head .btn { flex:none; }
.trace-section-head .section-intro { font-size:var(--body); }
.trace-section-head .section-intro a,.trace-check-layout .section-intro a,.trace-header-note a { color:var(--jade-hover); text-decoration:underline; text-underline-offset:3px; }
.trace-local-tag { display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid var(--line); border-radius:var(--pill); background:var(--paper); color:var(--muted); font-size:var(--small); flex:none; }
.trace-local-tag svg { width:20px; height:20px; flex:none; }
.trace-register { border-radius:var(--r2); background:var(--paper); color:var(--ink); padding:40px; }
.trace-form { scroll-margin-top:calc(var(--header-h) + 24px); }
.trace-form-top h3 { font-size:var(--h3); line-height:1.4; font-weight:500; }
.trace-form-top p { color:var(--muted); font-size:var(--body-ui); margin-top:8px; }
.trace-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-top:32px; }
.trace-fields .field { min-width:0; }
.trace-field-help { margin-top:12px; font-size:var(--small); color:var(--muted); line-height:1.75; }
.trace-form-actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-top:24px; }
.trace-form-status { flex-basis:100%; font-size:var(--body-ui); color:var(--jade-hover); overflow-wrap:anywhere; }
.trace-form-status:empty { display:none; }
.trace-storage-warning { padding:16px 20px; margin-top:24px; border:1px solid var(--line); border-radius:var(--r1); background:var(--mist); color:var(--ink); font-size:var(--body-ui); }
.trace-records-head { display:flex; align-items:center; flex-wrap:wrap; gap:16px; margin-top:48px; margin-bottom:24px; }
.trace-records-head h3 { font-size:var(--body-lead); font-weight:500; line-height:1.4; }
.trace-records-empty { display:flex; align-items:center; gap:24px; padding:24px; border-radius:var(--r1); background:var(--mist); color:var(--ink); }
.trace-records-empty > svg { width:48px; height:48px; color:var(--muted); flex:none; }
.trace-records-empty h3 { font-size:var(--body-lead); font-weight:500; line-height:1.4; }
.trace-records-empty p { margin-top:8px; font-size:var(--body-ui); color:var(--muted); }
.trace-table-wrap { min-width:0; }
.trace-record-table { table-layout:fixed; }
.trace-record-table th:nth-child(1) { width:25%; }
.trace-record-table th:nth-child(2) { width:34%; }
.trace-record-table th:nth-child(3) { width:17%; }
.trace-record-table th:nth-child(4) { width:24%; }
.trace-record-table td { overflow-wrap:anywhere; font-size:var(--body-ui); }
.trace-record-table td > strong { font-size:var(--body-ui); font-weight:500; }
.trace-record-purpose { display:block; margin-top:4px; color:var(--muted); font-size:var(--small); }
.trace-record-address { font-family:var(--mono); font-size:var(--small); letter-spacing:0; overflow-wrap:anywhere; }
.trace-record-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.trace-record-action { display:inline-flex; align-items:center; justify-content:center; padding:6px 10px; min-height:36px; border:1px solid var(--line); border-radius:var(--pill); background:var(--paper); color:var(--ink); font-size:var(--small); }
.trace-record-action:hover { background:var(--mist); color:var(--jade-hover); }
.trace-after-note { max-width:940px; margin-top:24px; font-size:var(--body-ui); color:var(--muted); }
.trace-check-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:64px; align-items:start; }
.trace-check-layout > div { min-width:0; }
.trace-check-layout .section-intro { font-size:var(--body); }
.trace-check-layout strong { font-weight:500; }
.trace-header-note { margin-top:32px; padding:24px; border-radius:var(--r1); background:var(--mist); color:var(--ink); }
.trace-header-note h3 { font-size:var(--body-lead); font-weight:500; line-height:1.4; }
.trace-header-note p { margin-top:12px; font-size:var(--body-ui); color:var(--muted); }
.trace-check-panel { padding:32px; border:1px solid var(--line); border-radius:var(--r2); background:var(--paper); color:var(--ink); }
.trace-match-button { margin-top:24px; }
.trace-match-result { margin-top:32px; padding:24px; border-radius:var(--r1); background:var(--mist); color:var(--ink); }
.trace-match-result .status-pill { background:var(--paper); color:var(--muted); border:1px solid var(--line); }
.trace-match-result h3 { margin-top:20px; font-size:var(--body-lead); font-weight:500; line-height:1.5; }
.trace-match-result p { margin-top:12px; font-size:var(--body-ui); color:var(--muted); }
.trace-match-records { list-style:none; display:grid; gap:16px; margin-top:24px; padding:0; }
.trace-match-records li + li { padding-top:16px; border-top:1px solid var(--line); }
.trace-match-records strong { display:block; font-size:var(--body-ui); font-weight:500; overflow-wrap:anywhere; }
.trace-match-records span { display:block; margin-top:4px; font-size:var(--small); color:var(--muted); overflow-wrap:anywhere; }
.trace-evidence-head { max-width:800px; }
.trace-evidence-grid { margin-top:64px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.trace-evidence-card { padding:32px; border-radius:var(--r2); background:var(--night2); color:var(--ntext); min-width:0; }
.trace-evidence-level { display:block; font-size:var(--small); color:var(--jade-soft); }
.trace-evidence-card h3 { margin-top:20px; font-size:var(--h3); font-weight:500; line-height:1.4; }
.trace-evidence-card p { margin-top:16px; font-size:var(--body); color:var(--nmuted); }
.trace-evidence-card dl { display:grid; grid-template-columns:88px minmax(0,1fr); gap:16px; margin-top:24px; font-size:var(--body-ui); }
.trace-evidence-card dt { font-weight:500; color:var(--ntext); }
.trace-evidence-card dd { color:var(--nmuted); }
.trace-isolation { list-style:none; display:grid; gap:16px; counter-reset:none; }
.trace-isolation li { display:grid; grid-template-columns:48px minmax(0,1fr); align-items:start; gap:24px; padding:32px; border-radius:var(--r2); background:var(--paper); color:var(--ink); }
.trace-step-number { display:flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:var(--pill); background:var(--mist); color:var(--jade-hover); font-family:var(--mono); font-size:var(--body-ui); }
.trace-isolation h3 { font-size:var(--h3); font-weight:500; line-height:1.4; }
.trace-isolation p { margin-top:12px; max-width:900px; font-size:var(--body); color:var(--muted); }
.trace-stop-note { display:flex; align-items:flex-start; gap:16px; margin-top:32px; color:var(--muted); font-size:var(--body-ui); }
.trace-stop-note svg { width:24px; height:24px; flex:none; color:var(--jade-hover); }
.trace-stop-note strong { font-weight:500; color:var(--ink); }
.trace-examples-head { max-width:800px; }
.trace-example-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-top:48px; }
.trace-example { min-width:0; padding:32px 24px; border-radius:var(--r2); background:var(--mist); color:var(--ink); }
.trace-example > svg { width:32px; height:32px; color:var(--jade-hover); }
.trace-example h3 { margin-top:24px; font-size:var(--h3); line-height:1.4; font-weight:500; }
.trace-example-address { margin-top:16px; font-size:var(--small); font-family:var(--mono); letter-spacing:0; color:var(--jade-hover); overflow-wrap:anywhere; }
.trace-example dl { display:grid; grid-template-columns:72px minmax(0,1fr); gap:8px 16px; margin-top:24px; font-size:var(--body-ui); }
.trace-example dt { color:var(--muted); }
.trace-example dd { color:var(--ink); }
.trace-example > p:last-child { font-size:var(--body-ui); color:var(--muted); margin-top:24px; }
.trace-address-choice { display:flex; justify-content:space-between; align-items:center; gap:32px; margin-top:40px; padding:32px; border:1px solid var(--line); border-radius:var(--r2); background:var(--paper); color:var(--ink); }
.trace-address-choice > div { max-width:860px; min-width:0; }
.trace-address-choice h3 { font-size:var(--body-lead); line-height:1.4; font-weight:500; }
.trace-address-choice p { margin-top:12px; font-size:var(--body-ui); color:var(--muted); }
.trace-address-choice .btn { flex:none; }
.trace-outcome { padding:96px 0; text-align:center; }
.trace-outcome .eyebrow { text-align:center; }
.trace-outcome .section-intro { max-width:680px; margin:24px auto 0; font-size:var(--body); }
.trace-outcome .actions { justify-content:center; margin-top:32px; }
.trace-outcome-summary { max-width:760px; margin:32px auto 0; padding:24px 32px; background:var(--night3); color:var(--ntext); border-radius:var(--r2); overflow-wrap:anywhere; }
.trace-outcome-summary strong { font-weight:500; font-size:var(--body-lead); }
.trace-outcome-summary p { margin-top:12px; color:var(--nmuted); font-size:var(--body-ui); }
.trace-outcome-limit { max-width:780px; margin:32px auto 0; font-size:var(--small); color:var(--nmuted); }
.trace-outcome-limit a { color:var(--jade-soft); text-decoration:underline; text-underline-offset:3px; }
.trace-footer-breath { height:48px; background:var(--mist); color:var(--ink); }

@media (max-width:1100px) {
  .trace-route { gap:16px; padding:32px 24px; }
  .trace-route-item { gap:12px; }
  .trace-route-item strong { font-size:var(--body); }
  .trace-register { padding:32px; }
  .trace-check-layout { gap:40px; }
  .trace-section-head { flex-wrap:wrap; align-items:flex-start; }
  .trace-example-grid { gap:16px; }
}
@media (max-width:860px) {
  .trace-hero { padding:56px 0 48px; }
  .trace-hero-copy h1 { font-size:var(--h2); }
  .trace-route { grid-template-columns:minmax(0,1fr); gap:16px; margin-top:48px; padding:32px; }
  .trace-route-arrow { display:none; }
  .trace-route-item { padding:12px 0; gap:20px; }
  .trace-route-item strong { font-size:var(--body-lead); }
  .trace-route-item > div > span { margin-top:4px; font-size:var(--body-ui); }
  .trace-section-head { margin-bottom:48px; gap:24px; }
  .trace-fields { gap:24px; }
  .trace-record-table,.trace-record-table tbody { display:block; width:100%; }
  .trace-record-table thead { display:none; }
  .trace-record-table tr { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; padding:24px 0; border-top:1px solid var(--line); }
  .trace-record-table td { display:grid; grid-template-columns:96px minmax(0,1fr); gap:8px 16px; border:0; padding:0; align-items:start; }
  .trace-record-table td::before { content:attr(data-label); color:var(--muted); font-size:var(--small); grid-column:1; grid-row:1/3; padding-top:2px; }
  .trace-record-table td > * { grid-column:2; min-width:0; }
  .trace-record-purpose { margin-top:0; }
  .trace-check-layout { grid-template-columns:minmax(0,1fr); gap:32px; }
  .trace-evidence-grid { margin-top:40px; }
  .trace-evidence-card { padding:24px; }
  .trace-evidence-card dl { grid-template-columns:minmax(0,1fr); gap:8px; }
  .trace-evidence-card dt:not(:first-child) { margin-top:12px; }
  .trace-example-grid { grid-template-columns:minmax(0,1fr); gap:24px; }
  .trace-example { padding:32px; }
  .trace-address-choice { flex-direction:column; align-items:flex-start; gap:24px; }
  .trace-outcome { padding:80px 0; }
}
@media (max-width:560px) {
  .trace-hero { padding-top:40px; }
  .trace-hero-copy h1 { font-size:var(--h2-compact); line-height:1.35; }
  .trace-hero-copy h1 br { display:none; }
  .trace-hero-copy .section-intro { font-size:var(--body); }
  .trace-route { padding:20px; margin-top:32px; }
  .trace-route-item { gap:12px; }
  .trace-route-item > div > span { font-size:var(--small); }
  .trace-boundary { text-align:left; margin-top:24px; }
  .trace-register { padding:24px 20px; }
  .trace-fields { grid-template-columns:minmax(0,1fr); }
  .trace-form-top h3 { font-size:var(--body-lead); }
  .trace-records-head { margin-top:32px; }
  .trace-records-empty { flex-direction:column; align-items:flex-start; padding:20px; gap:16px; }
  .trace-record-table td { grid-template-columns:minmax(0,1fr); gap:8px; }
  .trace-record-table td::before { grid-column:1; grid-row:auto; }
  .trace-record-table td > * { grid-column:1; }
  .trace-record-address { font-size:var(--small); }
  .trace-form-actions .btn { flex:1 1 120px; }
  .trace-check-panel { padding:24px 20px; }
  .trace-match-result { padding:20px; }
  .trace-evidence-grid { grid-template-columns:minmax(0,1fr); gap:16px; }
  .trace-evidence-card h3 { font-size:var(--body-lead); }
  .trace-isolation li { grid-template-columns:32px minmax(0,1fr); gap:16px; padding:24px 20px; }
  .trace-step-number { width:32px; height:32px; font-size:var(--small); }
  .trace-isolation h3 { font-size:var(--body-lead); }
  .trace-isolation p { font-size:var(--body-ui); }
  .trace-example { padding:24px; }
  .trace-example h3 { font-size:var(--body-lead); }
  .trace-address-choice { padding:24px; }
  .trace-outcome { padding:64px 0; }
  .trace-outcome-summary { padding:24px 20px; }
  .trace-outcome .actions { flex-direction:column; }
  .trace-outcome .actions .btn { width:100%; }
  .trace-footer-breath { height:32px; }
}


/* Notes index and editorial reading surfaces. */
.notes-hero {
  padding:80px 0 56px;
  background:var(--paper);
  color:var(--ink);
  text-align:center;
}
.notes-hero .eyebrow {
  margin:0 0 24px;
  text-align:center;
}
.notes-hero h1 {
  max-width:900px;
  margin:0 auto;
  font-size:var(--h2);
  line-height:1.3;
  font-weight:700;
  letter-spacing:-.02em;
}
.notes-hero .notes-count {
  display:flex;
  width:fit-content;
  margin:24px auto 0;
  background:var(--mist);
  color:var(--muted);
}
.notes-hero .notes-count:empty {
  display:none;
}
.notes-hero .section-intro {
  max-width:720px;
  margin:24px auto 0;
  color:var(--muted);
  font-size:var(--body-lead);
}
.notes-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
  padding-bottom:96px;
}
.notes-card {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-width:0;
  padding:40px;
  border:1px solid var(--line);
  border-radius:var(--r2);
  background:var(--mist);
  color:var(--ink);
  transition:border-color .18s,transform .18s;
}
.notes-card:hover {
  border-color:var(--jade);
  background:var(--mist);
  color:var(--ink);
  transform:translateY(-3px);
}
.notes-card:focus-visible {
  outline-offset:5px;
}
.notes-card-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  width:100%;
}
.notes-tag {
  background:var(--paper);
  color:var(--jade-hover);
  border:1px solid var(--line);
}
.notes-card-number {
  font-family:var(--mono);
  font-size:var(--body-ui);
  color:var(--muted);
  flex:none;
}
.notes-card h2.notes-card-title {
  margin:40px 0 0;
  font-size:26px;
  font-weight:500;
  line-height:1.5;
  letter-spacing:-.02em;
  overflow-wrap:anywhere;
}
.notes-card-description {
  margin-top:20px;
  margin-bottom:32px;
  font-size:var(--body);
  line-height:1.85;
  color:var(--muted);
}
.notes-card-meta {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px 24px;
  width:100%;
  margin-top:auto;
  padding-top:24px;
  font-size:var(--small);
  line-height:1.6;
  color:var(--muted);
}
.notes-card-meta time {
  color:var(--ink);
}
.notes-noscript {
  padding-bottom:64px;
  color:var(--muted);
  font-size:var(--body-ui);
}
.note-hero {
  padding:64px 0 56px;
  background:var(--mist);
  color:var(--ink);
}
.note-hero-inner {
  max-width:960px;
}
.note-breadcrumb {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 16px;
  margin-bottom:40px;
  font-size:var(--body-ui);
  color:var(--muted);
}
.note-breadcrumb ol {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 16px;
  list-style:none;
  padding:0;
  margin:0;
}
.note-breadcrumb li {
  display:inline-flex;
  align-items:center;
  gap:16px;
  min-width:0;
  overflow-wrap:anywhere;
}
.note-breadcrumb li + li::before {
  content:"/";
  color:var(--muted);
}
.note-breadcrumb a:hover {
  color:var(--jade-hover);
  text-decoration:underline;
  text-underline-offset:4px;
}
.note-hero .eyebrow {
  margin-bottom:24px;
}
.note-hero h1 {
  margin:0;
  font-size:var(--h2);
  font-weight:700;
  line-height:1.35;
  letter-spacing:-.02em;
  overflow-wrap:anywhere;
}
.note-hero h1 em {
  color:var(--jade-hover);
  font-style:normal;
}
.note-hero .section-intro {
  max-width:800px;
  margin-top:24px;
  color:var(--muted);
  font-size:var(--body-lead);
}
.note-meta {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px 24px;
  margin-top:32px;
  color:var(--muted);
  font-size:var(--small);
}
.note-meta .status-pill {
  margin:0;
  border:1px solid var(--line);
  background:var(--paper);
  color:var(--jade-hover);
}
.note-meta time {
  color:var(--ink);
}
.note-meta-detail {
  display:inline-flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}
.note-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 260px;
  align-items:start;
  gap:64px;
  width:min(1120px,calc(100% - 48px));
  margin:64px auto 96px;
}
.note-prose {
  min-width:0;
  font-size:var(--body);
  line-height:1.9;
  color:var(--ink);
}
.note-prose.prose h2 {
  margin:48px 0 24px;
  font-size:26px;
  line-height:1.5;
  font-weight:700;
  letter-spacing:-.02em;
  scroll-margin-top:calc(var(--header-h) + 32px);
}
.note-prose.prose h3 {
  margin:32px 0 16px;
  font-size:var(--body-lead);
  line-height:1.5;
  font-weight:500;
  scroll-margin-top:calc(var(--header-h) + 32px);
}
.note-prose > :first-child {
  margin-top:0;
}
.note-prose p,
.note-prose ul,
.note-prose ol {
  margin-bottom:24px;
}
.note-prose li + li {
  margin-top:12px;
}
.note-prose strong {
  font-weight:500;
}
.note-prose :not(pre) > code {
  padding:2px 6px;
  border-radius:var(--r1);
  background:var(--mist);
  color:var(--ink);
  font-family:var(--mono);
  font-size:var(--body-ui);
  overflow-wrap:anywhere;
}
.note-prose pre {
  max-width:100%;
  margin:32px 0;
  padding:24px;
  overflow-x:auto;
  border-radius:var(--r1);
  background:var(--night2);
  color:var(--ntext);
  font-family:var(--mono);
  font-size:var(--body-ui);
  line-height:1.8;
}
.note-prose figure {
  margin:32px 0;
}
.note-prose figure img,
.note-prose figure > svg {
  display:block;
  width:100%;
  border-radius:var(--r2);
}
.note-prose figcaption {
  margin-top:12px;
  color:var(--muted);
  font-size:var(--small);
}
.note-callout {
  margin:32px 0;
  padding:24px;
  border:1px solid var(--line);
  border-radius:var(--r2);
  background:var(--mist);
  color:var(--ink);
}
.note-callout > svg {
  display:block;
  width:28px;
  height:28px;
  margin-bottom:16px;
  color:var(--jade-hover);
}
.note-prose .note-callout h3 {
  margin:0 0 12px;
}
.note-prose .note-callout p:last-child,
.note-prose .note-callout ul:last-child {
  margin-bottom:0;
}
.note-table {
  margin:32px 0;
  border:1px solid var(--line);
  border-radius:var(--r1);
  background:var(--paper);
  color:var(--ink);
  overflow-x:auto;
}
.note-table table {
  min-width:600px;
  font-size:var(--body-ui);
}
.note-table th,
.note-table td {
  padding:16px;
  vertical-align:top;
  border-color:var(--line);
}
.note-table th {
  background:var(--mist);
  color:var(--ink);
}
.note-table caption {
  padding:16px;
  text-align:left;
  color:var(--muted);
  font-size:var(--small);
}
.note-table tr:last-child > * {
  border-bottom:0;
}
.note-toc {
  position:sticky;
  top:calc(var(--header-h) + 16px);
  min-width:0;
  padding:24px;
  border:1px solid var(--line);
  border-radius:var(--r2);
  background:var(--paper);
  color:var(--ink);
  font-size:var(--body-ui);
}
.note-toc > h2,
.note-toc > p,
.note-toc > summary {
  margin:0;
  font-size:var(--body-ui);
  line-height:1.6;
  font-weight:500;
}
.note-toc ol {
  padding-left:20px;
  margin:20px 0 0;
}
.note-toc li + li {
  margin-top:12px;
}
.note-toc a {
  overflow-wrap:anywhere;
}
.note-toc a:hover {
  color:var(--jade-hover);
}
.note-toc .toc-count {
  margin:20px 0 0;
  color:var(--muted);
  font-size:var(--small);
  font-weight:400;
}
.note-toc summary {
  cursor:pointer;
  list-style:none;
  position:relative;
  padding-right:24px;
}
.note-toc summary::-webkit-details-marker {
  display:none;
}
.note-toc summary::after {
  content:"";
  position:absolute;
  right:3px;
  top:50%;
  width:7px;
  height:7px;
  border-right:1px solid currentColor;
  border-bottom:1px solid currentColor;
  transform:translateY(-65%) rotate(45deg);
}
.note-toc[open] summary::after {
  transform:translateY(-25%) rotate(225deg);
}
.note-prose .note-end-cta {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  margin:48px 0 0;
  padding:32px;
  border-radius:var(--r2);
  background:var(--night);
  color:var(--ntext);
}
.note-prose .note-end-cta h2 {
  margin:0;
  font-size:26px;
  line-height:1.5;
  color:var(--ntext);
}
.note-prose .note-end-cta p {
  margin:20px 0 0;
  color:var(--nmuted);
  font-size:var(--body);
}
.note-end-cta .actions {
  margin-top:32px;
  gap:12px;
}
.note-prose .note-end-cta a.btn.pri {
  background:var(--jade);
  color:var(--jade-ink);
  text-decoration:none;
}
.note-prose .note-end-cta a.btn.pri:hover {
  background:var(--jade-hover);
  color:var(--jade-ink);
}
.note-prose .note-end-cta a.btn.lt {
  background:var(--mist);
  color:var(--ink);
  text-decoration:none;
}
.note-prose .note-end-cta a.btn.lt:hover {
  background:var(--paper);
  color:var(--ink);
}
.note-recommend .recommend-banner {
  display:flex;
  align-items:center;
  gap:12px;
  min-height:80px;
  padding:24px 56px 24px 24px;
  background:var(--night);
  color:var(--jade-soft);
  font-size:var(--small);
}
.note-recommend .recommend-banner svg,
.note-recommend .recommend-banner img {
  width:32px;
  height:32px;
  flex:none;
}
.note-recommend .float-close {
  border:1px solid var(--line);
  background:var(--mist);
  color:var(--ink);
}
.note-recommend .recommend-content .btn {
  max-width:100%;
  white-space:normal;
  height:auto;
  line-height:1.35;
}
.note-recommend .recommend-content a.btn.pri {
  background:var(--jade);
  color:var(--jade-ink);
}
.note-recommend .recommend-content a.btn.pri:hover {
  background:var(--jade-hover);
  color:var(--jade-ink);
}

@media (max-width:860px) {
  .notes-hero {
    padding:48px 0 40px;
  }
  .notes-hero h1 {
    font-size:var(--h2-compact);
  }
  .notes-hero .section-intro {
    font-size:var(--body);
  }
  .notes-grid {
    grid-template-columns:minmax(0,1fr);
    padding-bottom:64px;
  }
  .notes-card {
    padding:32px;
  }
  .notes-card h2.notes-card-title {
    margin-top:32px;
  }
  .note-hero {
    padding:40px 0;
  }
  .note-breadcrumb {
    margin-bottom:32px;
  }
  .note-hero h1 {
    font-size:var(--h2-compact);
    line-height:1.4;
  }
  .note-hero .section-intro {
    font-size:var(--body);
  }
  .note-layout {
    grid-template-columns:minmax(0,1fr);
    gap:32px;
    margin-top:32px;
    margin-bottom:64px;
  }
  .note-toc {
    position:static;
    grid-row:1;
  }
  .note-prose.prose h2 {
    font-size:24px;
    margin-top:40px;
  }
  .note-prose .note-end-cta h2 {
    font-size:24px;
  }
}
@media (max-width:560px) {
  .notes-hero .section-intro br {
    display:none;
  }
  .notes-card {
    padding:24px;
  }
  .notes-card h2.notes-card-title {
    font-size:24px;
    margin-top:28px;
  }
  .notes-card-description {
    margin-bottom:24px;
  }
  .notes-card-meta {
    gap:8px 16px;
    padding-top:16px;
  }
  .note-layout {
    width:calc(100% - 32px);
  }
  .note-meta {
    align-items:flex-start;
    gap:16px;
  }
  .note-toc {
    padding:20px;
  }
  .note-callout,
  .note-prose .note-end-cta {
    padding:24px 20px;
  }
  .note-end-cta .actions {
    flex-direction:column;
    align-items:flex-start;
    width:100%;
  }
  .note-end-cta .btn {
    height:auto;
    max-width:100%;
    white-space:normal;
  }
}


/* Shopping article follows the approved reading and software surfaces. */
.shopping-note-hero { width:min(1120px,calc(100% - 48px)); margin:0 auto; padding-top:96px; color:var(--ink); }
.shopping-crumbs { display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; margin-bottom:32px; font-size:var(--small); color:var(--muted); }
.shopping-crumbs a:hover { color:var(--jade-hover); }
.shopping-note-hero h1 { max-width:900px; font-size:var(--h2); line-height:1.3; font-weight:700; letter-spacing:-.02em; }
.shopping-note-hero .section-intro { max-width:780px; margin-top:24px; font-size:var(--body-lead); }
.shopping-note-meta { margin-top:32px; }
.shopping-note-meta > .status-pill { display:inline-flex; align-items:center; flex-wrap:wrap; gap:8px 12px; padding:8px 16px; background:var(--mist); color:var(--muted); }
.shopping-note-layout { margin-top:48px; }
.shopping-copy > section { scroll-margin-top:calc(var(--header-h) + 32px); }
.shopping-copy > section + section { margin-top:48px; }
.shopping-copy > section > h2 { margin-top:0; }
.shopping-copy li + li { margin-top:8px; }
.shopping-copy li { margin-bottom:0; }
.shopping-copy strong { font-weight:500; }
.shopping-takeaway { display:grid; grid-template-columns:32px minmax(0,1fr); gap:20px; margin-bottom:48px; padding:28px; background:var(--mist); color:var(--ink); border-radius:var(--r2); }
.shopping-takeaway > svg { width:32px; height:32px; color:var(--jade-hover); }
.shopping-copy .shopping-takeaway h2 { font-size:var(--body-lead); font-weight:500; line-height:1.5; margin:0 0 12px; letter-spacing:0; }
.shopping-copy .shopping-takeaway p { margin:0; color:var(--muted); font-size:var(--body-ui); }
.shopping-table { margin:32px 0; border:1px solid var(--line); border-radius:var(--r1); background:var(--paper); color:var(--ink); }
.shopping-table table { min-width:580px; }
.shopping-table caption { padding:16px; text-align:left; font-size:var(--small); color:var(--muted); }
.shopping-table th,.shopping-table td { vertical-align:top; line-height:1.8; padding:16px; }
.shopping-table th[scope="row"] { width:21%; background:var(--paper); color:var(--ink); }
.shopping-table td { color:var(--muted); }
.shopping-table tbody tr:last-child > * { border-bottom:0; }
.shopping-copy .shopping-handover { list-style:none; padding:24px; margin:32px 0; border-radius:var(--r2); background:var(--mist); color:var(--muted); }
.shopping-handover strong { color:var(--ink); }
.shopping-scenarios { display:grid; gap:16px; margin:32px 0; }
.shopping-scenario { padding:24px; border:1px solid var(--line); border-radius:var(--r2); background:var(--paper); color:var(--ink); }
.shopping-copy .shopping-scenario h3 { margin:0 0 12px; font-size:var(--body-lead); font-weight:500; }
.shopping-copy .shopping-scenario p { margin:0; font-size:var(--body-ui); color:var(--muted); }
.shopping-toc { z-index:2; }
.shopping-toc h2 { font-size:var(--body-ui); line-height:1.5; margin:0; font-weight:500; letter-spacing:0; }
.shopping-toc ol { margin-top:20px; }
.shopping-toc li { margin-block:0; }
.shopping-toc li + li { margin-top:8px; }
.shopping-toc a:hover { color:var(--jade-hover); }
.shopping-toc .toc-count { margin-top:24px; background:var(--paper); color:var(--muted); border:1px solid var(--line); }
.shopping-end-card { display:flex; flex-direction:column; align-items:flex-start; margin-top:64px; padding:40px; border-radius:var(--r2); background:var(--night); color:var(--ntext); }
.shopping-end-card > svg { display:block; width:48px; height:48px; color:var(--jade-soft); }
.shopping-copy .shopping-end-card h2 { margin:24px 0; font-size:var(--h3); line-height:1.4; color:var(--ntext); }
.shopping-copy .shopping-end-card p { margin:0; font-size:var(--body-ui); color:var(--nmuted); }
.shopping-end-card .actions { gap:12px; margin-top:32px; }
.shopping-copy .shopping-end-card .btn { text-decoration:none; }
.shopping-copy .shopping-end-card .btn.pri { background:var(--jade); color:var(--paper); border:0; }
.shopping-copy .shopping-end-card .btn.pri:hover { background:var(--jade-hover); color:var(--paper); }
.shopping-copy .shopping-end-card .btn.line { background:var(--night3); color:var(--ntext); border:0; }
.shopping-copy .shopping-end-card .btn.line:hover { background:var(--nline); color:var(--paper); }
.shopping-recommend { z-index:60; }
.shopping-recommend .float-close { position:absolute; top:10px; right:10px; background:var(--paper); color:var(--ink); }
.shopping-recommend-top { display:flex; align-items:center; gap:12px; padding:20px 52px 20px 24px; background:var(--mist); color:var(--jade-hover); font-size:var(--small); font-weight:500; }
.shopping-recommend-top svg { width:28px; height:28px; flex:none; }
.shopping-recommend .recommend-content { padding:20px 24px 24px; }
.shopping-recommend-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.shopping-recommend .shopping-recommend-actions .btn { flex:1 1 100%; margin-top:0; min-height:40px; padding:10px 16px; height:auto; max-width:100%; white-space:normal; line-height:1.35; }

@media (max-width:860px) {
  .shopping-note-hero h1 { font-size:var(--h2-compact); line-height:1.35; }
  .shopping-note-hero .section-intro { font-size:var(--body); }
  .shopping-note-layout { margin-top:32px; }
  .shopping-toc { position:static; }
  .shopping-toc ol { columns:2; column-gap:32px; }
  .shopping-toc li { break-inside:avoid; }
}
@media (max-width:560px) {
  .shopping-note-hero { width:calc(100% - 32px); padding-top:96px; }
  .shopping-note-hero h1 br { display:none; }
  .shopping-crumbs { margin-bottom:24px; }
  .shopping-note-meta > .status-pill { gap:6px 8px; padding:8px 12px; }
  .shopping-takeaway { grid-template-columns:minmax(0,1fr); padding:24px; gap:16px; }
  .shopping-copy > section + section { margin-top:40px; }
  .shopping-copy .shopping-handover { padding:20px; }
  .shopping-toc ol { columns:1; }
  .shopping-end-card { padding:28px 24px; margin-top:48px; }
  .shopping-end-card .actions { align-items:stretch; flex-direction:column; width:100%; }
  .shopping-recommend { position:static; width:calc(100% - 32px); margin:24px auto; }
  .shopping-recommend-top { padding-block:16px; }
  .shopping-recommend .recommend-content { padding:16px 20px 20px; }
  .shopping-recommend .recommend-content h3 { font-size:var(--body); }
  .shopping-recommend .recommend-content p { font-size:var(--small); }
  .shopping-recommend-actions { margin-top:16px; }
}


/* Editorial reading shell and product recommendation. */
.note-measure {
  width:min(1120px,calc(100% - 48px));
  margin-inline:auto;
}
.note-hero {
  padding:96px 0 0;
  background:var(--paper);
  color:var(--ink);
}
.note-crumbs {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 12px;
  margin-bottom:32px;
  color:var(--muted);
  font-size:var(--small);
}
.note-crumbs a:hover {
  color:var(--jade-hover);
}
.note-hero-copy {
  width:calc(100% - 324px);
  min-width:0;
}
.note-hero h1 {
  margin:0;
  color:var(--ink);
  font-size:var(--h2);
  font-weight:700;
  line-height:1.3;
  letter-spacing:-.02em;
  overflow-wrap:anywhere;
}
.note-meta {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 16px;
  width:fit-content;
  max-width:100%;
  margin-top:28px;
  padding:8px 16px;
  border-radius:var(--pill);
  background:var(--mist);
  color:var(--muted);
  font-size:var(--small);
  line-height:1.6;
}
.note-meta time,
.note-meta > span {
  white-space:nowrap;
}
.note-hero-copy .section-intro {
  margin-top:24px;
  font-size:var(--body-lead);
  color:var(--muted);
}
.note-route {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:32px;
  margin-top:48px;
  padding:32px;
  border-radius:var(--r2);
  background:var(--night);
  color:var(--ntext);
}
.note-route > div {
  display:grid;
  grid-template-columns:40px minmax(0,1fr);
  align-items:center;
  gap:4px 16px;
  min-width:0;
}
.note-route-number {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  grid-row:1/3;
  width:40px;
  height:40px;
  border-radius:var(--r1);
  background:var(--night3);
  color:var(--jade-soft);
  font-family:var(--mono);
  font-size:var(--body-ui);
}
.note-route strong {
  color:var(--ntext);
  font-size:var(--body);
  font-weight:500;
}
.note-route p {
  color:var(--nmuted);
  font-size:var(--small);
}
.note-layout {
  margin-top:64px;
}
.note-prose {
  color:var(--ink);
}
.note-prose strong {
  font-weight:500;
}
.note-prose section {
  scroll-margin-top:calc(var(--header-h) + 32px);
}
.note-prose section h2 {
  margin-top:48px;
  font-size:var(--h3);
  font-weight:500;
  line-height:1.5;
  letter-spacing:-.01em;
}
.note-prose section h3 {
  font-size:var(--body-lead);
  font-weight:500;
}
.note-prose li {
  margin-block:0;
}
.note-prose li + li {
  margin-top:8px;
}
.note-prose code {
  padding:2px 5px;
  border-radius:var(--r1);
  background:var(--mist);
  color:var(--jade-hover);
  font-family:var(--mono);
  font-size:var(--body-ui);
  letter-spacing:0;
  white-space:normal;
  overflow-wrap:anywhere;
}
.note-table {
  margin:32px 0;
  border:1px solid var(--line);
  border-radius:var(--r1);
  background:var(--paper);
  color:var(--ink);
}
.note-table table {
  min-width:580px;
}
.note-table caption {
  padding:16px;
  text-align:left;
  font-size:var(--body-ui);
  font-weight:500;
  background:var(--paper);
  color:var(--ink);
}
.note-table th,
.note-table td {
  padding:16px;
  vertical-align:top;
  line-height:1.75;
}
.note-table tbody th {
  width:25%;
  background:var(--paper);
  color:var(--ink);
}
.note-table td {
  color:var(--muted);
}
.note-table tbody tr:last-child > * {
  border-bottom:0;
}
.note-boundary {
  margin:32px 0;
  padding:24px;
  border-radius:var(--r2);
  background:var(--mist);
  color:var(--ink);
}
.note-prose .note-boundary h3 {
  margin:0 0 16px;
}
.note-prose .note-boundary p {
  margin:0;
  font-size:var(--body-ui);
  color:var(--muted);
}
.note-prose .note-checklist {
  margin:24px 0 32px;
  padding:24px 24px 24px 44px;
  border-radius:var(--r2);
  background:var(--mist);
  color:var(--ink);
}
.note-toc {
  z-index:2;
  max-height:calc(100dvh - var(--header-h) - 32px);
  overflow-y:auto;
  scrollbar-width:thin;
}
.note-toc h2 {
  margin:0;
  color:var(--ink);
  font-size:var(--body-ui);
  font-weight:500;
  line-height:1.5;
  letter-spacing:0;
}
.note-toc ol {
  margin-top:20px;
  padding-left:22px;
}
.note-toc li {
  padding-left:2px;
  line-height:1.6;
}
.note-toc li + li {
  margin-top:8px;
}
.note-toc a:hover {
  color:var(--jade-hover);
}
.note-toc .toc-count {
  margin-top:20px;
  padding:5px 12px;
  background:var(--paper);
  color:var(--muted);
  border:1px solid var(--line);
}
.note-final {
  margin-top:56px;
  padding:32px;
  border-radius:var(--r2);
  background:var(--night);
  color:var(--ntext);
}
.note-final > svg {
  display:block;
  width:48px;
  height:48px;
  color:var(--jade-soft);
}
.note-prose .note-final h2 {
  margin:24px 0;
  color:var(--ntext);
  font-size:var(--h3);
  font-weight:500;
  line-height:1.4;
}
.note-prose .note-final p {
  margin:0;
  color:var(--nmuted);
  font-size:var(--body);
}
.note-final .actions {
  margin-top:32px;
  gap:12px;
}
.note-prose .note-final a.btn.pri {
  background:var(--jade);
  color:var(--jade-ink);
  text-decoration:none;
  border:0;
}
.note-prose .note-final a.btn.pri:hover {
  background:var(--jade-hover);
  color:var(--jade-ink);
}
.note-prose .note-final a.btn.line {
  background:var(--night3);
  color:var(--ntext);
  text-decoration:none;
  border:0;
}
.note-prose .note-final a.btn.line:hover {
  background:var(--nline);
  color:var(--paper);
}
.note-prose .note-reading-next {
  margin:32px 0 0;
  color:var(--muted);
  font-size:var(--body-ui);
}
.note-product-float {
  z-index:60;
}
.note-product-art {
  display:flex;
  align-items:center;
  min-height:72px;
  padding:12px 56px 12px 24px;
  background:var(--night2);
  color:var(--jade-soft);
}
.note-product-art svg {
  display:block;
  width:180px;
  height:48px;
}
.note-product-float .float-close {
  position:absolute;
  top:12px;
  right:12px;
  background:var(--mist);
  color:var(--ink);
}
.note-product-float .float-close:hover {
  background:var(--paper);
  color:var(--ink);
}
.note-product-float .recommend-content {
  padding:20px 24px 24px;
}
.note-product-float .recommend-content h3 {
  font-size:var(--body);
}
.note-product-float .recommend-content p {
  margin-top:8px;
  font-size:var(--small);
  line-height:1.75;
}
.note-product-actions {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-top:20px;
}
.note-product-float .note-product-actions .btn {
  flex:1 1 100px;
  max-width:100%;
  height:auto;
  min-height:40px;
  margin:0;
  padding:10px 16px;
  font-size:var(--body-ui);
  white-space:normal;
  line-height:1.35;
}

@media (max-width:1100px) {
  .note-route {
    gap:24px;
    padding:24px;
  }
  .note-route > div {
    gap:4px 12px;
  }
}
@media (max-width:860px) {
  .note-hero {
    padding-top:96px;
  }
  .note-hero-copy {
    width:100%;
  }
  .note-hero h1 {
    font-size:var(--h2-compact);
    line-height:1.4;
  }
  .note-route {
    gap:20px;
  }
  .note-route > div {
    grid-template-columns:minmax(0,1fr);
    align-content:start;
    gap:8px;
  }
  .note-route-number {
    grid-row:auto;
    margin-bottom:4px;
  }
  .note-layout {
    margin-top:40px;
  }
  .note-toc {
    position:static;
    max-height:none;
    overflow:visible;
  }
  .note-toc ol {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px 28px;
  }
  .note-toc li + li {
    margin-top:0;
  }
  .note-prose > p:first-child {
    margin-top:0;
  }
}
@media (max-width:560px) {
  .note-measure {
    width:calc(100% - 32px);
  }
  .note-crumbs {
    margin-bottom:24px;
  }
  .note-meta {
    gap:6px 12px;
    padding:10px 14px;
    border-radius:var(--r1);
  }
  .note-hero-copy .section-intro {
    font-size:var(--body);
  }
  .note-route {
    grid-template-columns:minmax(0,1fr);
    gap:20px;
    margin-top:32px;
    padding:24px 20px;
  }
  .note-route > div {
    grid-template-columns:40px minmax(0,1fr);
    align-content:normal;
    gap:4px 16px;
  }
  .note-route-number {
    grid-row:1/3;
    margin:0;
  }
  .note-toc ol {
    grid-template-columns:minmax(0,1fr);
  }
  .note-prose section h2 {
    font-size:var(--body-lead);
    margin-top:40px;
  }
  .note-final {
    margin-top:40px;
    padding:24px;
  }
  .note-final .actions {
    flex-direction:column;
    align-items:stretch;
  }
  .note-final .btn {
    height:auto;
    white-space:normal;
    max-width:100%;
  }
  .note-product-float {
    width:min(304px,calc(100% - 32px));
  }
  .note-product-art {
    min-height:56px;
    padding-block:8px;
  }
  .note-product-art svg {
    height:40px;
  }
  .note-product-float .recommend-content {
    padding:16px 20px 20px;
  }
  .note-product-actions {
    margin-top:16px;
  }
}


.r-head .logo span {
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.r-head .logo {
  display:grid;
  place-items:center;
  grid-auto-flow:column;
}
.reader-letterhead .logo {
  display:grid;
  place-items:center;
  grid-auto-flow:column;
}

/* Keep sender stamps centered independently of surrounding span layouts. */
[data-reader] .reader-letterhead .logo,
[data-reader] .reader-letterhead [data-reader-mark],
[data-demo-brand].sender-mark,
[data-demo-brand] .sender-mark,
[data-demo-brand],
[data-demo-brand] .logo {
  display:flex;
  align-items:center;
  justify-content:center;
  flex:none;
}
.notes-index {
  min-width:0;
}
.trial-note {
  min-width:0;
}
.article-cta {
  min-width:0;
}
.product-recommend {
  max-width:100%;
}
.twofa-status {
  margin-bottom:20px;
}