/* ---------------------------------------------------------------------------
   Solaren — the public marketing site
   ---------------------------------------------------------------------------
   Hand-written, with no Tailwind and no build, for the reason the client
   sign-in page gives: three of Solaren's surfaces are applications and earn a
   bundle; this one is prose. A fourth Vite target would add a lockfile
   dependency and a hundred kilobytes of framework to render text, on the one
   page most likely to be opened on a phone on mobile data.

   The palette is the client surfaces' own — one indigo accent over four
   neutrals — so somebody who reads this page and then signs in does not meet
   two companies. Anything between two of the neutrals is a `color-mix`, so
   there is no fifth grey. One extra tone exists, `--ps-sun`, and it is used in
   exactly two places: the step numerals and the connected state pill.

   Three layout rules are not negotiable: no element may make the document
   scroll sideways at 375px, every interactive target is at least 44px in its
   smallest dimension, and the type scale is `clamp()`ed rather than switched at
   a breakpoint so there is no width at which a heading is briefly wrong.

   `dashboard/ui/scripts/public_site_e2e.mjs` measures all three, in Chromium,
   against this file, at 375, 430, 768 and 1440 -- and measures a fourth rule
   this file cannot state on its own: every run of text on the page meets WCAG
   AA contrast against whatever is actually painted behind it. Two of the
   palette tokens below carry the tone that run produced rather than the one
   that was chosen. See docs/SOLAREN_PUBLIC_SITE_BROWSER_ACCEPTANCE_V1.md.

   Light only. `color-scheme: light` is declared in the head, matching the
   funnel shell and the sign-in page.
--------------------------------------------------------------------------- */

:root {
  --ps-accent: #3b5bdb;
  --ps-accent-deep: #22357f;
  --ps-accent-ink: #ffffff;
  --ps-accent-tint: color-mix(in srgb, var(--ps-accent) 8%, transparent);
  --ps-accent-edge: color-mix(in srgb, var(--ps-accent) 28%, transparent);
  /* Measured, not chosen: #c2610f reached 3.91:1 on --ps-surface, which is
     below AA for the step numerals, the unavailable-action note and the
     footer's unpublished-documents line. This is the same hue at 4.97:1. */
  --ps-sun: #a8540a;

  --ps-ink: #14161c;
  --ps-deep: #0d1017;
  --ps-muted: #5c6270;
  /* #868c9a measured 3.14:1 on --ps-surface. Everything it is used for is
     still text somebody has to read -- a disabled control's label, the FAQ
     chevron -- so it is darkened to 4.96:1 rather than reserved for decoration. */
  --ps-faint: #656b7c;
  --ps-surface: #f7f7f5;
  --ps-card: #ffffff;
  --ps-border: rgba(20, 22, 28, 0.1);
  --ps-border-strong: rgba(20, 22, 28, 0.18);
  --ps-on-deep: #eef0f4;
  --ps-on-deep-muted: #a7adbb;

  --ps-wrap: 1120px;
  --ps-gutter: 20px;
  --ps-radius: 14px;
  --ps-radius-lg: 22px;
  --ps-top-height: 64px;

  --ps-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --ps-shadow: 0 1px 2px rgba(20, 22, 28, 0.04),
    0 18px 40px -28px rgba(20, 22, 28, 0.38);
  --ps-shadow-lift: 0 2px 4px rgba(20, 22, 28, 0.05),
    0 28px 60px -32px rgba(20, 22, 28, 0.45);

  color-scheme: light;
}

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

