/*
 * The public site: the page frame, the chrome, and one block per section shape.
 *
 * Structure follows the comp, and it is inside-out from how the app is built. ONE container
 * (--container, 1180px) wraps the header and every section, rather than full-bleed sections each
 * with a container inside. Only `yield :full_bleed` and the footer break out to full width.
 *
 * SECTIONS DO NOT RULE THEMSELVES OFF. The comp puts no line between the hero, the price grid, the
 * alerts and the share note; separation is padding and the one raised surface. The page's only
 * horizontal rules are the console band's top border and the footer's. `.band--ruled` exists for a
 * section that genuinely needs one, and is deliberately opt-in -- the default used to carry the
 * rule, and every page quietly grew a striped look the design never had.
 *
 * Breakpoints are 1120px and 900px, which are the comp's own `mid` and `narrow`. The comp
 * computes them in JS off window.innerWidth; they are media queries here, because nothing about
 * them needs to be dynamic.
 */

/* ------------------------------------------------------------ Page frame --- */
/* overflow-x on .page rather than on html/body: a scroll container on the root element makes
   `position: sticky` on the header resolve against that container instead of the viewport, and the
   header silently stops sticking. On a descendant it does not. */
.page { position: relative; overflow-x: hidden; }

/* The one container. Sections live INSIDE it, separated by padding. */
.page-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.band { padding: var(--section-y) 0; }
.band--tight { padding: clamp(40px, 5vw, 56px) 0; }
.band--hero { padding: clamp(36px, 7vw, 76px) 0 clamp(20px, 3vw, 28px); }
.band--creator { padding: clamp(56px, 7vw, 88px) 0; }

/* Opt-in, for a section that needs a line under it. Nothing on the landing page does. */
.band--ruled { border-bottom: 1px solid var(--line1); }

/* ---------------------------------------------------------------- Nav ------- */
/* Sticky and blurred, over --bg-82. It stays because the last-updated stamp it carries is the one
   number that says the product is awake, and a reader scrolling a six-month price grid should not
   have to go back up to find out how fresh it is.
   z-index 50 clears the month grid's selected-day halo and the sticky weekday row inside it. */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 12px 0;
  background: var(--bg-82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line1);
}
.site-nav__links {
  display: flex;
  gap: 26px;
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.site-nav__links a { color: var(--text-4); transition: color var(--motion); }
.site-nav__links a:hover { color: var(--text); }

.site-nav__end { display: flex; align-items: center; gap: 10px; min-width: 0; }

/* The last-updated stamp. min-width:0 and the ellipsis are what let it be the first thing to give
   at 360px: a header that grows a second line pushes the hero off the screen. */
.status-line {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.status-line__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
  flex: none;
  animation: pulse-dot 2.4s ease-in-out infinite;
}
@keyframes pulse-dot { 0%, 100% { opacity: 1 } 50% { opacity: 0.25 } }

/* Under 900px the nav links go, leaving the mark, the stamp and the one control. The stamp stays:
   it is the smallest thing on the page and the only one that says the data is alive. */
@media (max-width: 899px) {
  .site-nav__links { display: none; }
  .site-nav { gap: 16px; justify-content: space-between; }
}
/* Below 480px even the stamp is too much beside a 44px control. */
@media (max-width: 479px) {
  .status-line { display: none; }
}

/* The wordmark, beside the mark. */
.logo {
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.logo__word { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; }

/* --------------------------------------------------------------- Hero ------- */
/* Also the console band's "Signed in · your alerts" eyebrow. The comp asks for --pick-text there
   and --accent-text here; the two are the same value in both themes, so one rule serves both. */
.hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0 0 18px;
}
.hero__lede strong { color: var(--text); font-weight: 600; }

/* The agent list in the hero's 3-col column: rows, each ruled off, behind a left rule. */
.agent-list { display: flex; flex-direction: column; gap: 14px; }
.agent-list__item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 14.5px;
  color: var(--text-3);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line1);
  transition: color var(--motion);
}
.agent-list__item:hover { color: var(--text); }
.agent-list__item .glyph { color: var(--text-5); font-size: 11px; }

/* A column that hangs off a vertical rule. Disappears with the grid under 900px. */
.ruled-col { border-left: 1px solid var(--line1); padding-left: 28px; }
@media (max-width: 899px) { .ruled-col { border-left: 0; padding-left: 0; } }

