/* ==========================================================================
   easythings
   A printing terminal: VT323, the face of a DEC screen, for headings and identity;
   Courier Prime, the face of the paper it printed on, for everything else. Both are
   monospaced, so the grid of the page and of the type are one grid. Ink on grey
   paper; reverse video is the platform speaking, and ribbon red marks the cursor.
   ========================================================================== */

/* ---------- fonts ---------- */

@font-face {
  font-family: 'VT323';
  src: url('../fonts/vt323-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Courier Prime';
  src: url('../fonts/courierprime-400-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Courier Prime';
  src: url('../fonts/courierprime-700-latin.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- tokens ---------- */

:root {
  --paper: #ebebe7;
  --paper-raised: #f3f3f0;
  --rule: #c4c5c2;
  --ink: #22252a;
  --slate: #55585c;
  --slate-deep: #45484c;
  --panel: #22252a;
  --panel-2: #2e3136;
  --panel-rule: rgba(235, 235, 231, 0.14);
  --slate-dark: #b9bbb8;
  --deep: #2e3136;

  /* The accent is the ink itself: emphasis comes from weight and reverse video, not hue. */
  --accent: #22252a;
  --accent-deep: #3a3e44;
  --accent-soft: #dcddd8;
  --accent-ring: #7a7d80;
  --accent-lift: #ebebe7;
  /* Ribbon red, the second colour of a typewriter ribbon: the cursor and at most one
     detail per drawing, never text. */
  --ribbon: #8f3a30;

  --amber: #96650b;
  --amber-ink: #7a5309;
  --amber-lift: #e0a53c;
  --red: #a8332a;
  --red-lift: #ec7264;

  /* One faint pastel per drawing, almost grey, under a 1-bit dither. They only ever sit
     behind a drawing, never behind text. */
  --tint-runtime: #dde4df;
  --tint-storage: #e6e2d3;
  --tint-signin: #e1dfe8;
  --tint-address: #dce1e8;
  --tint-versions: #e8dfdb;
  --tint-finance: #dee4da;
  --tint-people: #e7dde0;
  --tint-warehouse: #e4dfd5;
  --tint-support: #dbe4e3;
  --tint-procurement: #e2e0e7;
  --dither: radial-gradient(rgba(34, 37, 42, 0.2) 0.9px, transparent 1.1px) 0 0 / 4px 4px;

  --font-display: 'VT323', 'Courier Prime', ui-monospace, Menlo, Consolas, monospace;
  --font-mono: 'Courier Prime', 'Courier New', ui-monospace, Menlo, Consolas, monospace;

  --gutter: 20px;
  --maxw: 1200px;
  --section-y: 72px;
  /* Square everywhere, like a terminal's character cells. */
  --radius: 0;
  --radius-control: 0;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 0.2s;
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* The hard shadow of an old keyboard key, solid ink with no blur: the drawings, the
     cards, the status panel and the form sit on one, like the mark does. The product
     screens and the language menu stay flat; they are windows, not keys. */
  --lift: 4px 4px 0 var(--ink);
  --lift-dark: 5px 5px 0 var(--ink);

  --hatch: repeating-linear-gradient(45deg, transparent 0 6px, rgba(34, 37, 42, 0.07) 6px 7px);
  /* Tileable feTurbulence noise, laid under the tinted surfaces so they read as faded
     photo paper rather than flat colour. */
  --grain: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjgiIGhlaWdodD0iMTI4Ij48ZmlsdGVyIGlkPSJuIiB4PSIwJSIgeT0iMCUiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxmZVR1cmJ1bGVuY2UgdHlwZT0iZnJhY3RhbE5vaXNlIiBiYXNlRnJlcXVlbmN5PSIwLjg1IiBudW1PY3RhdmVzPSIyIiBzdGl0Y2hUaWxlcz0ic3RpdGNoIiByZXN1bHQ9InQiLz48ZmVDb2xvck1hdHJpeCBpbj0idCIgdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMTggMCIvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPSIxMjgiIGhlaWdodD0iMTI4IiBmaWx0ZXI9InVybCgjbikiLz48L3N2Zz4=") 0 0 / 128px 128px;
}
@media (min-width: 768px) {
  :root {
    --gutter: 32px;
    --section-y: 100px;
  }
}
@media (min-width: 1200px) {
  :root {
    --gutter: 40px;
    --section-y: 124px;
  }
}

/* ---------- base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 16.35px;
  line-height: 1.62;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  /* A hair of spread, as ink takes to paper. currentColor keeps it right on dark too. */
  text-shadow: 0 0 0.5px currentColor;
}
@media (min-width: 768px) {
  body { font-size: 17px; }
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
/* The big headings are the screen; VT323 runs small on its em, so it is set large. */
.hero__title,
.h-section,
.doc__title,
.doc__body h2 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 0.95;
  text-shadow: none;
}
p { margin: 0; }
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
dl, dd { margin: 0; }
[hidden] { display: none !important; }
a { color: inherit; }
img, svg { max-width: 100%; }
code { font-family: var(--font-mono); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-dark :focus-visible,
.site-header :focus-visible {
  outline-color: var(--accent-lift);
}

section[id], #top { scroll-margin-top: 78px; }

/* ---------- utilities ---------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--paper);
  font-size: 14.17px;
  font-weight: 600;
  text-decoration: none;
  transition: top var(--dur) ease;
}
.skip-link:focus { top: 12px; }

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

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section-y); }
.section--dark {
  background: var(--panel);
  color: var(--paper);
}
.section--tight { padding-block: calc(var(--section-y) * 0.74); }

/* Light sections sit on a framed sheet with hatched margins; dark sections stay full
   bleed, so the page alternates framed paper and edge-to-edge bands. */
@media (min-width: 1280px) {
  main > section:not(.section--dark) {
    background:
      linear-gradient(90deg, var(--rule) 0 1px, transparent 1px calc(100% - 1px), var(--rule) calc(100% - 1px) 100%) center / var(--maxw) 100% no-repeat,
      linear-gradient(var(--paper), var(--paper)) center / var(--maxw) 100% no-repeat,
      var(--hatch);
  }
}

.hatch-strip {
  height: 40px;
  background-image: var(--hatch);
  border-block: 1px solid var(--rule);
}

/* ---------- typography ---------- */

/* Each section opens like a command typed at the prompt. */
.eyebrow {
  display: flex;
  gap: 1ch;
  margin: 0 0 18px;
  font-size: 15px;
  text-transform: lowercase;
  color: var(--slate);
}
.eyebrow::before {
  content: '$';
  flex: none;
  color: var(--ink);
}
.section--dark .eyebrow { color: var(--slate-dark); }
.section--dark .eyebrow::before { color: var(--paper); }

.h-section {
  font-size: clamp(2.3rem, 1.8rem + 2.2vw, 3.7rem);
  max-width: 21ch;
  text-wrap: balance;
}
.section--dark .h-section { max-width: 20ch; }

.lede {
  margin-top: 22px;
  max-width: 50ch;
  font-size: clamp(0.95rem, 0.92rem + 0.14vw, 1rem);
  color: var(--slate);
}
.section--dark .lede { color: var(--slate-dark); }

.lede a,
.surface__body a,
.faq__a a {
  color: var(--accent);
  text-underline-offset: 3px;
}
.section--dark .lede a { color: var(--accent-lift); }

/* A footnote-style marker: sighted readers get a quiet asterisk, and the "not built
   yet" meaning lives in the .visually-hidden text inside it. */
.tag-roadmap {
  margin-left: 2px;
  font-size: 0.75em;
  font-weight: 600;
  color: var(--slate);
  vertical-align: super;
}

/* The "leads elsewhere" mark alone, inline after the sentence it belongs to. */
.icon-link {
  display: inline-flex;
  vertical-align: -3px;
  margin-left: 4px;
  color: var(--accent);
}
.icon-link svg {
  width: 16px;
  height: 16px;
}
.icon-link:hover { color: var(--accent-deep); }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 20px;
  border: 2px solid transparent;
  border-radius: var(--radius-control);
  font: inherit;
  font-size: 15.26px;
  font-weight: 700;
  letter-spacing: 0;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--dur) ease,
    color var(--dur) ease,
    border-color var(--dur) ease,
    box-shadow var(--dur) ease,
    transform var(--dur) ease;
}
/* Reverse video: pointing at it swaps ink and paper, like a selected menu item. */
.btn--primary {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.btn--primary:hover {
  background: var(--paper);
  color: var(--ink);
}
.btn--primary:active { transform: translate(1px, 1px); }
.site-header .btn--primary,
.section--dark .btn--primary {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink);
}
.site-header .btn--primary:hover,
.section--dark .btn--primary:hover {
  background: var(--ink);
  color: var(--paper);
}
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn--ghost:hover {
  background: var(--accent-soft);
}
.btn--ghost:active { transform: translateY(1px); }
.btn--sm {
  padding: 7px 14px;
  font-size: 14.17px;
}
.btn--block { width: 100%; }
.btn[disabled] {
  opacity: 0.55;
  cursor: progress;
}
.btn[aria-disabled='true'] { pointer-events: none; }

/* ---------- brand ---------- */

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

/* A white key on a 32 grid: three lines of a log, the ribbon-red cursor ending flush
   with the first. The hard shadow is ink on paper and a mid grey on the dark header
   and footer, where ink would vanish; the white face reads on both. */
.brand__mark {
  flex: none;
  shape-rendering: crispEdges;
}
.brand__mark-shadow { fill: var(--ink); }
.brand__mark-face { fill: #fff; }
.brand__mark-lines { fill: var(--ink); }
.brand__mark-cursor { fill: var(--ribbon); }
.site-header .brand__mark-shadow,
.site-footer .brand__mark-shadow {
  fill: var(--accent-ring);
}

/* Lowercase in the markup, not via text-transform, so it stays lowercase when copied. */
.brand__name {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
  text-shadow: none;
}
.brand__note {
  display: none;
  align-self: center;
  font-size: 13.63px;
  text-transform: lowercase;
  color: var(--slate-dark);
}
@media (min-width: 768px) {
  .brand__note { display: block; }
}
/* Just past the menu breakpoint the full nav, the flags and the button need the room,
   and Portuguese labels are longer than English ones. */
@media (min-width: 1020px) and (max-width: 1199.98px) {
  .site-header .brand__note { display: none; }
}
@media (min-width: 1020px) {
  .site-header__in .btn { white-space: nowrap; }
}

/* ---------- header ---------- */

/* The status line of the terminal: reverse video across the top of every page. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--panel);
  color: var(--paper);
}
.site-header__in {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 62px;
}
.site-header__in .brand { margin-right: auto; }

.site-nav {
  display: none;
  gap: 24px;
}
.site-nav a {
  padding-block: 4px;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
  font-size: 15.26px;
  text-decoration: none;
  color: var(--slate-dark);
  transition: color var(--dur) ease, border-color var(--dur) ease;
}
.site-nav a:hover {
  color: var(--paper);
  border-bottom-color: var(--paper);
}

/* A native disclosure, so it opens without JS. Closed, it shows only the current
   language's flag; open, the other languages' flags at the same size, each a link
   to the same page in that language, plain enough for a search engine to follow.
   The language's name is the link's accessible name and tooltip. */
.lang-menu {
  position: relative;
  flex: none;
}
.lang-menu__current {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 4px;
  list-style: none;
  cursor: pointer;
}
.lang-menu__current::-webkit-details-marker { display: none; }
.lang-menu__chevron {
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--slate-dark);
  border-bottom: 1.5px solid var(--slate-dark);
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--dur) ease;
}
.lang-menu[open] .lang-menu__chevron { transform: translateY(1px) rotate(-135deg); }
/* As wide as the button above it, flags stacked under the current one. */
.lang-menu__list {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  left: 0;
  justify-items: center;
  z-index: 50;
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--panel-2);
  border: 1px solid var(--panel-rule);
  border-radius: var(--radius-control);
}
.site-nav .lang-menu__list a {
  display: block;
  padding: 5px 4px;
  border-bottom: 0;
}
.lang-menu__list a:hover { background: var(--panel); }
/* Only the current language keeps its colours, so the choice reads at a glance;
   pointing at another one shows what it would switch to. */
