/*
  Landing page, built to the reference layout: announcement bar, marketplace-style
  nav with search, tinted hero with floating cards, trust strip, category tiles,
  product-card grid, benefits row, colour band, multi-column footer.

  Red is the primary throughout. Category icons carry soft secondary tints, the
  way the reference does, so the grid reads as a marketplace rather than a wall
  of one colour - but every button, link and call to action stays red.

  Prefixed `l-` so nothing collides with the app styles in app.css.
*/

:root {
  --l-radius: 12px;
  --l-radius-sm: 9px;
  --l-shadow: 0 2px 4px rgba(13, 27, 42, 0.04), 0 12px 28px rgba(13, 27, 42, 0.07);
  --l-shadow-lift: 0 8px 18px rgba(13, 27, 42, 0.08), 0 26px 54px rgba(13, 27, 42, 0.12);

  --topbar-bg: #c81e42;
  --topbar-fg: #ffe8ec;

  --l-hero-a: rgba(214, 34, 70, 0.10);
  --l-hero-b: rgba(214, 34, 70, 0.03);
  --l-band-a: #d62246;
  --l-band-b: #a5173a;

  --tint-rose-bg: #fdecef;   --tint-rose-fg: #c81e42;
  --tint-amber-bg: #fdf1e0;  --tint-amber-fg: #a4660a;
  --tint-green-bg: #e6f5ee;  --tint-green-fg: #17734f;
  --tint-blue-bg: #e8f0fb;   --tint-blue-fg: #1f5aa8;
  --tint-violet-bg: #f0ecfb; --tint-violet-fg: #5b3fb0;
  --tint-teal-bg: #e3f3f4;   --tint-teal-fg: #14676e;
}

/*
  Theme-dependent colours live in tokens, never in a rule that styles a
  component inside a media query - one of those ignores an explicit theme
  choice and ends up dark-on-dark. Light is the default; dark applies only when
  the user picks it.
*/

:root[data-theme="dark"] {
  --l-shadow: 0 2px 4px rgba(0, 0, 0, 0.4), 0 12px 28px rgba(0, 0, 0, 0.45);
  --l-shadow-lift: 0 8px 18px rgba(0, 0, 0, 0.5), 0 26px 54px rgba(0, 0, 0, 0.55);
  --topbar-bg: #8f142f;      --topbar-fg: #f3ced6;
  --l-hero-a: rgba(255, 90, 114, 0.09);
  --l-hero-b: rgba(255, 90, 114, 0.02);
  --l-band-a: #b81d3c;       --l-band-b: #7d1229;
  --tint-rose-bg: #3a1620;   --tint-rose-fg: #ff8296;
  --tint-amber-bg: #372714;  --tint-amber-fg: #e0a24a;
  --tint-green-bg: #12301f;  --tint-green-fg: #59c08f;
  --tint-blue-bg: #142438;   --tint-blue-fg: #6ea6ee;
  --tint-violet-bg: #211a3a; --tint-violet-fg: #a08cec;
  --tint-teal-bg: #10292c;   --tint-teal-fg: #4fb4bb;
}

:root[data-theme="light"] {
  --l-shadow: 0 2px 4px rgba(13, 27, 42, 0.04), 0 12px 28px rgba(13, 27, 42, 0.07);
  --l-shadow-lift: 0 8px 18px rgba(13, 27, 42, 0.08), 0 26px 54px rgba(13, 27, 42, 0.12);
  --topbar-bg: #c81e42;      --topbar-fg: #ffe8ec;
  --l-hero-a: rgba(214, 34, 70, 0.10);
  --l-hero-b: rgba(214, 34, 70, 0.03);
  --l-band-a: #d62246;       --l-band-b: #a5173a;
  --tint-rose-bg: #fdecef;   --tint-rose-fg: #c81e42;
  --tint-amber-bg: #fdf1e0;  --tint-amber-fg: #a4660a;
  --tint-green-bg: #e6f5ee;  --tint-green-fg: #17734f;
  --tint-blue-bg: #e8f0fb;   --tint-blue-fg: #1f5aa8;
  --tint-violet-bg: #f0ecfb; --tint-violet-fg: #5b3fb0;
  --tint-teal-bg: #e3f3f4;   --tint-teal-fg: #14676e;
}

.l-wrap { max-width: 1200px; margin: 0 auto; padding: 0 22px; }

/*
  Headings are a bold sans here, not the app's monospace: the reference leads
  with weight, and a marketplace home page should feel approachable. Monospace
  is kept for data - counts, tags, the picklist table.
*/
.l-h2 {
  font-family: var(--sans);
  font-size: clamp(21px, 2.7vw, 29px);
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0;
}

/* ---------- announcement bar ---------- */

.l-topbar { background: var(--topbar-bg); color: var(--topbar-fg); font-size: 12px; }
.l-topbar__inner {
  max-width: 1200px; margin: 0 auto; padding: 8px 22px;
  display: flex; gap: 8px 20px; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
}
.l-topbar ul { list-style: none; display: flex; gap: 8px 18px; flex-wrap: wrap; margin: 0; padding: 0; }
.l-topbar li { opacity: 0.72; }
.l-topbar li:first-child { opacity: 1; font-weight: 600; }
.l-topbar a { color: inherit; text-decoration: none; opacity: 0.72; }
.l-topbar a:hover { opacity: 1; }

/* ---------- navigation ---------- */

.l-nav {
  background: var(--card);
  border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 40;
}
.l-nav__inner {
  /*
   * Wider than the 1200px the content below uses, and deliberately.
   *
   * The row holds a wordmark, six menus and four controls, and at 1200 it was
   * 24px short of fitting even after every padding had been trimmed - the
   * centred menu overflowed its box and slid under the wordmark. A header that
   * spans a little more than the column beneath it is ordinary; a wordmark with
   * "Label tools" printed through it is not.
   */
  max-width: 1320px; margin: 0 auto; padding: 12px 22px;
  display: flex; align-items: center; gap: 12px;
}

.l-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; flex: none; }
.l-brand__mark {
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--signal); color: #fff;
  display: grid; place-items: center;
}
/* The bars are drawn in currentColor, which the rule above sets to white. */
.l-brand__mark svg { width: 34px; height: 34px; display: block; }
.l-brand b { display: block; font-size: 16px; letter-spacing: -0.02em; line-height: 1.15; }
.l-brand i { display: block; font-style: normal; font-size: 10.5px; color: var(--ink-3); }

/* Brand left, menu centred, account controls right. */
.l-navmenu {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
}
/* The spacer is in this selector so it cannot drift from the tab it stands in
   for: same font, same padding, same text, therefore same width. See
   .l-dashslot below. */
.l-navmenu > a,
.l-navmenu > .l-dashslot {
  font-size: 13.5px; font-weight: 500; color: var(--ink-2);
  text-decoration: none; padding: 9px 9px; border-radius: 7px;
  white-space: nowrap;
}
.l-navmenu > a:hover { color: var(--ink); background: var(--paper); }
.l-navmenu > a.is-active { color: var(--signal); font-weight: 600; }

/*
  The spacer that holds the Dashboard tab's place while the tab is hidden.

  nav.js cannot know whether to show the tab until /v1/me answers, so it starts
  hidden and paintAuth() reveals it. Do NOT read that as harmless on the
  grounds that appending to the end of a row cannot move what is already in it:
  .l-navmenu above is `justify-content: center`, so the row is laid out from
  its middle outwards and a 96px tab arriving at the end pushes every category
  48px LEFT. Measured before this existed: Label tools 359 -> 317, and the same
  for the other four, a second after load, on every page, for every signed-in
  seller.

  The first attempt was `.l-dashtab[hidden] { visibility: hidden }` so the tab
  would keep its box while hidden. That does not work and must not be made to:
  app.css:25 is `[hidden] { display: none !important }`, a deliberate site-wide
  rule - the attribute means absent, there is no case where markup says hidden
  and we want it seen, and beating it with another !important here would start
  unpicking the one invariant that keeps a hidden overlay from swallowing taps.

  So the tab stays genuinely absent while hidden, and a SPACER takes its place:
  same text, same selector above, therefore the same width, with no px constant
  to go stale. nav.js shows exactly one of the two at any moment, so the row's
  width never changes and nothing moves when the session lands.

  What it costs: a signed-out visitor's five category menus sit 48px left of
  true centre, because the slot is reserved for a tab they will never see.
  That is a static offset nobody can see without a ruler, where the
  alternative was a visible jump on every page load. Changing justify-content
  was not an option - it is the whole site's header.
*/
.l-dashslot { visibility: hidden; }

.l-navactions { display: flex; align-items: center; gap: 8px; flex: none; }

.l-navcats { position: relative; }
.l-catsbtn {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 13.5px; font-weight: 500;
  padding: 9px 8px; cursor: pointer; white-space: nowrap;
  color: var(--ink-2); background: transparent;
  border: 0; border-radius: 7px;
}
.l-catsbtn:hover { color: var(--ink); background: var(--paper); }
.l-catsbtn[aria-expanded="true"] { color: var(--signal); background: var(--paper); }
.l-catsbtn.is-current { color: var(--signal); font-weight: 600; }
.l-catsbtn svg { width: 13px; height: 13px; transition: transform 140ms ease; }
.l-catsbtn[aria-expanded="true"] svg { transform: rotate(180deg); }

.l-navpanel {
  display: none; position: absolute; top: calc(100% + 12px);
  left: 50%; transform: translateX(-50%);
  width: 520px; max-width: 88vw; padding: 9px;
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--l-radius); box-shadow: var(--l-shadow-lift);
}
.l-navpanel.is-open { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
/* Rows are <a> when the tool is ready and <span> when it is not, so both need
   the layout - styling only the anchor left every unbuilt tool unformatted. */
.l-navpanel > a,
.l-navpanel > span,
.l-navpanel__all > a {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 10px; border-radius: 7px;
  font-size: 13.5px; color: var(--ink); text-decoration: none;
}
.l-navpanel > a:hover, .l-navpanel__all > a:hover { background: var(--paper); }
.l-navpanel > span.is-soon { color: var(--ink-3); cursor: default; }
.l-navpanel > span.is-soon .l-ico { opacity: 0.5; }
.l-navpanel .l-ico { width: 26px; height: 26px; border-radius: 7px; }
.l-navpanel .l-ico svg { width: 14px; height: 14px; }
.l-navpanel small {
  margin-left: auto; flex: none; padding-left: 8px; font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3);
}
.l-navpanel__all {
  grid-column: 1 / -1;
  margin-top: 5px; padding-top: 10px;
  border-top: 1px solid var(--rule-2);
}
.l-navpanel__all a { font-weight: 600; color: var(--signal); }
.l-navpanel__all a:hover { background: var(--paper); }



.l-nav .btn { flex: none; text-decoration: none; padding: 10px 16px; }

/* ---------- the header on a phone ---------- */

/*
 * Below 880px the row of dropdowns becomes a drawer under the header bar. It
 * used to be `display: none` with nothing to replace it, which left a phone
 * with no way to reach any tool at all.
 */
.l-navburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 44px;
  height: 44px;
  padding: 0 11px;
  background: none;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  cursor: pointer;
}
.l-navburger__bar {
  display: block;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.l-navburger[aria-expanded="true"] .l-navburger__bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.l-navburger[aria-expanded="true"] .l-navburger__bar:nth-child(2) { opacity: 0; }
.l-navburger[aria-expanded="true"] .l-navburger__bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
  .l-navburger__bar { transition: none; }
}

/*
 * Between the drawer and full width, the header has to give something up.
 *
 * Download app and Support added about 220px to the actions row, which pushed
 * the centred menu's items wider than their box - and because that box is
 * centred, the overflow went out both sides and slid under the wordmark. The
 * order things are surrendered in is the order they are worth least: the
 * tagline, then the word beside the support glyph, then the menu's own
 * breathing room. Nothing is removed, so every control is still reachable at
 * every width.
 */
@media (max-width: 1250px) {
  .l-brand i { display: none; }
  .l-navmenu > a, .l-navmenu > .l-dashslot,
  .l-catsbtn { padding-left: 6px; padding-right: 6px; }
}
@media (max-width: 1100px) {
  .wa__label { display: none; }
  .l-navmenu > a, .l-navmenu > .l-dashslot,
  .l-catsbtn { padding-left: 4px; padding-right: 4px; font-size: 13px; }
  .l-catsbtn svg { display: none; }   /* the caret is the cheapest thing here */
  .l-nav__inner { gap: 8px; }
}

/*
 * The drawer starts at 1200 rather than 880.
 *
 * With four controls in the actions row instead of two, the full menu no longer
 * fits between 880 and 1200: every padding had already been trimmed and the
 * centred menu still overflowed under the wordmark. A hamburger on a 1100px
 * window is ordinary; a header printing one label through another is not. Above
 * 1200 nothing changes, which is every ordinary laptop and desktop.
 */
@media (max-width: 1200px) {
  .l-nav__inner { flex-wrap: wrap; gap: 12px; }
  .l-navburger { display: flex; }
  .l-brand { flex: 1; }

  .l-navmenu {
    display: none;
    order: 9;
    flex: 1 0 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding-top: 6px;
    border-top: 1px solid var(--rule-2);
  }
  .l-navmenu.is-open { display: flex; }

  /*
   * In the drawer there is nothing to reserve against.
   *
   * The spacer above exists because the desktop row is centred. The drawer is
   * a stacked column, where appending genuinely cannot move anything - and a
   * 44px blank row between PDF tools and Log In is the one place an
   * invisible-but-present slot would be obvious.
   */
  .l-dashslot { display: none; }

  /* Each category opens in place, stacked. The desktop panel is a centred
     520px popover; left as that it runs straight off a 390px screen. */
  .l-navcats { position: static; }
  .l-catsbtn { width: 100%; justify-content: space-between; min-height: 44px; }
  .l-navpanel {
    position: static;
    width: auto;
    max-width: none;
    transform: none;
    box-shadow: none;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }
  .l-navpanel.is-open { grid-template-columns: 1fr; }
}

/* ---------- search results, shared by both search boxes ---------- */

.l-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 50;
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--l-radius-sm); box-shadow: var(--l-shadow-lift);
  max-height: 320px; overflow-y: auto;
}
.l-results:empty { display: none; }
.l-results a, .l-results span {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 10px 13px; font-size: 13.5px; color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--rule-2);
}
.l-results a:hover { background: var(--paper); }
.l-results span { color: var(--ink-3); }
.l-results i {
  font-style: normal; font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); flex: none;
}
.l-results a i { color: var(--ok); }

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

.l-hero {
  background:
    radial-gradient(1100px 460px at 78% 6%, var(--l-hero-a), transparent 62%),
    linear-gradient(180deg, var(--l-hero-b), transparent 58%);
  padding: 52px 0 58px;
}
.l-hero__inner {
  max-width: 1200px; margin: 0 auto; padding: 0 22px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: 46px; align-items: center;
}
@media (max-width: 980px) { .l-hero__inner { grid-template-columns: 1fr; gap: 40px; } }

.l-pill {
  display: inline-block;
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--tint-rose-fg); background: var(--tint-rose-bg);
  border-radius: 100px; padding: 6px 13px; margin-bottom: 20px;
}

.l-hero h1 {
  font-family: var(--sans);
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.035em;
  margin: 0 0 16px;
  text-wrap: balance;
}
.l-hero h1 em { font-style: normal; color: var(--signal); }

.l-hero__lede { font-size: 16.5px; line-height: 1.55; color: var(--ink-2); margin: 0 0 24px; max-width: 44ch; }


.l-points { display: flex; gap: 12px 28px; flex-wrap: wrap; margin-bottom: 18px; }
.l-point { display: flex; align-items: center; gap: 9px; }
.l-point b { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.25; }
.l-point span { font-size: 11.5px; color: var(--ink-3); }

.l-hero__trust { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink-2); margin: 0; }
.l-hero__trust svg { width: 15px; height: 15px; color: var(--ok); flex: none; }

/* ---------- hero artwork: three tilted cards ---------- */

.l-art { position: relative; min-height: 410px; }
@media (max-width: 980px) { .l-art { min-height: 330px; } }

.l-art__card {
  position: absolute;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--l-radius);
  box-shadow: var(--l-shadow-lift);
  padding: 13px;
  display: flex; flex-direction: column; gap: 7px;
}
.l-art__cap {
  font-family: var(--mono); font-size: 8.5px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);
}
.l-art__sheet { width: 43%; left: 0; top: 5%; aspect-ratio: 1 / 1.33; transform: rotate(-7deg); }
.l-art__label { width: 35%; left: 33%; top: 27%; aspect-ratio: 4 / 5.5; transform: rotate(4deg); z-index: 2; }
.l-art__pick  { width: 43%; right: 0; top: 1%; aspect-ratio: 1 / 0.9; transform: rotate(6deg); }

.l-line { height: 4px; border-radius: 2px; background: var(--rule); }
.l-line--w40 { width: 40%; } .l-line--w60 { width: 60%; } .l-line--w80 { width: 80%; }
.l-line--ink { background: var(--ink-3); }

.l-bars { display: flex; gap: 1.5px; height: 24px; }
.l-bars i { flex: 1; background: var(--ink); }
.l-bars i:nth-child(3n) { opacity: 0.32; }
.l-bars i:nth-child(4n) { opacity: 0.66; }

.l-art__crop {
  border: 1px dashed var(--signal); border-radius: 5px; padding: 8px;
  display: flex; flex-direction: column; gap: 6px;
}
.l-art__drop { opacity: 0.38; display: flex; flex-direction: column; gap: 5px; padding-top: 5px; }
.l-art__meta {
  margin-top: auto; display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  border-top: 1px solid var(--rule-2); padding-top: 6px;
}
.l-art__meta span { color: var(--signal); }

.l-art__row {
  display: flex; gap: 8px; align-items: center;
  font-family: var(--mono); font-size: 8px; color: var(--ink-3);
  border-bottom: 1px solid var(--rule-2); padding-bottom: 4px;
}
.l-art__row b { color: var(--signal); font-size: 8px; }
.l-art__row u { text-decoration: none; margin-left: auto; color: var(--ink-2); }

.l-art__badge {
  position: absolute; right: 3%; bottom: 4%;
  width: 62px; height: 62px; border-radius: 50%;
  background: var(--signal); color: #fff;
  display: grid; place-items: center;
  box-shadow: var(--l-shadow-lift); z-index: 3;
}
.l-art__badge svg { width: 26px; height: 26px; }

