/* Palette and type sampled from the Milvian x Cisco UAE deck. Arial throughout. */
:root {
  --paper: #f2f1f1;
  --paper2: #e8e7e5;
  --white: #fff;
  --ink: #253c4b;
  --ink2: #4c5b68;
  --ink3: #8a949c;
  --blue: #1b94d5;
  --blue-d: #0e5c86;
  --orange: #e0940f;
  --dark: #1b2c39;
  --dark2: #16242f;
  --rule: #c1c5c9;
  --rule2: #e1e2e4;
  --sans: "Inter", sans-serif;
  --wrap: 1180px;
  --read: 74ch;
  /* Bootstrap tokens remapped to the Milvian palette */
  --bs-body-font-family: var(--sans);
  --bs-body-font-size: 16.5px;
  --bs-body-color: var(--ink2);
  --bs-body-bg: var(--paper);
  --bs-link-color-rgb: 14, 92, 134;
  --bs-link-hover-color-rgb: 27, 148, 213;
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
  --bs-border-color: var(--rule);
  --bs-emphasis-color: var(--ink);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 76px
}

body {
  background: var(--paper);
  color: var(--ink2);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased
}

img {
  max-width: 100%;
  height: auto;
  display: block
}

a {
  color: var(--blue-d)
}

a:hover {
  color: var(--blue)
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 28px
}

.narrow {
  max-width: var(--read)
}

/* custom icon set */
.ic {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: var(--blue);
  vertical-align: -2px;
  margin-right: 8px;
  display: inline-block
}

/* ---------------------------------------------------------------
   Floating navbar support.
   The navbar's own look lives in public/css/navbar.css (identical to
   the file on milviangroup.com). These rules are only what this
   package needs on top of it: the fixed-nav offset, dropdown styling
   and the mobile panel, none of which navbar.css provides.
   --------------------------------------------------------------- */

/* navbar.css sets position:fixed, so content needs to clear it */
body {
  padding-top: 104px
}

@media(max-width:768px) {
  body {
    padding-top: 88px
  }
}

/* keep in-page anchors from landing under the floating bar */
html {
  scroll-padding-top: 120px
}



.mv-toc a,
h2[id],
h3[id],
section[id] {
  scroll-margin-top: 120px
}

/* brand */
.milvian-navbar .navbar-brand {
  padding: 0;
  margin: 0
}

.milvian-navbar .navbar-brand img {
  width: auto
}

/* keep multi-word labels like "Hardware & Sensors" on one line */
.milvian-navbar .navbar-nav .nav-item .nav-link {
  white-space: nowrap !important
}

/* Stop the centred link list running underneath the CTA.
   .navbar-nav carries mx-auto, so when the links are wider than the space
   between logo and button the auto margins let them overflow both ways and
   the button paints on top. Laying the bar out as an explicit flex row with
   a non-shrinking CTA makes a collision impossible. */
/* nine links plus a CTA do not fit under 1200px, so collapse to the
   hamburger there instead of squeezing. Overrides navbar-expand-lg. */
@media(max-width:1199.98px) {
  .milvian-navbar.navbar-expand-lg .navbar-toggler {
    display: block !important
  }

  .milvian-navbar.navbar-expand-lg .navbar-collapse {
    display: none !important;
    flex-basis: 100%
  }

  .milvian-navbar.navbar-expand-lg .navbar-collapse.show,
  .milvian-navbar.navbar-expand-lg .navbar-collapse.collapsing {
    display: block !important
  }
}

@media(min-width:1200px) {
  .milvian-navbar .navbar-collapse {
    display: flex !important;
    align-items: center;
    flex-wrap: nowrap !important;
    gap: 10px;
    min-width: 0
  }

  .milvian-navbar .navbar-nav {
    flex: 0 1 auto;
    min-width: 0;
    flex-wrap: nowrap !important;
    justify-content: center
  }

  .milvian-navbar .btn-demo {
    flex: 0 0 auto
  }
}

