/* =====================================================================
   taxi.vg — overrides on top of vitaxi.css

   The platform stylesheet is loaded unchanged. Everything here is either
   a piece this page needs that the platform does not have, or a piece
   that lives in admin.css and is wanted on a public page.

   Loaded second, so plain single-class selectors are enough. No
   !important anywhere, and every rule is qualified by element type or a
   taxi.vg class so nothing here can reach into the platform's components.
   ===================================================================== */

.site-nav__link--cta .site-nav__label { font-weight: 800; color: var(--navy-900); }

/* ---------------------------------------------------------------------
   Header at middle widths

   The platform hides the clock below 1080px and the call label below
   900px, sized for "340-000-0000". This page carries five nav items and
   the longer "Call 1-284-499-1999", which together overflowed the header
   between roughly 940px and 1240px. Both are pulled earlier.
   --------------------------------------------------------------------- */
@media (max-width: 1240px) { .meter { display: none; } }
@media (max-width: 1140px) {
  .header-call span { display: none; }
  .header-call { padding: 11px 13px; }
}

/* ---------------------------------------------------------------------
   Fixed-column grids

   .grid--2 and .grid--3 are auto-fit, which is right for lists of unknown
   length. These sections have a known count, and auto-fit was breaking
   four cards into three-plus-one and stranding the last one on its own
   row. Fixed columns, stepped down by width instead.
   --------------------------------------------------------------------- */
.grid--fixed-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--fixed-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .grid--fixed-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .grid--fixed-2,
  .grid--fixed-3 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------
   Status pill
   Sits under the headline. States a fact, so it is quiet rather than loud.
   --------------------------------------------------------------------- */
.status-pill {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 16px 8px 13px; border-radius: 999px;
  background: var(--green-100); border: 1px solid #bde6d1; color: #14603f;
  font-size: .82rem; font-weight: 800; letter-spacing: .01em;
  margin-bottom: 22px;
}
.status-pill__dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--green-600);
  position: relative; flex: none;
}
.status-pill__dot::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 2px solid var(--green-600); opacity: .35;
  animation: pill-ping 2.6s var(--ease) infinite;
}
@keyframes pill-ping {
  0%   { transform: scale(.6); opacity: .5; }
  70%  { transform: scale(1.25); opacity: 0; }
  100% { transform: scale(1.25); opacity: 0; }
}

/* ---------------------------------------------------------------------
   Hero

   .hero__col is a flex column, so an inline-flex child blockifies and
   stretches the full width. Both the pill and the button row need to be
   told to sit at their natural width.

   The headline is also larger than it looks: .hero--split h1 sets 3.6rem
   but .hero h1 appears later in the platform sheet and wins with
   --display, which is 72px at desktop. That fits "Need a taxi in
   St. Thomas?" and not this sentence, so it is set here explicitly.
   --------------------------------------------------------------------- */
.hero h1 { font-size: clamp(2.3rem, 3.4vw, 3.1rem); }

.status-pill { align-self: flex-start; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; align-self: flex-start; }

/* The two buttons together came to within a pixel or two of the hero
   column width and wrapped. Slightly tighter side padding, only here. */
.hero__actions .btn { padding-inline: 22px; }

/* ---------------------------------------------------------------------
   Demonstration card
   --------------------------------------------------------------------- */