/* ----------------------------------------------------------- Checklist ----- */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 32px; }
.checklist li {
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-size: 16px;
  color: var(--text-2);
}
.checklist .glyph { color: var(--accent-text); font-family: var(--font-mono); font-size: 13px; }
@media (max-width: 899px) { .checklist { grid-template-columns: 1fr; } }

/* ------------------------------------------------------- Numbered cells ---- */
/* The continuous-rule grid: a 1px --rule background showing through a 1px gap between --bg
   children, so the dividers read as ONE grid rather than a row of bordered boxes. */
.cells { display: grid; gap: 1px; background: var(--line1); }
.cells--bordered { border: 1px solid var(--line1); }
.cells--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cells--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cells > * { background: var(--bg); padding: 26px 24px 30px; }
.cells__n { font-family: var(--font-mono); font-size: 11px; color: var(--accent-text); margin-bottom: 16px; }
.cells__t { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 8px; }
.cells__d { font-size: 14.5px; line-height: 1.5; color: var(--text-4); }

/* The 10-up inventory: taller cells, dim numerals, and the whole cell lifts to --bg-raised. */
.cells--box > * { padding: 26px 22px 30px; min-height: 168px; display: flex; flex-direction: column; transition: background var(--motion); }
.cells--box > *:hover { background: var(--surface); }
.cells--box .cells__n { font-size: 10.5px; color: var(--text-5); margin-bottom: 22px; }
.cells--box .cells__t { font-size: 16.5px; }
.cells--box .cells__d { font-size: 14px; line-height: 1.45; }
@media (max-width: 1119px) { .cells--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 899px)  { .cells--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
                             .cells--2 { grid-template-columns: 1fr; } }

/* ---------------------------------------------------- Essentials cards ----- */
/* Separate bordered cards, NOT the continuous-rule grid: these are three parallel offers, and
   the gap between them is what says so. */
.offers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.offer {
  border: 1px solid var(--line1);
  background: var(--surface);
  padding: 30px 28px 34px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: border-color var(--motion);
}
.offer:hover { border-color: var(--accent-35); }
.offer__kicker {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.offer__title { font-size: 26px; line-height: 1.1; letter-spacing: -0.025em; font-weight: 600; }
.offer__list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.offer__list li {
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-size: 15px;
  color: var(--text-3);
  border-top: 1px solid var(--line1);
  padding-top: 10px;
}
.offer__list .glyph { color: var(--text-5); font-family: var(--font-mono); font-size: 11px; }
@media (max-width: 899px) { .offers { grid-template-columns: 1fr; } }

/* -------------------------------------------------------- Statement -------- */
/* Section 05 is one paragraph set at heading scale, with its first sentence carrying the weight.
   Lighter (500) and in --ink-2, so it reads as a said thing rather than a titled one. */
.statement {
  font-size: clamp(25px, 3.4vw, 40px);
  line-height: 1.18;
  letter-spacing: -0.025em;
  font-weight: 500;
  margin: 0;
  color: var(--text-2);
}
.statement strong { color: var(--text); font-weight: 600; }

/* ------------------------------------------------------------- Mobile ------ */
/* margin-bottom, because a chips row is a CONTROL for the block under it and every use puts that
   block immediately after: the table on /flights, the calendar on a route board and on a watch.
   None of those three carries a top margin of its own, so the row sat flush on the thing it
   filters -- the pills read as the table's header rather than as a choice above it. 24px is
   .stack-above's step, and it COLLAPSES with it, so the one place that already had a
   `.section-label.stack-above` after the pills keeps the same 24px it had. */
.chips { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
.chip {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-3);
  border: 1px solid var(--line2);
  padding: 12px 18px;
}
/* The honest caveat, in the gold voice rather than the danger one: something to know before you
   plan a launch, not a failure. */
.caveat { border: 1px solid var(--accent-35); background: var(--surface); padding: 28px 26px; align-self: center; }
.caveat__label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0 0 14px;
}
.caveat p { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--text-3); max-width: none; }

