/* Veranta Health — site stylesheet ("Meridian" direction)
   Tokens from the Claude Design handoff, brand/handoff.md.
   Geometry rule: border-radius 0 everywhere, no shadows, no gradients. */

:root {
  --v-primary: #2E6BA8;
  --v-primary-hover: #245685;
  --v-ink: #172433;
  --v-steel: #5B7186;
  --v-mist: #D9E3ED;
  --v-cloud: #F4F7FA;
  --v-white: #FFFFFF;
  --v-error: #B4443C;
  --v-footer-text: #8C9BAC;
  --v-footer-rule: #2E4258;
  --v-font: 'Archivo', system-ui, -apple-system, sans-serif;

  --v-max: 1120px;
  --v-gutter: 48px;

  /* The demo toast's palette, `PLAT-95`. The component itself is in
     css/toast.css, which is byte-identical to Winterfield's copy precisely
     because these five live here instead of in it. */
  --toast-bg: var(--v-ink);
  --toast-edge: var(--v-primary);
  --toast-edge-bad: var(--v-error);
  --toast-text: var(--v-white);
  --toast-note: #C4D2E0;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--v-font);
  color: var(--v-ink);
  background: var(--v-white);
  font-size: 14.5px;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

a { color: var(--v-primary); text-decoration: none; }
a:hover { color: var(--v-primary-hover); text-decoration: underline; }

h1, h2, h3 { font-weight: 600; letter-spacing: -0.015em; margin: 0; }

.wrap {
  max-width: var(--v-max);
  margin: 0 auto;
  width: 100%;
}

.eyebrow {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--v-steel);
  margin: 0;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  padding: 11px 22px;
  border: 0;
  border-radius: 0;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background .12s, color .12s;
}
.btn-primary { background: var(--v-primary); color: var(--v-white); }
.btn-primary:hover { background: var(--v-primary-hover); color: var(--v-white); text-decoration: none; }
.btn-secondary {
  background: transparent;
  border: 1.5px solid var(--v-primary);
  color: var(--v-primary);
  padding: 10px 21px;
}
.btn-secondary:hover { background: var(--v-cloud); text-decoration: none; }
.btn-sm { font-size: 13px; padding: 9px 18px; }

/* ---------- header ---------- */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 0 var(--v-gutter);
  height: 72px;
  background: var(--v-white);
  border-bottom: 1px solid var(--v-mist);
}
.lockup {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  text-decoration: none;
  color: inherit;
}
.lockup:hover { text-decoration: none; color: inherit; }
.lockup .word {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--v-ink);
  white-space: nowrap;
}
.lockup .word em { font-style: normal; color: var(--v-primary); }

.main-nav {
  display: flex;
  gap: 32px;
  font-size: 14.5px;
  font-weight: 500;
  white-space: nowrap;
}
.main-nav a { color: var(--v-ink); }
.main-nav a:hover { color: var(--v-primary); text-decoration: none; }

/* the two-path sign-in split: one bordered control, two halves */
.signin-split {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--v-primary);
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}
.signin-split a { display: block; padding: 10px 18px; text-decoration: none; }
.signin-split a:hover { text-decoration: none; }
.signin-member { background: var(--v-primary); color: var(--v-white); }
.signin-member:hover { background: var(--v-primary-hover); color: var(--v-white); }
.signin-pro { color: var(--v-primary); background: var(--v-white); }
.signin-pro:hover { background: var(--v-cloud); color: var(--v-primary); }

/* ---------- sections ---------- */

.band { padding: 64px var(--v-gutter); }
.band-cloud { background: var(--v-cloud); }
.band h2 { font-size: 28px; }
.band > .wrap { display: flex; flex-direction: column; gap: 28px; }

.hero {
  background: var(--v-cloud);
  padding: 72px var(--v-gutter) 64px;
}
.hero > .wrap { display: flex; flex-direction: column; gap: 40px; }
.hero-copy { max-width: 640px; display: flex; flex-direction: column; gap: 14px; }
.hero h1 {
  font-size: 44px;
  line-height: 1.12;
  text-wrap: pretty;
}
.hero-copy p {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--v-steel);
  max-width: 520px;
}
.hero-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 920px;
}
.hero-card {
  background: var(--v-white);
  border: 1px solid var(--v-mist);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hero-card h2 { font-size: 22px; letter-spacing: -0.01em; }
.hero-card p { margin: 0; color: var(--v-steel); }
.hero-card .btn { align-self: flex-start; margin-top: 8px; }

/* ---------- card grids ---------- */

.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.card {
  background: var(--v-white);
  border: 1px solid var(--v-mist);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
a.card { text-decoration: none; color: inherit; }
a.card:hover { border-color: var(--v-primary); text-decoration: none; color: inherit; }
.card h3 { font-size: 16.5px; letter-spacing: 0; }
.card p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--v-steel); flex: 1; }
.card-link { font-size: 13.5px; font-weight: 500; }