html {
  /* The single failure that ruins a phone: one wide child making the whole
     document scroll sideways. Every long token on this page is copy. */
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

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

body.ps {
  margin: 0;
  background: var(--ps-surface);
  color: var(--ps-ink);
  font-family: var(--ps-font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 640;
  letter-spacing: -0.021em;
  line-height: 1.12;
  text-wrap: balance;
}

p {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
}

:where(a, button, summary):focus-visible {
  outline: 3px solid var(--ps-accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* --- shell ---------------------------------------------------------------- */

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

.ps-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 60;
  padding: 12px 18px;
  background: var(--ps-deep);
  color: var(--ps-on-deep);
  text-decoration: none;
  border-radius: 0 0 10px 0;
}

.ps-skip:focus {
  left: 0;
}

.ps-main {
  display: block;
}

/* The sticky bar overlaps an anchored section by its own height. */
[id] {
  scroll-margin-top: calc(var(--ps-top-height) + 12px);
}

/* --- masthead ------------------------------------------------------------- */

.ps-top {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--ps-surface) 88%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease;
}

.ps-top.is-stuck {
  border-bottom-color: var(--ps-border);
}

.ps-top__wrap {
  min-height: var(--ps-top-height);
  display: flex;
  align-items: center;
  gap: 16px;
}

.ps-mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-inline-end: auto;
  color: var(--ps-ink);
  text-decoration: none;
  font-weight: 680;
  letter-spacing: -0.01em;
}

.ps-mark__glyph {
  width: 26px;
  height: 26px;
  color: var(--ps-accent);
  flex: none;
}

.ps-mark__word {
  font-size: 19px;
}

.ps-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.ps-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 10px;
  color: var(--ps-muted);
  font-size: 15px;
  font-weight: 520;
  text-decoration: none;
}

.ps-nav__link:hover {
  color: var(--ps-ink);
  background: color-mix(in srgb, var(--ps-ink) 5%, transparent);
}

.ps-menu {
  display: none;
  min-height: 44px;
  min-width: 44px;
  padding: 0 16px;
  border: 1px solid var(--ps-border-strong);
  border-radius: 11px;
  background: var(--ps-card);
  color: var(--ps-ink);
  font: inherit;
  font-size: 15px;
  font-weight: 560;
  cursor: pointer;
}

.ps-drawer {
  border-top: 1px solid var(--ps-border);
  background: var(--ps-surface);
  padding: 10px var(--ps-gutter) 18px;
}

.ps-drawer[hidden] {
  display: none;
}

.ps-drawer__nav {
  display: grid;
  gap: 2px;
  margin-bottom: 12px;
}

.ps-drawer .ps-nav__link {
  font-size: 17px;
  padding-inline: 4px;
}

.ps-drawer .ps-btn {
  width: 100%;
}

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

.ps-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 12px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.ps-btn--small {
  min-height: 44px;
  padding: 0 18px;
  font-size: 15px;
}

.ps-btn--go {
  background: var(--ps-accent);
  color: var(--ps-accent-ink);
  box-shadow: 0 1px 2px rgba(20, 22, 28, 0.12),
    0 14px 30px -18px color-mix(in srgb, var(--ps-accent) 70%, transparent);
}

.ps-btn--go:hover {
  background: var(--ps-accent-deep);
}

.ps-btn--go:active {
  transform: translateY(1px);
}

.ps-btn--quiet {
  border: 1px solid var(--ps-border-strong);
  background: var(--ps-card);
  color: var(--ps-ink);
}

.ps-btn--quiet:hover {
  border-color: var(--ps-accent-edge);
}

.ps-btn--off {
  background: color-mix(in srgb, var(--ps-ink) 8%, transparent);
  color: var(--ps-faint);
  box-shadow: none;
  cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
  .ps-btn {
    transition: none;
  }
}

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

.ps-hero {
  position: relative;
  background: var(--ps-deep);
  color: var(--ps-on-deep);
  overflow: hidden;
}

/* One quiet light source behind the headline. Not a gradient wash: a single
   soft radial that stops well before the edges, so the band still reads as a
   solid ink surface rather than as decoration.

   The box is the whole band and the falloff happens inside it. An inset box
   smaller than the band leaves its own rectangle visible wherever the gradient
   has not reached zero by the edge -- which at 1440px drew a hard horizontal
   seam across the hero, read as a rendering artefact rather than as light. */
.ps-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    120% 90% at 18% 88%,
    color-mix(in srgb, var(--ps-accent) 34%, transparent),
    transparent 62%
  );
  pointer-events: none;
}

.ps-hero__wrap {
  position: relative;
  padding-block: clamp(72px, 12vw, 132px) clamp(64px, 10vw, 112px);
  max-width: 940px;
}

