/* tacocatacomb — shared styles
   One stylesheet for the studio page and both app sections. Per-app accents
   are set by a class on <body> so the same markup works everywhere. */

:root {
  --ground:    #F1F3F1;
  --surface:   #FFFFFF;
  --sub:       #E7EBE8;
  --ink:       #1A1E1C;
  --ink-soft:  #4F5A55;
  --ink-faint: #58665E;
  --rule:      #D5DBD7;
  --accent:      #A2681C;   /* studio: candlelight */
  --accent-wash: #F7EEDF;
  --shadow: 0 1px 2px rgba(20,30,25,.05), 0 8px 24px rgba(20,30,25,.06);
}
body.averted { --accent: #34517E; --accent-wash: #E7EDF7; }
body.euchre  { --accent: #1B6B45; --accent-wash: #E2EFE7; }
/* The orange of Scat's card backs, darkened enough to read as text. */
body.scat    { --accent: #A84E16; --accent-wash: #F7E8DC; }
/* Slate, for the chalk-on-black icon — and far enough from the other
   two that a card is identifiable by its rule alone. */
body.tillytally { --accent: #3F4A55; --accent-wash: #E8EBEE; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:    #101312;
    --surface:   #181C1A;
    --sub:       #212724;
    --ink:       #E6EBE8;
    --ink-soft:  #A6B1AB;
    --ink-faint: #A0ADA5;
    --rule:      #2A312D;
    --accent:      #D9A254;
    --accent-wash: #2A2115;
    --shadow: 0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.28);
  }
  body.averted:not([data-theme="light"]) { --accent: #8FADDC; --accent-wash: #1A2331; }
  body.euchre:not([data-theme="light"])  { --accent: #63BC8E; --accent-wash: #14261D; }
  body.scat:not([data-theme="light"])    { --accent: #F0A060; --accent-wash: #2C1D12; }
  body.tillytally:not([data-theme="light"]) { --accent: #A8B8C6; --accent-wash: #1C2126; }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--ground);
  color: var(--ink);
  font-family: Newsreader, Georgia, "Times New Roman", serif;
  font-size: 17px;
  line-height: 1.65;
  margin: 0;
  padding: 0 22px 90px;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 720px; margin: 0 auto; }

/* ---------- header ---------- */
.site-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 26px 0; border-bottom: 1px solid var(--rule);
  margin-bottom: 48px; flex-wrap: wrap;
}
/* The cat and two-line wordmark share a 32px height. */
.wordmark {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: Gabarito, "Helvetica Neue", sans-serif;
  font-weight: 700; color: var(--ink); text-decoration: none;
}
.wordmark .taco { width: 32px; height: 32px; flex: none; display: block; object-fit: contain; }
.wordmark .brand-type {
  display: grid; grid-template-columns: max-content max-content;
  grid-template-rows: 20px 8px; row-gap: 4px; align-items: start;
}
.wordmark .brand-name { font-size: 20px; line-height: 20px; letter-spacing: -.2px; white-space: nowrap; color: #A49786; }
.wordmark .brand-accent { color: #F6A559; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wordmark .brand-name,
  :root:not([data-theme="light"]) .wordmark .tm,
  :root:not([data-theme="light"]) .wordmark .brand-labs { color: #A49786; }
  :root:not([data-theme="light"]) .wordmark .brand-accent { color: #F6A559; }
}
.wordmark .brand-labs {
  grid-column: 1; grid-row: 2; justify-self: end;
  font-size: 8px; line-height: 8px; letter-spacing: 2.5px;
  margin-right: -2.5px; color: #A49786;
}
.site-head nav { display: flex; gap: 18px; }
.site-head nav a {
  font-family: Gabarito, sans-serif; font-size: 14.5px; font-weight: 500;
  color: var(--ink-soft); text-decoration: none;
}
.site-head nav a:hover { color: var(--accent); }

/* ---------- type ---------- */
h1 {
  font-family: Gabarito, "Helvetica Neue", sans-serif;
  font-weight: 700; font-size: clamp(34px, 6vw, 50px); line-height: 1.06;
  letter-spacing: -.022em; margin: 0 0 16px; text-wrap: balance;
}
h2 {
  font-family: Gabarito, sans-serif; font-weight: 600; font-size: 23px;
  letter-spacing: -.012em; margin: 44px 0 12px; text-wrap: balance;
}
h3 {
  font-family: Gabarito, sans-serif; font-weight: 600; font-size: 17.5px;
  margin: 30px 0 8px;
}
/* The trademark symbol. U+2122 is drawn as a raised glyph, but sized down
   to .62em it ends up halfway up the letters instead of at their tops, so it
   is lifted to sit near the cap height — the way it is printed beside a
   name. The display face's negative tracking otherwise pulls it into the
   word it follows. In the wordmark it also has to escape the accent color
   that every other span in there inherits, and keeps its own placement. */
.tm {
  font-size: .62em;
  letter-spacing: 0;
  margin-left: .05em;
  vertical-align: .38em;
  line-height: 0;
}
.wordmark .tm { font-size: 11px; line-height: 14px; letter-spacing: 0; margin-left: 0; padding-left: 1px; color: #A49786; vertical-align: baseline; }

p { margin: 0 0 16px; text-wrap: pretty; }
.lede { font-size: 20px; color: var(--ink-soft); margin-bottom: 28px; }
ul { padding-left: 22px; margin: 0 0 16px; }
li { margin-bottom: 8px; }
a { color: var(--accent); text-underline-offset: 2px; }
a:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px;
}
strong { font-weight: 600; }
.eyebrow {
  font-family: Gabarito, sans-serif; font-size: 12px; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 14px;
}
.updated {
  font-family: Gabarito, sans-serif; font-size: 13.5px; color: var(--ink-faint);
  margin: 0 0 34px;
}

/* ---------- app cards on the studio page ---------- */
.apps { display: grid; gap: 18px; margin: 34px 0 0; }
.app-card {
  display: block; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 12px; padding: 26px 28px; box-shadow: var(--shadow);
  border-left: 3px solid var(--card-accent, var(--accent));
}
.app-card:hover { border-color: var(--card-accent, var(--accent)); }
.app-card.is-averted { --card-accent: #34517E; }
.app-card.is-euchre  { --card-accent: #1B6B45; }
.app-card.is-scat    { --card-accent: #A84E16; }
.app-card.is-tillytally { --card-accent: #3F4A55; }
/* Dark card accents follow the base rules so the cascade preserves them. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .app-card.is-averted { --card-accent: #8FADDC; }
  :root:not([data-theme="light"]) .app-card.is-euchre { --card-accent: #63BC8E; }
  :root:not([data-theme="light"]) .app-card.is-scat { --card-accent: #F0A060; }
  :root:not([data-theme="light"]) .app-card.is-tillytally { --card-accent: #A8B8C6; }
}

.app-card h2 {
  margin: 0 0 6px; font-size: 25px; color: var(--card-accent);
}
.app-card p { margin: 0; color: var(--ink-soft); font-size: 16.5px; }
.app-card .more {
  font-family: Gabarito, sans-serif; font-size: 14.5px; font-weight: 600;
  color: var(--card-accent); margin-top: 14px; display: inline-block;
}

/* A card that is not a link yet.
 *
 * TillyTally is on the page because it is worth knowing about and off the
 * navigation because there is nothing behind it to read. "Coming soon" is
 * what tells somebody that before they try to click it: a card that looks
 * exactly like its two neighbors and does nothing is a broken link, not a
 * teaser. It leads the card, above the name, where a label is read rather
 * than found — and everything under it is set lighter, so the difference
 * between this card and the two live ones is visible before it is read.
 */
.app-card.is-teaser:hover { border-color: var(--rule); }
.app-card .coming {
  font-family: Gabarito, sans-serif; font-size: 12px; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--card-accent, var(--accent)); opacity: .75;
  margin: 0 0 8px;
}
.app-card.is-teaser h2 { opacity: .72; }
.app-card.is-teaser p:not(.coming) { color: var(--ink-faint); }

/* ---------- callout ---------- */
.callout {
  background: var(--accent-wash); border-radius: 10px;
  padding: 18px 22px; margin: 26px 0;
}
.callout p { margin: 0; font-size: 16px; }
.callout p + p { margin-top: 10px; }

/* ---------- contact ---------- */
.contact {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 10px; padding: 22px 24px; margin: 28px 0;
  box-shadow: var(--shadow);
}
.contact p { margin: 0; }
.contact .addr {
  font-family: Gabarito, sans-serif; font-size: 19px; font-weight: 600;
  margin-top: 6px;
}

/* ---------- footer ---------- */
footer {
  margin-top: 62px; padding-top: 22px; border-top: 1px solid var(--rule);
  font-size: 14.5px; color: var(--ink-faint);
  display: flex; gap: 16px; flex-wrap: wrap; justify-content: space-between;
}
footer a { color: var(--ink-faint); }
footer a:hover { color: var(--accent); }

/* ---------- product hero: shot beside the name ---------- */
.hero {
  display: flex; align-items: flex-start; gap: 32px; margin: 0 0 6px;
}
.hero-copy { flex: 1 1 auto; min-width: 0; }
.hero-copy .eyebrow { margin-top: 4px; }
.hero-copy h1 { margin-top: 0; }
.hero-copy p:last-child { margin-bottom: 0; }

.shot-figure {
  flex: 0 0 auto; margin: 6px 0 0;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.shot-figure img {
  width: 200px; height: auto; display: block;
  border-radius: 17px;
  border: 1px solid var(--rule);
  box-shadow: 0 2px 6px rgba(20,30,25,.10), 0 14px 34px rgba(20,30,25,.15);
}
.shot-figure figcaption {
  font-family: Gabarito, sans-serif; font-size: 12.5px; line-height: 1.45;
  color: var(--ink-faint); text-align: center; max-width: 200px;
}

/* The same phone shot, standing on its own in the text rather than beside
   the lede. Only the margins differ — outside the hero's flex row it is
   already a centered column. */
.shot-figure.standalone { margin: 26px auto 22px; }

@media (max-width: 640px) {
  .hero { flex-direction: column; gap: 20px; align-items: center; }
  .hero-copy { width: 100%; }
  .shot-figure img { width: 220px; }
  .shot-figure figcaption { max-width: 34ch; }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .shot-figure img {
    box-shadow: 0 2px 6px rgba(0,0,0,.5), 0 14px 34px rgba(0,0,0,.45);
  }
}

/* ---------- the app's own icon, beside its name ----------
   Only on the app pages, and only one per page. The icon is the thing
   somebody will be looking for once they get to the App Store, so the page
   that sends them there should show it.

   Deliberately not on the home page's three cards. At the size that fits
   beside a 23px card heading, Euchre's three overlapping cards collapse into
   a green smudge while Averted's ring and TillyTally's tally marks stay
   perfectly legible — and two crisp icons beside one blur reads as a
   mistake rather than a system. The cards already tell themselves apart by
   their accent rule, which is what that rule is for.

   All three icons are dark, so on the light ground they sit clearly and in
   dark mode they would dissolve into the page. Same answer as the sign on
   the home page: the hairline and the shadow are both always on, and the
   themes take turns leaning on one of them.

   22.37% is Apple's corner radius as a proportion of the icon's width, so
   the shape matches the one on the home screen at whatever size this is. */
.title-row {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 12px;
}
.title-row h1 { margin: 0; min-width: 0; }
.app-icon {
  flex: 0 0 auto;
  width: 60px; height: 60px; display: block;
  border-radius: 22.37%;
  border: 1px solid var(--rule);
  box-shadow: var(--shadow);
}

@media (max-width: 640px) {
  /* The heading drops to 34px here and a 60px icon starts to outweigh it. */
  .app-icon { width: 46px; height: 46px; }
  .title-row { gap: 11px; }
}

/* ---------- an illustration in the flow of the text ----------
   Wider than it is tall, unlike the phone shots, so it takes the column
   width and sits between paragraphs rather than beside them. */
/* ---------- the studio's own sign ----------
   The one picture on the home page, and the only place the name gets
   explained. It sits beside the heading rather than above it: a square in
   the full 720px column pushed "three small apps" most of the way down a
   phone screen, and this is a shop sign rather than the shop.

   The lede stays full width underneath, so the row is only ever the picture
   and the name of the thing.

   The artwork is black to its own edges, so the rounded corners cut into the
   picture rather than into a mount, and the frame has to do the work of
   telling it apart from the page. On the light ground that is the shadow; on
   the dark one, where near-black art sits on a near-black page, it is the
   rule. Both are always on, because the two themes swap which one is
   carrying it. */
.marquee {
  display: flex; align-items: center; gap: 28px;
  margin: 10px 0 18px;
}
.marquee h1 { flex: 1 1 auto; min-width: 0; margin: 0; }

.sign {
  flex: 0 0 auto;
  width: 200px;
  margin: 0;
  line-height: 0;
}
.sign img {
  width: 100%; height: auto; display: block;
  border-radius: 14px;
  border: 1px solid var(--rule);
  box-shadow: var(--shadow);
}

/* Stacked, and centered, once there is no room for two columns. The heading
   is 34px at this width and wants the whole line. */
@media (max-width: 560px) {
  .marquee { flex-direction: column; align-items: center; gap: 20px; text-align: center; }
  .sign { width: 190px; }
  .marquee h1 { text-align: center; }
}

/* ---------- expandable screenshot ---------- */
.shot-open {
  display: block; padding: 0; border: 0; background: none; cursor: zoom-in;
  border-radius: 13px; line-height: 0;
}
.shot-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.shot-figure img { width: 140px; border-radius: 13px; }
.shot-figure figcaption { max-width: 165px; font-size: 12px; }
/* An iPad on its side: a landscape shot, so it takes most of the column
   rather than a phone's width. */
.shot-figure.wide img { width: 440px; max-width: 100%; border-radius: 10px; }
.shot-figure.wide figcaption { max-width: 46ch; }

@media (max-width: 640px) {
  .hero { flex-direction: column; align-items: center; gap: 22px; }
  /* Name and description first. Stacking the shot on top pushed the app's
     own name below the fold on a phone, which is the wrong thing to lead with. */
  .hero-copy  { order: 1; width: 100%; }
  .shot-figure { order: 2; }
  .shot-figure img { width: 150px; }
  .shot-figure figcaption { max-width: 32ch; }
  .shot-figure.wide,
  .shot-figure.wide .shot-open,
  .shot-figure.wide img { width: 100%; }
}

#shot-dialog {
  border: 0; padding: 0; background: none; overflow: visible;
  max-width: 100vw; max-height: 100vh;
}
#shot-dialog::backdrop { background: rgba(8, 12, 10, .85); }
#shot-dialog img {
  display: block; width: auto; height: auto; max-width: calc(100vw - 64px);
  max-height: 82vh; max-height: 82dvh; object-fit: contain;
  border-radius: 12px; background: var(--sub);
}
.shot-close {
  position: absolute; top: -15px; right: -15px;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--rule); background: var(--surface); color: var(--ink);
  font-family: Gabarito, sans-serif; font-size: 18px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.shot-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  #shot-dialog[open] img { animation: shot-in .16s ease-out; }
  @keyframes shot-in { from { opacity: 0; transform: scale(.97); } }
}

/* Consistent navigation and comfortable touch targets. */
.site-head { margin-bottom: 24px; }
.site-head nav, .app-nav, footer nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.site-head nav a, .app-nav a, footer a { display: inline-flex; align-items: center; min-height: 44px; }
.app-nav { margin: -8px 0 32px; font: 500 15px Gabarito, sans-serif; }
.app-nav a { color: var(--ink-soft); text-decoration: none; }
nav a[aria-current="page"] { color: var(--accent); text-decoration: underline; text-underline-offset: 5px; }
footer nav { gap: 4px 16px; }
.skip-link { position: absolute; top: -100px; left: 16px; z-index: 20; background: var(--surface); padding: 12px 18px; }
.skip-link:focus { top: 8px; }
main:focus { outline: none; }
.hero { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 32px; }
.hero-copy, .hero > .shot-figure { order: initial; }
.shot-figure img { width: 180px; }
.shot-figure figcaption { max-width: 32ch; font-size: 13px; }
.shot-figure video { width: 208px; max-width: 100%; height: auto; }
.shot-close { width: 44px; height: 44px; top: -18px; right: -18px; }
.availability { font-family: Gabarito, sans-serif; color: var(--ink-soft); }
@media (max-width: 640px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .hero > .shot-figure { justify-self: center; }
  .shot-figure img { width: 180px; }
  .shot-figure.wide img { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- company pages: home, products, contact ----------
   Body class "company". Their titles sit at section-heading size: the
   app pages keep their large ones. */
body.company main > h1 {
  font-size: 23px; font-weight: 600; letter-spacing: -.012em; line-height: 1.2; margin: 0 0 12px;
}

/* Home: the apps at a glance, one line each, straight to each app's page. */
.tiles-head { margin: 14px 0 0; color: var(--ink-soft); }
.app-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 22px 0 14px; }
.app-tile {
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 14px;
  border-top: 3px solid var(--card-accent, var(--accent));
  padding: 18px; color: var(--ink); text-decoration: none;
}
.app-tile:hover { border-color: var(--card-accent, var(--accent)); }
.app-tile img { width: 44px; height: 44px; border-radius: 10px; }
.app-tile strong { font: 600 16.5px/1.25 Gabarito, sans-serif; }
.app-tile span { color: var(--ink-soft); font-size: 15.5px; line-height: 1.45; }
@media (max-width: 640px) {
  .app-tiles { grid-template-columns: minmax(0, 1fr); }
  .app-tile { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; }
  .app-tile img { grid-row: span 2; }
}
/* Meet Taco: the picture sits at the top left and the story wraps around it
   and under it, rather than a short picture floating beside a tall column.
   On a phone, the picture above and the story below, both left-aligned. */
.marquee.taco-story { display: flow-root; margin: 0 0 18px; text-align: left; }
.taco-story .sign { float: left; width: 200px; margin: 6px 28px 14px 0; }
.taco-story p:last-child { margin-bottom: 0; }
@media (max-width: 560px) {
  .taco-story .sign { float: none; width: 160px; margin: 4px 0 20px; }
}

/* Products: one card per app. */
.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 26px 0 8px; }
.product {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 14px;
  padding: 20px 22px; box-shadow: var(--shadow);
  border-top: 3px solid var(--card-accent, var(--accent));
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
}
.product-head { display: flex; align-items: center; gap: 12px; }
.product-head img { width: 48px; height: 48px; border-radius: 11px; flex: none; }
.product h3 { margin: 0; font-size: 19px; color: var(--card-accent); line-height: 1.2; }
.product p { margin: 0; font-size: 16px; color: var(--ink-soft); }
.product .platforms { font: 500 13px Gabarito, sans-serif; color: var(--ink-faint); }
.product .links { display: flex; flex-wrap: wrap; gap: 4px 14px; font: 600 14px Gabarito, sans-serif; margin-top: auto; }
.product .links a { color: var(--card-accent); text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; }
.product.is-teaser { opacity: .82; }
.status {
  display: inline-block; align-self: flex-start;
  font: 600 11px Gabarito, sans-serif; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
  background: var(--accent-wash); color: var(--card-accent, var(--accent));
}
@media (max-width: 640px) { .product-grid { grid-template-columns: minmax(0, 1fr); } }

/* Each app's color, for its tile and its card: the same as .app-card's. */
.app-tile.is-averted, .product.is-averted { --card-accent: #34517E; }
.app-tile.is-euchre, .product.is-euchre { --card-accent: #1B6B45; }
.app-tile.is-scat, .product.is-scat { --card-accent: #A84E16; }
.product.is-tillytally { --card-accent: #3F4A55; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .app-tile.is-averted, :root:not([data-theme="light"]) .product.is-averted { --card-accent: #8FADDC; }
  :root:not([data-theme="light"]) .app-tile.is-euchre, :root:not([data-theme="light"]) .product.is-euchre { --card-accent: #63BC8E; }
  :root:not([data-theme="light"]) .app-tile.is-scat, :root:not([data-theme="light"]) .product.is-scat { --card-accent: #F0A060; }
  :root:not([data-theme="light"]) .product.is-tillytally { --card-accent: #A8B8C6; }
}

/* Home: what we believe. */
.principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 22px 0 8px; }
/* The symbol and the title share the first line; the sentence runs under both. */
.principle {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 16px 18px;
  display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; align-content: start; gap: 8px 10px;
}
.principle h3 { margin: 0; font-size: 16.5px; line-height: 1.25; }
.principle p { grid-column: 1 / -1; margin: 0; font-size: 15.5px; color: var(--ink-soft); line-height: 1.55; }
.principle .glyph { line-height: 0; display: block; }
.principle .glyph svg { display: block; width: 22px; height: 22px; }
/* Two across where three would push a title onto a second line. */
@media (max-width: 860px) { .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .principles { grid-template-columns: minmax(0, 1fr); } }

/* Contact: one row per app, and the company's facts. */
.help-list { list-style: none; padding: 0; margin: 24px 0 8px; border-top: 1px solid var(--rule); }
.help-list li {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center;
  gap: 4px 16px; padding: 16px 0; margin: 0; border-bottom: 1px solid var(--rule);
}
.help-list img { width: 44px; height: 44px; border-radius: 10px; grid-row: span 2; }
.help-list .app { font: 600 16.5px Gabarito, sans-serif; }
.help-list .email { font-size: 15.5px; color: var(--ink-soft); overflow-wrap: anywhere; }
.help-list .go { grid-column: 3; grid-row: 1 / span 2; display: flex; gap: 14px; font: 500 14.5px Gabarito, sans-serif; }
@media (max-width: 560px) {
  .help-list li { grid-template-columns: 44px minmax(0, 1fr); }
  .help-list .go { grid-column: 2; grid-row: auto; }
}
.facts { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px 18px; margin: 18px 0; }
.facts dt { font: 600 14px Gabarito, sans-serif; color: var(--ink-faint); padding-top: 2px; }
.facts dd { margin: 0; }
@media (max-width: 560px) { .facts { grid-template-columns: minmax(0, 1fr); gap: 2px; } .facts dd { margin-bottom: 10px; } }

/* The company footer: three columns of links over the copyright line. */
footer.company { display: block; }
.foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px; }
.foot-cols h2 { margin: 0 0 6px; font: 600 12px Gabarito, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
footer.company .foot-cols nav { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
footer.company .foot-cols a { min-height: 34px; text-decoration: none; }
footer.company .legal { padding-top: 14px; border-top: 1px solid var(--rule); }
@media (max-width: 560px) { .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }