/* Redline — landing page.
 *
 * A separate sheet from app.css on purpose. The dashboard follows the
 * viewer's colour scheme; the landing page commits to one dark treatment,
 * because the centrepiece is a terminal and a terminal has a background.
 *
 * No webfonts. Not an aesthetic choice — this is the front page of a
 * page-speed product, and every font file is a render-blocking round trip
 * that the thing we sell would flag. The type is the system grotesk.
 */

.landing {
  color-scheme: light dark;

  /* Light is the base and dark is the override, matching app.css. The page
     was dark-only, which meant the dashboard followed your system and the
     front door did not -- and a light-mode reader got a black slab. */
  --l-bg: #ffffff;
  --l-panel: #fafafa;
  --l-panel-2: #f2f2f2;
  --l-line: rgba(0, 0, 0, .13);
  --l-line-2: rgba(0, 0, 0, .22);
  --l-fg: #0a0a0a;
  --l-muted: #565656;        /* 7.4:1 on white */
  --l-faint: #6b6b6b;        /* 5.4:1 on white */

  /* Two accents, because one cannot do both jobs. The mint is a surface
     colour: it carries dark text at 13:1 on a button, and fails as text on
     white at 1.4:1. Anything that IS text uses --l-accent-fg. */
  --l-accent: #80ff9d;
  --l-accent-fg: #0a7a41;    /* 5.4:1 on white */
  --l-accent-ink: #04240f;
  --l-bad: #b3261e;
  --l-warn: #8a5300;

  /* The terminal keeps its own palette in both themes. A terminal rendered
     on white stops reading as a terminal, and the run output is the one
     element on the page that is quoting a machine rather than describing it. */
  --l-term-bg: #101010;
  --l-term-bg-2: #171717;
  --l-term-line: rgba(255, 255, 255, .12);
  --l-term-fg: #ffffff;
  --l-term-muted: rgba(255, 255, 255, .68);
  --l-term-faint: rgba(255, 255, 255, .5);
  --l-term-accent: #80ff9d;
  --l-term-bad: #ff7a7a;

  background: var(--l-bg);
  color: var(--l-fg);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

@media (prefers-color-scheme: dark) {
  .landing {
    --l-bg: #0a0a0a;
    --l-panel: #101010;
    --l-panel-2: #141414;
    --l-line: rgba(255, 255, 255, .11);
    --l-line-2: rgba(255, 255, 255, .18);
    --l-fg: #fff;
    --l-muted: rgba(255, 255, 255, .64);   /* 8.2:1 on #0a0a0a */
    --l-faint: rgba(255, 255, 255, .48);   /* 5.0:1 on #0a0a0a */
    --l-accent: #80ff9d;
    --l-accent-fg: #80ff9d;                /* 15.8:1 on #0a0a0a */
    --l-bad: #ff7a7a;
    --l-warn: #ffd166;
  }
}

/* The landing page owns the whole viewport: the dashboard chrome is noise
   for somebody who has not signed in yet. */
body:has(.landing) { background: var(--l-bg); }
body:has(.landing) .topbar,
body:has(.landing) .siteinfo { display: none; }
body:has(.landing) main { padding: 0; max-width: none; }

/* The rail sits over the page, so the document needs to end above it or the
   final line is permanently covered. */
.landing { padding-bottom: 58px; }
.l-rail { margin-bottom: -58px; }

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

/* ---------------------------------------------------------------- frame -- */
/* The rounded hairline frame that holds each full-height panel. */

.l-frame {
  border: 1px solid var(--l-line);
  border-radius: 28px;
  margin: 10px;
  padding: clamp(20px, 4vw, 56px);
  position: relative;
}

.l-wrap { max-width: 1360px; margin: 0 auto; width: 100%; }

/* ------------------------------------------------------------- topmark -- */

.l-top {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 14px 20px;
  background: linear-gradient(var(--l-bg) 62%, transparent);
  font: 600 11px/1 var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
}

.l-top .chev { color: var(--l-accent-fg); letter-spacing: -.08em; }

.l-top a { color: var(--l-fg); text-decoration: none; }

.l-top .rule {
  flex: 1;
  height: 1px;
  background: var(--l-line);
  max-width: 220px;
}

/* ---------------------------------------------------------------- type -- */

.l-display {
  font-size: clamp(2.4rem, 5.6vw, 4.9rem);
  line-height: .92;
  letter-spacing: -.035em;
  font-weight: 500;
  margin: 0 0 .35em;
  text-wrap: balance;
}

.l-h2 {
  font-size: clamp(1.75rem, 3.6vw, 2.9rem);
  line-height: 1.02;
  letter-spacing: -.03em;
  font-weight: 500;
  margin: 0 0 .5em;
  text-wrap: balance;
}

.l-h3 {
  font-size: 1.0625rem;
  line-height: 1.35;
  letter-spacing: -.01em;
  font-weight: 600;
  margin: 0 0 .5em;
}

.l-lede {
  font-size: clamp(1.02rem, 1.35vw, 1.22rem);
  line-height: 1.45;
  color: var(--l-muted);
  max-width: 42ch;
  margin: 0 0 1.4em;
  text-wrap: pretty;
}

.l-body { color: var(--l-muted); line-height: 1.6; margin: 0 0 1em; }
.l-body strong { color: var(--l-fg); font-weight: 600; }
.l-body:last-child { margin-bottom: 0; }

/* The small monospace label that marks a section. Their site uses ">>" as a
   pointer; the chevrons animate in on scroll (see .l-eyebrow .chev). */
.l-eyebrow {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font: 400 11px/1.6 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--l-faint);
  margin: 0 0 24px;
}

