/* ==========================================================================
   KoalaCare — public site layer  (direction: "clinical ledger")

   WHAT THIS FILE IS
   The single design layer for every public marketing surface: the home page,
   pricing, providers, the policy pages, the article index and article pages,
   the early-access form and the error pages. It replaces the previous
   warm-paper / eucalyptus / serif-brochure language (landing.css + the visual
   half of page.css/interior.css) with one cool, flat, ledger-like system:
   paper-white ground, hairline structure, mono index labels, sans display
   type, and exactly one accent — clay — reserved for the conversion action.

   WHAT IT MUST NOT DO
   * Nothing here may reach /admin or /app. Every rule is scoped to
     `body.public`. The consoles use their own shell (shell.html sets
     `body class="app"` / `body class="admin"`) and load only
     tokens.css, base.css, components.css and app.css. `tokens.css` and
     `components.css` are shared and are deliberately NOT edited, so console
     colour, type and component tokens are byte-for-byte unchanged.
   * No inline styles: the CSP blocks `style=""` and `<style>` blocks, so every
     declaration lives in this file.
   * No third-party fonts, scripts or CDNs, and no binary assets — the type is
     a system sans + system mono stack, and every graphic is CSS or an inline
     SVG icon from partials/icons.html.
   * Nothing is hidden pending scroll. There are no reveal animations, no
     opacity-0 defaults and no JS-gated visibility. Content is painted in its
     final state on first paint, because hide-then-reveal renders sections
     blank in full-page screenshots and costs real readers content when the
     script never runs.
   * Works with JavaScript switched off: the nav is a wrapped/scrolling rail
     rather than a JS-gated sheet, and every band is static markup.

   Loaded last, from base.html only (public shell), after tokens/base/
   components/interior, so these rules win on order as well as specificity.
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */
/* Additive public tokens. The shared palette's *meaning* is preserved: teal is
   the brand, one accent (clay) carries the primary action, and the status
   colours stay legible on white. */

body.public {
  --p-ink: #0e1a1f;
  --p-ink-2: #24343b;
  --p-ink-3: #4a5a61;
  /* Darkened from #6b7a80. The mono meta text (scene chrome, log days, fact
     labels, row numbers) renders at 10–11px, and #6b7a80 measures 3.9:1 on
     --p-ground — under the 4.5:1 threshold for body-sized text. #5d6b71 is
     5.3:1 on --p-paper and 4.9:1 on --p-ground, so every small label clears AA. */
  --p-ink-4: #5d6b71;
  --p-ground: #f1f4f5;
  --p-ground-2: #e6ebed;
  --p-paper: #ffffff;
  --p-line: #d5dee1;
  --p-line-2: #bcc9cd;
  --p-line-3: #e8eeef;
  --p-teal: #0b5c55;
  --p-teal-deep: #073f3a;
  --p-teal-soft: #e3efee;
  --p-action: #a8451c;
  --p-action-hover: #8c3814;
  --p-ok: #14603c;
  --p-ok-bg: #e3f1e8;
  --p-ok-line: #b7ddc6;
  --p-warn: #7a4a06;
  --p-warn-bg: #fbf2de;
  --p-warn-line: #e6cfa2;
  --p-danger: #8d1c33;
  --p-danger-bg: #fce9ec;
  --p-danger-line: #efc3cb;
  --p-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --p-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
  --p-maxw: 1180px;
  --p-gutter: clamp(1.15rem, 4vw, 2.5rem);
  --p-band: clamp(3rem, 5.5vw, 5.25rem);
  --p-r: 3px;
  --p-ring: 0 0 0 3px var(--p-paper), 0 0 0 5px var(--p-teal);
  --p-lift: 0 20px 44px -30px rgba(9, 35, 33, 0.4);

  background: var(--p-paper);
  color: var(--p-ink-2);
  font-family: var(--p-sans);
  font-size: 1.0625rem;
  line-height: 1.6;
}

/* -------------------------------------------------------- type & chrome base */

body.public h1,
body.public h2,
body.public h3,
body.public h4 {
  font-family: var(--p-sans);
  color: var(--p-ink);
  font-weight: 700;
  letter-spacing: -0.026em;
  line-height: 1.08;
}

body.public a {
  color: var(--p-teal);
  text-decoration-color: color-mix(in srgb, var(--p-teal) 40%, transparent);
  text-underline-offset: 2px;
}

body.public :focus-visible {
  outline: 2px solid var(--p-teal);
  outline-offset: 2px;
}

body.public .wrap {
  width: 100%;
  max-width: var(--p-maxw);
  margin-inline: auto;
  padding-inline: var(--p-gutter);
}

body.public .wrap--mid {
  max-width: 900px;
}

body.public .sr-only {
  position: absolute;
  width: 1px;
  height: 1px
  ;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

body.public .icon {
  flex: none;
}

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

body.public .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 46px;
  padding: 0.7rem 1.2rem;
  border: 1px solid transparent;
  border-radius: var(--p-r);
  font-family: var(--p-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0;
  text-decoration: none;
  transition: background-color 130ms ease, border-color 130ms ease,
    color 130ms ease;
}

body.public .btn--primary,
body.public .btn--clay {
  background: var(--p-action);
  border-color: var(--p-action);
  color: #fff;
}

body.public .btn--primary:hover,
body.public .btn--clay:hover {
  background: var(--p-action-hover);
  border-color: var(--p-action-hover);
}

body.public .btn--secondary {
  background: var(--p-paper);
  border-color: var(--p-line-2);
  color: var(--p-ink);
}

body.public .btn--secondary:hover {
  border-color: var(--p-ink);
}

body.public .btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--p-ink-2);
}

