/* layercell design system — components
   Requires layercell-tokens.css to be loaded first.
   Fonts: IBM Plex Serif / Sans / Mono. */

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

body {
  margin: 0;
  background: var(--lc-ink);
  color: var(--lc-text);
  font-family: var(--lc-font-sans);
  font-size: var(--lc-body);
  line-height: var(--lc-body-lh);
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--lc-selection-bg);
  color: var(--lc-text);
}

a {
  color: var(--lc-signal);
  text-decoration: none;
  transition: color var(--lc-transition);
}
a:hover {
  color: var(--lc-text);
}

:focus-visible {
  outline: 2px solid var(--lc-signal);
  outline-offset: 2px;
  border-radius: var(--lc-radius-cell);
}

/* ── Type ─────────────────────────────────────────────────────────
   Serif for what a page is about. Sans for what you do next.
   Never a sans display heading; never a serif button or label. */

.lc-display-xl,
.lc-display-l,
.lc-heading-m,
.lc-heading-s {
  font-family: var(--lc-font-serif);
  font-weight: 400;
  margin: 0;
  text-wrap: balance;
}
.lc-display-xl {
  font-size: var(--lc-display-xl);
  line-height: var(--lc-display-xl-lh);
  letter-spacing: var(--lc-display-xl-ls);
}
.lc-display-l {
  font-size: var(--lc-display-l);
  line-height: var(--lc-display-l-lh);
  letter-spacing: var(--lc-display-l-ls);
}
.lc-heading-m {
  font-size: var(--lc-heading-m);
  line-height: var(--lc-heading-m-lh);
  letter-spacing: var(--lc-heading-m-ls);
}
.lc-heading-s {
  font-size: var(--lc-heading-s);
  line-height: var(--lc-heading-s-lh);
  letter-spacing: var(--lc-heading-s-ls);
}

.lc-lede {
  font-size: var(--lc-lede);
  line-height: var(--lc-lede-lh);
  color: var(--lc-text-dim);
  max-width: var(--lc-prose-max);
  margin: 0;
  text-wrap: pretty;
}
.lc-body {
  font-size: var(--lc-body);
  line-height: var(--lc-body-lh);
  margin: 0;
}
.lc-body-s {
  font-size: var(--lc-body-s);
  line-height: var(--lc-body-s-lh);
  margin: 0;
}
.lc-dim {
  color: var(--lc-text-dim);
}
.lc-faint {
  color: var(--lc-text-faint);
}

.lc-mono {
  font-family: var(--lc-font-mono);
  font-size: var(--lc-mono);
  line-height: var(--lc-mono-lh);
}

.lc-label {
  font-family: var(--lc-font-mono);
  font-size: var(--lc-label);
  font-weight: 500;
  letter-spacing: var(--lc-label-ls);
  text-transform: uppercase;
  color: var(--lc-text-faint);
}

/* ── Layout ────────────────────────────────────────────────────── */

.lc-container {
  max-width: var(--lc-content-max);
  margin: 0 auto;
  padding-inline: var(--lc-space-8);
}
.lc-section {
  padding-block: var(--lc-space-24);
  border-top: var(--lc-rule-width) solid var(--lc-rule);
}
.lc-section--hero {
  padding-block: var(--lc-space-32);
  border-top: 0;
}
.lc-stack {
  display: flex;
  flex-direction: column;
  gap: var(--lc-space-4);
}
.lc-row {
  display: flex;
  align-items: center;
  gap: var(--lc-space-3);
}

/* ── Mark ──────────────────────────────────────────────────────────
   3x3 cell field. The lit cell identifies the app; colour never varies.
   Set --lc-mark-size to scale. Back layer only at 32px and above. */

.lc-mark {
  --lc-mark-size: 18px;
  position: relative;
  /* inline-block, not inline: width/height are ignored on an inline box, and
     .lc-mark__field is absolutely positioned, so an inline mark collapses to
     0x0. It only appeared to work where a flex parent blockified it. */
  display: inline-block;
  vertical-align: middle;
  width: var(--lc-mark-size);
  height: var(--lc-mark-size);
  flex: none;
}
.lc-mark__field {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 1px;
  background: var(--lc-rule-strong);
  border: 1px solid var(--lc-rule-strong);
  border-radius: var(--lc-radius-cell);
}
.lc-mark__field i {
  background: var(--lc-ink-raised);
  display: block;
}
/* Two materials, because the row and the fingerprint mean different things:
   .is-lit   — the platform row, in signal. Loudest; read first.
   .is-print — the fingerprint, in text-dim. Clearly secondary, and never
               mistaken for part of the platform signal. */
.lc-mark__field i.is-lit {
  background: var(--lc-signal);
}
.lc-mark__field i.is-print {
  background: var(--lc-text-dim);
}

