/* AOG Hub: styles for the communication-network pages
   /communication/  /apps/  /apps/mobile/  /apps/desktop/  /apps/web/  /modes/  /community/

   Kept out of main.css deliberately. main.css already carries the home page and
   the onboarding page, and folding seven more pages into it would make the one
   file nobody dares touch. Everything here is built from the tokens in
   tokens.css - no raw colour and no raw font size - and reuses main.css's
   primitives (.section, .container, .eyebrow, .lede, .checklist, .benefits,
   .cp-cards, .cp-points, .cp-split, .cp-figure, .cp-steps, .cp-help) rather
   than restating them.

   Component order below follows the order a reader meets them:
   shared furniture → /communication/ → /apps/ → /modes/ → /community/. */

/* ── Accessibility helper ───────────────────────────────────────────
   Table captions carry the summary a sighted reader gets from the section
   heading. Visible captions would duplicate that heading on screen. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ══════════════════════════════════════════════════════════════════
   SHARED FURNITURE  (_includes/page.njk)
   ══════════════════════════════════════════════════════════════════ */

/* ── Secondary-page hero ────────────────────────────────────────────
   The home page's .hero and the onboarding page's .cp-hero, third variant: one
   centred column, because these pages lead with a sentence rather than a form.
   The wash is heavier than .hero's - these headlines are longer and run over
   whatever is in the photograph. */
.page-hero {
  position: relative;
  background: var(--color-brand-900);
  color: #fff;
  overflow: hidden;
}
.page-hero__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.42;
}
.page-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(170deg, rgba(0,22,56,0.88) 0%, rgba(0,22,56,0.72) 45%, rgba(0,32,96,0.80) 100%);
}
.page-hero__inner {
  position: relative; z-index: 1;
  max-width: 860px;
  padding-block: clamp(48px, 6.5vw, 104px);
}
.page-hero--center .page-hero__inner { margin-inline: auto; text-align: center; }
.page-hero .eyebrow { color: var(--color-brand-200); }
.page-hero h1 {
  font-size: var(--font-size-h1-sm);
  font-weight: var(--font-weight-extrabold);
  line-height: 1.08;
  text-shadow: 0 2px 10px rgba(0,12,32,0.45);
}
.page-hero__sub {
  margin-top: var(--space-6);
  font-size: var(--font-size-lede-lg);
  color: rgba(255,255,255,0.87);
  max-width: 68ch;
}
.page-hero--center .page-hero__sub { margin-inline: auto; }
.page-hero__actions {
  margin-top: var(--space-8);
  display: flex; flex-wrap: wrap; gap: var(--space-3);
}
.page-hero--center .page-hero__actions { justify-content: center; }
/* Same treatment as the home hero: a translucent button over a photograph needs
   its own backdrop or the label disappears into whatever is behind it. */
.page-hero .btn-on-dark {
  background: rgba(11,18,38,0.45);
  border-color: rgba(255,255,255,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.page-hero .btn-on-dark:hover { background: rgba(11,18,38,0.62); border-color: rgba(255,255,255,0.75); }

/* ── Sub-navigation (the four application pages) ────────────────────
   Sticks under the main header so the sibling pages are reachable from anywhere
   down a long page. Without it /apps/mobile/ is a cul-de-sac. */
.subnav {
  position: sticky; top: var(--nav-height); z-index: 40;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-xs);
}
.subnav__inner {
  display: flex; align-items: center; gap: var(--space-6);
  min-height: 52px;
  overflow-x: auto;
}
.subnav__label {
  flex-shrink: 0;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-widest);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}