.l-eyebrow .chev {
  color: var(--l-accent-fg);
  letter-spacing: -.1em;
  white-space: pre;
  min-width: 5ch;
}

/* --------------------------------------------------------------- links -- */

.l-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  background: var(--l-accent);
  color: var(--l-accent-ink);
  font: 600 12px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform .16s ease, background-color .16s ease;
}

.l-btn:hover { background: #9dffb4; transform: translateY(-1px); }

.l-btn.ghost {
  background: transparent;
  color: var(--l-fg);
  border-color: var(--l-line-2);
}

.l-btn.ghost:hover { background: rgba(255, 255, 255, .06); border-color: var(--l-fg); }

.l-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Links inside prose. Two of these carried an inline `color: var(--l-accent)`
   -- the mint, which is a surface colour and measures 1.26:1 as text on white.
   They were, accurately, invisible.

   Underlined as well as coloured, because colour alone is not allowed to be
   the thing that says "this is a link". */
.l-body a,
.l-lede a,
.l-faq .ans a,
.l-note a {
  color: var(--l-accent-fg);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.l-body a:hover,
.l-lede a:hover,
.l-faq .ans a:hover,
.l-note a:hover { text-decoration-thickness: 2px; }

.landing a:focus-visible,
.landing button:focus-visible,
.landing summary:focus-visible {
  outline: 2px solid var(--l-accent-fg);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------------------------------------------------------------- hero -- */

.l-hero { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }

@media (min-width: 1040px) {
  .l-hero { grid-template-columns: minmax(0, 1fr) minmax(520px, 0.95fr); }
}

.l-hero-note {
  font: 400 11px/1.7 var(--mono);
  color: var(--l-faint);
  letter-spacing: .04em;
  margin: 22px 0 0;
  max-width: 46ch;
}

/* ------------------------------------------------------------ terminal -- */
/* The ASCII run. Height is pinned in ch/line units so that swapping frames
   cannot move anything below it — a landing page for a CLS checker must not
   shift its own layout. */

.l-term {
  background: var(--l-term-bg);
  border: 1px solid var(--l-term-line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 80px -40px rgba(0, 0, 0, .9);
}

.l-term-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--l-term-line);
  background: var(--l-term-bg-2);
  font: 400 10px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--l-term-faint);
}

.l-term-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--l-term-accent);
  flex: none;
}

.l-term-dot.is-idle { background: var(--l-term-faint); }

.l-term-bar .grow { flex: 1; }

.l-term-screen {
  margin: 0;
  padding: 18px clamp(14px, 2.4vw, 24px);
  font-family: var(--mono);
  font-size: clamp(10px, 1.05vw, 13px);
  line-height: 1.55;
  color: var(--l-term-muted);
  white-space: pre;
  overflow-x: auto;
  overflow-y: hidden;
  /* 16 rows, pinned. */
  min-height: calc(16 * 1.55em + 36px);
  tab-size: 2;
}

