/* codonhq.com: the site's own layout, on top of /look.css (the game's glass look, generated from the
   root theme by control/look.py: the tokens, the fonts, the light scheme and every .g-* class).
   Nothing here names a colour or a font, only tokens, so a theme change reaches every rule. The
   shell (bar, column, footer), the cards and the long-form rules are look.css's; this file places
   the pieces only this site has: the hero, the four-paragraph panel, the start list, the plan
   cards and the contents card. No external fonts, scripts or trackers. */

/* The bar: the sign-in link reads as the one action in the nav. */
.site-nav a.signin {
  color: var(--accent);
  font-weight: var(--fw-label);
}
.site-nav a.signin:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* The landing column breathes more than an account page does. */
.site-stack {
  gap: calc(var(--space-5) * 1.5);
}

/* The hero: the lockup, one headline, the lede and the actions, centred like an auth page. */
.hero {
  padding-top: clamp(var(--space-3), 5vh, 48px);
  text-align: center;
}
.hero .g-lockup {
  width: min(100%, 560px);
}
.hero h1 {
  max-width: 24ch;
  margin: 0 auto;
  font-size: clamp(26px, 4.5vw, 40px);
}
.hero .g-lede {
  max-width: 60ch;
  margin: var(--space-4) auto 0;
  font-size: calc(var(--fs-name) * 1.125);
}
.hero .g-actions {
  justify-content: center;
  margin-top: var(--space-5);
}

/* What Codon is: four h2 + p pairs on one glass panel, two columns when they fit. The panel's
   stacking rule (a margin between children) is for a column, not a grid, so it is reset. */
.what {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--space-5);
}
.what > * + * {
  margin-top: 0;
}
.what p {
  margin-top: var(--space-2);
  color: var(--dim);
  text-wrap: pretty;
}

/* How to start: a numbered sequence, then the one note. */
.start h2 {
  font-size: calc(var(--fs-name) * 1.2);
}
.start ol {
  max-width: var(--measure);
  margin-top: var(--space-3);
  padding-left: 1.4em;
}
.start li + li {
  margin-top: var(--space-2);
}
.start .g-hint {
  margin-top: var(--space-4);
  font-size: var(--fs-control);
}

/* Pricing: three cards side by side when they fit, the price in mono under the name. */
.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-4);
}
.plans .g-card {
  padding: var(--space-4) var(--space-5);
}
.plans h2 {
  font-size: calc(var(--fs-name) * 1.1);
}
.plans .g-price {
  margin-top: var(--space-1);
}
.plans p {
  color: var(--dim);
  font-size: var(--fs-control);
  text-wrap: pretty;
}
.plans ul {
  padding-left: 1.2em;
  font-size: var(--fs-control);
}
.plans li + li {
  margin-top: var(--space-1);
}

/* Long-form pages: the contents list is one card, two columns when they fit; the capitalised
   clauses keep their weight; the recipients table sits in the column (look.css bleeds it to a
   card's edge) and scrolls sideways on a phone instead of squeezing three columns into one. */
.toc {
  font-size: var(--fs-control);
}
.toc ol {
  columns: 2 14rem;
  column-gap: var(--space-5);
  padding-left: 1.4em;
}
.toc li {
  break-inside: avoid;
}
.toc a {
  text-decoration: none;
}
.toc a:hover {
  text-decoration: underline;
}
.g-doc .caps {
  font-weight: var(--fw-name);
}
.g-shell > main,
.g-doc {
  min-width: 0; /* a grid item and a flex item: by default each widens to the table's min-content instead of letting it scroll */
}
.g-doc .g-table-wrap {
  margin: 0;
  padding: 0;
}
.g-doc .g-table {
  min-width: 36rem;
}
.g-doc .g-table th,
.g-doc .g-table td {
  padding: var(--space-2) var(--space-3) var(--space-2) 0;
  vertical-align: top;
}