/* ==========================================================================
   Simplest1 marketing stylesheet (Ink & Paper).
   Tonal monochrome ("ink & paper"), IBM Plex type, zero JavaScript.
   Loads on its own on the homepage: fonts, reset, tokens, and page styles all
   live here, so that page has no dependency on other stylesheets. Every other
   page that uses it loads global.css first; see the layer note below.
   ========================================================================== */
/* The cascade layers, in the order global.css declares them, so a page
   that loads both sheets orders them the same whichever arrives first.
   Everything this sheet shares with global.css (the button, the wordmark,
   the skip link, the language switcher) sits in `marketing`, which
   global.css's `components` outranks: an unlayered sheet used to beat
   every layered rule regardless of specificity, so .btn here killed
   global.css's .btn--outline and the passkey button on /sign-in drew as
   a second solid pill (CSS.md "Cascade layers"; LEDGER.md A-247). */
@layer reset, tokens, base, layout, marketing, components, utilities;

/* --- 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,
  select {
    font: inherit;
  }
}

@layer marketing {
  /* --- 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;
    /* Brick red: a refused form only (DESIGN.md "The error rule"). The
       homepage loads no global.css, so the tokens live here too. */
    --red: #9f3a2c;
    --red-tint: #fcf4f2;
    --color-error: var(--red);
    --color-error-bg: var(--red-tint);
    --color-error-border: var(--red);

    --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);
      --red: #e58a79;
      --red-tint: #251614;
    }
  }

  /* --- 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-block: 0.4375rem;
    padding-inline: 1rem 1.125rem;
    margin-inline-start: 0.25rem;
    border-inline-start: 1px solid var(--line);
    /* Logical corners: the hairline is on the inline-start side, which must be
       the square one in both directions. Written as "0 pill pill 0" it bent
       around the rounded corner in Arabic (LEDGER.md A-245). */
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    border-start-end-radius: var(--r-pill);
    border-end-end-radius: var(--r-pill);
    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-block: 0.375rem;
      padding-inline: 0.75rem 0.875rem;
    }

    .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;
  }

  /* --- 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;
  }

  /* A refused field shows its border, as on every form (CSS.md "Input with
     Error"; LEDGER.md A-196). */
  .launch-form__input[aria-invalid="true"] {
    border-color: var(--color-error-border);
  }

  /* 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;
    color: var(--color-error);
    background: var(--color-error-bg);
    border: 1px solid var(--color-error-border);
    border-radius: var(--r-sm);
    font-size: 0.875rem;
    margin-bottom: 1rem;
  }

  /* Doubled class: `.cta p` greys every paragraph in the launch section and
     outranked the plain class, so a refusal on the homepage read as a hint. */
  .launch-form .launch-form__field-error {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-error);
    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). The server
     sends a native select, drawn like the text input the filter-select
     behavior turns it into, so the form looks the same without JavaScript. */

  .filter-select {
    position: relative;
  }

  .filter-select__input {
    appearance: none;
    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);
  }

}

/* The sign-in and setup pages are not marketing: they are product pages
   that borrow this sheet for their shell, so their rules are components
   and outrank global.css's shared form styles the way they did while
   the whole sheet was unlayered (LEDGER.md A-247). */
@layer components {
  /* 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;
    color: var(--color-error);
    background: var(--color-error-bg);
    border: 1px solid var(--color-error-border);
    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;
  }

  /* A refused email shows its border, and its message sits right under the
     field, closer to the input than to the button (CSS.md "Input with
     Error"; LEDGER.md A-196). In the components layer with the rest of
     the sign-in page, so it outranks the shared error styles. */
  .login-form input[aria-invalid="true"] {
    border-color: var(--color-error-border);
    margin-bottom: 0.5rem;
  }

  .login-form .form-error {
    margin: 0 0 1rem;
  }
}