.demo-card {
  background: #fff; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
  padding: 28px; color: var(--ink);
}
.demo-card__head {
  display: flex; align-items: center; gap: 9px;
  font-size: .68rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gray-500); margin-bottom: 14px;
}
.demo-card__assoc {
  font-size: 1.3rem; font-weight: 800; letter-spacing: -.025em; line-height: 1.2;
}
.demo-card__flag {
  display: inline-block; margin: 10px 0 16px;
  font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: #7a5806; background: var(--yellow-100); border: 1px solid #f4e39a;
  padding: 5px 12px; border-radius: 999px;
}
.demo-card__creds {
  background: var(--sand-50); border: 1px solid var(--sand-100);
  border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 18px;
  display: grid; gap: 8px;
}
.demo-card__cred {
  display: flex; justify-content: space-between; gap: 14px; align-items: baseline;
  font-size: .88rem;
}
.demo-card__cred dt { color: var(--gray-500); font-weight: 700; }
.demo-card__cred dd {
  margin: 0; font-weight: 700; color: var(--navy-800); text-align: right;
  font-family: ui-monospace, "SFMono-Regular", "Menlo", monospace;
  font-size: .84rem; word-break: break-all;
}
.demo-card__alt { margin-top: 10px; font-size: .95rem; padding-block: 13px; }
.demo-card__alt svg { color: var(--teal-600); }

.demo-card__note {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 14px 0 0; font-size: .82rem; color: var(--gray-700); line-height: 1.45;
}
.demo-card__note svg { flex: none; margin-top: 2px; }

/* ---------------------------------------------------------------------
   Feature cards
   --------------------------------------------------------------------- */
.feature { display: flex; flex-direction: column; gap: 12px; }
.feature__icon {
  width: 50px; height: 50px; border-radius: 15px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--teal-50); color: var(--teal-700);
  border: 1px solid var(--teal-100);
}
.feature h3 { font-size: 1.06rem; letter-spacing: -.02em; margin: 0; }
.feature p { margin: 0; font-size: .93rem; color: var(--gray-700); line-height: 1.55; }

/* ---------------------------------------------------------------------
   The journey

   One booking, from request to record. Seven stages on a yellow line that
   fills as the visitor scrolls. Horizontal on desktop, vertical on a
   phone, and drawn complete from the outset if the visitor has asked for
   reduced motion.
   --------------------------------------------------------------------- */
.journey { position: relative; margin-top: 44px; }

.journey__track {
  position: absolute; z-index: 0;
  left: calc(100% / 14); right: calc(100% / 14); top: 33px; height: 5px;
  background: var(--gray-200); border-radius: 999px; overflow: hidden;
}
.journey__fill {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--yellow-400), var(--yellow-500));
  width: calc(var(--journey-progress, 0) * 100%);
  transition: width .7s var(--ease);
}

.journey__stages {
  position: relative; z-index: 1;
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px;
}
.journey__stage {
  text-align: center; display: flex; flex-direction: column; align-items: center;
}

.journey__node {
  width: 70px; height: 70px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 2px solid var(--gray-300); color: var(--gray-500);
  box-shadow: var(--shadow-card);
  transition: background .45s var(--ease), border-color .45s var(--ease),
              color .45s var(--ease), transform .45s var(--ease);
}
.journey__stage.is-on .journey__node {
  background: var(--navy-900); border-color: var(--yellow-500); color: #fff;
  transform: translateY(-3px);
}

.journey__step {
  margin-top: 14px;
  font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gray-500); transition: color .45s var(--ease);
}
.journey__stage.is-on .journey__step { color: var(--navy-950); }

.journey__desc {
  margin-top: 7px; font-size: .8rem; line-height: 1.45; color: var(--gray-700);
  max-width: 15ch;
}

/* Tablet: seven across stops fitting, so wrap to a grid and drop the line.
   A line that jumps between rows reads as a mistake rather than a route. */
@media (max-width: 1040px) and (min-width: 761px) {
  .journey__track { display: none; }
  .journey__stages { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 10px; }
  .journey__desc { max-width: 18ch; }
}

