*,*::before,*::after{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:'DM Sans',sans-serif;color:#24102d}body{background:#000;overflow-x:hidden}.site-shell{width:1600px;min-height:100vh;margin:0 auto;position:relative}.viewport-rails{position:fixed;inset:0;pointer-events:none;z-index:1200}.viewport-rail{position:absolute;top:0;bottom:0;width:14px}.viewport-rail-left{left:0;background:linear-gradient(180deg,#db3c8b,#c82a8d)}.viewport-rail-right{right:0;background:linear-gradient(180deg,#5ad0ff,#46b8f6)}
.mailbase-stage{position:relative;width:1600px;min-height:1180px;padding-top:0;padding-bottom:85px;background:linear-gradient(rgba(246,158,175,.10),rgba(246,158,175,.24)),url('../images/backgrounds/desktop-miami.png') center top/cover fixed no-repeat}.menubar{position:sticky;top:0;left:0;right:0;height:32px;background:#F5B0BC;border-bottom:1px solid #c08090;display:flex;align-items:center;padding:0 12px;z-index:500;user-select:none;box-shadow:0 2px 0 rgba(43,13,39,.18)}.menubar-brand{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:#1a0a10;text-decoration:none;margin-right:18px;white-space:nowrap}.nav-menus{display:flex}.nav-menu{position:relative}.nav-menu-trigger{padding:0 13px;height:32px;display:flex;align-items:center;font-size:13px;color:#1a0a10;cursor:pointer;border-radius:3px}.nav-menu-trigger:hover,.nav-menu.open .nav-menu-trigger{background:rgba(0,0,0,.13)}.nav-menu-dropdown{display:none;position:absolute;top:32px;left:0;background:#F5B0BC;border:1px solid #c08090;min-width:170px;z-index:600;box-shadow:3px 3px 0 rgba(0,0,0,.25)}.nav-menu.open .nav-menu-dropdown{display:block}.dropdown-item{padding:7px 20px;font-size:13px;color:#1a0a10;cursor:pointer;white-space:nowrap}.dropdown-item:hover{background:#b83060;color:#fff}.menubar-right{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:12px;color:#1a0a10}.menubar-right a{color:#1a0a10;text-decoration:none}.menubar-time{font-weight:600;min-width:38px;text-align:right}
.mailbase-hero{height:420px;position:relative}.mail-window{position:absolute;left:285px;top:95px;width:620px;height:265px;background:#f9edf0;border:2px solid #6a3448;border-radius:10px;box-shadow:12px 16px 28px rgba(43,13,39,.28);overflow:hidden}.window-titlebar{height:42px;background:#f5b0bc;border-bottom:1px solid #c08090;display:flex;align-items:center;gap:9px;padding:0 18px;font-family:'Space Mono',monospace}.window-titlebar strong{margin-left:auto;margin-right:auto}.traffic{width:13px;height:13px;border-radius:50%;border:1px solid #6a3448}.red{background:#e95c69}.yellow{background:#e8b84c}.green{background:#86b868}.window-body{height:223px;display:grid;grid-template-columns:190px 1fr}.window-body aside{border-right:1px solid #c9b5bd;padding:25px 28px;display:flex;flex-direction:column;gap:20px;font-family:'Space Mono',monospace;font-size:13px}.message-list{padding:20px 30px}.message-list i{display:block;height:16px;border-radius:8px;background:rgba(106,52,72,.18);margin-bottom:16px}.message-list i:nth-child(2n){width:72%}.message-list i:nth-child(3n){width:86%}.hero-note{position:absolute;left:970px;top:135px;font-family:'Space Mono',monospace;font-size:29px;font-style:italic;line-height:1.55;color:#8f2854;transform:rotate(-8deg);text-shadow:0 1px rgba(255,255,255,.5)}
.content-card{width:1040px;margin:0 auto;background:rgba(253,243,232,.96);border:2px solid #9d4666;border-radius:6px;padding:52px 60px;box-shadow:10px 12px 0 rgba(93,28,68,.22)}.eyebrow{margin:0 0 8px;color:#d31f62;font-family:'Space Mono',monospace;font-size:14px;letter-spacing:.08em}.content-card h1{font-family:'Space Mono',monospace;font-size:58px;line-height:1;margin:0 0 14px;color:#2a1137}.lead{font-family:'Space Mono',monospace;font-size:19px;font-weight:700;margin:0 0 28px}.content-card p{font-size:16px;line-height:1.6}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:38px;margin-top:38px}.feature-icon{font-family:'Space Mono',monospace;font-size:38px;color:#d31f62;margin-bottom:10px}.feature-grid h2,.privacy-card h2{font-family:'Space Mono',monospace;color:#d31f62}.feature-grid h2{font-size:16px;margin:0 0 8px}.feature-grid p{font-size:14px;margin:0}.button-row{display:flex;justify-content:center;gap:24px;margin-top:42px}.button-row a{min-width:220px;padding:13px 24px;border-radius:5px;text-align:center;text-decoration:none;font-family:'Space Mono',monospace;font-weight:700}.primary-button{background:#d31f62;color:#fff;border:2px solid #d31f62}.secondary-button{background:#fff8f2;color:#2a1137;border:2px solid #d31f62}
.privacy-stage{min-height:1120px;padding-top:0}.privacy-card{width:980px;margin:88px auto 0;padding:52px 58px}.privacy-card h1{font-size:54px}.policy-date{font-family:'Space Mono',monospace;font-size:13px!important;margin-bottom:34px}.privacy-card h2{font-size:18px;margin:27px 0 7px}.privacy-card p{margin:0}.privacy-footer{margin-top:30px;padding-top:20px;border-top:1px solid #e7a2b6}.privacy-footer a{color:#d31f62;font-family:'Space Mono',monospace;text-decoration:none;font-size:14px}
@media(max-width:1600px){.site-shell,.mailbase-stage{width:100vw}.content-card{max-width:calc(100vw - 120px)}}


.mockup-section {
  width: 100%;
  padding: 0 40px 64px;
}

.mockup-panel {
  width: min(1400px, 100%);
  margin: 0 auto;
  padding: 22px;
  background: rgba(253, 243, 232, .96);
  border: 2px solid #9d4666;
  border-radius: 10px;
  box-shadow: 12px 14px 0 rgba(93, 28, 68, .22);
}

.mailbase-mockup-image {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(157, 70, 102, .45);
  border-radius: 6px;
}

@media (max-width: 720px) {
  .mockup-section {
    padding: 0 18px 42px;
  }

  .mockup-panel {
    padding: 10px;
    border-radius: 6px;
  }
}

/* Shared desktop page frame: the pattern stays outside the centered column,
   while the colored rails sit directly beside that column. */
:root {
  --site-column-width: min(1600px, 100vw);
  --viewport-rail-width: 14px;
}

html,
body {
  background-color: #f7f7f4;
  background-image: radial-gradient(#c9c9c9 1px, transparent 1px);
  background-size: 28px 28px;
}

.viewport-rail {
  width: var(--viewport-rail-width);
}

.viewport-rail-left {
  left: max(0px, calc(50% - (var(--site-column-width) / 2) - var(--viewport-rail-width)));
}

.viewport-rail-right {
  right: max(0px, calc(50% - (var(--site-column-width) / 2) - var(--viewport-rail-width)));
}