/* tighten progressively so all nine links still fit */
@media(min-width:1200px) and (max-width:1399.98px) {
  .milvian-navbar .navbar-nav {
    gap: .1rem
  }

  .milvian-navbar .navbar-nav .nav-link {
    padding: .5rem .55rem;
    font-size: .9rem
  }
}

/* dropdowns: navbar.css carries none, so define them here.
   Opening is pure CSS (hover / focus-within), so the parent stays a
   normal link and clicking it navigates. */
.milvian-navbar .dropdown-menu {
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 8px 0;
  box-shadow: 0 12px 32px rgba(16, 26, 38, .12);
  min-width: 250px;
  background: #fff
}

.milvian-navbar .dropdown-item {
  font-size: 14px;
  padding: 9px 20px;
  white-space: normal
}

.milvian-navbar .dropdown-item:hover,
.milvian-navbar .dropdown-item:focus {
  background: var(--paper);
  color: var(--blue-d)
}

.milvian-navbar .dropdown-divider {
  margin: 6px 0;
  border-top-color: var(--rule)
}

.milvian-navbar .dropdown-toggle::after {
  margin-left: 6px;
  vertical-align: 2px
}

/* desktop: open on hover, and on keyboard focus */
@media(min-width:1200px) {
  .milvian-navbar .dropdown-menu {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 12px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease, visibility .18s
  }

  /* invisible bridge over the 12px gap, else the menu closes mid-travel */
  .milvian-navbar .dropdown-menu::before {
    content: "";
    position: absolute;
    top: -14px;
    left: 0;
    right: 0;
    height: 14px
  }

  .milvian-navbar .nav-item.dropdown:hover>.dropdown-menu,
  .milvian-navbar .nav-item.dropdown:focus-within>.dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto
  }
}

/* CTA is an <a>, so it needs the anchor colours navbar.css assumes */
.milvian-navbar .btn-demo {
  display: inline-block;
  border-radius: 40px;
  text-decoration: none;
  white-space: nowrap;
  font-size: .95rem;
  line-height: 1.2;
  transition: all .2s ease
}

.milvian-navbar .btn-demo,
.milvian-navbar .btn-demo:hover,
.milvian-navbar .btn-demo:focus {
  color: #fff
}

.milvian-navbar .navbar-toggler {
  border: 1px solid var(--rule);
  padding: 6px 10px
}

.milvian-navbar .navbar-toggler:focus {
  box-shadow: none
}

/* collapsed mobile panel */
@media(max-width:1199.98px) {
  .milvian-navbar .navbar-collapse {
    max-height: 78vh;
    overflow-y: auto;
    padding: 10px 0 4px;
    margin-top: 10px;
    border-top: 1px solid var(--rule)
  }

  .milvian-navbar .navbar-nav {
    gap: 0
  }

  .milvian-navbar .navbar-nav .nav-link {
    padding: 12px 4px;
    border-bottom: 1px solid var(--rule2)
  }

  .milvian-navbar .dropdown-menu {
    display: block;
    position: static;
    float: none;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 0 0 6px 14px;
    margin: 0;
    min-width: 0;
    background: transparent
  }

  .milvian-navbar .dropdown-item {
    padding: 9px 4px;
    font-size: .9rem
  }

  .milvian-navbar .dropdown-toggle::after {
    display: none
  }

  .milvian-navbar .btn-demo {
    display: block;
    text-align: center;
    margin: 14px 4px 6px
  }
}

/* buttons. Namespaced as .mv-btn so Bootstrap's .btn tokens never apply. */
.mv-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 13.5px;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: 0;
  text-decoration: none;
  cursor: pointer;
  transition: .15s
}

.mv-btn:hover {
  text-decoration: none
}

.mv-btn.primary {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue)
}

.mv-btn.primary:hover {
  background: var(--blue-d);
  border-color: var(--blue-d);
  color: #fff
}

.mv-btn.ghost {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink)
}