.ps-hero__title {
  font-size: clamp(2.15rem, 6.2vw, 3.9rem);
  letter-spacing: -0.03em;
  margin-block: 18px 0;
}

.ps-hero__body {
  margin-top: 22px;
  max-width: 44rem;
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  line-height: 1.55;
  color: var(--ps-on-deep-muted);
}

.ps-hero .ps-eyebrow {
  color: color-mix(in srgb, var(--ps-accent) 45%, #ffffff);
}

.ps-hero .ps-actions {
  margin-top: 34px;
}

.ps-hero .ps-btn--quiet {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.24);
  color: var(--ps-on-deep);
}

.ps-hero .ps-btn--quiet:hover {
  border-color: rgba(255, 255, 255, 0.5);
}

/* An unavailable action on an ink band. The light-surface disabled tone
   measured 3.56:1 here, which is a control a visitor is specifically being
   asked to read -- it is the one that explains why it cannot be used. */
.ps-hero .ps-btn--off,
.ps-band--cta .ps-btn--off {
  background: rgba(255, 255, 255, 0.09);
  color: var(--ps-on-deep-muted);
}

.ps-hero .ps-note {
  color: var(--ps-on-deep-muted);
}

.ps-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* The notes carry the limits on the claims above them -- what is not
   estimated, what is not published, what is checked before a message is sent.
   Setting the qualifier in the faintest tone on the page measured 3.14:1 and
   read as small print; it is the same weight of statement as the claim it
   qualifies, so it is set in the same tone as the rest of the body copy. */
.ps-note {
  margin-top: 18px;
  max-width: 46rem;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ps-muted);
}

.ps-note--warn {
  color: var(--ps-sun);
  font-weight: 560;
}

/* --- section furniture ---------------------------------------------------- */

.ps-eyebrow {
  font-size: 13px;
  font-weight: 640;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ps-accent);
}

.ps-band {
  padding-block: clamp(56px, 8vw, 104px);
  border-top: 1px solid var(--ps-border);
  background: var(--ps-surface);
}

.ps-band--grid,
.ps-band--systems {
  background: var(--ps-card);
}

.ps-head {
  max-width: 46rem;
  margin-bottom: clamp(32px, 4vw, 52px);
}

.ps-head__title {
  font-size: clamp(1.7rem, 3.9vw, 2.6rem);
  margin-block: 14px 0;
}

.ps-lede {
  margin-top: 16px;
  font-size: clamp(1rem, 1.9vw, 1.15rem);
  color: var(--ps-muted);
}

/* --- cards ---------------------------------------------------------------- */

.ps-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 268px), 1fr));
}

.ps-card {
  padding: 26px 24px;
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius);
  background: var(--ps-surface);
}

.ps-band--grid .ps-card {
  background: var(--ps-card);
  box-shadow: var(--ps-shadow);
}

.ps-card__title {
  font-size: 1.12rem;
  letter-spacing: -0.012em;
}

.ps-card__body {
  margin-top: 10px;
  color: var(--ps-muted);
  font-size: 15.5px;
}

.ps-points {
  display: grid;
  gap: 9px;
  margin-top: 14px;
}

.ps-points li {
  position: relative;
  padding-left: 22px;
  color: var(--ps-muted);
  font-size: 15.5px;
  line-height: 1.5;
}

.ps-points li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.6em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--ps-accent-edge);
}

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

.ps-steps {
  display: grid;
  gap: 4px;
  counter-reset: none;
}

.ps-step {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 8px;
  align-items: start;
  padding: 26px 0;
  border-top: 1px solid var(--ps-border);
}

.ps-step:first-child {
  border-top: 0;
}

.ps-step__n {
  font-size: 1.45rem;
  font-weight: 680;
  letter-spacing: -0.02em;
  color: var(--ps-sun);
  font-variant-numeric: tabular-nums;
}

.ps-step__title {
  font-size: 1.22rem;
}

.ps-step__text {
  margin-top: 10px;
  max-width: 44rem;
  color: var(--ps-muted);
}

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

.ps-plans {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  align-items: start;
}

.ps-plan {
  padding: 32px 28px;
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius-lg);
  background: var(--ps-card);
  box-shadow: var(--ps-shadow);
}

