@import url("/cic/shell-tokens.css");
:root {
  color-scheme: light;
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", Arial, sans-serif;
  color: var(--of-ink);
  background: var(--of-paper);
  --app-page: var(--of-paper);
  --app-panel: var(--of-paper-soft);
  --app-panel-border: #7693d4;
  --app-heading: var(--of-primary);
  --app-card: var(--of-paper);
  --app-card-border: #aabce8;
  --app-button: var(--of-primary);
  --app-button-text: #fff;
  --app-shadow: rgba(0, 46, 172, .14);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  color: var(--of-ink);
  background: var(--of-paper);
  --app-page: var(--of-paper);
  --app-panel: var(--of-paper-soft);
  --app-panel-border: #5478c8;
  --app-heading: var(--of-primary-bright);
  --app-card: var(--of-paper);
  --app-card-border: #38558d;
  --app-button: var(--of-primary-bright);
  --app-button-text: #091225;
  --app-shadow: rgba(0, 0, 0, .32);
}

* { box-sizing: border-box; }
html { min-height: 100%; overflow-x: hidden; }

body {
  min-height: 100%;
  margin: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: var(--app-page);
}

main {
  width: 100%;
  display: grid;
  gap: 1rem;
  padding: clamp(1.2rem, 5vw, 2.6rem);
  border: 1px solid var(--app-panel-border);
  background: var(--app-panel);
  box-shadow: 0 1rem 3rem var(--app-shadow);
}

h1, p { margin: 0; }
h1 {
  font-size: clamp(3rem, 14vw, 6rem);
  line-height: .9;
  color: var(--app-heading);
}
.eyebrow {
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .7rem;
  font-weight: 900;
}
.lede {
  width: 100%;
  font-size: clamp(1rem, 3vw, 1.25rem);
  line-height: 1.5;
}
.contract {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
}
.contract div {
  display: grid;
  gap: .2rem;
  padding: .65rem;
  border: 1px solid var(--app-card-border);
  background: var(--app-card);
}
.contract span {
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.contract strong { overflow-wrap: anywhere; }
button {
  min-height: var(--control-min-h);
  padding: .65rem 1rem;
  border: 1px solid var(--of-primary);
  background: var(--of-primary);
  border-radius: .2rem;
  color: var(--app-button-text);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--app-button) 55%, transparent);
  outline-offset: 3px;
}

@media (width >= 44rem) {
  main { width: 42rem; }
  .lede { width: 34rem; }
}

@media (width <= 520px) {
  .contract { grid-template-columns: 1fr; }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    color: var(--of-ink);
    background: var(--of-paper);
    --app-page: var(--of-paper);
    --app-panel: var(--of-paper-soft);
    --app-panel-border: #5478c8;
    --app-heading: var(--of-primary-bright);
    --app-card: var(--of-paper);
    --app-card-border: #38558d;
    --app-button: var(--of-primary-bright);
    --app-button-text: #091225;
    --app-shadow: rgba(0, 0, 0, .32);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}