:root {
  --s1: 8px;
  --s2: 12px;
  --s3: 20px;
  --s4: 32px;
  --s5: 48px;
  --s6: 72px;
  --s7: 104px;
  --h1: clamp(2.75rem, 5.4vw, 4rem);
  --h2: clamp(1.875rem, 3.4vw, 2.5rem);
  --h3: 1.375rem;
  --body: 1.0625rem;
  --small: .875rem;
  --radius-pill: 24px;
  --radius-window: 28px;
  --radius-card: 18px;
  --radius-control: 12px;
  --paper: #FFF9F4;
  --paper-raised: #FFFEFC;
  --paper-soft: #F8EFE8;
  --ink: #312631;
  --ink-soft: #645966;
  --line: #E8DCD4;
  --brand: #C9543D;
  --brand-deep: #9E3828;
  --brand-soft: #F4D1C8;
  --accent: #6B365F;
  --accent-soft: #E5D1E1;
  --success: #287A69;
  --success-soft: #D8EEE7;
  --night: #312631;
  --night-soft: #493A49;
  --night-ink: #FFF9F4;
  --night-muted: #DCCFD9;
  --shadow-float: 0 28px 80px rgba(49, 38, 49, .16);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", "Microsoft YaHei", sans-serif; font-size: var(--body); line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-wrap: anywhere; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; }
svg { display: block; }
[hidden], .hidden { display: none !important; }
.wrap { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 100; background: var(--ink); color: var(--paper); padding: var(--s2) var(--s3); border-radius: var(--radius-control); }
.skip-link:focus { top: 16px; }
.site-header { position: sticky; top: 0; z-index: 30; min-height: 68px; background: rgba(255, 249, 244, .94); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(232, 220, 212, .7); }
.header-pulse { box-shadow: 0 3px 0 var(--brand); }
.nav-shell { min-height: 68px; display: flex; align-items: center; gap: var(--s4); }
.brand-lockup { display: inline-flex; align-items: center; gap: var(--s2); font-weight: 750; letter-spacing: -.025em; flex: none; }
.brand-lockup img { width: 34px; height: 34px; }
.brand-name { display: inline-block; white-space: nowrap; }
.primary-nav { display: flex; align-items: center; gap: 6px; margin-inline: auto; }
.primary-nav a, .drawer-links a { padding: 8px 11px; border-radius: var(--radius-pill); font-size: .9375rem; font-weight: 650; }
.primary-nav a:hover, .primary-nav a[aria-current] { background: var(--paper-soft); color: var(--brand-deep); }
.nav-actions { display: flex; align-items: center; gap: var(--s1); flex: none; }
.nav-auth { padding: 9px 12px; font-size: .9375rem; font-weight: 650; }
.button, .icon-button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: var(--s1); border: 0; border-radius: var(--radius-pill); padding: 0 22px; font-size: 1rem; font-weight: 650; transition: transform .2s ease, background .2s ease, color .2s ease; }
.button:hover { transform: translateY(-1px); }
.button-primary { background: var(--brand-deep); color: var(--paper-raised); }
.button-primary:hover { background: var(--accent); color: var(--paper-raised); }
.button-dark { background: var(--night); color: var(--night-ink); }
.button-dark:hover { background: var(--accent); color: var(--night-ink); }
.button-soft { background: var(--accent-soft); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.button-soft:hover { background: var(--brand-soft); color: var(--ink); }
.x-short { display: none; }
.lang-control { position: relative; }
.lang-toggle, .nav-toggle { min-width: 44px; height: 44px; border: 0; background: var(--paper-soft); color: var(--ink); border-radius: 50%; display: grid; place-content: center; padding: 0; position: relative; }
.lang-toggle { font-size: 0; gap: 0; }
.lang-toggle svg { width: 21px; height: 21px; }
.lang-menu { position: absolute; right: 0; top: calc(100% + 10px); min-width: 190px; background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--s1); box-shadow: 0 16px 42px rgba(49,38,49,.12); }
.lang-menu a { display: flex; justify-content: space-between; padding: 9px 12px; border-radius: 10px; font-size: .9375rem; }
.lang-menu a:hover, .lang-menu a[aria-current] { background: var(--paper-soft); }
.lang-menu a[aria-current]::after { content: ""; width: 8px; height: 4px; border-left: 2px solid var(--brand); border-bottom: 2px solid var(--brand); transform: rotate(-45deg); margin-top: 5px; }
.nav-toggle { display: none; gap: 4px; }
.nav-toggle i { width: 18px; height: 2px; background: currentColor; border-radius: 2px; }
.nav-drawer { position: fixed; z-index: 29; left: 16px; right: 16px; top: 76px; background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--s3); box-shadow: var(--shadow-float); }
.drawer-links { display: grid; gap: var(--s1); }
.hero { position: relative; overflow: clip; padding: var(--s6) 0 40px; background: var(--paper); }
.hero + section { padding-top: 28px; }
.hero::before, .hero::after { content: ""; position: absolute; border-radius: 50%; filter: blur(14px); pointer-events: none; }
.hero::before { width: 520px; height: 420px; background: var(--brand-soft); opacity: .72; top: -170px; right: -80px; }
.hero::after { width: 460px; height: 380px; background: var(--accent-soft); opacity: .65; left: -140px; top: 250px; }
.hero-intro { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, .7fr); gap: var(--s6); align-items: end; margin-bottom: var(--s6); }
.hero h1 { max-width: 760px; margin: 0; font-size: var(--h1); line-height: 1.12; letter-spacing: -.028em; font-weight: 700; text-wrap: balance; }
.hero-side { padding-bottom: 7px; }
.hero-side p { margin: 0; color: var(--ink-soft); font-size: 1.125rem; line-height: 1.65; }
.hero-switch { display: flex; gap: var(--s2); margin-top: var(--s4); flex-wrap: wrap; }
.hero-switch .button { min-width: 148px; }
.mailbox-window { position: relative; z-index: 2; min-height: 920px; border-radius: var(--radius-window); overflow: hidden; background: var(--night); color: var(--night-ink); box-shadow: var(--shadow-float); transform: perspective(1400px) rotateX(1.1deg); animation: window-arrive .7s ease both; }
.window-bar { min-height: 58px; padding: 0 var(--s3); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,249,244,.12); color: var(--night-muted); font-size: var(--small); }
.window-dots { display: flex; gap: 7px; }
.window-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
.window-dots i:nth-child(2) { background: var(--accent-soft); }
.window-dots i:nth-child(3) { background: var(--success); }
.mailbox-toolbar { padding: var(--s4); display: grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--s3); align-items: center; }
.address-composer { min-width: 0; min-height: 58px; display: flex; align-items: center; background: var(--night-soft); border-radius: var(--radius-control); overflow: hidden; }
.address-value { min-width: 0; flex: 1; padding: 0 var(--s3); color: var(--night-ink); font: 650 1rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.address-composer .button { border-radius: 0; align-self: stretch; background: var(--brand); color: var(--paper-raised); }
.address-composer .button:hover { background: var(--brand-deep); color: var(--paper-raised); transform: none; }
.timer-block { display: grid; gap: 2px; text-align: right; }
.timer-block small { color: var(--night-muted); }
.timer-block strong { font: 700 1.125rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; }
.tool-actions { padding: 0 var(--s4) var(--s3); display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.tool-actions button { min-height: 42px; padding: 0 17px; border: 0; border-radius: var(--radius-pill); background: var(--night-soft); color: var(--night-ink); font-weight: 650; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.tool-actions button svg { display: block; flex: none; }
.tool-actions button:hover { background: var(--accent); color: var(--night-ink); }
.tool-actions button.is-loading svg { animation: spin .7s linear infinite; }
.inbox-grid { margin: 0 var(--s4) var(--s3); height: 760px; display: grid; grid-template-columns: minmax(280px,.9fr) minmax(0,1.45fr); background: var(--night-soft); border-radius: var(--radius-card); overflow: hidden; }
.message-list { overflow-y: auto; min-width: 0; border-right: 1px solid rgba(255,249,244,.12); }
.list-demo-hint { margin: 0; padding: 12px var(--s3); color: var(--night-muted); font-size: .8rem; background: rgba(255,249,244,.04); }
.message-row { width: 100%; display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: var(--s2); align-items: center; text-align: left; border: 0; border-bottom: 1px solid rgba(255,249,244,.1); padding: 17px var(--s3); background: transparent; color: var(--night-ink); }
.message-row:hover, .message-row.is-active { background: rgba(255,249,244,.08); color: var(--night-ink); }
.sender-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: var(--paper-raised); color: var(--brand); }
.message-copy { min-width: 0; display: grid; gap: 2px; }
.message-copy strong, .subject-line, .preview-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.message-copy strong { font-size: .875rem; }
.subject-line { font-size: .875rem; color: var(--night-ink); }
.preview-line { color: var(--night-muted); font-size: .78rem; }
.message-meta { align-self: start; display: flex; align-items: center; gap: var(--s1); color: var(--night-muted); font-size: .72rem; white-space: nowrap; }
.unread-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
.reader-pane { min-width: 0; overflow: auto; background: var(--night-soft); }
.reader-body { min-height: 100%; padding: 24px 26px; }
.reader-empty { height: 100%; display: grid; place-content: center; text-align: center; color: var(--night-muted); }
.reader-empty svg { margin: 0 auto var(--s3); }
.reader-card { background: var(--paper-raised); color: var(--ink); border-radius: var(--radius-card); overflow: hidden; }
.demo-brand-head { border-bottom:1px solid var(--line); }
.demo-mail-head { min-height: 76px; padding: var(--s3) var(--s4); display: flex; align-items: center; gap: var(--s3); background: var(--paper-soft); }
.demo-mail-head strong { display: block; }
.demo-mail-head span { color: var(--ink-soft); font-size: var(--small); }
.demo-mail-content { padding: var(--s4); }
.demo-mail-content h3 { font-size: var(--h3); line-height: 1.25; margin: 0; }
.demo-mail-content p { margin: var(--s2) 0 0; color: var(--ink-soft); }
.code-card, .file-card { margin-top: var(--s3); padding: var(--s3); border-radius: var(--radius-control); background: var(--paper-soft); }
.code-card strong { display: block; font: 750 2rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; color: var(--brand-deep); }
.fake-mail-button { pointer-events: none; margin-top: var(--s3); display: inline-flex; min-height: 42px; align-items: center; padding: 0 18px; border-radius: var(--radius-pill); background: var(--brand-deep); color: var(--paper-raised); font-weight: 650; }
.demo-disclaimer { display: flex; width: max-content; max-width: 100%; margin-top: var(--s3); padding: 7px 10px; border-radius: var(--radius-pill); background: var(--success-soft); color: #1E5E52; font-size: .78rem; }
.reader-heading { padding-bottom: var(--s3); color: var(--night-ink); }
.reader-heading h3 { margin: var(--s2) 0 0; font-size: var(--h3); }
.reader-heading p { margin: var(--s1) 0 0; color: var(--night-muted); }
.status-pill { display: inline-flex; width: max-content; padding: 5px 9px; border-radius: var(--radius-pill); background: var(--success); color: var(--paper-raised) !important; font-size: .75rem; }
.status-pill.is-active { background: var(--success); color: var(--paper-raised) !important; }
.status-pill.is-paused { background: var(--accent); color: var(--paper-raised) !important; }
.mail-frame { width: 100%; min-height: 290px; border: 0; border-radius: var(--radius-control); background: var(--paper-raised); }
.plain-mail { padding: var(--s3); border-radius: var(--radius-control); background: var(--paper-raised); color: var(--ink); }
section { padding: var(--s7) 0; }
.section-head { max-width: 760px; margin-bottom: 40px; }
.eyebrow { display: flex; width: max-content; min-width: 0; max-width: calc(100vw - 48px); margin: 0 0 var(--s3); padding: 6px 11px; border-radius: var(--radius-pill); background: var(--brand-soft); color: var(--brand-deep); font-size: .8rem; font-weight: 750; letter-spacing: .04em; }
.section-head h2, .story-copy h2, .privacy-copy h2 { margin: 0; font-size: var(--h2); line-height: 1.18; letter-spacing: -.025em; text-wrap: balance; }
.section-cta { padding-top:var(--s4); }
.section-intro { margin: var(--s3) 0 0; color: var(--ink-soft); max-width: 680px; }
.trust-strip { padding: 18px 22px; background: var(--paper-soft); border: 1px solid var(--line); border-radius: var(--radius-card); display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--s3); }
.trust-strip div { display: flex; align-items: center; gap: var(--s2); font-weight: 650; }
.trust-strip svg { flex: none; color: var(--brand); }
.use-cases { background: var(--paper-raised); }
.use-grid { display: grid; grid-template-columns: 1.25fr .75fr .75fr; gap: var(--s3); }
.use-card { min-width: 0; min-height: 260px; padding: var(--s4); border-radius: var(--radius-card); background: var(--paper-soft); display: flex; flex-direction: column; justify-content: space-between; }
.use-card:first-child { min-height: 340px; background: var(--accent); color: var(--night-ink); }
.use-card h3 { margin: var(--s3) 0 var(--s2); font-size: var(--h3); }
.use-card p { margin: 0; color: var(--ink-soft); }
.use-card:first-child p { color: var(--night-muted); }
.identity-guide { background:var(--paper-soft); }
.identity-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s3); align-items:start; }
.relation-tile { min-width:0; padding:var(--s4); border-radius:var(--radius-card); background:var(--paper-raised); }
.relation-tile:nth-child(2) { background:var(--brand-soft); }
.relation-tile h3 { margin:0; font-size:var(--h3); }
.relation-tile p { margin:var(--s3) 0 0; color:var(--ink-soft); }
.card-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; background: var(--paper-raised); color: var(--brand); }
.story-layout { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: var(--s6); align-items: start; }
.story-copy { position: sticky; top: 108px; }
.story-copy .eyebrow + h2, .privacy-copy .eyebrow + h2, .section-head .eyebrow + h2 { margin-top: var(--s3); }
.steps { display: grid; gap: var(--s3); counter-reset: steps; }
.step { counter-increment: steps; display: grid; grid-template-columns: 48px minmax(0,1fr); gap: var(--s3); padding: var(--s4); border-radius: var(--radius-card); background: var(--paper-raised); }
.step::before { content: counter(steps); width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: var(--paper-raised); font-weight: 750; }
.step h3 { margin: 0; font-size: var(--h3); }
.step p { margin: var(--s1) 0 0; color: var(--ink-soft); }
.privacy-band { background: var(--night); color: var(--night-ink); }
.privacy-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(300px,.72fr); gap: var(--s6); align-items: center; }
.privacy-copy p { color: var(--night-muted); margin: var(--s3) 0 0; }
.privacy-copy .eyebrow { background: var(--brand-deep); color: var(--paper-raised); }
.boundary-card { padding: var(--s4); border-radius: var(--radius-window); background: var(--paper-raised); color: var(--ink); }
.boundary-card h3 { margin: 0 0 var(--s3); font-size: var(--h3); }
.boundary-list { list-style: none; padding: 0; margin: 0; }
.boundary-list li { display: flex; gap: var(--s2); padding: var(--s2) 0; color: var(--ink-soft); }
.boundary-list li + li { border-top: 1px solid var(--line); }
.boundary-list svg { flex: none; margin-top: 5px; color: var(--success); }
.faq-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--s3); align-items: start; }
.faq-grid details { min-width: 0; padding: var(--s3); border-radius: var(--radius-card); background: var(--paper-raised); }
.faq-grid summary { cursor: pointer; font-weight: 700; list-style: none; position: relative; padding-right: 30px; }
.faq-grid summary::after { content: ""; position: absolute; right: 5px; top: 8px; width: 8px; height: 8px; border-right: 2px solid var(--brand); border-bottom: 2px solid var(--brand); transform: rotate(45deg); }
.faq-grid details[open] summary::after { transform: rotate(225deg); top: 13px; }
.faq-grid p { margin: var(--s2) 0 0; color: var(--ink-soft); }
.pre-footer { padding-top: 0; }
.cta-panel { border-radius: var(--radius-window); padding: var(--s5); background: var(--brand-soft); display: grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--s4); align-items: center; }
.cta-panel h2 { margin: 0; font-size: clamp(1.35rem,2.2vw,1.5rem); line-height: 1.25; }
.cta-panel p { margin: var(--s2) 0 0; color: var(--ink-soft); }
.site-footer { padding: var(--s6) 0 var(--s4); background: var(--night); color: var(--night-ink); }
.footer-layout { display:grid; grid-template-columns:1.15fr repeat(4,minmax(0,1fr)); gap:var(--s5); }
.footer-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s5); }
.footer-col-brand, .footer-col-use, .footer-col-reference, .footer-col-language, .footer-col-rules { min-width:0; }
.footer-lang-row, .footer-lang-band { display:flex; flex-wrap:wrap; gap:var(--s1); padding-top:var(--s3); border-top:1px solid rgba(255,250,246,.16); }

