#container {
  --width: 76rem;
  --gap: 1.5rem;
  color: #243443;
  #head {
    padding-block: 1.4rem;
    background: white;
    > .u2-flex > a { display: flex; align-items: center; gap: .75rem; text-decoration: none; }
    > .u2-flex > a img { max-inline-size: min(15rem, 48vw); max-block-size: 3rem; }
    > .u2-flex > a img + span { display: none; }
    nav > ul { gap: 1.5rem; }
    nav a { font-size: .9rem; font-weight: 600; text-decoration: none; }
  }
  #content {
    .-hero { padding-block: clamp(4rem, 9vw, 8rem); background: var(--hero-bg, #f0f7fb); }
    .-hero > div { display: grid; grid-template-columns: 1.25fr 1fr; align-items: center; gap: 3rem; }
    .-eyebrow { color: var(--color); font-size: .8rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
    h1 { font-size: clamp(2.6rem, 5vw, 4.8rem); line-height: 1.08; letter-spacing: -.045em; max-inline-size: 14ch; margin-block: 1.2rem 1.5rem; text-wrap: balance; }
    .-lead { font-size: 1.15rem; line-height: 1.7; max-inline-size: 48ch; }
    .-actions { display: flex; gap: .8rem; flex-wrap: wrap; margin-block-start: 2rem; }
    .-button { display: inline-block; border-radius: .3rem; padding: .85rem 1.2rem; font-weight: 600; text-decoration: none; background: var(--color); color: white; }
    .-button.-secondary { background: white; color: #243443; border: 1px solid #d6dfe4; }
    .-visual { position: relative; border-radius: 1.5rem; padding: 2rem; background: #fff; box-shadow: 0 1.5rem 4rem #142a4212; border: 1px solid #e3eaf0; transform: rotate(-2deg); }
    .-visual img { inline-size: 100%; max-block-size: 18rem; object-fit: contain; }
    .-window { display: flex; gap: .4rem; margin-block-end: 1.5rem; }
    .-window i { inline-size: .6rem; block-size: .6rem; border-radius: 50%; background: #dce5eb; }
    .-dashboard { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
    .-dashboard > div { padding: 1.2rem; border-radius: .65rem; background: #f3f7fa; }
    .-dashboard b { display: block; margin-block-end: .4rem; color: var(--color); font-size: 1.6rem; }
    .-caption { font-size: .8rem; color: #647581; margin-block-start: 1.5rem; }
    .-section { padding-block: 4.5rem; }
    .-section h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); letter-spacing: -.025em; }
    .-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin-block-start: 2rem; }
    .-card { padding: 1.6rem; border: 1px solid #e1e8ed; border-radius: .8rem; background: white; }
    .-card > span { display: block; color: var(--color); font-size: .8rem; font-weight: 700; margin-block-end: 1.5rem; }
    .-card h3 { font-size: 1.15rem; margin-block: 0 .8rem; }
    .-card p { color: #536571; font-size: .95rem; line-height: 1.65; }
    .-callout { background: var(--hero-bg, #f0f7fb); border-radius: 1rem; padding: 2.5rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
    .-callout p { margin-block-end: 0; }
    .-demo-note { font-size: .85rem; color: #637480; }
  }
  #foot { background: #172b3c; color: #e3ecf2; padding-block: 2.5rem; border: 0; }
  #foot a { color: white; }
  #foot .-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem; }
  #foot .-footer p { margin: 0; font-size: .9rem; }
  #foot .-footer nav { display: flex; flex-wrap: wrap; gap: 1.2rem; font-size: .85rem; }
}
@media (width < 54rem) {
  #container #content {
    .-hero > div { grid-template-columns: 1fr; }
    .-hero h1 { max-inline-size: 18ch; }
    .-visual { max-inline-size: 30rem; transform: none; }
    .-cards { grid-template-columns: 1fr 1fr; }
    .-callout { flex-direction: column; align-items: start; }
  }
}
@media (width < 34rem) {
  #container #content .-cards { grid-template-columns: 1fr; }
}

#container { --hero-bg: #edf5f2; }