/* ==========================================================================
   Simplest1 marketing stylesheet (Ink & Paper).
   Tonal monochrome ("ink & paper"), IBM Plex type, zero JavaScript.
   Loads on its own: fonts, reset, tokens, and page styles all live here so the
   marketing site has no dependency on other stylesheets.
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------- */

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/static/fonts/IBM_Plex_Sans/IBMPlexSans-Variable.ttf") format("truetype-variations");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}

/* Arabic and Devanagari are their own families, listed right after Plex
   Sans in every stack, and load only for their own characters
   (unicode-range). Sharing Plex Sans's family name did not work: Chrome
   matched the variable Latin face and never consulted them (DESIGN.md
   "Font Stack"; LEDGER.md A-161). */
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/static/fonts/IBM_Plex_Sans_Arabic/IBMPlexSansArabic-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFF;
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/static/fonts/IBM_Plex_Sans_Arabic/IBMPlexSansArabic-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFF;
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/static/fonts/IBM_Plex_Sans_Arabic/IBMPlexSansArabic-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFF;
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/static/fonts/IBM_Plex_Sans_Arabic/IBMPlexSansArabic-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFF;
}

@font-face {
  font-family: "IBM Plex Sans Devanagari";
  src: url("/static/fonts/IBM_Plex_Sans_Devanagari/IBMPlexSansDevanagari-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;
}

@font-face {
  font-family: "IBM Plex Sans Devanagari";
  src: url("/static/fonts/IBM_Plex_Sans_Devanagari/IBMPlexSansDevanagari-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;
}

@font-face {
  font-family: "IBM Plex Sans Devanagari";
  src: url("/static/fonts/IBM_Plex_Sans_Devanagari/IBMPlexSansDevanagari-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;
}

@font-face {
  font-family: "IBM Plex Sans Devanagari";
  src: url("/static/fonts/IBM_Plex_Sans_Devanagari/IBMPlexSansDevanagari-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/static/fonts/IBM_Plex_Mono/IBMPlexMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --- Reset ----------------------------------------------------------------
   Layered so it never outranks component rules. Pages that also load
   global.css share its layer order; there the universal reset must lose to
   global's layered components (an unlayered reset would beat ALL layered
   rules and strip .container/.section padding). */

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  img {
    max-width: 100%;
    display: block;
  }

  input,
  button {
    font: inherit;
  }
}

/* --- Tokens ---------------------------------------------------------------- */

:root {
  --ink: #141413;
  --ink-2: #5f5e5a;
  --ink-3: #8a8985;
  --paper: #ffffff;
  --paper-2: #f7f6f4;
  --line: rgba(20, 20, 19, 0.14);
  --line-soft: rgba(20, 20, 19, 0.07);
  --accent: #e8604c;

  --sans: "IBM Plex Sans", "IBM Plex Sans Arabic", "IBM Plex Sans Devanagari", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --w-page: 68rem;
  --w-frame: 56rem;
  --w-text: 42rem;

  --r-sm: 8px;
  --r-md: 12px;
  --r-pill: 999px;

  --dur: 200ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f2f1ee;
    --ink-2: #a3a29d;
    --ink-3: #7c7b76;
    --paper: #121211;
    --paper-2: #1b1b1a;
    --line: rgba(242, 241, 238, 0.16);
    --line-soft: rgba(242, 241, 238, 0.08);
  }
}

/* --- Base ------------------------------------------------------------------ */

html {
  -webkit-text-size-adjust: 100%;
  /* In-page CTAs (Start free, See pricing) scroll to their anchors; smooth
     keeps the "you are still on this page" orientation. */
  scroll-behavior: smooth;
}

body {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: -0.011em;
  color: var(--ink);
  background: var(--paper);
}

h1,
h2,
h3 {
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.022em;
}

a {
  color: inherit;
}

::selection {
  background: var(--ink);
  color: var(--paper);
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

.skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 0.5rem 1rem;
}

.skip-link:focus {
  inset-inline-start: 0;
  z-index: 10;
}

.wrap {
  max-width: var(--w-page);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.wrap--frame {
  max-width: var(--w-frame);
}

/* --- Wordmark -------------------------------------------------------------- */

.wm {
  display: inline-flex;
  align-items: center;
  font-size: 1.125rem;
  text-decoration: none;
}

.wm svg {
  display: block;
  height: 0.92em;
  width: auto;
}

/* --- Header ---------------------------------------------------------------- */

.hd {
  padding-block: 1.25rem;
}

.hd-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

/* One group at the end of the row: the links, then the language button
   (HOMEPAGE.md "The header is two groups on one row"). */
.hd-nav {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  margin-inline-start: auto;
}

.hd-link {
  font-size: 0.9375rem;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur);
}

/* A header label never breaks over two lines: Arabic's "Log in" and
   "Start free" wrapped at 390px (LEDGER.md A-192). */
.hd-nav .btn-ghost {
  white-space: nowrap;
}

/* Nothing in the header shrinks: a squeezed row once shrank the French
   wordmark to nothing. The row drops items instead, at widths measured for
   all seventeen languages from 390 to 1280px (HOMEPAGE.md "The header is
   two groups on one row"; LEDGER.md A-192). */
.wm,
.hd-nav > * {
  flex-shrink: 0;
}

/* Apps and Pricing leave first: with them, French and Turkish need about
   670px. */
@media (max-width: 700px) {
  .hd-nav .hd-link--sec {
    display: none;
  }
}

/* Then the header's "Start free" (only the pages without a hero have it):
   with it, French ("Commencer gratuitement") needs about 525px. */
@media (max-width: 540px) {
  .hd-nav .btn-ghost {
    display: none;
  }
}

.hd-link:hover {
  color: var(--ink);
}

/* --- Buttons --------------------------------------------------------------- */

.btn {
  display: inline-block;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: var(--r-pill);
  padding: 0.5625rem 1.375rem;
  text-decoration: none;
  transition: opacity var(--dur);
}

.btn:hover {
  opacity: 0.82;
}

.btn--lg {
  font-size: 1.0625rem;
  padding: 0.8125rem 1.875rem;
}

.link-quiet {
  font-size: 0.9375rem;
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--line);
  transition: color var(--dur);
}

.link-quiet:hover {
  color: var(--ink);
}

/* --- Hero ------------------------------------------------------------------ */

.hero {
  padding-block: 5.5rem 3rem;
  text-align: center;
}

.hero h1 {
  font-size: clamp(2.5rem, 5.5vw, 3.75rem);
  font-weight: 650;
  letter-spacing: -0.028em;
  max-width: 22ch;
  margin-inline: auto;
}

.hero-sub {
  font-size: 1.125rem;
  color: var(--ink-2);
  max-width: 34rem;
  margin: 1.5rem auto 0;
  text-wrap: balance;
}

.hero-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 2.25rem;
}