/* Phone: the route turns vertical and runs down the left. */
@media (max-width: 760px) {
  .journey__stages { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .journey__stage {
    display: grid; grid-template-columns: 56px 1fr; gap: 18px;
    align-items: start; text-align: left;
  }
  .journey__node { width: 56px; height: 56px; grid-row: span 2; }
  .journey__step { margin-top: 6px; }
  .journey__desc { max-width: none; margin-top: 4px; grid-column: 2; }

  .journey__track {
    left: 27px; right: auto; top: 28px; bottom: 28px;
    width: 5px; height: auto;
  }
  .journey__fill {
    width: 100%; height: calc(var(--journey-progress, 0) * 100%);
    transition: height .7s var(--ease);
  }
}

@media (prefers-reduced-motion: reduce) {
  .journey__fill,
  .journey__node,
  .journey__step { transition: none; }
  .status-pill__dot::after { animation: none; }
}

/* ---------------------------------------------------------------------
   Three roles

   The association sits in the middle because it is the operational
   authority, not because the middle was free.
   --------------------------------------------------------------------- */
.roles {
  display: grid; grid-template-columns: 1fr 34px 1.08fr 34px 1fr;
  align-items: center; margin-top: 36px;
}
.role {
  background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-lg);
  padding: 26px 22px; text-align: center; box-shadow: var(--shadow-card);
}
.role__icon {
  width: 54px; height: 54px; border-radius: 16px; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--teal-50); color: var(--teal-700); border: 1px solid var(--teal-100);
}
.role__name { font-size: 1.08rem; font-weight: 800; letter-spacing: -.02em; }
.role__what { margin: 6px 0 0; font-size: .9rem; color: var(--gray-700); }

.role--authority {
  background: var(--navy-900); border-color: var(--navy-900); color: #fff;
  padding-block: 38px; box-shadow: var(--shadow-lg);
}
.role--authority .role__icon {
  background: var(--yellow-500); color: var(--navy-950); border-color: var(--yellow-500);
}
.role--authority .role__name { color: #fff; }
.role--authority .role__what { color: rgba(255, 255, 255, .78); }

.role__link { height: 3px; background: var(--yellow-500); }

@media (max-width: 860px) {
  .roles { grid-template-columns: minmax(0, 1fr); }
  .role__link { height: 28px; width: 3px; margin: 0 auto; }
}

/* ---------------------------------------------------------------------
   Status items
   --------------------------------------------------------------------- */
.status-item {
  background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-lg);
  padding: 24px 22px; box-shadow: var(--shadow-card);
}
.status-item__what {
  font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gray-500); margin-bottom: 10px;
}
.status-item__state {
  display: flex; align-items: center; gap: 10px;
  font-size: 1.2rem; font-weight: 800; letter-spacing: -.02em; color: var(--navy-950);
  line-height: 1.25;
}
.status-item__state svg { flex: none; color: var(--green-600); }
.status-item--forming .status-item__state svg { color: #a16207; }

/* ---------------------------------------------------------------------
   Implementation steps
   --------------------------------------------------------------------- */
.step { display: flex; gap: 16px; align-items: flex-start; }
.step__n {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  background: var(--navy-900); color: #fff;
  display: grid; place-items: center; font-weight: 800; font-size: 1rem;
}
.step h3 { font-size: 1.04rem; letter-spacing: -.02em; margin: 6px 0 .35em; }
.step p { margin: 0; font-size: .92rem; color: var(--gray-700); line-height: 1.55; }

.devices { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
.device {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1.5px solid var(--gray-300); border-radius: 999px;
  padding: 9px 16px; font-size: .88rem; font-weight: 700; color: var(--gray-700);
  background: #fff;
}
.device svg { color: var(--teal-600); }

/* ---------------------------------------------------------------------
   Hero fact strip

   Three facts on one frosted bar across the foot of the illustration.
   Scattered cards competed with the artwork and with each other; a single
   strip reads in one pass and leaves the picture intact.

   Percentage insets rather than pixels, because the figure's height is
   driven by the text column beside it and changes with the viewport.
   --------------------------------------------------------------------- */
.hstrip {
  position: absolute; z-index: 2;
  left: 5%; right: 5%; bottom: 7%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr) 1px minmax(0, 1fr);
  align-items: center;
  background: rgba(7, 29, 44, .8);
  backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 20px;
  padding: 14px 6px;
  box-shadow: 0 24px 52px -26px rgba(7, 29, 44, .9);
}

.hstrip__cell { display: flex; align-items: center; gap: 10px; padding: 2px 11px; min-width: 0; }

.hstrip__icon {
  width: 34px; height: 34px; border-radius: 11px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 201, 40, .16); color: var(--yellow-500);
}

