/* ============================================================================
   The Sunlit Press v1.1 — the public marketing surface.

   Ported from the brand kit (05-pages/landing.html + enterprise.html, tokens in
   02-color/tokens.css, laws in 04-components/DESIGN.md). Every public page —
   landing, enterprise, download, pricing, signup, device, changelog, legal —
   renders from this one sheet so the surfaces cannot drift apart.

   The five laws, because they explain nearly every rule below:
     1. Paper & ink. Cream page, white cards, near-black text AND borders.
     2. Radius 0. Nothing is rounded, anywhere.
     3. 1.5px ink borders. Structure comes from the line, never from a shadow.
     4. Orange is punctuation — under 2% of pixels. It is the cursor, the primary
        CTA, the strike-through on a frontier price, and ::selection. Not a fill.
     5. Two grounds, one accent. This began light-only — the CLI slab was the single
        dark element allowed — and now carries a dark counterpart from the approved
        mockup (style/token/color.css). Ground and ink swap; orange does not, and law
        4 holds in both: it is still punctuation, not a fill.
   ============================================================================ */

.sunlit {
  /* Local aliases for the global tokens (style/token/color.css already carries the
     Sunlit palette). Named as the brand kit names them so this sheet reads against
     DESIGN.md without a translation step. */
  --paper: var(--color-bg);
  --surface: var(--color-bg-surface);
  --ink: var(--color-text);
  --ink-2: #161b22; /* CLI slab background — the one dark element in the light theme */
  --cli-text: #e6edf3;
  --body-text: var(--color-text-secondary);
  --muted: var(--color-text-muted);
  --line: var(--color-border-muted);
  /* Structural border colour. Law 3 draws structure with a 1.5px ink line, and on cream
     that reads as a crisp hairline. Inverted it does not: a light line on a dark ground
     appears markedly heavier at the same width, so the same rules that framed the light
     page were fencing the dark one. This is --ink in light and steps down in dark, which
     keeps law 3's geometry while restoring its weight. */
  --edge: var(--ink);
  --accent: var(--color-accent);
  --accent-hover: var(--color-accent-hover);
  --tint: #fff1d6;

  /* Dark overrides for the three locals above that are not aliases of a global token.
     The CLI slab is the interesting one: it was the only dark surface in a light page,
     so on a dark page it must move AWAY from the ground to stay a distinct object —
     keeping #161b22 against #1a1a19 would flatten it into the background. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) & {
      --ink-2: #010409;
      --cli-text: #e6edf3;
      --edge: #30363d;
      --tint: #2a2317; /* the warm wash behind highlighted numbers, dimmed to suit */
    }
  }
  :root[data-theme="dark"] & {
    --ink-2: #010409;
    --cli-text: #e6edf3;
    --edge: #30363d;
    --tint: #2a2317;
  }
  --stamp: var(--color-success);
  --danger: var(--color-danger);

  --display: var(--font-display);
  --body: var(--font-sans);
  --mono: var(--font-mono);

  --s2: 8px;
  --s3: 16px;
  --s4: 24px;
  --s5: 32px;
  --s6: 48px;
  --s7: 64px;

  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  min-height: 100vh;
}

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

.sunlit ::selection {
  background: var(--accent);
  /* NOT --ink: that inverts with the theme, and the orange fill does not. */
  color: var(--color-primary-text);
}

.sunlit img {
  max-width: 100%;
}

.sunlit a {
  color: inherit;
}

.sunlit :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- layout ---------- */

.sunlit .wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

.sunlit section {
  padding: var(--s7) 0;
  border-bottom: 1.5px solid var(--edge);
}

.sunlit section.foldwrap {
  padding: 24px 0 40px;
}

.sunlit section.flush {
  border-bottom: none;
}

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

.sunlit h1,
.sunlit h2,
.sunlit h3,
.sunlit h4,
.sunlit p,
.sunlit ul,
.sunlit ol,
.sunlit figure {
  margin: 0;
}

