/* ==========================================================================
   Universal ID — marketing site
   --------------------------------------------------------------------------
   Palette is drawn from two fixed brand assets: the product's own accent blue
   (#0071e3 / #2997ff, the single accent the admin UI allows itself) and the
   Vasastan photograph on the about page, whose terracotta roofs give the clay
   tone. Clay has exactly one job on this site - it marks a signature - so it
   reads as meaning rather than decoration. Everything else is ink and paper.
   ========================================================================== */

/* Themes.
   --------------------------------------------------------------------------
   Every themed value is one light-dark() pair, so a colour is declared exactly
   once and the two themes cannot drift apart. Which half applies follows the
   root's used color-scheme. It is pinned to 'light', so light is the default
   whatever the visitor's OS prefers; the toggle reaches dark by writing
   data-theme, which is all the switching there is. Each pair is preceded by the plain light value, so a browser without
   light-dark() drops the pair and renders the light theme rather than losing
   the variable altogether. */

:root {
  color-scheme: light;

  --paper: #ffffff;
  --paper: light-dark(#ffffff, #1b1e24);
  --ground: #eceef2;
  --ground: light-dark(#eceef2, #101318);
  --ink: #12161c;
  --ink: light-dark(#12161c, #f1f3f6);
  --muted: #5c6470;
  --muted: light-dark(#5c6470, #98a1ae);
  --line: #d8dce3;
  --line: light-dark(#d8dce3, #2b3039);
  --blue: #0071e3;
  --blue: light-dark(#0071e3, #2997ff);
  /* The mark alone, so the accent stays free for links and buttons. */
  --aegean: #729dca;
  --aegean: light-dark(#729dca, #b1cbe7);
  --clay: #b8492c;
  --clay: light-dark(#b8492c, #e0714f);

  /* A document is white on any screen, in any theme, so the sheet in the hero
     keeps its own tokens instead of inheriting the page's. */
  --sheet: #ffffff;
  --sheet-ink: #12161c;
  --sheet-muted: #6b7380;
  --sheet-line: #e4e7ec;

  /* Shadows are a list, not a colour, so only their tints can be paired. */
  --sh-near: rgba(18, 22, 28, .06);
  --sh-near: light-dark(rgba(18, 22, 28, .06), rgba(0, 0, 0, .5));
  --sh-mid: rgba(18, 22, 28, .10);
  --sh-mid: light-dark(rgba(18, 22, 28, .10), rgba(0, 0, 0, .5));
  --sh-far: rgba(18, 22, 28, .07);
  --sh-far: light-dark(rgba(18, 22, 28, .07), rgba(0, 0, 0, .35));
  --shadow-sheet: 0 1px 2px var(--sh-near), 0 14px 36px var(--sh-mid),
  0 44px 84px var(--sh-far);

  --measure: 34rem;
  --gutter: 1.5rem;
  --bay: clamp(4.5rem, 9vw, 8.5rem);

  --font: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}

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

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a {
  color: inherit;
}

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

/* --- Type scale ---------------------------------------------------------- */

h1,
h2,
h3 {
  margin: 0;
  font-weight: 500;
  letter-spacing: -0.032em;
  line-height: 1.06;
  text-wrap: balance;
}

.display {
  font-size: clamp(2.6rem, 6.4vw, 4.4rem);
}

.h2 {
  font-size: clamp(1.75rem, 3.4vw, 2.6rem);
}

.h3 {
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.3;
}

.lede {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.55;
  color: var(--muted);
  max-width: var(--measure);
  margin: 1.5rem 0 0;
}

.prose {
  max-width: var(--measure);
  color: var(--muted);
}

.prose p {
  margin: 0 0 1.1rem;
}

.prose p:last-child {
  margin-bottom: 0;
}

.prose strong {
  color: var(--ink);
  font-weight: 600;
}

/* --- Shell --------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: 74rem;
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.bay {
  padding-block: var(--bay);
}

.bay-tight {
  padding-block: calc(var(--bay) * .62);
}

.paper {
  background: var(--paper);
}

.rule {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0;
}

/* --- Masthead ------------------------------------------------------------ */

.masthead {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--ground) 86%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}

.masthead[data-scrolled="true"] {
  border-bottom-color: var(--line);
}

.masthead-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 4.625rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: -0.024em;
  color: var(--ink);
}

/* The mark is masked rather than inlined so a single file serves every page and
   still takes its color from CSS. */
.brand-mark {
  width: 2rem;
  height: 2rem;
  flex: none;
  background: var(--aegean);
  -webkit-mask: url(../img/logo.svg) center / contain no-repeat;
  mask: url(../img/logo.svg) center / contain no-repeat;
}

.masthead-actions {
  display: flex;
  align-items: center;
  gap: clamp(.875rem, 2.5vw, 1.5rem);
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
}

.nav a {
  text-decoration: none;
  color: var(--muted);
  font-size: .9375rem;
  transition: color .15s ease;
}

.nav a:hover,
.nav a[aria-current="page"] {
  color: var(--ink);
}

/* --- Theme toggle -------------------------------------------------------- */

.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease;
}

.theme-toggle:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 8%, transparent);
}

.theme-toggle svg {
  width: 1.0625rem;
  height: 1.0625rem;
}

/* The button offers the theme you are not in. Light is the default, so the moon
   shows unless dark has been pinned - correct on the first paint, before any
   script runs. */
.theme-sun {
  display: none;
}

:root[data-theme="dark"] .theme-moon {
  display: none;
}

:root[data-theme="dark"] .theme-sun {
  display: block;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.875rem;
  padding-inline: 1.375rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--blue);
  color: #fff;
  font-family: inherit;
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: -0.008em;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity .15s ease, background-color .15s ease;
}

.btn:hover {
  opacity: .88;
}

.btn-quiet {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}

.btn-quiet:hover {
  background: var(--paper);
  opacity: 1;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  margin-top: 2.25rem;
}

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

.hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(3rem, 7vw, 4.5rem);
  align-items: center;
  padding-block: clamp(3.5rem, 8vw, 6.5rem) var(--bay);
}

@media (min-width: 62rem) {
  .hero {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  }
}

.hero-copy {
  min-width: 0;
}

.hero-note {
  margin: 2.25rem 0 0;
  font-size: .875rem;
  color: var(--muted);
}

/* --- The document ------------------------------------------------------- */
/* An honest picture of what the product produces: one PDF whose signatures are
   appended revisions inside the file, not rows in someone's database. The
   stacked edges behind the sheet are those revisions. */

.doc {
  position: relative;
  justify-self: center;
  width: min(100%, 25rem);
  aspect-ratio: 5 / 6;
}

.doc-rev {
  position: absolute;
  inset: 0;
  background: var(--sheet);
  border: 1px solid var(--sheet-line);
  border-radius: .75rem;
  box-shadow: 0 6px 18px rgba(18, 22, 28, .08);
}

.doc-rev-1 {
  transform: translate(-1.375rem, -1.125rem) rotate(-2.4deg);
  opacity: .55;
}

.doc-rev-2 {
  transform: translate(-.625rem, -.5rem) rotate(-1.1deg);
  opacity: .8;
}

/* White paper on a dark ground reads far brighter than on a light page, so the
   revisions behind the sheet have to sit back further. */
:root[data-theme="dark"] .doc-rev-1 {
  opacity: .28;
}

:root[data-theme="dark"] .doc-rev-2 {
  opacity: .5;
}

.doc-sheet {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--sheet);
  color: var(--sheet-ink);
  border: 1px solid var(--sheet-line);
  border-radius: .75rem;
  box-shadow: var(--shadow-sheet);
  padding: 1.5rem;
  overflow: hidden;
}

