/* Telegrade public site (WP 2.11). Tokens only (--tg-*), rem/em units, logical properties, em media queries;
   everything reflows at 360 px / 200 % text (WCAG 1.4.4, 1.4.10). The design system (telegrade.css) is loaded first. */

/* ---- page scaffolding ---- */
/* Every public page brings its own .tg-container, so the layout's main adds no width or gutter of its own: pages line up with the
   header and the footer, and a section's background can run the width of the window. */
.tg-marketing__main {
  max-inline-size: none;
  padding: 0;
}

.pub-page {
  padding-block: var(--tg-space-8) var(--tg-space-16);
}

.pub-flow {
  display: flex;
  flex-direction: column;
  gap: var(--tg-space-6);
}

.pub-section {
  padding-block: var(--tg-space-10);
}

.pub-section h2 {
  margin-block: 0 var(--tg-space-5);
}

.pub-section + .pub-section {
  border-block-start: var(--tg-border-width) solid var(--tg-color-border);
}

.pub-section--sunken {
  background: var(--tg-color-surface-sunken);
}

.pub-section--accent {
  background: var(--tg-color-accent-subtle);
  color: var(--tg-color-on-accent-subtle);
  border-radius: var(--tg-radius-lg);
  padding-inline: var(--tg-space-6);
}

.pub-eyebrow {
  font-size: var(--tg-text-sm);
  font-weight: var(--tg-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tg-color-accent);
  margin-block: 0 var(--tg-space-2);
}

/* ---- home: the opening, whose object is a real table: a sample gradebook that explains each grade. It is the page's one
   loud element and hangs over the next section, so everything around it stays quiet. ---- */
.pub-opening {
  background: var(--tg-color-surface);
  padding-block-start: var(--tg-space-12);
}

.pub-opening__text {
  display: grid;
  gap: var(--tg-space-6) var(--tg-space-12);
  grid-template-columns: minmax(0, 1fr);
  margin-block-end: var(--tg-space-10);
}

@media (min-width: 62em) {
  .pub-opening__text {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: end;
  }
}

/* The vw term only bounds it on a narrow viewport; the rem maximum follows the reader's text size. */
.pub-opening__title {
  margin: 0;
  max-inline-size: 18ch;
  font-size: clamp(1.625rem, 1rem + 5.5vw, 3.75rem);
  font-weight: var(--tg-weight-bold);
  letter-spacing: -0.025em;
  line-height: 1.08;
  overflow-wrap: anywhere;
  hyphens: auto;
  text-wrap: balance;
}

.pub-opening__side {
  display: flex;
  flex-direction: column;
  gap: var(--tg-space-4);
}

.pub-opening__lead {
  margin: 0;
  font-size: var(--tg-text-lg);
  line-height: var(--tg-leading-body);
}

.pub-opening__note {
  margin: 0;
}

.pub-sheet-frame {
  position: relative;
  margin-block-end: calc(-1 * var(--tg-space-12));
  padding: var(--tg-space-5);
  border: var(--tg-border-width) solid var(--tg-color-border);
  border-radius: var(--tg-radius-lg);
  background: var(--tg-color-surface-raised);
  box-shadow: var(--tg-shadow-lg);
}