.flag {
  display: block;
  width: 32px;
  height: 23px;
  filter: grayscale(1);
  opacity: 0.75;
  transition: filter var(--dur) ease, opacity var(--dur) ease;
}
.flag .sk-ink { stroke-width: 7; }
.flag .sk-ink-thin { stroke-width: 3.5; }
.lang-menu__current .flag,
.lang-menu__list a:hover .flag,
.lang-menu__list a:focus-visible .flag {
  filter: none;
  opacity: 1;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--panel-rule);
  border-radius: var(--radius-control);
  background: var(--panel-2);
  cursor: pointer;
}
.nav-toggle:hover { border-color: var(--paper); }
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: '';
  display: block;
  width: 16px;
  height: 2px;
  background: var(--paper);
  transition: transform var(--dur) ease, opacity var(--dur) ease, background-color var(--dur) ease;
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before {
  position: absolute;
  top: -6px;
  left: 0;
}
.nav-toggle__bars::after {
  position: absolute;
  top: 6px;
  left: 0;
}
.nav-toggle[aria-expanded='true'] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars::before {
  top: 0;
  transform: rotate(45deg);
}
.nav-toggle[aria-expanded='true'] .nav-toggle__bars::after {
  top: 0;
  transform: rotate(-45deg);
}

@media (max-width: 1019.98px) {
  /* The menu opens from the left edge, the side the brand reads from. */
  .nav-toggle { order: -1; }
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 2px;
    padding: 8px var(--gutter) 16px;
    background: var(--panel);
    border-top: 1px solid var(--panel-rule);
    box-shadow: var(--lift-dark);
  }
  .site-nav.is-open { display: flex; }
  .site-nav a {
    padding: 13px 2px;
    border-bottom: 1px solid var(--panel-rule);
  }
  .site-nav a:last-child { border-bottom: 0; }
  /* Inside the phone menu the flags open in place, under the current one. */
  .lang-menu { padding-top: 6px; }
  .lang-menu__current { width: max-content; }
  .site-nav .lang-menu__list {
    position: static;
    justify-items: start;
    margin-top: 4px;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }
  .site-nav .lang-menu__list a {
    padding: 8px 4px;
    border-bottom: 0;
  }
}
/* On a phone the demo button wraps to two lines; tighter lines and a step down in
   size keep them inside the header bar, Portuguese labels included. */