/* --- Preview switcher ------------------------------------------------------ */

.preview {
  padding-block: 1rem 5rem;
}

.pv-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pv-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  width: max-content;
  max-width: 100%;
  margin: 0 auto 1.5rem;
  padding: 0.25rem;
  background: var(--paper-2);
  border-radius: var(--r-pill);
}

.pv-tab {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink-2);
  padding: 0.4375rem 1.125rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: color var(--dur);
}

.pv-soon {
  font-size: 0.75em;
  color: var(--ink-3);
  margin-inline-start: 0.35em;
}

.pv-tab:hover {
  color: var(--ink);
}

.pv-more {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink-3);
  padding: 0.4375rem 1.125rem 0.4375rem 1rem;
  margin-inline-start: 0.25rem;
  border-inline-start: 1px solid var(--line);
  border-radius: 0 var(--r-pill) var(--r-pill) 0;
  text-decoration: none;
  transition: color var(--dur);
}

.pv-more:hover {
  color: var(--ink);
}

#pv-blog:checked ~ .pv-tabs .pv-tab[for="pv-blog"],
#pv-status:checked ~ .pv-tabs .pv-tab[for="pv-status"],
#pv-changelog:checked ~ .pv-tabs .pv-tab[for="pv-changelog"],
#pv-kb:checked ~ .pv-tabs .pv-tab[for="pv-kb"] {
  color: var(--ink);
  background: var(--paper);
  border-color: var(--line-soft);
}