.pub-sheet {
  inline-size: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.pub-sheet__caption {
  padding-block-end: var(--tg-space-4);
  color: var(--tg-color-text-muted);
  font-size: var(--tg-text-sm);
  font-weight: var(--tg-weight-regular);
  text-align: start;
}

.pub-sheet th,
.pub-sheet td {
  padding-block: var(--tg-space-3);
  padding-inline: var(--tg-space-3);
  border: 0;
  text-align: start;
  vertical-align: baseline;
}

.pub-sheet thead th {
  border-block-end: 0.125rem solid var(--tg-color-text);
  font-size: var(--tg-text-sm);
  font-weight: var(--tg-weight-semibold);
}

.pub-sheet tbody tr + tr > * {
  border-block-start: var(--tg-border-width) solid var(--tg-color-border);
}

.pub-sheet__student {
  font-weight: var(--tg-weight-medium);
  white-space: nowrap;
}

.pub-sheet th.pub-sheet__number,
.pub-sheet td.pub-sheet__number {
  text-align: end;
  white-space: nowrap;
}

.pub-sheet__flag {
  display: block;
  color: var(--tg-color-text-muted);
  font-size: var(--tg-text-xs);
  line-height: var(--tg-leading-tight);
}

.pub-sheet__dropped {
  color: var(--tg-color-text-muted);
  text-decoration-color: var(--tg-color-danger-text);
  text-decoration-thickness: 0.125rem;
}

.pub-sheet th.pub-sheet__grade,
.pub-sheet td.pub-sheet__grade {
  background: var(--tg-color-accent-subtle);
  color: var(--tg-color-on-accent-subtle);
  font-weight: var(--tg-weight-bold);
}

/* The teacher's margin: the column that makes this a gradebook that explains itself. */
.pub-sheet th.pub-sheet__why,
.pub-sheet td.pub-sheet__why {
  padding-inline-start: var(--tg-space-5);
  border-inline-start: 0.125rem solid var(--tg-color-accent);
}

.pub-sheet td.pub-sheet__why {
  color: var(--tg-color-text);
  font-size: var(--tg-text-sm);
  line-height: var(--tg-leading-snug);
}

/* Below this the seven columns do not fit: each student becomes a block, with the name and the grade on one line, the four marks on
   the next and the note under them. The explicit table roles keep what a screen reader announces. */
@media (width < 62em) {
  .pub-sheet-frame {
    padding: var(--tg-space-4);
  }

  .pub-sheet,
  .pub-sheet caption,
  .pub-sheet tbody {
    display: block;
  }

  .pub-sheet thead {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .pub-sheet tbody tr {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--tg-space-3) var(--tg-space-2);
    padding-block: var(--tg-space-4);
  }

  .pub-sheet tbody tr:last-child {
    padding-block-end: 0;
  }

  .pub-sheet tbody tr + tr {
    border-block-start: var(--tg-border-width) solid var(--tg-color-border);
  }

  .pub-sheet tbody tr + tr > * {
    border-block-start: 0;
  }

  .pub-sheet tbody th,
  .pub-sheet tbody td {
    min-inline-size: 0;
    padding: 0;
  }

  .pub-sheet__student {
    grid-column: 1 / span 3;
    grid-row: 1;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .pub-sheet tbody td.pub-sheet__number {
    text-align: start;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .pub-sheet tbody td.pub-sheet__number::before {
    content: attr(data-label);
    display: block;
    color: var(--tg-color-text-muted);
    font-size: var(--tg-text-xs);
    font-weight: var(--tg-weight-medium);
  }

  .pub-sheet tbody td.pub-sheet__grade {
    grid-column: 4;
    grid-row: 1;
    padding: var(--tg-space-1);
    border-radius: var(--tg-radius-sm);
  }

  .pub-sheet tbody td.pub-sheet__grade::before {
    color: inherit;
  }

  .pub-sheet tbody td.pub-sheet__why {
    grid-column: 1 / -1;
    padding-inline-start: var(--tg-space-3);
  }
}

@media (forced-colors: active) {
  .pub-sheet__dropped {
    text-decoration-color: CanvasText;
  }

  .pub-sheet td.pub-sheet__why,
  .pub-sheet th.pub-sheet__why {
    border-inline-start-color: CanvasText;
  }
}

/* ---- home: a term, the page's one sequence. The line is the term; the last point is filled because it ends there. ---- */
.pub-term-section {
  padding-block: var(--tg-space-16);
  border-block-start: var(--tg-border-width) solid var(--tg-color-border);
}

.pub-home-heading {
  margin-block: 0 var(--tg-space-8);
  max-inline-size: 36ch;
  font-size: var(--tg-text-3xl);
  font-weight: var(--tg-weight-bold);
  letter-spacing: -0.015em;
  line-height: var(--tg-leading-tight);
  text-wrap: balance;
}

.pub-home-heading--small {
  margin-block-end: var(--tg-space-3);
  font-size: var(--tg-text-2xl);
}

.pub-term {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pub-term__step {
  display: grid;
  gap: var(--tg-space-1) var(--tg-space-8);
  grid-template-columns: minmax(0, 1fr);
  position: relative;
  padding-block-end: var(--tg-space-8);
  padding-inline-start: var(--tg-space-6);
  border-inline-start: 0.125rem solid var(--tg-color-border-strong);
}

.pub-term__step:last-child {
  padding-block-end: 0;
}

.pub-term__step::before {
  content: "";
  position: absolute;
  inset-block-start: 0.45em;
  inset-inline-start: -0.4375rem;
  inline-size: 0.75rem;
  block-size: 0.75rem;
  border: 0.125rem solid var(--tg-color-accent);
  border-radius: var(--tg-radius-full);
  background: var(--tg-color-canvas);
}

.pub-term__step:last-child::before {
  background: var(--tg-color-accent);
}

.pub-term__when {
  margin: 0;
  color: var(--tg-color-text-muted);
  font-weight: var(--tg-weight-medium);
}

.pub-term__what {
  min-inline-size: 0;
}

.pub-term__title {
  margin: 0 0 var(--tg-space-1);
  font-size: var(--tg-text-xl);
  font-weight: var(--tg-weight-semibold);
}

.pub-term__body {
  margin: 0;
  max-inline-size: 62ch;
}

@media (min-width: 62em) {
  .pub-term__step {
    grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  }
}

@media (forced-colors: active) {
  .pub-term__step::before {
    border-color: CanvasText;
    background: Canvas;
  }

  .pub-term__step:last-child::before {
    background: CanvasText;
  }
}

/* ---- home: the plain sections after it ---- */
/* ---- editions (ADR 0041): one product, three audiences, each with its illustration ---- */
.pub-home-lead {
  margin-block: calc(-1 * var(--tg-space-5)) var(--tg-space-8);
  max-inline-size: var(--tg-measure);
  font-size: var(--tg-text-lg);
  line-height: var(--tg-leading-body);
  color: var(--tg-color-text-muted);
}

/* The sample gradebook overhangs the opening by --tg-space-12; the editions start below it, with no rule to cut across it. */
.pub-editions {
  padding-block: calc(var(--tg-space-12) + var(--tg-space-16)) var(--tg-space-16);
}

.pub-editions__list {
  display: grid;
  gap: var(--tg-space-10) var(--tg-space-8);
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 40em) and (max-width: 55.99em) {
  .pub-editions__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 56em) {
  .pub-editions__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.pub-edition {
  display: flex;
  flex-direction: column;
  gap: var(--tg-space-2);
  min-inline-size: 0;
}

.pub-edition__art {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 3 / 2;
  margin-block-end: var(--tg-space-3);
  border: var(--tg-border-width) solid var(--tg-color-border);
  border-radius: var(--tg-radius-lg);
  background: var(--tg-color-surface-sunken);
  object-fit: cover;
}

/* A solutions page opens with its edition's illustration across the page: wide on a desk, cropped to a band rather than a wall. */
.pub-solutions__art {
  display: block;
  inline-size: 100%;
  block-size: auto;
  max-block-size: 24rem;
  aspect-ratio: 3 / 2;
  margin-block: var(--tg-space-6) var(--tg-space-8);
  border: var(--tg-border-width) solid var(--tg-color-border);
  border-radius: var(--tg-radius-lg);
  background: var(--tg-color-surface-sunken);
  object-fit: cover;
  object-position: center 35%;
}

.pub-edition__name {
  margin: 0;
  font-size: var(--tg-text-xl);
  font-weight: var(--tg-weight-semibold);
  line-height: var(--tg-leading-tight);
}

.pub-edition__name a {
  color: inherit;
  text-decoration: none;
}

.pub-edition__name a:hover,
.pub-edition__name a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.pub-edition__for {
  margin: 0;
  color: var(--tg-color-text-muted);
}

.pub-edition__body {
  margin-block: var(--tg-space-2) 0;
}

/* What the edition has today: a short list with a check mark drawn by CSS, so it needs no icon and no image. */
.pub-edition__proof {
  display: flex;
  flex-direction: column;
  gap: var(--tg-space-1);
  margin: var(--tg-space-3) 0 0;
  padding: 0;
  list-style: none;
  color: var(--tg-color-text-muted);
  font-size: var(--tg-text-sm);
}

.pub-edition__proof li {
  position: relative;
  padding-inline-start: 1.5em;
}

.pub-edition__proof li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0.1em;
  inset-block-start: 0.35em;
  inline-size: 0.45em;
  block-size: 0.8em;
  border: solid var(--tg-color-success);
  border-width: 0 0.15em 0.15em 0;
  transform: rotate(45deg);
}

.pub-edition__link {
  margin-block: var(--tg-space-3) 0;
  font-weight: var(--tg-weight-medium);
}

/* ---- the product, as its people see it: screenshots of the demonstration workspaces ---- */
.pub-showcase {
  padding-block: var(--tg-space-16);
  border-block-start: var(--tg-border-width) solid var(--tg-color-border);
  background: var(--tg-color-surface-sunken);
}

.pub-showcase__list {
  display: flex;
  flex-direction: column;
  gap: var(--tg-space-16);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pub-shot {
  display: grid;
  gap: var(--tg-space-6) var(--tg-space-12);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}

.pub-shot > * {
  min-inline-size: 0;
}

.pub-shot__figure {
  margin: 0;
}

.pub-shot__frame {
  overflow: hidden;
  border: var(--tg-border-width) solid var(--tg-color-border);
  border-radius: var(--tg-radius-lg);
  background: var(--tg-color-surface-raised);
  box-shadow: var(--tg-shadow-lg);
}

.pub-shot__frame img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

.pub-shot__frame--phone {
  max-inline-size: 20rem;
  margin-inline: auto;
  border-width: calc(var(--tg-border-width) * 3);
  border-color: var(--tg-color-border-strong);
  border-radius: var(--tg-radius-xl);
}

.pub-shot__title {
  margin: 0 0 var(--tg-space-3);
  font-size: var(--tg-text-2xl);
  font-weight: var(--tg-weight-semibold);
  letter-spacing: -0.01em;
  line-height: var(--tg-leading-tight);
  text-wrap: balance;
}

.pub-shot__body {
  margin: 0;
  max-inline-size: var(--tg-measure);
  font-size: var(--tg-text-lg);
  line-height: var(--tg-leading-body);
}

@media (min-width: 56em) {
  .pub-shot {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }

  /* Every other shot puts its words first, so the eye moves across the page rather than down one side of it. */
  .pub-shot:nth-child(even) .pub-shot__figure {
    order: 2;
  }

  .pub-shot--phone {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}

@media (forced-colors: active) {
  .pub-edition__art,
  .pub-solutions__art,
  .pub-shot__frame {
    border-color: CanvasText;
  }

  .pub-edition__proof li::before {
    border-color: CanvasText;
  }
}

/* The one moment of motion on the page: the sample gradebook fills in row by row, its explanations last, once. */
@media (prefers-reduced-motion: no-preference) {
  .pub-sheet tbody tr {
    animation: pub-row-in var(--tg-motion-slow) var(--tg-ease-out) both;
  }

  .pub-sheet tbody tr:nth-child(2) { animation-delay: 90ms; }
  .pub-sheet tbody tr:nth-child(3) { animation-delay: 180ms; }
  .pub-sheet tbody tr:nth-child(4) { animation-delay: 270ms; }
  .pub-sheet tbody tr:nth-child(5) { animation-delay: 360ms; }
  .pub-sheet tbody tr:nth-child(6) { animation-delay: 450ms; }
  .pub-sheet tbody tr:nth-child(n + 7) { animation-delay: 540ms; }

  .pub-sheet tbody .pub-sheet__why {
    animation: pub-why-in var(--tg-motion-slow) var(--tg-ease-out) 700ms both;
  }
}

@keyframes pub-row-in {
  from {
    opacity: 0;
    transform: translateY(0.25rem);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes pub-why-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.pub-home-band {
  padding-block: var(--tg-space-12);
  border-block-start: var(--tg-border-width) solid var(--tg-color-border);
}

.pub-home-band--sunken {
  background: var(--tg-color-surface-sunken);
}

.pub-columns {
  display: grid;
  gap: var(--tg-space-8);
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 56em) {
  .pub-columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.pub-columns__item {
  min-inline-size: 0;
}

.pub-columns__title {
  margin: 0 0 var(--tg-space-2);
  font-size: var(--tg-text-xl);
  font-weight: var(--tg-weight-semibold);
}

.pub-columns__body {
  margin: 0;
}

.pub-home-close {
  display: grid;
  gap: var(--tg-space-10);
  grid-template-columns: minmax(0, 1fr);
}

.pub-home-close > * {
  min-inline-size: 0;
}

.pub-home-close p {
  margin-block: 0 var(--tg-space-4);
  max-inline-size: var(--tg-measure);
}

@media (min-width: 56em) {
  .pub-home-close {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---- grids and cards ---- */
.pub-grid {
  display: grid;
  gap: var(--tg-space-4);
  grid-template-columns: 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 48em) {
  .pub-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.pub-two-columns {
  display: grid;
  gap: var(--tg-space-8);
  grid-template-columns: minmax(0, 1fr);
}

.pub-two-columns > *,
.pub-grid > * {
  min-inline-size: 0;
}

@media (min-width: 56em) {
  .pub-two-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.pub-card {
  display: flex;
  flex-direction: column;
  gap: var(--tg-space-2);
  min-inline-size: 0;
  padding: var(--tg-space-5);
  border: var(--tg-border-width) solid var(--tg-color-border);
  border-radius: var(--tg-radius-lg);
  background: var(--tg-color-surface);
}

.pub-card__title {
  font-size: var(--tg-text-lg);
  margin: 0;
}

.pub-card__body {
  margin: 0;
  color: var(--tg-color-text-muted);
}

.pub-cta {
  display: flex;
  flex-direction: column;
  gap: var(--tg-space-4);
  align-items: flex-start;
}

.pub-cta h2,
.pub-cta p {
  margin: 0;
}

/* A flex item's floor is its longest unbreakable run; break anywhere so stretched strings (200 % text, the pseudo-locale) reflow. */
.pub-cta p {
  max-inline-size: 100%;
  overflow-wrap: anywhere;
}

.pub-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--tg-space-2);
}

/* ---- segment switch (solutions, pricing) ---- */
.pub-segment-switch ul {
  list-style: none;
  margin: 0 0 var(--tg-space-6);
  padding: 0;
}

.pub-segment-switch__link {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tg-size-target);
  padding-inline: var(--tg-space-4);
  border: var(--tg-border-width) solid var(--tg-color-border-strong);
  border-radius: var(--tg-radius-full);
  text-decoration: none;
  color: var(--tg-color-text);
  text-align: center;
  max-inline-size: 100%;
  min-inline-size: 0;
}

.pub-segment-switch__link--current {
  background: var(--tg-color-accent);
  border-color: var(--tg-color-accent);
  color: var(--tg-color-on-accent);
}

@media (forced-colors: active) {
  .pub-segment-switch__link--current {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
  }
}

/* ---- claims-backed statements ---- */
.pub-statements {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--tg-space-4);
}

.pub-statements--compact {
  gap: var(--tg-space-2);
}

.pub-statement {
  display: flex;
  gap: var(--tg-space-3);
  align-items: flex-start;
  min-inline-size: 0;
}

.pub-statement__status {
  flex: 0 0 auto;
  padding-block-start: 0.15em;
}

.pub-statement--built .pub-statement__status {
  color: var(--tg-color-success);
}

.pub-statement--roadmap .pub-statement__status {
  color: var(--tg-color-text-muted);
}

.pub-statement__text {
  display: flex;
  flex: 1 1 0%;
  flex-wrap: wrap;
  gap: var(--tg-space-1) var(--tg-space-2);
  align-items: baseline;
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

.pub-statement__body {
  flex-basis: 100%;
  color: var(--tg-color-text-muted);
}

/* ---- sign-up step rail (static) ---- */
.pub-steps__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--tg-space-2);
  counter-reset: none;
}

.pub-steps__link {
  display: inline-flex;
  align-items: center;
  gap: var(--tg-space-2);
  min-block-size: var(--tg-size-target);
  padding-inline-end: var(--tg-space-2);
  border-radius: var(--tg-radius-full);
  color: var(--tg-color-text-muted);
  text-decoration: none;
}

a.pub-steps__link:hover {
  color: var(--tg-color-link);
}

.pub-steps__marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.75em;
  block-size: 1.75em;
  border-radius: var(--tg-radius-full);
  border: var(--tg-border-width) solid var(--tg-color-border-strong);
  font-size: var(--tg-text-sm);
  font-weight: var(--tg-weight-semibold);
}

.pub-steps__step--current .pub-steps__link {
  color: var(--tg-color-text);
  font-weight: var(--tg-weight-semibold);
}

.pub-steps__step--current .pub-steps__marker {
  background: var(--tg-color-accent);
  border-color: var(--tg-color-accent);
  color: var(--tg-color-on-accent);
}

.pub-steps__step--completed .pub-steps__marker {
  background: var(--tg-color-success-subtle);
  border-color: var(--tg-color-success);
  color: var(--tg-color-on-success-subtle);
}

/* ---- footer ---- */
.pub-footer {
  display: flex;
  flex-direction: column;
  gap: var(--tg-space-6);
}

.pub-footer__columns {
  display: grid;
  gap: var(--tg-space-6);
  grid-template-columns: 1fr;
}

@media (min-width: 40em) {
  .pub-footer__columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64em) {
  .pub-footer__columns {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.pub-footer__heading {
  font-size: var(--tg-text-sm);
  font-weight: var(--tg-weight-semibold);
  color: var(--tg-color-text-muted);
  margin: 0 0 var(--tg-space-3);
}

.pub-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--tg-space-2);
}

.pub-footer__list a {
  display: inline-block;
  min-block-size: var(--tg-size-target-min);
}

/* A list item keeps the browser's disclosure arrow, so this reads as something that opens. */
.pub-footer__theme summary {
  cursor: pointer;
  min-block-size: var(--tg-size-target-min);
  display: list-item;
}

.pub-footer__note {
  font-size: var(--tg-text-sm);
  color: var(--tg-color-text-muted);
  margin: 0;
}

/* ---- small forms (language, search, country) ---- */
.pub-language,
.pub-search,
.pub-country {
  display: flex;
  flex-direction: column;
  gap: var(--tg-space-2);
  margin-block-end: var(--tg-space-6);
}

.pub-language {
  margin-block-end: var(--tg-space-4);
}

.pub-language__row,
.pub-search__row,
.pub-country__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tg-space-2);
  align-items: stretch;
}

.pub-search__row > input,
.pub-language__row > select,
.pub-country__row > select {
  flex: 1 1 12rem;
  min-inline-size: 0;
}

.pub-search__label,
.pub-language__label,
.pub-country label {
  font-weight: var(--tg-weight-medium);
}

/* ---- document lists (help, legal) ---- */
.pub-doc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--tg-space-4);
}

.pub-doc-list__item {
  display: flex;
  flex-direction: column;
  gap: var(--tg-space-1);
  padding: var(--tg-space-4);
  border: var(--tg-border-width) solid var(--tg-color-border);
  border-radius: var(--tg-radius-md);
  background: var(--tg-color-surface);
  min-inline-size: 0;
}

.pub-doc-list__title {
  font-size: var(--tg-text-lg);
  font-weight: var(--tg-weight-semibold);
}

.pub-doc-list__summary {
  color: var(--tg-color-text-muted);
}

.pub-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tg-space-4) var(--tg-space-8);
  margin: 0 0 var(--tg-space-6);
  padding: var(--tg-space-4);
  border-radius: var(--tg-radius-md);
  background: var(--tg-color-surface-sunken);
}

.pub-meta__item dt {
  font-size: var(--tg-text-sm);
  color: var(--tg-color-text-muted);
}

.pub-meta__item {
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

.pub-meta__item dd {
  margin: 0;
  font-weight: var(--tg-weight-medium);
}

.pub-history {
  margin: 0;
  padding-inline-start: var(--tg-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--tg-space-2);
  overflow-wrap: anywhere;
}

.pub-history__version {
  font-weight: var(--tg-weight-semibold);
}

.pub-appearance {
  display: flex;
  flex-direction: column;
  gap: var(--tg-space-2);
  margin-block-start: var(--tg-space-2);
}

.pub-appearance__field {
  display: flex;
  flex-direction: column;
  gap: var(--tg-space-1);
}

.pub-appearance__field label {
  font-weight: var(--tg-weight-medium);
}

.pub-toc {
  margin-block-end: var(--tg-space-6);
  padding: var(--tg-space-4);
  border-inline-start: 0.25rem solid var(--tg-color-accent);
  background: var(--tg-color-surface-sunken);
}

.pub-toc__heading {
  font-size: var(--tg-text-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 var(--tg-space-2);
}

.pub-toc__list {
  margin: 0;
  padding-inline-start: var(--tg-space-5);
}

.pub-article-footer {
  margin-block-start: var(--tg-space-10);
  padding-block-start: var(--tg-space-4);
  border-block-start: var(--tg-border-width) solid var(--tg-color-border);
}

/* ---- pricing ---- */
.pub-plans {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--tg-space-4);
  grid-template-columns: 1fr;
}

@media (min-width: 44em) {
  .pub-plans {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 66em) {
  .pub-plans {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.pub-plan {
  display: flex;
  flex-direction: column;
  gap: var(--tg-space-3);
  padding: var(--tg-space-5);
  border: var(--tg-border-width) solid var(--tg-color-border);
  border-radius: var(--tg-radius-lg);
  background: var(--tg-color-surface);
  min-inline-size: 0;
}

.pub-plan--sales {
  background: var(--tg-color-surface-sunken);
}

.pub-plan__name {
  font-size: var(--tg-text-xl);
  margin: 0;
}

.pub-plan__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--tg-space-1) var(--tg-space-2);
  margin: 0;
}

.pub-plan__amount {
  font-size: clamp(var(--tg-text-xl), 5vw, var(--tg-text-3xl));
  font-weight: var(--tg-weight-bold);
  line-height: var(--tg-leading-tight);
}

.pub-plan__unit {
  color: var(--tg-color-text-muted);
}

.pub-plan__trial {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tg-space-2);
  align-items: center;
  margin: 0;
}

.pub-plan__features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--tg-space-2);
  flex: 1 1 auto;
}