.lc-mark--layered {
  width: calc(var(--lc-mark-size) + var(--lc-layer-1-offset));
  height: calc(var(--lc-mark-size) + var(--lc-layer-1-offset));
}
.lc-mark--layered .lc-mark__field {
  width: var(--lc-mark-size);
  height: var(--lc-mark-size);
  inset: auto auto auto 0;
  top: 0;
}
.lc-mark--layered .lc-mark__field--back {
  top: var(--lc-layer-1-offset);
  left: var(--lc-layer-1-offset);
  opacity: var(--lc-layer-1-opacity);
  background: var(--lc-rule);
  border-color: var(--lc-rule);
}

.lc-wordmark {
  font-family: var(--lc-font-serif);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--lc-text);
}
.lc-apptag {
  font-family: var(--lc-font-mono);
  font-size: 12.5px;
  color: var(--lc-text-dim);
}

/* ── Header ───────────────────────────────────────────────────────
   64px, sticky, one bottom rule, blur behind. Three text links, one filled button. */

.lc-header {
  position: sticky;
  top: 0;
  z-index: 10;
  height: var(--lc-header-h);
  background: var(--lc-header-bg);
  backdrop-filter: blur(12px);
  border-bottom: var(--lc-rule-width) solid var(--lc-rule);
}
.lc-header__inner {
  max-width: var(--lc-content-max);
  margin: 0 auto;
  padding-inline: var(--lc-space-8);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lc-space-6);
}
.lc-header__lockup {
  display: flex;
  align-items: center;
  gap: 11px;
}
.lc-header__nav {
  display: flex;
  align-items: center;
  gap: var(--lc-space-6);
  font-size: var(--lc-body-s);
}
/* Buttons are excluded: a .lc-btn mounted in the nav must keep its own colour,
   or a primary CTA renders text-dim on a text-coloured fill. */
.lc-header__nav a:not(.lc-btn) {
  color: var(--lc-text-dim);
}
.lc-header__nav a:not(.lc-btn):hover {
  color: var(--lc-text);
}

/* ── Buttons ───────────────────────────────────────────────────────
   Primary is high-contrast neutral, so signal stays free for state and focus,
   and nothing competes with a Polaris button sitting beside it. */

.lc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lc-space-2);
  min-height: var(--lc-hit-min);
  padding: var(--lc-space-3) var(--lc-space-6);
  border: var(--lc-rule-width) solid transparent;
  border-radius: var(--lc-radius-action);
  font-family: var(--lc-font-sans);
  font-size: var(--lc-action);
  font-weight: 500;
  line-height: var(--lc-action-lh);
  cursor: pointer;
  transition:
    background var(--lc-transition),
    border-color var(--lc-transition),
    color var(--lc-transition);
}
.lc-btn--primary {
  background: var(--lc-text);
  color: var(--lc-ink);
}
.lc-btn--primary:hover {
  background: var(--lc-text-dim);
}

.lc-btn--secondary {
  background: transparent;
  color: var(--lc-text);
  border-color: var(--lc-rule-strong);
}
.lc-btn--secondary:hover {
  border-color: var(--lc-text-dim);
}

.lc-btn--tertiary {
  background: transparent;
  color: var(--lc-signal);
  padding-inline: var(--lc-space-1);
}
.lc-btn--tertiary:hover {
  color: var(--lc-text);
}

.lc-btn:disabled,
.lc-btn[aria-disabled='true'] {
  background: var(--lc-disabled-bg);
  color: var(--lc-disabled-text);
  border-color: transparent;
  cursor: not-allowed;
}

/* Specificity guard. A .lc-btn is often an <a>, and any container rule of the
   shape `.wrapper a { color: … }` (0,1,1) would otherwise beat the button's own
   colour (0,1,0) and render a primary CTA in text-dim on a text-coloured fill.
   These duplicate the rules above at (0,2,0) so the component always wins
   wherever it is mounted. Do not remove; add to this list if a rank is added. */
a.lc-btn.lc-btn--primary {
  color: var(--lc-ink);
}
a.lc-btn.lc-btn--secondary {
  color: var(--lc-text);
}
a.lc-btn.lc-btn--tertiary {
  color: var(--lc-signal);
}
a.lc-btn.lc-btn--primary:hover {
  color: var(--lc-ink);
}
a.lc-btn.lc-btn--secondary:hover {
  color: var(--lc-text);
}
a.lc-btn.lc-btn--tertiary:hover {
  color: var(--lc-text);
}

/* Header button is compact — the one exception to the 44px floor, since the
   header itself is a 64px hit area. */
.lc-header .lc-btn {
  min-height: 34px;
  padding: var(--lc-space-2) 15px;
  font-size: 13.5px;
}

/* ── Cell ──────────────────────────────────────────────────────────
   Adjacent cells share one hairline. A cell grid is a 1px background with 1px
   gaps, so the rule between two cells weighs exactly what the edge rule weighs.
   Cells never nest. Prose sits on the canvas, never in a cell. */