#pv-blog:focus-visible ~ .pv-tabs .pv-tab[for="pv-blog"],
#pv-status:focus-visible ~ .pv-tabs .pv-tab[for="pv-status"],
#pv-changelog:focus-visible ~ .pv-tabs .pv-tab[for="pv-changelog"],
#pv-kb:focus-visible ~ .pv-tabs .pv-tab[for="pv-kb"] {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* --- Browser frame --------------------------------------------------------- */

.frame {
  margin: 0;
}

.frame-box {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
  overflow: hidden;
}

.frame-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0.625rem 1rem;
  border-bottom: 1px solid var(--line-soft);
}

.frame-dots {
  display: flex;
  gap: 0.375rem;
}

.frame-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line);
}

.frame-url {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-3);
  background: var(--paper-2);
  border-radius: var(--r-pill);
  padding: 0.25rem 1rem;
  display: none;
}

#pv-blog:checked ~ .frame .frame-url--blog,
#pv-status:checked ~ .frame .frame-url--status,
#pv-changelog:checked ~ .frame .frame-url--changelog,
#pv-kb:checked ~ .frame .frame-url--kb {
  display: block;
}

.frame-body {
  height: 26rem;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, black 82%, transparent);
}

.pv-panel {
  display: none;
  height: 100%;
  padding: 2.25rem 2.75rem;
  animation: pv-fade var(--dur) ease;
}

@keyframes pv-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#pv-blog:checked ~ .frame .pv-panel--blog,
#pv-status:checked ~ .frame .pv-panel--status,
#pv-changelog:checked ~ .frame .pv-panel--changelog,
#pv-kb:checked ~ .frame .pv-panel--kb {
  display: block;
}

.frame-note {
  font-size: 0.8125rem;
  color: var(--ink-3);
  text-align: center;
  margin-top: 1rem;
}

/* --- Mini-site shared ------------------------------------------------------- */

.ms-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1.75rem;
}

.ms-name {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.ms-nav {
  display: flex;
  gap: 1.25rem;
  font-size: 0.8125rem;
  color: var(--ink-3);
}


.ms-date {
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--ink-3);
  letter-spacing: 0.02em;
}

/* Blog panel */

.ms-post {
  padding-block: 1.125rem;
}

.ms-post + .ms-post {
  border-top: 1px solid var(--line-soft);
}

.ms-post h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: 0.25rem;
}

.ms-post p {
  font-size: 0.875rem;
  color: var(--ink-2);
  margin-top: 0.375rem;
  max-width: 34rem;
}

/* Status panel */

.ms-status-hero {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.375rem;
}

.ms-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ink);
}

.ms-status-hero h3 {
  font-size: 1.375rem;
  font-weight: 600;
}

.ms-updated {
  font-size: 0.8125rem;
  color: var(--ink-3);
  margin-bottom: 1.75rem;
}

.ms-svc {
  display: grid;
  grid-template-columns: 7.5rem 1fr 4.5rem;
  align-items: center;
  gap: 1rem;
  padding-block: 0.875rem;
  border-top: 1px solid var(--line-soft);
  font-size: 0.875rem;
}

.ms-upt {
  height: 14px;
  background: repeating-linear-gradient(
    90deg,
    var(--ink) 0 4px,
    transparent 4px 7px
  );
  opacity: 0.22;
  border-radius: 2px;
}

.ms-pct {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-2);
  text-align: end;
}

/* Changelog panel */

.ms-rel {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 1.5rem;
  padding-block: 1.125rem;
}

.ms-rel + .ms-rel {
  border-top: 1px solid var(--line-soft);
}

.ms-ver {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--ink-2);
}

.ms-rel h3 {
  font-size: 1.0625rem;
  font-weight: 600;
}

.ms-rel p {
  font-size: 0.875rem;
  color: var(--ink-2);
  margin-top: 0.25rem;
  max-width: 30rem;
}

.ms-tag {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 0.0625rem 0.5rem;
  margin-top: 0.5rem;
}

/* KB panel */

.ms-search {
  font-size: 0.875rem;
  color: var(--ink-3);
  background: var(--paper-2);
  border-radius: var(--r-pill);
  padding: 0.5625rem 1.125rem;
  margin-bottom: 1.75rem;
}

.ms-kb-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
}

.ms-kb-group h3 {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-3);
  margin-bottom: 0.625rem;
}

.ms-kb-group a {
  display: block;
  font-size: 0.9375rem;
  padding-block: 0.4375rem;
  border-top: 1px solid var(--line-soft);
  text-decoration: none;
}

/* --- Sections -------------------------------------------------------------- */

.sec {
  padding-block: 6rem;
}

.sec-title {
  font-size: clamp(1.75rem, 3vw, 2.125rem);
  text-wrap: balance;
}

.sec-title--center {
  text-align: center;
  margin-inline: auto;
}


/* --- Steps ------------------------------------------------------------------ */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  margin-top: 3.5rem;
}

.step-n {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--ink-3);
}

.step h3 {
  font-size: 1.125rem;
  font-weight: 700;
  margin-top: 0.75rem;
}

.step p {
  font-size: 0.9375rem;
  color: var(--ink-2);
  margin-top: 0.5rem;
}

/* --- Isolation (signature) -------------------------------------------------- */

.iso {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.iso-copy p {
  font-size: 1.0625rem;
  color: var(--ink-2);
  margin-top: 1rem;
  max-width: 30rem;
}

.iso-copy code {
  font-family: var(--mono);
  font-size: 0.85em;
}

.iso-files {
  display: grid;
  gap: 0.75rem;
}

.iso-file {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  padding: 1rem 1.25rem;
}

.iso-file--you {
  background: var(--ink);
  border-color: var(--ink);
}

.iso-name {
  font-family: var(--mono);
  font-size: 0.875rem;
}

.iso-file--you .iso-name {
  color: var(--paper);
}

.iso-meta {
  font-size: 0.8125rem;
  color: var(--ink-3);
}

.iso-file--you .iso-meta {
  color: var(--paper);
  opacity: 0.7;
}

/* --- Features ---------------------------------------------------------------- */

.feats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem 3.5rem;
  margin-top: 3.5rem;
}

.feat h3 {
  font-size: 1.0625rem;
  font-weight: 600;
}

.feat p {
  font-size: 0.9375rem;
  color: var(--ink-2);
  margin-top: 0.5rem;
}

/* --- Pricing ------------------------------------------------------------------ */

.plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 3.5rem;
}

.plan {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
  padding: 2rem;
  display: flex;
  flex-direction: column;
}

.plan-name {
  font-size: 1rem;
  font-weight: 600;
}

.plan-price {
  margin-top: 1rem;
  font-size: 2.25rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.plan-per {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--ink-3);
  margin-inline-start: 0.25rem;
}

.plan ul {
  list-style: none;
  margin: 1.5rem 0 2rem;
  flex: 1;
}

.plan li {
  font-size: 0.9375rem;
  color: var(--ink-2);
  padding-block: 0.4375rem;
}

.plan li + li {
  border-top: 1px solid var(--line-soft);
}

.plan .btn,
.plan .btn-ghost {
  text-align: center;
}

.btn-ghost {
  display: inline-block;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 0.5625rem 1.375rem;
  text-decoration: none;
  transition: border-color var(--dur);
}

.btn-ghost:hover {
  border-color: var(--ink);
}