.subnav__list { display: flex; align-items: center; gap: var(--space-2); list-style: none; }
.subnav__item {
  display: block; white-space: nowrap;
  padding: 7px var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-neutral-600);
  transition: background .15s ease, color .15s ease;
}
a.subnav__item:hover { background: var(--color-brand-50); color: var(--color-primary); }
.subnav__item.is-current { background: var(--color-brand-800); color: #fff; font-weight: var(--font-weight-semibold); }

/* ── Closing band ───────────────────────────────────────────────────
   Two destinations only: the platform, and a person. This site makes no API
   call, so there is nothing else for it to honestly offer. */
.closing {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--space-8);
  padding: clamp(28px, 3.4vw, 44px);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-inline-start: 4px solid var(--color-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.closing__text { flex: 1 1 420px; }
.closing__text h2 { font-size: var(--font-size-3xl); }
.closing__text p { margin-top: var(--space-3); font-size: var(--font-size-md); color: var(--color-text-secondary); max-width: 68ch; }
.closing__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ══════════════════════════════════════════════════════════════════
   /communication/
   ══════════════════════════════════════════════════════════════════ */

/* ── The four approved sentences ─────────────────────────────────────
   Quoted from product-surfaces.md §2, so they are set as statements rather than
   as cards with headings - there is nothing to add to them. */
.promisebar { background: var(--color-brand-800); color: #fff; }
.promisebar__inner {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  padding-block: var(--space-8);
}
.promise { display: flex; gap: var(--space-3); align-items: flex-start; }
.promise__icon {
  flex-shrink: 0;
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.12);
  color: #fff;
}
.promise__text {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
}

/* ── The reader row over a message box ──────────────────────────────
   A still of the real component, built in markup rather than shipped as a
   screenshot: it stays legible at every width and cannot go stale when the app
   changes. This row is the product's primary security UI, so the page shows it
   instead of describing it. */
.composer {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.composer__readers { padding: var(--space-6); border-bottom: 1px solid var(--color-border); }
.composer__label {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-widest);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-4);
}
.composer__faces { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-3); }
.face {
  display: flex; align-items: center; gap: var(--space-3);
  /* Tighter on the avatar edge than on the text edge; logical so the pill keeps
     its shape when the avatar moves to the right in RTL. */
  padding-block: var(--space-2);
  padding-inline: var(--space-2) var(--space-4);
  background: var(--color-neutral-50);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
}
.face--self { background: var(--color-brand-50); border-color: var(--color-brand-100); }
.face__avatar {
  flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--color-brand-800); color: #fff;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}