/* ---------- trust strip ---------- */

.l-strip { background: var(--card); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.l-strip__inner {
  max-width: 1200px; margin: 0 auto; padding: 18px 22px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px;
}
.l-strip__item { display: flex; align-items: center; gap: 12px; }
.l-strip__item b { display: block; font-size: 13.5px; font-weight: 600; }
.l-strip__item span { font-size: 12px; color: var(--ink-3); }

/* ---------- tinted icon square ---------- */

.l-ico { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.l-ico svg { width: 20px; height: 20px; }
.l-point .l-ico, .l-strip__item .l-ico, .l-mini .l-ico { width: 32px; height: 32px; border-radius: 8px; }
.l-point .l-ico svg, .l-strip__item .l-ico svg, .l-mini .l-ico svg { width: 16px; height: 16px; }
.l-ico--rose   { background: var(--tint-rose-bg);   color: var(--tint-rose-fg); }
.l-ico--amber  { background: var(--tint-amber-bg);  color: var(--tint-amber-fg); }
.l-ico--green  { background: var(--tint-green-bg);  color: var(--tint-green-fg); }
.l-ico--blue   { background: var(--tint-blue-bg);   color: var(--tint-blue-fg); }
.l-ico--violet { background: var(--tint-violet-bg); color: var(--tint-violet-fg); }
.l-ico--teal   { background: var(--tint-teal-bg);   color: var(--tint-teal-fg); }

/* ---------- sections ---------- */

.l-section { padding: 54px 0 0; }

.l-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.l-head p { margin: 5px 0 0; font-size: 13.5px; color: var(--ink-3); }
.l-head a { font-size: 13.5px; font-weight: 600; color: var(--signal); text-decoration: none; white-space: nowrap; }
.l-head a:hover { text-decoration: underline; }

/* ---------- category tiles ---------- */

.l-cats { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; }
@media (max-width: 1180px) { .l-cats { grid-template-columns: repeat(4, 1fr); gap: 14px; } }
@media (max-width: 820px)  { .l-cats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 540px)  { .l-cats { grid-template-columns: repeat(2, 1fr); } }

.l-cat {
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--l-radius); padding: 18px 10px;
  text-decoration: none; color: inherit; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}
.l-cat:hover { transform: translateY(-3px); box-shadow: var(--l-shadow); border-color: var(--signal); }
.l-cat .l-ico { width: 46px; height: 46px; border-radius: 12px; margin-bottom: 8px; }
.l-cat .l-ico svg { width: 22px; height: 22px; }
.l-cat b { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.l-cat small { font-family: var(--mono); font-size: 9.5px; color: var(--ink-3); letter-spacing: 0.02em; }

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

.l-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
@media (max-width: 1180px) { .l-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .l-grid { grid-template-columns: repeat(2, 1fr); } }

.l-tool {
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--l-radius); overflow: hidden;
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}
a.l-tool:hover { transform: translateY(-3px); box-shadow: var(--l-shadow); border-color: var(--signal); }

.l-tool__art {
  position: relative; aspect-ratio: 1 / 0.84;
  display: grid; place-items: center;
  border-bottom: 1px solid var(--rule-2);
}
.l-tool__art svg { width: 38px; height: 38px; }
.l-tool__tag {
  position: absolute; top: 8px; left: 8px;
  font-family: var(--mono); font-size: 8.5px;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--card); color: var(--ink-2);
  border-radius: 100px; padding: 3px 8px;
  box-shadow: 0 1px 3px rgba(13, 27, 42, 0.14);
}
.l-tool__tag--live { background: var(--signal); color: #fff; }

.l-tool__body { padding: 11px 12px 13px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.l-tool__body h3 { margin: 0; font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.l-tool__body p { margin: 0; font-size: 11.5px; color: var(--ink-3); line-height: 1.45; }
.l-tool__foot {
  margin-top: auto; padding-top: 10px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.l-tool__price { font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--ink); }
.l-tool__price small { font-size: 9.5px; font-weight: 400; color: var(--ink-3); letter-spacing: 0.06em; }
.l-tool__go {
  width: 26px; height: 26px; border-radius: 7px; flex: none;
  background: var(--tint-rose-bg); color: var(--signal);
  display: grid; place-items: center;
}
.l-tool__go svg { width: 13px; height: 13px; }
.l-tool--soon .l-tool__go { background: var(--paper); color: var(--ink-3); }

/* ---------- benefits row ---------- */

.l-benefits {
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--l-radius); padding: 26px 24px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 26px;
}
.l-benefit { display: flex; gap: 13px; }
.l-benefit b { display: block; font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.l-benefit p { margin: 0 0 8px; font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }
.l-benefit a { font-size: 12.5px; font-weight: 600; color: var(--signal); text-decoration: none; }
.l-benefit a:hover { text-decoration: underline; }

/* ---------- picklist explainer ---------- */

.l-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
@media (max-width: 880px) { .l-split { grid-template-columns: 1fr; gap: 26px; } }
.l-split p { color: var(--ink-2); margin: 12px 0 0; line-height: 1.6; font-size: 14.5px; }
.l-split .btn { margin-top: 20px; text-decoration: none; display: inline-block; }

.l-pick {
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--l-radius); padding: 16px 18px;
  font-family: var(--mono); font-size: 12px; overflow-x: auto;
}
.l-pick table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.l-pick th {
  text-align: left; font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600; padding: 0 10px 7px 0;
  border-bottom: 1px solid var(--ink-3); white-space: nowrap;
}
.l-pick td { padding: 7px 10px 7px 0; border-bottom: 1px solid var(--rule-2); white-space: nowrap; }
.l-pick tr:last-child td { border-bottom: 0; font-weight: 700; }
.l-pick .l-hi { color: var(--signal); }

/* ---------- pricing ---------- */

.l-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; align-items: start; }
.l-plan {
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--l-radius); padding: 24px 22px 26px;
  display: flex; flex-direction: column; gap: 14px; position: relative;
}
.l-plan--pick { border-color: var(--signal); box-shadow: var(--l-shadow); }
.l-plan__tag {
  position: absolute; top: -11px; left: 22px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--signal); color: #fff; padding: 4px 10px; border-radius: 100px;
}
.l-plan h3 { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; margin: 0; color: var(--ink-2); }
.l-plan__price { font-size: 32px; font-weight: 800; letter-spacing: -0.035em; line-height: 1; margin: 0; }
.l-plan__price small { font-size: 12px; font-weight: 400; color: var(--ink-3); letter-spacing: 0; }
.l-plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.l-plan li { font-size: 13.5px; color: var(--ink-2); padding-left: 21px; position: relative; }
.l-plan li::before {
  content: ""; position: absolute; left: 2px; top: 6px;
  width: 8px; height: 4px; border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok);
  transform: rotate(-45deg);
}
.l-plan .btn { margin-top: auto; text-align: center; text-decoration: none; }

/*
 * The button and whatever is true underneath it, as one block.
 *
 * It carries the margin-top:auto the button used to, so the pair still sits at
 * the foot of a column card - put it on the button alone and the note would be
 * pushed off the bottom instead of following it.
 */