.sunlit h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(36px, 4.5vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.sunlit h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.08;
  margin-bottom: var(--s4);
}

.sunlit h3 {
  font-weight: 600;
  font-size: 17px;
  margin-bottom: var(--s2);
}

.sunlit .eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s3);
}

.sunlit .lede {
  font-size: 17.5px;
  color: var(--body-text);
  max-width: 640px;
}

.sunlit .mono {
  font-family: var(--mono);
}

/* Every number in mono, tabular — the meters and receipts have to line up. */
.sunlit .num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.sunlit .note-muted {
  font-size: 13.5px;
  color: var(--muted);
}

.sunlit .inline-link {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

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

/* ---------- the pixel-F mark ---------- */

.sunlit .fmark {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: block;
}

/* The mark's last cell IS the cursor. It blinks, and it is the only orange in the
   header. IconFringMark emits it as the final <rect>. */
.sunlit .fmark rect:last-of-type {
  animation: sunlit-blink 1.1s steps(1) infinite;
}

@keyframes sunlit-blink {
  50% {
    opacity: 0;
  }
}

/* ---------- beta banner ---------- */

.sunlit .beta {
  background: var(--tint);
  border-bottom: 1.5px solid var(--edge);
  font-family: var(--mono);
  font-size: 12.5px;
  text-align: center;
  padding: 7px 40px;
  position: relative;
}

.sunlit .beta b {
  font-weight: 700;
}

.sunlit .beta a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
}

.sunlit .beta button {
  position: absolute;
  right: 12px;
  top: 4px;
  background: none;
  border: none;
  font-size: 15px;
  line-height: 1;
  padding: 4px;
  cursor: pointer;
  color: var(--muted);
  font-family: inherit;
}

/* ---------- nav ---------- */

.sunlit .site-header {
  border-bottom: 1.5px solid var(--edge);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 50;
}

.sunlit .navrow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  max-width: 1080px;
  margin: 0 auto;
}

.sunlit .brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.sunlit .brand span {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 500;
}

.sunlit .brand .dot {
  color: var(--accent);
}

.sunlit .sitenav {
  display: flex;
  align-items: center;
  gap: 22px;
}

.sunlit .sitenav a {
  font-family: var(--mono);
  font-size: 13px;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
  white-space: nowrap;
}

.sunlit .sitenav a:hover,
.sunlit .sitenav a[aria-current="page"] {
  border-color: var(--accent);
}

.sunlit .sitenav .btn {
  border-bottom-color: var(--ink);
}

.sunlit .navtoggle {
  display: none;
}

/* ---------- buttons ---------- */

.sunlit .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  padding: 12px 22px;
  border: 1.5px solid var(--edge);
  border-radius: 0;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}

.sunlit .btn.primary {
  background: var(--accent);
}

.sunlit .btn.primary:hover {
  background: var(--accent-hover);
}

.sunlit .btn.ghost {
  border-style: dashed;
}

.sunlit .btn:focus-visible {
  outline: none;
  box-shadow: 2px 2px 0 var(--accent);
}

.sunlit .btn:active {
  transform: translate(1px, 1px);
}

.sunlit .btn:disabled,
.sunlit .btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.sunlit .btn.sm {
  padding: 8px 14px;
  font-size: 13px;
}

.sunlit .sitenav .btn {
  padding: 9px 16px;
  font-size: 13px;
}

.sunlit .btnrow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

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

/* Sized to fill AND fit a 13" MacBook Air fold — the brand kit verifies the page
   there, so the min-height is capped rather than a bare 100vh. */
.sunlit .fold {
  display: flex;
  align-items: center;
  min-height: min(calc(100vh - 150px), 760px);
}

.sunlit .hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--s5);
  align-items: center;
  width: 100%;
}

.sunlit .anchor {
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  border: 2px solid var(--edge);
  display: inline-block;
  padding: 5px 13px;
  margin: 12px 10px 0 0;
}

.sunlit .logoline {
  margin-top: var(--s3);
  font-size: 13.5px;
  color: var(--muted);
}