/* ------------------------------------------------------ Accent-topped ------ */
.topped-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.topped { border-top: 1px solid var(--accent); padding-top: 18px; }
.topped__kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0 0 12px;
}
.topped__title { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 8px; }
.topped__body { font-size: 14.5px; line-height: 1.5; color: var(--text-4); margin: 0; }
@media (max-width: 899px) { .topped-row { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ Pricing ------ */
.plan {
  border: 1px solid var(--line1);
  background: var(--surface);
  padding: 32px 28px 34px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
}
/* The one accented card in this view. */
.plan--accent { border-color: var(--accent); background: var(--field); }
/* The saving reads as a tab stuck on the corner, not as another line of copy. -1px so it covers
   the card's own border rather than sitting inside it. */
.plan__tab {
  position: absolute;
  top: -1px;
  right: -1px;
  background: var(--accent);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 10px;
}
.plan__kicker {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-4);
}
.plan--accent .plan__kicker { color: var(--accent-text); }
.plan__price {
  font-size: clamp(38px, 3.8vw, 46px);
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 600;
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.plan__period { font-size: 17px; color: var(--text-4); font-weight: 400; letter-spacing: 0; }
.plan__was { font-size: 22px; color: var(--text-4); font-weight: 400; text-decoration: line-through; }
.plan__meta { font-size: 14.5px; color: var(--text-4); margin: 0; }
.plan__cta { margin-top: auto; }

/* "Both plans include" is a panel hanging off a rule, not a fourth card. */
.plan-extras__list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 11px; margin: 0 0 26px; }
.plan-extras__list li { display: flex; gap: 12px; align-items: baseline; font-size: 15.5px; color: var(--text-3); }
.plan-extras__list .glyph { color: var(--accent-text); font-family: var(--font-mono); font-size: 12px; }
.plan-extras__note { font-size: 14px; color: var(--text-4); border-top: 1px solid var(--line1); padding-top: 16px; margin: 0; }
.plan-extras__note strong { color: var(--text); font-weight: 600; }

/* ----------------------------------------------------------- Showcase ------ */
/* Two columns of rows: the shot with its name and domain, then the blurb beside it. The class
   name is `.site` because spec/requests/showcase_spec.rb splits the page on it. */
.showcase-rows { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 48px; }
.site {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 20px;
  align-items: start;
  padding: 20px 0;
  border-bottom: 1px solid var(--line1);
  color: var(--text);
  transition: color var(--motion);
}
a.site:hover { color: var(--accent-text); }
.site__shot { position: relative; display: block; }
.site__shot img { width: 100%; height: auto; display: block; border: 1px solid var(--line1); margin-bottom: 12px; }
.site__wip {
  position: absolute;
  top: 8px;
  left: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--accent);
  padding: 3px 7px;
}
.site__text { display: block; }
.site__name { display: block; font-size: 16.5px; font-weight: 600; letter-spacing: -0.015em; }
.site__domain { display: block; font-family: var(--font-mono); font-size: 12px; color: var(--text-4); margin-top: 2px; }
.site__body { display: block; font-size: 14.5px; color: var(--text-4); line-height: 1.45; margin-top: 10px; }
@media (max-width: 899px) {
  .showcase-rows { grid-template-columns: 1fr; }
  .site { grid-template-columns: 1fr; }
}


/* ------------------------------------------------------------ Creator ------ */
.creator {
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.45;
  color: var(--text-2);
  margin: 0;
  max-width: none;
}
.creator__handle { display: block; margin-top: 18px; font-family: var(--font-mono); font-size: 13px; color: var(--accent-text); }

/* ------------------------------------------------------- Marquee + CTA ----- */
.closing { border-top: 1px solid var(--line1); overflow: hidden; }
.marquee {
  display: flex;
  width: max-content;
  animation: marquee-drift 34s linear infinite;
  padding: 22px 0;
  border-bottom: 1px solid var(--line1);
  opacity: 0.5;
}
/* The run is duplicated in the markup, so translating by half the track loops seamlessly. */
.marquee__run {
  display: flex;
  gap: 40px;
  padding-right: 40px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-4);
}
@keyframes marquee-drift { from { transform: translateX(0) } to { transform: translateX(-50%) } }