.footer-lang-row a { padding:6px 9px; border-radius:var(--radius-pill); background:var(--night-soft); color:var(--night-muted); }
.footer-columns { display:grid; grid-template-columns:1.15fr repeat(4,minmax(0,1fr)); gap:var(--s5); }
.footer-col-brand p { color:var(--night-muted); max-width:22ch; }
.footer-cols-4, .footer-grid, .footer-nav-columns { display:grid; }
.footer-layout > div, .footer-layout > nav { min-width:0; }
.footer-brand { grid-row:auto; }
.footer-layout > .gallery-footer-column:last-child { display:contents; }
.footer-layout > .gallery-footer-column:last-child > h2 { display:none; }
.footer-layout > .gallery-footer-column:last-child > .footer-languages { grid-column:2 / -1; grid-row:2; }
.footer-layout > .gallery-footer-column:last-child > a { grid-column:4; }
.footer-brand p { max-width: 280px; color: var(--night-muted); font-size: .9rem; }
.footer-col, .footer-column, .gallery-footer-column { min-width:0; }
.footer-column h2 { margin: 0 0 var(--s3); font-size: 1rem; color: var(--night-ink); }
.footer-column a { display: block; width: max-content; max-width: 100%; color: var(--night-muted); font-size: .9rem; margin-top: 9px; }
.footer-column a:hover { color: var(--paper-raised); }
.footer-languages { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s1); padding-top:var(--s3); border-top:1px solid rgba(255,250,246,.16); }
.footer-languages a { margin: 0; padding: 6px 9px; border-radius: var(--radius-pill); background: var(--night-soft); }
.footer-languages a[aria-current] { background: var(--brand); color: var(--paper-raised); }
.footer-bottom { margin-top: var(--s5); padding-top: var(--s3); border-top: 1px solid rgba(255,249,244,.12); display: flex; justify-content: space-between; gap: var(--s3); color: var(--night-muted); font-size: .82rem; }
.toast { position: fixed; z-index: 70; left: 50%; bottom: 24px; transform: translate(-50%,16px); width: max-content; max-width: min(430px,calc(100% - 32px)); padding: 12px 18px; border-radius: 16px; background: var(--ink); color: var(--paper-raised); opacity: 0; visibility: hidden; transition: .2s ease; text-align: center; }
.toast.show { opacity: 1; visibility: visible; transform: translate(-50%,0); }
input:focus, button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@keyframes window-arrive { from { opacity: 0; transform: perspective(1400px) rotateX(1.1deg) translateY(14px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }
@media (max-width: 940px) {
  .primary-nav { display: none; }
  .nav-actions { margin-left: auto; }
  .nav-toggle { display: grid; place-content: center; }
  .hero-intro, .story-layout, .privacy-layout { grid-template-columns: minmax(0,1fr); gap: var(--s4); }
  .story-copy { position: static; }
  .use-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .use-card:first-child { grid-column: 1 / -1; }
  .footer-layout, .footer-grid, .footer-cols-4, .footer-nav-columns, .footer-columns { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .footer-brand { grid-column:1 / -1; grid-row:auto; }
  .footer-layout > .gallery-footer-column:last-child > .footer-languages { grid-column:1 / -1; grid-row:auto; }
  .footer-layout > .gallery-footer-column:last-child > a { grid-column:3; }
}
@media (max-width: 760px) {
  .wrap { width: min(100% - 32px,1180px); }
  .nav-shell { gap: var(--s1); }
  .brand-lockup span { display: none; }
  .nav-auth { display: none; }
  .nav-create { min-height: 42px; padding-inline: 15px; }
  .x-full { display: none; }
  .x-short { display: inline; }
  .hero { padding-top: var(--s5); }
  .hero-intro { margin-bottom: var(--s5); }
  .hero h1 { font-size: clamp(2.55rem,12vw,3.55rem); }
  .mailbox-window { min-height: 0; transform: none; border-radius: var(--radius-card); }
  .mailbox-toolbar { grid-template-columns: minmax(0,1fr); padding: var(--s3); }
  .timer-block { text-align: left; grid-template-columns: auto auto; justify-content: space-between; }
  .address-composer { min-height: 54px; }
  .address-composer .button { padding-inline: 15px; }
  .tool-actions { padding: 0 var(--s3) var(--s3); gap: var(--s1); }
  .tool-actions button { flex: 1 1 40%; }
  .inbox-grid { height: auto; min-height: 520px; margin: 0 var(--s3) var(--s3); grid-template-columns: minmax(0,1fr); }
  .message-list { border-right: 0; max-height: 430px; }
  .inbox-grid > .reader-pane { display: none; }
  section { padding: var(--s6) 0; }
  .trust-strip, .faq-grid, .identity-grid { grid-template-columns: minmax(0,1fr); }
  .use-grid { grid-template-columns: minmax(0,1fr); }
  .use-card:first-child { grid-column: auto; min-height: 300px; }
  .privacy-layout { gap: var(--s5); }
  .cta-panel { grid-template-columns: minmax(0,1fr); padding: var(--s4); }
  .footer-layout, .footer-grid, .footer-cols-4, .footer-nav-columns, .footer-columns { grid-template-columns:minmax(0,1fr); gap:var(--s4); }
  .footer-brand, .footer-layout > .gallery-footer-column:last-child > .footer-languages, .footer-layout > .gallery-footer-column:last-child > a { grid-column:1; }
  .footer-bottom { flex-direction: column; }
}
/* Shared page, form, table and console system */
.page-hero { padding: var(--s6) 0 var(--s5); }
.page-hero .eyebrow { margin-left: 0; }
.page-hero .eyebrow + h1, .page-kicker + h1 { margin-top: var(--s3); }
.page-hero h1 { max-width: 820px; margin-bottom: 0; font-size: clamp(2.5rem,5vw,3.5rem); line-height:1.12; letter-spacing:-.025em; }
.page-hero .section-intro { margin-top:var(--s3); font-size:1.125rem; }
.surface-card, .form-card, .overview-card { min-width:0; padding:var(--s4); border-radius:var(--radius-card); background:var(--paper-raised); box-shadow:0 16px 44px rgba(49,38,49,.06); }
.card-grid, .overview-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s3); }
.card-grid > *, .overview-grid > * { min-width:0; }
.form-card form, form.flow-form { display:flow-root; }
.field { display:grid; gap:var(--s1); }
.field + .field { margin-top:var(--s3); }
label { font-size:var(--small); font-weight:700; color:var(--ink); }
input, textarea { width:100%; min-height:48px; border:1px solid var(--line); border-radius:var(--radius-control); padding:10px 14px; background:var(--night); color:var(--night-ink); }
textarea { min-height:128px; resize:vertical; }
input:focus, textarea:focus { outline:2px solid var(--ink); outline-offset:1px; border-color:var(--ink); box-shadow:none; }
.composer { margin-top:24px; }
.composer:focus-within { outline:2px solid var(--ink); outline-offset:1px; }
.composer input:focus { outline:none; border-color:transparent; }
.form-actions, .console-actions { display:flex; align-items:center; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s4); margin-bottom:var(--s4); }
.form-note, .notice-strip { margin-top:var(--s3); padding:var(--s2) var(--s3); border-radius:var(--radius-control); background:var(--paper-soft); color:var(--ink-soft); }
.auth-panel .notice-strip { margin-bottom:28px; }
.notice-strip.is-error { background:var(--brand-soft); color:var(--brand-deep); }
.notice-strip.is-success { background:var(--success-soft); color:var(--success); }
.empty-state { margin-top:var(--s4); padding:var(--s4); border:1px solid var(--line); border-radius:var(--radius-card); background:var(--paper-soft); color:var(--ink-soft); text-align:center; }
.table-scroll { min-width:0; overflow-x:auto; margin-top:var(--s4); margin-bottom:var(--s4); border:1px solid var(--line); border-radius:var(--radius-card); background:var(--paper-raised); }
table { width:100%; border-collapse:collapse; min-width:680px; }
th, td { padding:14px 16px; text-align:left; vertical-align:middle; color:var(--ink); }
th { background:var(--paper-soft); color:var(--ink-soft); font-size:.78rem; letter-spacing:.03em; }
tbody tr + tr { border-top:1px solid var(--line); }
.table-actions { display:flex; flex-wrap:nowrap; gap:var(--s1); white-space:nowrap; }
.table-actions button, .row-action { min-height:36px; border:0; border-radius:var(--radius-pill); padding:0 13px; background:var(--paper-soft); color:var(--ink); font-weight:700; }
.status-pill { align-items:center; gap:var(--s1); white-space:nowrap; }
.status-pill::before { content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:currentColor; }
.custom-select { position:relative; width:max-content; max-width:100%; margin-block:var(--s3); }
.filter-trigger { position:relative; min-height:44px; padding:0 44px 0 16px; border:1px solid var(--line); border-radius:var(--radius-pill); background:var(--paper-raised); color:var(--ink); font-weight:700; }
.filter-trigger::after { content:""; position:absolute; right:18px; top:15px; width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); }
.filter-menu { position:absolute; z-index:12; top:calc(100% + 8px); left:0; width:max-content; min-width:100%; padding:var(--s1); border:1px solid var(--line); border-radius:var(--radius-control); background:var(--paper-raised); box-shadow:0 16px 42px rgba(49,38,49,.12); }
.filter-menu [role=option] { display:flex; align-items:center; justify-content:flex-start; width:100%; min-height:40px; border:0; border-radius:9px; padding:10px 12px; background:transparent; color:var(--ink); white-space:nowrap; line-height:1.2; }
.filter-menu [role=option]:hover { background:var(--paper-soft); color:var(--brand-deep); }
.filter-menu [aria-selected=true] { background:var(--brand-soft); color:var(--brand-deep); font-weight:700; }
.console-wrap { padding:var(--s6) 0 var(--s7); }
.auth-stage { max-width:760px; margin:0 auto; display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr); border-radius:var(--radius-window); overflow:hidden; background:var(--paper-raised); box-shadow:var(--shadow-float); }
.auth-aside { padding:var(--s5); background:var(--brand-soft); color:var(--ink); display:flex; flex-direction:column; justify-content:center; gap:var(--s3); }
.auth-aside h1 { margin:0; font-size:clamp(1.5rem,3vw,1.85rem); line-height:1.2; letter-spacing:-.02em; text-wrap:balance; }
.auth-aside .eyebrow { margin-bottom:0; }
.auth-facts { display:grid; gap:10px; margin:0; padding:0; }
.auth-facts article { display:grid; gap:2px; padding:10px 12px; border-radius:12px; background:rgba(255,254,252,.72); }
.auth-facts strong { font-size:.95rem; line-height:1.2; }
.auth-facts span { color:var(--ink-soft); font-size:.8rem; line-height:1.35; }
.auth-panel { padding:var(--s5); }
.auth-panel h1, .auth-panel h2 { margin:0; font-size:clamp(1.65rem,4vw,2.25rem); }
.auth-panel .section-intro { margin-top:var(--s3); }
.access-orbit { display:grid; grid-template-columns:repeat(3,12px); gap:var(--s2); margin-bottom:var(--s4); }
.access-orbit i { width:12px; height:12px; border:2px solid var(--line); border-radius:50%; background:var(--paper-raised); }
.access-orbit i.is-active { border-color:var(--brand); background:var(--brand); }
.console-session { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--s3); align-items:center; padding:var(--s4); border-radius:var(--radius-window); background:var(--night); color:var(--night-ink); }
.console-session p { margin:var(--s1) 0 0; color:var(--night-muted); }
/* Explicit minmax(0,1fr): an implicit auto track sizes to the 680px table inside .table-scroll and pushes every workspace past a 390px viewport. */
.console-board { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s5); margin-top:var(--s5); }
.console-board > * { min-width:0; }
.alias-workspace { padding:var(--s4); border-radius:var(--radius-window); background:var(--night); color:var(--night-ink); box-shadow:0 16px 44px rgba(49,38,49,.12); }
.alias-workspace .console-head p, .alias-workspace .form-note, .alias-workspace small { color:var(--night-muted); }
.alias-workspace .form-note { background:var(--night-soft); }
.archive-workspace { padding:var(--s4); border:1px solid var(--line); border-radius:var(--radius-card); background:var(--paper-soft); }
.security-workspace { padding:var(--s4); border-radius:var(--radius-card); background:var(--brand-soft); color:var(--ink); }
.security-workspace p { color:var(--ink-soft); }
.console-head { display:flex; align-items:start; justify-content:space-between; gap:var(--s3); margin-bottom:var(--s4); }
.console-head h2 { margin:0; font-size:clamp(1.35rem,2vw,1.5rem); }
.console-head p { margin:var(--s1) 0 16px; color:var(--ink-soft); }
.alias-compose { margin-top:0; display:flex; align-items:stretch; flex-wrap:wrap; gap:var(--s2); }
.alias-workspace .form-note { margin:8px 0 12px; padding:8px 14px; }
.alias-workspace .console-head h2 + p { margin:8px 0 12px; }
.alias-workspace p { margin-bottom:12px; }
.alias-workspace p + .alias-compose { margin-top:0; }
.alias-workspace .form-note + .alias-compose { margin-top:0; }
.alias-compose .composer { flex:1 1 100%; display:flex; min-width:0; margin-top:0; border:1px solid var(--night-soft); border-radius:var(--radius-control); background:var(--night); color:var(--night-ink); overflow:hidden; }
.alias-compose input { flex:1; min-width:0; border:0; background:var(--night); color:var(--night-ink); }
.composer-suffix { display:flex; align-items:center; padding:0 14px; background:var(--night-soft); color:var(--night-muted); white-space:nowrap; }
.alias-compose .form-actions { margin:0; }
.alias-compose .form-actions .button { height:48px; }
.archive-toolbar { display:flex; align-items:center; justify-content:space-between; gap:var(--s3); margin-top:var(--s3); }
.archive-list { display:grid; gap:1px; margin-top:var(--s4); background:var(--line); border:1px solid var(--line); border-radius:var(--radius-card); overflow:hidden; }
.archive-row { width:100%; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--s3); align-items:center; border:0; padding:var(--s3); text-align:left; background:var(--paper-raised); color:var(--ink); }
.archive-row:hover { background:var(--paper-soft); color:var(--ink); }
.archive-row-meta { display:flex; align-items:center; justify-content:flex-end; gap:var(--s2); white-space:nowrap; }
.archive-detail { min-width:0; max-width:100%; margin-top:var(--s4); padding:var(--s4); border:1px solid var(--line); border-radius:var(--radius-card); background:var(--paper-raised); overflow:hidden; }
.archive-detail-head { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--s3); align-items:start; padding-bottom:var(--s3); border-bottom:1px solid var(--line); }
.archive-detail-head h3 { margin:0 0 6px; font-size:1.2rem; overflow-wrap:anywhere; }
.archive-detail-head p { margin:0; color:var(--ink-soft); overflow-wrap:anywhere; }
.archive-detail-head .status-pill { justify-self:end; }
.archive-body { min-width:0; }
.archive-detail iframe { display:block; width:100%; max-width:100%; min-width:0; min-height:420px; margin-top:var(--s3); border:0; border-radius:var(--radius-control); overflow-wrap:anywhere; }
.archive-text { margin:var(--s3) 0 0; white-space:pre-wrap; overflow-wrap:anywhere; color:var(--ink); }
.archive-detail .console-actions { margin-bottom:0; }
.attachment-list { display:grid; gap:var(--s1); margin-top:var(--s3); }
.attachment-list:empty { display:none; }
.attachment-list a { padding:10px 12px; border-radius:var(--radius-control); background:var(--paper-soft); font-weight:700; }
.twofa-line { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--s3); align-items:center; }
.twofa-setup, .twofa-disable { margin-top:var(--s4); padding:var(--s4); border-radius:var(--radius-card); background:var(--paper-raised); color:var(--ink); }
.twofa-setup-grid { display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--s3); align-items:start; }
.twofa-qr-plate { margin:0; padding:10px; border-radius:var(--radius-control); background:var(--paper-soft); }
.twofa-howto { margin:0 0 var(--s3); padding-left:1.2em; display:grid; gap:8px; }
.twofa-howto li { color:var(--ink-soft); }
.twofa-setup img { width:144px; height:144px; border-radius:var(--radius-control); background:var(--paper-raised); display:block; }
.secret-line { display:flex; align-items:stretch; gap:var(--s2); margin-top:var(--s2); }
.secret-line code { flex:1; min-width:0; padding:11px; border-radius:var(--radius-control); background:var(--night); color:var(--night-ink); overflow-wrap:anywhere; }
.secret-copy-btn { flex:none; }
.twofa-confirm { margin-top:var(--s4); }
.modal-backdrop { position:fixed; z-index:60; inset:0; display:grid; place-items:center; padding:16px; background:rgba(49,38,49,.64); }
.modal-card { width:min(520px,100%); max-height:calc(100dvh - 32px); overflow:auto; padding:var(--s4); border-radius:var(--radius-window); background:var(--paper-raised); color:var(--ink); }
.modal-card h2 { margin:0; font-size:1.5rem; }
.modal-card .form-actions { margin-bottom:0; }
.mobile-reader-sheet { position:fixed; z-index:55; inset:0; width:100%; height:100dvh; overflow:auto; padding:var(--s3); background:var(--night-soft); color:var(--night-ink); }
.mobile-reader-close { position:sticky; z-index:2; top:0; margin-left:auto; min-width:44px; height:44px; border:0; border-radius:50%; background:var(--paper-raised); color:var(--ink); }
.mobile-reader-sheet .reader-body { padding:var(--s3) 0; }
.prose-layout { display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:var(--s5); align-items:start; }
.prose { max-width:none; }
.prose h2 { margin:var(--s5) 0 var(--s3); font-size:clamp(1.55rem,3vw,2rem); }
.prose h3 { margin:var(--s4) 0 var(--s2); font-size:var(--h3); }
.prose p, .prose li { color:var(--ink-soft); }
.prose table { margin-bottom:var(--s4); }
.toc { position:sticky; top:96px; z-index:3; padding:var(--s3); border-radius:var(--radius-card); background:var(--paper-soft); }
.toc-count { display:flex; width:max-content; max-width:100%; margin-top:16px; padding:6px 10px; border-radius:var(--radius-pill); background:var(--brand-soft); color:var(--brand-deep); }
.legal-glance { margin-bottom:var(--s5); }
.overview-card h2, .legal-pair h2 { margin:0 0 var(--s2); font-size:var(--h3); }
.overview-card p, .legal-pair li { color:var(--ink-soft); }
.legal-pair { margin-top:var(--s5); }
.legal-pair .status-pill + h2 { margin-top:var(--s3); }
.danger-pill { background:var(--brand-deep); color:var(--paper-raised)!important; }
.legal-prose > .prose { grid-column:1; }
.metric { display:block; margin:var(--s2) 0; font-size:2rem; color:var(--brand-deep); }
.timeline-grid, .choice-grid { align-items:stretch; }
.checklist-glance { margin-bottom:var(--s5); }
.checklist-board { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s3); }
.route-flow, .qa-ledger { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s3); }
.route-flow h3, .qa-ledger h3 { margin:var(--s3) 0 var(--s2); font-size:var(--h3); }
.route-flow p, .qa-ledger p { color:var(--ink-soft); }
.checklist-board h3 { margin:0 0 var(--s2); font-size:var(--h3); }
.checklist-board p { color:var(--ink-soft); }
.privacy-band .section-intro { color:var(--night-muted); }
.privacy-band .step { background:var(--paper-raised); color:var(--ink); }
.privacy-band .step p { color:var(--ink-soft); }
.section-cta { display:flex; flex-wrap:wrap; gap:var(--s2); }
.toc .button { margin-top:var(--s4); }
.blog-hero { background:var(--paper); }
.blog-count { display:flex; width:max-content; max-width:100%; margin-top:var(--s3); padding:6px 11px; border-radius:var(--radius-pill); background:var(--brand-soft); color:var(--brand-deep); font-weight:700; }
.blog-list-section { padding-top:0; }
.article-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s3); }
.article-card { min-width:0; padding:var(--s4); border-radius:var(--radius-card); background:var(--paper-raised); box-shadow:0 16px 44px rgba(49,38,49,.06); }
.article-card h2 { margin:var(--s3) 0 var(--s2); font-size:1.5rem; line-height:1.3; }
.article-card p { color:var(--ink-soft); }
.article-card footer, .article-meta { display:flex; flex-wrap:wrap; gap:var(--s3); color:var(--ink-soft); font-size:var(--small); }
.article-card footer { margin-top:var(--s4); }
.article-float { position:fixed; z-index:45; right:24px; bottom:24px; width:min(360px,calc(100% - 32px)); min-height:92px; display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--s3); align-items:center; padding:var(--s3) 54px var(--s3) var(--s3); border-radius:var(--radius-card); background:var(--night); color:var(--night-ink); box-shadow:var(--shadow-float); }
.article-float .float-close { position:absolute; right:12px; top:12px; width:36px; height:36px; display:grid; place-items:center; border:0; border-radius:50%; background:var(--night-soft); color:var(--night-ink); }
.article-float .float-icon { display:grid; place-items:center; }
.article-float a { display:block; color:var(--night-muted); text-decoration:underline; }
.article-hero .eyebrow { margin-left:0; }
.article-meta { margin-top:var(--s3); }
.article-breadcrumb { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:var(--s3); color:var(--ink-soft); font-size:var(--small); }
.article-breadcrumb a { color:var(--brand-deep); font-weight:700; }
.article-breadcrumb span + span::before, .article-breadcrumb a + span::before { content:""; display:inline-block; width:7px; height:7px; margin-right:10px; border-top:1px solid currentColor; border-right:1px solid currentColor; transform:rotate(45deg); vertical-align:1px; }
.article-end-cta { display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--s3); align-items:start; margin-top:var(--s5); padding:var(--s4); border-radius:var(--radius-card); background:var(--night); color:var(--night-ink); box-shadow:var(--shadow-float); }
.article-end-cta .cta-mark { display:grid; place-items:center; width:52px; height:52px; border-radius:16px; background:var(--brand); color:var(--paper-raised); }
.article-end-cta h2 { margin:0; color:var(--night-ink); font-size:1.5rem; }
.article-end-cta p { margin-top:var(--s2); color:var(--night-muted); }
.article-end-cta .section-cta { padding-top:var(--s4); }
.article-end-cta .button-soft { background:var(--night-soft); color:var(--night-ink); border-color:var(--night-soft); }
.alias-workspace h2 + p { margin-bottom:12px; }
.prose .table-scroll { margin-top:var(--s4); margin-bottom:var(--s5); }
.prose .table-scroll + h2 { margin-top:var(--s5); }
.footer-layout { display:grid; grid-template-columns:1.15fr repeat(4,minmax(0,1fr)); gap:var(--s5); }
.footer-layout > .footer-column { min-width:0; }
@media (max-width:940px) { .footer-layout { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:620px) { .footer-layout { grid-template-columns:minmax(0,1fr); } }
.alias-workspace small { display:block; color:var(--night-muted); }
.archive-row small { display:block; color:var(--ink-soft); }
.generic-mark { color:var(--brand); }
.archive-heading { align-items:center; }
.security-workspace .status-pill { background:var(--brand-deep); color:var(--paper-raised)!important; }
.security-workspace .twofa-setup, .security-workspace .twofa-disable { color:var(--ink); background:var(--paper-raised); }
.security-workspace .twofa-setup p, .security-workspace .twofa-disable p { color:var(--ink-soft); }
.security-workspace .twofa-setup input, .security-workspace .twofa-disable input { background:var(--paper-soft); color:var(--ink); border-color:var(--line); }
.security-workspace input { background:var(--paper-raised); color:var(--ink); border-color:var(--line); }

@media (max-width: 940px) {
  .auth-stage, .prose-layout { grid-template-columns:minmax(0,1fr); }
  .route-flow, .qa-ledger { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .toc { position:static; }
}
@media (max-width: 760px) {
  .card-grid, .overview-grid, .checklist-board, .route-flow, .qa-ledger, .article-grid { grid-template-columns:minmax(0,1fr); }
  .auth-aside, .auth-panel, .surface-card, .form-card, .alias-workspace, .archive-workspace, .security-workspace { padding:var(--s3); }
  .console-session, .console-head, .archive-toolbar, .twofa-line, .archive-detail-head { grid-template-columns:minmax(0,1fr); flex-direction:column; align-items:stretch; }
  .archive-toolbar { display:flex; }
  .twofa-setup-grid { grid-template-columns:minmax(0,1fr); }
  .twofa-setup, .twofa-disable { padding:var(--s3); }
  .archive-row { grid-template-columns:minmax(0,1fr); }
  .archive-row-meta { justify-content:flex-start; flex-wrap:wrap; }
  .archive-detail-head .status-pill { justify-self:start; }
  .archive-detail iframe { min-height:320px; }
}
@media (max-width: 430px) {
  .nav-create { padding-inline: 12px; }
  .lang-toggle, .nav-toggle { width: 40px; min-width: 40px; height: 40px; }
  .hero-switch { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .hero-switch .button { min-width: 0; padding-inline: 12px; }
  .message-row { grid-template-columns: 36px minmax(0,1fr); }
  .sender-mark { width: 36px; height: 36px; }
  .message-meta { grid-column: 2; }
  .step { grid-template-columns: minmax(0,1fr); }
  .alias-compose .form-actions { width:100%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
}