/* ==========================================================================
   Sideline SideKick site styles
   One stylesheet for every page. Colors live in :root, so rebranding is a
   one-line change per token.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Type
   One variable file carries both voices on this site. Archivo is a grotesque
   in the American signage lineage — field-house lettering, program covers,
   scoreboard placards — and it ships a width axis as well as a weight axis.

   So the condensed "agate" voice used for eyebrows, labels, table heads and
   step numbers is not a second typeface. It is this same face pulled narrow,
   which is how football statistics have always been set: a newspaper box
   score is condensed agate type. The label voice and the headline voice are
   therefore related by construction, and cost one request between them.

   Latin subset only. No page on this site sets non-latin text.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-latin-var.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212,
                 U+FEFF, U+FFFD;
}

:root {
  /* Brand
     Sampled from the SideKick logo (SideKick-1024/sidekick-1024-lockup).
     Every pairing below meets WCAG AA (4.5:1) for normal text. */
  --ink:        #0C243C;   /* headlines, dark surfaces — logo's deepest navy */
  --navy:       #0C3C60;   /* secondary dark — the badge ring navy */
  --slate:      #3A5068;   /* body text on light */
  --muted:      #5E7085;   /* captions, meta */
  --line:       #DCE3EA;   /* hairlines */
  --line-soft:  #EFF3F6;   /* interior rules inside a card */
  --wash:       #FAF6EC;   /* tinted section background — logo cream */
  --paper:      #FFFFFF;

  --accent:     #B43C24;   /* the one accent: buttons, rules, numerals */
  --accent-ink: #9A331E;   /* accent as small text on white (AA compliant) */
  --accent-soft:#FAEDE8;   /* accent tint background */

  /* Type */
  --sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI",
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* Space */
  --gutter: 24px;
  --measure: 1120px;
  --radius: 12px;
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--slate);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 .5em;
  font-weight: 700;
}

/* Headlines sit slightly narrow. At 92% width the grotesque picks up the
   density of signage lettering without reading as a condensed face, and it
   buys about a character and a half per line at the same size. */
h1 {
  font-size: clamp(2.1rem, 5.2vw, 3.4rem);
  letter-spacing: -0.03em;
  font-stretch: 92%;
}
h2 { font-size: clamp(1.6rem, 3.4vw, 2.25rem); font-stretch: 92%; }

/* The agate voice. Every small uppercase label on the site routes through
   here so they stay identical: eyebrows, stat labels, table heads, step
   numbers, breadcrumb directions. */
.eyebrow,
.step::before,
.ref thead th,
.pager .dir,
.toc h2,
.note h3,
.callout h3,
.topic .num {
  font-family: var(--sans);
  font-stretch: 74%;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Numbers align in columns wherever the page is reporting a figure. */
.stat b,
.hero-log,
.ref td,
.task > li::before { font-variant-numeric: tabular-nums; }
h3 { font-size: 1.2rem; letter-spacing: -0.01em; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent); }

/* Visible focus for keyboard users everywhere */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 12px 18px;
  z-index: 100;
}
.skip-link:focus { left: 8px; top: 8px; }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--narrow { max-width: 760px; }

section { padding-block: clamp(56px, 8vw, 96px); }

.section-head { max-width: 640px; margin-bottom: clamp(32px, 5vw, 52px); }
.section-head p { font-size: 1.05rem; }

.eyebrow {
  display: block;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: .75em;
}

.wash {
  background: var(--wash);
  border-block: 1px solid var(--line);
  position: relative;
}

.wash::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 9px;
  pointer-events: none;
  background-repeat: repeat-x;
  background-position: left top;
  background-image:
    repeating-linear-gradient(to right, rgba(180,60,36,.42) 0 1px, transparent 1px 60px),
    repeating-linear-gradient(to right, rgba(12,36,60,.15) 0 1px, transparent 1px 12px);
  background-size: 100% 9px, 100% 4px;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  background: var(--ink);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 50;
}

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 66px;
  flex-wrap: wrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 1.06rem;
  margin-right: auto;
}
.brand:hover { color: #fff; }
.brand img, .brand svg { width: 30px; height: 30px; flex: none; }

.site-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }

.site-nav a {
  color: rgba(255,255,255,.82);
  text-decoration: none;
  font-size: .95rem;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 7px;
}
.site-nav a:hover { color: #fff; background: rgba(255,255,255,.09); }
.site-nav a[aria-current="page"] {
  color: #fff;
  box-shadow: inset 0 -2px 0 var(--accent);
  border-radius: 7px 7px 0 0;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 24px;
  border-radius: 9px;
  font: inherit;
  font-weight: 650;
  font-size: 1rem;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-ink); color: #fff; }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); background: transparent; }

.on-dark .btn--ghost { color: #fff; border-color: rgba(255,255,255,.32); }
.on-dark .btn--ghost:hover { border-color: #fff; color: #fff; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.btn-note { font-size: .9rem; color: var(--muted); margin: 14px 0 0; }
.on-dark .btn-note { color: rgba(255,255,255,.62); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  background: var(--ink);
  color: #fff;
  padding-block: clamp(60px, 10vw, 108px);
  border-bottom: 3px solid var(--accent);
  position: relative;
}

/* --------------------------------------------------------------------------
   The yard-line rule
   A sideline is marked in measured ticks: a short one every yard, a taller
   one every fifth. Both layers are repeating gradients, so this ships as no
   asset at all and scales to any width.

   It earns its place by being structural rather than decorative — it marks
   where one part of the page ends and the next begins — so it appears in
   exactly two places: the foot of the hero, and the head of each tinted
   section. Never inside content.
   -------------------------------------------------------------------------- */

.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 10px;
  pointer-events: none;
  background-repeat: repeat-x;
  background-position: left bottom;
  background-image:
    repeating-linear-gradient(to right, rgba(255,255,255,.30) 0 1px, transparent 1px 60px),
    repeating-linear-gradient(to right, rgba(255,255,255,.13) 0 1px, transparent 1px 12px);
  background-size: 100% 10px, 100% 5px;
}

.hero h1 { color: #fff; max-width: 15ch; }

.hero .lede {
  font-size: clamp(1.08rem, 2.1vw, 1.32rem);
  color: rgba(255,255,255,.84);
  max-width: 52ch;
  margin-bottom: 1.6em;
}

.hero .eyebrow { color: #F0A276; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(32px, 6vw, 72px);
  align-items: center;
}

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
}

/* The play log in the hero.
   Decorative — the real screenshots are further down — but it is the first
   thing anyone sees, so it is set as the artifact it depicts rather than as a
   generic card: a stat sheet, with tabular figures so the yardage column
   reads straight down the way it does on paper. */
.hero-log {
  background: var(--paper);
  border-radius: 14px;
  padding: 20px 22px;
  box-shadow: 0 24px 50px -24px rgba(0,0,0,.6);
}

.hero-log .log-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
  margin-bottom: 4px;
}
.hero-log .log-head strong {
  color: var(--ink);
  letter-spacing: -.02em;
  font-stretch: 92%;
  font-size: 1.02rem;
}
.hero-log .log-head span {
  color: var(--muted);
  font-size: .76rem;
  font-stretch: 74%;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
}

.hero-log table {
  width: 100%;
  border-collapse: collapse;
  font-size: .86rem;
  color: var(--slate);
}
.hero-log td { padding: 9px 0; }
.hero-log tr + tr td { border-top: 1px solid var(--line-soft); }
.hero-log .n { color: var(--accent-ink); font-weight: 700; width: 2.2rem; }
.hero-log .call { color: var(--ink); font-weight: 600; }
.hero-log .res { text-align: right; white-space: nowrap; }
.hero-log .res strong { color: var(--ink); }

/* Stat strip under the hero */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--line);
  border-bottom: 1px solid var(--line);
}
.stat {
  background: var(--paper);
  padding: 26px var(--gutter);
  text-align: center;
}
.stat b {
  display: block;
  font-size: 1.85rem;
  color: var(--ink);
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.stat span {
  font-size: .9rem;
  color: var(--muted);
  font-stretch: 84%;
}

/* --------------------------------------------------------------------------
   Feature cards
   -------------------------------------------------------------------------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
  gap: 22px;
}

/* #features has nine cards, so the auto-fit grid lands on a clean 3x3.
   #parents has exactly four, which would read as 3 + 1 orphan at the same
   track size. A wider minimum drops it to a deliberate 2x2 and still
   collapses to one column on a phone. */
#parents .cards { grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); }

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 26px;
}
.card h3 { margin-bottom: .45em; }
.card p { font-size: .97rem; margin-bottom: 0; }