body.public .btn--ghost:hover {
  background: var(--p-ground);
  color: var(--p-ink);
}

body.public .btn--inverse {
  background: var(--p-paper);
  border-color: var(--p-paper);
  color: var(--p-teal-deep);
}

body.public .btn--inverse.btn--ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.42);
  color: #fff;
}

body.public .btn--sm {
  min-height: 38px;
  padding: 0.45rem 0.9rem;
  font-size: 0.875rem;
}

body.public .btn--block {
  width: 100%;
}

body.public .text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
}

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

body.public .site-strip {
  background: var(--p-ink);
  color: #d7e2e4;
}

body.public .site-strip__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  min-height: 34px;
  padding-block: 0.3rem;
  font-family: var(--p-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

body.public .site-strip__note {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

body.public .site-strip__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6fd0be;
}

body.public .site-strip a {
  color: #d7e2e4;
}

body.public .site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--p-line);
}

body.public .site-header[data-scrolled="true"] {
  box-shadow: 0 1px 0 var(--p-line-2), 0 12px 24px -22px rgba(9, 35, 33, 0.5);
}

body.public .site-header__inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: 64px;
}

body.public .brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--p-ink);
  text-decoration: none;
}

body.public .brand__mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--p-r);
  background: var(--p-teal-soft);
  color: var(--p-teal-deep);
}

body.public .brand__name {
  font-weight: 700;
  letter-spacing: -0.02em;
}

body.public .brand__tag {
  padding-left: 0.7rem;
  margin-left: 0.2rem;
  border-left: 1px solid var(--p-line-2);
  color: var(--p-ink-4);
  font-family: var(--p-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

body.public .site-nav {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 1.5rem;
  margin-left: auto;
}

body.public .site-nav__list {
  display: flex;
  align-items: center;
  gap: 1.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.public .site-nav__list a {
  display: inline-block;
  padding-block: 0.35rem;
  border-bottom: 2px solid transparent;
  color: var(--p-ink-2);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
}

body.public .site-nav__list a:hover {
  border-bottom-color: var(--p-line-2);
  color: var(--p-ink);
}

body.public .site-nav__list a[aria-current="page"] {
  border-bottom-color: var(--p-teal);
  color: var(--p-teal-deep);
}

body.public .site-nav__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

body.public .nav-toggle {
  display: none;
}

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

body.public .site-footer {
  background: var(--p-ink);
  color: #c3d1d4;
  margin-top: 0;
}

body.public .site-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  padding-block: clamp(2.5rem, 4vw, 3.5rem);
}

body.public .site-footer .brand {
  color: #fff;
}

body.public .site-footer .brand__mark {
  background: rgba(255, 255, 255, 0.1);
  color: #d9ebe8;
}

body.public .site-footer__tagline {
  margin-top: 1rem;
  max-width: 34ch;
  color: #b6c6c9;
  font-size: 0.9375rem;
}

body.public .site-footer__aside {
  margin-top: 0.9rem;
  color: #93a7ab;
  font-family: var(--p-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.public .site-footer__head {
  margin-bottom: 0.85rem;
  color: #8ea3a7;
  font-family: var(--p-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

body.public .site-footer__col ul {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.public .site-footer__col a {
  color: #dfe9ea;
  font-size: 0.9375rem;
  text-decoration: none;
}

body.public .site-footer__col a:hover {
  color: #fff;
  text-decoration: underline;
}

body.public .site-footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding-block: 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: #93a7ab;
  font-size: 0.8125rem;
}

body.public .site-footer__note {
  max-width: 62ch;
}

/* ------------------------------------------------------------ shared marks */
/* Eyebrows, chips and section heads, reused by every public page. */

body.public .pub-head {
  max-width: 58rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

body.public .pub-head__eyebrow,
body.public .section__eyebrow,
body.public .ed-eyebrow,
body.public .article-hero__cat {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--p-teal);
  font-family: var(--p-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

body.public .pub-head__eyebrow::before,
body.public .section__eyebrow::before,
body.public .ed-eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--p-teal);
}

body.public .pub-head h2,
body.public .section__head h2 {
  margin-top: 0.85rem;
  font-size: clamp(1.7rem, 1.15rem + 1.9vw, 2.45rem);
}

body.public .pub-head__lead,
body.public .section__lead {
  margin-top: 0.85rem;
  max-width: 62ch;
  color: var(--p-ink-3);
  font-size: 1.0625rem;
}

body.public .section__head {
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

body.public .section__head--center {
  text-align: left;
}

body.public .chip,
body.public .ed-chip,
body.public .pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--p-line);
  border-radius: 2px;
  background: #f7f9f9;
  color: var(--p-ink-3);
  font-family: var(--p-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
}

body.public .ed-chip {
  padding: 0.3rem 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--p-paper);
  border-color: var(--p-line-2);
}

body.public .ed-chip--clay {
  border-color: #e3bda7;
  background: #fbeade;
  color: var(--p-action);
}

body.public .chip--ok,
body.public .pill--live {
  border-color: var(--p-ok-line);
  background: var(--p-ok-bg);
  color: var(--p-ok);
}

body.public .chip--info {
  border-color: #b9d5d1;
  background: var(--p-teal-soft);
  color: var(--p-teal-deep);
}

body.public .chip--due {
  border-color: var(--p-warn-line);
  background: var(--p-warn-bg);
  color: var(--p-warn);
}

body.public .avatar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 2px;
  background: var(--p-ground-2);
  color: var(--p-ink-2);
  font-family: var(--p-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
}

/* =========================================================== home : hero */

body.public .pub-hero {
  background: var(--p-paper);
  border-bottom: 1px solid var(--p-line);
}

body.public .pub-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  gap: clamp(2rem, 4vw, 3.75rem);
  align-items: center;
  padding-block: clamp(2.25rem, 5vw, 4.25rem);
}

body.public .pub-hero__title {
  margin-top: 1.1rem;
  font-size: clamp(2.3rem, 1.35rem + 3.1vw, 3.6rem);
  letter-spacing: -0.032em;
  line-height: 1.03;
}

body.public .pub-hero__title em {
  display: block;
  font-style: normal;
  color: var(--p-teal);
}

body.public .pub-hero__lead {
  margin-top: 1.15rem;
  max-width: 40ch;
  color: var(--p-ink-3);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
}

body.public .pub-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.75rem;
}

body.public .pub-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.35rem;
  margin-top: 1.5rem;
  color: var(--p-ink-3);
  font-size: 0.875rem;
}

body.public .pub-checks li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

body.public .pub-checks .icon {
  color: var(--p-teal);
}

/* ------------------------------------------- home : product UI as evidence */
/* A faithful, static rendering of the real client portal: rail, top bar,
   today's medication rows with roles attached, the update feed. aria-hidden,
   with the prose equivalent kept in the .sr-only paragraph that follows. */

body.public .scene {
  margin: 0;
  border: 1px solid var(--p-line-2);
  border-radius: var(--p-r);
  background: var(--p-paper);
  box-shadow: var(--p-lift);
  overflow: hidden;
  font-size: 0.8125rem;
}

body.public .scene__chrome {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.5rem 0.75rem;
  background: var(--p-ground);
  border-bottom: 1px solid var(--p-line);
}

body.public .scene__dots {
  display: flex;
  gap: 4px;
}

body.public .scene__dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--p-line-2);
}

