/* Edition 03: true-to-product blues, full-scale application photography and an editorial rhythm. */
:root {
  --paper: #edf2f5;
  --ink: #14263d;
  --blue: #2c62aa;
  --blue-deep: #102e51;
  --red: #b9d9f2;
  --white: #f8fbfd;
  --m-ink: #14263d;
  --m-dark: #102e51;
  --m-green: #2c62aa;
  --m-cream: #edf2f5;
  --m-lime: #b9d9f2;
  --m-line: #9badbf;
}
::selection { background: #2c62aa; color: white; }
.site-header { background: #f8fbfd; }
.nav .button, .modern-button, .modern-button.light {
  background: #b9d9f2 !important;
  border-color: #b9d9f2 !important;
  color: #14263d !important;
}
.modern-button:hover, .modern-button.light:hover {
  background: #d5eafa !important;
  border-color: #d5eafa !important;
}
.m-text-link:hover, .site-footer a:hover { color: #6aa6de; }
.m-hero { background: #102033; }
.m-hero h1 em, .m-interior .m-page-hero h1 em { color: #a9c9f0; }
.m-hero-photo-label, .m-pack-image span { background: #b9d9f2; }
.m-marquee, .m-page-band { background: #b9d9f2; }
.m-marquee b { color: #2c62aa; }

/* A real architectural image provides a distinct visual pause before the product tour. */
.m-intro {
  grid-template-columns: minmax(120px, .2fr) minmax(0, 1fr) minmax(280px, .7fr);
  gap: 4%;
  align-items: center;
  padding-top: 74px;
  padding-bottom: 82px;
}
.m-intro > div { display: block; }
.m-intro h2 { font-size: clamp(58px, 5vw, 88px); line-height: .91; margin: 0 0 24px; }
.m-intro p { font-size: 17px; max-width: 650px; margin-bottom: 20px; }
.m-intro .m-text-link { display: inline-block; margin-top: 6px; }
.m-intro::after {
  content: "";
  grid-column: 3;
  display: block;
  min-height: 470px;
  width: 100%;
  align-self: stretch;
  background: #c1ccd5 url('/assets/terrace-editorial-blue.webp') center / cover no-repeat;
  box-shadow: 14px 14px 0 #102e51;
}

/* The original two-column gallery made the captured interface unreadable on desktop. */
.m-showcase { background: #dce7f0; padding: 84px 0 94px; }
.m-showcase .m-section-top { margin-bottom: 30px; }
.m-showcase h2 { font-size: clamp(61px, 5.6vw, 100px); }
.m-shot-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 43px; }
.m-shot-primary { --shot-width: 1080px; }
.m-shot-secondary { --shot-width: 1030px; }
.m-shot-tertiary { --shot-width: 1110px; }
.m-shot-grid .show-shot { grid-row: auto; margin: 0; max-width: 100%; }
.m-shot-grid .show-shot > a { border: 1px solid #9cb1c5; box-shadow: 9px 9px 0 #102e51; }
.m-shot-grid .show-shot img { display: block; width: 100%; height: auto; }
.m-shot-grid .show-shot figcaption { margin-top: 17px; padding-top: 11px; }
.m-shot-grid .show-shot figcaption strong { display: block; font-size: 14px; }
.m-shot-grid .show-shot figcaption span { display: block; font-size: 12px; margin-top: 7px; }
.m-shot-grid .show-shot > a, .m-shot-grid .show-shot figcaption { display: block; width: 100%; max-width: var(--shot-width); margin-left: auto; margin-right: auto; }
.m-shot-grid .show-shot figcaption p { font: italic 22px/1.3 Georgia, serif; margin: 20px 0 0; max-width: 410px; }
@media (min-width: 1500px) {
  .m-shot-grid .show-shot { display: grid; grid-template-columns: minmax(0,var(--shot-width)) minmax(240px,1fr); column-gap: 48px; align-items: start; }
  .m-shot-grid .show-shot > a, .m-shot-grid .show-shot figcaption { margin-left: 0; margin-right: 0; }
  .m-shot-grid .show-shot figcaption { margin-top: 0; border-top: 2px solid #102e51; padding-top: 15px; }
  .m-shot-grid .show-shot figcaption strong { display: block; font-size: 15px; }
  .m-shot-grid .show-shot figcaption span { display: block; margin-top: 8px; line-height: 1.5; }
  .m-shot-grid .show-shot figcaption p { font-size: clamp(25px,2vw,34px); margin-top: 35px; }
}
.m-showcase-bottom { margin-top: 58px; }
.m-showcase-bottom p { max-width: 660px; }

.m-difference { background: #102e51; color: #f7fbff; padding: 104px 0 95px; }
.m-difference .m-index { color: #b9d9f2; }
.m-difference-head { display: grid; grid-template-columns: minmax(150px, .25fr) minmax(0, 1.4fr) minmax(230px, .6fr); gap: 5%; align-items: end; }
.m-difference h2 { font: 900 clamp(55px, 5.4vw, 90px)/.92 Impact, 'Arial Narrow', Arial, sans-serif; text-transform: uppercase; letter-spacing: -.04em; margin: 0; }
.m-difference h2 em { display: block; font: italic 400 .79em/.96 Georgia, serif; text-transform: none; letter-spacing: -.06em; color: #b9d9f2; margin-top: 7px; }
.m-difference-head > p { color: #d5e2ee; font-size: 16px; line-height: 1.6; margin: 0; max-width: 400px; }
.m-difference-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 70px; border-top: 2px solid #b9d9f2; }
.m-difference-track article { position: relative; padding: 35px 42px 28px 0; border-right: 1px solid #7892a8; min-height: 275px; }
.m-difference-track article + article { padding-left: 42px; }
.m-difference-track article:last-child { border-right: 0; }
.m-difference-track article::before { content: ""; position: absolute; width: 15px; height: 15px; border: 3px solid #102e51; background: #b9d9f2; top: -10px; left: 0; }
.m-difference-track article + article::before { left: 42px; }
.m-difference-track b { color: #b9d9f2; font-size: 11px; letter-spacing: .18em; }
.m-difference-track h3 { font: 900 clamp(27px, 2.4vw, 39px)/1 Impact, 'Arial Narrow', Arial, sans-serif; text-transform: uppercase; margin: 24px 0 16px; }
.m-difference-track p { color: #d6e1ed; font-size: 15px; line-height: 1.55; max-width: 330px; margin: 0; }
.m-difference-foot { display: flex; align-items: center; justify-content: space-between; gap: 30px; border-top: 1px solid #7892a8; padding-top: 26px; }
.m-difference-foot strong { font: italic 25px/1.3 Georgia, serif; font-weight: 400; max-width: 760px; }
.m-difference-foot a { color: #fff; white-space: nowrap; }

.m-pack-image { background: #d9e6f0; }
.m-pricing { background: #245389; }
.m-pricing .m-index, .m-plan-grid article > span,
.m-security .m-index, .m-security-ledger b { color: #c7e2f7; }
.m-plan-grid article.m-plan-unlimited { background: #163c68; }
.m-final { background: #c7dff1; color: #14263d; }
.m-final .modern-disclosure { color: #38526d; }
.m-final .modern-button { background: #14263d !important; color: white !important; border-color: #14263d !important; }
.m-final .modern-button:hover { background: #2c62aa !important; border-color: #2c62aa !important; }
.m-atlas-card:nth-child(4n+2) .show-shot > a { box-shadow: 11px 11px 0 #6b9bcc; }
.m-interior .m-page-hero:after { box-shadow: 17px 17px 0 #7caddd; }
.site-footer { border-top-color: #74a9d9; }

@media (max-width: 1000px) {
  .m-intro { grid-template-columns: 1fr 1fr; gap: 24px; }
  .m-intro > .m-index { grid-column: 1 / -1; }
  .m-intro::after { grid-column: 2; min-height: 370px; }
  .m-difference-head { grid-template-columns: 1fr 1fr; gap: 25px; }
  .m-difference-head .m-index { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .m-intro { display: block; padding-top: 69px; padding-bottom: 72px; }
  .m-intro h2 { font-size: clamp(52px, 10vw, 76px); }
  .m-intro::after { margin-top: 31px; min-height: 310px; box-shadow: 8px 8px 0 #102e51; }
  .m-showcase { padding: 70px 0 76px; }
  .m-shot-grid { gap: 36px; }
  .m-shot-grid .show-shot figcaption { display: block; }
  .m-shot-grid .show-shot figcaption span { display: block; margin-top: 5px; }
  .m-difference { padding: 76px 0 78px; }
  .m-difference-head { display: block; }
  .m-difference h2 { font-size: clamp(51px, 11vw, 70px); margin: 25px 0; }
  .m-difference-head > p { font-size: 15px; }
  .m-difference-track { display: block; margin-top: 46px; }
  .m-difference-track article, .m-difference-track article + article { padding: 25px 0 27px; min-height: 0; border-right: 0; border-bottom: 1px solid #7892a8; }
  .m-difference-track article::before, .m-difference-track article + article::before { left: auto; right: 0; }
  .m-difference-foot { display: block; }
  .m-difference-foot strong { display: block; font-size: 21px; margin-bottom: 20px; }
}