.plans-note {
  font-size: 0.875rem;
  color: var(--ink-3);
  text-align: center;
  margin-top: 2rem;
}

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

.faq {
  max-width: var(--w-text);
  margin: 3rem auto 0;
}

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

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

.faq summary {
  font-size: 1.0625rem;
  font-weight: 500;
  padding-block: 1.25rem;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

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

.faq summary::after {
  content: "+";
  font-weight: 400;
  color: var(--ink-3);
  transition: transform var(--dur);
}

.faq details[open] summary::after {
  transform: rotate(45deg);
}

.faq details p {
  font-size: 0.9375rem;
  color: var(--ink-2);
  max-width: 38rem;
  padding-bottom: 1.25rem;
}

/* --- Final CTA ------------------------------------------------------------------ */

.cta {
  padding-block: 6rem;
  text-align: center;
}

.cta h2 {
  font-size: clamp(1.875rem, 3.4vw, 2.375rem);
}

.cta p {
  font-size: 1.0625rem;
  color: var(--ink-2);
  margin-top: 0.875rem;
}

.cta .btn--lg {
  margin-top: 2rem;
}

/* --- Footer ---------------------------------------------------------------------- */

.ft {
  border-top: 1px solid var(--line-soft);
  padding-block: 3.5rem 2.5rem;
}

.ft-row {
  display: flex;
  justify-content: space-between;
  gap: 3rem;
  flex-wrap: wrap;
}

.ft-cols {
  display: flex;
  gap: 4rem;
  flex-wrap: wrap;
}

.ft-col h3 {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-3);
  margin-bottom: 0.75rem;
}

.ft-col a {
  display: block;
  font-size: 0.9375rem;
  color: var(--ink-2);
  text-decoration: none;
  padding-block: 0.25rem;
  transition: color var(--dur);
}

.ft-col a:hover {
  color: var(--ink);
}

.ft-bottom {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.8125rem;
  color: var(--ink-3);
  margin-top: 3rem;
}

.ft-bottom a {
  color: inherit;
  text-decoration: none;
  margin-inline-start: 1.25rem;
}

.ft-bottom a:hover {
  color: var(--ink);
}

/* --- Responsive -------------------------------------------------------------------- */