body.public .scene__url {
  flex: 1 1 12rem;
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--p-ink-4);
  font-family: var(--p-mono);
  font-size: 0.6875rem;
}

body.public .scene__tag {
  color: var(--p-ink-4);
  font-family: var(--p-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

body.public .scene__app {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
}

body.public .scene__rail {
  padding: 0.85rem 0.7rem;
  background: #f7f9f9;
  border-right: 1px solid var(--p-line-3);
}

body.public .scene__rail p {
  font-family: var(--p-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--p-ink-4);
}

body.public .scene__rail ul {
  display: grid;
  gap: 0.3rem;
  margin: 0.6rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.75rem;
  color: var(--p-ink-2);
}

body.public .scene__rail li {
  padding: 0.3rem 0.45rem;
}

body.public .scene__rail li[data-current] {
  background: var(--p-teal-soft);
  color: var(--p-teal-deep);
  font-weight: 600;
}

body.public .scene__main {
  padding: 0.85rem 0.9rem 1rem;
}

body.public .scene__top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
}

body.public .scene__title {
  font-weight: 700;
  color: var(--p-ink);
}

body.public .scene__meta {
  color: var(--p-ink-4);
  font-size: 0.6875rem;
}

body.public .scene__label {
  margin-top: 0.95rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--p-line-3);
  color: var(--p-ink-4);
  font-family: var(--p-mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

body.public .scene__rows,
body.public .scene__feed,
body.public .scene__roles {
  margin: 0;
  padding: 0;
  list-style: none;
}

body.public .scene__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.6rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--p-line-3);
}

body.public .scene__row:last-child {
  border-bottom: 0;
}

body.public .scene__name {
  flex: 1 1 8rem;
  min-width: 0;
  color: var(--p-ink);
}

body.public .scene__time {
  color: var(--p-ink-4);
  font-family: var(--p-mono);
  font-size: 0.6875rem;
}

body.public .scene__feed li,
body.public .scene__roles li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1rem 0.5rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--p-line-3);
  color: var(--p-ink-2);
  font-size: 0.75rem;
}

body.public .scene__feed li:last-child,
body.public .scene__roles li:last-child {
  border-bottom: 0;
}

body.public .scene__feed-meta,
body.public .scene__role-note {
  color: var(--p-ink-4);
  font-family: var(--p-mono);
  font-size: 0.625rem;
}

body.public .scene__note {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin-top: 0.85rem;
  color: var(--p-ink-4);
  font-size: 0.75rem;
}

/* ------------------------------------------------------- home : fact strip */

body.public .pub-facts {
  background: var(--p-ground);
  border-bottom: 1px solid var(--p-line);
}

body.public .pub-facts__inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}

body.public .pub-facts__item {
  padding: 1.15rem 1.25rem;
  border-left: 1px solid var(--p-line);
}

body.public .pub-facts__item:first-child {
  border-left: 0;
  padding-left: 0;
}