.face--self .face__avatar { background: var(--color-brand-400); }
.face__meta { display: flex; flex-direction: column; line-height: 1.25; }
.face__meta strong { font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); }
.face__meta em { font-style: normal; font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.composer__note { margin-top: var(--space-4); font-size: var(--font-size-sm); color: var(--color-text-tertiary); }

.composer__box {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  background: var(--color-neutral-50);
}
/* The level is stated before you type, never after - the composer is where that
   rule is enforced, so the still has to show it. */
.composer__level {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
}
.composer__level--official { background: var(--color-brand-800); color: #fff; }
.composer__placeholder { flex: 1; font-size: var(--font-size-lg); color: var(--color-text-tertiary); }
.composer__send {
  flex-shrink: 0;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--color-primary); color: #fff;
}

/* ── Comparison tables ──────────────────────────────────────────────
   A real <table>, because these are genuinely tabular and a screen reader user
   deserves the row and column headers. The wrapper scrolls rather than letting
   the page body scroll sideways on a phone. */
.cmp-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: var(--font-size-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.cmp--wide { min-width: 880px; }
.cmp th, .cmp td {
  padding: var(--space-4) var(--space-5);
  text-align: start;
  vertical-align: top;
  border-bottom: 1px solid var(--color-border);
}
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
.cmp thead th {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  border-bottom: 2px solid var(--color-border-strong);
}
.cmp tbody th {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  width: 1%; white-space: nowrap;
}
.cmp tbody td { color: var(--color-text-secondary); }

/* The three message situations get a colour each, carried through to the quoted
   label in the last row so the pairing is unmistakable. */
.cmp__head { border-bottom-width: 3px !important; }
.cmp__head--private  { border-bottom-color: var(--color-brand-400) !important; }
.cmp__head--official { border-bottom-color: var(--color-brand-800) !important; }
.cmp__head--email    { border-bottom-color: var(--color-warning-500) !important; }
.cmp__name { display: block; font-size: var(--font-size-2xl); font-weight: var(--font-weight-extrabold); letter-spacing: var(--letter-spacing-tight); }
.cmp__tag { display: block; margin-top: 2px; font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); color: var(--color-text-secondary); }

.cmp__labelrow { background: var(--color-neutral-50); }
.cmp__quote {
  display: inline-block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  border-inline-start: 3px solid var(--color-border-strong);
  background: var(--color-surface);
}
.cmp__quote--private  { border-inline-start-color: var(--color-brand-400); }
.cmp__quote--official { border-inline-start-color: var(--color-brand-800); }
/* The email label is the one sentence on the site that must never be softened,
   so it is the only one given a warning colour. */
.cmp__quote--email {
  border-inline-start-color: var(--color-warning-500);
  background: #FFFBEB;
}
.cmp__footnote {
  max-width: 80ch;
  margin-top: var(--space-8);
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
}
.section--ink .cmp__footnote { color: var(--color-neutral-300); }

/* Same table on a dark section. */
.cmp--onink { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.16); }
.cmp--onink th, .cmp--onink td { border-bottom-color: rgba(255,255,255,0.12); }
.cmp--onink thead th { color: #fff; border-bottom-color: rgba(255,255,255,0.3); }
.cmp--onink tbody th { color: var(--color-neutral-300); }
.cmp--onink tbody td { color: var(--color-neutral-300); }

/* Priority pills. AOG borrows the design system's own critical colour. */
.prio {
  display: inline-block;
  padding: 3px var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: #fff;
}
.prio--aog { background: var(--color-aog-critical); }
.prio--critical { background: var(--color-aog-delay); color: var(--color-brand-900); }
.prio--expedite { background: var(--color-brand-400); color: var(--color-brand-900); }
.prio--routine { background: var(--color-aog-routine); color: var(--color-brand-900); }

/* ── In-room notice ─────────────────────────────────────────────────
   The announcement a room shows when the other company joins. Rendered as the
   product renders it, quoted from §1.4. */
.noticebar {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4);
  margin-top: var(--space-8);
  padding: var(--space-5) var(--space-6);
  background: var(--color-brand-50);
  border: 1px solid var(--color-brand-100);
  border-inline-start: 4px solid var(--color-brand-400);
  border-radius: var(--radius-md);
}
.noticebar__icon { flex-shrink: 0; color: var(--color-primary); display: grid; place-items: center; }
.noticebar__text {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-brand-900);
}
.noticebar__meta { margin-inline-start: auto; font-size: var(--font-size-sm); color: var(--color-text-secondary); }

/* ── Case flow ──────────────────────────────────────────────────────
   A vertical spine rather than a numbered grid: the steps are strictly ordered
   and each one names the job that performs it, which a grid loses. */
.flowline { list-style: none; position: relative; max-width: 860px; margin-inline: auto; }
.flowline::before {
  content: "";
  position: absolute; inset-inline-start: 23px; top: 24px; bottom: 24px;
  width: 2px;
  background: linear-gradient(to bottom, var(--color-brand-200), var(--color-brand-100));
}
.flowstep { position: relative; display: flex; gap: var(--space-6); padding-block: var(--space-5); }
.flowstep__marker {
  position: relative; z-index: 1;
  flex-shrink: 0;
  width: 48px; height: 48px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--color-surface);
  border: 2px solid var(--color-brand-200);
  box-shadow: 0 0 0 5px var(--color-surface);
}
.flowstep__icon { color: var(--color-primary); display: grid; place-items: center; }
.flowstep__body { padding-top: var(--space-2); }
.flowstep__who {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-widest);
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}
.flowstep h3 { font-size: var(--font-size-xl); margin-bottom: var(--space-2); }
.flowstep p { font-size: var(--font-size-md); color: var(--color-text-secondary); max-width: 70ch; }

/* ── Escalation ladder ──────────────────────────────────────────────
   Sits on a dark section; the rungs climb in opacity so the last one reads as
   the end of the line. */