@media (max-width: 479.98px) {
  .site-header__in { gap: 12px; }
  .site-header__in .btn {
    padding: 3px 8px;
    font-size: 12.08px;
    line-height: 1.2;
    text-align: center;
  }
}
@media (min-width: 1020px) {
  .site-nav { display: flex; }
  .nav-toggle { display: none; }
}

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

.hero { padding-block: 52px 64px; }
@media (min-width: 768px) {
  .hero { padding-block: 76px 92px; }
}
@media (min-width: 1200px) {
  .hero { padding-block: 96px 116px; }
}

.hero__top {
  display: grid;
  gap: 44px;
}
@media (min-width: 1020px) {
  .hero__top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 25rem);
    gap: 64px;
    align-items: start;
  }
}

.hero__intro { text-align: left; }
.hero__title {
  font-size: clamp(2.6rem, 1.6rem + 4vw, 4.7rem);
  line-height: 0.9;
  text-wrap: balance;
}
/* An underscore cursor waiting after the headline: the one thing on the page that
   moves on its own. */
.hero__cursor {
  display: inline-block;
  width: 0.5em;
  height: 0.08em;
  margin-left: 0.1em;
  background: var(--ribbon);
  vertical-align: -0.06em;
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink {
  50% { opacity: 0; }
}
.hero__sub {
  max-width: 56ch;
  margin-top: 28px;
  font-size: clamp(1.04rem, 1rem + 0.2vw, 1.13rem);
  color: var(--slate);
}
.hero__proof {
  margin-top: 26px;
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--slate);
}
.hero__proof a {
  color: var(--accent);
  text-underline-offset: 2px;
}

/* An example tool's status, printed the way the CLI would: what every tool gets,
   checked off. Decorative data; the pillars below carry the explanation. */
.status {
  margin: 0;
  background: var(--paper-raised);
  border: 4px double var(--ink);
  box-shadow: var(--lift);
}
.status__cmd {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 14px;
  background: var(--panel);
  color: var(--paper);
  font-size: 14.17px;
  overflow-wrap: anywhere;
}
.status__cmd span:last-child { flex: none; }
.status__list {
  display: grid;
  gap: 6px;
  padding: 14px 16px 16px;
  font-size: 14.72px;
}
.status__row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
/* Dot leaders, as on a printed listing. */
.status__row dt {
  display: flex;
  flex: 1 1 auto;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  color: var(--slate);
}
.status__row dt::after {
  content: '';
  flex: 1 1 auto;
  min-width: 12px;
  border-bottom: 2px dotted var(--accent-ring);
  transform: translateY(-5px);
}
.status__row dd { text-align: right; }
.status__ok {
  margin-left: 1ch;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: 1.3em;
  line-height: 1;
  text-shadow: none;
}

/* ---------- pillars ---------- */

.pillars {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: 32px;
  column-gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 720px) {
  .pillars {
    grid-template-columns: repeat(5, 1fr);
    column-gap: 28px;
  }
}

/* After .pillars, so its margin survives that rule's reset. */
.hero__pillars { margin-top: 76px; }
@media (min-width: 768px) {
  .hero__pillars { margin-top: 104px; }
}

.pillar { text-align: center; }
.pillar__spot {
  margin: 0 auto 20px;
  transition: transform 0.35s var(--spring);
}
.pillar:hover .pillar__spot { transform: translateY(-4px) rotate(-1.5deg); }

.pillar__label {
  font-family: var(--font-display);
  font-size: 1.95rem;
  line-height: 1;
  color: var(--ink);
  text-shadow: none;
}
.pillar__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 13.63px;
  text-transform: lowercase;
  color: var(--slate);
}
.pillar__status::before {
  content: '';
  flex: none;
  width: 7px;
  height: 7px;
  background: var(--ink);
}
.pillar__body {
  max-width: 30ch;
  margin: 12px auto 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--slate);
  text-wrap: pretty;
}