body.public .pub-facts__label {
  color: var(--p-ink-4);
  font-family: var(--p-mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

body.public .pub-facts__value {
  margin-top: 0.3rem;
  color: var(--p-ink);
  font-size: 1.0625rem;
  font-weight: 600;
}

/* -------------------------------------------------------------- band system */

body.public .pub-band,
body.public .section {
  padding-block: var(--p-band);
}

body.public .pub-band--tint,
body.public .section--tint {
  background: var(--p-ground);
  border-block: 1px solid var(--p-line);
}

body.public .pub-band--deep,
body.public .section--deep {
  background: var(--p-teal-deep);
  border-block: 1px solid var(--p-teal-deep);
  color: #dcebe9;
}

body.public .pub-band--deep h2,
body.public .pub-band--deep h3,
body.public .section--deep h2,
body.public .section--deep h3 {
  color: #fff;
}

body.public .pub-band--deep .section__eyebrow,
body.public .section--deep .section__eyebrow {
  color: #9fd4cc;
}

body.public .pub-band--deep .section__eyebrow::before,
body.public .section--deep .section__eyebrow::before {
  background: #9fd4cc;
}

body.public .pub-band--deep .section__lead,
body.public .section--deep .section__lead {
  color: #c3dbd8;
}

/* ------------------------------------------------- labelled index rows */
/* "01 | title | body" — the ledger motif that replaces free-floating cards. */

body.public .pub-rows {
  border-top: 1px solid var(--p-line-2);
}

body.public .pub-row {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 17rem) minmax(0, 1fr);
  gap: 0.4rem 1.5rem;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--p-line);
}

body.public .pub-row__num {
  color: var(--p-teal);
  font-family: var(--p-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
}

body.public .pub-row__title {
  color: var(--p-ink);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

body.public .pub-row__body {
  color: var(--p-ink-3);
  font-size: 0.9375rem;
}

/* ------------------------------------------------------- hairline step grid */

body.public .pub-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--p-line-2);
  border-left: 1px solid var(--p-line-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

body.public .pub-step {
  padding: 1.4rem 1.35rem 1.6rem;
  border-right: 1px solid var(--p-line-2);
  border-bottom: 1px solid var(--p-line-2);
  background: var(--p-paper);
}

body.public .pub-step__num {
  color: var(--p-teal);
  font-family: var(--p-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
}

body.public .pub-step__title {
  margin-top: 0.9rem;
  font-size: 1.0625rem;
  font-weight: 600;
}

body.public .pub-step__body {
  margin-top: 0.5rem;
  color: var(--p-ink-3);
  font-size: 0.9375rem;
}

body.public .pub-band--tint .pub-step {
  background: var(--p-paper);
}

/* ------------------------------------------------------------ feature grid */

body.public .pub-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

body.public .pub-card {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  padding: 1.35rem;
  background: var(--p-paper);
  border: 1px solid var(--p-line);
  border-radius: var(--p-r);
}

body.public .pub-card__top {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--p-teal);
}

body.public .pub-card__title {
  font-size: 1.0625rem;
  font-weight: 600;
}

body.public .pub-card__body {
  color: var(--p-ink-3);
  font-size: 0.9375rem;
}

body.public .pub-mini {
  margin-top: 0.55rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--p-line-3);
}

body.public .pub-mini__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.5rem;
  padding: 0.3rem 0;
  color: var(--p-ink-2);
  font-size: 0.8125rem;
}

body.public .pub-mini__meta {
  margin-left: auto;
  color: var(--p-ink-4);
  font-family: var(--p-mono);
  font-size: 0.625rem;
}

/* ---------------------------------------------------------- ledger log */

body.public .pub-week {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}

body.public .pub-log {
  border: 1px solid var(--p-line-2);
  border-radius: var(--p-r);
  background: var(--p-paper);
  overflow: hidden;
  list-style: none;
  margin: 0;
  padding: 0;
}

body.public .pub-log__row {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 0.25rem 1rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--p-line-3);
  font-size: 0.9375rem;
}

body.public .pub-log__row:first-child {
  border-top: 0;
}

body.public .pub-log__row:nth-child(even) {
  background: #f7f9f9;
}

body.public .pub-log__day {
  color: var(--p-ink-4);
  font-family: var(--p-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

body.public .pub-log__text {
  color: var(--p-ink-2);
}

body.public .pub-log__text strong {
  color: var(--p-ink);
}

/* ------------------------------------------------------------ principles */

body.public .pub-principles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--p-line-2);
  border-left: 1px solid var(--p-line-2);
}

body.public .pub-principle {
  display: flex;
  gap: 1rem;
  padding: 1.35rem;
  border-right: 1px solid var(--p-line-2);
  border-bottom: 1px solid var(--p-line-2);
  background: var(--p-paper);
}

body.public .pub-principle__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 2px;
  background: var(--p-teal-soft);
  color: var(--p-teal-deep);
}

body.public .pub-principle__title {
  font-size: 1.0625rem;
  font-weight: 600;
}

body.public .pub-principle__body {
  margin-top: 0.4rem;
  color: var(--p-ink-3);
  font-size: 0.9375rem;
}

/* --------------------------------------------------------------- security */

body.public .pub-controls {
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

body.public .pub-control {
  display: flex;
  gap: 1rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

body.public .pub-control__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 2px;
  color: #9fd4cc;
}

body.public .pub-control__title {
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
}

body.public .pub-control__body {
  margin-top: 0.35rem;
  max-width: 62ch;
  color: #c3dbd8;
  font-size: 0.9375rem;
}

body.public .pub-deep-link {
  margin-top: 1.75rem;
}

/* ----------------------------------------------------------------- quote */

body.public .pub-quote {
  margin: 0;
  padding-left: clamp(1rem, 3vw, 2rem);
  border-left: 3px solid var(--p-teal);
}

body.public .pub-quote__text {
  max-width: 48ch;
  color: var(--p-ink);
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.9rem);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.28;
}