.sunlit .logoline b {
  color: var(--ink);
}

/* A command quoted mid-sentence — the npm alternative under the hero. Monospace so it reads
   as something to type, but not a slab: it sits inside running prose, not on its own line. */
.sunlit .inline-code {
  font-family: var(--mono);
  font-size: 0.92em;
  background: var(--color-background-weak, rgba(127, 127, 127, 0.12));
  border: 1px solid var(--edge);
  border-radius: 3px;
  padding: 1px 5px;
  white-space: nowrap;
}

.sunlit .minseats {
  margin-top: 10px;
  font-size: 15px;
  font-weight: 600;
}

/* ---------- terminal slab ---------- */

.sunlit .cli {
  background: var(--ink-2);
  color: var(--cli-text);
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.85;
  padding: 18px 20px;
  border: 1.5px solid var(--edge);
  overflow-x: auto;
}

.sunlit .cli .g {
  color: #7ee2a8;
}

/* The shell prompt, drawn rather than written — see the Prompt component in sunlit.tsx.
   `content` keeps it out of the DOM's text, so a selection over the line yields the command
   alone. `user-select: none` is the belt to that brace: Firefox has historically included
   generated content in a copied selection, and this line is the one people copy. */
.sunlit .cli [data-prompt]::before {
  content: "$ ";
}

.sunlit .cli [data-prompt] {
  user-select: none;
  -webkit-user-select: none;
}

.sunlit .cli .o {
  color: var(--accent);
}

.sunlit .cli .m {
  color: #8b949e;
}

.sunlit .cli .st {
  color: #8b949e;
  text-decoration: line-through;
}