.doc-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--sheet-line);
}

.doc-name {
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: -0.014em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.doc-kind {
  font-family: var(--mono);
  font-size: .6875rem;
  color: var(--sheet-muted);
  flex: none;
}

.doc-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.0625rem;
  padding-block: 1.25rem;
  min-height: 0;
}

.doc-para {
  display: flex;
  flex-direction: column;
  gap: .4375rem;
}

.doc-line {
  height: .3125rem;
  border-radius: 999px;
  background: var(--sheet-line);
}

.doc-line-title {
  height: .5rem;
  width: 42%;
  background: color-mix(in srgb, var(--sheet-ink) 22%, transparent);
}

.doc-sigs {
  display: flex;
  flex-direction: column;
  gap: .625rem;
  padding-top: 1rem;
  border-top: 1px solid var(--sheet-line);
}

.doc-sig {
  display: flex;
  align-items: center;
  gap: .625rem;
  font-size: .8125rem;
  line-height: 1.35;
}

.doc-seal {
  flex: none;
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 50%;
  border: 1.5px solid var(--clay);
  color: var(--clay);
  display: grid;
  place-items: center;
}

.doc-seal svg {
  width: .8125rem;
  height: .8125rem;
}

.doc-sig-who {
  font-weight: 600;
  letter-spacing: -0.01em;
}