body.public .pub-quote__cite {
  margin-top: 1rem;
  color: var(--p-ink-4);
  font-family: var(--p-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------- faq */

body.public .faq {
  counter-reset: faq;
  border-top: 1px solid var(--p-line-2);
}

body.public .faq__item {
  counter-increment: faq;
  border-bottom: 1px solid var(--p-line-2);
  background: none;
  border-radius: 0;
}

body.public .faq__q {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding: 1.1rem 0;
  color: var(--p-ink);
  font-size: 1.0625rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

body.public .faq__q::before {
  content: counter(faq, decimal-leading-zero);
  flex: none;
  color: var(--p-teal);
  font-family: var(--p-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
}

body.public .faq__q::after {
  content: "+";
  margin-left: auto;
  color: var(--p-teal);
  font-family: var(--p-mono);
  font-size: 1.05rem;
  line-height: 1;
}

body.public .faq__item[open] .faq__q::after {
  content: "\2013";
}

body.public .faq__a {
  padding: 0 0 1.25rem 2.1rem;
  max-width: 72ch;
  color: var(--p-ink-3);
  font-size: 0.9375rem;
}

body.public .faq__a > * + * {
  margin-top: 0.75rem;
}

/* ------------------------------------------------------------- cta band */

body.public .cta-band {
  position: relative;
  background: var(--p-teal-deep);
  color: #dcebe9;
  padding-block: clamp(2.75rem, 5vw, 4.5rem);
  overflow: hidden;
}

body.public .cta-band__glow,
body.public .hero__backdrop,
body.public .page-head::after,
body.public .page-head::before,
body.public .article-hero::after,
body.public .article-hero::before {
  display: none;
}

body.public .cta-band__inner {
  max-width: 46rem;
}

body.public .cta-band h2 {
  color: #fff;
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
}

body.public .cta-band__lead {
  margin-top: 0.9rem;
  max-width: 54ch;
  color: #c3dbd8;
  font-size: 1.0625rem;
}

body.public .cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.6rem;
}

body.public .cta-band__reassure {
  margin-top: 1.25rem;
  color: #9fbab7;
  font-family: var(--p-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ===================================================== interior page head */

body.public .page-head {
  position: relative;
  overflow: hidden;
  background: var(--p-paper);
  border-bottom: 1px solid var(--p-line-2);
  padding-block: clamp(2.25rem, 4vw, 3.5rem) clamp(1.75rem, 3vw, 2.5rem);
}

body.public .page-head h1 {
  max-width: 26ch;
  font-family: var(--p-sans);
  font-size: clamp(2rem, 1.35rem + 2.2vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--p-ink);
}

body.public .page-head h1 em {
  display: block;
  font-style: normal;
  color: var(--p-teal);
}

body.public .page-head__lead {
  margin-top: 1rem;
  max-width: 60ch;
  color: var(--p-ink-3);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
}

body.public .page-head__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.6rem;
}

body.public .page-head__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.4rem;
}

body.public .breadcrumb {
  margin-bottom: 1rem;
  color: var(--p-ink-4);
  font-family: var(--p-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

body.public .breadcrumb a {
  color: var(--p-ink-4);
}

/* ------------------------------------------------------- interior blocks */

body.public .ed-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--p-line-2);
  border-radius: var(--p-r);
  overflow: hidden;
}

body.public .ed-fact {
  display: grid;
  align-content: start;
  gap: 0.3rem;
  padding: 1.1rem 1.2rem;
  background: var(--p-paper);
  border: 0;
  border-right: 1px solid var(--p-line);
  border-radius: 0;
  box-shadow: none;
}

body.public .ed-fact:last-child {
  border-right: 0;
}

body.public .ed-fact__value {
  font-family: var(--p-sans);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--p-teal-deep);
}

body.public .ed-fact__label {
  color: var(--p-ink-3);
  font-size: 0.8125rem;
  line-height: 1.45;
}

body.public .ed-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border: 0;
  border-left: 3px solid var(--p-warn-line);
  border-radius: 0;
  background: var(--p-warn-bg);
}

body.public .ed-note__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--p-warn);
}

body.public .ed-note__title,
body.public .ed-note__body,
body.public .ed-note__body a {
  color: var(--p-warn);
}

body.public .ed-note__title {
  font-size: 0.9375rem;
  font-weight: 600;
}

body.public .ed-note__body {
  font-size: 0.9375rem;
}

body.public .ed-filter > label {
  min-height: 42px;
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--p-line-2);
  border-radius: 2px;
  background: var(--p-paper);
  color: var(--p-ink-2);
  font-size: 0.875rem;
}

body.public .ed-filter > label:hover {
  border-color: var(--p-teal);
  color: var(--p-teal-deep);
}

body.public .ed-filter > input:checked + label {
  background: var(--p-teal-deep);
  border-color: var(--p-teal-deep);
  color: #fff;
}

body.public .ed-filter__label {
  color: var(--p-ink-4);
  font-family: var(--p-mono);
  font-size: 0.625rem;
}

body.public .ed-scroll {
  border: 1px solid var(--p-line-2);
  border-radius: var(--p-r);
  box-shadow: none;
  background: var(--p-paper);
}