.l-term-screen b { color: var(--l-term-fg); font-weight: 600; }
.l-term-screen .g { color: var(--l-term-accent); }
.l-term-screen .r { color: var(--l-term-bad); }
.l-term-screen .y { color: #ffd166; }
.l-term-screen .dim { color: var(--l-term-faint); }

.l-term-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding: 11px 16px;
  border-top: 1px solid var(--l-term-line);
  font: 400 10px/1.4 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--l-term-faint);
}

.l-term-foot b { color: var(--l-term-fg); font-weight: 500; }

/* -------------------------------------------------------------- strips -- */
/* Their telemetry rail, rebuilt with numbers this product actually has. */

.l-rail {
  position: sticky;
  bottom: 0;
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 26px;
  padding: 12px 22px;
  background: linear-gradient(transparent, var(--l-bg) 42%);
  font: 400 10px/1.5 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--l-faint);
}

.l-rail b { color: var(--l-fg); font-weight: 500; }
.l-rail .g { color: var(--l-accent-fg); }
.l-rail .sp { flex: 1; }

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

.l-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}

.l-card {
  border: 1px solid var(--l-line);
  border-radius: 20px;
  padding: 26px;
  background: var(--l-panel);
}

.l-card .num {
  font: 400 11px/1 var(--mono);
  color: var(--l-accent-fg);
  letter-spacing: .14em;
  display: block;
  margin-bottom: 16px;
}

.l-ico {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--l-accent);
  color: var(--l-accent-ink);
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  font: 600 15px/1 var(--mono);
}

/* ---------------------------------------------------------------- stat -- */

.l-stats { display: grid; gap: 12px; }

.l-stat {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 22px;
  border: 1px solid var(--l-line);
  border-radius: 999px;
  padding: 20px clamp(22px, 3vw, 38px);
}

.l-stat .big {
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  line-height: 1;
  letter-spacing: -.04em;
  font-weight: 500;
}

.l-stat.is-win .big { color: var(--l-accent-fg); }
.l-stat.is-out .big { color: var(--l-muted); font-size: clamp(1.5rem, 3vw, 2.2rem); }
.l-stat .say { color: var(--l-muted); line-height: 1.4; max-width: 46ch; }
.l-stat .say b { color: var(--l-fg); font-weight: 600; }

/* ----------------------------------------------------------------- faq -- */

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

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

.l-faq summary {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 24px 0;
  cursor: pointer;
  list-style: none;
  font-size: clamp(1rem, 1.7vw, 1.25rem);
  font-weight: 500;
  letter-spacing: -.01em;
}

.l-faq summary::-webkit-details-marker { display: none; }

.l-faq summary .mk {
  font: 400 12px/1.6 var(--mono);
  color: var(--l-accent-fg);
  flex: none;
  width: 3ch;
}

.l-faq details[open] summary .mk { color: var(--l-fg); }

.l-faq .ans {
  padding: 0 0 26px calc(3ch + 18px);
  color: var(--l-muted);
  line-height: 1.62;
  max-width: 72ch;
}

.l-faq .ans p { margin: 0 0 .8em; }
.l-faq .ans p:last-child { margin-bottom: 0; }
.l-faq .ans code {
  font-family: var(--mono);
  font-size: .88em;
  background: rgba(255, 255, 255, .07);
  padding: .12em .4em;
  border-radius: 4px;
  color: var(--l-fg);
}

/* --------------------------------------------------------------- lists -- */

.l-list { list-style: none; margin: 0; padding: 0; }

.l-list li {
  position: relative;
  padding: 0 0 12px 26px;
  color: var(--l-muted);
  line-height: 1.55;
}

.l-list li::before {
  content: ">";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--l-accent-fg);
  font-family: var(--mono);
  font-size: .85em;
}

.l-list li:last-child { padding-bottom: 0; }
.l-list b { color: var(--l-fg); font-weight: 600; }

.l-kv { margin: 0; font-size: .94rem; }
.l-kv dt {
  font: 600 11px/1.6 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--l-fg);
  margin-top: 14px;
}
.l-kv dt:first-child { margin-top: 0; }
.l-kv dd { margin: 2px 0 0; color: var(--l-muted); line-height: 1.5; }