.sunlit .cli .cmdrow {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.sunlit .cli pre {
  margin: 0;
  font: inherit;
  white-space: pre-wrap;
  word-break: break-word;
}

.sunlit .copybtn {
  font-family: var(--mono);
  font-size: 11.5px;
  background: #22282f;
  color: var(--cli-text);
  border: 1px dashed #4a5058;
  border-radius: 0;
  padding: 4px 10px;
  cursor: pointer;
  flex-shrink: 0;
}

.sunlit .copybtn:hover {
  border-color: var(--accent);
}

.sunlit .copybtn.copied {
  border-color: #7ee2a8;
  color: #7ee2a8;
}

.sunlit .cursorblock {
  display: inline-block;
  width: 8px;
  height: 15px;
  background: var(--accent);
  vertical-align: -2px;
  animation: sunlit-blink 1.1s steps(1) infinite;
}

/* ---------- the receipt (the proof instrument) ---------- */

.sunlit .receipt {
  background: var(--surface);
  border: 1.5px solid var(--edge);
  font-family: var(--mono);
  font-size: 13.5px;
  width: 300px;
  max-width: 100%;
  padding: 18px 20px 8px;
  overflow: hidden;
}

.sunlit .receipt.tilt {
  transform: rotate(1.2deg);
}

.sunlit .receipt .rhead {
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.sunlit .receipt .rmeta {
  text-align: center;
  font-size: 11px;
  color: var(--muted);
}

.sunlit .receipt .row {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
}

.sunlit .receipt .rule {
  border-top: 1.5px dashed var(--edge);
  margin: 10px -20px;
}

.sunlit .receipt .strike {
  text-decoration: line-through;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2.5px;
  color: var(--muted);
}

.sunlit .receipt .total {
  background: var(--tint);
  margin: 0 -20px;
  padding: 8px 20px;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
}

.sunlit .stamp {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 13px;
  color: var(--stamp);
  border: 2px solid var(--stamp);
  display: inline-block;
  padding: 4px 10px;
  transform: rotate(-4deg);
  letter-spacing: 0.06em;
  margin: 12px 0 10px;
}

/* The tear-off perforation along the bottom edge. */
.sunlit .perf {
  height: 14px;
  margin: 0 -20px -8px;
  background: radial-gradient(circle at 8px 7px, var(--paper) 5px, transparent 5px) repeat-x;
  background-size: 16px 14px;
  border-top: 1.5px solid var(--edge);
}

@keyframes sunlit-printfeed {
  from {
    max-height: 0;
    opacity: 0.4;
  }
  to {
    max-height: 560px;
    opacity: 1;
  }
}

.sunlit .printing {
  animation: sunlit-printfeed 1.1s cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* ---------- panels & grids ---------- */

.sunlit .panel {
  background: var(--surface);
  border: 1.5px solid var(--edge);
  padding: var(--s4);
}

.sunlit .panel.hl {
  border-width: 2px;
}

.sunlit .grid {
  display: grid;
  gap: 20px;
}

@media (min-width: 840px) {
  .sunlit .g2 {
    grid-template-columns: 1fr 1fr;
  }
  .sunlit .g3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .sunlit .g4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .sunlit .g5 {
    grid-template-columns: repeat(5, 1fr);
  }
}

.sunlit .center {
  text-align: center;
}

.sunlit .surfacecard {
  text-align: center;
}

.sunlit .surfacecard .ic {
  margin-bottom: 8px;
}

/* Sized here rather than on the <svg>, so the three cards cannot drift apart the way the
   emoji they replaced did — those were one font-size but three different glyph metrics.
   `currentColor` inherits the card's own ink, which is what keeps them a set in both themes. */
.sunlit .surfacecard .ic svg {
  display: block;
  width: 28px;
  height: 28px;
  margin: 0 auto;
}

.sunlit .panel p {
  font-size: 14.5px;
  color: var(--body-text);
}

.sunlit .modeltile {
  text-align: center;
  padding: 18px 10px;
}

.sunlit .modeltile b {
  font-size: 16px;
}

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

.sunlit .plan {
  position: relative;
  display: flex;
  flex-direction: column;
}

.sunlit .plan .price {
  font-family: var(--display);
  font-weight: 700;
  font-size: 24px;
  margin: 4px 0 8px;
}

.sunlit .plan .price .per {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
}

.sunlit .plan .planfoot {
  margin-top: auto;
  padding-top: 14px;
}

.sunlit .plan.rec {
  border-width: 2px;
}

.sunlit .plan.rec::before {
  content: attr(data-flag);
  position: absolute;
  top: -9px;
  left: 14px;
  background: var(--surface);
  padding: 0 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
}

.sunlit .pricenote {
  margin-top: var(--s4);
  font-size: 15.5px;
}

.sunlit .pricenote u {
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.sunlit .entstrip {
  border: 1.5px dashed var(--edge);
  background: var(--surface);
  padding: 14px 18px;
  margin-top: var(--s4);
  font-size: 15px;
}

/* Currency toggle — a segmented control cut from the same ink border. */
.sunlit .toggle {
  display: inline-flex;
  border: 1.5px solid var(--edge);
  background: var(--surface);
}

.sunlit .toggle-button {
  font-family: var(--mono);
  font-size: 12.5px;
  padding: 7px 14px;
  border: none;
  border-radius: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
}

.sunlit .toggle-button + .toggle-button {
  border-left: 1.5px solid var(--edge);
}

.sunlit .toggle-button.active {
  background: var(--accent);
  /* NOT --ink: that inverts with the theme, and the orange fill does not. */
  color: var(--color-primary-text);
}

/* ---------- tables & checklists ---------- */

.sunlit .tablewrap {
  overflow-x: auto;
}

.sunlit table {
  border-collapse: collapse;
  width: 100%;
  font-size: 14.5px;
  background: var(--surface);
  border: 1.5px solid var(--edge);
}

.sunlit th {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: left;
  color: var(--muted);
  border-bottom: 1.5px solid var(--edge);
  padding: 10px 12px;
}

.sunlit td {
  border-bottom: 1px solid var(--line);
  padding: 11px 12px;
  vertical-align: top;
}

.sunlit tr:last-child td {
  border-bottom: none;
}

.sunlit td.big {
  font-family: var(--display);
  font-weight: 700;
  font-size: 16.5px;
}

.sunlit .check {
  font-size: 14.5px;
  line-height: 2.1;
  columns: 2;
  column-gap: 36px;
}

.sunlit .check .live {
  color: var(--stamp);
  font-family: var(--mono);
  font-weight: 700;
}

.sunlit .check .soon {
  /* A dark amber, legible on cream. On the dark ground it disappears, so it lifts to
     the accent — which is also what "not yet" reads as elsewhere on the page. */
  color: #9a6700;
  font-family: var(--mono);
  font-weight: 700;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sunlit .check .soon {
    color: var(--accent);
  }
}
:root[data-theme="dark"] .sunlit .check .soon {
  color: var(--accent);
}

.sunlit .ul {
  list-style: none;
  padding: 0;
  font-size: 14.5px;
  line-height: 1.95;
}

.sunlit .ul li::before {
  content: "✓ ";
  font-family: var(--mono);
  color: var(--stamp);
  font-weight: 700;
}

.sunlit .feat {
  list-style: none;
  padding: 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--body-text);
}

.sunlit .feat li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 5px;
}

.sunlit .feat li::before {
  content: "▪";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--ink);
  font-size: 11px;
}

/* ---------- tags ---------- */

.sunlit .tagrow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.sunlit .tag {
  background: #f1ece0;
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 12.5px;
  color: #4a5058;
  padding: 5px 12px;
}

/* A cream chip with dark text inverts on the dark ground, or it becomes a bright block
   sitting on the page — the opposite of the quiet label it is meant to be. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sunlit .tag {
    background: #26261f;
    color: var(--color-text-secondary);
  }
}
:root[data-theme="dark"] .sunlit .tag {
  background: #26261f;
  color: var(--color-text-secondary);
}

/* ---------- forms ---------- */

.sunlit .field {
  display: block;
  margin-bottom: var(--s3);
  text-align: left;
}

.sunlit .field > span {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}

.sunlit input[type="text"],
.sunlit input[type="email"],
.sunlit input[type="url"],
.sunlit input[type="tel"],
.sunlit select,
.sunlit textarea {
  width: 100%;
  font-family: var(--body);
  font-size: 15px;
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--edge);
  border-radius: 0;
  padding: 11px 13px;
}