body.public .ed-table thead th {
  border-bottom: 1px solid var(--p-line-2);
  color: var(--p-ink-4);
  font-family: var(--p-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
}

body.public .ed-table tbody th {
  color: var(--p-ink);
  font-size: 0.9375rem;
}

body.public .ed-table tbody td {
  color: var(--p-ink-3);
  font-size: 0.9375rem;
}

body.public .ed-table tbody tr:hover th,
body.public .ed-table tbody tr:hover td {
  background: #f7f9f9;
}

body.public .ed-table__group th {
  background: var(--p-ground);
  color: var(--p-ink-4);
  font-family: var(--p-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
}

body.public .ed-cell .icon {
  color: var(--p-teal);
}

body.public .ed-cell--no,
body.public .ed-cell--no .icon {
  color: var(--p-ink-4);
}

body.public .ed-cell--note {
  color: var(--p-ink-4);
  font-size: 0.8125rem;
}

body.public .ed-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--p-line-2);
  border-left: 1px solid var(--p-line-2);
}

body.public .ed-step {
  display: grid;
  align-content: start;
  gap: 0.4rem;
  padding: 1.35rem;
  background: var(--p-paper);
  border: 0;
  border-right: 1px solid var(--p-line-2);
  border-bottom: 1px solid var(--p-line-2);
  border-radius: 0;
  box-shadow: none;
}

