/* MailArchive shared marketing, client portal, and CMS theme. */
:root {
  --ink: #182034;
  --muted: #687086;
  --line: #e7e9f0;
  --paper: #ffffff;
  --canvas: #f7f8fc;
  --purple: #7259e8;
  --purple-dark: #5841c7;
  --purple-soft: #eeeafd;
  --peach: #ff9d7c;
  --peach-soft: #fff0ea;
  --mint: #5bc5a7;
  --mint-soft: #e5f8f2;
  --amber: #efad4a;
  --amber-soft: #fff5dc;
  --navy: #111827;
  --shadow-sm: 0 4px 18px rgba(32, 38, 57, .06);
  --shadow-lg: 0 24px 80px rgba(36, 29, 78, .15);
  --radius: 18px;
  --font-body: Inter, Aptos, "Segoe UI", system-ui, sans-serif;
  --font-display: Avenir Next, Inter, Aptos Display, "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
svg { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.skip-link { position: fixed; z-index: 1000; top: -80px; left: 16px; padding: 10px 16px; border-radius: 10px; color: white; background: var(--navy); transition: top .2s; }
.skip-link:focus { top: 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.section-pad { padding-left: clamp(24px, 6vw, 96px); padding-right: clamp(24px, 6vw, 96px); }

.brand { display: inline-flex; align-items: center; gap: 10px; font: 800 19px/1 var(--font-display); letter-spacing: -.6px; }
.brand > span:last-child > span { color: var(--purple); }
.brand-mark { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 12px; background: var(--purple); box-shadow: 0 8px 18px rgba(114, 89, 232, .24); overflow: hidden; }
.brand-mark span { position: absolute; display: block; height: 3px; border-radius: 3px; background: white; transform: rotate(-34deg); }
.brand-mark span:nth-child(1) { width: 18px; left: 8px; top: 13px; }
.brand-mark span:nth-child(2) { width: 14px; left: 14px; top: 19px; opacity: .83; }
.brand-mark span:nth-child(3) { width: 8px; left: 20px; top: 25px; opacity: .62; }
.brand-mark-small { width: 32px; height: 32px; border-radius: 10px; }
.brand-mark-small span:nth-child(1) { left: 6px; top: 10px; }.brand-mark-small span:nth-child(2) { left: 11px; top: 16px; }.brand-mark-small span:nth-child(3) { left: 17px; top: 22px; }

.button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 0 19px; border: 1px solid transparent; border-radius: 12px; font-weight: 700; cursor: pointer; transition: transform .2s, background .2s, border-color .2s, box-shadow .2s; }
.button:hover { transform: translateY(-2px); }
.button svg { width: 17px; }
.button-primary { color: white; background: var(--purple); box-shadow: 0 12px 24px rgba(114, 89, 232, .25); }
.button-primary:hover { background: var(--purple-dark); }
.button-dark { color: white; background: var(--navy); box-shadow: 0 10px 20px rgba(17, 24, 39, .14); }
.button-ghost { color: var(--ink); border-color: var(--line); background: white; }
.button-ghost:hover { border-color: #c9c4e8; box-shadow: var(--shadow-sm); }
.button-light { color: var(--ink); background: white; }
.button-small { min-height: 38px; padding: 0 14px; border-radius: 10px; font-size: 13px; }
.icon-button { position: relative; display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; padding: 0; border: 1px solid transparent; border-radius: 10px; color: inherit; background: transparent; cursor: pointer; }
.icon-button:hover { background: rgba(114, 89, 232, .07); }
.icon-button:disabled { opacity: .35; cursor: default; }
.text-link { display: inline-flex; align-items: center; gap: 8px; padding: 12px; font-weight: 700; }
.text-link span { color: var(--purple); }

/* Marketing */
.marketing-header { position: sticky; z-index: 50; top: 0; display: flex; min-height: 76px; align-items: center; justify-content: space-between; padding: 0 clamp(24px, 6vw, 96px); border-bottom: 1px solid rgba(231, 233, 240, .8); background: rgba(255,255,255,.87); backdrop-filter: blur(16px); }
.marketing-nav { display: flex; align-items: center; gap: 28px; font-size: 14px; font-weight: 600; }
.marketing-nav > a:not(.button):hover { color: var(--purple); }
.mobile-menu-button { display: none; }
.hero { position: relative; display: grid; min-height: 720px; grid-template-columns: .9fr 1.1fr; align-items: center; gap: clamp(42px, 5vw, 90px); padding-top: 72px; padding-bottom: 100px; overflow: hidden; background: radial-gradient(circle at 93% 10%, #f5f0ff 0, transparent 31%), linear-gradient(180deg, #fff 0%, #fbfaff 100%); }
.hero::before { position: absolute; width: 420px; height: 420px; border: 1px solid #ece7fe; border-radius: 50%; content: ""; left: -280px; bottom: -200px; box-shadow: 0 0 0 50px #faf8ff, 0 0 0 51px #f0edfa; }
.eyebrow, .kicker { display: inline-flex; align-items: center; gap: 9px; color: var(--purple); font-size: 11px; font-weight: 800; letter-spacing: 1.7px; text-transform: uppercase; }
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 5px var(--mint-soft); }
.hero h1 { max-width: 650px; margin: 22px 0; font: 800 clamp(48px, 5.7vw, 82px)/1.02 var(--font-display); letter-spacing: -4.7px; }
.hero h1 span { color: var(--purple); }
.hero-lede { max-width: 580px; margin: 0; color: var(--muted); font-size: clamp(17px, 1.5vw, 20px); line-height: 1.75; }
.hero-actions { display: flex; align-items: center; gap: 15px; margin-top: 32px; }
.trust-row { display: flex; flex-wrap: wrap; gap: 23px; margin-top: 31px; color: #626b7e; font-size: 12px; font-weight: 600; }
.trust-row span { display: flex; align-items: center; gap: 6px; }.trust-row svg { width: 15px; color: var(--mint); stroke-width: 2.8; }
.hero-visual { position: relative; min-width: 0; padding: 45px 20px 30px; }
.app-preview { position: relative; z-index: 2; min-height: 480px; border: 7px solid rgba(255,255,255,.72); border-radius: 26px; background: white; box-shadow: 0 30px 100px rgba(70, 54, 126, .2); overflow: hidden; transform: perspective(1200px) rotateY(-2.5deg) rotateX(1.2deg); }
.preview-topbar { display: flex; height: 55px; align-items: center; gap: 15px; padding: 0 17px; border-bottom: 1px solid var(--line); }
.preview-brand { width: 40px; }.preview-brand .brand-mark { transform: scale(.66); transform-origin: left center; }
.preview-search { display: flex; height: 30px; flex: 1; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; color: #a1a7b4; font-size: 9px; }
.preview-search svg { width: 12px; }.preview-search kbd { margin-left: auto; padding: 2px 4px; border: 1px solid var(--line); border-radius: 4px; background: #fafafa; font-size: 7px; }
.avatar { display: flex; width: 31px; height: 31px; flex: 0 0 auto; align-items: center; justify-content: center; border-radius: 10px; color: #664cbd; background: #e8defe; font-size: 10px; font-weight: 800; }
.preview-body { display: flex; min-height: 420px; background: #f8f9fc; }
.preview-sidebar { display: flex; width: 66px; flex-direction: column; align-items: center; gap: 20px; padding-top: 30px; border-right: 1px solid var(--line); background: white; }
.preview-sidebar i { width: 17px; height: 17px; border: 2px solid #d7d9e1; border-radius: 5px; }.preview-sidebar i:first-child { border-color: var(--purple); background: var(--purple-soft); }
.preview-content { flex: 1; min-width: 0; padding: 30px 25px; }
.preview-heading { display: flex; align-items: center; justify-content: space-between; }.preview-heading div { display: flex; flex-direction: column; }.preview-heading small { color: #9da3b1; font-size: 7px; font-weight: 700; letter-spacing: .8px; }.preview-heading strong { margin-top: 5px; font: 700 17px var(--font-display); }.soft-chip { padding: 6px 8px; border-radius: 12px; color: #32816c; background: var(--mint-soft); font-size: 7px; }
.mini-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 20px; }.mini-stats article { position: relative; display: flex; min-width: 0; flex-direction: column; padding: 12px; border: 1px solid #ebecef; border-radius: 12px; background: white; }.mini-stats small { margin-top: 8px; color: #9298a6; font-size: 7px; }.mini-stats b { margin-top: 3px; font: 700 14px var(--font-display); }.mini-stats em { margin-top: 4px; color: var(--mint); font-size: 6px; font-style: normal; }.mini-icon { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: 8px; }.mini-icon svg { width: 13px; }.lavender { color: var(--purple); background: var(--purple-soft); }.peach { color: #e77755; background: var(--peach-soft); }.mint { color: #2d9678; background: var(--mint-soft); }.amber { color: #ae741f; background: var(--amber-soft); }
.preview-list { margin-top: 18px; padding: 15px; border: 1px solid #ebecef; border-radius: 12px; background: white; }.preview-list-head { display: flex; justify-content: space-between; margin-bottom: 7px; font-size: 8px; }.preview-list-head span { color: var(--purple); }.mail-row { display: grid; grid-template-columns: 29px 1fr auto; align-items: center; gap: 9px; padding: 9px 0; border-top: 1px solid #eff0f4; }.sender { display: inline-flex; width: 29px; height: 29px; flex: 0 0 auto; align-items: center; justify-content: center; border-radius: 9px; font-size: 9px; font-weight: 800; }.sender.coral { color: #ad513b; background: #ffe1d8; }.sender.purple { color: #6046bd; background: #eae3ff; }.sender.blue { color: #3473a4; background: #dceeff; }.sender.green { color: #277b63; background: #dff4ed; }.mail-row div { display: flex; min-width: 0; flex-direction: column; }.mail-row b { overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.mail-row small { margin-top: 3px; color: #a0a5b0; font-size: 6px; }.file-pill { padding: 4px 5px; border-radius: 4px; color: var(--purple); background: var(--purple-soft); font-size: 6px; font-weight: 800; }
.floating-card { position: absolute; z-index: 4; display: flex; align-items: center; border: 1px solid rgba(230,230,240,.9); background: rgba(255,255,255,.94); box-shadow: 0 18px 45px rgba(58, 44, 101, .17); backdrop-filter: blur(8px); }.preserved-card { right: -12px; bottom: 0; gap: 10px; padding: 12px 16px; border-radius: 14px; }.preserved-card div { display: flex; flex-direction: column; }.preserved-card b { font-size: 10px; }.preserved-card small { margin-top: 3px; color: var(--muted); font-size: 7px; }.format-card { left: -15px; top: 135px; gap: 4px; padding: 8px; border-radius: 12px; }.format-card span { padding: 7px 5px; border-radius: 6px; color: var(--purple); background: var(--purple-soft); font-size: 7px; font-weight: 800; }.orb { position: absolute; border-radius: 50%; filter: blur(1px); }.orb-one { width: 220px; height: 220px; right: -40px; top: 0; background: #e9dffe; }.orb-two { width: 180px; height: 180px; left: 5%; bottom: -10px; background: #ffe9df; }
.quiet-band { padding: 25px clamp(24px, 6vw, 96px); text-align: center; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.quiet-band p { margin: 0 0 16px; color: #a3a8b3; font-size: 9px; font-weight: 800; letter-spacing: 2px; }.quiet-band div { display: flex; justify-content: center; gap: clamp(20px, 5vw, 72px); color: #687085; font-size: 13px; font-weight: 700; }
.steps { padding-top: 112px; padding-bottom: 125px; background: #fff; }.section-heading { max-width: 750px; }.section-heading.centered { margin: 0 auto 55px; text-align: center; }.section-heading h2, .principles h2, .security h2, .final-cta h2 { margin: 15px 0 16px; font: 800 clamp(36px, 4vw, 56px)/1.13 var(--font-display); letter-spacing: -2.5px; }.section-heading p { max-width: 600px; margin: auto; color: var(--muted); line-height: 1.7; }
.step-grid { display: grid; max-width: 1180px; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: auto; }.step-card { position: relative; padding: 30px; border: 1px solid var(--line); border-radius: 22px; background: white; box-shadow: var(--shadow-sm); overflow: hidden; }.step-card.featured { border-color: #d8cffb; background: linear-gradient(155deg, #fff, #faf8ff); transform: translateY(-10px); box-shadow: 0 20px 60px rgba(90,71,160,.12); }.step-number { position: absolute; top: 24px; right: 26px; color: #d6d8e0; font: 700 12px var(--font-display); }.step-illustration { position: relative; display: flex; height: 150px; align-items: center; justify-content: center; margin: 10px 0 25px; border-radius: 16px; background: #f7f7fb; overflow: hidden; }.step-illustration > svg { width: 55px; height: 55px; padding: 13px; border-radius: 16px; color: var(--purple); background: white; box-shadow: 0 10px 30px rgba(50,50,80,.12); }.step-illustration.preserve { gap: 25px; background: var(--purple-soft); }.step-illustration.preserve span { z-index: 1; display: flex; width: 55px; height: 65px; align-items: center; justify-content: center; border-radius: 10px; color: var(--purple); background: white; box-shadow: var(--shadow-sm); font-size: 12px; font-weight: 800; }.step-illustration.preserve i { position: absolute; width: 90px; border-top: 2px dashed #b7a9f0; }.step-card h3 { margin: 0; font: 700 20px var(--font-display); }.step-card p { min-height: 72px; color: var(--muted); font-size: 14px; line-height: 1.7; }.step-tag { display: inline-block; padding: 6px 9px; border-radius: 8px; color: var(--purple); background: var(--purple-soft); font-size: 10px; font-weight: 700; }
.principles { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(60px, 10vw, 140px); padding-top: 120px; padding-bottom: 130px; color: white; background: #181a2d; overflow: hidden; }.kicker.light { color: #b7a9ff; }.principles-copy > p { max-width: 560px; color: #afb4c6; line-height: 1.8; }.feature-list { display: grid; gap: 23px; margin: 35px 0 0; padding: 0; list-style: none; }.feature-list li { display: flex; align-items: flex-start; gap: 15px; }.feature-list li > span { display: flex; width: 38px; height: 38px; flex: 0 0 auto; align-items: center; justify-content: center; border-radius: 11px; color: #bdafff; background: #292943; }.feature-list b, .feature-list small { display: block; }.feature-list b { font-size: 14px; }.feature-list small { margin-top: 5px; color: #969db2; line-height: 1.5; }
.preservation-stack { position: relative; min-height: 450px; }.source-card { position: absolute; width: min(430px, 90%); min-height: 150px; padding: 25px; border-radius: 18px; color: var(--ink); background: white; box-shadow: 0 30px 80px rgba(0,0,0,.25); }.source-card > span { display: inline-flex; padding: 7px; border-radius: 7px; color: var(--purple); background: var(--purple-soft); font-size: 10px; font-weight: 800; }.source-card > b, .source-card > small { display: block; }.source-card > b { margin-top: 12px; }.source-card > small { margin-top: 5px; color: var(--muted); }.card-back { right: 10px; bottom: 6px; transform: rotate(6deg); opacity: .6; }.card-mid { right: 35px; bottom: 70px; transform: rotate(2deg); opacity: .85; }.card-front { z-index: 2; right: 65px; bottom: 120px; min-height: 280px; transform: rotate(-3deg); }.paper-head { display: flex; gap: 12px; align-items: center; }.paper-head div { display: flex; flex-direction: column; }.paper-head small { margin-top: 4px; color: var(--muted); font-size: 10px; }.paper-lines { margin: 25px 0; }.paper-lines i { display: block; height: 7px; margin-top: 9px; border-radius: 4px; background: #eff0f4; }.paper-lines i:nth-child(2) { width: 90%; }.paper-lines i:nth-child(3) { width: 82%; }.paper-lines i:nth-child(4) { width: 55%; }.paper-ticket { display: flex; align-items: center; justify-content: space-around; padding: 18px; border-radius: 11px; color: var(--purple); background: var(--purple-soft); font-weight: 800; }.paper-ticket em { color: #a99de4; font-style: normal; }.verified { display: flex !important; align-items: center; gap: 7px; color: #2d9678 !important; }.verified svg { width: 14px; }
.security { padding-top: 100px; padding-bottom: 100px; background: #fafaff; }.security-card { display: grid; max-width: 1220px; grid-template-columns: 1fr 1fr; align-items: center; gap: 70px; margin: auto; padding: clamp(40px, 6vw, 85px); border-radius: 30px; color: white; background: linear-gradient(135deg, #6d54d9, #856ce9); box-shadow: 0 30px 80px rgba(88,65,199,.25); }.security-card .kicker { color: #ddd7ff; }.security-card h2 { font-size: clamp(34px, 3.5vw, 50px); }.security-card p { color: #e0dcf8; line-height: 1.7; }.security-card .button { margin-top: 16px; }.security-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }.security-grid article { display: flex; min-height: 145px; flex-direction: column; padding: 22px; border: 1px solid rgba(255,255,255,.18); border-radius: 16px; background: rgba(255,255,255,.1); }.security-grid svg { margin-bottom: 20px; }.security-grid b { font-size: 14px; }.security-grid small { margin-top: 7px; color: #ddd8fa; line-height: 1.5; }
.final-cta { padding-top: 120px; padding-bottom: 120px; text-align: center; }.cta-mark { margin-bottom: 25px; }.final-cta h2 { margin-bottom: 12px; }.final-cta p { color: var(--muted); }.final-cta > div:last-child { display: flex; justify-content: center; gap: 12px; margin-top: 28px; }
.site-footer { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 28px; padding: 35px clamp(24px, 6vw, 96px); border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }.site-footer p { margin: 0; }.site-footer nav { display: flex; gap: 22px; }.site-footer nav a:hover { color: var(--purple); }.site-footer small { color: #9ba0ad; }

/* Pricing */
.marketing-nav > a.active:not(.button) { color: var(--purple); }
.pricing-page { background: #fbfaff; }
.pricing-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 34px 60px; align-items: end; padding-top: 105px; padding-bottom: 150px; overflow: hidden; background: radial-gradient(circle at 82% 20%, #eee8ff 0, transparent 31%), linear-gradient(180deg, #fff 0%, #f8f5ff 100%); }
.pricing-hero::after { position: absolute; width: 420px; height: 420px; right: -240px; bottom: -280px; border: 1px solid #e2dcfa; border-radius: 50%; box-shadow: 0 0 0 55px rgba(238,234,253,.55); content: ""; }
.pricing-hero-copy { max-width: 760px; }
.pricing-hero h1 { margin: 18px 0; font: 800 clamp(48px, 5.5vw, 78px)/1.04 var(--font-display); letter-spacing: -4px; }
.pricing-hero h1 span { color: var(--purple); }
.pricing-hero-copy > p { max-width: 680px; margin: 0; color: var(--muted); font-size: 18px; line-height: 1.75; }
.pricing-hero code { padding: 2px 6px; border-radius: 6px; color: #5745af; background: var(--purple-soft); }
.trial-pill { z-index: 1; display: flex; min-width: 285px; align-items: center; gap: 18px; padding: 22px 24px; border: 1px solid rgba(114,89,232,.16); border-radius: 20px; background: rgba(255,255,255,.86); box-shadow: var(--shadow-lg); backdrop-filter: blur(12px); }
.trial-pill > span { font: 800 48px/1 var(--font-display); color: var(--purple); letter-spacing: -3px; }
.trial-pill b, .trial-pill small { display: block; }.trial-pill b { font-size: 17px; }.trial-pill small { margin-top: 6px; color: var(--muted); font-size: 11px; }
.currency-switch { z-index: 2; display: inline-flex; grid-column: 1 / -1; width: fit-content; margin: 8px auto -188px; padding: 5px; border: 1px solid var(--line); border-radius: 14px; background: white; box-shadow: var(--shadow-sm); }
.currency-switch button { padding: 11px 18px; border: 0; border-radius: 10px; color: var(--muted); background: transparent; font-size: 12px; font-weight: 700; cursor: pointer; }
.currency-switch button.active { color: white; background: var(--navy); box-shadow: 0 5px 15px rgba(17,24,39,.15); }
.pricing-plans { position: relative; z-index: 3; padding-top: 85px; padding-bottom: 100px; }
.pricing-grid { display: grid; max-width: 1240px; margin: 0 auto; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.pricing-card { position: relative; display: flex; min-width: 0; min-height: 590px; flex-direction: column; padding: 34px; border: 1px solid var(--line); border-radius: 24px; background: white; box-shadow: 0 14px 45px rgba(41,34,77,.07); }
.pricing-card.featured { border: 2px solid var(--purple); box-shadow: 0 25px 65px rgba(82,65,165,.18); transform: translateY(-12px); }
.popular-tag { position: absolute; top: -15px; right: 24px; padding: 8px 13px; border-radius: 10px; color: white; background: var(--purple); font-size: 10px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; }
.plan-heading { display: flex; align-items: center; gap: 14px; }
.plan-icon { display: inline-flex; width: 46px; height: 46px; flex: 0 0 auto; align-items: center; justify-content: center; border-radius: 14px; font-size: 11px; font-weight: 900; }
.plan-icon.lavender { color: #6550c3; background: var(--purple-soft); }.plan-icon.mint { color: #277b64; background: var(--mint-soft); }.plan-icon.peach { color: #a3563d; background: var(--peach-soft); }
.plan-heading h2 { margin: 0; font: 800 22px var(--font-display); }.plan-heading p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.plan-price { display: flex; align-items: flex-start; margin-top: 32px; }
.plan-price > span { margin: 7px 4px 0 0; color: #565f72; font-size: 20px; font-weight: 800; }
.plan-price strong { font: 800 48px/1 var(--font-display); letter-spacing: -2px; }
.plan-price small { align-self: flex-end; margin: 0 0 6px 7px; color: var(--muted); }
.annual-price { min-height: 18px; margin: 10px 0 24px; color: #5a4bb0; font-size: 11px; font-weight: 700; }
.plan-button { width: 100%; }
.plan-features { display: grid; gap: 15px; margin: 28px 0 0; padding: 25px 0 0; border-top: 1px solid var(--line); list-style: none; }
.plan-features li { position: relative; padding-left: 25px; color: #596174; font-size: 13px; line-height: 1.4; }
.plan-features li::before { position: absolute; left: 0; top: 0; display: inline-flex; width: 17px; height: 17px; align-items: center; justify-content: center; border-radius: 50%; color: #25765f; background: var(--mint-soft); content: "✓"; font-size: 10px; font-weight: 900; }
.pricing-footnote { max-width: 900px; margin: 35px auto 0; color: #8b91a0; font-size: 11px; line-height: 1.7; text-align: center; }
.pricing-assurance { display: grid; grid-template-columns: 1.05fr .95fr; gap: 80px; align-items: center; padding-top: 100px; padding-bottom: 100px; color: white; background: var(--navy); }
.assurance-copy h2 { margin: 16px 0; font: 800 clamp(34px, 4vw, 53px)/1.12 var(--font-display); letter-spacing: -2px; }.assurance-copy p { max-width: 620px; margin: 0; color: #aeb6c8; font-size: 16px; line-height: 1.8; }
.assurance-points { display: grid; gap: 12px; }.assurance-points div { padding: 21px 23px; border: 1px solid #30394b; border-radius: 16px; background: #192131; }.assurance-points b, .assurance-points small { display: block; }.assurance-points b { font-size: 14px; }.assurance-points small { margin-top: 6px; color: #9da7bb; font-size: 11px; }
.pricing-faq { padding-top: 110px; padding-bottom: 115px; background: white; }
.faq-grid { display: grid; max-width: 1050px; margin: auto; grid-template-columns: repeat(2, 1fr); gap: 18px; }.faq-grid article { padding: 28px; border: 1px solid var(--line); border-radius: 18px; background: #fcfcfe; }.faq-grid h3 { margin: 0; font: 750 16px var(--font-display); }.faq-grid p { margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.7; }

/* Authentication and client account */
.auth-shell { min-height: 100vh; background: radial-gradient(circle at 14% 20%, #eee9ff 0, transparent 32%), var(--canvas); }
.auth-header, .account-header { display: flex; min-height: 76px; align-items: center; justify-content: space-between; padding: 0 clamp(22px, 6vw, 90px); border-bottom: 1px solid rgba(231,233,240,.9); background: rgba(255,255,255,.88); backdrop-filter: blur(14px); }
.auth-header > a:last-child { color: var(--muted); font-size: 13px; }.auth-header > a:last-child b { color: var(--purple); }
.auth-main { display: grid; width: min(1180px, calc(100% - 40px)); min-height: calc(100vh - 76px); margin: auto; grid-template-columns: 1fr 540px; gap: 90px; align-items: center; padding: 60px 0; }
.auth-intro h1 { margin: 17px 0; font: 800 clamp(45px, 5vw, 68px)/1.05 var(--font-display); letter-spacing: -3.5px; }.auth-intro > p { max-width: 570px; color: var(--muted); font-size: 17px; line-height: 1.75; }.auth-intro ul { display: grid; gap: 13px; margin: 26px 0 0; padding: 0; list-style: none; }.auth-intro li { position: relative; padding-left: 27px; color: #515a6e; font-weight: 650; }.auth-intro li::before { position: absolute; left: 0; color: var(--mint); content: "✓"; font-weight: 900; }
.auth-card { padding: 38px; border: 1px solid var(--line); border-radius: 24px; background: white; box-shadow: var(--shadow-lg); }.auth-card h1, .auth-card h2 { margin: 8px 0; font: 800 30px var(--font-display); letter-spacing: -1px; }.auth-card > div:first-child > p { margin: 0 0 24px; color: var(--muted); font-size: 13px; }
.auth-form { display: grid; gap: 17px; }.auth-form > label:not(.check-label), .auth-form .form-grid-two label { display: grid; gap: 7px; color: #3f475a; font-size: 12px; font-weight: 750; }.auth-form input:not([type="checkbox"]), .auth-form select { width: 100%; height: 46px; padding: 0 13px; border: 1px solid #dfe2ea; border-radius: 10px; color: var(--ink); background: white; outline: none; }.auth-form input:focus, .auth-form select:focus { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(114,89,232,.1); }.auth-form label small { color: #9399a8; font-size: 9px; font-weight: 500; }.form-grid-two { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.check-label { display: flex; align-items: flex-start; gap: 9px; color: #646c7d; font-size: 11px; line-height: 1.5; }.check-label input { margin-top: 2px; accent-color: var(--purple); }.auth-form > .button { width: 100%; }
.form-alert, .form-success { margin: 16px 0; padding: 13px 15px; border-radius: 11px; font-size: 12px; line-height: 1.5; }.form-alert { color: #9a3e3e; border: 1px solid #f2c9c9; background: #fff1f1; }.form-alert ul { margin: 6px 0 0; padding-left: 18px; }.form-success { color: #226c59; border: 1px solid #bce5d9; background: var(--mint-soft); }.form-security { margin: 18px 0 0; color: #9298a7; font-size: 9px; line-height: 1.55; text-align: center; }.single-card { display: flex; width: min(500px, calc(100% - 38px)); justify-content: center; }.single-card .auth-card { width: 100%; }.admin-auth { background: radial-gradient(circle at 50% 20%, #292442 0, #141925 50%); }.admin-auth .auth-header { color: white; border-color: #2d3444; background: rgba(20,25,37,.9); }.admin-auth .auth-header .brand > span:last-child > span { color: #a895ff; }
.account-shell { min-height: 100vh; background: var(--canvas); }.account-header { position: sticky; z-index: 20; top: 0; }.account-header nav { display: flex; align-items: center; gap: 22px; color: #60687a; font-size: 12px; font-weight: 700; }.account-header form { margin: 0; }.account-header button { padding: 0; border: 0; color: var(--purple); background: none; font: inherit; cursor: pointer; }
.account-main, .purchase-main { width: min(1180px, calc(100% - 40px)); margin: auto; padding: 65px 0 95px; }.account-welcome { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; }.account-welcome h1 { margin: 12px 0 5px; font: 800 44px var(--font-display); letter-spacing: -2px; }.account-welcome p { margin: 0; color: var(--muted); }.account-grid { display: grid; margin-top: 38px; grid-template-columns: repeat(3, 1fr); gap: 17px; }.account-grid article { min-height: 155px; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: white; }.account-grid span, .account-grid strong, .account-grid small { display: block; }.account-grid span { color: var(--muted); font-size: 11px; font-weight: 700; }.account-grid strong { margin-top: 15px; font: 800 22px var(--font-display); }.account-grid small { margin-top: 9px; color: #9298a6; }.account-detail { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-top: 20px; padding: 30px; }.account-detail h2 { margin: 8px 0; font: 750 21px var(--font-display); }.account-detail p { max-width: 750px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.purchase-main .section-heading h1 { margin: 14px 0; font: 800 44px var(--font-display); letter-spacing: -2px; }.purchase-alert { max-width: 800px; margin: 20px auto; }.purchase-form { max-width: 940px; margin: 40px auto 0; }.purchase-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }.purchase-option { cursor: pointer; }.purchase-option > input { position: absolute; opacity: 0; pointer-events: none; }.purchase-option > span { display: flex; min-height: 220px; flex-direction: column; padding: 27px; border: 1px solid var(--line); border-radius: 20px; background: white; box-shadow: var(--shadow-sm); transition: .2s; }.purchase-option input:checked + span { border: 2px solid var(--purple); box-shadow: 0 16px 40px rgba(83,66,165,.14); transform: translateY(-4px); }.purchase-option b, .purchase-option small, .purchase-option strong { display: block; }.purchase-option b { font: 800 20px var(--font-display); }.purchase-option small { margin-top: 7px; color: var(--muted); }.purchase-option strong { margin-top: auto; font: 800 29px var(--font-display); }.purchase-option em { margin-left: 5px; color: var(--muted); font: 500 11px var(--font-body); }.billing-choice { display: flex; gap: 25px; margin: 24px 0; padding: 20px; border: 1px solid var(--line); border-radius: 15px; background: white; }.billing-choice legend { padding: 0 8px; font-size: 11px; font-weight: 800; }.billing-choice label { color: #555e70; font-size: 12px; }.billing-choice input { accent-color: var(--purple); }.purchase-confirm { margin: 22px 0; }.purchase-form > .button { width: 100%; }
.cms-flash { margin: 0 0 20px; }.approval-panel { margin-top: 20px; overflow: hidden; }.approval-panel .card-heading { border-bottom: 1px solid var(--line); }.approval-row { display: grid; min-width: 850px; grid-template-columns: 1.4fr 1fr .8fr 1fr auto; align-items: center; gap: 18px; min-height: 76px; padding: 12px 22px; border-bottom: 1px solid #eff0f4; color: #626a7a; font-size: 10px; }.approval-row:last-child { border-bottom: 0; }.approval-row > div > b, .approval-row > div > small { display: block; }.approval-row > div > b { color: var(--ink); font-size: 11px; }.approval-row > div > small { margin-top: 4px; color: #989eac; }.approval-row form { margin: 0; }.cms-empty { padding: 42px; text-align: center; }.cms-empty b, .cms-empty span { display: block; }.cms-empty span { margin-top: 7px; color: var(--muted); font-size: 11px; }
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }.reveal.visible { opacity: 1; transform: none; }.delay-1 { transition-delay: .12s; }.delay-2 { transition-delay: .24s; }

/* Portal + CMS shared app shell */
.app-shell { min-width: 320px; background: var(--canvas); }
.app-sidebar { position: fixed; z-index: 100; inset: 0 auto 0 0; display: flex; width: 246px; flex-direction: column; padding: 25px 18px 18px; border-right: 1px solid var(--line); background: white; }
.app-sidebar > .brand { margin: 0 10px 35px; }
.side-nav { display: grid; gap: 5px; }.side-nav a { display: flex; min-height: 43px; align-items: center; gap: 12px; padding: 0 12px; border-radius: 10px; color: #697083; font-size: 13px; font-weight: 600; }.side-nav a svg { width: 18px; }.side-nav a > span { margin-left: auto; padding: 2px 7px; border-radius: 8px; color: #77708f; background: #f2f1f8; font-size: 9px; }.side-nav a > b { margin-left: auto; padding: 3px 7px; border-radius: 8px; color: #a34f3c; background: var(--peach-soft); font-size: 9px; }.side-nav a.active { color: var(--purple); background: var(--purple-soft); }.side-nav a:hover { color: var(--ink); background: #f5f5f9; }.sidebar-spacer { flex: 1; }.secondary { margin-top: 20px; }.archive-meter { padding: 13px; border-radius: 12px; background: #f8f7fc; }.archive-meter > div:first-child { display: flex; justify-content: space-between; font-size: 9px; }.archive-meter b { color: var(--ink); }.archive-meter small { color: #969bab; font-size: 8px; }.meter { height: 4px; margin: 9px 0; border-radius: 3px; background: #e4e1ed; overflow: hidden; }.meter i { display: block; height: 100%; border-radius: inherit; background: var(--purple); }.side-profile { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; margin-top: 16px; padding: 14px 4px 0; border-top: 1px solid var(--line); }.side-profile div:nth-child(2) { min-width: 0; }.side-profile b, .side-profile small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.side-profile b { font-size: 11px; }.side-profile small { margin-top: 3px; color: #999fac; font-size: 8px; }
.app-main-wrap { min-height: 100vh; margin-left: 246px; }.app-topbar { position: sticky; z-index: 45; top: 0; display: flex; height: 68px; align-items: center; justify-content: space-between; padding: 0 32px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.9); backdrop-filter: blur(14px); }.sidebar-toggle { display: none; }.global-search { display: flex; width: min(460px, 45vw); height: 39px; align-items: center; gap: 9px; padding: 0 13px; border: 1px solid var(--line); border-radius: 10px; color: #969cab; background: #fafbfc; }.global-search svg { width: 16px; }.global-search input { min-width: 0; flex: 1; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 12px; }.global-search kbd { padding: 3px 6px; border: 1px solid var(--line); border-radius: 5px; background: white; font-size: 9px; }.top-actions { display: flex; align-items: center; gap: 9px; }.health-pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 14px; color: #317e68; background: var(--mint-soft); font-size: 9px; font-weight: 700; }.health-pill i, .environment-card i, .status-chip i, .admin-stat-grid small i { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); }.notification-dot { position: absolute; width: 6px; height: 6px; top: 8px; right: 8px; border: 1px solid white; border-radius: 50%; background: var(--peach); }.dashboard-content { max-width: 1500px; margin: auto; padding: 38px 34px 28px; }.dashboard-welcome { display: flex; align-items: flex-end; justify-content: space-between; gap: 25px; }.overline { color: #979dab; font-size: 9px; font-weight: 800; letter-spacing: 1.3px; }.dashboard-welcome h1 { margin: 7px 0 5px; font: 800 28px var(--font-display); letter-spacing: -1.1px; }.dashboard-welcome h1 span { color: var(--purple); }.dashboard-welcome p { margin: 0; color: var(--muted); font-size: 13px; }.stat-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 15px; margin-top: 28px; }.stat-card { position: relative; min-height: 170px; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: white; box-shadow: 0 2px 10px rgba(30,35,55,.025); overflow: hidden; }.stat-icon { display: inline-flex; width: 35px; height: 35px; align-items: center; justify-content: center; border-radius: 10px; }.stat-icon svg { width: 17px; }.stat-label { margin-top: 14px; color: #737a8c; font-size: 10px; font-weight: 600; }.stat-card > strong { display: block; margin-top: 5px; font: 800 25px var(--font-display); letter-spacing: -.8px; }.stat-card > small { display: block; margin-top: 6px; color: #9298a7; font-size: 8px; }.positive { color: #31846b !important; }.spark-bars { position: absolute; display: flex; height: 47px; right: 17px; bottom: 20px; align-items: end; gap: 3px; }.spark-bars i { width: 5px; border-radius: 3px; background: #d9d1fb; }.spark-bars i:nth-child(1) { height: 30% }.spark-bars i:nth-child(2) { height: 52% }.spark-bars i:nth-child(3) { height: 43% }.spark-bars i:nth-child(4) { height: 70% }.spark-bars i:nth-child(5) { height: 62% }.spark-bars i:nth-child(6) { height: 85% }.spark-bars i:nth-child(7) { height: 100%; background: var(--purple); }.attachment-stack { position: absolute; right: 20px; bottom: 21px; display: flex; }.attachment-stack span, .attachment-stack b { display: flex; width: 28px; height: 34px; align-items: center; justify-content: center; margin-left: -6px; border: 2px solid white; border-radius: 7px; color: #8172bd; background: #eeeafd; font-size: 6px; }.attachment-stack b { color: #777d8c; background: #f1f2f5; }.verified-title { display: flex !important; align-items: center; gap: 7px; }.verified-title svg { width: 20px; padding: 3px; border-radius: 50%; color: white; background: var(--mint); stroke-width: 3; }.integrity-ring { position: absolute; display: flex; width: 55px; height: 55px; right: 19px; bottom: 20px; align-items: center; justify-content: center; border: 5px solid var(--mint-soft); border-top-color: var(--mint); border-right-color: var(--mint); border-radius: 50%; transform: rotate(42deg); }.integrity-ring span { font: 800 12px var(--font-display); transform: rotate(-42deg); }.integrity-ring small { font-size: 7px; }.soft-purple { background: linear-gradient(145deg, #f7f4ff, #fff); }.soft-purple strong { color: #5643b6; }.soft-purple strong span { color: #ada1e3; }.timeline-dots { position: absolute; display: flex; left: 20px; right: 20px; bottom: 24px; align-items: center; justify-content: space-between; }.timeline-dots::before { position: absolute; right: 0; left: 0; height: 2px; background: #d7d0f5; content: ""; }.timeline-dots i { z-index: 1; width: 5px; height: 5px; border: 1px solid #b4a8e9; border-radius: 50%; background: white; }.timeline-dots i:first-child, .timeline-dots i:last-child { width: 9px; height: 9px; background: var(--purple); }
.content-card { border: 1px solid var(--line); border-radius: 16px; background: white; box-shadow: 0 3px 15px rgba(30,35,55,.025); }.archive-section { margin-top: 20px; }.card-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 22px; }.card-heading h2 { margin: 0; font: 700 16px var(--font-display); }.card-heading p { margin: 4px 0 0; color: #9298a7; font-size: 9px; }.view-switch { display: flex; padding: 3px; border: 1px solid var(--line); border-radius: 8px; }.view-switch button { display: inline-flex; width: 28px; height: 26px; align-items: center; justify-content: center; border: 0; border-radius: 5px; color: #9da2af; background: transparent; }.view-switch button.active { color: var(--purple); background: var(--purple-soft); }.view-switch svg { width: 13px; }.table-tools { display: flex; align-items: center; gap: 7px; padding: 12px 22px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.table-search { display: flex; width: min(300px, 28vw); height: 34px; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; }.table-search svg { width: 14px; color: #9fa5b2; }.table-search input { min-width: 0; width: 100%; border: 0; outline: 0; font-size: 10px; }.filter-button { min-height: 31px; padding: 0 10px; border: 1px solid transparent; border-radius: 8px; color: #6f7586; background: transparent; font-size: 9px; font-weight: 700; cursor: pointer; white-space: nowrap; }.filter-button.active { color: var(--purple); border-color: #dad2f7; background: var(--purple-soft); }.filter-button span { margin-left: 3px; opacity: .65; }.filter-button svg { width: 10px; vertical-align: middle; }.table-tools > .button { margin-left: auto; }.table-scroll { overflow-x: auto; }.archive-table { width: 100%; border-collapse: collapse; white-space: nowrap; }.archive-table th { height: 38px; color: #979dac; background: #fafafd; font-size: 8px; font-weight: 700; text-align: left; text-transform: uppercase; letter-spacing: .3px; }.archive-table th, .archive-table td { padding: 0 12px; border-bottom: 1px solid #eff0f4; }.archive-table th:first-child, .archive-table td:first-child { padding-left: 22px; width: 38px; }.archive-table th:last-child, .archive-table td:last-child { padding-right: 20px; }.archive-table tbody tr { height: 72px; transition: background .2s; }.archive-table tbody tr:hover { background: #fcfbff; }.archive-table td { color: #656c7d; font-size: 9px; }.archive-table td > b, .archive-table td > small { display: block; }.archive-table td > b { color: var(--ink); font-size: 10px; }.archive-table td > small { margin-top: 3px; color: #a1a6b1; font-size: 8px; }.archive-table input[type="checkbox"] { width: 13px; height: 13px; accent-color: var(--purple); }.sender-cell { display: flex; align-items: center; gap: 9px; }.sender-cell > div { min-width: 0; }.sender-cell b, .sender-cell small { display: block; }.sender-cell b { color: var(--ink); font-size: 9px; }.sender-cell small { max-width: 130px; margin-top: 3px; overflow: hidden; color: #9ba1af; font-size: 7px; text-overflow: ellipsis; }.subject-button { max-width: 330px; padding: 0; border: 0; text-align: left; background: none; cursor: pointer; }.subject-button b, .subject-button small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.subject-button b { color: var(--ink); font-size: 10px; }.subject-button small { margin-top: 4px; color: #969cab; font-size: 8px; }.subject-button:hover b { color: var(--purple); }.label-chip { display: inline-block; padding: 5px 8px; border-radius: 8px; font-size: 7px; font-weight: 800; }.label-chip.purple { color: #664ec4; background: var(--purple-soft); }.label-chip.blue { color: #3976a0; background: #e3f1fb; }.label-chip.amber { color: #9b6b24; background: var(--amber-soft); }.label-chip.green { color: #2d8068; background: var(--mint-soft); }.file-types { display: flex; }.file-types span, .file-types b { margin-left: -3px; padding: 4px 5px; border: 1px solid white; border-radius: 5px; color: #7a6bb4; background: #efecfb; font-size: 6px; }.file-types b { color: #727887; background: #f0f1f4; }.table-footer { display: flex; align-items: center; justify-content: space-between; min-height: 57px; padding: 0 22px; color: #9298a7; font-size: 9px; }.table-footer > div { display: flex; align-items: center; gap: 3px; }.page { width: 28px; height: 28px; border: 0; border-radius: 7px; color: #777d8b; background: transparent; font-size: 9px; cursor: pointer; }.page.active { color: white; background: var(--purple); }.empty-state { padding: 55px; text-align: center; color: #9298a7; }.empty-state svg { display: block; width: 28px; height: 28px; margin: 0 auto 10px; }.empty-state b, .empty-state span { display: block; }.empty-state b { color: var(--ink); }.empty-state span { margin-top: 5px; font-size: 11px; }.prototype-note { margin: 18px 0 0; color: #a0a5b0; font-size: 9px; text-align: center; }.sidebar-scrim { display: none; }
.message-dialog { width: min(540px, calc(100% - 32px)); padding: 40px; border: 0; border-radius: 22px; color: var(--ink); box-shadow: 0 35px 100px rgba(21,25,45,.28); text-align: center; }.message-dialog::backdrop { background: rgba(20,24,38,.56); backdrop-filter: blur(4px); }.dialog-close { position: absolute; top: 14px; right: 14px; }.dialog-icon { display: flex; width: 55px; height: 55px; align-items: center; justify-content: center; margin: 0 auto 20px; border-radius: 16px; color: var(--purple); background: var(--purple-soft); }.message-dialog h2 { margin: 10px 0; font: 800 24px var(--font-display); }.message-dialog > p { color: var(--muted); line-height: 1.7; }.dialog-files { display: flex; justify-content: center; gap: 10px; margin: 24px 0; }.message-dialog > small { display: flex; align-items: center; justify-content: center; gap: 7px; color: #38836f; }.message-dialog > small svg { width: 15px; }.toast { position: fixed; z-index: 1000; right: 22px; bottom: 22px; max-width: 380px; padding: 13px 18px; border-radius: 11px; color: white; background: var(--navy); box-shadow: var(--shadow-lg); font-size: 12px; opacity: 0; transform: translateY(18px); pointer-events: none; transition: .25s; }.toast.show { opacity: 1; transform: none; }

/* Archive Explorer */
.explorer-window { margin-top: 30px; overflow: hidden; }.explorer-toolbar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: #fafafd; }.explorer-toolbar .icon-button { flex: 0 0 auto; border-color: var(--line); background: white; text-decoration: none; }.explorer-address { display: flex; min-width: 0; flex: 1; align-items: center; gap: 7px; min-height: 38px; padding: 0 13px; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: white; white-space: nowrap; }.explorer-address a { max-width: 240px; overflow: hidden; color: #4f5668; font-size: 10px; font-weight: 700; text-overflow: ellipsis; }.explorer-address a:first-child { color: var(--purple); }.explorer-address span { color: #a3a8b3; }.explorer-search { display: flex; height: 38px; border: 1px solid var(--line); border-radius: 9px; background: white; overflow: hidden; }.explorer-search input { width: 190px; padding: 0 10px; border: 0; outline: 0; font-size: 10px; }.explorer-search button { padding: 0 11px; border: 0; color: var(--purple); background: var(--purple-soft); font-size: 9px; font-weight: 800; cursor: pointer; }.explorer-table tbody tr { height: 54px; }.explorer-name { display: flex; max-width: 430px; align-items: center; gap: 10px; overflow: hidden; color: var(--ink); text-decoration: none; }.explorer-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.explorer-folder-icon { color: #e7b842; font-size: 21px; line-height: 1; }.explorer-file-icon { display: inline-flex; width: 27px; height: 27px; flex: 0 0 auto; align-items: center; justify-content: center; border-radius: 6px; color: #7159d8; background: var(--purple-soft); font-size: 13px; }.explorer-file-icon.large { width: 58px; height: 58px; margin-bottom: 15px; font-size: 27px; }.explorer-details { display: grid; grid-template-columns: 290px minmax(0,1fr); min-height: 430px; }.explorer-details > aside { padding: 30px; border-right: 1px solid var(--line); background: #fcfcff; }.explorer-details aside h2 { overflow-wrap: anywhere; font: 750 18px var(--font-display); }.explorer-details aside p { color: var(--muted); font-size: 10px; line-height: 1.6; }.explorer-details > div { min-width: 0; overflow-x: auto; }

/* Admin */
.admin-sidebar { color: #d7d9e2; border-color: #252b3a; background: #141925; }.brand-inverse { color: white; }.workspace-label { margin: 8px 12px 9px; color: #697184; font-size: 8px; font-weight: 800; letter-spacing: 1.2px; }.admin-sidebar .side-nav a { color: #939aaa; }.admin-sidebar .side-nav a.active { color: white; background: #292442; }.admin-sidebar .side-nav a.active svg { color: #a894ff; }.admin-sidebar .side-nav a:hover { color: white; background: #202635; }.admin-sidebar .side-profile { border-color: #2b3140; }.admin-sidebar .side-profile small { color: #767e90; }.admin-avatar { color: white; background: #6c56d9; }.environment-card { display: flex; flex-direction: column; gap: 6px; margin: 12px 3px; padding: 12px; border: 1px solid #2d3444; border-radius: 11px; background: #1b2130; }.environment-card span { display: flex; align-items: center; gap: 7px; color: #b7bdc9; font-size: 9px; font-weight: 700; }.environment-card small { color: #737c8e; font-size: 8px; }.admin-content { padding-top: 34px; }.topbar-breadcrumb { margin-left: 4px; color: #a0a5b1; font-weight: 400; }.admin-stat-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 15px; margin-top: 28px; }.admin-stat-grid article { display: flex; min-height: 125px; align-items: flex-start; justify-content: space-between; padding: 20px; border: 1px solid var(--line); border-radius: 15px; background: white; }.admin-stat-grid article > div > span, .admin-stat-grid strong, .admin-stat-grid small { display: block; }.admin-stat-grid article > div > span { color: #737a8b; font-size: 10px; font-weight: 600; }.admin-stat-grid strong { margin-top: 8px; font: 800 24px var(--font-display); }.admin-stat-grid small { margin-top: 7px; color: #969cab; font-size: 8px; }.admin-stat-grid small.positive { display: flex; align-items: center; gap: 5px; }.warning-text { color: #b47927 !important; }.admin-layout { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 18px; margin-top: 20px; }.run-panel .card-heading { border-bottom: 1px solid var(--line); }.run-list { padding: 0 22px; }.run-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 15px; padding: 20px 0; border-bottom: 1px solid var(--line); }.run-item:last-child { border-bottom: 0; }.run-icon { display: flex; width: 39px; height: 39px; align-items: center; justify-content: center; border-radius: 11px; }.run-icon svg { width: 18px; }.run-icon.running { color: var(--purple); background: var(--purple-soft); }.run-icon.reconciling { color: #3577a8; background: #e4f2fd; }.run-icon.complete { color: #2c8b6f; background: var(--mint-soft); }.run-main { min-width: 0; }.run-main > div:first-child { display: flex; align-items: center; gap: 9px; }.run-main b { font-size: 11px; }.run-main > small { display: block; margin-top: 4px; color: #999fad; font-size: 8px; }.status-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border-radius: 8px; font-size: 7px; font-weight: 800; }.status-chip.running { color: #6650bf; background: var(--purple-soft); }.status-chip.running i { background: var(--purple); }.status-chip.reconciling { color: #34769f; background: #e5f2fb; }.status-chip.reconciling i { background: #59a4d8; }.status-chip.complete { color: #31816b; background: var(--mint-soft); }.status-chip.attention { color: #a2642b; background: var(--amber-soft); }.progress { height: 5px; margin-top: 13px; border-radius: 3px; background: #eeeef3; overflow: hidden; }.progress i { display: block; height: 100%; border-radius: inherit; background: var(--purple); }.blue-progress i { background: #62a7d4; }.green-progress i { background: var(--mint); }.run-counts { display: flex; align-items: center; gap: 20px; margin-top: 8px; color: #969cab; font-size: 7px; }.run-counts span b { color: #606777; font-size: 8px; }.run-counts strong { margin-left: auto; color: var(--ink); font-size: 8px; }.admin-side-column { display: grid; align-content: start; gap: 18px; }.system-health .card-heading { padding-bottom: 12px; }.system-health ul { margin: 0; padding: 0 20px; list-style: none; }.system-health li { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; border-top: 1px solid #f0f1f4; }.system-health li span { display: flex; align-items: center; gap: 8px; }.service-dot { width: 8px; height: 8px; border-radius: 3px; }.service-dot.purple { background: var(--purple); }.service-dot.blue { background: #64a9d5; }.service-dot.green { background: var(--mint); }.service-dot.amber { background: var(--amber); }.system-health b { font-size: 9px; }.system-health li small { color: #778091; font-size: 8px; }.sample-disclaimer { display: block; margin: 10px 20px 17px; color: #a0a5b0; font-size: 7px; }.completeness-card { padding: 22px; }.completeness-card h3 { margin: 15px 0 7px; font: 700 15px var(--font-display); }.completeness-card p { color: #767d8d; font-size: 10px; line-height: 1.65; }.completeness-card a { display: flex; align-items: center; gap: 6px; margin-top: 16px; color: var(--purple); font-size: 9px; font-weight: 700; }.completeness-card a svg { width: 13px; }.exception-panel { margin-top: 18px; }.exception-panel .card-heading { border-bottom: 1px solid var(--line); }.exception-table { overflow-x: auto; }.exception-row { display: grid; min-width: 830px; min-height: 65px; grid-template-columns: 1.2fr 1.2fr 1.4fr .8fr .5fr; align-items: center; gap: 15px; padding: 0 22px; border-bottom: 1px solid var(--line); color: #666e7e; font-size: 9px; }.exception-row:last-child { border: 0; }.exception-row > span > b, .exception-row > span > small { display: block; }.exception-row > span > b { color: var(--ink); }.exception-row > span > small { margin-top: 4px; color: #9da2ae; font-size: 7px; }.exception-head { min-height: 35px; color: #9ba0ac; background: #fafafd; font-size: 7px; font-weight: 800; text-transform: uppercase; }.mono { font-family: ui-monospace, monospace; }.issue-pill { display: inline-block; padding: 4px 6px; border-radius: 6px; color: #a3652a; background: var(--amber-soft); font-size: 7px; font-weight: 800; }

@media (max-width: 1120px) {
  .hero { grid-template-columns: 1fr; text-align: center; }.hero-copy { z-index: 2; }.hero h1, .hero-lede { margin-left: auto; margin-right: auto; }.hero-actions, .trust-row { justify-content: center; }.hero-visual { width: min(760px, 100%); margin: auto; }.pricing-hero { grid-template-columns: 1fr; text-align: center; }.pricing-hero-copy { margin: auto; }.trial-pill { margin: auto; }.currency-switch { margin-bottom: -188px; }.pricing-card { padding: 28px; }.stat-grid, .admin-stat-grid { grid-template-columns: 1fr 1fr; }.admin-layout { grid-template-columns: 1fr; }.admin-side-column { grid-template-columns: 1fr 1fr; }.subject-button { max-width: 240px; }.site-footer { grid-template-columns: auto 1fr; }.site-footer nav, .site-footer small { text-align: right; }
}

@media (max-width: 820px) {
  .marketing-header { min-height: 65px; }.mobile-menu-button { display: inline-flex; }.marketing-nav { position: absolute; top: 65px; right: 16px; left: 16px; display: none; flex-direction: column; align-items: stretch; gap: 4px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: white; box-shadow: var(--shadow-lg); }.marketing-nav.open { display: flex; }.marketing-nav > a { padding: 11px; }.hero { padding-top: 65px; }.hero h1 { letter-spacing: -3.5px; }.pricing-grid { max-width: 560px; grid-template-columns: 1fr; gap: 28px; }.pricing-card.featured { transform: none; }.pricing-assurance { grid-template-columns: 1fr; gap: 45px; }.auth-main { grid-template-columns: 1fr; gap: 42px; }.auth-intro { text-align: center; }.auth-intro > p { margin-left: auto; margin-right: auto; }.auth-intro ul { width: fit-content; margin-left: auto; margin-right: auto; text-align: left; }.account-grid, .purchase-options { grid-template-columns: 1fr; }.account-detail { align-items: flex-start; flex-direction: column; }.quiet-band div { flex-wrap: wrap; }.step-grid { grid-template-columns: 1fr; }.step-card.featured { transform: none; }.principles { grid-template-columns: 1fr; }.preservation-stack { width: min(560px, 100%); margin: auto; }.security-card { grid-template-columns: 1fr; }.app-sidebar { transform: translateX(-100%); transition: transform .25s; }.app-sidebar.open { transform: none; }.app-main-wrap { margin-left: 0; }.sidebar-toggle { display: inline-flex; }.sidebar-scrim.open { position: fixed; z-index: 90; inset: 0; display: block; background: rgba(15,20,32,.5); }.dashboard-content { padding: 26px 18px; }.app-topbar { padding: 0 18px; }.global-search { width: min(390px, 60vw); }.table-tools { flex-wrap: wrap; }.table-search { width: 100%; }.more-filter { display: none; }.table-tools > .button { margin-left: 0; }.admin-side-column { grid-template-columns: 1fr; }.approval-panel { overflow-x: auto; }
}

@media (max-width: 590px) {
  .section-pad { padding-left: 19px; padding-right: 19px; }.hero { min-height: auto; padding-top: 50px; padding-bottom: 70px; }.hero h1 { font-size: 45px; letter-spacing: -3px; }.hero-actions { flex-direction: column; }.hero-actions .button { width: 100%; }.trust-row { gap: 10px 16px; }.hero-visual { padding: 24px 0 15px; }.pricing-hero { padding-top: 65px; padding-bottom: 135px; }.pricing-hero h1 { font-size: 43px; letter-spacing: -2.8px; }.pricing-hero-copy > p { font-size: 16px; }.trial-pill { min-width: 0; width: 100%; text-align: left; }.currency-switch { width: 100%; margin-bottom: -173px; }.currency-switch button { flex: 1; padding: 10px 8px; font-size: 10px; }.pricing-plans { padding-top: 75px; }.pricing-card { min-height: auto; padding: 27px 23px; }.plan-price strong { font-size: 43px; }.pricing-assurance { padding-top: 75px; padding-bottom: 75px; }.pricing-faq { padding-top: 80px; padding-bottom: 80px; }.faq-grid { grid-template-columns: 1fr; }.auth-header, .account-header { min-height: 65px; padding: 0 18px; }.auth-header > a:last-child { font-size: 10px; }.auth-main { width: min(100% - 28px, 540px); padding: 36px 0 60px; }.auth-intro h1 { font-size: 42px; }.auth-card { padding: 27px 22px; }.form-grid-two { grid-template-columns: 1fr; }.account-header nav > a:first-child { display: none; }.account-main, .purchase-main { width: calc(100% - 30px); padding-top: 40px; }.account-welcome { align-items: flex-start; flex-direction: column; }.account-welcome h1, .purchase-main .section-heading h1 { font-size: 36px; }.purchase-option > span { min-height: 190px; }.billing-choice { flex-direction: column; gap: 12px; }.app-preview { min-height: 360px; border-width: 4px; }.preview-body { min-height: 330px; }.preview-sidebar, .floating-card { display: none; }.preview-content { padding: 22px 12px; }.mini-stats { grid-template-columns: 1fr 1fr; }.mini-stats article:nth-child(3) { display: none; }.quiet-band div { gap: 13px 20px; font-size: 11px; }.steps { padding-top: 80px; padding-bottom: 80px; }.section-heading h2, .principles h2, .security h2, .final-cta h2 { font-size: 35px; letter-spacing: -1.8px; }.principles { padding-top: 85px; padding-bottom: 90px; }.preservation-stack { min-height: 390px; }.card-front { right: 6%; bottom: 90px; }.card-mid { right: 2%; bottom: 43px; }.card-back { right: 0; bottom: 0; }.security { padding-top: 60px; padding-bottom: 60px; }.security-card { gap: 40px; padding: 36px 24px; }.security-grid { grid-template-columns: 1fr; }.security-grid article { min-height: 125px; }.final-cta { padding-top: 80px; padding-bottom: 80px; }.final-cta > div:last-child { flex-direction: column; }.site-footer { grid-template-columns: 1fr; text-align: center; }.site-footer .brand, .site-footer nav { justify-content: center; }.site-footer nav { flex-wrap: wrap; }.site-footer small { text-align: center; }.dashboard-welcome { align-items: flex-start; flex-direction: column; }.dashboard-welcome .button { width: 100%; }.stat-grid, .admin-stat-grid { grid-template-columns: 1fr; }.stat-card { min-height: 155px; }.global-search { display: none; }.health-pill { display: none; }.app-topbar .top-actions .button { padding: 0 9px; font-size: 0; }.app-topbar .top-actions .button svg { width: 17px; }.card-heading { align-items: flex-start; }.archive-section .card-heading p { max-width: 230px; }.filter-button:nth-of-type(n+4) { display: none; }.table-footer > span { display: none; }.table-footer { justify-content: center; }.message-dialog { padding: 35px 22px; }.dialog-files { flex-direction: column; }.run-list { padding: 0 15px; }.run-item { grid-template-columns: auto 1fr; }.run-item > .icon-button { display: none; }.run-counts { flex-wrap: wrap; gap: 5px 12px; }.run-counts strong { margin-left: 0; }.admin-stat-grid article { min-height: 110px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* CMS payment review and activation */
.cms-payment-main { padding-bottom: 70px; }
.cms-payment-summary { margin-bottom: 20px; }
.cms-payment-filters select { min-height: 42px; padding: 0 38px 0 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); }
.cms-payment-table th:first-child, .cms-payment-table td:first-child { min-width: 145px; }
.cms-payment-table td { vertical-align: top; }
.cms-payment-detail-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); gap: 24px; align-items: start; }
.cms-payment-details { display: grid; gap: 0; }
.cms-payment-details > div { display: grid; grid-template-columns: minmax(145px, .42fr) minmax(0, 1fr); gap: 18px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.cms-payment-details dt { color: var(--muted); }
.cms-payment-details dd { margin: 0; overflow-wrap: anywhere; }
.cms-payment-review { display: grid; gap: 16px; }
.cms-payment-review ol { margin: 0; padding-left: 22px; color: var(--muted); }
.cms-payment-review li + li { margin-top: 9px; }
.cms-payment-activation { display: grid; gap: 14px; padding-top: 6px; }
.cms-payment-activation label { display: flex; gap: 10px; align-items: flex-start; }
.cms-payment-activation input[type="checkbox"] { margin-top: 4px; }
.cms-payment-metadata { margin-top: 24px; }
.cms-payment-metadata pre { max-height: 360px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.payment-review-dialog { width: min(760px, calc(100% - 30px)); max-height: calc(100vh - 40px); padding: 34px; border: 0; border-radius: 22px; color: var(--ink); background: var(--surface); box-shadow: 0 35px 100px rgba(21,25,45,.32); }
.payment-review-dialog::backdrop { background: rgba(20,24,38,.62); backdrop-filter: blur(4px); }
.payment-review-dialog h2 { margin: 8px 0; font: 800 28px var(--font-display); }
.payment-review-dialog > div > p { margin-top: 0; color: var(--muted); }
.payment-review-dialog .cms-payment-details { margin-top: 20px; }
.payment-review-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; }
.payment-review-actions button:disabled { cursor: not-allowed; opacity: .45; }

@media (max-width: 900px) {
  .cms-payment-detail-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .cms-payment-details > div { grid-template-columns: 1fr; gap: 6px; }
  .payment-review-dialog { padding: 28px 20px 20px; }
  .payment-review-actions { flex-direction: column-reverse; }
  .payment-review-actions .button { width: 100%; }
}