/* -------------------------------------------------------------- reveal -- */
/* Scroll-in, but only as a nicety: every element is fully readable with the
   class never applied, which is what a viewer without JS gets. */

.l-rise {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.2, .7, .3, 1),
              transform .7s cubic-bezier(.2, .7, .3, 1);
}

.l-rise.is-in { opacity: 1; transform: none; }

.no-js .l-rise { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .l-rise { opacity: 1; transform: none; transition: none; }
  .l-btn { transition: none; }
}

/* -------------------------------------------------------------- rhythm -- */

.l-section { padding: clamp(52px, 7vh, 96px) 0; }
.l-section.tight { padding: clamp(40px, 5vh, 68px) 0; }

.l-split { display: grid; gap: clamp(26px, 5vw, 72px); align-items: start; }

@media (min-width: 900px) {
  .l-split { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
  .l-split.even { grid-template-columns: 1fr 1fr; }

  /* The heading column is short and the content column is long, which left
     a screen of empty space beside a tall card stack. Pinning the heading
     keeps the section's subject on screen while its content scrolls. */
  .l-split > :first-child {
    position: sticky;
    top: 84px;
    align-self: start;
  }
}

.l-note {
  border-left: 2px solid var(--l-accent-fg);
  padding: 4px 0 4px 20px;
  color: var(--l-muted);
  line-height: 1.6;
  max-width: 68ch;
}

.l-foot {
  border-top: 1px solid var(--l-line);
  padding: 34px 0 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  align-items: center;
  font: 400 11px/1.6 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--l-faint);
}

.l-foot a { color: var(--l-muted); text-decoration: none; }
.l-foot a:hover { color: var(--l-fg); text-decoration: underline; }
.l-foot .sp { flex: 1; }

@media (max-width: 620px) {
  .l-frame { border-radius: 18px; margin: 6px; }
  .l-stat { border-radius: 20px; }
  .l-rail { gap: 4px 14px; padding: 10px 14px; }
}

/* -------------------------------------------------------------- footer -- */
/* Labels sit notched into the top border of each card, masking the line
   behind them, and type themselves in with ">>" as the cursor. */

.l-fzone { padding-bottom: 26px; }

.l-fgrid {
  display: grid;
  gap: 14px;
  margin-bottom: 14px;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .l-fgrid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
  .l-fgrid.two { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
}

.l-fcard {
  position: relative;
  border: 1px solid var(--l-line);
  border-radius: 44px;
  padding: 42px clamp(24px, 3.4vw, 48px) 34px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
}

.l-fcard > .tag {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--l-bg);
  padding: 0 14px;
  font: 400 10px/1 var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--l-faint);
  white-space: nowrap;
}

.l-frow {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 0;
  color: var(--l-muted);
  text-decoration: none;
  font: 400 12px/1.5 var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
  border-bottom: 1px solid transparent;
  transition: color .15s ease;
}

.l-frow span:first-child { flex: 1; }
.l-frow .mk { color: var(--l-accent-fg); }
.l-frow:hover { color: var(--l-fg); }
.l-frow:hover .mk { transform: translateX(3px); }
.l-frow .mk { transition: transform .15s ease; display: inline-block; }

.l-fcard.row {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px 38px;
  align-items: center;
  padding-block: 40px 32px;
}

.l-fcard.row a {
  color: var(--l-muted);
  text-decoration: none;
  font: 400 12px/1.5 var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
}

.l-fcard.row a:hover { color: var(--l-fg); text-decoration: underline; }

.l-fcard.art { align-items: center; text-align: center; gap: 0; }

/* Square, so the gauge is never squashed. Sized in ch-free units because the
   canvas inside reads clientWidth/clientHeight to build its character grid. */
.l-ascii {
  width: 100%;
  max-width: 330px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}

@supports not (aspect-ratio: 1 / 1) {
  .l-ascii { height: 300px; }
}

.l-asciicap {
  margin: 14px auto 0;
  max-width: 40ch;
  font: 400 11px/1.7 var(--mono);
  letter-spacing: .04em;
  color: var(--l-faint);
}