.hstrip__k {
  display: block; font-size: .88rem; font-weight: 800;
  letter-spacing: -.022em; color: #fff; line-height: 1.2;
}
.hstrip__v {
  display: block; margin-top: 2px; font-size: .74rem;
  color: rgba(255, 255, 255, .62); line-height: 1.25;
}

.hstrip__cell--stat .hstrip__k {
  font-size: 1.12rem; color: var(--yellow-500); font-variant-numeric: tabular-nums;
}

.hstrip__div { width: 1px; height: 34px; background: rgba(255, 255, 255, .16); }

/* Below this the three cells are too narrow for an icon beside the text,
   and every label wraps. Stacking the icon above gives each label the full
   cell width instead of half of it. */
@media (max-width: 1330px) {
  .hstrip { left: 4%; right: 4%; padding: 12px 2px; }
  .hstrip__cell { flex-direction: column; gap: 8px; text-align: center; padding: 2px 8px; }
  .hstrip__icon { width: 30px; height: 30px; border-radius: 10px; }
  .hstrip__k { font-size: .82rem; }
  .hstrip__cell--stat .hstrip__k { font-size: .95rem; }
  .hstrip__v { font-size: .7rem; }
  .hstrip__div { height: 54px; }
}

/* On a phone the figure is only 300px tall, so the strip sits on the very
   bottom edge and the second lines go. */
@media (max-width: 620px) {
  .hstrip { left: 14px; right: 14px; bottom: 14px; border-radius: 16px; padding: 10px 0; }
  .hstrip__v { display: none; }
  .hstrip__k { font-size: .74rem; }
  .hstrip__cell--stat .hstrip__k { font-size: .8rem; }
  .hstrip__cell { padding: 2px 5px; gap: 7px; }
  .hstrip__div { height: 44px; }
}

@media (max-width: 400px) {
  .hstrip__k { font-size: .68rem; letter-spacing: -.03em; }
  .hstrip__cell--stat .hstrip__k { font-size: .74rem; }
  .hstrip__cell { padding: 2px 3px; }
}

/* 320px, the narrowest phone still in use. Two words in a cell 90px wide
   cannot both fit, so the second word of each label is dropped rather than
   allowed to wrap into a ragged block. */
@media (max-width: 340px) {
  .hstrip { left: 10px; right: 10px; padding: 9px 0; }
  .hstrip__k { font-size: .62rem; }
  .hstrip__cell--stat .hstrip__k { font-size: .68rem; }
  .hstrip__icon { width: 26px; height: 26px; border-radius: 9px; }
  .hstrip__div { height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .hstrip { backdrop-filter: none; background: rgba(7, 29, 44, .92); }
}

@media print { .hstrip { display: none; } }

/* ---------------------------------------------------------------------
   Featured statistic
   --------------------------------------------------------------------- */
.bigstat {
  background: var(--navy-900); color: #fff;
  border-radius: var(--radius-xl); padding: 38px 34px;
  box-shadow: var(--shadow-lg); text-align: center;
}
.bigstat__value {
  font-size: clamp(2.6rem, 5.4vw, 4rem); font-weight: 800;
  letter-spacing: -.045em; line-height: 1; color: var(--yellow-500);
  font-variant-numeric: tabular-nums;
}
.bigstat__label {
  margin-top: 16px; font-size: 1.02rem; font-weight: 700;
  color: rgba(255, 255, 255, .9); line-height: 1.35;
}
.bigstat__source {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: .76rem; color: rgba(255, 255, 255, .55);
}

/* ---------------------------------------------------------------------
   Two audiences, one network

   Residents and visitors both arrive at the same place. The bracket is
   drawn with borders rather than an image so it scales with the type and
   needs no asset.
   --------------------------------------------------------------------- */
.flow__title {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem); letter-spacing: -.03em;
  margin: 0 0 8px;
}

.flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 56px minmax(0, .9fr) 56px minmax(0, 1.15fr);
  align-items: center; margin-top: 34px;
}

.flow__sources { display: grid; gap: 18px; }
.flow__pill {
  display: flex; align-items: center; gap: 11px;
  background: #fff; border: 1px solid var(--gray-200); border-radius: 999px;
  padding: 16px 24px; font-size: 1.02rem; font-weight: 800; color: var(--navy-950);
  box-shadow: var(--shadow-card);
}
.flow__pill svg { color: var(--teal-600); flex: none; }

/* The merge bracket: two arms meeting a single stem. */
.flow__merge {
  position: relative; display: block;
  height: 78px; width: 60%;
  border: 3px solid var(--yellow-500); border-left: 0;
  border-radius: 0 16px 16px 0;
  justify-self: start; margin-left: 6px;
}
.flow__merge::after {
  content: ""; position: absolute; left: 100%; top: 50%;
  width: 22px; height: 3px; margin-top: -1.5px; background: var(--yellow-500);
}

.flow__hub {
  background: var(--navy-900); color: #fff; text-align: center;
  border: 3px solid var(--yellow-500); border-radius: var(--radius-lg);
  padding: 26px 20px; box-shadow: var(--shadow-lg);
}
.flow__hub-name {
  font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; color: var(--yellow-500);
}
.flow__hub-what { margin-top: 4px; font-size: .84rem; color: rgba(255, 255, 255, .72); }

/* The arrow into the associations. */
.flow__arrow {
  position: relative; display: block; height: 3px; width: 100%;
  background: var(--yellow-500);
}
.flow__arrow::after {
  content: ""; position: absolute; right: -1px; top: 50%;
  transform: translateY(-50%);
  border-left: 13px solid var(--yellow-500);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}

.flow__dest {
  background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-lg);
  padding: 26px 24px; box-shadow: var(--shadow-card);
}
.flow__dest-icon {
  width: 46px; height: 46px; border-radius: 14px; margin-bottom: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--teal-50); color: var(--teal-700); border: 1px solid var(--teal-100);
}
.flow__dest-name { font-size: 1.1rem; font-weight: 800; letter-spacing: -.02em; }
.flow__dest-what { margin-top: 4px; font-size: .9rem; color: var(--gray-700); }

/* Stacked: the bracket becomes a plain vertical run, because a merge drawn
   sideways in a single column reads as a stray shape. */
@media (max-width: 860px) {
  .flow { grid-template-columns: minmax(0, 1fr); justify-items: stretch; }
  .flow__merge {
    width: 3px; height: 30px; border: 0; border-radius: 0;
    background: var(--yellow-500); justify-self: center; margin: 0;
  }
  .flow__merge::after { display: none; }
  .flow__arrow {
    width: 3px; height: 30px; justify-self: center; margin: 0 auto;
  }
  .flow__arrow::after {
    right: auto; left: 50%; top: 100%;
    transform: translate(-50%, -1px);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 13px solid var(--yellow-500);
    border-bottom: 0;
  }
  .flow__dest { text-align: center; }
  .flow__dest-icon { margin-inline: auto; }
}

/* ---------------------------------------------------------------------
   Footer button

   .site-footer a is (0,1,1) and .btn--yellow is (0,1,0), so the footer's
   link colour was winning and the yellow button had yellow text on it.
   Qualifying by element type is the fix, not !important.
   --------------------------------------------------------------------- */
.site-footer a.btn--yellow { color: var(--navy-950); }
.site-footer a.btn--yellow:hover { color: var(--navy-950); text-decoration: none; }

/* ---------------------------------------------------------------------
   Meeting form
   Sits inside a white .card on the navy section, so the platform's own
   field styling is already correct.
   --------------------------------------------------------------------- */