/* ---------- drawings ----------
   Hand-drawn scenes on dithered tiles: a thick, slightly wobbly ink line, flat greys,
   charcoal texture for dark areas, ribbon red only in small details. The filters and
   the charcoal pattern are defined once per page in .sketch-defs. */

.sketch-defs {
  position: absolute;
  width: 0;
  height: 0;
}

.spot {
  display: block;
  width: 100%;
  max-width: 176px;
  aspect-ratio: 1;
  overflow: hidden;
  border: 2px solid var(--ink);
  background: var(--dither), var(--tint);
  box-shadow: var(--lift);
}
.spot svg {
  display: block;
  width: 100%;
  height: 100%;
}
.spot--runtime { --tint: var(--tint-runtime); }
.spot--storage { --tint: var(--tint-storage); }
.spot--signin { --tint: var(--tint-signin); }
.spot--address { --tint: var(--tint-address); }
.spot--versions { --tint: var(--tint-versions); }
.spot--finance { --tint: var(--tint-finance); }
.spot--people { --tint: var(--tint-people); }
.spot--warehouse { --tint: var(--tint-warehouse); }
.spot--support { --tint: var(--tint-support); }
.spot--procurement { --tint: var(--tint-procurement); }

.sk-ink,
.sk-ink-thin,
.sk-band,
.sk-lanyard,
.sk-check {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: url(#sk-rough);
}
.sk-ink {
  stroke: var(--ink);
  stroke-width: 4;
}
.sk-ink-thin {
  stroke: var(--ink);
  stroke-width: 2.5;
}
.sk-ink-bold { stroke-width: 7; }
.sk-band {
  stroke: #3b3936;
  stroke-width: 12;
}
.sk-lanyard {
  stroke: var(--ribbon);
  stroke-width: 6;
}
.sk-check {
  stroke: var(--accent);
  stroke-width: 3.5;
}
.sk-white { fill: #fbfaf7; }
.sk-light { fill: #d8d5cf; }
.sk-mid { fill: #8f8b85; }
.sk-violet { fill: var(--ribbon); }
/* The hard key shadow, drawn: solid ink with the same wobble as the lines. */
.sk-shadow {
  fill: var(--ink);
  filter: url(#sk-rough);
}
.sk-dark {
  fill: url(#sk-charcoal);
  filter: url(#sk-tooth);
}
.sk-charcoal-ground { fill: #3b3936; }
.sk-charcoal-stroke {
  fill: none;
  stroke: #6b6761;
  stroke-width: 1.4;
  stroke-linecap: round;
}
.sk-text {
  font-family: var(--font-mono);
  font-weight: 700;
  fill: var(--ink);
}

/* ---------- problem ---------- */

.problem__grid {
  display: grid;
  gap: 28px;
  margin-top: 48px;
}
@media (min-width: 768px) {
  .problem__grid { grid-template-columns: repeat(3, 1fr); }
}

.pain {
  padding: 26px 22px 30px;
  background: var(--paper-raised);
  border: 2px solid var(--ink);
  box-shadow: var(--lift);
}
.pain__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.pain__spot {
  flex: none;
  width: clamp(96px, 9vw, 124px);
}
.pain__stat {
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 2rem + 2.4vw, 3.9rem);
  line-height: 0.95;
  color: var(--ink);
  text-shadow: none;
}
.pain__unit {
  font-size: 12.54px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate);
}
.pain__title {
  margin-top: 22px;
  font-size: 1.07rem;
}
.pain__body {
  margin-top: 12px;
  font-size: 15.26px;
  color: var(--slate);
}
.pain__example {
  margin-top: 16px;
  font-size: 12.54px;
  color: var(--slate);
}

/* ---------- lifecycle rail ---------- */

.rail-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 40px;
  font-size: 12.54px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
}
.rail-key {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.rail-key::before {
  content: '';
  width: 9px;
  height: 9px;
  border: 1px solid var(--accent);
}
.rail-key--platform::before { background: var(--accent); }

.rail {
  display: grid;
  gap: 0;
  margin-top: 18px;
}
@media (min-width: 1020px) {
  .rail { grid-template-columns: repeat(5, 1fr); }
}

.station {
  position: relative;
  padding: 26px 0 26px 34px;
  border-top: 1px solid var(--rule);
}
.station:last-child { border-bottom: 1px solid var(--rule); }
.station::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--rule);
}
.station:first-child::before { top: 26px; }
.station:last-child::before { bottom: 26px; }
.station::after {
  content: '';
  position: absolute;
  left: 0;
  top: 26px;
  width: 9px;
  height: 9px;
  background: var(--paper);
  border: 1px solid var(--accent);
}
.station--platform::after { background: var(--accent); }

@media (min-width: 1020px) {
  .station {
    padding: 38px 24px 0 0;
    border-top: 1px solid var(--rule);
    border-bottom: 0;
  }
  .station:last-child {
    border-bottom: 0;
    padding-right: 0;
  }
  .station::before { display: none; }
  .station::after {
    left: 0;
    top: -5px;
  }
}

.station__id {
  font-family: var(--font-display);
  font-size: 1.7rem;
  line-height: 1;
  color: var(--accent);
  text-shadow: none;
}
.station__name {
  margin-top: 12px;
  font-size: 1.11rem;
}
.station__actor {
  margin-top: 10px;
  font-size: 12.54px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
}
.station__body {
  max-width: 32ch;
  margin-top: 14px;
  font-size: 14.72px;
  color: var(--slate);
}

.rail-note {
  max-width: 50ch;
  margin-top: 22px;
  font-size: 14.72px;
  color: var(--slate);
}

/* ---------- audit ---------- */

.audit__head {
  display: grid;
  gap: 22px;
}
@media (min-width: 1020px) {
  .audit__head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
  }
}
.audit__head + .audit__head { margin-top: 56px; }

.audit__panel {
  display: grid;
  gap: 26px;
  margin-top: 48px;
}
@media (min-width: 1020px) {
  .audit__panel {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    gap: 40px;
    align-items: start;
  }
}
.audit__note {
  max-width: 50ch;
  margin-top: 22px;
  font-size: 14.72px;
  color: var(--slate-dark);
}

.checklist {
  margin-top: 20px;
  border-top: 1px solid var(--panel-rule);
}
.checklist li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--panel-rule);
  font-size: 14.72px;
}
.checklist li::before {
  content: '';
  width: 7px;
  height: 7px;
  margin-top: 10px;
  border: 1px solid var(--accent-lift);
}

.finding {
  padding: 22px;
  background: var(--panel-2);
  border: 1px solid var(--panel-rule);
  border-radius: var(--radius);
}
.finding__label {
  font-size: 12.54px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate-dark);
}
.finding__list {
  margin-top: 16px;
  border-top: 1px solid var(--panel-rule);
}
.finding__list li {
  display: grid;
  grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr);
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--panel-rule);
  font-size: 13.63px;
}
.finding__list li:last-child { border-bottom: 0; }
.finding__k { color: var(--slate-dark); }
.finding__v { color: var(--paper); }