.l-plan__act { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.l-plan__act .btn { margin-top: 0; }
.l-plan__act .l-hint { margin: 0; text-align: center; }

/*
 * The trial, as a band across the top, with the three paid plans under it.
 *
 * It was a card in the same row, which made the free plan compete with the
 * paid ones for the same glance and left three cards arguing about price in
 * the same breath. On its own line it reads as what it is - the way in, before
 * any of this matters - and the row below is then one decision about length,
 * not a choice between free and paid.
 *
 * A row only when there is room for one. Below 760px it stays the column it
 * already is, because a price, three ticks and a button side by side in 360px
 * is four things in a column pretending to be a row.
 */
/*
 * Equal height, unlike the grid above it: three cards being compared should
 * have their buttons on one line. align-items:start on .l-plans is right for a
 * row of different things and wrong for a row of the same thing three times -
 * one card whose feature wraps to two lines should not drag its button up
 * level with another card's third tick.
 */
.l-plans--paid { margin-top: 18px; align-items: stretch; }

@media (min-width: 760px) {
  .l-plan--wide { flex-direction: row; align-items: center; gap: 30px; }
  .l-plan--wide > h3 { min-width: 86px; }
  .l-plan--wide .l-plan__price { min-width: 150px; }
  .l-plan--wide ul { flex: 1; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
  /* Not auto margin: in a row that would push it off the end rather than
     bottom-align it, which is what margin-top: auto means in a column. */
  .l-plan--wide .btn { margin-top: 0; width: auto; min-width: 210px; }
  .l-plan--wide .l-plan__act { margin-top: 0; min-width: 230px; }
}

/*
 * The plan someone arrived here to buy, from ?plan= on the landing page. It has
 * to read as "this is the one you picked" beside a card already wearing a
 * "Most popular" badge, so it is a ring around the whole card rather than
 * another accent inside it - and .l-plan__chosen says it in words, because a
 * ring alone is invisible to a screen reader and weak for a colour-blind eye.
 */
.l-plan.is-chosen { border-color: var(--signal); box-shadow: 0 0 0 2px var(--signal); }
.l-plan__chosen {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--signal); margin: 0;
}
/*
 * "Includes GST", on every paid card.
 *
 * The lead above the cards says it once, which is where someone reading the
 * page top to bottom meets it - and not where someone who jumped to a card, or
 * followed a link to one, is looking. It is the single fact most likely to be
 * disputed at the payment screen, so it sits on the thing it is a fact about.
 *
 * A sibling of the price, never inside it: pricing.js rewrites that element
 * from /v1/plans, so anything in there is wiped the moment the real price
 * arrives.
 */
.l-plan__incl {
  margin: -8px 0 0; font-size: 12px; color: var(--ink-3);
}

/* What the unused trial adds to a paid plan. Sits under the price it changes. */
.l-plan__bonus { font-size: 12.5px; color: var(--ok); margin: -6px 0 0; }
.l-pricenote { text-align: center; color: var(--ink-3); font-size: 12.5px; margin: 20px 0 0; }

/*
 * The launch-price line. Quiet, and above the cards rather than stamped on
 * them: it is a fact about every plan, and a flash on each card three times
 * over reads as pressure rather than information.
 */
.l-pricing__launch {
  margin: 0 0 22px; font-size: 13.5px; color: var(--ink-2);
  border-left: 2px solid var(--signal); padding-left: 12px;
}
.l-pricing__launch strong { color: var(--ink); }

/* ---------- colour band ---------- */

.l-band {
  background: linear-gradient(100deg, var(--l-band-a), var(--l-band-b));
  color: #fff; border-radius: var(--l-radius);
  padding: 32px 34px; margin-top: 54px;
  display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap;
}
.l-band__art { display: flex; align-items: center; gap: 18px; }
.l-band__art > svg { width: 54px; height: 54px; flex: none; opacity: 0.9; }
.l-band h2 { margin: 0 0 5px; font-size: clamp(19px, 2.3vw, 25px); font-weight: 700; letter-spacing: -0.02em; }
.l-band p { margin: 0; opacity: 0.92; font-size: 14px; max-width: 48ch; }
.l-band .btn { background: #fff; color: var(--signal); border-color: #fff; white-space: nowrap; text-decoration: none; }
.l-band .btn:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

.l-mini {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 20px; padding: 26px 0 0;
}
.l-mini div { display: flex; align-items: center; gap: 11px; }
.l-mini b { display: block; font-size: 13px; font-weight: 600; }
.l-mini span { font-size: 11.5px; color: var(--ink-3); }

/* ---------- footer ---------- */

.l-footer { border-top: 1px solid var(--rule); background: var(--card); margin-top: 54px; }
.l-footer__inner {
  max-width: 1200px; margin: 0 auto; padding: 40px 22px 28px;
  display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 30px;
}
@media (max-width: 820px) { .l-footer__inner { grid-template-columns: 1fr 1fr; } }
.l-footer h4 { font-size: 12.5px; font-weight: 700; margin: 0 0 13px; letter-spacing: -0.01em; }
.l-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.l-footer a { color: var(--ink-2); text-decoration: none; font-size: 13.5px; }
.l-footer a:hover { color: var(--signal); }
.l-footer__about p { margin: 12px 0 0; font-size: 13px; color: var(--ink-3); line-height: 1.6; max-width: 34ch; }

.l-badges { display: flex; flex-wrap: wrap; gap: 7px; }
.l-badges span {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-2); background: var(--paper);
  border: 1px solid var(--rule); border-radius: 6px; padding: 5px 9px;
}

.l-footer__legal {
  max-width: 1200px; margin: 0 auto; padding: 15px 22px 28px;
  border-top: 1px solid var(--rule-2);
  font-size: 12px; color: var(--ink-3);
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .l-cat, .l-tool { transition: none; }
  .l-cat:hover, a.l-tool:hover { transform: none; }
}

/*
  Primary calls to action carry the brand colour. The app's default .btn is
  ink-on-paper, which is right inside a working tool but too quiet on a page
  whose entire job is to get someone into one - the guide pages read as an
  article, and an ink-coloured button in the middle of prose does not look
  like the thing to press.
*/
.l-nav .btn,
.l-plan--pick .btn,
.l-guide__act .btn {
  background: var(--signal);
  border-color: var(--signal);
  color: #fff;
}
.l-nav .btn:hover,
.l-plan--pick .btn:hover,
.l-guide__act .btn:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--card);
}

/* ---------- tools directory page ---------- */

.l-pagehead {
  background:
    radial-gradient(900px 340px at 20% 0%, var(--l-hero-a), transparent 62%),
    linear-gradient(180deg, var(--l-hero-b), transparent 70%);
  border-bottom: 1px solid var(--rule);
  padding: 26px 0 30px;
  margin-bottom: 8px;
}
.l-crumbs { font-size: 12.5px; color: var(--ink-3); margin-bottom: 12px; }
.l-crumbs a { color: var(--ink-2); text-decoration: none; }
.l-crumbs a:hover { color: var(--signal); }
.l-crumbs span { margin: 0 6px; opacity: 0.6; }
.l-crumbs b { color: var(--ink); font-weight: 600; }

.l-pagehead__title {
  font-family: var(--sans);
  font-size: clamp(26px, 3.6vw, 38px);
  font-weight: 800; letter-spacing: -0.03em;
  margin: 0 0 8px;
}
.l-pagehead__lede { margin: 0 0 20px; color: var(--ink-2); font-size: 14.5px; max-width: 66ch; }

.l-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.l-filter {
  display: inline-flex; align-items: center; gap: 7px;
  font: inherit; font-size: 13.5px; font-weight: 500;
  padding: 8px 14px; cursor: pointer;
  color: var(--ink-2); background: var(--card);
  border: 1px solid var(--rule); border-radius: 100px;
}
.l-filter:hover { color: var(--ink); border-color: var(--ink-3); }
.l-filter small {
  font-family: var(--mono); font-size: 10px;
  background: var(--paper); border-radius: 100px; padding: 2px 7px; color: var(--ink-3);
}
.l-filter.is-on {
  background: var(--signal); border-color: var(--signal); color: #fff; font-weight: 600;
}
.l-filter.is-on small { background: rgba(255, 255, 255, 0.22); color: #fff; }

.l-pagesearch { max-width: 420px; }
.l-pagesearch input {
  width: 100%; font: inherit; font-size: 14px;
  padding: 11px 16px; color: var(--ink);
  background: var(--card); border: 1px solid var(--rule); border-radius: 100px;
}
.l-pagesearch input:focus { border-color: var(--signal); }

.l-count {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3); margin: 20px 0 0;
}

.l-head__left { display: flex; align-items: center; gap: 13px; }
.l-head__count {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3);
  white-space: nowrap;
}

/*
 * The featured category. A tinted panel rather than a border alone, because
 * the directory is a long page of identical sections and an outline at this
 * width reads as a focus ring, not as emphasis.
 */
.l-section.is-featured {
  background: rgba(216, 30, 72, 0.045);
  border: 1px solid var(--rule);
  border-radius: var(--l-radius);
  padding: 30px 24px 34px;
  margin-top: 54px;
}
.l-section.is-featured .l-head { margin-top: 0; }
.l-head__flag {
  display: block;
  margin-bottom: 4px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--signal);
}

.l-empty {
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--l-radius); padding: 44px 26px;
  text-align: center; margin-top: 26px;
}
.l-empty b { display: block; font-size: 16px; margin-bottom: 6px; }
.l-empty p { margin: 0 0 18px; color: var(--ink-3); font-size: 13.5px; }
.l-empty .btn { text-decoration: none; }

/* ---------- marketplace mark on a label tool card ---------- */

.l-tool__art--mark { flex-direction: column; gap: 8px; }
.l-tool__mark {
  font-family: var(--mono);
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
}
/* A few bars under the letters, so the card reads as a shipping label rather
   than an abbreviation. */
.l-tool__minibars { display: flex; gap: 2px; width: 52%; height: 13px; }
.l-tool__minibars i { flex: 1; background: currentColor; opacity: 0.5; }
.l-tool__minibars i:nth-child(3n) { opacity: 0.22; }
.l-tool__minibars i:nth-child(4n) { opacity: 0.75; }

.l-hero__cta { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
.l-hero__cta .btn { padding: 13px 22px; text-decoration: none; }
.l-hero__cta .btn:first-child {
  background: var(--signal); border-color: var(--signal); color: #fff;
}
.l-hero__cta .btn:first-child:hover {
  background: var(--ink); border-color: var(--ink); color: var(--card);
}

/* ---------- sign in / sign up ---------- */

.l-auth {
  min-height: 72vh;
  display: grid;
  place-items: center;
  padding: 44px 22px 64px;
  background:
    radial-gradient(800px 320px at 50% 0%, var(--l-hero-a), transparent 64%),
    linear-gradient(180deg, var(--l-hero-b), transparent 60%);
}
.l-authcard {
  width: 100%;
  max-width: 420px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--l-radius);
  box-shadow: var(--l-shadow);
  padding: 30px 28px 26px;
}
.l-authcard h1 {
  font-family: var(--sans);
  font-size: 24px; font-weight: 800; letter-spacing: -0.03em;
  margin: 0 0 6px;
}
.l-authcard > p { margin: 0 0 20px; color: var(--ink-2); font-size: 13.5px; }