.mv-btn.ghost:hover {
  background: var(--ink);
  color: #fff
}

.mv-btn.light {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .55)
}

.mv-btn.light:hover {
  background: #fff;
  color: var(--ink)
}

.mv-btn.sm {
  padding: 9px 15px;
  font-size: 12.5px
}

/* duotone photography, the deck cover treatment */
.ph {
  position: relative;
  background: #12283a;
  overflow: hidden;
  margin: 0
}

.ph img {
  width: 100%
}

.ph.inline {
  margin: 30px 0
}

.ph.inline img {
  aspect-ratio: 2/1;
  object-fit: cover
}

.ph figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  background: linear-gradient(transparent, rgba(10, 22, 32, .86));
  color: #e6ebef;
  font-size: 12.5px;
  padding: 34px 18px 14px
}

/* hero, mirroring the deck cover: copy left, duotone photo right */
.hero {
  background: var(--paper)
}

.hero .grid {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  min-height: 480px
}

@media(max-width:900px) {
  .hero .grid {
    grid-template-columns: 1fr
  }
}

.hero .copy {
  padding: 58px 56px 52px 0;
  align-self: center
}

@media(max-width:900px) {
  .hero .copy {
    padding: 40px 0 36px
  }
}

.eyebrow {
  display: flex;
  align-items: center;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 20px
}

.hero h1 {
  font-size: clamp(31px, 4.4vw, 50px);
  line-height: 1.09;
  letter-spacing: -.02em;
  font-weight: 700;
  color: var(--ink);
  max-width: 17ch
}

.hero .sub {
  color: var(--ink2);
  font-size: 17px;
  margin-top: 19px;
  max-width: 54ch;
  line-height: 1.56
}

.hero .cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px
}

.hero .shot {
  position: relative;
  background: #12283a;
  overflow: hidden
}

.hero .shot img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover
}

@media(max-width:900px) {
  .hero .shot {
    height: 250px
  }
}

.stripwrap {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--paper)
}

.stripwrap .wrap {
  padding-top: 26px;
  padding-bottom: 28px
}

.strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 30px
}

.strip div {
  padding-top: 13px;
  border-top: 2px solid var(--rule)
}

.strip div:nth-child(odd) {
  border-top-color: var(--blue)
}

.strip b {
  display: block;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink)
}

.strip div:nth-child(odd) b {
  color: var(--blue-d)
}

.strip span {
  display: block;
  font-size: 12px;
  color: var(--ink2);
  margin-top: 5px;
  line-height: 1.35
}

@media(max-width:760px) {
  .strip {
    grid-template-columns: 1fr 1fr;
    gap: 20px 26px
  }
}

.crumb {
  font-size: 12.5px;
  color: var(--ink3);
  padding: 16px 0 0
}

.crumb a {
  color: var(--ink3)
}

/* answer capsule (AEO) */
.answer {
  background: var(--white);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--blue);
  padding: 22px 26px;
  margin: 26px 0
}

.answer .alabel {
  display: flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue-d);
  margin-bottom: 9px
}

.answer .atext {
  font-size: 17.5px;
  line-height: 1.58;
  color: var(--ink);
  max-width: none
}

/* layout */
section {
  padding: 56px 0;
  border-bottom: 1px solid var(--rule2)
}

section.tight {
  padding: 34px 0
}

section.pale {
  background: var(--paper2)
}

section.white {
  background: var(--white)
}

h2 {
  font-size: clamp(25px, 3.2vw, 34px);
  line-height: 1.16;
  letter-spacing: -.018em;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 16px;
  max-width: 26ch
}

h3 {
  font-size: 17.5px;
  line-height: 1.32;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 8px
}

p {
  margin: 0 0 15px;
  max-width: var(--read)
}

.mv-lead {
  font-size: 17.5px;
  font-weight: 400;
  color: var(--ink2);
  max-width: 66ch
}

