/*
 * For organisations. Values are the design's (design/Able Site Organisations.dc.html);
 * colour only through theme.colors.css. The design reflows one markup with flex-wrap and
 * auto-fit grids, so this page needs no breakpoint of its own.
 */

/* Shared type and blocks */
.og-h1 {
  font-family: "Newsreader", Georgia, serif;
  font-weight: 300;
  font-size: clamp(38px, 4.8vw, 56px);
  line-height: 1.06;
  margin: 0;
  text-wrap: balance;
}
.og-h2 {
  font-family: "Newsreader", Georgia, serif;
  font-weight: 300;
  font-size: clamp(30px, 3.4vw, 42px);
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}
.og-h2-lg {
  font-family: "Newsreader", Georgia, serif;
  font-weight: 300;
  font-size: clamp(32px, 3.8vw, 48px);
  line-height: 1.06;
  margin: 0;
  text-wrap: balance;
}
.og-h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
}
.og-h3-sm {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}
.og-p {
  margin: 0;
  font-size: 18px;
  text-wrap: pretty;
}
.og-small {
  margin: 0;
  font-size: 16px;
  text-wrap: pretty;
}
.og-strong {
  font-weight: 700;
}
.og-measure {
  max-width: 40em;
}
.og-measure-wide {
  max-width: 44em;
}
.og-rule {
  padding-top: 12px;
  border-top: var(--hair) solid var(--divider);
}
.og-sec {
  padding: 48px 20px;
  max-width: 1240px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.og-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Hero */
.og-hero {
  padding: 32px 20px 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: center;
  max-width: 1240px;
  margin: 0 auto;
  width: 100%;
}
.og-hero-text {
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.og-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.og-hero-actions .btn {
  flex: 1 1 auto;
}
.og-hero-actions .og-btn-secondary {
  padding: 0 24px;
}
/* Act on the prices, under the pricing panels. */
.og-pricing-cta {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.og-pricing-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.og-pricing-cta .og-small {
  margin: 0;
}
.og-hero-note {
  margin: 0;
  font-size: 18px;
  text-wrap: pretty;
}
.og-inline-link {
  color: var(--textPrimary);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.og-hero-figure {
  flex: 1 1 320px;
  min-width: 0;
  margin: 0;
}
.og-hero-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 24px;
  border: var(--hair) solid var(--border);
}

/* The six platform cards */
.og-platform {
  padding: 40px 20px;
  background: var(--surface);
  border-top: var(--hair) solid var(--border);
  border-bottom: var(--hair) solid var(--border);
}
.og-platform-grid {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 16px;
}
/* Six cards: two rows of three on a wide screen, never four and a gap. */
@media (min-width: 56.5625em) {
  .og-platform-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.og-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  border-radius: 20px;
  background: var(--background);
  border: var(--hair) solid var(--border);
}
.og-card-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.55;
}
.og-card-body {
  margin: 0;
  color: var(--textSecondary);
}
.og-media {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  overflow: hidden;
  flex: none;
}
.og-media-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.og-pos-ak111 {
  object-position: 30% 50%;
}
.og-pos-beck {
  object-position: 50% 35%;
  transform: scale(1.35);
  transform-origin: 50% 45%;
}
.og-pos-mid {
  object-position: 50% 45%;
}
.og-pos-top {
  object-position: 50% 30%;
}
.og-pos-friends {
  object-position: 60% 45%;
}
.og-legend {
  display: flex;
  gap: 16px;
  margin-top: 4px;
  font-size: 16px;
  flex-wrap: wrap;
}
.og-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.og-glyph-measured {
  width: 9px;
  height: 9px;
  background: var(--textSecondary);
  display: inline-block;
}
.og-glyph-reported {
  width: 9px;
  height: 9px;
  border: 1.5px solid var(--textPrimary);
  border-radius: 50%;
  display: inline-block;
}

/* Family and stakeholders */
.og-family {
  padding: 56px 20px;
  max-width: 1240px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: center;
  justify-content: center;
}
.og-phone {
  flex: none;
  width: 312px;
  max-width: 100%;
}
.og-phone > .device-body {
  transform: scale(var(--s, 0.8));
}
.og-moments-screen {
  position: relative;
  display: flex;
  flex-direction: column;
}
.og-family-text {
  flex: 1 1 340px;
  min-width: 0;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.og-points {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}
.og-points li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 0;
  border-top: var(--hair) solid var(--divider);
}
.og-points .muted {
  text-wrap: pretty;
}
.og-point-title {
  font-weight: 700;
}
/* For aged care: the providers list sits centred in its band. */
.ac-providers .og-family-text {
  margin: 0 auto;
}
/* For aged care: the five doors take the full width, five across from the expanded size. */
.ac-doors .og-family-text {
  max-width: 1240px;
  flex-basis: 100%;
}
@media (min-width: 56.5625em) {
  .ac-doors .og-doors {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* Organisation subscriptions */
.og-pricing {
  padding-bottom: 8px;
}
.og-grid-300 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 16px;
}
.og-grid-320 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 16px;
}
.og-plan {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  border-radius: 24px;
  background: var(--surface);
  border: var(--strong) solid var(--borderStrong);
}
.og-plan-featured {
  border-color: var(--positive);
}
.og-price {
  font-family: "Newsreader", Georgia, serif;
  font-weight: 300;
  font-size: 46px;
  line-height: 1;
}
.og-price span {
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 20px;
}
.og-unit {
  font-weight: 600;
}
.og-tint-note {
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--selectedTint);
  font-weight: 600;
}
.og-tint-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-weight: 400;
}
.og-capacity {
  width: 100%;
  border-collapse: collapse;
  font-size: 17px;
  margin-top: 4px;
}
.og-capacity caption {
  text-align: left;
  font-weight: 700;
  padding-bottom: 6px;
}
.og-capacity tr {
  border-top: var(--hair) solid var(--divider);
}
.og-capacity th {
  text-align: left;
  font-weight: 400;
  padding: 8px 0;
}
.og-capacity td {
  text-align: right;
  font-weight: 700;
  padding: 8px 0;
  font-variant-numeric: tabular-nums;
}
/* Inclusions, grouped under short labels, one column: the panel's text column is too narrow for two. */
.og-term-body.og-inclusions {
  max-width: 44em;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.og-inc-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.og-inc-h {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--textAccent);
}
.og-inclusions > .og-small {
  grid-column: 1 / -1;
}
.og-bullets {
  margin: 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Optional extras */
.og-price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
}
.og-price-sm {
  font-family: "Newsreader", Georgia, serif;
  font-weight: 300;
  font-size: 34px;
  line-height: 1;
}
.og-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.og-pair-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 12px;
}
.og-community-prices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 12px 20px;
}
.og-community-price {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.og-possibilities {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 24px;
  padding: 16px 20px;
  border-radius: 16px;
  background: var(--surface);
  border: var(--hair) solid var(--border);
}

/* The admin console */
.og-report {
  padding: 56px 20px 8px;
}
.og-head-console {
  gap: 10px;
}
.og-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.og-tab {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  padding: 0 20px;
  border-radius: 100px;
  font: inherit;
  font-weight: 700;
  font-size: 17px;
  cursor: pointer;
  color: var(--textPrimary);
  background: var(--surface);
  border: var(--strong) solid var(--borderStrong);
}
.og-tab:hover {
  background: var(--hoverTint);
}
.og-tab[aria-selected="true"] {
  color: var(--onPrimaryAction);
  background: var(--primaryAction);
  border-color: var(--primaryAction);
}
.og-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Drawn at 1280 x 800 and reduced whole; site.js sets --s from the rendered width. */
.og-console {
  width: 100%;
  aspect-ratio: 1280 / 800;
  position: relative;
  /* Without script the fallback scale can be too large for a phone; never scroll the page. */
  overflow: hidden;
}
.og-console-body {
  position: absolute;
  top: 0;
  left: 0;
  width: 1280px;
  height: 800px;
  transform-origin: 0 0;
  transform: scale(var(--s, 0.9));
}
.og-console-caption {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  font-size: 16px;
  color: var(--textSecondary);
}
.og-example-pill {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1.5px solid var(--textPrimary);
  color: var(--textPrimary);
  font-weight: 700;
}
.og-capabilities {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 0 32px;
}
.og-capabilities li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 0;
  border-top: var(--hair) solid var(--border);
}
.og-cap-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.og-cap-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.55;
}
.og-status {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  flex: none;
  border: 1.5px solid var(--textPrimary);
}
.og-status-now {
  background: var(--selectedTint);
  border-color: var(--positive);
}
.og-status-dev {
  background: var(--sand);
  border-color: var(--borderStrong);
}