.sunlit input::placeholder,
.sunlit textarea::placeholder {
  color: var(--muted);
}

.sunlit input:focus,
.sunlit select:focus,
.sunlit textarea:focus {
  outline: none;
  box-shadow: 2px 2px 0 var(--accent);
}

.sunlit .form-note {
  margin-top: 10px;
  font-size: 13.5px;
  color: var(--muted);
  min-height: 1.2em;
}

.sunlit .form-error {
  margin-top: 10px;
  font-size: 14px;
  color: var(--danger);
  border-left: 3px solid var(--danger);
  padding-left: 10px;
}

/* ---------- callouts ---------- */

.sunlit .callout {
  border: 1.5px solid var(--edge);
  background: var(--tint);
  padding: 14px 18px;
  font-size: 15px;
}

.sunlit .callout.quiet {
  background: var(--surface);
  border-style: dashed;
}

/* ---------- subpage shell (plan, signup, device, thank-you, redirecting) ---------- */

.sunlit.subpage {
  display: flex;
  flex-direction: column;
}

.sunlit .subpage-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s7) 24px;
}

.sunlit .card {
  background: var(--surface);
  border: 1.5px solid var(--edge);
  padding: var(--s6) var(--s5);
  width: 100%;
  max-width: 560px;
  text-align: center;
}

.sunlit .card.wide {
  max-width: 880px;
}

.sunlit .card h1 {
  font-size: clamp(28px, 3.6vw, 40px);
}

.sunlit .card > p {
  margin-top: 12px;
  color: var(--body-text);
}

.sunlit .cardfoot {
  margin-top: var(--s5);
  font-size: 14px;
  color: var(--muted);
}