.ladder { list-style: none; display: grid; gap: var(--space-4); counter-reset: rung; }
.rung {
  display: flex; gap: var(--space-5); align-items: flex-start;
  padding: var(--space-5) var(--space-6);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-inline-start: 3px solid var(--color-brand-400);
  border-radius: var(--radius-md);
}
.rung__num {
  flex-shrink: 0;
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--color-brand-400); color: var(--color-brand-900);
  font-size: var(--font-size-sm); font-weight: var(--font-weight-bold);
}
.rung h3 { font-size: var(--font-size-lg); color: #fff; }
.rung p { margin-top: 2px; font-size: var(--font-size-md); color: var(--color-neutral-300); }
.rung:last-child { border-inline-start-color: var(--color-aog-critical); }
.rung:last-child .rung__num { background: var(--color-aog-critical); color: #fff; }
.ladder__note {
  max-width: 80ch;
  margin-top: var(--space-8);
  font-size: var(--font-size-md);
  color: var(--color-neutral-300);
}

/* A card for something we do NOT do. Same shape as .cp-card, dashed edge and a
   muted icon, so a list of absences does not read as a list of features. */
.cp-card--absent {
  border-style: dashed;
  background: var(--color-neutral-50);
}
.cp-card--absent .cp-card__icon { color: var(--color-neutral-400); }
.cp-card--absent:hover { border-style: solid; }

/* ══════════════════════════════════════════════════════════════════
   /apps/
   ══════════════════════════════════════════════════════════════════ */

/* ── Status chips ───────────────────────────────────────────────────
   These four surfaces are at genuinely different stages. A page that flattened
   them into one shipped product would mislead the one reader who matters, so
   every surface carries its real state. Keep them honest as the build moves. */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  white-space: nowrap;
}
.chip--live { background: #ECFDF5; color: #06603F; border: 1px solid #A7F3D0; }
.chip--progress { background: var(--color-brand-50); color: var(--color-brand-700); border: 1px solid var(--color-brand-100); }
.chip--early { background: #FFFBEB; color: #92400E; border: 1px solid #FDE68A; }
.chip--planned { background: var(--color-neutral-100); color: var(--color-neutral-600); border: 1px solid var(--color-neutral-200); }

/* ── The three surfaces ─────────────────────────────────────────────
   Equal weight on purpose. Most companies use two of the three, and which two
   depends on the job rather than on a licence tier. */
.surfaces { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); align-items: stretch; }
.surface {
  display: flex; flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-brand-400);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 2.6vw, 32px);
  box-shadow: var(--shadow-sm);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.surface:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.surface__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-5); }
.surface__icon {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: var(--radius-md);
  background: var(--color-brand-50);
  border: 1px solid var(--color-brand-100);
  color: var(--color-primary);
}
.surface__name { font-size: var(--font-size-3xl); font-weight: var(--font-weight-extrabold); letter-spacing: var(--letter-spacing-tight); line-height: 1.2; }
.surface__platforms { margin-top: var(--space-2); font-size: var(--font-size-sm); color: var(--color-text-tertiary); }
.surface__tagline { margin-top: var(--space-4); font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--color-brand-800); }
.surface__summary { margin-top: var(--space-3); font-size: var(--font-size-md); color: var(--color-text-secondary); }
.surface__for { list-style: none; display: grid; gap: var(--space-2); margin-top: var(--space-5); }
.surface__for li { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--font-size-md); }
.surface__for .tick { flex-shrink: 0; color: var(--color-primary); margin-top: 3px; }
.surface__cta { margin-top: auto; margin-block-start: var(--space-6); align-self: flex-start; }

/* .cp-points laid out two-up instead of stacked. */
.cp-points--grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-8) var(--space-10); }

/* ── Can / cannot pairs ─────────────────────────────────────────────
   Used wherever the interesting fact is the boundary: what a phone may do and
   what it deliberately may not, what the directory shares and what it never
   does. The "no" column is not an apology - it is the reason the product is
   trusted, so it gets equal visual weight. */