/* Contact */
.og-contact {
  padding: 48px 20px;
  max-width: 1240px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}
.og-contact-intro {
  flex: 1 1 280px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.og-steps {
  margin: 0;
  padding-left: 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.og-form {
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  border-radius: 24px;
  background: var(--surface);
  border: var(--hair) solid var(--border);
}
.og-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.og-field > label,
.og-fieldset legend {
  font-weight: 700;
  font-size: 18px;
}
.og-optional {
  font-weight: 400;
  color: var(--textSecondary);
}
.og-input {
  min-height: 52px;
  padding: 0 14px;
  border-radius: 12px;
  border: var(--strong) solid var(--borderStrong);
  background: var(--surface);
  color: var(--textPrimary);
  font: inherit;
  font-weight: 400;
  font-size: 18px;
  width: 100%;
}
.og-textarea {
  padding: 10px 8px;
  resize: vertical;
}
.og-input[aria-invalid="true"] {
  border-color: var(--error);
}
.og-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.og-fieldset legend {
  padding: 0;
  margin-bottom: 6px;
}
.og-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.og-chip {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border-radius: 100px;
  border: var(--strong) solid var(--borderStrong);
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
}
/* The native radio is kept for its semantics and keyboard behaviour but drawn as the design's
   plain pill; the selected pill gains a tick as well as the tint and border. */
.og-chip input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}
.og-chip {
  position: relative;
}
.og-chip .og-tick {
  display: none;
  flex: none;
}
.og-chip:has(input:checked) .og-tick {
  display: block;
}
.og-chip:has(input:checked) {
  background: var(--selectedTint);
  border-color: var(--positive);
}
.og-chip:has(input:focus-visible) {
  outline: 2px solid var(--focusRing);
  outline-offset: 2px;
}
.og-form .error-note {
  margin: 0;
}
.og-err-icon {
  flex: none;
}

/*
 * The drawings: the example admin console (three panels, drawn at 1280 x 800) and the
 * Moments phone screen. Class names are generated from the design's drawing, one per
 * distinct style; they are illustration only and sit inside aria-hidden bodies.
 */
.ogc1 {
  width: 1280px;
  height: 800px;
  background: var(--background);
  color: var(--textPrimary);
  border: var(--hair) solid var(--borderStrong);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  font-family: "Hanken Grotesk", system-ui, sans-serif;
}
.ogc2 {
  width: 232px;
  flex: none;
  background: var(--surface);
  border-right: var(--hair) solid var(--border);
  padding: 18px 10px;
  display: flex;
  flex-direction: column;
}
.ogc3 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px;
  margin-bottom: 8px;
}
.ogc4 {
  fill: var(--markClay);
}
.ogc5 {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  white-space: nowrap;
}
.ogc6 {
  font-weight: 300;
  color: var(--wellness);
}
.ogc7 {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--textSecondary);
  margin-top: 4px;
}
.ogc8 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--textSecondary);
  padding: 0 14px;
  margin: 14px 0 4px;
}
.ogc9 {
  min-height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  position: relative;
  background: var(--sand);
}
.ogc10 {
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  background: var(--positive);
  border-radius: 0 3px 3px 0;
}
.ogc11 {
  flex: none;
  color: var(--textPrimary);
}
.ogc12 {
  font-size: 16px;
  font-weight: 700;
  color: var(--textPrimary);
  flex: 1;
}
.ogc13 {
  min-height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  position: relative;
}
.ogc14 {
  flex: none;
  color: var(--textSecondary);
}
.ogc15 {
  font-size: 16px;
  font-weight: 600;
  color: var(--textSecondary);
  flex: 1;
}
.ogc16 {
  font-size: 13px;
  font-weight: 700;
  color: var(--textSecondary);
}
.ogc17 {
  flex: 1;
}
.ogc18 {
  padding: 14px 6px 0;
  border-top: var(--hair) solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}
