/* Final readability pass. Keep the existing brand palette and display type;
   strengthen the smaller text that carries navigation, context, and status. */

/* Cloud artwork needs opaque navigation text and a more distinct type weight. */
.day #mock .hero .hnav nav,
.day #mock .hero .hnav .login {
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
}
.day #mock .hero .hnav nav a,
.day #mock .hero .hnav .login {
  text-shadow: 0 1px 10px rgba(255,255,255,.65);
}
.day #mock .hero .hnav nav a:hover,
.day #mock .hero .hnav .login:hover {
  color: var(--deep);
  text-decoration: underline;
  text-underline-offset: 5px;
}
#mock .hero .mobile-nav a {
  font-size: 16px;
  font-weight: 600;
}

/* The old translucent grey lost contrast against the lavender artwork. */
.day #mock .hero .sub,
.day #mock .hero .pillb,
.day #mock .hero .offer,
.day #mock .hero .strip dt {
  color: rgba(27,29,74,.85);
}
#mock .hero .sub {
  line-height: 1.4;
}
#mock .hero .sub em {
  color: var(--ink);
  font-weight: 600;
}
#mock .hero .pillb {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
}
#mock .hero .pillb em {
  font-size: 11.5px;
  line-height: 1.2;
}
#mock .hero .offer {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}
#mock .hero .strip dt {
  font-size: 12px;
  line-height: 1.4;
}
#mock .hero .strip dd {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}

/* Keep the two-tone headlines, using the solid muted brand colour on light. */
#mock .sec .h2 .t,
#mock.lite #workspace .h2 .t {
  color: var(--muted);
}
#mock #capabilities .h2 .t {
  color: var(--tint2);
}
#mock .tag {
  font-size: 11.5px;
  line-height: 1.2;
}
#mock .cbody h3,
#mock .ecol h3,
#mock .pcard h3 {
  font-weight: 600;
}
#mock .pcard p,
#mock .ecol p {
  font-size: 16px;
  line-height: 1.55;
}
#mock #capabilities .head p,
#mock #capabilities .ecol p {
  color: rgba(255,255,255,.8);
}
#mock .card.drench .cbody p,
#mock .slab.drench .lead,
#mock .slab.drench .fine {
  color: rgba(255,255,255,.96);
}
#mock .slab.drench .h2 .t {
  color: var(--white);
}

/* Labels remain secondary, but no longer need magnification to read. */
#mock .chips li {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
}
#mock .pcard .pm {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .045em;
  line-height: 1.5;
}
#mock.lite .pcard.end .pm {
  color: var(--accent);
}
#mock .glegend {
  color: rgba(255,255,255,.85);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.35;
}
#mock .tile .tchip,
#mock .doc-h,
#mock .t-head,
#mock .t-run small,
#mock .smp,
#mock .runstrip,
#mock .tick small,
#mock .tick ul,
#mock .st {
  font-size: 11.5px;
  line-height: 1.35;
  letter-spacing: .045em;
}
#mock .cps li {
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: .025em;
}
#mock .tile h3 small,
#mock .doc .cap,
#mock .t-foot .row {
  font-size: 12px;
  line-height: 1.5;
}
#mock .tile h3 small {
  font-weight: 500;
}
#mock .t-row .n {
  color: var(--muted);
  font-size: 12px;
}
#mock .t-row p {
  font-size: 14px;
  line-height: 1.45;
}
#mock .pnote,
#mock .fine {
  font-size: 12.5px;
  line-height: 1.6;
}
#mock .stats div span,
#mock .kv span {
  font-size: 16px;
  line-height: 1.45;
}

/* A readable starting colour keeps the scroll-reveal statement legible. */
#mock .state.rv .w {
  color: var(--muted);
}
#mock .state.rv .w.on {
  color: var(--ink);
}

/* Footer text sits over the port art; use solid ink for dependable contrast. */
.day #mock .fslab .fcols h4 {
  color: var(--ink);
  font-size: 12px;
  line-height: 1.4;
}
.day #mock .fslab .fcols a {
  color: var(--ink);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}
.day #mock .fslab .fcols a:hover {
  color: var(--deep);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.day #mock .fslab .legal {
  color: var(--ink);
  font-size: 12px;
  line-height: 1.6;
}