/* The device-auth code — the one place a string has to be readable across a room. */
.sunlit .bigcode {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(30px, 7vw, 46px);
  letter-spacing: 0.22em;
  border: 1.5px solid var(--edge);
  background: var(--tint);
  padding: 18px 20px;
  margin: var(--s4) 0;
  word-break: break-all;
}

.sunlit .spinner {
  width: 15px;
  height: 15px;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  display: inline-block;
  animation: sunlit-spin 0.8s linear infinite;
}

@keyframes sunlit-spin {
  to {
    transform: rotate(360deg);
  }
}

/* A stripped header for pages that are a step in a flow (plan, device, thank-you,
   redirecting) rather than a destination — brand lock only, no nav to wander into. */
.sunlit .subpage-header {
  border-bottom: 1.5px solid var(--edge);
  background: var(--paper);
}

.sunlit .subpage-header .navrow {
  padding: 16px 24px;
}

.sunlit .subpage-header .aux {
  font-family: var(--mono);
  font-size: 13px;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
}

.sunlit .subpage-header .aux:hover {
  border-color: var(--accent);
}

.sunlit .btn.full {
  width: 100%;
}

/* ---------- numbered steps ---------- */

.sunlit .steps {
  border-top: 1.5px solid var(--edge);
  text-align: left;
  margin-top: var(--s4);
}

.sunlit .step {
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.sunlit .step-num {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 12px;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border: 1.5px solid var(--edge);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sunlit .step-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.sunlit .step-body strong {
  font-size: 15px;
}

.sunlit .step-body span {
  font-size: 14px;
  color: var(--body-text);
}

/* ---------- segmented platform tabs ---------- */

.sunlit .os-tabs {
  display: flex;
  border: 1.5px solid var(--edge);
  background: var(--surface);
  margin-bottom: -1.5px;
  width: max-content;
  max-width: 100%;
}

.sunlit .os-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 13px;
  padding: 10px 18px;
  border: none;
  border-radius: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
}

.sunlit .os-tab + .os-tab {
  border-left: 1.5px solid var(--edge);
}

.sunlit .os-tab.active {
  background: var(--tint);
  color: var(--ink);
}

.sunlit .os-tab-icon svg {
  width: 16px;
  height: 16px;
  display: block;
}

.sunlit .status-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
  margin-top: var(--s4);
}

/* ---------- download page ---------- */

.sunlit .dl-index {
  font-family: var(--mono);
  color: var(--accent);
}

.sunlit .dl-rows {
  border: 1.5px solid var(--edge);
  background: var(--surface);
}

.sunlit .dl-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}

.sunlit .dl-rows > .dl-row:last-child {
  border-bottom: none;
}

.sunlit .dl-row:hover {
  background: var(--tint);
}

.sunlit .dl-row-icon {
  display: flex;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.sunlit .dl-row-label {
  font-size: 15px;
  font-weight: 500;
}

.sunlit .dl-row-action {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
}

.sunlit .dl-row:hover .dl-row-action {
  color: var(--ink);
}

.sunlit .cmdrows {
  border: 1.5px solid var(--edge);
  background: var(--ink-2);
}

.sunlit .dl-cmd {
  display: flex;
  align-items: center;
  gap: 12px;
  /* The platform tag takes a line of its own above the command (see .dl-cmd-os). Inline, it
     competed with the command for width and clipped it on anything narrow — and a truncated
     install command is worse than an unlabelled one. Rows with no tag are unaffected. */
  flex-wrap: wrap;
  row-gap: 3px;
  padding: 10px 16px;
  border-bottom: 1px solid #2a3038;
}

.sunlit .cmdrows > .dl-cmd:last-child {
  border-bottom: none;
}

.sunlit .dl-cmd-text {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--cli-text);
  overflow-x: auto;
  white-space: nowrap;
  /* Takes the free space so the platform tag and the copy button sit together at the right.
     min-width:0 is what makes the overflow-x above actually scroll: without it a flex item
     refuses to shrink below its content, so a long command widened the row instead. */
  flex: 1 1 auto;
  min-width: 0;
}