.pub-plan__features li {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tg-space-2);
  align-items: center;
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

.pub-plan__action {
  margin-block-start: var(--tg-space-2);
}

.pub-faq {
  display: flex;
  flex-direction: column;
  gap: var(--tg-space-2);
  max-inline-size: var(--tg-measure);
}

.pub-faq__item {
  border: var(--tg-border-width) solid var(--tg-color-border);
  border-radius: var(--tg-radius-md);
  padding: var(--tg-space-3) var(--tg-space-4);
  background: var(--tg-color-surface);
}

.pub-faq__question {
  cursor: pointer;
  font-weight: var(--tg-weight-semibold);
  min-block-size: var(--tg-size-target-min);
  display: flex;
  align-items: center;
}

.pub-faq__answer {
  margin: var(--tg-space-3) 0 0;
  color: var(--tg-color-text-muted);
}

/* ---- sign-in / choose / status ---- */
.pub-results {
  margin-block-start: var(--tg-space-6);
}

.pub-choice-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--tg-space-2);
}

.pub-choice-list__form {
  margin: 0;
}

.pub-choice-list__link {
  display: flex;
  align-items: center;
  gap: var(--tg-space-3);
  inline-size: 100%;
  min-block-size: var(--tg-size-target);
  padding: var(--tg-space-3) var(--tg-space-4);
  border: var(--tg-border-width) solid var(--tg-color-border);
  border-radius: var(--tg-radius-md);
  background: var(--tg-color-surface);
  color: var(--tg-color-text);
  text-decoration: none;
  text-align: start;
  font: inherit;
  cursor: pointer;
}