/* ---------- tabs ---------- */

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tab {
  appearance: none;
  padding: 10px 13px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-control);
  background: transparent;
  font: inherit;
  font-size: 12.54px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
  cursor: pointer;
  transition: color var(--dur) ease, border-color var(--dur) ease, background-color var(--dur) ease;
}
.tab:hover {
  color: var(--ink);
  border-color: var(--slate);
}
.section--dark .tab {
  border-color: var(--panel-rule);
  color: var(--slate-dark);
}
.section--dark .tab:hover {
  color: var(--paper);
  border-color: var(--slate-dark);
}
/* Last and naming both surfaces, so the surface rules above cannot override it. */
.tab[aria-selected='true'] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.section--dark .tab[aria-selected='true'] {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink);
}

.tabpanel { margin-top: 26px; }
.tabpanel__summary {
  max-width: 46ch;
  font-size: 1.09rem;
}

/* ---------- surfaces ---------- */

.surfaces__panel { margin-top: 40px; }
#surfaces .tabpanel { margin-top: 0; }

/* The stage sits outside .wrap in the markup so its tint runs the true page width;
   100vw would count the scrollbar. Its hues, like the drawing tiles, never carry
   text or state, so violet still means shipped and amber still means roadmap. */
.mock-stage {
  margin-top: 26px;
  padding-block: 26px;
  background:
    radial-gradient(ellipse at center, transparent 60%, rgba(80, 60, 30, 0.06) 150%),
    var(--grain),
    linear-gradient(100deg, var(--stage-a) 0%, var(--stage-a) 42%, var(--stage-b) 100%);
}
@media (min-width: 768px) {
  .mock-stage { padding-block: 36px; }
}
.mock-stage--console {
  --stage-a: #e8e7ec;
  --stage-b: #dcdbe4;
  --surface-label: #46435c;
}
.mock-stage--lab {
  --stage-a: #e6ebe8;
  --stage-b: #d9e1dc;
  --surface-label: #3a5044;
}
.mock-stage--analytics {
  --stage-a: #e6e9ee;
  --stage-b: #d9dfe7;
  --surface-label: #3b4859;
}

.surface {
  display: grid;
  gap: 26px;
  align-items: center;
}
@media (min-width: 1000px) {
  .surface {
    grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
    gap: 40px;
  }
}
.surface__label {
  font-size: 12.54px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--surface-label, var(--accent-deep));
}
.surface__title {
  margin-top: 14px;
  font-size: clamp(1.13rem, 0.98rem + 0.62vw, 1.48rem);
  line-height: 1.3;
}
/* Darker than --slate, which drops below 4.5:1 on the tint. */
.surface__body {
  max-width: 40ch;
  margin-top: 14px;
  font-size: 14.72px;
  color: #4d5054;
}

/* ---------- mockups ----------
   Abstracted interface rather than screenshots: lines stand in for text and only the
   labels that carry meaning are set in type. */

.mock {
  overflow: hidden;
  background: var(--panel);
  border-radius: var(--radius);
  color: var(--paper);
}

.mock__chrome {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--panel-rule);
}

/* Real Safari colours: the chrome only reads as a browser with familiar buttons. */
.win-dots {
  display: flex;
  gap: 7px;
  flex: none;
}
.win-dots span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}
.win-dots span:nth-child(1) { background: #ec6a5e; }
.win-dots span:nth-child(2) { background: #f4bf4f; }
.win-dots span:nth-child(3) { background: #61c454; }

.mock__where {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 14px;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--panel-rule);
  border-radius: 6px;
  font-size: 12.54px;
  letter-spacing: 0.02em;
  color: var(--slate-dark);
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mock__body {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .mock__body { grid-template-columns: 150px minmax(0, 1fr); }
}

.mock__side {
  display: none;
  padding: 18px 14px;
  border-right: 1px solid var(--panel-rule);
}
@media (min-width: 720px) {
  .mock__side { display: block; }
}
.mock__navgroup {
  display: grid;
  gap: 9px;
  margin-bottom: 20px;
}
.mock__nav {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mock__nav::before {
  content: '';
  flex: none;
  width: 6px;
  height: 6px;
  background: var(--panel-rule);
}
.mock__nav--on::before { background: var(--accent-lift); }
.mock__bar {
  height: 6px;
  background: var(--panel-rule);
  border-radius: 1px;
}
.mock__nav--on .mock__bar { background: color-mix(in srgb, var(--accent-lift) 55%, transparent); }
.w2 { width: 48%; }
.w3 { width: 58%; }
.w4 { width: 70%; }
.w5 { width: 82%; }

.mock__main {
  min-height: 300px;
  padding: 20px 18px 24px;
}
.mock__title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  line-height: 1;
  text-shadow: none;
}
.mock__sub {
  margin-top: 6px;
  font-size: 11.99px;
  color: var(--slate-dark);
}

/* Console: settings rows. Narrow screens stack the value under label and status. */
.mock__rows {
  margin-top: 18px;
  border-top: 1px solid var(--panel-rule);
}
.mock__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "k p" "v v";
  gap: 6px 12px;
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid var(--panel-rule);
  font-size: 12.54px;
}
@media (min-width: 620px) {
  .mock__row {
    grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr) auto;
    grid-template-areas: "k v p";
  }
}
.mock__k {
  grid-area: k;
  color: var(--slate-dark);
}
.mock__v {
  grid-area: v;
  color: var(--paper);
  overflow-wrap: anywhere;
}
.mock__pill {
  grid-area: p;
  justify-self: end;
  padding: 3px 8px;
  border: 1px solid var(--panel-rule);
  border-radius: var(--radius-control);
  font-size: 11.99px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate-dark);
  white-space: nowrap;
}
.mock__pill--on {
  border-color: color-mix(in srgb, var(--accent-lift) 45%, transparent);
  color: var(--accent-lift);
}
.mock__pill--next {
  border-color: color-mix(in srgb, var(--amber-lift) 45%, transparent);
  color: var(--amber-lift);
}