/* task cards on the cloud band */
.task-card { padding: 22px 24px; gap: 6px; }
.task-card h3 { font-size: 15.5px; font-weight: 600; }
.task-card p { font-size: 13px; line-height: 1.5; }

/* ---------- help band ---------- */

.help-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.help-copy { display: flex; flex-direction: column; gap: 10px; max-width: 480px; }
.help-copy p { margin: 0; color: var(--v-steel); }
.phone-blocks { display: flex; gap: 40px; }
.phone-block { display: flex; flex-direction: column; gap: 6px; }
.phone-number { font-size: 17px; font-weight: 600; }

/* ---------- functional graphics ----------

   Icons and rules whose job is to make the page scannable. Added 2026-07-30,
   when the brand rule was rewritten: what this site refuses is marketing
   photography, not graphics that do work. See the site README section 1 and the
   Notes in meta/veranta-backlog.md for what the rule now says and why it moved.

   Every icon is drawn on a 24 unit grid, 1.5 stroke, square caps, no fill, so it
   matches the square-cornered geometry of everything else here. They are inline
   in the page rather than an external sprite on purpose: tools/version-assets.py
   cannot stamp a reference that carries a #fragment, so an assets/icons.svg
   would be served stale for seven days after any change to it. */

.icon {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: square;
}

/* The tinted square an icon sits in. Square, per the geometry rule. */
.icon-tile {
  width: 40px;
  height: 40px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--v-cloud);
  border: 1px solid var(--v-mist);
  color: var(--v-primary);
  margin-bottom: 4px;
}
/* Invert it on the cloud band so the tile still reads as a tile. */
.band-cloud .icon-tile { background: var(--v-white); }

/* A short rule above a section heading. It marks where a section starts without
   spending another line of type on saying so. */
.section-head { display: flex; flex-direction: column; gap: 14px; }
.section-head::before {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  background: var(--v-primary);
}

/* The two hero cards are the shop-versus-use split, which the Veranta backlog
   calls the heart of the site. The accent edge is there to make them read as
   two doors rather than two paragraphs. */
.hero-card { border-left: 3px solid var(--v-primary); }
.hero-card-head { display: flex; align-items: center; gap: 14px; }
.hero-card-head .icon-tile { margin-bottom: 0; }
.hero-card-head h2 { margin: 0; }

/* Phone blocks, at the smaller size that suits a single line of label. */
.phone-block-head { display: flex; align-items: center; gap: 9px; }
.phone-block-head .icon { width: 17px; height: 17px; color: var(--v-primary); }

/* ---------- professional sign-in ---------- */

.pro-header { height: 64px; }
.pro-header .lockup .word { font-size: 20px; }
.pro-tag {
  margin-left: 10px;
  padding-left: 14px;
  border-left: 1px solid var(--v-mist);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--v-steel);
  white-space: nowrap;
}
.pro-main {
  flex: 1;
  background: var(--v-cloud);
  padding: 56px var(--v-gutter) 72px;
}
.pro-main > .wrap { display: flex; flex-direction: column; gap: 36px; }
.pro-intro { display: flex; flex-direction: column; gap: 10px; max-width: 640px; }
.pro-intro h1 { font-size: 32px; }
.pro-intro p { margin: 0; font-size: 15px; color: var(--v-steel); }

.portal-card .eyebrow { font-size: 11.5px; }
.portal-card h2 { font-size: 17px; letter-spacing: -0.01em; }
.portal-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.portal-actions .card-link { font-size: 13px; }