/* Tablet: keep two columns where the content earns it */
@media (max-width: 900px) {
  .feats {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }

  .plans {
    grid-template-columns: 1fr;
    gap: 1rem;
    max-width: 26rem;
    margin-inline: auto;
  }

  .iso {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

/* Large phones / small tablets */
@media (max-width: 768px) {
  .sec {
    padding-block: 4rem;
  }

  .steps {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }
}

/* Phones */
@media (max-width: 640px) {
  .hero {
    padding-block: 3.5rem 2rem;
  }

  .feats {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }

  .pv-tabs {
    gap: 0.125rem;
  }

  .pv-tab {
    font-size: 0.875rem;
    padding: 0.375rem 0.875rem;
  }

  .pv-more {
    font-size: 0.875rem;
    padding: 0.375rem 0.875rem 0.375rem 0.75rem;
  }

  .pv-panel {
    padding: 1.5rem 1.25rem;
  }

  .frame-body {
    height: 22rem;
  }

  .ms-kb-cols {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .ms-upt {
    display: none;
  }

  .hd-nav {
    gap: 1.25rem;
  }

  .plan {
    padding: 1.5rem;
  }

  .hero-cta {
    gap: 1.25rem;
  }

  .cta {
    padding-block: 4.5rem;
  }
}

/* --- Auxiliary pages (legal, launched, tenant login) ----------------------- */

.legal {
  padding: 4rem 0 5rem;
}

.legal h1 {
  font-size: 2.125rem;
  font-weight: 500;
  letter-spacing: -0.022em;
  margin-bottom: 0.5rem;
}

.legal__updated {
  color: var(--ink-3);
  font-size: 0.875rem;
  margin-bottom: 3rem;
}

/* A translated legal page says the English text is the binding one (I18N.md "The marketing site") */
.legal__notice {
  color: var(--ink-3);
  font-size: 0.9rem;
  margin: 0 0 2rem;
}

.legal section {
  margin-bottom: 2rem;
}

.legal h2 {
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -0.011em;
  margin-bottom: 0.75rem;
}

.legal p {
  color: var(--ink-2);
  margin-bottom: 1rem;
  max-width: 42rem;
}

.legal ul {
  margin-bottom: 1rem;
  padding-inline-start: 1.25rem;
}

.legal li {
  list-style: disc;
  color: var(--ink-2);
  margin-bottom: 0.5rem;
}

.legal a {
  color: var(--ink);
  text-underline-offset: 0.2em;
  text-decoration-color: var(--line);
}

.legal a:hover {
  text-decoration-color: var(--ink);
}

.footer-minimal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.5rem 0;
  border-top: 1px solid var(--line-soft);
  font-size: 0.8125rem;
  color: var(--ink-3);
}

.footer-legal {
  display: flex;
  gap: 1.25rem;
}

.footer-legal a {
  font-size: 0.8125rem;
  color: var(--ink-3);
  text-decoration: none;
}

.footer-legal a:hover {
  color: var(--ink);
}

/* Launched ("check your email") page */

.launched-page {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
  text-align: center;
}

.success-card {
  width: 100%;
  max-width: 30rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 2.5rem 2rem;
  margin-top: 2rem;
}


.success-card__title {
  font-size: 1.375rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.success-card__steps {
  text-align: start;
  color: var(--ink-2);
  font-size: 0.9375rem;
  padding-inline-start: 1.25rem;
}

.success-card__steps li {
  list-style: decimal;
  margin-bottom: 0.5rem;
}

/* Tenant login / setup (shared templates; redesigned fully in Phase 5) */

.login-body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.login-page {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

.login-container {
  width: 100%;
  max-width: 26rem;
  text-align: center;
}

.login-logo {
  display: inline-block;
  font-size: 1.25rem;
  margin-bottom: 2.5rem;
  text-decoration: none;
}

.login-container h1 {
  font-size: 2.125rem;
  font-weight: 500;
  letter-spacing: -0.022em;
  margin-bottom: 1rem;
}

.login-subtitle {
  color: var(--ink-2);
  margin-bottom: 2rem;
}

.login-form {
  margin-bottom: 1.5rem;
}

.login-form input[type="email"],
.login-form input[type="text"] {
  width: 100%;
  padding: 0.75rem 1.125rem;
  font-size: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--ink);
  margin-bottom: 1rem;
}

.login-form input[type="email"]:focus,
.login-form input[type="text"]:focus {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.login-form input[type="email"]::placeholder,
.login-form input[type="text"]::placeholder {
  color: var(--ink-3);
}

.login-form .btn {
  width: 100%;
}

.login-hint {
  font-size: 0.875rem;
  color: var(--ink-3);
  text-align: center;
}

.login-error {
  padding: 1rem;
  margin-bottom: 1.5rem;
  border: 1px solid var(--ink);
  border-radius: var(--r-sm);
  font-size: 0.875rem;
}

.login-notice {
  padding: 1rem;
  margin-bottom: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 0.875rem;
  color: var(--ink-2);
}

.login-dev-link {
  margin-top: 2rem;
  padding: 1rem;
  border: 1px dashed var(--line);
  border-radius: var(--r-sm);
  font-size: 0.875rem;
  word-break: break-all;
}

.login-dev-link a {
  color: var(--ink);
}

.login-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem 1rem;
  font-size: 0.8125rem;
  color: var(--ink-3);
}

.login-footer-links {
  display: flex;
  gap: 1.25rem;
}

/* --- Launch form (embedded registration; shared partial with /launch) ------ */

.launch-wrap {
  max-width: 36rem;
  margin: 2.5rem auto 0;
  text-align: start;
}

.launch-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

.launch-form__label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.375rem;
}

.launch-form__input {
  width: 100%;
  padding: 0.625rem 1rem;
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}

.launch-form__input::placeholder {
  color: var(--ink-3);
}

.launch-form__input:focus {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* One look for the subdomain field on the homepage and on /launch: the
   apex is an addon inside the field, the address reads as one
   (LEDGER.md A-135). */
.launch-form__subdomain-wrap {
  display: flex;
  align-items: stretch;
}

.launch-form__subdomain-wrap .launch-form__input {
  flex: 1;
  min-width: 0;
  border-start-end-radius: 0;
  border-end-end-radius: 0;
  border-inline-end: none;
}

.launch-form__domain {
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--ink-3);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-inline-start: none;
  border-start-end-radius: var(--r-sm);
  border-end-end-radius: var(--r-sm);
  white-space: nowrap;
}

.launch-form__cta {
  display: block;
  width: 100%;
  margin-top: 1.25rem;
  padding: 0.8125rem 1.875rem;
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: opacity var(--dur);
}

.launch-form__cta:hover {
  opacity: 0.85;
}

.launch-form__cta:disabled {
  opacity: 0.55;
  cursor: default;
}

.launch-form__note {
  font-size: 0.8125rem;
  color: var(--ink-3);
  text-align: center;
  margin-top: 0.75rem;
}

.launch-form__error {
  padding: 0.75rem 1rem;
  border: 1px solid var(--ink);
  border-radius: var(--r-sm);
  font-size: 0.875rem;
  margin-bottom: 1rem;
}

.launch-form__field-error {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink);
  margin-top: 0.375rem;
}

.launch-form .success-card {
  margin: 0 auto;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 2.5rem 2rem;
}

.launch-form .success-card p {
  margin-top: 0.75rem;
  color: var(--ink-2);
}

.launch-form .success-card a {
  color: var(--ink);
}

/* Filterable app select (homepage does not load global.css) */

.filter-select {
  position: relative;
}

.filter-select__input {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238a8985' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-inline-end: 2.5rem;
}

.filter-select__list {
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  inset-inline-end: 0;
  margin: 0.25rem 0 0;
  padding: 0.25rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  list-style: none;
  z-index: 100;
  max-height: 240px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--dur), transform var(--dur), visibility var(--dur);
}