.doc-sig-when {
  color: var(--sheet-muted);
  font-size: .75rem;
}

.doc-foot {
  display: flex;
  align-items: center;
  gap: .4375rem;
  margin-top: 1rem;
  padding-top: .875rem;
  border-top: 1px dashed var(--sheet-line);
  font-size: .75rem;
  color: var(--clay);
}

.doc-foot svg {
  width: .875rem;
  height: .875rem;
  flex: none;
}

/* One orchestrated arrival: the revisions settle, then each signature lands. */
@media (prefers-reduced-motion: no-preference) {
  .doc-rev,
  .doc-sheet {
    animation: settle .7s cubic-bezier(.22, .8, .3, 1) backwards;
  }

  .doc-sheet {
    animation-delay: .05s;
  }

  .doc-rev-2 {
    animation-delay: .16s;
  }

  .doc-rev-1 {
    animation-delay: .27s;
  }

  .doc-sig,
  .doc-foot {
    animation: land .5s ease-out backwards;
  }

  .doc-sig-a {
    animation-delay: .62s;
  }

  .doc-sig-b {
    animation-delay: .8s;
  }

  .doc-foot {
    animation-delay: 1s;
  }
}

@keyframes settle {
  from {
    opacity: 0;
    transform: translate(0, 1.25rem) rotate(0);
  }
}

@keyframes land {
  from {
    opacity: 0;
    transform: translateY(.5rem);
  }
}

/* --- Service bands ------------------------------------------------------- */

.band {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

@media (min-width: 62rem) {
  .band {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .band-flip .band-figure {
    order: -1;
  }
}

.band + .band {
  margin-top: var(--bay);
}

.band-copy {
  min-width: 0;
}

.band-copy .h2 {
  margin-bottom: 1.25rem;
}

.band-figure {
  min-width: 0;
}

.facts {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.facts li {
  padding: .875rem 0;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 1rem;
  font-size: .9375rem;
  align-items: baseline;
}

.facts dt,
.facts .fact-key {
  color: var(--muted);
}

.facts .fact-val {
  color: var(--ink);
}

@media (max-width: 34rem) {
  .facts li {
    grid-template-columns: 1fr;
    gap: .125rem;
  }
}

/* --- Code panel ---------------------------------------------------------- */

.panel {
  background: #14171d;
  border: 1px solid #262b34;
  border-radius: .875rem;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(18, 22, 28, .14);
}

.panel-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid #262b34;
  font-family: var(--mono);
  font-size: .75rem;
  color: #8d97a6;
}

.panel-verb {
  color: #7fd0a0;
}

.panel pre {
  margin: 0;
  padding: 1.125rem 1.25rem 1.375rem;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: .8125rem;
  line-height: 1.7;
  color: #d5dae3;
  tab-size: 2;
}

.tok-key {
  color: #93b9f0;
}

.tok-str {
  color: #d3b58a;
}

.tok-num {
  color: #c4a2e0;
}

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

.steps {
  list-style: none;
  counter-reset: step;
  margin: 3rem 0 0;
  padding: 0;
  display: grid;
  gap: 2.25rem;
}

@media (min-width: 48rem) {
  .steps {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.75rem;
  }
}

.steps li {
  counter-increment: step;
  padding-top: 1.125rem;
  border-top: 1px solid var(--line);
  min-width: 0;
}

.steps li::before {
  content: counter(step);
  display: block;
  font-size: 1.75rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--blue);
  margin-bottom: .875rem;
  font-variant-numeric: lining-nums tabular-nums;
}

.steps .h3 {
  margin-bottom: .4375rem;
}

.steps p {
  margin: 0;
  font-size: .9375rem;
  color: var(--muted);
}

/* --- Hosting modes ------------------------------------------------------- */
/* Deliberately the steps' hairline-topped rhythm without the numbers: these are
   two parallel choices, not an order of events. */

.modes {
  display: grid;
  gap: 2.25rem;
  margin-top: 3rem;
}

@media (min-width: 48rem) {
  .modes {
    grid-template-columns: repeat(2, 1fr);
    gap: 3.5rem;
  }
}

.modes > div {
  padding-top: 1.125rem;
  border-top: 2px solid var(--ink);
  min-width: 0;
}

.modes .h3 {
  margin-bottom: .5rem;
}

.modes p {
  margin: 0;
  font-size: .9375rem;
  color: var(--muted);
  max-width: 30rem;
}

.tenant {
  font-family: var(--mono);
  font-size: .875em;
  color: var(--ink);
}

.facts-wide {
  margin-top: 3.5rem;
}

.facts-wide li {
  grid-template-columns: 13rem 1fr;
}

@media (max-width: 34rem) {
  .facts-wide li {
    grid-template-columns: 1fr;
  }
}

/* --- Deployment ---------------------------------------------------------- */

.grid-3 {
  display: grid;
  gap: 2.25rem;
  margin-top: 3rem;
}

@media (min-width: 48rem) {
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
    gap: 2.75rem;
  }
}