/* Which platform a command is for. Quiet on purpose — it labels the row, it is not the row.
   `order: -1` + a full-width basis lifts it above the command at every width, so the command
   keeps the whole row to itself and never gets clipped by its own label. */
.sunlit .dl-cmd-os {
  order: -1;
  flex-basis: 100%;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.sunlit .dl-cmd-copy {
  margin-left: auto;
}

.sunlit .subhead {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: var(--s4) 0 10px;
}

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

.sunlit .faq {
  list-style: none;
  padding: 0;
  border-top: 1.5px solid var(--edge);
}

.sunlit .faq > li {
  border-bottom: 1.5px solid var(--edge);
}

.sunlit .faq summary {
  cursor: pointer;
  padding: 16px 0;
  font-weight: 600;
  font-size: 16px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

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

.sunlit .faq summary::after {
  content: "+";
  font-family: var(--mono);
  color: var(--accent);
  font-weight: 700;
}

.sunlit .faq details[open] summary::after {
  content: "−";
}

.sunlit .faq .answer {
  padding: 0 0 18px;
  font-size: 15px;
  color: var(--body-text);
  max-width: 720px;
}

/* ---------- changelog ---------- */

.sunlit .entry {
  border-bottom: 1.5px solid var(--edge);
  padding: var(--s4) 0;
  display: grid;
  gap: 12px;
}

@media (min-width: 840px) {
  .sunlit .entry {
    grid-template-columns: 180px 1fr;
    gap: 24px;
  }
}

.sunlit .entry-meta {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--muted);
}

.sunlit .entry-body :is(p, ul, ol) {
  font-size: 15px;
  color: var(--body-text);
}

.sunlit .entry-body :is(p, ul, ol) + :is(p, ul, ol, h3) {
  margin-top: 10px;
}

.sunlit .entry-body ul {
  padding-left: 20px;
}

.sunlit .entry-body li {
  margin-bottom: 4px;
}

.sunlit .highlight + .highlight,
.sunlit .highlight + .collapsible {
  margin-top: var(--s4);
}

.sunlit .highlight-item {
  border-left: 1.5px solid var(--line);
  padding-left: 14px;
  margin-top: 12px;
}

.sunlit .highlight-item :is(img, video) {
  display: block;
  margin-top: 10px;
  border: 1.5px solid var(--edge);
  height: auto;
}

.sunlit .collapsible + .collapsible {
  margin-top: 4px;
}

.sunlit .collapsible-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  font-family: var(--mono);
  font-size: 13px;
  text-align: left;
  padding: 8px 0;
  border: none;
  border-radius: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
}

.sunlit .collapsible-toggle:hover {
  color: var(--ink);
}

/* ---------- legal documents ---------- */

.sunlit .legal {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--s6) 24px var(--s7);
}

.sunlit .legal h1 {
  font-size: clamp(30px, 4vw, 46px);
}

.sunlit .legal .updated {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 12px;
}

.sunlit .legal .lede {
  margin-top: var(--s4);
  padding: 14px 18px;
  border: 1.5px dashed var(--edge);
  background: var(--surface);
  font-size: 16px;
  max-width: none;
}

.sunlit .legal h2 {
  font-size: 22px;
  margin: var(--s6) 0 var(--s3);
  padding-top: var(--s3);
  border-top: 1.5px solid var(--edge);
}

.sunlit .legal h3 {
  font-family: var(--display);
  font-size: 18px;
  margin: var(--s4) 0 10px;
}

.sunlit .legal h4 {
  font-size: 16px;
  font-weight: 600;
  margin: var(--s3) 0 8px;
}

.sunlit .legal p {
  font-size: 15.5px;
  color: var(--body-text);
  margin-bottom: 14px;
}

.sunlit .legal ul,
.sunlit .legal ol {
  font-size: 15.5px;
  color: var(--body-text);
  margin: 0 0 16px;
  padding-left: 20px;
}