.l-notice {
  display: flex; gap: 10px;
  background: var(--tint-amber-bg);
  border-radius: var(--l-radius-sm);
  padding: 12px 14px; margin-bottom: 20px;
}
.l-notice svg { width: 17px; height: 17px; flex: none; color: var(--tint-amber-fg); margin-top: 1px; }
.l-notice b { display: block; font-size: 13px; color: var(--ink); margin-bottom: 2px; }
.l-notice span { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.l-notice a { color: var(--signal); font-weight: 600; }

.l-field { margin-bottom: 14px; }
.l-field label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 6px; }
/*
  The select and the textarea are here because the contact form uses the same
  fields the sign-in card does, and a control that is styled on one page and
  browser-default on another reads as a page half finished. font: inherit is
  the load-bearing part: a <select> and a <textarea> do not inherit the page's
  font on their own, so without it the topic dropdown is the only thing on the
  site set in the browser's UI face.
*/
.l-field input, .l-field select, .l-field textarea {
  width: 100%; font: inherit; font-size: 14px;
  padding: 11px 13px; color: var(--ink);
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--l-radius-sm);
}
.l-field textarea { min-height: 128px; line-height: 1.55; resize: vertical; }
.l-field input:focus, .l-field select:focus, .l-field textarea:focus { border-color: var(--signal); }
.l-field input:disabled { background: var(--paper); color: var(--ink-3); cursor: not-allowed; }
.l-field small { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 5px; }

.l-authcard .btn { width: 100%; text-align: center; text-decoration: none; margin-top: 4px; }
.l-authcard .btn:not(.btn--quiet) { background: var(--signal); border-color: var(--signal); color: #fff; }
.l-authcard .btn:not(.btn--quiet):hover:not(:disabled) { background: var(--ink); border-color: var(--ink); color: var(--card); }

.l-authalt {
  margin: 18px 0 0; padding-top: 16px;
  border-top: 1px solid var(--rule-2);
  font-size: 13px; color: var(--ink-2); text-align: center;
}
.l-authalt a { color: var(--signal); font-weight: 600; text-decoration: none; }
.l-authalt a:hover { text-decoration: underline; }

.l-authback { display: block; text-align: center; margin-top: 14px; font-size: 12.5px; color: var(--ink-3); text-decoration: none; }
.l-authback:hover { color: var(--signal); }

/* nav auth controls */
.l-navauth { display: flex; align-items: center; gap: 8px; flex: none; }

/*
  Reserved, not collapsed: the corner keeps its width while PC.account answers,
  so the header does not jump when the buttons arrive.

  The floor is on .l-navauth itself and not only on .is-pending, which is what
  makes the sentence above true. With it on the placeholder alone the corner
  reserved 96px and then rendered an 82px account button, so it SHRANK by 14px
  when the session landed - and .l-navmenu is `justify-content: center` and
  `flex: 1`, so those 14px became 7px of sideways movement under every category
  menu on every page. Measured with the Dashboard tab deleted outright, so it
  is not that tab's doing and predates it.

  min-width only ever raises: the signed-out pair of buttons is wider than this
  and is untouched. flex-end keeps the content against the right edge, where it
  already sat when the box was exactly as wide as its contents.
*/
/*
  96px was the floor and the corner's FLOOR is not what moves the row - its
  ceiling is. The button renders the account name, capped at 15ch by
  .l-accountbtn__who below, so it lands anywhere from 96px to about 178px, and
  flooring the bottom of that range only held the row still for names of five
  characters or fewer. "Kewal" is five. "Rajesh Kumar" moved it 18px and
  "Sri Venkateswara Traders" the full 41 - which is to say the fix covered the
  test fixture and almost no real seller.

  Reserved at the ceiling instead, so no name can widen the corner past what was
  already held for it. The cost is the one already accepted for the tab: the
  category menus sit a little left of true centre, statically, where nobody can
  see it without a ruler - and a row that is permanently 40px off centre is
  better than one that moves 40px a second after every page load.
*/
.l-navauth { min-width: 178px; min-height: 38px; justify-content: flex-end; }
.l-navauth.is-pending { visibility: hidden; }

/* ---- signed in ---- */
.l-account { position: relative; }
.l-accountbtn {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px 8px 12px;
  font: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--ink); background: var(--card);
  border: 1px solid var(--rule); border-radius: var(--l-radius-sm);
  cursor: pointer;
}
.l-accountbtn:hover { border-color: var(--signal); color: var(--signal); }
/* icon() returns a bare <svg> with no intrinsic size - without this it renders
   at the SVG default of 300x150 and swallows the header. */
.l-accountbtn svg { width: 13px; height: 13px; flex: none; transition: transform 140ms ease; }
.l-accountbtn[aria-expanded="true"] svg { transform: rotate(180deg); }
.l-accountbtn[aria-expanded="true"] { border-color: var(--signal); color: var(--signal); }
.l-accountbtn__who {
  max-width: 15ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* The category panels are a wide two-column grid centred under the header. This
   one is a short list in the corner, so it undoes both. */
.l-accountpanel { left: auto; right: 0; transform: none; width: 232px; padding: 12px; }
.l-accountpanel.is-open { display: block; }
.l-accountpanel__who {
  margin: 0; font-size: 13.5px; font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.l-accountpanel__plan {
  margin: 3px 0 11px; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.04em; text-transform: uppercase;
}
/* State reads before the words do: green while the plan is live, crimson once
   it is not - the difference a seller needs to catch at a glance. */
.l-accountpanel__plan.is-on  { color: var(--ok); }
.l-accountpanel__plan.is-off { color: var(--signal); }
.l-accountpanel__out {
  display: block; width: 100%; margin-top: 8px; padding: 8px 10px;
  font: inherit; font-size: 13px; color: var(--ink-3); text-align: left;
  background: none; border: 0; border-top: 1px solid var(--rule-2);
  cursor: pointer;
}
.l-accountpanel__out:hover { color: var(--signal); }
.l-accountpanel__out:disabled { opacity: 0.5; cursor: default; }
.l-navauth .l-login {
  font-size: 13.5px; font-weight: 600; color: var(--ink);
  text-decoration: none; padding: 9px 14px;
  border: 1px solid var(--rule); border-radius: var(--l-radius-sm);
}
.l-navauth .l-login:hover { border-color: var(--signal); color: var(--signal); }
/* Hiding Log In outright left no way to sign in from a phone; it moves into
   the drawer instead, while Sign Up stays in the bar as the visible action. */
@media (max-width: 620px) {
  /* Three lines of tagline is most of the header on a 390px screen. */
  .l-brand i { display: none; }
  .l-navauth .l-login { display: none; }
  /* The account button stays: hiding it would leave no way to sign out, and
     unlike Log In it has no equivalent inside the drawer. */
  .l-accountbtn { padding: 8px 9px; }
  .l-accountbtn__who { max-width: 9ch; }
  .l-navmenu .l-drawerlogin { display: block; }
}
.l-drawerlogin {
  display: none;
  margin-top: 6px;
  padding: 13px 12px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
}

/* ---------- what the main tools do ---------- */

.l-spots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1080px) { .l-spots { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .l-spots { grid-template-columns: 1fr; } }

.l-spot {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--l-radius);
  padding: 22px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.l-spot__head { display: flex; align-items: center; gap: 11px; }
.l-spot__head h3 { margin: 0; font-size: 15.5px; font-weight: 700; letter-spacing: -0.02em; }
.l-spot > p { margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.55; }

.l-spot ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.l-spot li {
  position: relative;
  padding-left: 19px;
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.5;
}
.l-spot li::before {
  content: "";
  position: absolute;
  left: 2px; top: 6px;
  width: 7px; height: 4px;
  border-left: 2px solid var(--ok);
  border-bottom: 2px solid var(--ok);
  transform: rotate(-45deg);
}
.l-spot__cta {
  margin-top: auto;
  padding-top: 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--signal);
  text-decoration: none;
}
.l-spot__cta:hover { text-decoration: underline; }

/* ---------- feature blocks ---------- */

.l-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 64px;
  align-items: center;
  padding: 74px 0;
  border-top: 1px solid var(--rule-2);
}
.l-feature:first-child { border-top: 0; }
/* Alternating sides give the page a rhythm as it scrolls rather than four
   identical rows. */
.l-feature.is-flipped .l-feature__art { order: -1; }
@media (max-width: 940px) {
  .l-feature { grid-template-columns: 1fr; gap: 36px; padding: 52px 0; }
  .l-feature.is-flipped .l-feature__art { order: 0; }
}

.l-feature__pill {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 100px;
  padding: 6px 13px;
  margin-bottom: 18px;
}
.l-feature h2 {
  font-family: var(--sans);
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.035em;
  margin: 0 0 14px;
  text-wrap: balance;
}
.l-feature__lede {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 24px;
  max-width: 46ch;
}
.l-feature ul { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 15px; }
.l-feature li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
}
.l-feature li i {
  flex: none;
  width: 24px; height: 24px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--tint-green-bg);
  color: var(--tint-green-fg);
  display: grid;
  place-items: center;
}
.l-feature li i svg { width: 13px; height: 13px; }
.l-feature .btn { text-decoration: none; border-radius: 100px; padding: 14px 26px; }
.l-feature .btn:first-of-type {
  background: var(--signal); border-color: var(--signal); color: #fff;
}
.l-feature .btn:first-of-type:hover {
  background: var(--ink); border-color: var(--ink); color: var(--card);
}