.closing__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(72px, 9vw, 110px) var(--gutter) clamp(80px, 10vw, 120px);
}
.closing h2 {
  font-size: clamp(34px, 5.6vw, 62px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-weight: 600;
  margin: 0 0 22px;
  text-wrap: balance;
}
.closing__lede { font-size: 18.5px; color: var(--text-4); margin: 0; max-width: 26em; }
.closing__cta { align-self: end; }
.closing__cta .btn { display: flex; width: 100%; padding: 20px 24px; font-size: 14px; }

/* ------------------------------------------------------------- Footer ------ */
.site-footer { border-top: 1px solid var(--line1); }
.site-footer__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 32px var(--gutter) 26px;
  display: flex;
  align-items: baseline;
  gap: 40px;
  flex-wrap: wrap;
}
.site-footer__links {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.site-footer__links a { color: var(--text-4); transition: color var(--motion); }
.site-footer__links a:hover { color: var(--text); }
/* Right-aligned against a 30em measure, which wraps it. balance splits the two lines evenly
   instead of leaving a two-word orphan hanging off a long first line.
   --text-4 rather than anything dimmer: it is the darkest the system allows on a word. */
/* LEFT, not right. Right-aligned over two ragged lines the second line started in the middle of
   nowhere and read as broken. It still sits at the end of the row -- margin-left:auto does that,
   and it is the alignment of the text inside the block that was wrong. */
/* RIGHT-ALIGNED, and that is what makes it look aligned at all.
   margin-left:auto pushes the BLOCK flush to the right gutter, but its text was left-aligned and
   ragged, so no line actually reached that edge: the copyright ended 70-130px short of the stamp
   directly below it and lined up with nothing. It reads worst in the middle widths, where the block
   has wrapped onto its own flex row and floats in open space. Aligning the text right puts its edge
   on the same gutter as the stamp, which is the line the eye is looking for. */
.site-footer__legal {
  margin-left: auto;
  font-size: 13px;
  color: var(--text-4);
  text-align: right;
  max-width: 34em;
  text-wrap: balance;
}

/* The comp's closing line, and the stamp again. Ruled off the row above so the footer reads as two
   things rather than one long list. */
/* The stamp and the language switch sit together at the right end of the closing line. A row
   rather than two flex children of .site-footer__note, so the pair stays adjacent when the line
   wraps under a narrow viewport instead of the switch jumping to the far edge on its own. */
.site-footer__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.site-footer__note {
  max-width: var(--container);
  margin: 0 auto;
  padding: 20px var(--gutter) 40px;
  border-top: 1px solid var(--line1);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.site-footer__line { margin: 0; font-size: 13px; color: var(--text-4); max-width: 62ch; }
/* The header's stamp pulses, because there it is saying the product is awake. Down here it is a
   footnote, so it keeps the type and drops the dot. */
.status-line--quiet { font-size: 11px; color: var(--text-4); }

@media (max-width: 899px) {
  /* Full width and back to the left edge: there is no second column to align against down here,
     and right-aligned prose on a phone reads as a mistake. */
  .site-footer__legal { margin-left: 0; text-align: left; }
}

/* ------------------------------------------------- Section headings -------- */
/* h2 at two sizes: the standard section heading, and the larger one the design uses where a
   section is carrying the page (what's in the box, pricing). */
.band h2 {
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: 600;
  margin: 0 0 22px;
}
/* Balanced only where a heading sits in a narrow column and would otherwise leave one word
   stranded. The wide section headings are left to break naturally, which is what the design does. */
.band .col-5 > h2, .closing h2 { text-wrap: balance; }
.band h2.h2--large {
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.0;
  letter-spacing: -0.035em;
  margin: 0;
}
.band h2:last-child { margin-bottom: 0; }

.section-head { margin-bottom: 48px; }
/* Bottom-aligned, so the supporting line sits on the heading's baseline rather than floating
   at the top of its column. */
.section-head__aside { font-size: 15.5px; color: var(--text-4); margin: 0; align-self: end; }
.section-label { margin-bottom: 24px; }
.section-lede { font-size: 17.5px; color: var(--text-4); margin: 0; max-width: 26em; }

/* Per-section spacing that is genuinely local, rather than a shared rhythm. */
.native__lede { margin-bottom: 32px; }
.distribution__lede { max-width: 34em; margin-bottom: 44px; }
.statement-row { align-items: center; }
.statement-row .label { align-self: start; }
.plan-extras__label { margin-bottom: 18px; }
.plan__meta--gold { color: var(--accent-text); }

/* The essentials row uses the 2+5+3 header, which needs more air before the cards than the
   plainer 2+8 sections do. */
#features .section-head { margin-bottom: 52px; }
#pricing .section-head { margin-bottom: 48px; }

/* ------------------------------------------------------------------ Docs --- */
/* Long-document pages: a sticky 2-column contents beside a 6-column measure. */
.doc-page { padding: var(--section-y) 0; }
.toc { position: sticky; top: 24px; align-self: start; }
.toc__title { margin-bottom: 12px; }
.toc__list { list-style: none; margin: 0; padding: 0; }
.toc__list li { margin-bottom: 8px; }
.toc__list a { color: var(--text-3); font-size: 14px; }
.toc__list a:hover { color: var(--text); }
@media (max-width: 899px) {
  /* Two links stacked above a document are furniture, not navigation. */
  .toc { display: none; }
}

.doc-body h2 { margin-top: 56px; scroll-margin-top: 24px; }
.doc-body h2:first-of-type { margin-top: 0; }
.doc-body h3 { margin-top: 28px; }
.doc-body p, .doc-body li { color: var(--text-2); }
.doc-body__meta { color: var(--text-4); font-size: 14px; }

.plan-extras { align-self: start; }

/* The in-app subscription page (/pricing), which is a different page from the kit's own pricing
   section and keeps its own simpler price line. */
.price {
  font-size: clamp(38px, 3.8vw, 46px);
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 600;
  color: var(--text);
  margin: 8px 0;
  font-variant-numeric: tabular-nums;
}
.price__was { font-size: 22px; font-weight: 400; color: var(--text-4); text-decoration: line-through; letter-spacing: normal; }
/* letter-spacing: normal is load-bearing, not tidying. The -0.04em on .price is resolved against
   .price's own 46px and then INHERITS as that absolute -1.84px, which at 17px is wide enough to
   swallow the word spaces outright: "per month" rendered as "permonth". Any small text nested
   inside display type has to reset it. */
.price__period { font-size: 17px; font-weight: 400; color: var(--text-4); letter-spacing: normal; }

/* The agent pages state their fit in the hero where the home page lists agents. */

/* Text inside a container that already spaces its children with gap. The base 1em paragraph
   margin would stack on top of that gap and add a line of air to every card. */
.offer__kicker, .offer__title,
.cells__n, .cells__t, .cells__d,
.topped__kicker, .topped__title, .topped__body,
.plan__kicker, .plan__price, .plan__meta,
.checklist li, .offer__list li, .plan-extras__list li,
.site__name, .site__domain, .site__body,
.caveat p, .creator, .closing__lede, .section-lede, .section-head__aside {
  margin-block: 0;
}
/* These carry their own deliberate spacing, restored after the reset above. */
.cells__n { margin-bottom: 16px; }
.cells__t { margin-bottom: 8px; }
.cells--box .cells__n { margin-bottom: 22px; }
.topped__kicker { margin-bottom: 12px; }
.topped__title { margin-bottom: 8px; }
.native__lede { margin-bottom: 32px; }
.distribution__lede { margin-bottom: 44px; }
.section-label { margin-bottom: 24px; }

/* ---------------------------------------------------------------- Mark ------ */
/* The logo mark, drawn in CSS: a dot for the island and a plane orbiting it for the one nonstop.
   Sized off font-size so the same markup serves the 26px nav and the 76px icon sheet -- set
   --mark-size on the wrapper, and every part scales from it. */
.mark {
  --mark-size: 26px;
  position: relative;
  width: var(--mark-size);
  height: var(--mark-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.mark__dot {
  width: calc(var(--mark-size) * 0.5);
  height: calc(var(--mark-size) * 0.5);
  border-radius: 50%;
  background: var(--accent);
  display: block;
  animation: mark-breathe 3.6s ease-in-out infinite;
}
.mark__orbit {
  position: absolute;
  inset: 0;
  animation: mark-orbit 6.5s linear infinite;
}
/* The nose points along the orbit, not out of it -- hence the 90deg on the glyph while the spin
   lives on .mark__orbit. One element cannot carry both. */
.mark__plane {
  position: absolute;
  top: calc(var(--mark-size) * -0.04);
  left: 50%;
  width: calc(var(--mark-size) * 0.31);
  height: calc(var(--mark-size) * 0.31);
  margin-left: calc(var(--mark-size) * -0.155);
  background: var(--plane);
  display: block;
  transform: rotate(90deg);
  clip-path: polygon(50% 0%, 60% 38%, 100% 62%, 100% 74%, 58% 62%, 56% 84%, 74% 96%, 74% 100%, 50% 92%, 26% 100%, 26% 96%, 44% 84%, 42% 62%, 0% 74%, 0% 62%, 40% 38%);
}
@keyframes mark-breathe {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 3px var(--accent-16); }
  50% { transform: scale(0.86); box-shadow: 0 0 0 7px var(--accent-08); }
}
@keyframes mark-orbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* The static ring variant, for the icon sheet and anywhere the orbit would be noise. */
.mark--still .mark__dot { animation: none; box-shadow: none; }
.mark--still .mark__orbit { animation: none; }
.mark--ring .mark__orbit {
  border-radius: 50%;
  border: 2px solid var(--accent-35);
  inset: calc(var(--mark-size) * 0.08);
}