.pub-choice-list__link:hover {
  background: var(--tg-color-surface-hover);
}

.pub-choice-list__text {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-inline-size: 0;
}

.pub-choice-list__title {
  font-weight: var(--tg-weight-semibold);
}

.pub-notice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--tg-space-4);
}

.pub-notice h1,
.pub-notice p {
  margin: 0;
}

.pub-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tg-space-2);
  align-items: center;
}

.pub-status {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--tg-space-2);
}

.pub-status__step {
  display: flex;
  gap: var(--tg-space-3);
  align-items: center;
  min-block-size: var(--tg-size-target-min);
  color: var(--tg-color-text-muted);
}

.pub-status__step--done {
  color: var(--tg-color-success-text);
}

.pub-status__step--current {
  color: var(--tg-color-text);
  font-weight: var(--tg-weight-semibold);
}

@media (prefers-reduced-motion: no-preference) {
  .pub-status__step--current .tg-icon {
    animation: pub-spin 1.2s linear infinite;
  }
}

@keyframes pub-spin {
  to {
    transform: rotate(360deg);
  }
}

.pub-next-steps {
  padding-inline-start: var(--tg-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--tg-space-2);
}

/* ---- a country's landing page (ADR 0044): the opening's object is a data map — what is held, where, and who reaches it ---- */
/* The map overhangs the opening like the sample gradebook does; the first section after it starts below the overhang. */
.pub-map-frame {
  position: relative;
  margin-block-end: calc(-1 * var(--tg-space-12));
  padding: var(--tg-space-5);
  border: var(--tg-border-width) solid var(--tg-color-border);
  border-radius: var(--tg-radius-lg);
  background: var(--tg-color-surface-raised);
  box-shadow: var(--tg-shadow-lg);
}