/* ---------- the mock screenshots ---------- */

.l-mock {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 16px;
  box-shadow: var(--l-shadow-lift);
  padding: 16px;
  overflow: hidden;
}
.l-mock__bar { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; }
.l-mock__bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--rule); }
.l-mock__bar b {
  margin-left: 8px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 400;
}

/* proof sheet of cropped labels */
.l-mock__sheet { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.l-mock__lab {
  aspect-ratio: 4 / 6;
  background: var(--paper);
  border: 1px solid var(--rule-2);
  border-radius: 4px;
  padding: 7px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  position: relative;
}
.l-mock__lab .l-bars { height: 15px; }
.l-mock__lab u {
  margin-top: auto;
  text-decoration: none;
  font-family: var(--mono);
  font-size: 7.5px;
  font-weight: 700;
  color: var(--signal);
}

/* an invoice document */
.l-mock__doc { display: flex; flex-direction: column; gap: 9px; }
.l-mock__doc .row { display: flex; gap: 8px; align-items: center; }
.l-mock__doc .row > span { height: 5px; border-radius: 2px; background: var(--rule); flex: 1; }
.l-mock__doc .row > span.w30 { flex: 0 0 30%; }
.l-mock__doc .row > span.dark { background: var(--ink-3); }
.l-mock__doc table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 9.5px; }
.l-mock__doc th {
  text-align: left; font-weight: 600; color: var(--ink-3);
  font-size: 8px; letter-spacing: 0.1em; text-transform: uppercase;
  padding-bottom: 5px; border-bottom: 1px solid var(--ink-3);
}
.l-mock__doc td { padding: 6px 0; border-bottom: 1px solid var(--rule-2); color: var(--ink-2); }
.l-mock__doc td:last-child, .l-mock__doc th:last-child { text-align: right; }
.l-mock__doc .tot { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; font-weight: 700; padding-top: 4px; }
.l-mock__doc .tot span { color: var(--signal); }

/* a sheet of barcode stickers */
.l-mock__stickers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.l-mock__sticker {
  border: 1px dashed var(--rule);
  border-radius: 3px;
  padding: 6px 5px 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}
.l-mock__sticker .l-bars { height: 20px; width: 100%; }
.l-mock__sticker em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: 0.06em;
  color: var(--ink-2);
}

/* page thumbnails with a remove badge */
.l-mock__pages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.l-mock__page {
  position: relative;
  aspect-ratio: 1 / 1.414;
  background: var(--paper);
  border: 1px solid var(--rule-2);
  border-radius: 4px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.l-mock__page.is-out { opacity: 0.34; border-style: dashed; }
.l-mock__page b {
  position: absolute;
  top: -5px; right: -5px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--signal);
  color: #fff;
  font-size: 10px;
  font-weight: 400;
  line-height: 16px;
  text-align: center;
}
.l-mock__page.is-out b { background: var(--ok); }

/* the day's scan list: one row per parcel, packed ones struck through */
.l-mock__scan { display: flex; flex-direction: column; gap: 6px; }
.l-mock__row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border: 1px solid var(--rule-2);
  border-radius: 5px;
  background: var(--paper);
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--ink-2);
}
.l-mock__row i {
  flex: 0 0 auto;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1px solid var(--rule);
}
/* Packed rows recede; the two nobody has scanned are the whole point of the
   picture, so they keep full contrast and the tick stays empty. */
.l-mock__row.is-done { opacity: 0.45; }
.l-mock__row.is-done i { background: var(--ok); border-color: var(--ok); }
.l-mock__row b { font-weight: 700; color: var(--ink); }
.l-mock__row span { margin-left: auto; font-size: 8px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.l-mock__row.is-pending span { color: var(--signal); }

/* ---------- frequently asked questions ---------- */

.l-faq { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 860px) { .l-faq { grid-template-columns: 1fr; } }

.l-faq details {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--l-radius);
  padding: 0 18px;
}
.l-faq details[open] { border-color: var(--signal); }
.l-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 17px 0;
  font-size: 14.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.l-faq summary::-webkit-details-marker { display: none; }
.l-faq summary::after {
  content: "";
  flex: none;
  width: 9px; height: 9px;
  border-right: 2px solid var(--ink-3);
  border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg);
  transition: transform 160ms ease;
}
.l-faq details[open] summary::after { transform: rotate(-135deg); border-color: var(--signal); }
.l-faq p {
  margin: 0;
  padding: 0 0 18px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 58ch;
}
.l-faq p + p { padding-top: 10px; }
.l-faq a { color: var(--signal); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .l-faq summary::after { transition: none; }
}

.l-footer__by { margin-top: 14px; font-size: 13px; }
.l-footer__by a { color: var(--ink); font-weight: 600; text-decoration: none; }
.l-footer__by a:hover { color: var(--signal); text-decoration: underline; }

.l-notice--bad { border-left-color: var(--signal); color: var(--signal); }
.l-hint { display: block; margin-top: 6px; font-size: 12px; color: var(--ink-3); }
.l-authfine { margin-top: 18px; font-size: 13px; color: var(--ink-3); text-align: center; }

/* The +91 is shown, not typed. It is fixed because the country is not a choice
   here, and because "9876543210" and "+919876543210" typed on different days
   are how one person ends up with two accounts. */
.l-phone {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
}
.l-phone:focus-within { border-color: var(--signal); }
.l-phone__code {
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-family: var(--mono);
  font-size: 15px;
  color: var(--ink-2);
  background: var(--paper);
  border-right: 1px solid var(--rule);
}
.l-phone input {
  flex: 1;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: 16px;      /* 16px or iOS zooms the page on focus */
  letter-spacing: 0.04em;
}
.l-phone input:focus { outline: none; }

/* ---- policy pages ----
   One column of prose, measured for reading rather than for filling the
   screen: these are read start to finish by people deciding whether to trust
   us, which is not how any other page here is used. */
.l-legal { padding: 44px 20px 72px; }
.l-legal__inner { max-width: 68ch; margin: 0 auto; }
.l-legal h1 { font-size: 30px; letter-spacing: -0.02em; margin: 0 0 6px; text-wrap: balance; }
.l-legal h2 {
  font-size: 17px; margin: 34px 0 8px; letter-spacing: -0.01em;
  padding-top: 18px; border-top: 1px solid var(--rule-2);
}
.l-legal p, .l-legal li { font-size: 14.5px; line-height: 1.65; color: var(--ink-2); }
.l-legal p { margin: 0 0 12px; }
.l-legal ul { margin: 0 0 12px; padding-left: 20px; }
.l-legal li { margin-bottom: 6px; }
.l-legal a { color: var(--signal); }
.l-legal strong { color: var(--ink); }
.l-legal__stamp {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-3);
}
.l-legal__inner > .l-legal__stamp:last-child {
  margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--rule-2);
  text-transform: none; letter-spacing: 0; font-size: 12.5px;
}

/* The policy links in the footer bar: findable, not shouted. */
.l-footer__policies { display: flex; gap: 16px; flex-wrap: wrap; }
.l-footer__policies a { color: inherit; text-decoration: none; }
.l-footer__policies a:hover { color: var(--signal); text-decoration: underline; }

/* ---- footer on the pages that are not tools ----
   Sign-in, sign-up and the policy pages. Carries the policy links, because
   these are the pages where someone might actually want them. */
.authfoot { border-top: 1px solid var(--rule); background: var(--card); margin-top: 48px; }
.authfoot__inner {
  max-width: 1100px; margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px 20px; flex-wrap: wrap;
}
.authfoot__by { margin: 0; font-size: 12.5px; color: var(--ink-3); }
.authfoot__by a { color: var(--ink-2); font-weight: 600; text-decoration: none; }
.authfoot__links { display: flex; gap: 18px; flex-wrap: wrap; }
.authfoot__links a { font-size: 12.5px; color: var(--ink-3); text-decoration: none; }
.authfoot__links a:hover { color: var(--signal); text-decoration: underline; }

/* Shown before the button that creates the account, because that is the
   moment consent is given - not in a footer nobody scrolled to. */
.l-consent { margin: 0 0 14px; font-size: 12px; line-height: 1.5; color: var(--ink-3); }
.l-consent a { color: var(--ink-2); }

/* ---- pricing page ---- */
.l-pricing { padding: 44px 20px 72px; }
.l-pricing__inner { max-width: 1000px; margin: 0 auto; }
.l-pricing h1 { font-size: 30px; letter-spacing: -0.02em; margin: 0 0 8px; text-wrap: balance; }
.l-pricing__lead { margin: 0 0 26px; color: var(--ink-2); font-size: 15px; max-width: 60ch; }
.l-pricing__fine { margin: 26px 0 0; font-size: 12.5px; color: var(--ink-3); line-height: 1.6; }
.l-pricing__fine a { color: var(--ink-2); }

/* Sits under the plans, quiet: most sellers have no code, and a prominent
   empty box invites people to go looking for one instead of buying. */