.card .ico {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  margin-bottom: 16px;
}
.card .ico svg { width: 21px; height: 21px; }

/* --------------------------------------------------------------------------
   Steps (How it works)
   -------------------------------------------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(24px, 4vw, 40px);
  counter-reset: step;
}

.step { position: relative; padding-top: 14px; border-top: 3px solid var(--accent); }
.step::before {
  counter-increment: step;
  content: counter(step);
  display: block;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
  color: var(--accent-ink);
  margin-bottom: 9px;
}
.step h3 { margin-bottom: .4em; }
.step p { font-size: .97rem; }

/* --------------------------------------------------------------------------
   Screenshot gallery
   -------------------------------------------------------------------------- */

.shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: clamp(18px, 3vw, 30px);
}
@media (min-width: 760px) {
  .shots { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
}

.shot figure { margin: 0; }

.shot .frame {
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 8px;
  background: var(--paper);
  box-shadow: 0 12px 30px -18px rgba(11,22,36,.45);
}
.shot .frame img { border-radius: 15px; width: 100%; }

.shot figcaption {
  margin-top: 14px;
  font-size: .92rem;
  color: var(--muted);
  text-align: center;
}

/* Placeholder shown until real screenshots are dropped in */
.shot .frame--empty {
  aspect-ratio: 9 / 19.5;
  max-height: 430px;
  display: grid;
  place-items: center;
  background: var(--wash);
  color: var(--muted);
  font-size: .85rem;
  text-align: center;
  padding: 20px;
  border-radius: 15px;
}

/* iPad landscape showcase below the phone gallery */
.ipad-shot {
  margin: clamp(36px, 6vw, 64px) 0 0;
}

.ipad-frame {
  max-width: 860px;
  margin-inline: auto;
  border: 1px solid var(--line);
  border-radius: 26px;
  padding: 14px;
  background: var(--paper);
  box-shadow: 0 20px 46px -22px rgba(11,22,36,.5);
}
.ipad-frame img { border-radius: 14px; width: 100%; }

.ipad-shot figcaption {
  margin-top: 16px;
  font-size: .92rem;
  color: var(--muted);
  text-align: center;
}

/* --------------------------------------------------------------------------
   Prose (support, privacy, FAQ body copy)
   -------------------------------------------------------------------------- */

.prose { font-size: 1.03rem; }
.prose h2 { margin-top: 1.9em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.6em; }
.prose ul, .prose ol { padding-left: 1.25em; margin: 0 0 1.2em; }
.prose li { margin-bottom: .45em; }
.prose li::marker { color: var(--accent); }

.page-head {
  background: var(--wash);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(40px, 6vw, 64px);
  position: relative;
}

/* An interior page's head is its hero, so it carries the rule at its foot
   the way the home page's hero does. Without this the signature would live
   on one page out of sixteen. */
.page-head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 9px;
  pointer-events: none;
  background-repeat: repeat-x;
  background-position: left bottom;
  background-image:
    repeating-linear-gradient(to right, rgba(180,60,36,.42) 0 1px, transparent 1px 60px),
    repeating-linear-gradient(to right, rgba(12,36,60,.15) 0 1px, transparent 1px 12px);
  background-size: 100% 9px, 100% 4px;
}
.page-head h1 { margin-bottom: .3em; }
.page-head .meta { color: var(--muted); font-size: .95rem; margin: 0; }