.ps-plan--lead {
  border-color: var(--ps-accent-edge);
  background: linear-gradient(
    180deg,
    var(--ps-accent-tint),
    color-mix(in srgb, var(--ps-card) 96%, transparent) 180px
  );
  box-shadow: var(--ps-shadow-lift);
}

.ps-plan__name {
  font-size: 1.6rem;
}

.ps-plan__adds {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 620;
  letter-spacing: 0.01em;
  color: var(--ps-accent);
}

.ps-plan__summary {
  margin-top: 12px;
  color: var(--ps-muted);
}

.ps-plan__list {
  display: grid;
  gap: 12px;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--ps-border);
}

.ps-plan__list li {
  position: relative;
  padding-left: 30px;
  font-size: 15.5px;
  line-height: 1.5;
}

.ps-plan__list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.44em;
  width: 13px;
  height: 7px;
  border-left: 2.5px solid var(--ps-accent);
  border-bottom: 2.5px solid var(--ps-accent);
  transform: rotate(-45deg);
}

/* --- features ------------------------------------------------------------- */

/* 300px left the four-card Growth section laid out three-and-one at 1440px,
   with two thirds of the last row empty. 240px fits four tracks in the 1080px
   content column and leaves the three-card sections at three, because
   `auto-fit` collapses the track nothing lands in. */
.ps-facts {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.ps-fact {
  padding: 26px 24px;
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius);
  background: var(--ps-card);
}

.ps-fact__title {
  font-size: 1.1rem;
  letter-spacing: -0.012em;
}

.ps-fact__body {
  margin-top: 10px;
  color: var(--ps-muted);
  font-size: 15.5px;
}

/* --- systems -------------------------------------------------------------- */

.ps-systems {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.ps-system {
  padding: 24px;
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius);
  background: var(--ps-surface);
}

.ps-state {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 680;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ps-system--connected .ps-state {
  background: color-mix(in srgb, var(--ps-accent) 12%, transparent);
  color: var(--ps-accent-deep);
}

.ps-system--planned .ps-state {
  background: color-mix(in srgb, var(--ps-ink) 7%, transparent);
  color: var(--ps-muted);
}

.ps-system--planned {
  border-style: dashed;
}

.ps-system__name {
  margin-top: 14px;
  font-size: 1.1rem;
}

.ps-system__text {
  margin-top: 8px;
  color: var(--ps-muted);
  font-size: 15.5px;
}

/* --- questions ------------------------------------------------------------ */

.ps-faq {
  display: grid;
  max-width: 54rem;
}

.ps-q details {
  border-top: 1px solid var(--ps-border);
}

.ps-q:last-child details {
  border-bottom: 1px solid var(--ps-border);
}

.ps-q summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 62px;
  padding: 14px 0;
  cursor: pointer;
  list-style: none;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.008em;
}

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

.ps-q summary::after {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  margin-right: 4px;
  border-right: 2px solid var(--ps-faint);
  border-bottom: 2px solid var(--ps-faint);
  transform: translateY(-3px) rotate(45deg);
  transition: transform 180ms ease;
}

.ps-q details[open] summary::after {
  transform: translateY(2px) rotate(-135deg);
}

.ps-q__answer {
  padding-bottom: 22px;
}

.ps-q__body {
  max-width: 46rem;
  color: var(--ps-muted);
}

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

.ps-band--cta {
  background: var(--ps-deep);
  color: var(--ps-on-deep);
  border-top: 0;
}

/* The closing band is the one place on the page where a left-aligned column
   left half of a 1440px screen empty and read as a fragment rather than as a
   close. It is centred from the width the two-column layouts start at. */
.ps-band--cta .ps-head {
  max-width: 40rem;
  margin-bottom: 30px;
}

@media (min-width: 900px) {
  .ps-band--cta .ps-wrap {
    display: grid;
    justify-items: center;
    text-align: center;
  }

  .ps-band--cta .ps-head {
    margin-inline: auto;
  }

  .ps-band--cta .ps-actions {
    justify-content: center;
  }

  .ps-band--cta .ps-note {
    text-align: center;
  }
}