ul,
ol {
  margin: 0 0 18px 20px;
  padding-left: 0;
  max-width: var(--read)
}

li {
  margin: 0 0 8px
}

.sectlabel {
  display: flex;
  align-items: center;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 16px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--rule)
}

/* stats, rule above in the deck manner */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0 30px;
  margin: 28px 0
}

.stat {
  padding-top: 13px;
  border-top: 2px solid var(--rule)
}

.stat.alt {
  border-top-color: var(--blue)
}

.stat .v {
  display: block;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -.025em;
  color: var(--ink)
}

.stat.alt .v {
  color: var(--blue-d)
}

.stat .l {
  display: block;
  font-size: 13.5px;
  color: var(--ink2);
  margin-top: 6px;
  line-height: 1.4
}

.stat .s {
  display: block;
  font-size: 11px;
  color: var(--ink3);
  margin-top: 8px
}

/* cards */
.cards {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin: 28px 0
}

.cards.c2 {
  grid-template-columns: repeat(2, 1fr)
}

.cards.c3 {
  grid-template-columns: repeat(3, 1fr)
}

@media(max-width:960px) {
  .cards.c3 {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:640px) {

  .cards.c2,
  .cards.c3 {
    grid-template-columns: 1fr
  }
}

.mv-card {
  background: var(--white);
  padding: 24px
}

.mv-card .kicker {
  display: flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--blue-d);
  margin-bottom: 10px
}

.mv-card p {
  font-size: 14.5px;
  color: var(--ink2);
  margin: 0
}

.cmeta {
  font-size: 12.5px;
  color: var(--ink3);
  margin-top: 14px !important;
  padding-top: 11px;
  border-top: 1px solid var(--rule2)
}

/* problems */
.problems {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin: 28px 0
}

@media(max-width:760px) {
  .problems {
    grid-template-columns: 1fr
  }
}

.prob {
  background: var(--white);
  padding: 26px
}

.prob .pn {
  display: flex;
  align-items: center;
  margin: 0 0 10px
}

.prob .pn .ic {
  color: var(--orange)
}

.prob .pn span {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--orange)
}

.prob h3 {
  font-size: 19px;
  margin-bottom: 9px;
  letter-spacing: -.01em
}

.prob p {
  font-size: 14.8px;
  color: var(--ink2);
  margin: 0
}

.pcost {
  margin-top: 15px !important;
  padding-top: 12px;
  border-top: 1px solid var(--rule2);
  font-size: 13.8px !important;
  color: var(--ink) !important
}

.pcost span {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink3);
  margin-bottom: 5px
}

/* modules */
.modules {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin: 28px 0
}

@media(max-width:720px) {
  .modules {
    grid-template-columns: 1fr
  }
}

.mod {
  background: var(--white);
  padding: 26px
}

.mod .mk {
  display: flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 9px
}

.mod h3 {
  font-size: 21px;
  margin-bottom: 8px;
  letter-spacing: -.015em
}

.mod>p {
  font-size: 14.8px;
  color: var(--ink2)
}

.mod ul {
  margin: 14px 0 0 17px
}

.mod li {
  font-size: 14px;
  color: var(--ink2);
  margin-bottom: 7px
}

/* geo */
.geo {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin: 28px 0
}

@media(max-width:900px) {
  .geo {
    grid-template-columns: 1fr
  }
}

.grow {
  background: var(--white);
  padding: 26px
}

.grow .gk {
  display: flex;
  align-items: center;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--blue)
}

.gdrive {
  font-size: 14.2px;
  color: var(--ink2);
  margin-bottom: 12px
}

.grow dt {
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  margin-top: 13px
}

.grow dd {
  font-size: 14px;
  color: var(--ink2);
  margin: 3px 0 0
}

/* steps */
.steps {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 26px;
  max-width: none
}

@media(max-width:900px) {
  .steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 26px
  }
}

@media(max-width:560px) {
  .steps {
    grid-template-columns: 1fr;
    gap: 24px
  }
}