.splitlist {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}
.splitlist--wide { gap: var(--space-8); }
.splitlist__col {
  padding: var(--space-6);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-lg);
}
/* On a light section the same block needs light chrome. */
.section:not(.section--ink) .splitlist__col {
  background: var(--color-surface);
  border-color: var(--color-border);
  box-shadow: var(--shadow-xs);
}
.splitlist__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-widest);
  text-transform: uppercase;
  color: var(--color-brand-200);
  margin-bottom: var(--space-5);
}
.section:not(.section--ink) .splitlist__title { color: var(--color-primary); }
.splitlist__col ul { list-style: none; display: grid; gap: var(--space-3); }
.splitlist__col li { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--font-size-md); color: #fff; }
.section:not(.section--ink) .splitlist__col li { color: var(--color-text); }
.splitlist__mark {
  flex-shrink: 0;
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  margin-top: 1px;
}
.splitlist__yes .splitlist__mark { background: rgba(16,185,129,0.18); color: var(--color-success-500); }
.splitlist__no .splitlist__mark { background: rgba(239,68,68,0.16); color: var(--color-danger-500); }
.splitlist__note {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255,255,255,0.14);
  font-size: var(--font-size-sm);
  color: var(--color-neutral-400);
}
.section:not(.section--ink) .splitlist__note { border-top-color: var(--color-border); color: var(--color-text-secondary); }

/* ── Role cards (compact) ───────────────────────────────────────────
   The four-up version, used where a role needs a sentence rather than a panel. */
