/*
 * rem-standards.css -- Real Estate Moguls Brand Standards
 * Complete brand guidelines & design system reference page.
 */

.rem-standards-page {
  -webkit-font-smoothing: antialiased;
  --blue-lt: #EBF8FF;
  --blue-dk: #1d8ab5;
  --mid: #4A5568;
  --bdr: #E2E5E9;
  --rad: 6px;
}

/* ── HERO ── */
.rem-standards-page .hero {
  background: var(--authority, #0D1B2A);
  border-bottom: 5px solid var(--primary, #29ABE2);
  padding: 140px 40px 90px;
}
.rem-standards-page .hero-inner { max-width: 1100px; margin: 0 auto; }
.rem-standards-page .hero-eye {
  font-family: var(--font-body);
  font-size: 13px; font-weight: 700; letter-spacing: .28em;
  text-transform: uppercase; color: var(--primary);
  display: block; margin-bottom: 24px;
}
.rem-standards-page .hero h1 {
  font-family: var(--font-display);
  font-size: clamp(38px, 5.8vw, 68px);
  font-weight: 800; line-height: 1.06;
  color: #fff; margin: 0 0 24px; letter-spacing: -.025em;
}
.rem-standards-page .hero h1 em { font-style: normal; color: var(--primary); }
.rem-standards-page .hero-sub {
  font-family: var(--font-body);
  font-size: 20px; color: rgba(255,255,255,.62);
  line-height: 1.75; max-width: 620px; margin: 0;
}

/* ── SUB NAV ── */
.rem-standards-page .nav-bar {
  background: #fff;
  border-bottom: 1px solid var(--bdr);
  position: sticky; top: 0; z-index: 100;
  padding: 0 40px;
}
.rem-standards-page .nav-inner {
  max-width: 1100px; margin: 0 auto;
  display: flex; gap: 0; overflow-x: auto;
}
.rem-standards-page .nav-inner a {
  font-family: var(--font-body);
  font-size: 14px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; text-decoration: none;
  color: var(--mid); padding: 18px 22px;
  border-bottom: 3px solid transparent;
  white-space: nowrap; transition: all .18s;
}
.rem-standards-page .nav-inner a:hover { color: var(--primary); border-bottom-color: var(--primary); }

/* ── SECTIONS ── */
.rem-standards-page .sec { padding: 80px 40px; }
.rem-standards-page .sec-alt { padding: 80px 40px; background: var(--background, #F2F4F7); }
.rem-standards-page .sec-dark { padding: 80px 40px; background: var(--authority, #0D1B2A); }
.rem-standards-page .inn { max-width: 1100px; margin: 0 auto; }
.rem-standards-page .mid-w { max-width: 840px; margin: 0 auto; }

/* ── TYPOGRAPHY ── */
.rem-standards-page .eye {
  font-family: var(--font-body);
  font-size: 13px; font-weight: 700; letter-spacing: .24em;
  text-transform: uppercase; color: var(--primary);
  display: block; margin-bottom: 14px;
}
.rem-standards-page .eye-lt { color: rgba(41,171,226,.8); }
.rem-standards-page h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.8vw, 44px);
  font-weight: 800; line-height: 1.1;
  color: var(--authority); margin: 0 0 20px; letter-spacing: -.02em;
}
.rem-standards-page h2.lt { color: #fff; }
.rem-standards-page h2 em { font-style: normal; color: var(--primary); }
.rem-standards-page h3 {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 800;
  color: var(--authority); margin: 0 0 14px; letter-spacing: -.01em;
}
.rem-standards-page h3.lt { color: #fff; }
.rem-standards-page .body { font-family: var(--font-body); font-size: 18px; color: var(--mid); line-height: 1.78; }
.rem-standards-page .body-lt { font-family: var(--font-body); font-size: 18px; color: rgba(255,255,255,.62); line-height: 1.78; }
.rem-standards-page .pull {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 700; color: var(--authority); line-height: 1.35;
  border-left: 4px solid var(--primary);
  padding: 6px 0 6px 24px; margin: 28px 0;
}
.rem-standards-page .pull.lt { color: rgba(255,255,255,.8); }

/* ── SECTION DIVIDER ── */
.rem-standards-page .sec-label {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 48px;
}
.rem-standards-page .sec-label-num {
  font-family: var(--font-body);
  font-size: 13px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--primary);
  background: var(--blue-lt);
  padding: 6px 14px; border-radius: 3px;
  white-space: nowrap;
}
.rem-standards-page .sec-label-line { flex: 1; height: 1px; background: var(--bdr); }

/* ── LOGO SECTION ── */
.rem-standards-page .logo-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 36px;
}
.rem-standards-page .logo-box {
  border-radius: var(--rad); padding: 48px 40px;
  display: flex; align-items: center; justify-content: center;
  min-height: 200px;
}
.rem-standards-page .logo-box.on-light {
  background: #fff; border: 1px solid var(--bdr);
}
.rem-standards-page .logo-box.on-dark {
  background: var(--authority);
}
.rem-standards-page .logo-box img { max-width: 320px; width: 100%; height: auto; }
.rem-standards-page .logo-rules {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 22px; margin-top: 36px;
}
.rem-standards-page .logo-rule {
  border: 1px solid var(--bdr); border-radius: var(--rad);
  padding: 28px 24px; background: #fff;
}
.rem-standards-page .logo-rule h4 {
  font-family: var(--font-display);
  font-size: 17px; font-weight: 700; color: var(--authority);
  margin: 0 0 8px;
}
.rem-standards-page .logo-rule p {
  font-family: var(--font-body);
  font-size: 15px; color: var(--mid); line-height: 1.7; margin: 0;
}

/* ── COLOR SWATCHES ── */
.rem-standards-page .swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px; margin-top: 36px;
}
.rem-standards-page .swatch { border-radius: var(--rad); overflow: hidden; border: 1px solid var(--bdr); }
.rem-standards-page .swatch-color { height: 80px; }
.rem-standards-page .swatch-info { padding: 14px 16px; background: #fff; }
.rem-standards-page .swatch-name { font-family: var(--font-body); font-size: 14px; font-weight: 700; color: var(--authority); margin-bottom: 4px; }
.rem-standards-page .swatch-hex { font-size: 13px; color: #999; font-family: 'Courier New', monospace; }
.rem-standards-page .swatch-use { font-family: var(--font-body); font-size: 12px; color: #bbb; margin-top: 6px; line-height: 1.5; }

/* ── TYPE SPECIMENS ── */
.rem-standards-page .type-specimen {
  border: 1px solid var(--bdr); border-radius: var(--rad);
  overflow: hidden; margin-bottom: 16px;
}
.rem-standards-page .type-demo {
  padding: 28px 32px; background: #fff;
  border-bottom: 1px solid var(--bdr);
}
.rem-standards-page .type-meta {
  padding: 14px 32px; background: var(--background);
  display: flex; gap: 24px; flex-wrap: wrap;
}
.rem-standards-page .type-meta-item { font-family: var(--font-body); font-size: 13px; color: #999; }
.rem-standards-page .type-meta-item strong { color: var(--mid); font-weight: 700; }

/* ── BUTTON DEMO ── */
.rem-standards-page .btn-demo {
  padding: 40px; background: var(--authority);
  border-radius: var(--rad);
  display: flex; gap: 16px; flex-wrap: wrap;
  align-items: center; margin-top: 36px;
}
.rem-standards-page .btn-demo-lt {
  padding: 40px; background: var(--background);
  border: 1px solid var(--bdr); border-radius: var(--rad);
  display: flex; gap: 16px; flex-wrap: wrap;
  align-items: center; margin-top: 16px;
}
.rem-standards-page .btn {
  display: inline-block; padding: 16px 34px;
  font-family: var(--font-body);
  font-size: 15px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; text-decoration: none;
  border-radius: 3px; border: 2px solid transparent;
  cursor: pointer; transition: all .18s;
}
.rem-standards-page .btn-p { background: var(--primary); color: #fff; border-color: var(--primary); }
.rem-standards-page .btn-p:hover { background: var(--blue-dk); border-color: var(--blue-dk); }
.rem-standards-page .btn-g { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.rem-standards-page .btn-g:hover { border-color: var(--primary); color: var(--primary); }
.rem-standards-page .btn-o { background: transparent; color: var(--primary); border-color: var(--primary); }
.rem-standards-page .btn-o:hover { background: var(--primary); color: #fff; }
.rem-standards-page .btn-a { background: var(--accent); color: #fff; border-color: var(--accent); }
.rem-standards-page .btn-a:hover { opacity: .88; }
.rem-standards-page .btn-label {
  font-family: var(--font-body);
  font-size: 12px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.35);
  white-space: nowrap;
}
.rem-standards-page .btn-label-dk { color: var(--mid); }

/* ── CARDS ── */
.rem-standards-page .cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 36px; }
.rem-standards-page .card { border: 1px solid var(--bdr); border-radius: var(--rad); padding: 32px 26px; background: #fff; }
.rem-standards-page .card-dk {
  border: 1px solid rgba(41,171,226,.2);
  border-radius: var(--rad); padding: 32px 26px;
  background: rgba(255,255,255,.04);
}
.rem-standards-page .card-n {
  font-family: var(--font-body);
  font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--primary); margin-bottom: 14px;
}
.rem-standards-page .card h4 {
  font-family: var(--font-display);
  font-size: 19px; font-weight: 700; color: var(--authority); margin: 0 0 10px; line-height: 1.3;
}
.rem-standards-page .card-dk h4 { color: #fff; }
.rem-standards-page .card p, .rem-standards-page .card-dk p {
  font-family: var(--font-body); font-size: 16px; line-height: 1.7; margin: 0;
}
.rem-standards-page .card p { color: #667; }
.rem-standards-page .card-dk p { color: rgba(255,255,255,.55); }

/* ── PULL QUOTE DEMOS ── */
.rem-standards-page .pull-demo {
  background: var(--background); border: 1px solid var(--bdr);
  border-radius: var(--rad); padding: 36px 40px; margin-top: 36px;
}
.rem-standards-page .pull-demo-lt {
  background: var(--authority); border-radius: var(--rad);
  padding: 36px 40px; margin-top: 16px;
}
.rem-standards-page .pull-lt-var {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 700; font-style: italic;
  color: var(--primary); line-height: 1.4;
  text-align: center; margin: 0;
}

/* ── STEPS ── */
.rem-standards-page .step-demo { margin-top: 36px; }
.rem-standards-page .step {
  display: grid; grid-template-columns: 60px 1fr;
  gap: 22px; padding: 28px 0; border-bottom: 1px solid var(--bdr);
}
.rem-standards-page .step:last-child { border-bottom: none; }
.rem-standards-page .step-n {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--primary); color: #fff;
  font-family: var(--font-display);
  font-size: 18px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 3px;
}
.rem-standards-page .step h4 {
  font-family: var(--font-display);
  font-size: 19px; font-weight: 700; color: var(--authority); margin: 0 0 8px;
}
.rem-standards-page .step p { font-family: var(--font-body); font-size: 17px; color: var(--mid); line-height: 1.75; margin: 0; }

/* ── SERIES BLOCK ── */
.rem-standards-page .series-block {
  background: var(--blue-lt);
  border-left: 4px solid var(--primary);
  padding: 32px 36px;
  border-radius: 0 var(--rad) var(--rad) 0;
  margin-top: 36px;
}
.rem-standards-page .series-block p { font-family: var(--font-body); font-size: 19px; color: var(--authority); line-height: 1.8; margin: 0; }

/* ── SPLIT DEMO ── */
.rem-standards-page .split-demo {
  display: grid; grid-template-columns: 1fr 1fr;
  border: 1px solid var(--bdr); border-radius: var(--rad);
  overflow: hidden; margin-top: 36px;
}
.rem-standards-page .split-img-ph {
  background: linear-gradient(135deg, #0D1B2A 0%, #1a2d42 100%);
  min-height: 280px; display: flex; align-items: center;
  justify-content: center;
}
.rem-standards-page .split-img-ph span {
  font-family: var(--font-body);
  font-size: 13px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255,255,255,.2);
}
.rem-standards-page .split-copy-demo { padding: 44px 40px; background: #fff; }
.rem-standards-page .split-copy-demo.alt { background: var(--background); }

/* ── SPTS ── */
.rem-standards-page .spts { margin-top: 24px; display: flex; flex-direction: column; gap: 20px; }
.rem-standards-page .spt { padding-left: 18px; border-left: 3px solid var(--primary); }
.rem-standards-page .spt h5 { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--authority); margin: 0 0 4px; }
.rem-standards-page .spt p { font-family: var(--font-body); font-size: 15px; color: #666; line-height: 1.65; margin: 0; }

/* ── PROGRESSION ── */
.rem-standards-page .prog-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0; border: 1px solid rgba(41,171,226,.2);
  border-radius: var(--rad); overflow: hidden; margin-top: 36px;
}
.rem-standards-page .prog-card {
  padding: 32px 28px;
  border-right: 1px solid rgba(41,171,226,.2);
  background: rgba(255,255,255,.04);
}
.rem-standards-page .prog-card:last-child { border-right: none; }
.rem-standards-page .prog-num {
  font-family: var(--font-display);
  font-size: 44px; font-weight: 800;
  color: rgba(41,171,226,.15); line-height: 1;
  margin-bottom: 14px; letter-spacing: -.03em;
}
.rem-standards-page .prog-card h4 { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: #fff; margin: 0 0 8px; }
.rem-standards-page .prog-tag {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--primary);
  margin-bottom: 12px; display: block;
}
.rem-standards-page .prog-card p { font-family: var(--font-body); font-size: 15px; color: rgba(255,255,255,.55); line-height: 1.7; margin: 0; }

/* ── CLARITY BAR ── */
.rem-standards-page .clarity-demo {
  font-family: var(--font-body);
  background: #fff; border: 1px solid var(--bdr);
  border-radius: var(--rad);
  padding: 22px 36px; margin-top: 36px;
  font-size: 18px; color: var(--mid);
}
.rem-standards-page .clarity-demo strong { color: var(--authority); }

/* ── OFFER BLOCK ── */
.rem-standards-page .offer-demo {
  background: var(--authority);
  border-top: 5px solid var(--primary);
  border-bottom: 5px solid var(--primary);
  border-radius: var(--rad);
  padding: 52px 40px; text-align: center;
  margin-top: 36px;
}
.rem-standards-page .offer-demo h3 {
  color: #fff; font-size: clamp(28px, 4vw, 44px); margin-bottom: 12px;
}
.rem-standards-page .offer-sub-demo {
  font-family: var(--font-body);
  font-size: 18px; font-weight: 700; font-style: italic;
  color: var(--primary); margin-bottom: 24px;
}
.rem-standards-page .offer-pull-demo {
  font-family: var(--font-body);
  font-size: 18px; font-weight: 700; color: #fff;
  max-width: 560px; margin: 24px auto 0;
  line-height: 1.5; font-style: italic;
  border: 1px solid rgba(41,171,226,.3);
  border-radius: var(--rad); padding: 24px 32px;
}

/* ── HOST CARD GRID ── */
.rem-standards-page .host-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 3px; margin-top: 36px;
}
.rem-standards-page .host-card {
  position: relative; overflow: hidden; height: 240px;
  background: var(--authority); border-radius: var(--rad);
}
.rem-standards-page .host-card-ph {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #0D1B2A, #1a2d42);
  display: flex; align-items: flex-end; padding: 20px;
}
.rem-standards-page .host-card-label { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: #fff; line-height: 1.3; }
.rem-standards-page .host-card-sub { font-family: var(--font-body); font-size: 12px; color: var(--primary); margin-top: 2px; }

/* ── CODE BLOCK ── */
.rem-standards-page .code-note {
  background: #F0F4F8; border: 1px solid #D6DCE4;
  border-radius: var(--rad); padding: 20px 24px;
  margin-top: 16px;
}
.rem-standards-page .code-note p {
  font-size: 14px; color: #5A6470; line-height: 1.7;
  font-family: 'Courier New', monospace; margin: 0;
}

/* ── TOKENS TABLE ── */
.rem-standards-page .token-table {
  width: 100%; border-collapse: collapse; margin-top: 36px;
}
.rem-standards-page .token-table th {
  font-family: var(--font-body);
  font-size: 12px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--mid);
  text-align: left; padding: 12px 16px;
  background: var(--background); border-bottom: 2px solid var(--bdr);
}
.rem-standards-page .token-table td {
  font-family: var(--font-body);
  font-size: 15px; color: var(--mid);
  padding: 14px 16px; border-bottom: 1px solid var(--bdr);
  vertical-align: top; line-height: 1.6;
}
.rem-standards-page .token-table tr:last-child td { border-bottom: none; }
.rem-standards-page .token-table td:first-child {
  font-family: 'Courier New', monospace;
  font-size: 14px; color: var(--primary); font-weight: 700;
}
.rem-standards-page .token-table td:nth-child(2) {
  font-family: 'Courier New', monospace;
  font-size: 14px; color: #999;
}

/* ── VOICE GRID ── */
.rem-standards-page .voice-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 22px; margin-top: 36px;
}
.rem-standards-page .voice-card {
  border-radius: var(--rad); padding: 28px;
  border: 1px solid var(--bdr);
}
.rem-standards-page .voice-card.do { border-top: 3px solid var(--primary); }
.rem-standards-page .voice-card.dont { border-top: 3px solid #E55; }
.rem-standards-page .voice-tag {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; margin-bottom: 16px; display: block;
}
.rem-standards-page .voice-tag.do { color: var(--primary); }
.rem-standards-page .voice-tag.dont { color: #E55; }
.rem-standards-page .voice-example {
  font-family: var(--font-body);
  font-size: 16px; line-height: 1.7; color: var(--authority);
  margin-bottom: 12px; padding-bottom: 12px;
  border-bottom: 1px solid var(--bdr);
}
.rem-standards-page .voice-example:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

/* ── CLOSING / FOOTER ── */
.rem-standards-page .bg-footer {
  background: var(--authority);
  border-top: 5px solid var(--primary);
  padding: 52px 40px;
  display: flex; justify-content: space-between;
  align-items: center; flex-wrap: wrap; gap: 20px;
}
.rem-standards-page .footer-brand {
  font-family: var(--font-body);
  font-size: 13px; font-weight: 700;
  letter-spacing: .08em; color: rgba(255,255,255,.3);
}
.rem-standards-page .footer-note {
  font-family: var(--font-body);
  font-size: 12px; color: rgba(255,255,255,.18);
  letter-spacing: .1em; text-transform: uppercase;
}

/* ── RESPONSIVE ── */
@media (max-width: 960px) {
  .rem-standards-page .hero { padding: 120px 24px 64px; }
  .rem-standards-page .sec,
  .rem-standards-page .sec-alt,
  .rem-standards-page .sec-dark { padding: 64px 24px; }
  .rem-standards-page .nav-bar { padding: 0 24px; }
  .rem-standards-page .bg-footer { padding: 40px 24px; }
  .rem-standards-page .cards3,
  .rem-standards-page .prog-grid,
  .rem-standards-page .host-grid { grid-template-columns: 1fr; }
  .rem-standards-page .split-demo,
  .rem-standards-page .voice-grid { grid-template-columns: 1fr; }
  .rem-standards-page .logo-grid { grid-template-columns: 1fr; }
  .rem-standards-page .logo-rules { grid-template-columns: 1fr; }
  .rem-standards-page .btn-demo,
  .rem-standards-page .btn-demo-lt { padding: 28px 24px; }
}
@media (max-width: 600px) {
  .rem-standards-page .hero h1 { font-size: 36px; }
  .rem-standards-page .hero-sub { font-size: 17px; }
  .rem-standards-page .logo-box { padding: 32px 24px; min-height: 140px; }
  .rem-standards-page .logo-box img { max-width: 240px; }
}