.l-coupon { margin-top: 26px; max-width: 420px; }
.l-coupon label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.l-coupon__row { display: flex; gap: 8px; }
.l-coupon__row input {
  flex: 1; padding: 9px 12px; font: inherit; font-size: 14px;
  border: 1px solid var(--rule); border-radius: var(--l-radius-sm);
  background: var(--card); color: var(--ink);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.l-coupon__row input:focus { outline: 2px solid var(--signal); outline-offset: 1px; }
.l-hint--bad { color: var(--signal); }
.l-hint--good { color: var(--ok); }

/* ---- payment result pages ----
   One card, one clear sentence, one obvious next step. Someone reading this
   has either just spent money or just failed to, and in both cases they want
   an answer and a way forward, not a page to explore. */
.l-payout { padding: 56px 20px 80px; display: grid; place-items: start center; }
.l-payout__card {
  width: 100%; max-width: 440px; padding: 30px 28px 26px;
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--l-radius); box-shadow: var(--l-shadow-lift);
  text-align: center;
}
.l-payout__mark {
  width: 52px; height: 52px; margin: 0 auto 16px; border-radius: 50%;
  display: grid; place-items: center;
}
.l-payout__mark svg { width: 26px; height: 26px; }
.l-payout__mark--ok  { background: rgba(30, 122, 90, 0.12); color: var(--ok); }
.l-payout__mark--bad { background: rgba(214, 34, 70, 0.10); color: var(--signal); }
.l-payout h1 { font-size: 22px; margin: 0 0 8px; letter-spacing: -0.01em; text-wrap: balance; }
.l-payout__lead { margin: 0 0 20px; color: var(--ink-2); font-size: 14.5px; line-height: 1.6; }

/* Two columns so the label and the value line up like a receipt. */
.l-payout__facts {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 16px;
  margin: 0 0 18px; padding: 14px 16px; text-align: left;
  background: var(--paper); border-radius: var(--l-radius-sm);
  font-size: 13.5px;
}
.l-payout__facts dt { color: var(--ink-3); }
.l-payout__facts dd { margin: 0; color: var(--ink); font-weight: 600; }
.l-payout__ref {
  margin: 0 0 18px; font-family: var(--mono); font-size: 11.5px;
  color: var(--ink-3); word-break: break-all;
}
.l-payout__acts { margin-bottom: 18px; }
.l-payout__fine {
  margin: 0; padding-top: 16px; border-top: 1px solid var(--rule-2);
  font-size: 12px; color: var(--ink-3); line-height: 1.55;
}
.l-payout__fine a { color: var(--ink-2); }

/* ---- tool guide pages ----
   Public pages for tools that are themselves behind a sign-in. Read start to
   finish by someone deciding whether to trust us with an order file, so they
   are set for reading: one column, measured line length, real hierarchy. */
.l-guide { padding: 44px 20px 76px; }
.l-guide__inner { max-width: 72ch; margin: 0 auto; }
.l-guide h1 { font-size: 32px; letter-spacing: -0.02em; margin: 0 0 14px; text-wrap: balance; }
.l-guide h2 {
  font-size: 19px; margin: 38px 0 10px; letter-spacing: -0.01em;
  padding-top: 20px; border-top: 1px solid var(--rule-2);
}
.l-guide__lead { font-size: 16px; line-height: 1.65; color: var(--ink-2); margin: 0 0 14px; }
.l-guide p, .l-guide li, .l-guide dd { font-size: 15px; line-height: 1.65; color: var(--ink-2); }
.l-guide ul, .l-guide ol { margin: 0 0 14px; padding-left: 22px; }
.l-guide li { margin-bottom: 8px; }
.l-guide a { color: var(--signal); }

/* The call to action, and the thing it is honest about: this needs an account. */
.l-guide__act { margin: 26px 0; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.l-guide__note { font-size: 12.5px; color: var(--ink-3); }


.l-guide__faq dt {
  font-weight: 600; color: var(--ink); margin-top: 18px; font-size: 15px;
}
.l-guide__faq dd { margin: 6px 0 0; }

/* ---- the guide index on tools.html ----
   Real anchors, written in by the build. Quiet: the cards above are the way
   most people choose a tool, and this is here so the guides are reachable and
   so search engines see something vouching for them. */
.l-guidelinks { max-width: 1200px; margin: 48px auto 0; padding: 26px 22px 0; border-top: 1px solid var(--rule-2); }
.l-guidelinks h2 { font-size: 16px; margin: 0 0 14px; color: var(--ink-2); }
.l-guidelinks ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px 26px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.l-guidelinks li { font-size: 13px; line-height: 1.5; }
.l-guidelinks a { color: var(--ink); font-weight: 600; text-decoration: none; }
.l-guidelinks a:hover { color: var(--signal); text-decoration: underline; }
.l-guidelinks span { display: block; color: var(--ink-3); }

/* ---- the savings calculator on the label guides ----
   Inputs first, the answer last and large. Every figure in it is one the
   seller typed, which is the only honest way to print a rupee amount on a
   page that has never seen their invoices. */
.l-calc { margin: 18px 0 8px; padding: 20px; background: var(--paper); border-radius: var(--l-radius); }
.l-calc__inputs { display: grid; gap: 12px 18px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.l-calc__inputs label { display: block; font-size: 12.5px; color: var(--ink-2); font-weight: 600; }
.l-calc__inputs input {
  display: block; width: 100%; margin-top: 5px; padding: 8px 10px;
  font: inherit; font-size: 15px; font-variant-numeric: tabular-nums;
  border: 1px solid var(--rule); border-radius: var(--l-radius-sm);
  background: var(--card); color: var(--ink);
}
.l-calc__inputs input:focus { outline: 2px solid var(--signal); outline-offset: 1px; }
.l-calc__hint { margin: 10px 0 0; font-size: 11.5px; color: var(--ink-3); }
.l-calc__out {
  display: grid; grid-template-columns: 1fr auto; gap: 6px 16px;
  margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--rule-2);
  font-size: 13.5px;
}
.l-calc__out dt { color: var(--ink-3); }
.l-calc__out dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.l-calc__saved {
  margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--rule-2);
  font-size: 14px; color: var(--ink-2);
}
.l-calc__saved b { font-size: 26px; color: var(--ok); margin-right: 8px; font-variant-numeric: tabular-nums; }

/*
  A tool that is live but new enough to say so.

  Deliberately quiet: this is a note, not a warning. It sits next to the name in
  the menu and next to the heading on the tool itself, so someone who skims
  either one has still been told before they rely on it.
*/
.l-badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1;
  padding: 3px 6px;
  margin-left: 8px;
  border: 1px solid var(--signal);
  border-radius: 2px;
  color: var(--signal);
  vertical-align: middle;
  white-space: nowrap;
}
.toolhead__title .l-badge { vertical-align: 0.28em; }

/* ---------- guide figures ---------- */

/*
 * The picture at the top of a guide. Drawn from CSS rather than shipped as an
 * image per tool: twenty-eight screenshots go stale quietly, and the stale one
 * is always the page nobody opens again.
 *
 * Everything here is sized in em against .l-fig so one font-size change
 * rescales a whole diagram, and so the narrow layout is a font-size change
 * rather than a second set of measurements.
 */
.l-fig {
  font-size: 13px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.4em;
  margin: 26px 0 30px;
  padding: 2em 1.6em;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--l-radius);
}
@media (max-width: 620px) {
  .l-fig { font-size: 11.5px; grid-template-columns: 1fr; gap: 0.9em; }
  /*
   * Stacked, the arrow has to point down or it lies about the direction - but
   * turning the whole thing stands the verb on its end, so only the shaft is
   * turned and the word stays beside it, readable.
   */
  .l-fig__arrow { flex-direction: row; gap: 0.8em; }
  .l-fig__arrow i { transform: rotate(90deg); }
}

.l-fig__side { margin: 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1em; }
.l-fig__art { display: flex; align-items: center; justify-content: center; min-height: 8.6em; width: 100%; }
.l-fig__side figcaption {
  font-size: 0.95em;
  line-height: 1.4;
  color: var(--ink-3);
  text-align: center;
  max-width: 19em;
}

/* the arrow, with the verb sitting on it */
.l-fig__arrow { display: flex; flex-direction: column; align-items: center; gap: 0.5em; }
.l-fig__arrow i {
  display: block; width: 3.4em; height: 2px;
  background: var(--signal); position: relative;
}
.l-fig__arrow i::after {
  content: ''; position: absolute; right: -1px; top: -0.42em;
  border: 0.46em solid transparent; border-left-color: var(--signal); border-right: 0;
}
.l-fig__arrow em {
  font-style: normal; font-family: var(--mono);
  font-size: 0.8em; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--signal);
}

/* a sheet of paper */
.l-fig__sheet {
  position: relative;
  display: flex; flex-direction: column; gap: 0.45em;
  width: 7.2em; padding: 0.7em;
  background: var(--paper);
  border: 1px solid var(--rule-2);
  border-radius: 4px;
  overflow: hidden;
}
.l-fig__sheet.is-a4 { aspect-ratio: 210 / 297; }
.l-fig__sheet.is-label { aspect-ratio: 4 / 6; width: 6em; }
.l-fig__sheet.is-wide { aspect-ratio: 4 / 3; width: 8.4em; }
.l-fig__sheet.is-turned { transform: rotate(-90deg); }
.l-fig__sheet.is-faint { opacity: 0.45; }

.l-fig__body { display: flex; flex-direction: column; gap: 0.32em; }
.l-fig__line { display: block; height: 0.3em; border-radius: 1px; background: var(--rule); }