.filter-select--open .filter-select__list {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.filter-select__item {
  padding: 0.5rem 0.75rem;
  font-size: 0.9375rem;
  border-radius: 4px;
  cursor: pointer;
}

.filter-select__item:hover,
.filter-select__item--hover {
  background: var(--paper-2);
}

.filter-select__item--selected {
  font-weight: 500;
}

.filter-select__item[hidden] {
  display: none;
}

.filter-select__empty {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink-3);
  cursor: default;
  pointer-events: none;
}

/* Per-panel launch links in the frame caption (swap via :checked) */

.frame-launch {
  display: none;
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--line);
  margin-inline-start: 0.375rem;
  transition: color var(--dur);
}

.frame-launch:hover {
  color: var(--ink);
}

#pv-blog:checked ~ .frame .frame-launch--blog,
#pv-status:checked ~ .frame .frame-launch--status,
#pv-changelog:checked ~ .frame .frame-launch--changelog,
#pv-kb:checked ~ .frame .frame-launch--kb {
  display: inline;
}

@media (max-width: 640px) {
  .launch-form__row {
    grid-template-columns: 1fr;
  }
}

/* The language switcher in the marketing header (I18N.md "The marketing
   site"): the last item inside the header's one group, so the group's gap
   spaces it at every width; a globe and the language's code, never a row of
   its own. Until 2026-09-15 a rule gave it a full row below 1100px
   (HOMEPAGE.md "The header is two groups on one row"; LEDGER.md A-192). */
.hd-lang {
  display: flex;
  align-items: center;
}

.lang-switcher--compact .lang-switcher__button {
  gap: 0.35em;
  font-size: 0.8125rem;
  text-transform: none;
  letter-spacing: normal;
  color: var(--ink-2);
}