.rolecards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.rolecard {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.rolecard:hover { border-color: var(--color-brand-300); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.rolecard__icon {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border-radius: var(--radius-md);
  background: var(--color-brand-50);
  border: 1px solid var(--color-brand-100);
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}
.rolecard h3 { font-size: var(--font-size-lg); margin-bottom: var(--space-2); line-height: 1.3; }
.rolecard p { font-size: var(--font-size-md); color: var(--color-text-secondary); }

/* ── Callout ────────────────────────────────────────────────────────
   For the two places these pages say something against their own interest: the
   Android handsets that will kill the app, and the fact that a browser is the
   least private place to keep anything. Both are cheaper to say before a
   purchase than after a missed AOG. */
.callout {
  display: flex; gap: var(--space-5); align-items: flex-start;
  padding: clamp(22px, 2.8vw, 34px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}
.callout--warn {
  background: #FFFBEB;
  border-color: #FDE68A;
  border-inline-start: 4px solid var(--color-warning-500);
}
.callout__icon { flex-shrink: 0; color: #B45309; display: grid; place-items: center; margin-top: 2px; }
.callout h2 { font-size: var(--font-size-3xl); }
.callout p { margin-top: var(--space-3); font-size: var(--font-size-md); color: var(--color-neutral-700); max-width: 78ch; }

/* ── Built / being built ────────────────────────────────────────────
   docs/app-implementation.md records which sections of the app are live and
   which are placeholders. Publishing that split is the point of the section. */
.statusgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
.statuscol {
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}
.statuscol__title { margin-bottom: var(--space-5); }
.statuscol__list { list-style: none; display: grid; gap: var(--space-3); }
.statuscol__list li { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--font-size-md); }
.statuscol__list .tick { flex-shrink: 0; color: var(--color-success-500); margin-top: 3px; }
.statuscol__list--muted li { color: var(--color-text-secondary); }
.statuscol__list .dot {
  flex-shrink: 0;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--color-brand-300);
  margin-top: 7px;
}

/* ── Platform availability ──────────────────────────────────────────
   One codebase across Windows, macOS and Linux, at different stages. */
.platformlist { list-style: none; display: grid; gap: 0; margin-top: var(--space-6); }
.platformlist li {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.platformlist li:first-child { border-top: 1px solid var(--color-border); }
.platformlist__name { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); }
.platformlist__status { font-size: var(--font-size-md); color: var(--color-text-secondary); text-align: end; }

/* ══════════════════════════════════════════════════════════════════
   /modes/
   ══════════════════════════════════════════════════════════════════ */

/* ── The two modes ──────────────────────────────────────────────────
   One organization type only: a company can be requesting and providing at the
   same time. The two cards therefore sit side by side as equals rather than as a
   tier and an upgrade. Colours borrow the home page's alternating feature
   panels so the pairing is familiar. */
.modepair { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
.modecard {
  padding: clamp(26px, 3vw, 40px);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.modecard--requestor { background: var(--color-brand-800); color: #fff; }
.modecard--provider { background: var(--color-brand-400); color: var(--color-brand-900); }
.modecard__icon {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-5);
}
.modecard--requestor .modecard__icon { background: rgba(255,255,255,0.14); color: #fff; }
.modecard--provider .modecard__icon { background: rgba(0,22,56,0.14); color: var(--color-brand-900); }
.modecard h3 { font-size: var(--font-size-h2-sm); font-weight: var(--font-weight-extrabold); letter-spacing: var(--letter-spacing-tight); }
.modecard--requestor h3 { color: #fff; }
.modecard__who { margin-top: var(--space-3); font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); }
.modecard--requestor .modecard__who { color: var(--color-brand-100); }
.modecard--provider .modecard__who { color: rgba(0,22,56,0.72); }
.modecard__does { margin-top: var(--space-4); font-size: var(--font-size-md); }
.modecard--requestor .modecard__does { color: rgba(255,255,255,0.85); }
.modecard--provider .modecard__does { color: rgba(0,22,56,0.82); }
.modecard__seeslabel {
  display: block;
  margin-top: var(--space-6); margin-bottom: var(--space-3);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-widest);
  text-transform: uppercase;
}
.modecard--requestor .modecard__seeslabel { color: var(--color-brand-200); }
.modecard--provider .modecard__seeslabel { color: rgba(0,22,56,0.6); }
.modepair__note {
  max-width: 80ch;
  margin-top: var(--space-8);
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
}

/* Section-name tags. These are real destinations from the app's navigation
   registry, so they are set in the same voice as the app rather than as prose. */
.taglist { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tag {
  padding: 4px var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  background: rgba(255,255,255,0.16);
  color: inherit;
}
.modecard--provider .tag { background: rgba(0,22,56,0.12); }
.section--subtle .tag,
.section:not(.section--ink) .rolepanel .tag {
  background: var(--color-brand-50);
  border: 1px solid var(--color-brand-100);
  color: var(--color-brand-800);
}
.tag--plain {
  background: transparent !important;
  border: 1px dashed var(--color-border-strong) !important;
  color: var(--color-text-secondary) !important;
}
/* Chips inside a card. The base .tag is drawn for a dark panel - a translucent
   white fill - which is invisible on a white card, so a card gets the same
   treatment .section--subtle already gives. This is what the "tagcards" block in
   _includes/blocks.njk renders, and it is how the application's own navigation is
   shown on /platform/ without shipping a screenshot that goes stale. */
.cp-card .tag {
  background: var(--color-brand-50);
  border: 1px solid var(--color-brand-100);
  color: var(--color-brand-800);
}

/* ── Role panels ────────────────────────────────────────────────────
   One panel per job. `boundary` - what the role cannot reach - gets its own
   framed block because those limits are the product: they are why the companies
   on either side of a case are willing to use the same network. */
.roles { display: grid; gap: var(--space-6); }
.rolepanel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 40px);
  box-shadow: var(--shadow-sm);
  scroll-margin-top: calc(var(--nav-height) + var(--space-8));
}
/* The four jobs named in the brief - MCC, Part-145, pilots - carry an accent so
   a visitor scanning for their own role finds it. */
.rolepanel--key { border-inline-start: 4px solid var(--color-primary); }
.rolepanel__head { display: flex; gap: var(--space-5); align-items: center; margin-bottom: var(--space-5); }
.rolepanel__icon {
  flex-shrink: 0;
  display: grid; place-items: center;
  width: 54px; height: 54px;
  border-radius: var(--radius-md);
  background: var(--color-brand-800);
  color: #fff;
}
.rolepanel__mode {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-widest);
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 2px;
}
.rolepanel h3 { font-size: var(--font-size-4xl); font-weight: var(--font-weight-extrabold); letter-spacing: var(--letter-spacing-tight); line-height: 1.15; }
.rolepanel__lede { font-size: var(--font-size-xl); color: var(--color-text-secondary); max-width: 86ch; }
.rolepanel__grid {
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(24px, 3vw, 48px);
  margin-top: var(--space-8);
}
.rolepanel__does h4,
.rolepanel__sublabel {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-widest);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-4);
}
.rolepanel__sublabel { margin-top: var(--space-6); }
.rolepanel__does .checklist { margin-bottom: 0; }
.rolepanel__boundary {
  padding: var(--space-5);
  background: var(--color-neutral-50);
  border: 1px solid var(--color-border);
  border-inline-start: 3px solid var(--color-brand-800);
  border-radius: var(--radius-md);
}
.rolepanel__boundarylabel {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-widest);
  text-transform: uppercase;
  color: var(--color-brand-800);
  margin-bottom: var(--space-3);
}
.rolepanel__boundary p { font-size: var(--font-size-md); color: var(--color-text-secondary); }

/* ── Account-health warnings ────────────────────────────────────────
   Quoted exactly from product-surfaces.md §8. Their whole value is that they
   read as a problem to fix rather than as a setting to find, so they are set as
   the app sets them and not rewritten into prose. */
.warnstack { display: grid; gap: var(--space-4); align-content: start; }
.warnstack__item {
  display: flex; gap: var(--space-4); align-items: flex-start;
  padding: var(--space-5);
  background: rgba(245,158,11,0.10);
  border: 1px solid rgba(245,158,11,0.35);
  border-inline-start: 3px solid var(--color-warning-500);
  border-radius: var(--radius-md);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: #fff;
  line-height: 1.45;
}
.warnstack__icon { flex-shrink: 0; color: var(--color-warning-500); margin-top: 1px; }
.warnstack__note { font-size: var(--font-size-sm); color: var(--color-neutral-400); }

/* ══════════════════════════════════════════════════════════════════
   /community/
   ══════════════════════════════════════════════════════════════════ */

/* ── Three ways in ──────────────────────────────────────────────────
   The middle route - a partner adds a company that has never heard of us - is
   the unusual one and the reason the page exists, so it is the one accented. */
.routes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); align-items: stretch; }
.route {
  display: flex; flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 2.6vw, 32px);
  box-shadow: var(--shadow-sm);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.route:hover { border-color: var(--color-brand-300); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.route--key { border-top: 3px solid var(--color-primary); background: var(--color-brand-50); }
.route__tag {
  align-self: flex-start;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-5);
}
.route__icon {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border-radius: var(--radius-md);
  background: var(--color-brand-800);
  color: #fff;
  margin-bottom: var(--space-5);
}
.route h3 { font-size: var(--font-size-2xl); margin-bottom: var(--space-3); line-height: 1.25; }
.route p { font-size: var(--font-size-md); color: var(--color-text-secondary); }

/* ── Claim card ─────────────────────────────────────────────────────
   Repeats the official address, the way /complete-profile/ does. A visitor who
   arrives here from an invitation must be able to confirm where they are without
   trusting the link that brought them. */