.pub-map {
  inline-size: 100%;
  border-collapse: collapse;
}

.pub-map__caption {
  padding-block-end: var(--tg-space-4);
  color: var(--tg-color-text-muted);
  font-size: var(--tg-text-sm);
  font-weight: var(--tg-weight-regular);
  text-align: start;
}

.pub-map th,
.pub-map td {
  padding: var(--tg-space-3);
  border: 0;
  text-align: start;
  vertical-align: top;
  line-height: var(--tg-leading-snug);
}

.pub-map thead th {
  color: var(--tg-color-text-muted);
  font-size: var(--tg-text-xs);
  font-weight: var(--tg-weight-medium);
  border-block-end: var(--tg-border-width) solid var(--tg-color-border);
}

.pub-map tbody tr + tr > * {
  border-block-start: var(--tg-border-width) solid var(--tg-color-border);
}

.pub-map__what {
  inline-size: 24%;
  font-weight: var(--tg-weight-semibold);
}

.pub-map__where {
  inline-size: 38%;
}

.pub-map__who {
  color: var(--tg-color-text-muted);
}

.pub-map__note {
  margin: var(--tg-space-4) 0 0;
  max-inline-size: var(--tg-measure);
  color: var(--tg-color-text-muted);
  font-size: var(--tg-text-sm);
}