.lc-cells {
  display: grid;
  gap: var(--lc-rule-width);
  background: var(--lc-rule);
  border: var(--lc-rule-width) solid var(--lc-rule);
  border-radius: var(--lc-radius-cell);
  overflow: hidden;
}
.lc-cells--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.lc-cells--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.lc-cells--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.lc-cell {
  background: var(--lc-ink-raised);
  padding: var(--lc-space-6);
  min-width: 0;
}
.lc-cell--tight {
  padding: var(--lc-space-3) var(--lc-space-4);
}

/* A lone cell keeps its own border since it has no neighbour to share with. */
.lc-cell--standalone {
  background: var(--lc-ink-raised);
  border: var(--lc-rule-width) solid var(--lc-rule);
  border-radius: var(--lc-radius-cell);
  padding: var(--lc-space-8);
}

/* ── Layer ─────────────────────────────────────────────────────────
   Depth is offset copies at falling opacity. No drop shadows, ever. */

.lc-layer-1 {
  transform: translate(var(--lc-layer-1-offset), var(--lc-layer-1-offset));
  opacity: var(--lc-layer-1-opacity);
}
.lc-layer-2 {
  transform: translate(var(--lc-layer-2-offset), var(--lc-layer-2-offset));
  opacity: var(--lc-layer-2-opacity);
}

/* Page behind a modal drops back a layer rather than being dimmed by a scrim. */
.lc-page--behind-modal {
  opacity: var(--lc-layer-1-opacity);
}
.lc-page--behind-sheet {
  opacity: var(--lc-layer-2-opacity);
}

/* ── Rows: settings, scopes, spec lists ────────────────────────────
   Label plus one line of help, on a rule rather than in a cell. */

.lc-rows {
  border-top: var(--lc-rule-width) solid var(--lc-rule);
}
.lc-row-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lc-space-8);
  padding-block: var(--lc-space-4);
  border-bottom: var(--lc-rule-width) solid var(--lc-rule);
}
.lc-row-item__label {
  font-size: var(--lc-action);
  color: var(--lc-text);
  margin-bottom: 3px;
}
.lc-row-item__help {
  font-size: 13.5px;
  color: var(--lc-text-dim);
}
.lc-row-item__control {
  font-family: var(--lc-font-mono);
  font-size: 12.5px;
  color: var(--lc-signal);
  white-space: nowrap;
}

/* ── State ─────────────────────────────────────────────────────────
   Signal carries warn and focus; ok carries healthy. Nothing else is coloured. */

.lc-state-ok {
  color: var(--lc-ok);
}
.lc-state-warn {
  color: var(--lc-signal);
}

/* ── Pricing ───────────────────────────────────────────────────────
   Three cells sharing rules. The number is the headline, set in serif. */

.lc-price {
  font-family: var(--lc-font-serif);
  font-size: var(--lc-display-l);
  letter-spacing: -0.02em;
}
.lc-price__unit {
  font-family: var(--lc-font-mono);
  font-size: 12px;
  color: var(--lc-text-faint);
}

/* ── Flow progress ─────────────────────────────────────────────────
   Cells, one lit, plus the words. Never a percentage bar. */

.lc-steps {
  display: flex;
  gap: 3px;
}
.lc-steps i {
  display: block;
  width: 22px;
  height: 4px;
  border-radius: 1px;
  background: var(--lc-rule-strong);
}
.lc-steps i.is-done {
  background: var(--lc-signal);
}

/* ── Footer ────────────────────────────────────────────────────── */

.lc-footer {
  border-top: var(--lc-rule-width) solid var(--lc-rule);
  background: var(--lc-ink-raised);
}
.lc-footer__inner {
  max-width: var(--lc-content-max);
  margin: 0 auto;
  padding: var(--lc-space-11) var(--lc-space-8);
}
.lc-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
  gap: var(--lc-space-11);
}
.lc-footer__meta {
  margin-top: var(--lc-space-11);
  padding-top: var(--lc-space-6);
  border-top: var(--lc-rule-width) solid var(--lc-rule);
  display: flex;
  justify-content: space-between;
  font-family: var(--lc-font-mono);
  font-size: 11.5px;
  color: var(--lc-text-faint);
}

/* ── Breakpoints — 1120 / 880 / 640 ──────────────────────────────── */

@media (max-width: 880px) {
  :root {
    --lc-display-xl: 44px;
    --lc-display-l: 31px;
    --lc-heading-m: 24px;
  }
  .lc-cells--3,
  .lc-cells--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lc-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  :root {
    --lc-display-xl: 34px;
    --lc-display-l: 26px;
    --lc-space-24: 64px;
    --lc-space-32: 72px;
  }
  .lc-container,
  .lc-header__inner,
  .lc-footer__inner {
    padding-inline: var(--lc-space-6);
  }
  .lc-cells--2,
  .lc-cells--3,
  .lc-cells--4,
  .lc-footer__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .lc-header__nav {
    display: none;
  }
  .lc-row-item {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--lc-space-2);
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}