@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  --bg: #0c0c0c;
  --panel: #0e1014;
  --text: #fff;
  --muted: rgba(255,255,255,.62);
  --muted-2: rgba(255,255,255,.4);
  --line: rgba(255,255,255,.1);
  --line-strong: rgba(255,255,255,.16);
  --blue: #00d2ff;
  --blue-soft: #a4f4fd;
  --danger: #ff6b7a;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; scroll-padding-top: 88px; }
html.inertial-scroll { scroll-behavior: auto; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: var(--bg); color: var(--text); font-family: Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
::selection { background: rgba(61,129,227,.3); }

@supports (scrollbar-color: auto) and (not selector(::-webkit-scrollbar)) {
  * { scrollbar-width: thin; scrollbar-color: rgba(86,153,241,.88) rgba(7,9,13,.72); }
}

@supports selector(::-webkit-scrollbar) {
  *::-webkit-scrollbar { width: 9px; height: 9px; }
  *::-webkit-scrollbar-track { background: rgba(7,9,13,.7); }
  *::-webkit-scrollbar-thumb { min-height: 42px; border: 2px solid transparent; border-radius: 999px; background: linear-gradient(180deg, rgba(164,244,253,.82), rgba(61,129,227,.9)); background-clip: padding-box; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
  *::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(164,244,253,.98), rgba(0,210,255,.92)); background-clip: padding-box; }
  *::-webkit-scrollbar-thumb:active { background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(0,210,255,.96)); background-clip: padding-box; }
  *::-webkit-scrollbar-corner { background: rgba(7,9,13,.7); }
  *::-webkit-scrollbar-button { width: 0; height: 0; display: none; }
}

.container { width: min(1104px, calc(100% - 48px)); max-width: calc(100% - 48px); margin-inline: auto; min-width: 0; }
.site-shell { position: relative; min-height: 100vh; overflow-x: clip; isolation: isolate; }
.landing-main, .nav-wrap, .site-footer { position: relative; z-index: 2; }
.landing-main { min-width: 0; }
.landing-main > .container, .site-footer.container { min-width: 0; }
.feature-section > *, .privacy-section > *, .access-grid > *, .capabilities-panel > * { min-width: 0; max-width: 100%; }
.ambient-video { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: radial-gradient(circle at 52% 20%, #0b244d 0%, #07101f 30%, #050609 63%, #020203 100%); }
.ambient-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; opacity: .96; }
.ambient-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,6,9,.12) 0%, rgba(5,6,9,.24) 40%, rgba(5,6,9,.62) 72%, rgba(5,6,9,.9) 100%); }
.app-shade { background: rgba(8,9,12,.7); backdrop-filter: blur(8px); }
.admin-shade { background: rgba(8,9,12,.84); backdrop-filter: blur(14px); }
.guide-line { position: fixed; inset-block: 0; width: 1px; z-index: 1; pointer-events: none; background: rgba(255,255,255,.065); }
.guide-line-left { left: calc(50% - 576px); }
.guide-line-right { left: calc(50% + 576px); }
.noise-defs { position: absolute; pointer-events: none; }

.liquid-glass { position: relative; overflow: hidden; border: 0; background: rgba(255,255,255,.018); background-blend-mode: luminosity; backdrop-filter: blur(8px); box-shadow: inset 0 1px 1px rgba(255,255,255,.1); }
.liquid-glass::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(180deg, rgba(255,255,255,.36) 0%, rgba(255,255,255,.12) 24%, rgba(255,255,255,0) 45%, rgba(255,255,255,0) 62%, rgba(255,255,255,.11) 82%, rgba(255,255,255,.3) 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }

.nav-wrap { min-height: 86px; }
.nav { min-height: 86px; display: grid; grid-template-columns: 160px minmax(0,1fr) 220px; align-items: center; gap: 24px; }
.brand-mark-only { width: 42px; height: 42px; display: grid; place-items: center; opacity: 0; transform: translateY(-10px); animation: navEnter .6s ease-out .02s forwards; }
.brand-logo { width: 82px; height: 82px; max-width: none; object-fit: contain; display: block; }
.nav-links { display: flex; align-items: center; justify-content: center; gap: 32px; }
.nav-links a { color: rgba(255,255,255,.7); font-size: 13px; font-weight: 500; transition: color .2s ease; opacity: 0; transform: translateY(-8px); animation: navEnter .55s ease-out forwards; }
.nav-links a:nth-child(1) { animation-delay: .1s; }
.nav-links a:nth-child(2) { animation-delay: .15s; }
.nav-links a:nth-child(3) { animation-delay: .2s; }
.nav-links a:nth-child(4) { animation-delay: .25s; }
.nav-links a:hover { color: #fff; }
.nav-actions { justify-self: end; display: flex; align-items: center; gap: 8px; opacity: 0; transform: translateY(-10px); animation: navEnter .6s ease-out .18s forwards; }
.nav-menu-button { display: none; width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; background: rgba(255,255,255,.05); align-items: center; justify-content: center; cursor: pointer; }
.nav-menu-button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.mobile-menu { display: none; }

.pill-button { min-height: 42px; padding: 0 18px; border-radius: 999px; border: 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 13px; font-weight: 600; cursor: pointer; transition: transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease; }
.pill-button:hover { transform: translateY(-1px); }
.pill-button:active { transform: scale(.98); }
.pill-button:disabled { opacity: .48; cursor: not-allowed; transform: none; }
.pill-button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.pill-button:hover svg { transform: translateX(1px); }
.pill-button-primary { background: #fff; color: #050505; }
.pill-button-primary:hover { background: rgba(255,255,255,.9); }
.pill-button-outline { border: 1px solid rgba(255,255,255,.15); background: rgba(0,0,0,.08); color: #fff; }
.pill-button-outline:hover { background: rgba(255,255,255,.05); }
.pill-button-ghost { color: rgba(255,255,255,.72); background: transparent; border: 1px solid transparent; }
.pill-button-ghost:hover { color: #fff; background: rgba(255,255,255,.05); }

.hero { min-height: 575px; padding: 110px 0 90px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.hero-title { margin: 0; font-size: clamp(4.2rem, 7vw, 7rem); line-height: .9; font-weight: 600; letter-spacing: -.064em; text-wrap: balance; }
.hero-title > span { display: block; }
.shiny-text { color: transparent; -webkit-text-fill-color: transparent; background-image: linear-gradient(to right, #091020 0%, #0b2551 12.5%, #a4f4fd 32.5%, #00d2ff 50%, #0b2551 67.5%, #091020 87.5%, #091020 100%); background-size: 200% auto; background-clip: text; -webkit-background-clip: text; filter: url(#wmail-noise); animation: shiny 6s linear infinite; }
.hero-copy { margin: 30px auto 0; max-width: 520px; color: rgba(255,255,255,.64); font-size: 15px; line-height: 1.62; text-wrap: balance; }
.hero-actions { margin-top: 26px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.hero-note { color: rgba(255,255,255,.42); font-size: 11px; }
.hero-enter { opacity: 0; }
.hero-enter-title { transform: translateY(20px); animation: heroEnter .8s cubic-bezier(.22,1,.36,1) .3s forwards; }
.hero-enter-copy { transform: translateY(14px); animation: heroEnter .7s cubic-bezier(.22,1,.36,1) .5s forwards; }
.hero-enter-actions { transform: translateY(12px); animation: heroEnter .7s cubic-bezier(.22,1,.36,1) .7s forwards; }
.hero-enter-strip { transform: translateY(10px); animation: heroEnter .6s ease-out .9s forwards; }

.compact-nav { position: fixed; top: 12px; left: 0; right: 0; z-index: 90; opacity: 0; transform: translateY(-14px); pointer-events: none; transition: opacity .24s ease, transform .32s cubic-bezier(.22,1,.36,1); }
.compact-nav.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.compact-nav-inner { min-height: 50px; padding: 6px 8px 6px 10px; display: grid; grid-template-columns: 150px minmax(0,1fr) 190px; align-items: center; gap: 18px; border: 1px solid rgba(255,255,255,.12); border-radius: 17px; background: rgba(8,9,12,.78); backdrop-filter: blur(22px) saturate(1.12); box-shadow: 0 14px 46px rgba(0,0,0,.32), inset 0 1px rgba(255,255,255,.05); }
.compact-brand { min-width: 0; display: inline-flex; align-items: center; gap: 8px; color: #fff; }
.compact-brand img { width: 30px; height: 30px; object-fit: contain; flex: 0 0 auto; }
.compact-brand strong { font-size: 11px; font-weight: 700; }
.compact-links { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 24px; }
.compact-links a { color: rgba(255,255,255,.62); font-size: 10px; font-weight: 500; transition: color .18s ease; }
.compact-links a:hover { color: #fff; }
.compact-actions { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.compact-action { min-height: 36px; padding: 0 12px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: rgba(255,255,255,.7); font-size: 10px; font-weight: 600; transition: background .18s ease, color .18s ease, transform .18s ease; }
.compact-action:hover { color: #fff; background: rgba(255,255,255,.055); transform: translateY(-1px); }
.compact-action-primary { background: #fff; color: #050505; }
.compact-action-primary:hover { color: #050505; background: rgba(255,255,255,.9); }
.compact-action svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }


.nav-user-avatar { width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%; overflow: hidden; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); box-shadow: 0 7px 22px rgba(0,0,0,.24); }
.nav-user-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; }
.compact-action.nav-user-avatar { width: 36px; min-width: 36px; height: 36px; min-height: 36px; padding: 0; }
.preview-nav-item[role="button"], .preview-message[role="button"] { cursor: pointer; }
.preview-nav-item[role="button"]:focus-visible, .preview-message[role="button"]:focus-visible { outline: 2px solid rgba(164,244,253,.55); outline-offset: -2px; }

.preview-section { padding: 64px 0 106px; }
.mail-preview { border: 1px solid rgba(255,255,255,.11); border-radius: 20px; overflow: hidden; background: rgba(14,16,20,.82); backdrop-filter: blur(26px); box-shadow: 0 42px 120px rgba(0,0,0,.5); }
.window-titlebar { height: 42px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 15px; border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(5,6,8,.62); color: rgba(255,255,255,.46); font-size: 10px; }
.traffic-lights { display: flex; align-items: center; gap: 6px; }
.traffic-lights span { width: 10px; height: 10px; border-radius: 50%; }
.traffic-lights span:nth-child(1) { background: #ff5f57; }
.traffic-lights span:nth-child(2) { background: #febc2e; }
.traffic-lights span:nth-child(3) { background: #28c840; }
.titlebar-spacer { justify-self: end; width: 32px; }
.preview-grid { height: 520px; display: grid; grid-template-columns: 3fr 4fr 5fr; }
.preview-sidebar { min-width: 0; padding: 16px; border-right: 1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.28); }
.preview-compose { width: 100%; min-height: 35px; border-radius: 8px; border: 0; display: flex; align-items: center; justify-content: flex-start; gap: 7px; padding: 0 11px; background: #fff; color: #050505; font-size: 10px; font-weight: 700; cursor: pointer; }
.preview-compose svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.preview-nav-list { margin-top: 16px; display: grid; gap: 3px; }
.preview-nav-item { min-height: 32px; border-radius: 7px; padding: 0 9px; display: grid; grid-template-columns: 15px minmax(0,1fr) auto; align-items: center; gap: 7px; color: rgba(255,255,255,.58); font-size: 10px; }
.preview-nav-item.active { color: #fff; background: rgba(255,255,255,.09); }
.preview-nav-item svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.preview-nav-item strong { color: rgba(255,255,255,.44); font-size: 9px; }
.preview-labels { margin-top: 25px; display: grid; gap: 10px; color: rgba(255,255,255,.5); font-size: 9px; }
.preview-labels > span { color: rgba(255,255,255,.3); font-size: 8px; letter-spacing: .12em; }
.preview-labels > div { display: flex; align-items: center; gap: 8px; }
.label-dot, .capability-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.dot-blue { background: #00d2ff; }
.dot-cyan { background: #a4f4fd; }
.dot-white { background: #fff; }
.dot-muted { background: #5c6370; }
.preview-list-pane { min-width: 0; border-right: 1px solid rgba(255,255,255,.08); background: rgba(10,12,16,.38); }
.preview-search { height: 46px; padding: 0 14px; border-bottom: 1px solid rgba(255,255,255,.07); display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.34); font-size: 10px; }
.preview-search svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.preview-search input { min-width: 0; width: 100%; border: 0; outline: 0; padding: 0; color: rgba(255,255,255,.58); background: transparent; font: inherit; }
.preview-search input::placeholder { color: rgba(255,255,255,.34); opacity: 1; }
.preview-search input::-webkit-search-cancel-button { filter: invert(1); opacity: .35; }
.preview-message { min-height: 89px; padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.055); color: rgba(255,255,255,.58); }
.preview-message.active { background: rgba(255,255,255,.065); box-shadow: inset 2px 0 #00d2ff; }
.preview-message.unread b, .preview-message.unread strong { color: #fff; }
.preview-message-top { display: flex; justify-content: space-between; gap: 10px; }
.preview-message-top strong { color: rgba(255,255,255,.86); font-size: 10px; }
.preview-message-top time { color: rgba(255,255,255,.3); font-size: 8px; }
.preview-message b { display: block; margin-top: 6px; color: rgba(255,255,255,.72); font-size: 10px; }
.preview-message p { margin: 5px 0 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: rgba(255,255,255,.32); font-size: 9px; }
.preview-reader { min-width: 0; background: rgba(7,9,12,.2); }
.preview-reader-toolbar { height: 46px; padding: 0 13px; border-bottom: 1px solid rgba(255,255,255,.07); display: flex; align-items: center; justify-content: space-between; }
.preview-reader-toolbar > div { display: flex; gap: 4px; }
.preview-reader-toolbar button { width: 28px; height: 28px; border: 0; border-radius: 6px; display: grid; place-items: center; color: rgba(255,255,255,.4); background: transparent; }
.preview-reader-toolbar svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.preview-reader-content { padding: 24px; color: rgba(255,255,255,.66); font-size: 10px; line-height: 1.65; }
.preview-reader-content h2 { margin: 0; color: #fff; font-size: 20px; letter-spacing: -.03em; }
.preview-sender { margin-top: 15px; display: grid; grid-template-columns: 30px minmax(0,1fr) auto; align-items: center; gap: 9px; }
.sender-avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #00d2ff, #0b2551); color: #fff; font-weight: 700; }
.preview-sender strong, .preview-sender span { display: block; }
.preview-sender span { margin-top: 2px; color: rgba(255,255,255,.34); font-size: 8px; }
.reader-tag { margin: 0 !important; padding: 4px 7px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; color: rgba(255,255,255,.52) !important; }
.preview-notice { margin: 22px 0; padding: 12px; border: 1px solid rgba(164,244,253,.13); border-radius: 11px; background: rgba(0,210,255,.035); display: flex; align-items: flex-start; gap: 9px; }
.preview-notice svg { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: #a4f4fd; stroke-width: 1.7; stroke-linecap: round; }
.preview-notice strong { color: rgba(255,255,255,.8); }
.preview-notice p { margin: 3px 0 0; color: rgba(255,255,255,.42); }
.preview-reader-content > p { margin: 13px 0; }
.verification-code { width: fit-content; margin: 18px 0; padding: 11px 15px; border: 1px solid rgba(255,255,255,.1); border-radius: 9px; background: rgba(255,255,255,.04); color: #fff; font-size: 18px; font-weight: 700; letter-spacing: .15em; }
.preview-reader-signoff { display: block; margin-top: 20px; color: rgba(255,255,255,.3); }

.section-eyebrow { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.62); font-size: 11px; }
.section-eyebrow > span { width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.section-eyebrow strong { color: #fff; font-weight: 600; }
.section-eyebrow em { padding: 3px 8px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; color: rgba(255,255,255,.45); font-style: normal; font-size: 9px; }
.feature-section { padding: 86px 0 105px; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 64px; align-items: start; }
.feature-copy h2 { margin: 20px 0 0; max-width: 520px; font-size: clamp(2.6rem, 4.2vw, 4.2rem); line-height: 1.02; font-weight: 600; letter-spacing: -.055em; }
.feature-copy > p { margin: 24px 0 0; max-width: 490px; color: rgba(255,255,255,.6); font-size: 14px; line-height: 1.66; }
.chip-row { width: 100%; max-width: 100%; margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px; }
.chip-row span { padding: 7px 11px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; background: rgba(255,255,255,.025); color: rgba(255,255,255,.68); font-size: 10px; }
.steps-panel { width: 100%; max-width: 100%; min-width: 0; border-radius: 20px; padding: 8px 22px; overflow: hidden; }
.step-row { position: relative; z-index: 1; min-height: 112px; display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 18px; align-items: center; border-bottom: 1px solid rgba(255,255,255,.08); }
.step-row:last-child { border-bottom: 0; }
.step-row > span { color: rgba(164,244,253,.7); font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.step-row strong { font-size: 13px; }
.step-row p { margin: 6px 0 0; max-width: 400px; color: rgba(255,255,255,.42); font-size: 10px; line-height: 1.55; }

.capabilities-section { padding: 4px 0 94px; }
.capabilities-panel { width: 100%; max-width: 100%; min-width: 0; border-radius: 18px; padding: 22px 24px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1px; overflow: hidden; }
.capabilities-panel > div { position: relative; z-index: 1; min-height: 78px; padding: 12px 22px; display: grid; grid-template-columns: 10px minmax(0,1fr); grid-template-rows: auto auto; align-content: center; column-gap: 10px; border-right: 1px solid rgba(255,255,255,.08); }
.capabilities-panel > div:last-child { border-right: 0; }
.capability-dot { grid-row: 1 / 3; align-self: center; }
.capabilities-panel strong { font-size: 11px; }
.capabilities-panel small { margin-top: 4px; color: rgba(255,255,255,.35); font-size: 9px; }

.privacy-section { padding: 84px 0 110px; border-top: 1px solid rgba(255,255,255,.08); }
.privacy-heading { max-width: 650px; }
.privacy-heading h2 { margin: 18px 0 0; font-size: clamp(2.7rem,4vw,4.4rem); line-height: 1.02; letter-spacing: -.055em; font-weight: 600; }
.privacy-heading > p { margin: 20px 0 0; max-width: 520px; color: rgba(255,255,255,.58); font-size: 14px; line-height: 1.65; }
.privacy-grid { width: 100%; max-width: 100%; min-width: 0; margin-top: 42px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.privacy-card { min-width: 0; max-width: 100%; min-height: 240px; border-radius: 19px; padding: 24px; display: flex; flex-direction: column; }
.privacy-card > strong, .privacy-card > p, .privacy-card > span { position: relative; z-index: 1; }
.privacy-card > strong { font-size: 13px; }
.privacy-card > p { margin: 18px 0 0; color: rgba(255,255,255,.58); font-size: 11px; line-height: 1.65; }
.privacy-card > span { margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.08); color: rgba(255,255,255,.34); font-size: 9px; }

.access-section { padding: 24px 0 104px; overflow: hidden; }
.access-container { position: relative; }
.access-watermark { position: relative; z-index: 2; width: 100%; padding-top: 36px; text-align: center; display: flex; flex-direction: column; align-items: center; font-size: clamp(4.5rem,9vw,8rem); font-weight: 800; line-height: .9; letter-spacing: -.055em; filter: url(#wmail-access-noise); }
.access-watermark > span { color: #fff; }
.access-watermark > strong { font: inherit; background: linear-gradient(to right, #091020 0%, #0b2551 25%, #a4f4fd 65%, #00d2ff 100%); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.access-grid { position: relative; z-index: 3; width: 100%; max-width: 100%; min-width: 0; margin-top: 54px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.access-card { min-width: 0; max-width: 100%; min-height: 520px; padding: 42px 24px; border: 1px solid rgba(255,255,255,.88); border-radius: 38px; overflow: hidden; position: relative; display: flex; flex-direction: column; background: linear-gradient(135deg, rgba(0,0,0,.68), rgba(0,0,0,.38)); backdrop-filter: blur(16px) brightness(.92); transition: transform .45s cubic-bezier(.22,1,.36,1), border-color .3s, background .3s; }
.access-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,0) 50%); pointer-events: none; }
.access-card:hover { background: rgba(15,15,15,.62); border-color: rgba(34,211,238,.68); transform: translateY(-8px); }
.access-card-featured { background: linear-gradient(135deg, rgba(0,0,0,.84), rgba(0,0,0,.52)); }
.access-tier { position: relative; z-index: 1; color: rgba(255,255,255,.58); font-size: 1rem; }
.access-value { position: relative; z-index: 1; margin-top: 8px; color: #fff; font-size: 2.5rem; font-weight: 500; letter-spacing: -.03em; }
.access-card > p { position: relative; z-index: 1; margin: 15px 0 32px; min-height: 3.2em; color: rgba(255,255,255,.45); font-size: 12px; line-height: 1.5; }
.access-card ul { position: relative; z-index: 1; list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.access-card li { display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,.78); font-size: 11px; line-height: 1.45; }
.access-card li > span { width: 27px; height: 27px; border-radius: 50%; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.13); color: #fff; font-size: 10px; }
.access-card li b { font-weight: 600; }
.access-button { position: relative; z-index: 1; align-self: center; margin-top: auto; padding: 10px 31px; border-radius: 999px; background: #fff; color: #000; font-size: 12px; font-weight: 600; transition: transform .3s cubic-bezier(.22,1,.36,1), background .3s, box-shadow .3s; }
.access-button:hover { background: #f5f5f5; transform: scale(1.02); box-shadow: 0 8px 24px rgba(255,255,255,.15); }

.final-cta { position: relative; overflow: hidden; margin-bottom: 76px; padding: 86px 40px; border-radius: 30px; text-align: center; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.014); backdrop-filter: blur(8px); box-shadow: inset 0 1px 1px rgba(255,255,255,.1); }
.final-glow { position: absolute; inset: 0; opacity: .34; background: radial-gradient(600px circle at 50% 0%, rgba(255,255,255,.18), transparent 70%); pointer-events: none; }
.final-cta h2 { position: relative; margin: 0; font-size: clamp(3rem,5.5vw,5.4rem); line-height: 1.02; font-weight: 600; letter-spacing: -.055em; }
.final-cta p { position: relative; margin: 22px auto 0; max-width: 480px; color: rgba(255,255,255,.6); font-size: 13px; line-height: 1.65; }
.final-cta > div:last-child { position: relative; margin-top: 26px; display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; }
.site-footer { min-height: 88px; padding: 22px 0 30px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-top: 1px solid rgba(255,255,255,.08); color: rgba(255,255,255,.36); font-size: 10px; }
.footer-brand { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.78); }
.footer-brand img { width: 32px; height: 32px; object-fit: contain; transform: scale(1.8); }
.footer-brand strong { font-size: 11px; }

.section-label { display: block; color: rgba(255,255,255,.4); font-size: 9px; font-weight: 650; text-transform: uppercase; letter-spacing: .12em; }
.field, .select, .textarea { width: 100%; border: 1px solid rgba(255,255,255,.1); color: #fff; background: rgba(255,255,255,.035); outline: none; transition: border-color .2s, background .2s, box-shadow .2s; }
.field, .select { height: 44px; border-radius: 11px; padding: 0 12px; }
.textarea { min-height: 90px; border-radius: 11px; padding: 12px; resize: vertical; }
.field:focus, .select:focus, .textarea:focus { border-color: rgba(164,244,253,.42); box-shadow: 0 0 0 3px rgba(0,210,255,.08); background: rgba(255,255,255,.05); }
.select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,.5) 50%), linear-gradient(135deg, rgba(255,255,255,.5) 50%, transparent 50%); background-position: calc(100% - 16px) 18px, calc(100% - 12px) 18px; background-size: 4px 4px, 4px 4px; background-repeat: no-repeat; padding-right: 32px; }
.form-note { min-height: 18px; color: rgba(255,255,255,.42); font-size: 10px; line-height: 1.5; }
.form-note.error { color: #ff9aa5; }
.form-note.success { color: #84ddb4; }
.app-body { overflow: hidden; background: #0c0c0c; }
.app-page { position: relative; z-index: 2; width: min(1440px, calc(100% - 36px)); height: 100vh; margin: 0 auto; padding: 14px 0 18px; display: flex; flex-direction: column; gap: 10px; }
.app-menubar { position: relative; z-index: 4; height: 38px; min-height: 38px; flex: 0 0 38px; display: flex; align-items: center; justify-content: space-between; color: rgba(255,255,255,.48); font-size: 10px; padding: 0 8px; }
.app-menubar > div { display: flex; align-items: center; gap: 14px; }
.app-menubar strong { color: #fff; font-weight: 700; }
.app-back-home { transition: color .2s; }
.app-back-home:hover { color: #fff; }
.app-window { position: relative; z-index: 1; flex: 1; min-height: 0; border: 1px solid rgba(255,255,255,.11); border-radius: 18px; overflow: hidden; background: rgba(10,12,16,.88); backdrop-filter: blur(24px); box-shadow: 0 30px 100px rgba(0,0,0,.5); }
.app-titlebar { height: 38px; }
.app-layout { height: calc(100% - 38px); display: grid; grid-template-columns: 260px minmax(0,1fr); }
.app-sidebar { min-width: 0; min-height: 0; display: flex; flex-direction: column; border-right: 1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.28); }
.sidebar-top { padding: 15px; border-bottom: 1px solid rgba(255,255,255,.06); }
.app-create-button { min-height: 36px; }
.sidebar-section { flex: 1; min-height: 0; overflow: auto; padding: 15px; }
.sidebar-label { display: block; margin-bottom: 9px; color: rgba(255,255,255,.28); font-size: 8px; text-transform: uppercase; letter-spacing: .12em; }
.mailbox-list { display: grid; gap: 4px; }
.mailbox-item { width: 100%; padding: 10px; border: 0; border-radius: 9px; background: transparent; color: rgba(255,255,255,.56); text-align: left; cursor: pointer; }
.mailbox-item:hover { background: rgba(255,255,255,.045); color: #fff; }
.mailbox-item.active { background: rgba(255,255,255,.08); color: #fff; box-shadow: inset 2px 0 #00d2ff; }
.mailbox-item strong { display: block; overflow-wrap: anywhere; font-size: 10px; font-weight: 600; }
.mailbox-item span { display: block; margin-top: 4px; color: rgba(255,255,255,.31); font-size: 8px; }
.sidebar-account { flex: 0 0 auto; padding: 13px; border-top: 1px solid rgba(255,255,255,.07); }
.sidebar-account > .pill-button, .sidebar-account > .button { width: 100%; }
.account-chip { min-width: 0; display: grid; grid-template-columns: 31px minmax(0,1fr) 34px; align-items: center; gap: 8px; }
.avatar { width: 31px; height: 31px; border-radius: 50%; object-fit: cover; background: rgba(255,255,255,.07); }
.account-text { min-width: 0; }
.account-text strong, .account-text span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.account-text strong { font-size: 9px; }
.account-text span { margin-top: 3px; color: rgba(255,255,255,.31); font-size: 8px; }
.button { min-height: 36px; border: 0; border-radius: 9px; padding: 0 11px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; color: #fff; background: rgba(255,255,255,.05); font-size: 10px; font-weight: 600; cursor: pointer; }
.button:hover { background: rgba(255,255,255,.08); }
.button-primary { color: #000; background: #fff; }
.button-secondary { border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.035); }
.button-ghost { background: transparent; color: rgba(255,255,255,.58); }
.button-danger { border: 1px solid rgba(255,107,122,.2); background: rgba(255,107,122,.08); color: #ff9aa5; }
.button-small { min-height: 30px; padding: 0 9px; font-size: 9px; }
.icon-button { width: 32px; height: 32px; padding: 0; }
.icon { width: 14px; height: 14px; }
.app-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.app-toolbar { height: 56px; flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 13px; border-bottom: 1px solid rgba(255,255,255,.07); }
.app-toolbar-left, .app-toolbar-right { display: flex; align-items: center; gap: 7px; }
.app-toolbar-left { min-width: 0; }
.app-address { max-width: min(58vw, 640px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #fff; font-size: 11px; font-weight: 600; }
.expiry { margin-top: 3px; color: rgba(255,255,255,.31); font-size: 8px; }
.window-icon-button { width: 30px; height: 30px; border: 0; border-radius: 7px; background: transparent; color: rgba(255,255,255,.44); display: inline-grid; place-items: center; cursor: pointer; transition: background .18s, color .18s; }
.window-icon-button:hover { background: rgba(255,255,255,.06); color: #fff; }
.window-icon-button:disabled { opacity: .28; cursor: not-allowed; background: transparent; }
.window-icon-button.danger:hover { color: #ff9aa5; background: rgba(255,107,122,.08); }
.window-icon-button svg, .empty-mark svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.inbox-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: 360px minmax(0,1fr); }
.message-list-pane { min-width: 0; min-height: 0; border-right: 1px solid rgba(255,255,255,.08); overflow: auto; }
.message-list-head { min-height: 50px; padding: 10px 14px; display: flex; flex-direction: column; justify-content: center; border-bottom: 1px solid rgba(255,255,255,.06); }
.message-list-head strong { font-size: 11px; }
.message-list-head span { margin-top: 3px; color: rgba(255,255,255,.3); font-size: 8px; }
.message-list { display: grid; }
.message-row { width: 100%; padding: 13px 14px; border: 0; border-bottom: 1px solid rgba(255,255,255,.055); background: transparent; color: rgba(255,255,255,.7); text-align: left; cursor: pointer; }
.message-row:hover { background: rgba(255,255,255,.03); }
.message-row.active { background: rgba(255,255,255,.055); box-shadow: inset 2px 0 #00d2ff; }
.message-row-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.message-row-top strong { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 10px; font-weight: 650; }
.message-row-top time { color: rgba(255,255,255,.3); font-size: 8px; white-space: nowrap; }
.message-row-subject { margin-top: 6px; font-size: 10px; color: rgba(255,255,255,.72); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.message-row-meta { margin-top: 5px; color: rgba(255,255,255,.28); font-size: 8px; }
.message-reader { min-width: 0; min-height: 0; overflow: auto; }
.reader-empty { min-height: 100%; display: grid; place-items: center; text-align: center; padding: 28px; color: rgba(255,255,255,.3); }
.empty-mark { width: 48px; height: 48px; margin: 0 auto 14px; border: 1px solid rgba(255,255,255,.09); border-radius: 15px; background: rgba(255,255,255,.025); display: grid; place-items: center; }
.reader-empty strong { display: block; color: rgba(255,255,255,.68); font-size: 11px; }
.reader-empty p { margin: 6px 0 0; color: rgba(255,255,255,.3); font-size: 9px; }
.reader-content { max-width: 900px; padding: 28px; }
.reader-header { padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,.08); }
.reader-header h1 { margin: 0; color: #fff; font-size: 23px; line-height: 1.2; letter-spacing: -.035em; font-weight: 600; overflow-wrap: anywhere; }
.reader-sender { margin-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.sender-copy strong { display: block; font-size: 10px; }
.sender-copy span { display: block; margin-top: 4px; color: rgba(255,255,255,.31); font-size: 8px; overflow-wrap: anywhere; }
.reader-body { padding-top: 22px; color: rgba(255,255,255,.72); font-size: 12px; line-height: 1.72; white-space: pre-wrap; overflow-wrap: anywhere; }
.email-frame { width: 100%; min-height: 520px; margin-top: 18px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: #fff; }
.attachments { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 7px; }
.attachment { padding: 8px 10px; border: 1px solid rgba(255,255,255,.1); border-radius: 9px; background: rgba(255,255,255,.025); color: rgba(255,255,255,.68); font-size: 9px; }
.attachment:hover { background: rgba(255,255,255,.055); }
.mobile-sidebar-toggle { display: none; }

.modal-backdrop { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 20px; background: rgba(0,0,0,.72); backdrop-filter: blur(14px); }
.modal-backdrop[hidden] { display: none; }
.modal { width: min(510px, 100%); border-radius: 22px; padding: 22px; }
.modal-head { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.modal h2 { margin: 8px 0 0; font-size: 21px; letter-spacing: -.03em; }
.modal p { margin: 7px 0 0; color: rgba(255,255,255,.46); font-size: 10px; line-height: 1.55; }
.modal-fields { position: relative; z-index: 1; margin-top: 19px; display: grid; gap: 9px; }
.modal-actions { position: relative; z-index: 1; margin-top: 17px; display: flex; justify-content: flex-end; gap: 8px; }

.admin-body { min-height: 100vh; background: #0c0c0c; }
.admin-shell { position: relative; z-index: 2; min-height: 100vh; display: grid; grid-template-columns: 230px minmax(0,1fr); }
.admin-nav { min-height: 100vh; position: sticky; top: 0; padding: 20px 15px; border-right: 1px solid rgba(255,255,255,.08); background: rgba(8,9,12,.68); backdrop-filter: blur(22px); display: flex; flex-direction: column; }
.admin-brand { display: flex; align-items: center; gap: 10px; }
.admin-brand strong, .admin-brand span { display: block; }
.admin-brand strong { font-size: 12px; }
.admin-brand span { margin-top: 2px; color: rgba(255,255,255,.34); font-size: 8px; text-transform: uppercase; letter-spacing: .1em; }
.admin-nav-links { margin-top: 30px; display: grid; gap: 4px; }
.admin-nav-links button { height: 38px; padding: 0 11px; border: 0; border-radius: 9px; background: transparent; color: rgba(255,255,255,.48); text-align: left; font-size: 10px; cursor: pointer; }
.admin-nav-links button:hover, .admin-nav-links button.active { color: #fff; background: rgba(255,255,255,.055); }
.admin-back { margin-top: auto; min-height: 38px; display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.4); font-size: 9px; }
.admin-back:hover { color: #fff; }
.admin-back svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.admin-main { min-width: 0; padding: 34px; }
.admin-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.admin-head h1 { margin: 8px 0 0; font-size: 30px; letter-spacing: -.04em; }
.admin-head p { margin: 7px 0 0; color: rgba(255,255,255,.42); font-size: 10px; }
.stat-grid { margin-top: 28px; display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 10px; }
.stat-card { padding: 18px; border: 1px solid rgba(255,255,255,.09); border-radius: 16px; background: rgba(255,255,255,.025); backdrop-filter: blur(10px); }
.stat-card span { color: rgba(255,255,255,.34); font-size: 8px; text-transform: uppercase; letter-spacing: .09em; }
.stat-card strong { display: block; margin-top: 12px; color: #fff; font-size: 25px; letter-spacing: -.04em; }
.admin-panel { margin-top: 21px; border-radius: 18px; overflow: hidden; }
.admin-panel-head { position: relative; z-index: 1; min-height: 67px; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid rgba(255,255,255,.08); }
.admin-panel-head h2 { margin: 0; font-size: 13px; }
.admin-panel-copy { margin: 5px 0 0; max-width: 700px; color: rgba(255,255,255,.38); font-size: 9px; line-height: 1.5; }
.admin-panel-head .field { width: min(320px, 100%); height: 38px; }
.table-wrap { position: relative; z-index: 1; overflow: auto; }
.admin-table { width: 100%; min-width: 820px; border-collapse: collapse; }
.admin-table th, .admin-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.055); font-size: 9px; vertical-align: middle; }
.admin-table th { color: rgba(255,255,255,.3); font-size: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; }
.admin-table tr:last-child td { border-bottom: 0; }
.user-cell { min-width: 180px; display: flex; align-items: center; gap: 9px; }
.user-cell .avatar { width: 29px; height: 29px; }
.user-cell strong { display: block; font-size: 9px; }
.user-cell span { display: block; margin-top: 2px; color: rgba(255,255,255,.3); font-size: 8px; }
.status-pill { min-height: 22px; padding: 0 8px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; display: inline-flex; align-items: center; color: rgba(255,255,255,.52); font-size: 8px; }
.status-pill.bad { color: #ff9aa5; border-color: rgba(255,107,122,.23); background: rgba(255,107,122,.07); }
.status-pill.warn { color: #efc47f; border-color: rgba(241,186,99,.22); background: rgba(241,186,99,.06); }
.row-actions { display: flex; flex-wrap: wrap; gap: 5px; }
.inline-form { position: relative; z-index: 1; padding: 15px; display: grid; grid-template-columns: 1fr 1fr 1.3fr auto; gap: 8px; border-bottom: 1px solid rgba(255,255,255,.08); }
.audit-details { max-width: 300px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: rgba(255,255,255,.35); }
.panel-view[hidden] { display: none; }

.toast { position: fixed; right: 18px; bottom: 18px; z-index: 200; width: min(360px, calc(100% - 36px)); padding: 11px 13px; border: 1px solid rgba(255,255,255,.15); border-radius: 12px; background: rgba(20,22,27,.95); box-shadow: 0 18px 50px rgba(0,0,0,.42); color: rgba(255,255,255,.82); font-size: 10px; opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .2s, transform .2s; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast.error { border-color: rgba(255,107,122,.3); color: #ffb2ba; }
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .72s cubic-bezier(.22,1,.36,1), transform .72s cubic-bezier(.22,1,.36,1); }
.reveal.visible { opacity: 1; transform: none; }


.app-home-mark { width: 28px; height: 28px; display: grid; place-items: center; overflow: hidden; }
.app-home-logo { width: 30px; height: 30px; max-width: none; object-fit: contain; }
.admin-brand-logo { width: 58px; height: 58px; margin: -14px; max-width: none; object-fit: contain; }

@keyframes shiny { 0% { background-position: -200% center; } 100% { background-position: 200% center; } }
@keyframes navEnter { to { opacity: 1; transform: none; } }
@keyframes heroEnter { to { opacity: 1; transform: none; } }

@media (max-width: 1180px) {
  .guide-line { display: none; }
}

@media (max-width: 1024px) {
  .nav { grid-template-columns: 100px minmax(0,1fr) 180px; }
  .nav-links { gap: 22px; }
  .feature-section { grid-template-columns: 1fr; gap: 38px; }
  .feature-copy { max-width: 720px; }
  .capabilities-panel { grid-template-columns: 1fr 1fr; }
  .capabilities-panel > div:nth-child(2) { border-right: 0; }
  .capabilities-panel > div { border-bottom: 1px solid rgba(255,255,255,.08); }
  .capabilities-panel > div:nth-last-child(-n+2) { border-bottom: 0; }
  .privacy-grid { grid-template-columns: 1fr; }
  .privacy-card { min-height: 180px; }
  .access-watermark { font-size: clamp(4rem,10vw,6.5rem); filter: none; }
  .access-watermark > strong { background: none; -webkit-text-fill-color: #00d2ff; color: #00d2ff; }
  .access-grid { grid-template-columns: 1fr; max-width: 620px; margin-inline: auto; }
  .access-card { min-height: 450px; }
  .preview-grid { grid-template-columns: 220px 310px minmax(360px,1fr); overflow-x: auto; }
  .stat-grid { grid-template-columns: repeat(3,1fr); }
  .inline-form { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .container { width: min(100% - 28px,1104px); }
  .nav-wrap { min-height: 70px; }
  .nav { min-height: 70px; display: flex; }
  .nav-links, .nav-actions > .pill-button { display: none; }
  .nav-actions { margin-left: auto; }
  .nav-menu-button { display: inline-flex; }
  .brand-mark-only { width: 36px; height: 36px; }
  .brand-logo { width: 70px; height: 70px; }
  .mobile-menu.open { display: grid; gap: 3px; margin-top: 3px; padding: 9px; border: 1px solid rgba(255,255,255,.1); border-radius: 15px; background: rgba(8,9,12,.94); backdrop-filter: blur(18px); }
  .mobile-menu a { padding: 10px; border-radius: 9px; color: rgba(255,255,255,.62); font-size: 11px; }
  .mobile-menu a:hover { color: #fff; background: rgba(255,255,255,.05); }
  .hero { min-height: 510px; padding: 78px 0 70px; }
  .hero-title { font-size: clamp(3.35rem,15vw,5.2rem); }
  .hero-copy { max-width: 430px; font-size: 13px; }
  .compact-nav { top: 8px; }
  .compact-nav-inner { min-height: 48px; display: flex; padding: 5px 6px 5px 9px; }
  .compact-links { display: none; }
  .compact-actions { margin-left: auto; }
  .compact-action:not(.compact-action-primary) { display: none; }
  .preview-section { padding: 44px 0 78px; }
  .mail-preview { overflow-x: auto; border-radius: 16px; }
  .preview-grid { width: 900px; }
  .feature-section { padding: 68px 0 82px; }
  .capabilities-section { padding-bottom: 74px; }
  .capabilities-panel { grid-template-columns: 1fr; padding: 8px 18px; }
  .capabilities-panel > div, .capabilities-panel > div:nth-child(2), .capabilities-panel > div:nth-last-child(-n+2) { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  .capabilities-panel > div:last-child { border-bottom: 0; }
  .privacy-section { padding: 68px 0 82px; }
  .access-section { padding-bottom: 82px; }
  .access-watermark { font-size: clamp(3.25rem,14vw,5rem); }
  .access-grid { margin-top: 38px; }
  .access-card { min-height: 430px; border-radius: 30px; padding: 34px 22px; }
  .final-cta { margin-bottom: 54px; padding: 62px 24px; border-radius: 24px; }
  .site-footer { flex-direction: column; align-items: flex-start; }
  .app-page { width: 100%; padding: 0; }
  .app-menubar { display: none; }
  .app-window { border-radius: 0; border: 0; height: 100vh; }
  .app-layout { height: calc(100% - 38px); display: block; }
  .app-sidebar { position: fixed; z-index: 80; inset: 38px auto 0 0; width: min(300px,88vw); transform: translateX(-102%); transition: transform .25s cubic-bezier(.22,1,.36,1); box-shadow: 30px 0 70px rgba(0,0,0,.55); background: rgba(8,9,12,.98); }
  .app-sidebar.open { transform: translateX(0); }
  .mobile-sidebar-toggle { display: inline-grid; }
  .inbox-layout { grid-template-columns: 1fr; }
  .message-list-pane.reader-open { display: none; }
  .message-reader { display: none; }
  .message-reader.open { display: block; }
  .expiry { display: none; }
  .app-address { max-width: 48vw; }
  .reader-content { padding: 20px; }
  .admin-shell { display: block; }
  .admin-nav { min-height: auto; position: static; padding: 14px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  .admin-nav-links { margin-top: 14px; display: flex; overflow: auto; }
  .admin-nav-links button { white-space: nowrap; }
  .admin-back { margin-top: 10px; }
  .admin-main { padding: 20px 14px 30px; }
  .admin-head { align-items: flex-start; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .admin-panel-head { align-items: stretch; flex-direction: column; }
  .admin-panel-head .field { width: 100%; }
  .inline-form { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .hero-title { font-size: clamp(3rem,16vw,4.35rem); }
  .feature-copy h2, .privacy-heading h2 { font-size: 2.7rem; }
  .steps-panel { padding: 4px 16px; }
  .step-row { grid-template-columns: 38px minmax(0,1fr); gap: 10px; }
  .final-cta h2 { font-size: 2.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal, .hero-enter, .brand-mark-only, .nav-links a, .nav-actions { opacity: 1; transform: none; }
}

@media (max-width: 560px) { .app-menubar-hide { display: none; } }

.language-select { height: 34px; max-width: 138px; border: 1px solid rgba(255,255,255,.11); border-radius: 999px; padding: 0 28px 0 11px; color: rgba(255,255,255,.72); background-color: rgba(8,9,12,.62); background-image: linear-gradient(45deg,transparent 50%,rgba(255,255,255,.48) 50%),linear-gradient(135deg,rgba(255,255,255,.48) 50%,transparent 50%); background-position: calc(100% - 14px) 14px,calc(100% - 10px) 14px; background-size: 4px 4px,4px 4px; background-repeat: no-repeat; appearance: none; outline: none; font-size: 10px; font-weight: 600; cursor: pointer; transition: border-color .18s ease,background-color .18s ease,color .18s ease; }
.language-select:hover,.language-select:focus-visible { color:#fff; border-color:rgba(255,255,255,.2); background-color:rgba(255,255,255,.065); }
.language-select option { color:#111; background:#fff; }
.compact-language-select { height:32px; max-width:112px; font-size:9px; }
.mobile-language-select { width:100%; max-width:none; margin:3px 0 5px; border-radius:10px; }
.language-select-titlebar { justify-self:end; height:28px; max-width:118px; border-radius:8px; background-color:rgba(255,255,255,.025); font-size:8px; }
.admin-language { margin-top:auto; padding-top:18px; }
.admin-language .language-select { width:100%; max-width:none; border-radius:9px; }
.admin-language + .admin-back { margin-top:8px; }
@media (max-width:760px) {
  .nav-actions > .language-select { display:none; }
  .compact-language-select { display:none; }
  .admin-language { margin-top:12px; padding-top:0; }
}
html[dir="rtl"] .preview-sidebar,
html[dir="rtl"] .app-sidebar,
html[dir="rtl"] .message-list-pane,
html[dir="rtl"] .admin-nav { border-right: 0; border-left: 1px solid rgba(255,255,255,.08); }
html[dir="rtl"] .preview-list-pane { border-right: 0; border-left: 1px solid rgba(255,255,255,.08); }
html[dir="rtl"] .capabilities-panel > div { border-right: 0; border-left: 1px solid rgba(255,255,255,.08); }
html[dir="rtl"] .capabilities-panel > div:last-child { border-left: 0; }
html[dir="rtl"] .mailbox-item,
html[dir="rtl"] .message-row,
html[dir="rtl"] .admin-nav-links button,
html[dir="rtl"] .admin-table th,
html[dir="rtl"] .admin-table td { text-align: right; }
html[dir="rtl"] .select,
html[dir="rtl"] .language-select { background-position: 14px 18px, 10px 18px; padding-right: 11px; padding-left: 32px; }
html[dir="rtl"] .language-select { background-position: 14px 14px, 10px 14px; }
html[dir="rtl"] .nav-actions,
html[dir="rtl"] .compact-actions { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .toast { right: auto; left: 18px; }
@media (max-width:720px) {
  html[dir="rtl"] .app-sidebar { inset: 38px 0 0 auto; transform: translateX(102%); box-shadow: -30px 0 70px rgba(0,0,0,.55); }
  html[dir="rtl"] .app-sidebar.open { transform: translateX(0); }
  html[dir="rtl"] .admin-nav { border-left: 0; }
}