.steps li {
  margin: 0;
  padding-top: 13px;
  border-top: 2px solid var(--blue)
}

.steps .sw {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--blue-d);
  margin-bottom: 8px
}

.steps h3 {
  margin: 0 0 6px;
  font-size: 18px
}

.steps p {
  font-size: 14px;
  color: var(--ink2);
  margin: 0
}

/* tables */
.tablewrap {
  margin: 28px 0
}

.tablewrap figcaption {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink3);
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule)
}

.scroller {
  overflow-x: auto
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
  min-width: 640px;
  background: var(--white)
}

th,
td {
  text-align: left;
  padding: 14px 18px 14px 0;
  border-bottom: 1px solid var(--rule2);
  vertical-align: top
}

th:first-child,
td:first-child {
  padding-left: 18px
}

thead th {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink3);
  border-bottom: 1px solid var(--rule);
  padding-top: 13px;
  padding-bottom: 11px;
  white-space: nowrap
}

tbody th {
  font-weight: 700;
  color: var(--ink);
  min-width: 180px
}

tbody th .rowic {
  color: var(--blue)
}

td {
  color: var(--ink2)
}

.tnote {
  font-size: 12.5px;
  color: var(--ink3);
  margin-top: 12px
}

/* callout */
.callout {
  display: flex;
  gap: 14px;
  background: var(--white);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--blue);
  padding: 22px 24px;
  margin: 26px 0
}

.callout .calic {
  margin-top: 3px
}

.callout h3 {
  font-size: 16px;
  margin-bottom: 6px
}

.callout p {
  font-size: 15px;
  color: var(--ink2);
  margin: 0
}

.callout.warn {
  border-left-color: var(--orange)
}

.callout.warn .calic {
  color: var(--orange)
}

.callout.good {
  border-left-color: var(--blue-d)
}

blockquote {
  border-left: 3px solid var(--blue);
  padding: 4px 0 4px 22px;
  margin: 26px 0;
  max-width: var(--read)
}

blockquote p {
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink)
}

blockquote cite {
  font-size: 12.5px;
  color: var(--ink3);
  font-style: normal
}

/* faq */
.faq {
  margin: 26px 0;
  border-top: 1px solid var(--rule)
}

.faq details {
  border-bottom: 1px solid var(--rule2)
}

.faq summary {
  cursor: pointer;
  display: block;
  list-style: none;
  padding: 17px 34px 17px 0;
  position: relative
}

.faq summary::-webkit-details-marker {
  display: none
}

.faq summary h3 {
  display: inline;
  font-size: 16.5px
}

.faq summary:after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 13px;
  font-size: 20px;
  color: var(--blue);
  font-weight: 400
}

.faq details[open] summary:after {
  content: "\2013"
}

.faq .fa {
  padding: 0 0 18px
}

.faq .fa p {
  font-size: 15.5px;
  color: var(--ink2);
  margin-bottom: 12px;
  font-family: var(--sans) !important;
  font-weight: 500 !important;
}

.faq .fa p:last-child {
  margin-bottom: 0
}

/* toc */
.toc {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 18px 0;
  margin: 24px 0 0
}

.toc p {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink3);
  margin-bottom: 11px
}

.toc ol {
  columns: 2;
  column-gap: 34px;
  margin: 0 0 0 18px
}

@media(max-width:640px) {
  .toc ol {
    columns: 1
  }
}

.toc li {
  font-size: 14px;
  margin-bottom: 6px
}

.sources {
  margin: 20px 0 0 18px
}

.sources li {
  font-size: 13px;
  color: var(--ink3);
  margin-bottom: 6px
}

.sources a {
  color: var(--ink2)
}

/* article */
.artmeta {
  font-size: 12.5px;
  color: var(--ink3);
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  max-width: 46ch
}

article.post h2 {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--rule)
}

article.post h3 {
  margin-top: 26px;
  font-size: 18.5px
}