.ps-band--cta .ps-lede {
  color: var(--ps-on-deep-muted);
}

.ps-band--cta .ps-eyebrow {
  color: color-mix(in srgb, var(--ps-accent) 45%, #ffffff);
}

.ps-band--cta .ps-note {
  color: var(--ps-on-deep-muted);
}

/* --- legal and prose pages ------------------------------------------------ */

.ps-operator {
  margin: 0;
  padding: 16px var(--ps-gutter);
  background: color-mix(in srgb, var(--ps-sun) 12%, var(--ps-card));
  border-block: 1px solid color-mix(in srgb, var(--ps-sun) 38%, transparent);
  color: #6b370a;
  font-size: 15px;
  font-weight: 560;
}

.ps-band--prose {
  border-top: 0;
  background: var(--ps-card);
  min-height: 52vh;
}

.ps-prose__title {
  font-size: clamp(1.9rem, 4.6vw, 2.8rem);
}

.ps-prose {
  display: grid;
  gap: 18px;
  max-width: 42rem;
  margin-top: 26px;
}

.ps-prose__p {
  color: var(--ps-muted);
}

.ps-prose__p:first-child {
  color: var(--ps-ink);
  font-size: 1.12rem;
}

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

.ps-foot {
  padding-block: 40px 52px;
  border-top: 1px solid var(--ps-border);
  background: var(--ps-surface);
}

.ps-foot__wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
}

.ps-foot__mark {
  font-weight: 620;
  margin-inline-end: auto;
}

.ps-foot__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.ps-foot__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  color: var(--ps-muted);
  font-size: 15px;
  text-decoration: none;
}

.ps-foot__link:hover {
  color: var(--ps-ink);
  text-decoration: underline;
}

.ps-foot__contact {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ps-muted);
  font-size: 15px;
}

.ps-foot__pending {
  max-width: var(--ps-wrap);
  margin: 10px auto 0;
  padding-inline: var(--ps-gutter);
  color: var(--ps-sun);
  font-size: 14px;
  font-weight: 560;
}

/* --- the phone action dock ------------------------------------------------ */
/* Shipped `hidden` and revealed only by `site.js`, below the navigation
   breakpoint, once the hero's own action has scrolled out of view. The page is
   fifteen thousand pixels tall at 375px and the masthead has no room for a
   button beside the menu at that width, so without this the only control a
   reader in the middle of the page can reach is `Menu`. */

.ps-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  padding: 10px var(--ps-gutter) calc(10px + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--ps-surface) 92%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  border-top: 1px solid var(--ps-border);
}

.ps-dock[hidden] {
  display: none;
}

.ps-dock__wrap {
  max-width: var(--ps-wrap);
  margin: 0 auto;
}

.ps-btn--dock {
  width: 100%;
}

/* The dock covers the foot of the page while it is open, so the document makes
   room for it rather than hiding the last line of the footer behind it. */
html[data-dock="on"] .ps-foot {
  padding-bottom: calc(52px + 72px + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 900px) {
  .ps-dock {
    display: none;
  }
}

/* --- motion --------------------------------------------------------------- */
/* Only ever active once the script has set `data-motion`, so a page with no
   JavaScript is fully visible and nothing here can hide content. */

html[data-motion="on"] [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
}

html[data-motion="on"] [data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition: opacity 520ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --- widths --------------------------------------------------------------- */

@media (max-width: 899px) {
  .ps-top .ps-nav,
  .ps-top > .ps-wrap > .ps-btn {
    display: none;
  }

  .ps-menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .ps-step {
    grid-template-columns: 52px 1fr;
  }

  .ps-step__n {
    font-size: 1.2rem;
  }
}

@media (min-width: 900px) {
  .ps-drawer {
    display: none;
  }
}

@media (max-width: 480px) {
  :root {
    --ps-gutter: 18px;
  }

  body.ps {
    font-size: 16px;
  }

  .ps-actions .ps-btn {
    width: 100%;
  }

  .ps-plan,
  .ps-card,
  .ps-fact,
  .ps-system {
    padding-inline: 20px;
  }
}