.l-fine {
  margin: 24px 0 0;
  text-align: center;
  font: 400 10px/1.7 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--l-faint);
}

@media (max-width: 620px) {
  .l-fcard { border-radius: 26px; padding: 38px 22px 28px; }
  .l-fcard.row { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ------------------------------------------------------------- velocity -- */
/* The car runs edge to edge inside its frame while the copy stays in the
   normal measure. A silhouette this wide only works full-bleed; boxed to a
   text column it reads as a logo. */

.l-speed {
  padding-bottom: 0;
  overflow: hidden;
}

.l-speedstage {
  width: 100%;
  /* Matched to the car's own proportions so the fit is exact and the section
     is not padding empty rows above and below it. */
  aspect-ratio: 1000 / 280;
  max-height: 430px;
  margin: clamp(26px, 4vw, 52px) 0 0;
  /* Reserved before the canvas mounts, so the section cannot resize under a
     reader who is already past it. */
  contain: layout paint;
}

.l-speedcap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 28px;
  margin: clamp(18px, 2.6vw, 30px) 0 clamp(24px, 3vw, 40px);
  font: 400 11px/1.7 var(--mono);
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--l-faint);
}

.l-speedcap span { display: inline-flex; align-items: baseline; gap: 8px; }
.l-speedcap span::before { content: "//"; color: var(--l-accent-fg); }

@media (max-width: 620px) {
  .l-speedstage { height: 130px; }
}

/* ----------------------------------------------------------------- crew -- */
/* A rail, the way a team page does it: name, portrait, one line. The previous
   version put a paragraph and three bullets in every card, which is a
   reference document wearing a card's clothes. */

.l-crew-rail {
  margin: 40px -2px 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.l-crew-rail::-webkit-scrollbar { display: none; }

.l-crew-track {
  display: flex;
  gap: 14px;
  padding: 2px;
  width: max-content;
}

.l-agent {
  flex: 0 0 clamp(250px, 27vw, 310px);
  border: 1px solid var(--l-line);
  border-radius: 22px;
  padding: 26px 24px 24px;
  background: var(--l-panel);
}

.l-agent-name {
  margin: 0 0 20px;
  font-size: 1.45rem;
  line-height: 1.06;
  letter-spacing: -.02em;
  font-weight: 500;
}

.l-agent-art {
  margin: 0;
  padding: 18px 4px;
  border-radius: 14px;
  /* The page's own colours. A black tile carrying mint was borrowed from the
     terminal, where that pairing means "this is machine output"; sitting on a
     card in a white section it just reads as a hole punched in the page. The
     supplied art is dense enough to hold up without borrowing the contrast. */
  background: var(--l-panel-2);
  color: var(--l-accent-fg);
  font-family: var(--mono);
  /* 84 columns across roughly 250px, which is about 3px a column -- so the
     type is tiny by design. Detail in ASCII art comes from column count and
     nothing else: at 34 columns these were blobs, and the only way to get a
     bezel and a needle into a stopwatch is to make the characters small
     enough that there are enough of them.
     A monospace character advances about 0.6em, hence the size below, and
     the line height keeps cells at the 2:1 ratio the art was sampled at. */
  font-size: clamp(3px, 0.36vw, 4.4px);
  line-height: 1.22;
  letter-spacing: 0;
  text-align: center;
  white-space: pre;
  overflow: hidden;
}

.l-agent-role {
  margin: 18px 0 0;
  font: 400 11px/1.5 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--l-faint);
}

.l-crew-nav {
  display: flex;
  gap: 10px;
  margin-top: 26px;
}

.l-round {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--l-line-2);
  background: transparent;
  color: var(--l-fg);
  font-size: 15px;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}

.l-round:hover { background: rgba(128, 128, 128, .12); border-color: var(--l-fg); }
.l-round[disabled] { opacity: .35; cursor: default; }
.l-round[disabled]:hover { background: transparent; border-color: var(--l-line-2); }

/* ------------------------------------------------------------ card icon -- */

.l-cardico {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  border: 1px solid var(--l-line-2);
  color: var(--l-accent-fg);
  margin-bottom: 16px;
}

.l-cardico svg { width: 19px; height: 19px; }

@media (max-width: 620px) {
  .l-agent-art { font-size: 8px; padding: 20px 8px 16px; }
}