/* Studio: app tiles. */
.mock__grid {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}
@media (min-width: 560px) {
  .mock__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .mock__grid { grid-template-columns: repeat(3, 1fr); }
}
.mock__app {
  padding: 14px;
  border: 1px solid var(--panel-rule);
  border-radius: var(--radius-control);
}
.mock__app-name {
  font-size: 12.54px;
  color: var(--paper);
}
.mock__app-by {
  margin-top: 7px;
  font-size: 12.54px;
  color: var(--slate-dark);
}
.mock__app-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 11.99px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate-dark);
}
.mock__app-foot::before {
  content: '';
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-lift);
}
.mock__app--idle .mock__app-foot::before { background: var(--panel-rule); }

/* Analytics: stat tiles and a plot. */
.mock__stats {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}
@media (min-width: 560px) {
  .mock__stats { grid-template-columns: repeat(3, 1fr); }
}
.mock__stat {
  padding: 14px;
  border: 1px solid var(--panel-rule);
  border-radius: var(--radius-control);
}
.mock__stat-k {
  font-size: 11.99px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate-dark);
}
.mock__stat-v {
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: 2.2rem;
  line-height: 1;
  color: var(--accent-lift);
  text-shadow: none;
}
.mock__plot {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--panel-rule);
  border-radius: var(--radius-control);
}
.mock__plot svg {
  display: block;
  width: 100%;
  height: 96px;
}
.mock__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 10px;
  font-size: 11.99px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate-dark);
}

/* ---------- included ---------- */

.fact-table {
  width: 100%;
  margin-top: 40px;
  border-collapse: collapse;
  text-align: left;
}
.fact-table th,
.fact-table td {
  padding: 13px 16px 13px 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  font-size: 14.72px;
}
.fact-table tbody tr:last-child th, .fact-table tbody tr:last-child td { border-bottom: 0; }
.fact-table th[scope="row"] {
  width: 34%;
  font-weight: 600;
  color: var(--ink);
}
.fact-table td { color: var(--slate); }
.fact-table__group th {
  padding: 22px 0 8px;
  border-bottom: 0;
  font-size: 12.54px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.fact-table__group:first-child th { padding-top: 0; }

/* Plainer than the table on purpose: the flatter form signals none of it exists yet. */
.next-list {
  display: grid;
  gap: 0;
  margin-top: 40px;
}
@media (min-width: 620px) {
  .next-list {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 32px;
  }
}
.next-item {
  padding: 18px 0;
  border-top: 1px solid var(--rule);
}
.next-item__name { font-size: 1.07rem; }
.next-item__body {
  margin-top: 8px;
  font-size: 14.72px;
  color: var(--slate);
}

/* ---------- plans ---------- */

.plans__head {
  display: grid;
  gap: 22px;
}
@media (min-width: 1020px) {
  .plans__head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
  }
}

.plans__note {
  max-width: 62ch;
  margin-top: 22px;
  font-size: 14.72px;
  color: var(--slate);
}

/* Two independent switches, each its own segmented group, rather than one control
   with four combined states. */
.price-toggle {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 14px;
  margin-top: 28px;
}

.segmented {
  display: inline-flex;
  border: 1px solid var(--rule);
  border-radius: var(--radius-control);
}
.segmented__btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: none;
  border-right: 1px solid var(--rule);
  background: transparent;
  font: inherit;
  font-size: 12.54px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--slate);
  cursor: pointer;
  transition: color var(--dur) ease, background-color var(--dur) ease;
}
.segmented__btn:last-child { border-right: 0; }
.segmented__btn:hover { color: var(--ink); }
.segmented__btn[aria-pressed='true'] {
  background: var(--accent-soft);
  color: var(--ink);
}
.segmented__chip {
  padding: 2px 6px;
  background: var(--ink);
  border-radius: var(--radius-control);
  font-size: 10.9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--paper);
}

.price--monthly, .runs--self { display: none; }
[data-billing='monthly'] .price--monthly { display: inline; }
[data-billing='monthly'] .price--annual { display: none; }
[data-deploy='self'] .runs--cloud { display: none; }
[data-deploy='self'] .runs--self { display: inline; }

/* Free only runs in cloud we provision. Dimmed rather than removed, so the table
   keeps its shape. */
[data-deploy='self'] .plans__table th:nth-child(2),
[data-deploy='self'] .plans__table td:nth-child(2),
[data-deploy='self'] .plan-card--free {
  opacity: 0.4;
}

.price__unit {
  display: block;
  margin-top: 2px;
  font-size: 11.99px;
  font-weight: 400;
  color: var(--slate);
}
.plan-card__value .price__unit {
  display: inline;
  margin-top: 0;
}

/* Cards (narrow screens) */

.plans__cards {
  display: grid;
  gap: 20px;
  margin-top: 44px;
}