/* Below this the three columns do not fit: each row becomes a block with its heading, then where and who, each labelled. */
@media (width < 56em) {
  .pub-map-frame {
    padding: var(--tg-space-4);
  }

  .pub-map,
  .pub-map caption,
  .pub-map tbody {
    display: block;
  }

  .pub-map thead {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .pub-map tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--tg-space-2);
    padding-block: var(--tg-space-4);
  }

  .pub-map tbody tr:last-child {
    padding-block-end: 0;
  }

  .pub-map tbody tr + tr {
    border-block-start: var(--tg-border-width) solid var(--tg-color-border);
  }

  .pub-map tbody tr + tr > * {
    border-block-start: 0;
  }

  .pub-map tbody th,
  .pub-map tbody td {
    inline-size: auto;
    min-inline-size: 0;
    padding: 0;
    overflow-wrap: anywhere;
  }

  .pub-map tbody td::before {
    content: attr(data-label);
    display: block;
    color: var(--tg-color-text-muted);
    font-size: var(--tg-text-xs);
    font-weight: var(--tg-weight-medium);
  }
}

@media (forced-colors: active) {
  .pub-map thead th,
  .pub-map tbody tr + tr > *,
  .pub-map tbody tr + tr {
    border-color: CanvasText;
  }
}

.pub-landing-section {
  padding-block: var(--tg-space-16);
}

.pub-landing-section--first {
  padding-block-start: calc(var(--tg-space-12) + var(--tg-space-16));
}

.pub-landing-section--sunken {
  background: var(--tg-color-surface-sunken);
}

/* The statements of a landing page carry their bodies, so two columns on a desk and one below it; each item breaks anywhere so stretched strings reflow. */
.pub-landing-grid .pub-statements {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--tg-space-6) var(--tg-space-10);
}

@media (min-width: 56em) {
  .pub-landing-grid .pub-statements {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.pub-landing-editions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--tg-space-3);
}

.pub-landing-edition {
  display: flex;
  flex-direction: column;
  gap: var(--tg-space-1);
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

.pub-landing-edition__name {
  font-weight: var(--tg-weight-semibold);
}

.pub-landing-edition__hint {
  color: var(--tg-color-text-muted);
  font-size: var(--tg-text-sm);
}

/* ---- progressive enhancement switches ---- */
html:not([data-tg-js]) .pub-js-only {
  display: none;
}

html[data-tg-js] .pub-no-js {
  display: none;
}

/* The honeypot field: out of the visual and reading order, still submitted. */
.pub-hp {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The first heading receives focus after navigation (FocusOnNavigate); no ring on it. */
h1:focus {
  outline: none;
}