article.post p,
article.post ul,
article.post ol {
  font-size: 16.5px
}

article.post .ph.inline img {
  aspect-ratio: 2/1
}

/* blog cards */
.postlist {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin: 28px 0
}

@media(max-width:960px) {
  .postlist {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:620px) {
  .postlist {
    grid-template-columns: 1fr
  }
}

.postcard {
  background: var(--white);
  display: flex;
  flex-direction: column
}

.postcard .thumb {
  position: relative;
  background: #12283a;
  overflow: hidden;
  aspect-ratio: 16/9
}

.postcard .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.postcard .body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  flex: 1
}

.postcard .kicker {
  display: flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--blue-d);
  margin-bottom: 9px
}

.postcard h3 {
  font-size: 18px;
  line-height: 1.3;
  margin-bottom: 9px
}

.postcard h3 a {
  color: var(--ink);
  text-decoration: none
}

.postcard h3 a:hover {
  color: var(--blue-d)
}

.postcard p {
  font-size: 14.2px;
  color: var(--ink2);
  margin: 0 0 16px
}

.postcard .rd {
  margin-top: auto;
  font-size: 11.5px;
  color: var(--ink3);
  padding-top: 12px;
  border-top: 1px solid var(--rule2)
}

/* cta band */
.ctaband {
  background: var(--dark);
  color: #fff;
  padding: 66px 0;
  border: 0
}

.ctaband .inner {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 40px;
  align-items: center
}

@media(max-width:820px) {
  .ctaband .inner {
    grid-template-columns: 1fr;
    gap: 24px
  }
}

.ctaband h2 {
  color: #fff;
  max-width: 18ch;
  margin: 0 0 14px
}

.ctaband p {
  color: #aab6c0;
  font-size: 16.5px;
  margin: 0;
  max-width: 52ch
}

.ctaband .cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap
}

.ctaband .eyebrow {
  color: #5fc0ec
}

/* footer */
footer {
  background: var(--dark2);
  color: #93a0aa;
  padding: 50px 0 56px;
  font-size: 13.5px
}

footer .flogo {
  height: 50px;
  width: auto;
  margin-bottom: 16px
}

footer .cols {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 26px
}

@media(max-width:820px) {
  footer .cols {
    grid-template-columns: 1fr 1fr
  }
}

footer h4 {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 12px
}

footer a {
  display: block;
  color: #93a0aa;
  font-size: 13.5px;
  margin-bottom: 8px;
  text-decoration: none
}

footer a:hover {
  color: #fff
}

footer p {
  color: #93a0aa;
  max-width: 34ch;
  font-size: 13.5px
}

footer .fine {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 12px;
  color: #6d7a84;
  max-width: none
}

/* embedded video */
.video {
  position: relative;
  margin: 28px 0;
  border: 1px solid var(--rule);
  background: #12283a;
  aspect-ratio: 16/9
}

.video iframe {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block
}

/* furniture added by site.js */
.toc a.current {
  color: var(--ink);
  font-weight: 700
}

.faq-toggle {
  background: none;
  border: 1px solid var(--rule);
  color: var(--ink2);
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 9px 14px;
  cursor: pointer;
  margin-top: 22px
}

.faq-toggle:hover {
  border-color: var(--ink);
  color: var(--ink)
}

.to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 60;
  width: 44px;
  height: 44px;
  border: 1px solid var(--rule);
  background: var(--white);
  color: var(--ink);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s
}

.to-top.show {
  opacity: 1;
  pointer-events: auto
}

.to-top:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink)
}

.progress-rule {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: 0 50%;
  z-index: 70;
  pointer-events: none
}

@media print {

  .to-top,
  .progress-rule,
  .faq-toggle,
  .milvian-navbar {
    display: none
  }
}

.skip {
  position: absolute;
  left: -9999px
}

.skip:focus {
  left: 12px;
  top: 12px;
  background: #fff;
  padding: 10px 14px;
  z-index: 99
}