.plan-card {
  padding: 24px 20px 28px;
  background: var(--paper-raised);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--lift);
  transition: background-color var(--dur) ease-in-out, box-shadow var(--dur) ease-in-out;
}
.plan-card:hover { background: color-mix(in srgb, var(--accent-soft) 62%, var(--paper)); }
.plan-card:hover .btn--ghost {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.plan-card--rec {
  padding: 21px 17px 25px;
  border: 4px double var(--ink);
}
.plan-card__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.plan-card__name {
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 400;
  line-height: 1;
  text-shadow: none;
}
.plan-card__for {
  margin-top: 10px;
  font-size: 14.72px;
  color: var(--slate);
}
.plan-card__plus {
  margin-top: 14px;
  font-size: 11.99px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}
.plan-card__rows {
  margin-top: 22px;
  border-top: 1px solid var(--rule);
}
.plan-card__row {
  padding: 13px 0;
  border-bottom: 1px solid var(--rule);
}
.plan-card__label {
  font-size: 12.54px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
}
.plan-card__value {
  margin-top: 6px;
  font-size: 14.72px;
}
.plan-card__cta { margin-top: 24px; }

.tag-rec {
  padding: 4px 9px;
  background: var(--accent);
  border-radius: var(--radius-control);
  font-size: 11.99px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
}

/* Table (wide screens) */

.plans__table-wrap { display: none; }
@media (min-width: 940px) {
  .plans__cards { display: none; }
  .plans__table-wrap {
    display: block;
    margin-top: 48px;
  }
}

.plans__table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  text-align: left;
}
.plans__table th,
.plans__table td {
  padding: 15px 18px;
  vertical-align: top;
  border-bottom: 1px solid var(--rule);
}
.plans__table thead th {
  width: 20%;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--ink);
  vertical-align: top;
}
.plans__table tbody tr:last-child td, .plans__table tbody tr:last-child th { border-bottom: 0; }
.plans__table th[scope='row'] {
  width: 20%;
  padding-left: 0;
  font-size: 12.54px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
  transition: background-color var(--dur) ease-in-out;
}
.plans__table td {
  width: 20%;
  font-size: 14.72px;
  transition: background-color var(--dur) ease-in-out;
}
.plans__corner {
  width: 20%;
  padding-left: 0;
}

/* A colspan cell has a single cellIndex, so a group row never lights up a column. */
.plans__group th {
  padding: 26px 0 10px;
  border-bottom: 0;
  font-size: 12.54px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.plans__group:first-of-type th { padding-top: 8px; }

.plans__ph {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.plans__ph-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-height: 26px;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1;
  text-shadow: none;
}
.plans__ph-name .tag-rec {
  font-family: var(--font-mono);
  line-height: 1.4;
}
/* Holds three lines so the four headers stay level even when one is short. */
.plans__ph-for {
  min-height: 4.7em;
  font-size: 13.63px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--slate);
}
.plans__ph-plus {
  font-size: 12.08px;
  font-weight: 500;
  color: var(--slate-deep);
}

.plans__cta-row td { padding-top: 22px; }

/* Pointing at a plan lifts its whole column in its own faint pastel, with grain and a
   soft vignette. Group rows collapse to one cell, so column position alone keys the
   colour. */
.plans__table td.col-hot:nth-child(2),
.plans__table th.col-hot:nth-child(2) {
  background:
    radial-gradient(ellipse at center, transparent 55%, rgba(70, 62, 20, 0.08) 150%),
    var(--grain),
    linear-gradient(165deg, #e6ebe8 0%, #dbe2de 100%);
}
.plans__table td.col-hot:nth-child(3),
.plans__table th.col-hot:nth-child(3) {
  background:
    radial-gradient(ellipse at center, transparent 55%, rgba(50, 55, 75, 0.05) 150%),
    var(--grain),
    linear-gradient(165deg, #eceef2 0%, #e0e4ea 100%);
}
.plans__table td.col-hot.col-rec,
.plans__table th.col-hot.col-rec {
  background:
    radial-gradient(ellipse at center, transparent 55%, rgba(60, 40, 95, 0.05) 150%),
    var(--grain),
    linear-gradient(165deg, #ecebf0 0%, #e1dfe8 100%);
}
.plans__table td.col-hot:nth-child(5),
.plans__table th.col-hot:nth-child(5) {
  background:
    radial-gradient(ellipse at center, transparent 55%, rgba(90, 60, 15, 0.06) 150%),
    var(--grain),
    linear-gradient(165deg, #efede6 0%, #e5e1d5 100%);
}
/* The pastels sit darker than the paper, so secondary text in a lit column steps
   down a shade to keep 4.5:1. */
.plans__table .col-hot .plans__ph-for,
.plans__table .col-hot .price__unit,
.plans__table .col-hot .tag-roadmap {
  color: var(--slate-deep);
}
/* The CTA stays transparent and takes on the column tint behind it. */
.plans__table .btn--ghost, .plans__table .btn--ghost:hover { background: transparent; }

/* ---------- proof ---------- */

#proof.section--dark {
  background: linear-gradient(100deg, var(--panel) 0%, var(--panel) 42%, var(--deep) 100%);
}

.proof {
  display: grid;
  gap: 38px;
}
@media (min-width: 1020px) {
  .proof {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 60px;
    align-items: center;
  }
}

/* Transparent cells divided by borders, so the section gradient shows through. */
.proof__stats {
  display: grid;
  border-block: 1px solid var(--panel-rule);
}
.proof__stat {
  padding: 26px 0;
  border-top: 1px solid var(--panel-rule);
}
.proof__stat:first-child { border-top: 0; }
@media (min-width: 620px) {
  .proof__stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .proof__stat {
    padding: 28px 22px;
    border-top: 0;
  }
  .proof__stat + .proof__stat { border-left: 1px solid var(--panel-rule); }
}
.proof__value {
  font-family: var(--font-display);
  font-size: clamp(2.7rem, 2rem + 2.6vw, 4.1rem);
  line-height: 0.95;
  color: var(--accent-lift);
  text-shadow: none;
}
.proof__unit {
  max-width: 20ch;
  margin-top: 14px;
  font-size: 12.54px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate-dark);
}
.proof__foot {
  margin-top: 24px;
  font-size: 13.63px;
  color: var(--slate-dark);
}

/* ---------- faq ---------- */

.faq__list {
  max-width: 900px;
  margin-top: 44px;
  border-top: 1px solid var(--ink);
}
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 21px 0;
  list-style: none;
  font-size: 15.81px;
  font-weight: 700;
  line-height: 1.45;
  cursor: pointer;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.faq__sign {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
}
.faq__sign::before,
.faq__sign::after {
  content: '';
  position: absolute;
  inset: 6px 0 auto 0;
  height: 1.5px;
  background: var(--accent);
}
.faq__sign::after {
  transform: rotate(90deg);
  transition: transform var(--dur) ease;
}
.faq__item[open] .faq__sign::after { transform: rotate(0deg); }
.faq__a {
  max-width: 62ch;
  padding: 0 0 26px;
  font-size: 14.72px;
  color: var(--slate);
}

/* ---------- call to action ---------- */

.cta__grid {
  display: grid;
  gap: 40px;
}
@media (min-width: 1020px) {
  .cta__grid {
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
    gap: 60px;
    align-items: center;
  }
}

/* ---------- form ---------- */

.form {
  padding: 24px 20px 28px;
  background: var(--paper-raised);
  border: 4px double var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--lift);
}
@media (min-width: 768px) {
  .form { padding: 30px 28px 32px; }
}

.form__grid {
  display: grid;
  gap: 18px;
}
@media (min-width: 620px) {
  .form__grid { grid-template-columns: repeat(2, 1fr); }
  .field--wide { grid-column: 1 / -1; }
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Each label reads as a prompt waiting for its answer. */
.field label {
  font-size: 14.17px;
  text-transform: lowercase;
  color: var(--slate);
}
.field label::before { content: '> '; }
.field input,
.field select {
  width: 100%;
  padding: 10px 4px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--ink);
  border-radius: var(--radius-control);
  font: inherit;
  font-size: 16.35px;
  color: var(--ink);
  transition: border-color var(--dur) ease;
}
.field input::placeholder { color: color-mix(in srgb, var(--slate) 60%, transparent); }
.field input:hover, .field select:hover { background: var(--paper); }
.field select {
  appearance: none;
  padding-right: 36px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--slate) 50%),
    linear-gradient(135deg, var(--slate) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.form__submit { margin-top: 22px; }
.form__privacy {
  margin-top: 16px;
  font-size: 12.54px;
  line-height: 1.65;
  color: var(--slate);
}
.form__privacy a {
  color: var(--accent);
  text-underline-offset: 2px;
}

.form__error {
  margin-top: 16px;
  padding: 14px 16px;
  background: color-mix(in srgb, var(--red) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--red) 45%, transparent);
  border-radius: var(--radius-control);
  font-size: 14.17px;
}
.form__error strong {
  display: block;
  margin-bottom: 4px;
}