/* The Headset page head carries its own app icon. The icon's ground is the
   same cream as `--wash`, so without the hairline it reads as floating
   artwork rather than as an app icon — which is the whole point of it. */
.head-with-icon { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.head-with-icon > div { min-width: 0; flex: 1 1 260px; }
.app-icon--lg { width: 76px; height: 76px; border: 1px solid var(--line); }

.callout {
  background: var(--accent-soft);
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 20px 24px;
  margin: 0 0 1.6em;
}
.callout p:last-child { margin-bottom: 0; }

.note {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 24px;
  background: var(--wash);
  margin: 0 0 1.6em;
}
.note p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.faq { border-top: 1px solid var(--line); }

.faq details {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 22px 44px 22px 0;
  position: relative;
  font-weight: 650;
  font-size: 1.06rem;
  color: var(--ink);
  line-height: 1.4;
}
.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 30px;
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); top: 34px; }

.faq summary:hover { color: var(--accent-ink); }

.faq .answer { padding: 0 0 24px; max-width: 68ch; }
.faq .answer p { font-size: .99rem; }
.faq .answer p:last-child { margin-bottom: 0; }

.faq-group { margin-bottom: 52px; }
.faq-group > h2 { margin-bottom: .6em; }

/* --------------------------------------------------------------------------
   CTA band
   -------------------------------------------------------------------------- */

.cta {
  background: var(--ink);
  color: #fff;
  text-align: center;
  position: relative;
}

/* The closing band gets the rule at its head, so the page is bracketed
   between two marked sidelines rather than carrying the device once. */
.cta::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 10px;
  pointer-events: none;
  background-repeat: repeat-x;
  background-position: left top;
  background-image:
    repeating-linear-gradient(to right, rgba(255,255,255,.28) 0 1px, transparent 1px 60px),
    repeating-linear-gradient(to right, rgba(255,255,255,.12) 0 1px, transparent 1px 12px);
  background-size: 100% 10px, 100% 5px;
}
.cta h2 { color: #fff; }
.cta p { color: rgba(255,255,255,.8); max-width: 54ch; margin-inline: auto; }
.cta .btn-row { justify-content: center; margin-top: 28px; }

/* Both apps, side by side, at the point somebody decides to download.
   This is the only place the Headset icon appears outside /headset, and
   the reason the section carries icons at all: the two apps are a pair
   and one of them is free with the other's subscription.
   `.cta p` centres and clamps to 54ch; these override it explicitly rather
   than relying on source order, since both selectors are (0,1,1). */
.apps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr));
  gap: 16px;
  margin-top: 30px;
  text-align: left;
}
.app {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius);
  background: rgba(255,255,255,.05);
}
.app-icon { flex: none; border-radius: 22%; display: block; }
.app h3 { color: #fff; font-size: 1.06rem; margin: 0 0 5px; letter-spacing: -.01em; }
.cta .app p {
  color: rgba(255,255,255,.74);
  font-size: .92rem;
  line-height: 1.5;
  max-width: none;
  margin: 0 0 11px;
  margin-inline: 0;
  text-align: left;
}
.app .free { color: #F2C4B4; font-weight: 700; }
.app .store {
  color: #fff;
  font-weight: 650;
  font-size: .92rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.42);
  padding-bottom: 1px;
}
.app .store:hover { border-bottom-color: #fff; }
.app .store:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--navy);
  color: rgba(255,255,255,.68);
  padding-block: 44px;
  font-size: .93rem;
}

.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  align-items: center;
  justify-content: space-between;
}

.site-footer a { color: rgba(255,255,255,.88); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }

.site-footer nav { display: flex; gap: 22px; flex-wrap: wrap; }
.site-footer .colophon { margin: 0; }

/* Both apps, on every page.
   There is another developer's app on the App Store called plain "Sideline
   Sidekick", so a visitor who lands deep in the guides should still be able to
   see which two apps this site is about and go straight to the right listings.
   Takes its own full-width row above the colophon. */