.ogc19 {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  flex: none;
  background: var(--skyTint);
  color: var(--textPrimary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  border: var(--strong) solid var(--fillEdge);
}
.ogc20 {
  display: block;
  font-size: 15px;
  font-weight: 700;
}
.ogc21 {
  display: block;
  font-size: 13px;
  color: var(--textSecondary);
}
.ogc22 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.ogc23 {
  height: 56px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 22px;
  background: var(--surface);
  border-bottom: var(--hair) solid var(--border);
}
.ogc24 {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  background: var(--selectedTint);
  border: 1.5px solid var(--positive);
}
.ogc25 {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  background: var(--surface);
  border: 1.5px solid var(--borderStrong);
}
.ogc26 {
  font-size: 14px;
  color: var(--textSecondary);
  font-weight: 600;
  margin-left: 4px;
}
.ogc27 {
  font-size: 14px;
  color: var(--textSecondary);
  font-weight: 600;
}
.ogc28 {
  flex: 1;
  padding: 20px 22px 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
}
.ogc29 {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}
.ogc30 {
  font-family: "Newsreader", Georgia, serif;
  font-weight: 300;
  font-size: 32px;
  margin-top: 2px;
}
.ogc31 {
  display: flex;
  gap: 8px;
}
.ogc32 {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  border: 1.5px solid var(--borderStrong);
}
.ogc33 {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  background: var(--primaryAction);
  color: var(--onPrimaryAction);
}
.ogc34 {
  display: flex;
  gap: 12px;
}
.ogc35 {
  flex: 1;
  min-width: 0;
  background: var(--surface);
  border: var(--hair) solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
}
.ogc36 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--textSecondary);
}
.ogc37 {
  font-family: "Newsreader", Georgia, serif;
  font-weight: 300;
  font-size: 38px;
  line-height: 1;
  margin-top: 6px;
}
.ogc38 {
  font-size: 13px;
  color: var(--textSecondary);
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ogc39 {
  width: 10px;
  height: 10px;
  background: var(--textSecondary);
  display: inline-block;
  flex: none;
}
.ogc40 {
  width: 10px;
  height: 10px;
  border: 1.5px solid var(--textPrimary);
  border-radius: 50%;
  display: inline-block;
  flex: none;
}
.ogc41 {
  display: flex;
  gap: 14px;
  flex: 1;
  min-height: 0;
}
.ogc42 {
  background: var(--surface);
  border: var(--hair) solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  flex: 0 0 330px;
}
.ogc43 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ogc44 {
  font-size: 15px;
  font-weight: 700;
}
.ogc45 {
  font-size: 13px;
  color: var(--textSecondary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.ogc46 {
  width: 10px;
  height: 10px;
  background: var(--positive);
  display: inline-block;
  flex: none;
}
.ogc47 {
  position: relative;
  height: 222px;
  display: flex;
  align-items: flex-end;
  gap: 14px;
  padding: 0 4px;
  border-bottom: 1px solid var(--borderStrong);
}
.ogc48 {
  flex: 1;
  height: 100%;
  display: flex;
  gap: 6px;
  justify-content: center;
  align-items: flex-end;
}
.ogc49 {
  flex: 1;
  max-width: 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.ogc50 {
  font-size: 12px;
  font-weight: 700;
}
.ogc51 {
  width: 100%;
  height: 160px;
  background: var(--positive);
  border-radius: 6px 6px 0 0;
  border: var(--strong) solid var(--fillEdge);
  border-bottom: none;
}
.ogc52 {
  width: 100%;
  height: 60px;
  border: 1.5px dashed var(--textPrimary);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  box-sizing: border-box;
}
.ogc53 {
  width: 100%;
  height: 173px;
  background: var(--positive);
  border-radius: 6px 6px 0 0;
  border: var(--strong) solid var(--fillEdge);
  border-bottom: none;
}
.ogc54 {
  width: 100%;
  height: 68px;
  border: 1.5px dashed var(--textPrimary);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  box-sizing: border-box;
}
.ogc55 {
  width: 100%;
  height: 163px;
  background: var(--positive);
  border-radius: 6px 6px 0 0;
  border: var(--strong) solid var(--fillEdge);
  border-bottom: none;
}
.ogc56 {
  width: 100%;
  height: 63px;
  border: 1.5px dashed var(--textPrimary);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  box-sizing: border-box;
}
.ogc57 {
  width: 100%;
  height: 190px;
  background: var(--positive);
  border-radius: 6px 6px 0 0;
  border: var(--strong) solid var(--fillEdge);
  border-bottom: none;
}
.ogc58 {
  width: 100%;
  height: 72px;
  border: 1.5px dashed var(--textPrimary);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  box-sizing: border-box;
}
.ogc59 {
  display: flex;
  gap: 14px;
  padding: 6px 4px 0;
}
.ogc60 {
  flex: 1;
  text-align: center;
  font-size: 12px;
  color: var(--textSecondary);
}
.ogc61 {
  background: var(--surface);
  border: var(--hair) solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  flex: 1;
  min-width: 0;
}
.ogc62 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ogc63 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ogc64 {
  font-size: 13px;
  color: var(--textSecondary);
}
.ogc65 {
  display: grid;
  grid-template-columns: 150px 50px 44px minmax(0, 1fr) minmax(0, 1fr) 56px 64px;
  gap: 8px;
  align-items: center;
  padding: 8px 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--textSecondary);
  border-bottom: var(--hair) solid var(--divider);
}
.ogc66 {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ogc67 {
  display: grid;
  grid-template-columns: 150px 50px 44px minmax(0, 1fr) minmax(0, 1fr) 56px 64px;
  gap: 8px;
  align-items: center;
  min-height: 46px;
  padding: 0 6px;
  border-bottom: var(--hair) solid var(--divider);
  background: var(--selectedTint);
  border-radius: 10px;
}
.ogc68 {
  font-size: 14px;
}
.ogc69 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ogc70 {
  flex: 1;
  height: 10px;
  border-radius: 5px;
  background: var(--recess);
  overflow: hidden;
  min-width: 0;
}
.ogc71 {
  display: block;
  height: 100%;
  width: 86%;
  background: var(--positive);
}
.ogc72 {
  width: 26px;
  text-align: right;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ogc73 {
  display: block;
  height: 100%;
  width: 78%;
  background: transparent;
  border: 1.5px solid var(--textPrimary);
  border-radius: 5px;
  box-sizing: border-box;
}
.ogc74 {
  font-size: 14px;
  font-weight: 700;
}
.ogc75 {
  display: grid;
  grid-template-columns: 150px 50px 44px minmax(0, 1fr) minmax(0, 1fr) 56px 64px;
  gap: 8px;
  align-items: center;
  min-height: 46px;
  padding: 0 6px;
  border-bottom: var(--hair) solid var(--divider);
}
.ogc76 {
  display: block;
  height: 100%;
  width: 94%;
  background: var(--positive);
}
.ogc77 {
  display: block;
  height: 100%;
  width: 55%;
  background: transparent;
  border: 1.5px solid var(--textPrimary);
  border-radius: 5px;
  box-sizing: border-box;
}
.ogc78 {
  display: block;
  height: 100%;
  width: 38%;
  background: var(--positive);
}
.ogc79 {
  display: block;
  height: 100%;
  width: 73%;
  background: transparent;
  border: 1.5px solid var(--textPrimary);
  border-radius: 5px;
  box-sizing: border-box;
}
.ogc80 {
  display: block;
  height: 100%;
  width: 71%;
  background: var(--positive);
}
.ogc81 {
  display: block;
  height: 100%;
  width: 68%;
  background: transparent;
  border: 1.5px solid var(--textPrimary);
  border-radius: 5px;
  box-sizing: border-box;
}
.ogc82 {
  display: block;
  height: 100%;
  width: 83%;
  background: var(--positive);
}
.ogc83 {
  display: block;
  height: 100%;
  width: 83%;
  background: transparent;
  border: 1.5px solid var(--textPrimary);
  border-radius: 5px;
  box-sizing: border-box;
}
.ogc84 {
  display: block;
  height: 100%;
  width: 40%;
  background: var(--positive);
}
.ogc85 {
  display: block;
  height: 100%;
  width: 40%;
  background: transparent;
  border: 1.5px solid var(--textPrimary);
  border-radius: 5px;
  box-sizing: border-box;
}
.ogc86 {
  background: var(--surface);
  border: var(--hair) solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  flex: 1.3;
  min-width: 0;
}
.ogc87 {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  height: 192px;
  padding: 0 4px;
  border-bottom: 1px solid var(--borderStrong);
}
.ogc88 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.ogc89 {
  width: 100%;
  height: 161px;
  border-radius: 6px 6px 0 0;
  box-sizing: border-box;
  background: var(--positive);
  border: var(--strong) solid var(--fillEdge);
  border-bottom: none;
}
.ogc90 {
  width: 100%;
  height: 90px;
  border-radius: 6px 6px 0 0;
  box-sizing: border-box;
  background: var(--positive);
  border: var(--strong) solid var(--fillEdge);
  border-bottom: none;
}
.ogc91 {
  width: 100%;
  height: 57px;
  border-radius: 6px 6px 0 0;
  box-sizing: border-box;
  background: var(--positive);
  border: var(--strong) solid var(--fillEdge);
  border-bottom: none;
}
.ogc92 {
  width: 100%;
  height: 99px;
  border-radius: 6px 6px 0 0;
  box-sizing: border-box;
  background: var(--positive);
  border: var(--strong) solid var(--fillEdge);
  border-bottom: none;
}
.ogc93 {
  width: 100%;
  height: 146px;
  border-radius: 6px 6px 0 0;
  box-sizing: border-box;
  border: 1.5px dashed var(--textPrimary);
  border-bottom: none;
}
.ogc94 {
  display: flex;
  gap: 12px;
  padding: 6px 4px 0;
}
.ogc95 {
  flex: 1;
  text-align: center;
  font-size: 13px;
  color: var(--textSecondary);
}
.ogc96 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 6px;
}
.ogc97 {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 10px;
  align-items: center;
  font-size: 14px;
}
.ogc98 {
  display: block;
  height: 100%;
  width: 95%;
  background: var(--positive);
}
.ogc99 {
  display: block;
  height: 100%;
  width: 85%;
  background: var(--positive);
}
.ogc100 {
  display: block;
  height: 100%;
  width: 35%;
  background: var(--positive);
}
.ogc101 {
  display: flex;
  justify-content: space-between;
}
.ogc102 {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ogc103 {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex: none;
  background: var(--clayTint);
  color: var(--textPrimary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  border: var(--strong) solid var(--fillEdge);
}
.ogc104 {
  width: 62px;
  font-size: 14px;
  font-weight: 700;
}
.ogc105 {
  flex: 1;
  height: 10px;
  background: var(--recess);
  border-radius: 5px;
  overflow: hidden;
}
.ogc106 {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--positive);
}
.ogc107 {
  width: 22px;
  text-align: right;
  font-size: 13px;
  font-weight: 700;
}
.ogc108 {
  width: 150px;
  font-size: 13px;
  color: var(--textSecondary);
}
.ogc109 {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex: none;
  background: var(--skyTint);
  color: var(--textPrimary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  border: var(--strong) solid var(--fillEdge);
}
.ogc110 {
  display: block;
  height: 100%;
  width: 88%;
  background: var(--positive);
}
.ogc111 {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex: none;
  background: var(--positiveTint);
  color: var(--textPrimary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  border: var(--strong) solid var(--fillEdge);
}
.ogc112 {
  display: block;
  height: 100%;
  width: 75%;
  background: var(--positive);
}
.ogc113 {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex: none;
  background: var(--sand);
  color: var(--textPrimary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  border: var(--strong) solid var(--fillEdge);
}
.ogc114 {
  display: block;
  height: 100%;
  width: 54%;
  background: var(--positive);
}
.ogc115 {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex: none;
  background: var(--selectedTint);
  color: var(--textPrimary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  border: var(--strong) solid var(--fillEdge);
}
.ogc116 {
  display: block;
  height: 100%;
  width: 42%;
  background: var(--positive);
}
.ogc117 {
  margin-top: 6px;
  padding: 12px;
  border-radius: 12px;
  background: var(--recess);
  font-size: 14px;
}
.ogc118 {
  flex: 1;
  padding: 20px 22px 0;
  display: flex;
  gap: 14px;
  overflow: hidden;
}
.ogc119 {
  background: var(--surface);
  border: var(--hair) solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  flex: 0 0 220px;
}
.ogc120 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ogc121 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 6px;
}
.ogc122 {
  display: flex;
  flex-direction: column;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--selectedTint);
  border: 1.5px solid var(--positive);
}
.ogc123 {
  display: flex;
  flex-direction: column;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1.5px solid transparent;
}
.ogc124 {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--textAccent);
}
.ogc125 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ogc126 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.ogc127 {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  border-bottom: var(--hair) solid var(--divider);
}
.ogc128 {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex: none;
  background: var(--clayTint);
  color: var(--textPrimary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  border: var(--strong) solid var(--fillEdge);
}
.ogc129 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--successTint);
  color: var(--successText);
}
.ogc130 {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex: none;
  background: var(--skyTint);
  color: var(--textPrimary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  border: var(--strong) solid var(--fillEdge);
}
.ogc131 {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex: none;
  background: var(--positiveTint);
  color: var(--textPrimary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  border: var(--strong) solid var(--fillEdge);
}
.ogc132 {
  color: var(--textPrimary);
}
.ogc133 {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex: none;
  background: var(--sand);
  color: var(--textPrimary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  border: var(--strong) solid var(--fillEdge);
}
.ogc134 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--warningTint);
  color: var(--warningText);
}
.ogc135 {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--recess);
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.ogc136 {
  color: var(--textSecondary);
}
.ogc137 {
  font-size: 13px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1.5px solid var(--borderStrong);
}
.ogc138 {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex: none;
  background: var(--selectedTint);
  color: var(--textPrimary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  border: var(--strong) solid var(--fillEdge);
}
.ogc139 {
  margin-top: 8px;
  font-size: 13px;
  color: var(--textSecondary);
}
.ogm1 {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: 55% 55%;
  border-radius: 14px;
  height: auto;
}
.ogm2 {
  display: block;
  width: 72px;
  height: 48px;
  object-fit: cover;
  border-radius: 10px;
}
.ogm3 {
  display: block;
  width: 112px;
  height: 63px;
  object-fit: cover;
  border-radius: 10px;
}
.ogm4 {
  flex: none;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  font-size: 15px;
  font-weight: 700;
}
.ogm5 {
  width: 96px;
  height: 28px;
  border-radius: 14px;
  background: #1a161c;
}
.ogm6 {
  width: 24px;
}
.ogm7 {
  flex: none;
  padding: 6px 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ogm8 {
  font-family: "Newsreader", Georgia, serif;
  font-weight: 300;
  font-size: 34px;
  line-height: 1.1;
}
.ogm9 {
  font-size: 16px;
  color: var(--textSecondary);
}
.ogm10 {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ogm11 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: 22px;
  background: var(--surface);
  border: var(--hair) solid var(--border);
}
.ogm12 {
  font-size: 15px;
  font-weight: 700;
  color: var(--textSecondary);
}
.ogm13 {
  margin: 0;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 600;
  text-wrap: pretty;
}
.ogm14 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px;
  border-radius: 14px;
  background: var(--background);
  border: var(--hair) solid var(--border);
}
.ogm15 {
  position: relative;
  flex: none;
}
.ogm16 {
  position: absolute;
  left: 4px;
  bottom: 4px;
  width: 22px;
  height: 14px;
  border-radius: 3px;
  background: #4c6b57;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ogm17 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.ogm18 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--textAccent);
}
.ogm19 {
  font-size: 15px;
  font-weight: 700;
}
.ogm20 {
  flex: none;
  margin-right: 4px;
}
.ogm21 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--textSecondary);
}
.ogm22 {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 14px;
  background: var(--positiveTint);
  color: var(--textPrimary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}
.ogm23 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ogm24 {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  border-radius: 100px;
  font-weight: 700;
  font-size: 15px;
  background: var(--surface);
  border: var(--strong) solid var(--borderStrong);
}
.ogm25 {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  border-radius: 100px;
  font-weight: 700;
  font-size: 15px;
  background: var(--selectedTint);
  border: var(--strong) solid var(--positive);
}
.ogm26 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--background);
  border: var(--hair) solid var(--border);
  font-size: 15px;
  line-height: 1.35;
}
.ogm27 {
  font-weight: 700;
}
.ogm28 {
  min-height: 44px;
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  padding: 0 16px;
  border-radius: 100px;
  font-weight: 700;
  border: var(--strong) solid var(--borderStrong);
}
.ogm29 {
  display: flex;
  gap: 12px;
  align-items: center;
}
.ogm30 {
  position: absolute;
  left: 6px;
  bottom: 6px;
  width: 28px;
  height: 18px;
  border-radius: 4px;
  background: #4c6b57;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ogm31 {
  font-size: 15px;
  color: var(--textSecondary);
  line-height: 1.35;
}
.ogm32 {
  font-weight: 600;
  color: var(--textSecondary);
}
.ogm33 {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  border-radius: 100px;
  border: var(--strong) solid var(--borderStrong);
  background: var(--background);
  color: var(--textSecondary);
  font-size: 15px;
}
.ogm34 {
  flex: none;
  display: flex;
  gap: 4px;
  padding: 8px 10px 22px;
  background: var(--surface);
  border-top: var(--hair) solid var(--border);
}
.ogm35 {
  flex: 1;
  min-width: 0;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100px;
  font-weight: 700;
  font-size: 14px;
}
.ogm36 {
  flex: 1;
  min-width: 0;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100px;
  font-weight: 700;
  font-size: 14px;
  background: var(--selectedTint);
  border: var(--strong) solid var(--positive);
}

/* After a successful send: the form is replaced by this, and focus moves to its heading. */
.og-sent {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  border-radius: 24px;
  background: var(--successTint);
  color: var(--successText);
  border: var(--strong) solid var(--fillEdge);
}
.og-sent-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
}
.og-sent .og-p {
  color: var(--textPrimary);
}
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Terms for every option: one panel, rows stacked, on the recessed ground rather than the
   option cards' white, so nothing lines up one-to-one with the three options above. From the
   expanded breakpoint each row sets its heading beside its text. */
.og-terms {
  display: flex;
  flex-direction: column;
  padding: 4px 24px;
  border-radius: 24px;
  background: var(--recess);
  border: var(--hair) solid var(--border);
}
.og-term {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 0;
}
.og-term + .og-term {
  border-top: var(--hair) solid var(--border);
}
.og-term strong {
  font-weight: 700;
}
.og-term-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 44em;
}
@media (min-width: 56.5625em) {
  .og-term {
    display: grid;
    grid-template-columns: minmax(200px, 300px) 1fr;
    gap: 24px;
  }
}

/* "Learn more" on each platform card, and the panel it opens. The button sits at the card's
   foot; the card lifts its border on hover so the whole card reads as the thing to open. */
.og-card .og-more {
  margin-top: auto;
  align-self: flex-start;
}
.og-card:has(.og-more:hover) {
  border-color: var(--borderStrong);
}
.og-dialog {
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  border-radius: 24px;
  border: var(--strong) solid var(--border);
  background: var(--surface);
  color: var(--textPrimary);
  box-shadow: var(--shadow2);
  overflow: auto;
}
.og-dialog::backdrop {
  background: rgba(26, 22, 28, 0.62);
}
.og-d-inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
}
.og-d-inner > p {
  margin: 0;
}
.og-d-close {
  font-size: 16px;
  padding: 0 16px;
}
.og-d-title {
  margin: 0;
  font-family: "Newsreader", Georgia, serif;
  font-weight: 300;
  font-size: clamp(28px, 3vw, 36px);
  line-height: 1.1;
}
.og-d-list,
.og-d-steps {
  margin: 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.og-d-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 4px;
}
.og-doors {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 124px), 1fr));
  gap: 12px;
}
.og-door {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border-radius: 16px;
  background: var(--background);
  border: var(--hair) solid var(--border);
}
.og-door-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center 40%;
  border-radius: 10px;
}
.og-door .strong {
  font-weight: 700;
  font-size: 18px;
}
.og-d-report {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--background);
  border: var(--hair) solid var(--border);
}
.og-d-report figcaption {
  display: flex;
  flex-direction: column;
}
.og-d-report p {
  margin: 0;
}
.og-report-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}
.og-report-table th,
.og-report-table td {
  text-align: left;
  padding: 10px 8px;
  border-bottom: var(--hair) solid var(--border);
}
.og-report-table td {
  font-weight: 700;
  white-space: nowrap;
}
.og-report-table td > span {
  margin-right: 8px;
}

/* A card photo that opens the card's panel (set by organisations.js). */
.og-media[data-opens] {
  cursor: pointer;
}
.og-media[data-opens]:hover img {
  filter: brightness(1.04);
  outline: var(--strong) solid var(--borderStrong);
  outline-offset: 2px;
}