body.public .ed-step__num {
  font-family: var(--p-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  color: var(--p-teal);
}

body.public .ed-step__title {
  color: var(--p-ink);
  font-size: 1.0625rem;
  font-weight: 600;
}

body.public .ed-step__body {
  color: var(--p-ink-3);
  font-size: 0.9375rem;
}

body.public .ed-empty {
  margin-top: 1.5rem;
  padding: 2.25rem 1.5rem;
  border: 1px solid var(--p-line-2);
  border-radius: var(--p-r);
  background: var(--p-paper);
  color: var(--p-ink-3);
  font-size: 0.9375rem;
  text-align: left;
}

body.public .ed-empty__title {
  color: var(--p-ink);
  font-size: 1.0625rem;
}

/* -------------------------------------------------------- panels & cards */

body.public .panel,
body.public .card,
body.public .start-card,
body.public .article-cta,
body.public .pl-estimate,
body.public .pl-contact {
  background: var(--p-paper);
  border: 1px solid var(--p-line);
  border-radius: var(--p-r);
  box-shadow: none;
}

body.public .panel {
  padding: 1.25rem;
}

body.public .panel__title {
  margin-bottom: 0.75rem;
  color: var(--p-ink-4);
  font-family: var(--p-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

body.public .panel ul {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
}

body.public .panel li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

body.public .panel li .icon {
  margin-top: 0.15rem;
  color: var(--p-teal);
}

/* ------------------------------------------------------------ prose blocks */

body.public .prose {
  counter-reset: psec;
  color: var(--p-ink-2);
  font-size: 1.0625rem;
}

body.public .prose h2 {
  counter-increment: psec;
  margin-top: 2.25rem;
  font-family: var(--p-sans);
  font-size: clamp(1.4rem, 1.15rem + 1vw, 1.85rem);
  letter-spacing: -0.022em;
  color: var(--p-ink);
}

body.public .prose h2::before {
  content: counter(psec, decimal-leading-zero);
  display: block;
  margin-bottom: 0.4rem;
  color: var(--p-teal);
  font-family: var(--p-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
}

body.public .prose h3 {
  margin-top: 1.75rem;
  font-family: var(--p-sans);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--p-ink);
}

body.public .prose > h2:first-child {
  margin-top: 0;
}

body.public .prose p,
body.public .prose li {
  color: var(--p-ink-2);
  font-size: 1.0625rem;
  line-height: 1.65;
}

body.public .prose a {
  color: var(--p-teal);
}

body.public .prose strong {
  color: var(--p-ink);
}

body.public .prose ul > li::before {
  color: var(--p-teal);
}

body.public .prose hr {
  border: 0;
  border-top: 1px solid var(--p-line-2);
}

body.public .prose blockquote {
  border-left: 3px solid var(--p-teal);
  padding-left: 1.25rem;
  color: var(--p-ink);
}

/* ------------------------------------------------------- articles layer */

body.public .article-hero {
  position: relative;
  overflow: hidden;
  background: var(--p-paper);
  border-bottom: 1px solid var(--p-line-2);
  padding-block: clamp(2.25rem, 4vw, 3.5rem);
}

body.public .article-hero h1 {
  font-family: var(--p-sans);
  font-size: clamp(1.9rem, 1.3rem + 2.1vw, 2.85rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.06;
  color: var(--p-ink);
}

body.public .article-hero__lead {
  margin-top: 1rem;
  max-width: 62ch;
  color: var(--p-ink-3);
  font-size: 1.0625rem;
}

body.public .article-byline__name,
body.public .article-meta,
body.public .article-share__title,
body.public .article-author__name {
  color: var(--p-ink-4);
  font-family: var(--p-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

body.public .article-meta time {
  font-family: var(--p-mono);
}

body.public .article-body,
body.public .article-body.prose {
  font-size: 1.0625rem;
}

body.public .article-body h2,
body.public .article-body h3,
body.public .article-body.prose h2,
body.public .article-body.prose h3 {
  font-family: var(--p-sans);
  color: var(--p-ink);
}

body.public .article-body.prose p,
body.public .article-body.prose li {
  color: var(--p-ink-2);
}

body.public .article-aside {
  border-top: 3px solid var(--p-teal);
  padding-top: 1rem;
  background: none;
}

body.public .article-aside__note {
  border: 1px solid var(--p-line-2);
  border-radius: var(--p-r);
  background: var(--p-paper);
  box-shadow: none;
}

body.public .article-cta {
  padding: 1.5rem;
  background: var(--p-teal-deep);
  border-color: var(--p-teal-deep);
  color: #dcebe9;
}

body.public .article-cta__title {
  color: #fff;
}

body.public .article-cta__body {
  color: #c3dbd8;
}

body.public .article-body .takeaways,
body.public .takeaways,
body.public .callout,
body.public .article-body .callout {
  border: 1px solid var(--p-line-2);
  border-left: 3px solid var(--p-teal);
  border-radius: 0;
  background: #f7f9f9;
  box-shadow: none;
}

body.public .takeaways__title,
body.public .article-body .takeaways__title {
  color: var(--p-ink);
  font-family: var(--p-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

body.public .pullquote p,
body.public .article-body .pullquote p {
  color: var(--p-ink);
  font-family: var(--p-sans);
  font-weight: 600;
  letter-spacing: -0.02em;
}

body.public .article-body .tag-list li,
body.public .tag-list li {
  border-radius: 2px;
}

body.public .article-progress {
  background: var(--p-teal);
}

/* --------------------------------------------------------- pricing layer */

body.public .pl-switch__bar,
body.public .pl-switch {
  border-radius: 2px;
}

body.public .pl-switch__opt {
  border-radius: 2px;
}

body.public .pl-grid {
  gap: 1rem;
}

body.public .pl-card {
  border: 1px solid var(--p-line-2);
  border-radius: var(--p-r);
  background: var(--p-paper);
  box-shadow: none;
}

body.public .pl-card--featured {
  border-color: var(--p-teal);
  box-shadow: inset 0 3px 0 var(--p-teal);
}

body.public .pl-card:hover,
body.public .pl-card--featured:hover {
  box-shadow: none;
  border-color: var(--p-teal);
}

body.public .pl-card__flag {
  padding: 0.15rem 0.45rem;
  border-radius: 2px;
  background: var(--p-teal-soft);
  color: var(--p-teal-deep);
  font-family: var(--p-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body.public .pl-card__name {
  color: var(--p-ink);
  font-family: var(--p-sans);
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

body.public .pl-card__price {
  font-family: var(--p-sans);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--p-ink);
}

body.public .pl-card__price--planned {
  font-family: var(--p-sans);
  font-weight: 600;
  color: var(--p-ink-3);
}

body.public .pl-card__note,
body.public .pl-card__aside {
  color: var(--p-ink-4);
  font-size: 0.8125rem;
}

body.public .pl-estimate__value,
body.public .pl-estimate__cost strong {
  font-family: var(--p-sans);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--p-teal-deep);
}

body.public .pl-range {
  accent-color: var(--p-teal);
}

body.public .pl-contact__title {
  color: var(--p-ink);
  font-size: 1.0625rem;
  font-weight: 600;
}

body.public .pl-contact__body {
  color: var(--p-ink-3);
  font-size: 0.9375rem;
}

/* ------------------------------------------------------ forms (start page) */

body.public .start-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}

body.public .start-card {
  padding: clamp(1.25rem, 3vw, 2rem);
}

body.public .start-aside {
  display: grid;
  gap: 1.1rem;
}

body.public .start-aside__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.9rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--p-line);
}

body.public .start-aside__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 2px;
  background: var(--p-teal-soft);
  color: var(--p-teal-deep);
}

body.public .start-aside__title {
  color: var(--p-ink);
  font-family: var(--p-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body.public .start-aside__body {
  margin-top: 0.4rem;
  color: var(--p-ink-3);
  font-size: 0.9375rem;
}

body.public .field + .field,
body.public .field {
  margin-top: 1.1rem;
}

body.public .field:first-of-type {
  margin-top: 0;
}

body.public .field__label {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--p-ink);
  font-size: 0.9375rem;
  font-weight: 600;
}

body.public .field__optional {
  color: var(--p-ink-4);
  font-weight: 400;
  font-size: 0.8125rem;
}

body.public .field__control {
  width: 100%;
  min-height: 48px;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--p-line-2);
  border-radius: var(--p-r);
  background: var(--p-paper);
  color: var(--p-ink);
  font-family: var(--p-sans);
  font-size: 1rem;
}

body.public .field__control:hover {
  border-color: var(--p-ink-4);
}

body.public .field__control:focus-visible {
  outline: none;
  border-color: var(--p-teal);
  box-shadow: var(--p-ring);
}

body.public .field__control[aria-invalid="true"] {
  border-color: var(--p-danger);
  background: var(--p-danger-bg);
}

body.public .field__hint {
  margin-top: 0.4rem;
  color: var(--p-ink-4);
  font-size: 0.8125rem;
}

body.public .field__error {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin-top: 0.4rem;
  color: var(--p-danger);
  font-size: 0.875rem;
  font-weight: 500;
}

body.public .checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}

body.public .checkbox input[type="checkbox"] {
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.2rem;
  accent-color: var(--p-teal);
}

body.public .checkbox label {
  color: var(--p-ink-2);
  font-size: 0.9375rem;
}

body.public .honeypot {
  position: absolute;
  left: -9999px;
}

body.public .form-status {
  margin-top: 1rem;
}

body.public .alert {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--p-line);
  border-radius: var(--p-r);
  background: var(--p-ground);
}

body.public .alert--success {
  border-color: var(--p-ok-line);
  background: var(--p-ok-bg);
  color: var(--p-ok);
}

body.public .alert--error {
  border-color: var(--p-danger-line);
  background: var(--p-danger-bg);
  color: var(--p-danger);
}

body.public .alert--info {
  border-color: #b9d5d1;
  background: var(--p-teal-soft);
  color: var(--p-teal-deep);
}

body.public .alert__title {
  font-weight: 600;
}

body.public .alert__body {
  font-size: 0.9375rem;
}

/* -------------------------------------------------------- consent banner */

body.public .consent {
  border-top: 1px solid var(--p-line-2);
  background: var(--p-paper);
  color: var(--p-ink-2);
  box-shadow: 0 -18px 40px -34px rgba(9, 35, 33, 0.5);
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 1080px) {
  body.public .pub-row {
    grid-template-columns: 3rem minmax(0, 15rem) minmax(0, 1fr);
  }

  /* The header is one row until 900px. Between roughly 950px and 1080px the six
     links plus both buttons leave each label too little room, so labels used to
     break over two lines. The brand tag is the least useful thing on that line:
     hide it, tighten the two gaps, and keep every label on one line. The list
     scrolls inside its own box rather than pushing the header sideways, which is
     also what happens below 900px when the nav moves to its own row. */
  body.public .brand__tag {
    display: none;
  }

  body.public .site-nav {
    gap: 1.1rem;
  }

  body.public .site-nav__list {
    gap: 0.95rem;
    overflow-x: auto;
    scrollbar-width: none;
  }

  body.public .site-nav__list::-webkit-scrollbar {
    display: none;
  }

  body.public .site-nav__list a {
    white-space: nowrap;
  }
}

@media (max-width: 900px) {
  body.public .pub-hero__grid,
  body.public .pub-week,
  body.public .start-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  body.public .pub-steps,
  body.public .ed-steps {
    grid-template-columns: minmax(0, 1fr);
  }

  body.public .pub-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.public .pub-principles {
    grid-template-columns: minmax(0, 1fr);
  }

  body.public .ed-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.public .ed-fact:nth-child(2n) {
    border-right: 0;
  }

  body.public .site-footer__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* The header stops being sticky and the nav becomes a scrolling rail, so the
     links stay reachable without a script and without eating the viewport. */
  body.public .site-header {
    position: static;
  }

  body.public .site-header__inner {
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    padding-block: 0.5rem;
  }

  body.public .site-nav {
    order: 3;
    flex: 1 0 100%;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-left: 0;
  }

  body.public .site-nav__list {
    flex: 1 1 100%;
    gap: 1.1rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 0.15rem;
  }

  body.public .site-nav__list::-webkit-scrollbar {
    display: none;
  }

  body.public .site-nav__list a {
    white-space: nowrap;
  }

  body.public .site-nav__actions {
    flex: 1 1 100%;
  }

  body.public .pub-row {
    grid-template-columns: 2.5rem minmax(0, 1fr);
  }

  body.public .pub-row__body {
    grid-column: 2;
  }
}

@media (max-width: 640px) {
  body.public .pub-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body.public .site-footer__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  body.public .pub-log__row {
    grid-template-columns: minmax(0, 1fr);
  }

  body.public .ed-strip {
    grid-template-columns: minmax(0, 1fr);
  }

  body.public .ed-fact {
    border-right: 0;
    border-bottom: 1px solid var(--p-line);
  }

  body.public .ed-fact:last-child {
    border-bottom: 0;
  }

  body.public .scene__app {
    grid-template-columns: minmax(0, 1fr);
  }

  body.public .scene__rail {
    border-right: 0;
    border-bottom: 1px solid var(--p-line-3);
  }

  body.public .scene__rail ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
  }

  body.public .pub-facts__item {
    border-left: 0;
    border-top: 1px solid var(--p-line);
    padding-left: 1.25rem;
  }

  body.public .pub-facts__item:first-child {
    border-top: 0;
    padding-left: 1.25rem;
  }

  body.public .page-head__actions .btn,
  body.public .pub-hero__actions .btn,
  body.public .cta-band__actions .btn {
    width: 100%;
  }

  body.public .faq__a {
    padding-left: 0;
  }
}

/* ======================================================= clarity refinements
   Added with the "calm clinical clarity" pass. Each rule is scoped to
   body.public and is either a new shared mark or a mid-range layout fix; none of
   them touch the console or the portal shell. */

/* A row of plain chips: the "who it is for" list and anything similar. */
body.public .pub-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The link that closes the three-step band. */
body.public .pub-step__foot {
  margin-top: 1.75rem;
}

/* Mid range (tablet landscape): four fact cells leave each label about 170px,
   which wraps the mono labels awkwardly. Two columns keep the strip calm. */
@media (min-width: 641px) and (max-width: 1080px) {
  body.public .pub-facts__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.public .pub-facts__item {
    padding-block: 1rem;
  }

  body.public .pub-facts__item:nth-child(odd) {
    border-left: 0;
    padding-left: 0;
  }

  body.public .pub-facts__item:nth-child(n + 3) {
    border-top: 1px solid var(--p-line);
  }

  /* The product panel needs the full width before the copy is squeezed. */
  body.public .pub-hero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.75rem, 4vw, 2.5rem);
  }

  body.public .pub-hero__lead {
    max-width: 52ch;
  }
}

/* The brand tag is hidden from 1080px down (see the responsive block above), so it
   never competes with the six nav links for the same line. */