.sunlit .legal li {
  margin-bottom: 8px;
}

/* The source numbers its own clauses ("1.1 …"), so a second machine-generated
   number would read as "1. 1.1". */
.sunlit .legal ol.prenumbered {
  list-style: none;
  padding-left: 0;
}

.sunlit .legal table {
  margin-bottom: 16px;
}

.sunlit .legal a {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.sunlit .legal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--s4);
}

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

.sunlit .site-footer {
  padding: var(--s6) 0;
  font-size: 14px;
}

.sunlit .fgrid {
  display: grid;
  gap: 28px;
}

@media (min-width: 840px) {
  .sunlit .fgrid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.sunlit .site-footer h4 {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 10px;
}

.sunlit .site-footer a {
  text-decoration: none;
  display: block;
  padding: 3px 0;
  color: var(--body-text);
}

.sunlit .site-footer a:hover {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
}

.sunlit .fbottom {
  margin-top: var(--s5);
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.sunlit .fbottom a {
  display: inline;
}

/* ---------- scroll reveal ---------- */

/* `reveal-armed` is applied by useScrollReveal to each element AT THE MOMENT it starts
   observing that element, and never by markup or a global html class. So an element is
   only ever hidden while a live observer is committed to revealing it: no JS, no
   hydration, a thrown effect, or an unsupported IntersectionObserver all leave the
   content plainly visible instead of stuck at opacity 0. */
.sunlit .reveal-armed {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
}

.sunlit .reveal-armed.is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- responsive ---------- */

@media (max-width: 839px) {
  .sunlit .fold {
    min-height: 0;
    display: block;
  }
  .sunlit .hero {
    grid-template-columns: 1fr;
    gap: var(--s5);
  }
  .sunlit .receipt.tilt {
    transform: none;
    margin: 0 auto;
  }
  .sunlit .sitenav {
    display: none;
  }
  .sunlit .sitenav.open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--paper);
    border-bottom: 1.5px solid var(--edge);
    padding: 16px 24px;
    gap: 14px;
  }
  .sunlit .navtoggle {
    display: block;
    font-family: var(--mono);
    background: none;
    border: 1.5px solid var(--edge);
    border-radius: 0;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 13px;
  }
  .sunlit .site-header {
    position: relative;
  }
  .sunlit section {
    padding: var(--s6) 0;
  }
  .sunlit .check {
    columns: 1;
  }
  .sunlit .card {
    padding: var(--s5) var(--s4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sunlit .fmark rect:last-of-type,
  .sunlit .cursorblock,
  .sunlit .printing,
  .sunlit .spinner {
    animation: none;
  }
  .sunlit .reveal-armed {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ---------- theme toggle ---------- */

.sunlit .themetoggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  background: none;
  border: 1.5px solid var(--line);
  border-radius: 0; /* law 2 */
  color: var(--body-text);
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
}

.sunlit .themetoggle:hover {
  color: var(--ink);
  border-color: var(--ink);
}

.sunlit .themetoggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* The nav collapses to a column on mobile, where a 34px square in a stack of text links
   reads as a stray box. Give it the row it needs and a label-free but reachable size. */
@media (max-width: 860px) {
  .sunlit .themetoggle {
    align-self: flex-start;
  }
}

/* The address beside a mailto footer link. A mailto does nothing on a machine with no mail
   client configured, and a link that silently does nothing reads as broken — reported as
   "Unclickable Links". Showing the address gives the visitor something to copy either way.
   Muted and on its own line so the footer still scans as a list of labels, not addresses. */
.site-footer .footmail {
  display: block;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0;
}

/* "Not priced in USD yet" stands in for a plan card's price. `.price` is a large display
   number, so the explanatory text needs to drop back to body size or it shouts louder than
   the real prices in the row beside it — while still occupying the same slot, which is what
   keeps the cards' rows aligned. */
.sunlit [data-slot="price-unset"] {
  font-size: var(--font-size-sm, 14px);
  line-height: 1.3;
  display: flex;
  align-items: center;
}