.grid-3 h3 {
  margin-bottom: .5rem;
}

.grid-3 p {
  margin: 0;
  font-size: .9375rem;
  color: var(--muted);
}

/* --- Closing call -------------------------------------------------------- */

.call {
  display: grid;
  gap: 1.75rem;
  align-items: end;
}

@media (min-width: 52rem) {
  .call {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3rem;
  }
}

.mailto {
  display: inline-block;
  font-size: clamp(1.25rem, 3.4vw, 2rem);
  font-weight: 500;
  letter-spacing: -0.028em;
  color: var(--blue);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--blue) 35%, transparent);
  padding-bottom: .125rem;
  transition: border-color .15s ease;
}

.mailto:hover {
  border-bottom-color: var(--blue);
}

/* --- Photo --------------------------------------------------------------- */

.photo {
  border-radius: 1rem;
  overflow: hidden;
  background: var(--line);
  box-shadow: 0 10px 34px rgba(18, 22, 28, .12);
}

.photo img {
  width: 100%;
  height: auto;
}

.photo-note {
  margin: .875rem 0 0;
  font-size: .8125rem;
  color: var(--muted);
}

/* --- Page head ----------------------------------------------------------- */

.pagehead {
  padding-block: clamp(3rem, 7vw, 5rem) 0;
}

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

.foot {
  border-top: 1px solid var(--line);
  padding-block: 2.5rem 3rem;
}

.foot-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  font-size: .875rem;
  color: var(--muted);
}

.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.foot a {
  color: var(--muted);
  text-decoration: none;
  transition: color .15s ease;
}

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

.skip {
  position: absolute;
  left: -9999px;
}

.skip:focus {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 50;
  background: var(--paper);
  color: var(--ink);
  padding: .75rem 1rem;
  border-radius: .5rem;
  box-shadow: 0 8px 24px rgba(18, 22, 28, .18);
}

/* --- Inline code --------------------------------------------------------- */

.prose code {
  font-family: var(--mono);
  font-size: .8125em;
  font-weight: 500;
  color: var(--ink);
}

/* --- About: photo -------------------------------------------------------- */

.photo-figure {
  margin: 0;
}

/* --- Contact ------------------------------------------------------------- */

.mailto-hero {
  margin: 2.5rem 0 0;
}

.reasons {
  list-style: none;
  margin: 3rem 0 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

@media (min-width: 48rem) {
  .reasons {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 3.5rem;
  }
}

.reasons li {
  padding-block: 1.625rem;
  border-bottom: 1px solid var(--line);
  min-width: 0;
}

.reasons .h3 {
  margin-bottom: .4375rem;
}

.reasons .h3 a {
  color: var(--blue);
  text-decoration: none;
}

.reasons .h3 a:hover {
  text-decoration: underline;
  text-underline-offset: .2em;
}

.reasons p {
  margin: 0;
  font-size: .9375rem;
  color: var(--muted);
  max-width: 32rem;
}