.lang-switcher--compact .lang-switcher__button::after {
  content: none;
}

.lang-switcher__icon {
  display: block;
  width: 1.05rem;
  height: 1.05rem;
}

.lang-switcher__code {
  font-weight: 500;
}

/* The language's name for a screen reader; the code is what shows. */
.lang-switcher__name {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* marketing.css is loaded alone on the homepage: only its own tokens
   exist here (LEDGER.md A-118). */
/* The header's switcher is a button and a native popover
   (shared/lang-switcher.html): marketing.css is loaded alone on the
   homepage, so the rules live here too, in this sheet's tokens (LEDGER.md
   A-118, A-171). */
.lang-switcher {
  position: relative;
  anchor-scope: --lang-switcher;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.lang-switcher__button {
  anchor-name: --lang-switcher;
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  color: var(--ink-3);
  white-space: nowrap;
  cursor: pointer;
}

/* A box with two borders turned 45 degrees; the [dir="rtl"] rule at the end
   of the sheet turns it the other way (CSS.md "Logical directions"). */
.lang-switcher__button::after {
  content: "";
  width: 0.45em;
  height: 0.45em;
  border-inline-end: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-0.15em);
}

.lang-switcher:has(:popover-open) .lang-switcher__button {
  color: var(--ink);
}

/* Anchored under the button, above it when there is no room below; a
   browser without anchor positioning shows the list centered. */
.lang-switcher__menu {
  padding: 0.35rem 0;
  list-style: none;
  min-width: 11rem;
  max-height: 60vh;
  overflow-y: auto;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: 0 8px 24px rgba(20, 20, 19, 0.1);
}

@supports (anchor-name: --a) {
  .lang-switcher__menu {
    position-anchor: --lang-switcher;
    inset: auto;
    top: anchor(bottom);
    inset-inline-end: anchor(end);
    margin: 0.5rem 0 0;
    position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
  }
}

/* A browser without the popover would show every language inline; it gets
   no switcher, and the prefixed links still carry the language. */
@supports not selector(:popover-open) {
  .lang-switcher {
    display: none;
  }
}

.lang-switcher li a {
  display: block;
  padding: 0.45rem 1rem;
  color: var(--ink-3);
  text-decoration: none;
  white-space: nowrap;
}

.lang-switcher li a:hover {
  background: var(--paper-2);
}

.lang-switcher li a[aria-current="true"] {
  color: var(--ink);
  font-weight: 500;
}

/* Chinese, Japanese and Korean read in the system's own fonts: a shipped
   CJK face is 2.4 to 18 MB and the systems' are excellent. Plex keeps the
   Latin letters inside the text (DESIGN.md "Typography"; LEDGER.md A-161). */
:root:lang(ja) {
  --sans: "IBM Plex Sans", "IBM Plex Sans Arabic", "IBM Plex Sans Devanagari", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", Meiryo, "Noto Sans JP", sans-serif;
}

:root:lang(ko) {
  --sans: "IBM Plex Sans", "IBM Plex Sans Arabic", "IBM Plex Sans Devanagari", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
}

:root:lang(zh) {
  --sans: "IBM Plex Sans", "IBM Plex Sans Arabic", "IBM Plex Sans Devanagari", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}

/* Right to left (I18N.md "Right to left"; LEDGER.md A-162). */
[dir="rtl"] .filter-select__input {
  background-position: left 1rem center;
}

[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="url"] {
  direction: ltr;
  text-align: end;
}

[dir="rtl"] code,
[dir="rtl"] .ms-pct {
  direction: ltr;
  unicode-bidi: isolate;
}

/* The switcher's chevron: its inline border swaps sides, so the turn swaps
   too, or it points sideways (LEDGER.md A-170). */
[dir="rtl"] .lang-switcher .lang-switcher__button::after {
  transform: rotate(-45deg) translateY(-0.15em);
}