.footer-apps {
  flex: 1 0 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 30px;
  padding-bottom: 26px;
  border-bottom: 1px solid rgba(255,255,255,.15);
}
.footer-app { display: flex; align-items: center; gap: 11px; }
.footer-app img { border-radius: 22%; flex: none; display: block; }
.footer-app .fa-txt { display: block; }
.footer-app .fa-name {
  display: block; color: #fff; font-weight: 650;
  font-size: .95rem; line-height: 1.25;
}
.footer-app .fa-sub {
  display: block; color: rgba(255,255,255,.6);
  font-size: .82rem; line-height: 1.3;
}
/* `.site-footer a:hover` underlines the whole anchor; keep it on the name. */
.site-footer .footer-app:hover { text-decoration: none; }
.site-footer .footer-app:hover .fa-name { text-decoration: underline; }

/* An app icon set beside a heading that names that app. */
.h2-icon {
  width: 30px; height: 30px; border-radius: 22%;
  vertical-align: -7px; margin-right: 10px; border: 1px solid var(--line);
}

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */

.vh {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.lead { font-size: 1.12rem; color: var(--slate); }
.center { text-align: center; }

/* ==========================================================================
   Guides
   The coach walkthrough at /guides. Reuses the tokens above; adds only the
   components a step-by-step page needs and the site did not already have.
   ========================================================================== */

/* Breadcrumb ------------------------------------------------------------- */

.crumbs {
  font-size: .9rem;
  color: var(--muted);
  margin: 0 0 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent-ink); text-decoration: underline; }
.crumbs span[aria-hidden] { opacity: .5; }

/* The topic index on the hub --------------------------------------------- */

.topics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: topic;
}

.topic { margin: 0; }