.claimcard {
  align-self: start;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: clamp(26px, 3vw, 38px);
  box-shadow: var(--shadow-md);
}
.claimcard__label {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-widest);
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}
.claimcard h3 { font-size: var(--font-size-3xl); font-weight: var(--font-weight-extrabold); letter-spacing: var(--letter-spacing-tight); line-height: 1.2; }
.claimcard p { margin-top: var(--space-4); font-size: var(--font-size-md); color: var(--color-text-secondary); }
.claimcard__cta { width: 100%; justify-content: center; margin-top: var(--space-6); }
.claimcard__note { font-size: var(--font-size-sm); color: var(--color-text-tertiary); }
.claimcard__url {
  display: flex; align-items: center; gap: var(--space-3);
  margin-top: var(--space-5);
  padding: var(--space-3) var(--space-4);
  background: var(--color-neutral-50);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  overflow-x: auto;
  white-space: nowrap;
}
.claimcard__url strong { color: var(--color-brand-900); font-weight: var(--font-weight-bold); }
.claimcard__lock { flex-shrink: 0; color: var(--color-success-500); display: grid; place-items: center; }

/* ── The email label ────────────────────────────────────────────────
   "This is sent by email. Email is not private." is the one sentence on this
   site that must never be softened - it is what makes every other claim
   believable. Warning colour, not brand colour, and no hedging around it. */
.emailnotice {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-inline-start: 4px solid var(--color-warning-500);
  border-radius: var(--radius-md);
}
.emailnotice__icon { flex-shrink: 0; color: #B45309; display: grid; place-items: center; }
.emailnotice__text { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); color: #78350F; }
.emailnotice__meta { margin-inline-start: auto; font-size: var(--font-size-sm); color: #92400E; }

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE
   Breakpoints match main.css - 1100 / 900 / 640. Keep them in step.
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
  .promisebar__inner { grid-template-columns: repeat(2, 1fr); gap: var(--space-6) var(--space-8); }
  .surfaces { grid-template-columns: 1fr; }
  .rolecards { grid-template-columns: repeat(2, 1fr); }
  .routes { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .page-hero__sub { font-size: var(--font-size-lede); }
  /* The sub-navigation cannot stay stuck to a header whose links have collapsed
     into a menu - two sticky bars on a short viewport leaves no page. */
  .subnav { position: static; }
  .closing { flex-direction: column; align-items: flex-start; }
  .closing__actions .btn { width: 100%; justify-content: center; }
  .cp-points--grid { grid-template-columns: 1fr; }
  .splitlist { grid-template-columns: 1fr; }
  .statusgrid { grid-template-columns: 1fr; }
  .modepair { grid-template-columns: 1fr; }
  .rolepanel__grid { grid-template-columns: 1fr; }
  .noticebar__meta, .emailnotice__meta { margin-inline-start: 0; width: 100%; }
  .flowline::before { inset-inline-start: 19px; }
  .flowstep__marker { width: 40px; height: 40px; }
  .flowstep { gap: var(--space-5); }
}

@media (max-width: 640px) {
  .promisebar__inner { grid-template-columns: 1fr; }
  .rolecards { grid-template-columns: 1fr; }
  .page-hero__actions .btn { width: 100%; justify-content: center; }
  .callout { flex-direction: column; }
  .composer__box { flex-wrap: wrap; }
  .composer__placeholder { order: 3; width: 100%; }
  .emailnotice__text { font-size: var(--font-size-xl); }
  .rolepanel__head { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
}

/* ══════════════════════════════════════════════════════════════════
   Section blocks (_includes/blocks.njk)
   Small adjustments for the shapes the structural pages assemble from.
   Everything else those pages use is a component already defined above or
   in main.css - if a block needs more than a few lines here, it probably
   wants to be a real component instead.
   ══════════════════════════════════════════════════════════════════ */

/* A status chip above a card's heading: "Planned", "Already listed". */
.cp-card .chip { display: inline-flex; margin-bottom: var(--space-3); }

/* The callout carries a heading and sometimes a link on these pages, where on
   /apps/ it was a single sentence. */
.callout h3 { font-size: var(--font-size-xl); margin-bottom: var(--space-2); }
.callout p { font-size: var(--font-size-lg); color: var(--color-neutral-700); }
.callout p + p { margin-top: var(--space-3); }
.callout .arrow-link { margin-top: var(--space-4); color: #92400E; }

/* A card that links on, and a split that ends in a button. */
.cp-card .arrow-link { margin-top: var(--space-4); font-size: var(--font-size-md); }