/* ---------------------------------------------------------------------
   White cards on the navy section

   .section--navy sets color:#fff on the whole section, and the platform's
   field styles never set a colour of their own. Inside a white .card that
   made typed text white on white, and .section--navy h3 did the same to
   the form heading. Everything inside a card on navy needs its colour
   stated rather than inherited.
   --------------------------------------------------------------------- */
.section--navy .card { color: var(--ink); }
.section--navy .card h2,
.section--navy .card h3 { color: var(--navy-950); }
.section--navy .card p { color: var(--gray-700); }

.field input,
.field select,
.field textarea { color: var(--ink); }

.field input::placeholder,
.field textarea::placeholder { color: var(--gray-500); }

/* ---------------------------------------------------------------------
   Contact card

   Replaces the meeting form. An association board is a small number of
   people who would rather telephone than fill in a form, so each row is
   a link straight to the action: dial, write, or open the demonstration.
   --------------------------------------------------------------------- */
.contact-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; margin-bottom: 10px;
  background: var(--teal-50); border: 1px solid var(--teal-100);
  border-radius: var(--radius); text-decoration: none;
  transition: background .2s var(--ease), border-color .2s var(--ease),
              transform .2s var(--ease);
}
/* An email address is one unbreakable token. Without these it sets the
   card's minimum width and pushes the whole page wider than a 360px
   phone. */
.contact-row > span:last-child { min-width: 0; }
.contact-row__value { overflow-wrap: anywhere; }
.contact-row:hover {
  background: #e3f6f4; border-color: var(--teal-300);
  transform: translateY(-1px); text-decoration: none;
}
.contact-row__icon {
  width: 42px; height: 42px; border-radius: 13px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: var(--teal-700); border: 1px solid var(--teal-100);
}
.contact-row__label {
  display: block; font-size: .68rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--teal-700); margin-bottom: 3px;
}
.contact-row__value {
  display: block; font-size: 1.02rem; font-weight: 800;
  letter-spacing: -.02em; color: var(--navy-950); line-height: 1.25;
}
.contact-note {
  margin: 16px 0 0; font-size: .82rem; color: var(--gray-500);
}

/* The email button in the left column has the same unbreakable-token
   problem on the narrowest phones. */
@media (max-width: 420px) {
  .section--navy .btn { overflow-wrap: anywhere; max-width: 100%; }
}

/* ---------------------------------------------------------------------
   Proof strip
   --------------------------------------------------------------------- */
.proof {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px;
  padding: 18px 22px; border-radius: var(--radius);
  background: var(--teal-50); border: 1px solid var(--teal-100);
}
.proof__label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--teal-700);
}
.proof p { margin: 0; font-size: .93rem; color: var(--gray-700); flex: 1 1 320px; }

/* ---------------------------------------------------------------------
   Print
   A chairman will print this for the members who do not read email, so it
   has to survive without the artwork, the navigation or the colour.
   --------------------------------------------------------------------- */
@media print {
  .site-header,
  .site-footer__art,
  .site-footer__lead,
  .nav-toggle,
  .skip-link,
  .hero__figure { display: none; }

  body { background: #fff; }
  .section { padding-block: 18px; page-break-inside: avoid; }
  .section--navy { background: #fff; color: var(--ink); }
  .section--navy h2, .section--navy h3 { color: var(--ink); }
  .section--navy p { color: var(--gray-700); }
  .role--authority { background: #fff; color: var(--ink); border: 2px solid var(--ink); }
  .role--authority .role__name, .role--authority .role__what { color: var(--ink); }
  .site-footer { background: #fff; color: var(--ink); padding-block: 20px; }
  .site-footer a, .site-footer h4 { color: var(--ink); }
  .card, .demo-card, .role, .status-item { box-shadow: none; border: 1px solid #ccc; }
  .hero__grid { grid-template-columns: 1fr; }

  /* The route cannot fill on paper, so print it complete. */
  .journey__fill { width: 100%; }
  .journey__node { background: #fff; border-color: #666; color: var(--ink); }
  .demo-card__cred dd { font-size: .8rem; }
}