.form__success {
  display: grid;
  gap: 12px;
  padding: 8px 0 4px;
}
.form__success-mark {
  font-size: 12.54px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.form__success-title {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1;
  text-shadow: none;
}
.form__success-body {
  max-width: 44ch;
  font-size: 14.72px;
  color: var(--slate);
}

/* ---------- legal pages ---------- */

.doc { padding-block: 52px 88px; }
.doc__title {
  max-width: 20ch;
  font-size: clamp(2.5rem, 1.9rem + 2.4vw, 3.9rem);
  text-wrap: balance;
}
.doc__updated {
  margin-top: 16px;
  font-size: 11.99px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
}
.doc__body {
  max-width: 62ch;
  margin-top: 40px;
}
.doc__body h2 {
  margin-top: 38px;
  font-size: 1.9rem;
}
.doc__body h2:first-child { margin-top: 0; }
.doc__body p {
  margin-top: 14px;
  font-size: 14.72px;
  color: var(--slate);
}
.doc__body ul {
  display: grid;
  gap: 9px;
  margin-top: 14px;
}
.doc__body li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  font-size: 14.72px;
  color: var(--slate);
}
.doc__body li::before {
  content: '';
  width: 6px;
  height: 6px;
  margin-top: 10px;
  background: var(--accent);
}
.doc__body a { color: var(--accent); }
.doc__back { margin-top: 44px; }

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

.site-footer {
  padding-block: 44px 36px;
  background: var(--panel);
  color: var(--slate-dark);
}
.site-footer .brand__name { color: var(--paper); }

.site-footer__top {
  display: grid;
  gap: 32px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--panel-rule);
}
@media (min-width: 768px) {
  .site-footer__top {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 40px;
  }
}
.site-footer__tagline {
  margin-top: 10px;
  font-size: 14.17px;
}

/* Icons are sized here rather than by the markup's attributes, so one rule sets all. */
.site-footer__social {
  display: flex;
  gap: 18px;
  margin-top: 16px;
}
.site-footer__icon {
  display: inline-flex;
  align-items: center;
  color: var(--slate-dark);
}
.site-footer__icon:hover { color: var(--paper); }
.site-footer__icon svg {
  display: block;
  width: 21px;
  height: 21px;
}

/* A profile that does not exist yet: holds its place without being a link. */
.site-footer__icon--soon {
  opacity: 0.5;
  cursor: default;
}
.site-footer__icon--soon:hover { color: var(--slate-dark); }

.site-footer__groups {
  display: flex;
  flex-wrap: wrap;
  gap: 28px 48px;
}
.site-footer__group-title {
  font-size: 12.54px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate-dark);
}
.site-footer__group nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
  font-size: 13.63px;
}
.site-footer__group nav a { text-decoration: none; }
.site-footer__group nav a:hover,
.site-footer__group nav a[aria-current="page"] {
  color: var(--paper);
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 26px;
  padding-top: 22px;
  font-size: 12.54px;
  letter-spacing: 0.08em;
}

/* ---------- scroll reveal ----------
   JS adds .reveal, so without JS nothing is ever stuck at opacity 0. */

.reveal {
  opacity: 0;
  transform: translateY(14px);
}
.reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
.reveal--d1.is-in { transition-delay: 0.06s; }
.reveal--d2.is-in { transition-delay: 0.12s; }
.reveal--d3.is-in { transition-delay: 0.18s; }
.reveal--d4.is-in { transition-delay: 0.24s; }
.reveal--d5.is-in { transition-delay: 0.30s; }

/* ---------- reduced motion ---------- */

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .pillar:hover .pillar__spot { transform: none; }
  .hero__cursor { animation: none; }

  .reveal,
  .reveal.is-in {
    opacity: 1;
    transform: none;
  }
}