.l-fig__bars { display: flex; gap: 1px; height: 1.5em; align-items: stretch; }
.l-fig__bars i { flex: 1; background: var(--ink); }
/* The thin/thick alternation is what makes it read as a barcode rather than
   as a bar chart. Nothing encodes anything - it is a picture of a barcode. */
.l-fig__bars i:nth-child(3n) { flex: 2; }
.l-fig__bars i:nth-child(4n) { background: transparent; }

.l-fig__sheet u {
  text-decoration: none; margin-top: auto;
  font-family: var(--mono); font-size: 0.62em; font-weight: 700; color: var(--signal);
}

/* the marketplace A4 page: label on top, tax invoice below the cut */
.l-fig__sheet.is-a4 { width: 6.4em; }
.l-fig__kept {
  display: flex; flex-direction: column; gap: 0.45em;
  margin: -0.25em -0.3em 0; padding: 0.25em 0.3em 0.35em;
  border: 1.5px solid var(--signal); border-radius: 3px;
  background: rgba(216, 30, 72, 0.07);
}
/* Meesho's label lies across the sheet: wide, short, and turned a quarter. */
.l-fig__kept.is-wide { aspect-ratio: 6 / 4; justify-content: center; }
.l-fig__kept.is-wide .l-fig__bars { height: 1.1em; }
.l-fig__cut { display: block; border-top: 1px dashed var(--rule); margin: 0.3em -0.7em 0; }
.l-fig__half { display: flex; flex-direction: column; gap: 0.3em; opacity: 0.35; padding-top: 0.45em; }
/* The 4x6 that comes out is drawn larger than the region it came from - a
   thermal label IS bigger than that corner of the A4, and drawing them the
   same size made the arrow look like it did nothing. */
.l-fig__sheet.is-label { width: 6.8em; }

/* the crop marquee */
.l-fig__box {
  position: absolute; left: 12%; top: 10%; right: 12%; bottom: 42%;
  border: 1.5px solid var(--signal);
  background: rgba(216, 30, 72, 0.08);
  border-radius: 2px;
}
/* a highlighted region, for "this part is kept" */
.l-fig__pick { position: absolute; left: 0; right: 0; top: 0; height: 46%; background: rgba(216, 30, 72, 0.07); }

.l-fig__stamp {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) rotate(-38deg);
  font-family: var(--mono); font-weight: 700; font-size: 0.92em;
  letter-spacing: 0.12em; white-space: nowrap;
  color: var(--signal); opacity: 0.42;
}

.l-fig__num {
  position: absolute; right: 0.4em; bottom: 0.4em;
  font-family: var(--mono); font-size: 0.6em;
  color: var(--ink-3); background: var(--card);
  padding: 0.15em 0.4em; border-radius: 3px;
}

/* several small pages */
.l-fig__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5em; width: 9.4em; }
.l-fig__cell {
  position: relative; aspect-ratio: 1 / 1.414;
  display: flex; flex-direction: column; gap: 0.25em; justify-content: center;
  padding: 0.45em;
  background: var(--paper); border: 1px solid var(--rule-2); border-radius: 3px;
}
.l-fig__cell.is-out { opacity: 0.3; border-style: dashed; }
.l-fig__cell.is-pick { border-color: var(--signal); }
.l-fig__cell b {
  position: absolute; top: -0.4em; right: -0.4em;
  width: 1.25em; height: 1.25em; line-height: 1.25em; text-align: center;
  border-radius: 50%; font-size: 0.7em; font-weight: 400; color: #fff;
  background: var(--ink-3);
}
.l-fig__cell.is-pick b { background: var(--signal); }

/* square image tiles */
.l-fig__tiles { display: flex; gap: 0.5em; flex-wrap: wrap; justify-content: center; max-width: 11em; }
.l-fig__tile {
  display: flex; align-items: flex-end; justify-content: center;
  width: 3em; aspect-ratio: 1; padding: 0.35em;
  background: var(--rule-2); border-radius: 3px; overflow: hidden;
}
.l-fig__tile.is-wide { aspect-ratio: 4 / 3; width: 3.8em; }
/* Tagged tiles carry a filename, which needs room to be a filename. */
.l-fig__tiles.is-tagged { max-width: 13.5em; }
.l-fig__tiles.is-tagged .l-fig__tile { width: 6em; }
/* Literally white, in both themes: the caption beside it says "on white". */
.l-fig__tile.is-white { background: #fff; border: 1px solid var(--rule-2); }
.l-fig__tile.is-white i { background: #9aa4ae; opacity: 1; }
/* A shape inside the frame, so a "photo" is not a flat grey square. */
.l-fig__tile i { display: block; width: 62%; height: 58%; border-radius: 3px 3px 0 0; background: var(--ink-3); opacity: 0.5; }

.l-fig__tile { position: relative; }
.l-fig__tile b {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) rotate(-30deg);
  font-family: var(--mono); font-size: 0.5em; font-weight: 700;
  letter-spacing: 0.08em; white-space: nowrap;
  color: var(--signal); opacity: 0.75;
}
.l-fig__tile em {
  position: absolute; left: 0; right: 0; bottom: 0;
  font-style: normal; font-family: var(--mono); font-size: 0.6em;
  text-align: center; padding: 0.3em 0.2em;
  background: var(--card); color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* the day's list */
.l-fig__rows { display: flex; flex-direction: column; gap: 0.35em; width: 100%; max-width: 13em; }
.l-fig__row {
  display: flex; align-items: center; gap: 0.6em;
  padding: 0.45em 0.6em;
  background: var(--paper); border: 1px solid var(--rule-2); border-radius: 4px;
  font-family: var(--mono); font-size: 0.72em;
}
.l-fig__row i { flex: 0 0 auto; width: 0.9em; height: 0.9em; border-radius: 50%; border: 1px solid var(--rule); }
.l-fig__row.is-done { opacity: 0.45; }
.l-fig__row.is-done i { background: var(--ok); border-color: var(--ok); }
.l-fig__row b { font-weight: 700; color: var(--ink); }
.l-fig__row em { margin-left: auto; font-style: normal; font-size: 0.85em; color: var(--ink-3); }
.l-fig__row:not(.is-done) em { color: var(--signal); }

/* a form */
.l-fig__form { display: flex; flex-direction: column; gap: 0.55em; width: 100%; max-width: 11em; }
.l-fig__field {
  display: flex; flex-direction: column; gap: 0.3em;
  padding: 0.45em 0.6em;
  background: var(--paper); border: 1px solid var(--rule-2); border-radius: 4px;
}
.l-fig__field em {
  font-style: normal; font-family: var(--mono); font-size: 0.66em;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3);
}
.l-fig__field i { display: block; height: 0.32em; width: 70%; border-radius: 1px; background: var(--rule); }

/* ---------- guide steps and capabilities, made scannable ---------- */

/*
 * Same markup as before - an <ol> and a <ul> - restyled. The steps were a
 * numbered list of paragraphs, which reads as prose and gets skipped; the
 * capabilities were bullets, which read as a legal disclaimer.
 */
.l-guide ol.l-guide__steps { counter-reset: gstep; list-style: none; padding: 0; margin: 18px 0 30px; display: grid; gap: 12px; }
.l-guide__steps > li {
  counter-increment: gstep;
  margin-bottom: 0;
  position: relative;
  padding: 16px 18px 16px 58px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--l-radius);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-2);
}
.l-guide__steps > li::before {
  content: counter(gstep);
  position: absolute; left: 18px; top: 16px;
  width: 26px; height: 26px; line-height: 26px; text-align: center;
  border-radius: 50%;
  background: var(--signal); color: #fff;
  font-family: var(--mono); font-size: 12.5px; font-weight: 700;
}
.l-guide__steps > li b { display: block; margin-bottom: 4px; color: var(--ink); font-size: 15px; }

.l-guide ul.l-guide__does { list-style: none; padding: 0; margin: 18px 0 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }
@media (max-width: 720px) { .l-guide__does { grid-template-columns: 1fr; } }
.l-guide__does > li {
  position: relative;
  margin-bottom: 0;
  padding-left: 27px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
}
.l-guide__does > li::before {
  content: '';
  position: absolute; left: 0; top: 0.42em;
  width: 15px; height: 8px;
  border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok);
  transform: rotate(-45deg) scale(0.8);
  transform-origin: center;
}

/* ---------- the phone app, and the QR that installs it ---------- */

/*
 * Two buttons on one line rather than .l-split's single stacked one, because
 * neither is the obvious next step on its own: a seller on a phone wants the
 * store, a seller on a desktop wants to read what the scanning actually does.
 */
.l-appstores { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.l-appstores .btn { margin-top: 0; }

/*
 * The code sits on a white card whatever the theme. A QR inverted for dark
 * mode is one a good share of phone cameras will not read - the spec assumes
 * dark modules on a light ground, and readers that handle the inverse are a
 * bonus rather than something to rely on. So the card keeps its own white and
 * the SVG keeps its own colours, in both themes.
 */
.l-appqr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--l-radius);
  justify-self: center;
  max-width: 280px;
}
.l-appqr img { display: block; width: 180px; height: 180px; }
/* Not var(--ink-2): that token flips with the theme and this card does not. */
.l-appqr p {
  margin: 0;
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
  color: #5a6b7b;
}