.helpdesk {
  background: var(--v-white);
  border: 1px solid var(--v-mist);
  padding: 24px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.helpdesk-copy { display: flex; flex-direction: column; gap: 4px; }
.helpdesk-copy strong { font-size: 15px; font-weight: 600; }
.helpdesk-copy span { font-size: 13.5px; color: var(--v-steel); }
.helpdesk .phone-block { gap: 2px; }
.helpdesk .phone-number { font-size: 16px; }
.helpdesk .eyebrow { font-size: 11.5px; }

/* ---------- footer ---------- */

.site-footer {
  background: var(--v-ink);
  color: var(--v-footer-text);
  padding: 48px var(--v-gutter);
  margin-top: auto;
}
.footer-top {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.footer-brand { display: flex; flex-direction: column; gap: 14px; }
.footer-lockup { display: flex; align-items: center; gap: 10px; }
.footer-lockup .word {
  font-size: 17px;
  font-weight: 600;
  color: var(--v-white);
  letter-spacing: -0.01em;
}
.footer-address { font-size: 13px; line-height: 1.7; font-style: normal; }
.footer-cols { display: flex; gap: 56px; font-size: 13px; flex-wrap: wrap; }
.footer-col { display: flex; flex-direction: column; gap: 8px; }
.footer-col h2 { color: var(--v-white); font-weight: 600; font-size: 13px; letter-spacing: 0; }
.footer-col a { color: var(--v-footer-text); }
.footer-col a:hover { color: var(--v-white); text-decoration: none; }
.footer-legal {
  max-width: var(--v-max);
  margin: 32px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--v-footer-rule);
  font-size: 12px;
}

.footer-slim {
  background: var(--v-ink);
  color: var(--v-footer-text);
  padding: 28px var(--v-gutter);
  margin-top: auto;
}
.footer-slim .wrap {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 12.5px;
}
.footer-slim a { color: var(--v-footer-text); }
.footer-slim a:hover { color: var(--v-white); text-decoration: none; }
.footer-slim-links { display: flex; gap: 24px; }

/* ---------- not-built page ---------- */

.nb-main {
  flex: 1;
  background: var(--v-cloud);
  padding: 64px var(--v-gutter) 80px;
}
.nb-card {
  background: var(--v-white);
  border: 1px solid var(--v-mist);
  padding: 40px 44px;
  max-width: 720px;
}
.nb-card h1 { font-size: 32px; margin-top: 10px; }
.nb-lede { font-size: 15px; line-height: 1.6; color: var(--v-steel); margin: 14px 0 0; }
.nb-facts { margin: 28px 0 0; border-top: 1px solid var(--v-mist); }
.nb-facts > div {
  display: flex;
  gap: 20px;
  padding: 12px 0;
  border-bottom: 1px solid var(--v-mist);
}
.nb-facts dt {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--v-steel);
  flex: none;
  width: 150px;
  padding-top: 3px;
}
.nb-facts dd { margin: 0; font-size: 15px; line-height: 1.5; color: var(--v-ink); }
.nb-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 15px;
  font-weight: 600;
  background: var(--v-cloud);
  border: 1px solid var(--v-mist);
  padding: 2px 8px;
  user-select: all;
}
.nb-actions { margin-top: 30px; display: flex; gap: 12px; flex-wrap: wrap; }

/* The cartoon, shared by not-built.html and error.php. Beside the heading on a
   wide screen, above it on a narrow one. Square corners and no shadow, like
   everything else on this site.

   It is the only photograph-shaped file on Veranta, and it is not an exception
   to the brand: the rule bans marketing photography, not illustration on the
   two pages whose job is to be human rather than transactional. See the site
   README, section 1. */
.nb-top {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.nb-art img { display: block; width: 100%; height: auto; border: 1px solid var(--v-mist); }
.nb-intro > :first-child { margin-top: 0; }
/* A requested address can be long and has no spaces to break at. */
.nb-path {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

@media (max-width: 700px) {
  .nb-top { grid-template-columns: 1fr; gap: 20px; }
  .nb-art { max-width: 300px; }
}

@media (max-width: 1000px) {
  :root { --v-gutter: 24px; }
  .site-header { flex-wrap: wrap; height: auto; padding-top: 14px; padding-bottom: 14px; }
  .main-nav { order: 3; width: 100%; gap: 20px; flex-wrap: wrap; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .hero-cards { grid-template-columns: 1fr; }
  .hero h1 { font-size: 34px; }
  .nb-card { padding: 28px 24px; }
  .nb-facts > div { flex-direction: column; gap: 4px; }
  .nb-facts dt { width: auto; }
}

@media (max-width: 640px) {
  .grid-4, .grid-3 { grid-template-columns: 1fr; }
  .signin-split { flex-direction: column; }
  .phone-blocks { flex-direction: column; gap: 16px; }
}