.topic a {
  display: block;
  height: 100%;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 24px 22px;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, transform .15s ease;
}
.topic a:hover,
.topic a:focus-visible {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.topic .num {
  counter-increment: topic;
  display: inline-block;
  font-size: .78rem;
  letter-spacing: .08em;
  color: var(--accent-ink);
  background: var(--accent-soft);
  border-radius: 6px;
  padding: 3px 8px;
  margin-bottom: 12px;
}

.topic h3 { margin-bottom: .35em; font-size: 1.12rem; }
.topic p { font-size: .95rem; margin: 0; color: var(--slate); }
.topic .mins { display: block; margin-top: 12px; font-size: .85rem; color: var(--muted); }

/* On-page contents ------------------------------------------------------- */

.toc {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin: 0 0 2em;
  background: var(--wash);
}
.toc h2 {
  font-size: .82rem !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 .8em !important;
}
.toc ol { margin: 0; padding-left: 1.1em; }
.toc li { margin-bottom: .35em; font-size: .97rem; }

/* Numbered task steps ---------------------------------------------------- */

.task {
  list-style: none;
  padding: 0;
  margin: 0 0 1.8em;
  counter-reset: task;
}

.task > li {
  position: relative;
  padding-left: 46px;
  margin-bottom: 1.15em;
}

.task > li::before {
  counter-increment: task;
  content: counter(task);
  position: absolute;
  left: 0;
  top: -1px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: .88rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.task > li > p:first-child { margin-bottom: .35em; }
.task ul { margin-top: .5em; }

/* A label exactly as it appears in the app ------------------------------- */

.ui {
  font-family: var(--sans);
  font-weight: 600;
  color: var(--ink);
  background: #EEF2F6;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 6px;
  font-size: .93em;
  white-space: nowrap;
}

.path .ui + .ui { margin-left: 2px; }
.path { white-space: normal; }

/* Callout variants ------------------------------------------------------- */

.note--warn {
  background: #FFF6E8;
  border-color: #E8D6B4;
}
.note--warn > p:first-child > strong:first-child { color: #7A4A08; }

.note h3,
.callout h3 {
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin: 0 0 .7em;
  color: var(--muted);
}

/* Screenshot figures inside a guide -------------------------------------- */

.guide-fig {
  margin: 0 0 1.8em;
}
.guide-fig .frame {
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background: var(--wash);
  max-width: 300px;
}
.guide-fig--wide .frame { max-width: 100%; border-radius: 12px; }
.guide-fig figcaption {
  font-size: .9rem;
  color: var(--muted);
  margin-top: 10px;
  max-width: 60ch;
}

.fig-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 22px;
  margin: 0 0 1.8em;
}
.fig-pair .guide-fig { margin: 0; }
.fig-pair .guide-fig .frame { max-width: 100%; }

/* Reference tables ------------------------------------------------------- */

.table-scroll { overflow-x: auto; margin: 0 0 1.8em; }

.ref {
  border-collapse: collapse;
  width: 100%;
  min-width: 520px;
  font-size: .95rem;
}
.ref th, .ref td {
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.ref thead th {
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom-width: 2px;
}
.ref tbody tr:last-child td { border-bottom: 0; }
.ref .yes { color: #1C6B3A; font-weight: 600; }
.ref .no  { color: var(--muted); }

/* Previous / next -------------------------------------------------------- */

.pager {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin-top: 3em;
  padding-top: 2em;
  border-top: 1px solid var(--line);
}
.pager a {
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  text-decoration: none;
  color: inherit;
}
.pager a:hover { border-color: var(--accent); }
.pager .dir {
  display: block;
  font-size: .78rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 5px;
}
.pager .name { font-weight: 700; color: var(--ink); }
.pager .next { text-align: right; }

@media print {
  .site-header, .site-footer, .pager, .crumbs { display: none; }
}

/* Sample files shown in a guide ------------------------------------------ */

.prose pre {
  background: var(--ink);
  color: #E8EEF4;
  border-radius: var(--radius);
  padding: 18px 20px;
  margin: 0 0 1.6em;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: .88rem;
  line-height: 1.6;
}
.prose pre code { font: inherit; color: inherit; background: none; padding: 0; border: 0; }

.prose :not(pre) > code {
  font-family: var(--mono);
  font-size: .88em;
  background: #EEF2F6;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 5px;
  color: var(--ink);
}

/* Guide clips ------------------------------------------------------------- */

.clip {
  margin: 0 0 1.8em;
}

.clip video {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--wash);
}

.clip figcaption {
  font-size: .9rem;
  color: var(--muted);
  margin-top: 10px;
  max-width: 60ch;
}

.clip figcaption b {
  color: var(--ink);
  font-weight: 600;
}

/* The clip index on the guides hub. Poster + label; the page each one lives
   on is where it actually plays, so these are links, not players — six
   autoloading videos on one page is a slow page. */

.clip-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 18px;
  list-style: none;
  padding: 0;
  margin: 0 0 1.6em;
}

.clip-strip a {
  display: block;
  text-decoration: none;
  color: inherit;
}

.clip-strip .frame {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--wash);
}

.clip-strip img { width: 100%; height: auto; display: block; }

.clip-strip .frame::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 44px; height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  background: rgba(12,36,60,.72);
  /* A play triangle, drawn rather than shipped as an asset. */
  background-image:
    linear-gradient(45deg, transparent 48%, #fff 48%, #fff 52%, transparent 52%);
  background-size: 0 0;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}

.clip-strip .frame .play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: 0; height: 0;
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #fff;
  margin-left: 3px;
}

.clip-strip a:hover .frame { border-color: var(--accent); }

.clip-strip .label {
  display: block;
  margin-top: 9px;
  font-size: .92rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}
.clip-strip .len { color: var(--muted); font-weight: 400; font-size: .85rem; }

/* A sixth nav item (Pricing) pushed the header to three rows at 320px — 181px
   of a 568px-tall screen, and it is sticky, so it stays there. Tightening the
   links buys a row back without touching the layout anywhere else. Measured:
   181px -> 136px at 320px, unchanged at 375px and above. */
@media (max-width: 400px) {
  .site-nav a { padding: 6px 8px; font-size: .88rem; }
  .site-header .wrap { gap: 12px; }
}