/* Steerwell landing page. Built from steerwell-ds tokens (tokens.css); the
   fonts are served from here, so the page loads nothing from anyone else. */

@font-face { font-family: "Newsreader"; font-weight: 400; font-style: normal; font-display: swap; src: url(fonts/newsreader-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Newsreader"; font-weight: 400; font-style: italic; font-display: swap; src: url(fonts/newsreader-latin-400-italic.woff2) format("woff2"); }
@font-face { font-family: "Newsreader"; font-weight: 500; font-style: normal; font-display: swap; src: url(fonts/newsreader-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url(fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url(fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url(fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2"); }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--sw-bg-app);
  color: var(--sw-ink);
  font-family: var(--sw-font-ui);
  font-size: 17px;
  line-height: var(--sw-leading-read);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: var(--sw-selection); }
a { color: var(--sw-accent); text-underline-offset: 3px; }
a:hover { color: var(--sw-accent-hover); }
:focus-visible { outline: 2px solid var(--sw-accent); outline-offset: 3px; border-radius: var(--sw-radius-sm); }
img { display: block; max-width: 100%; height: auto; }
code { font-family: var(--sw-font-mono); font-size: .88em; background: var(--sw-bg-sunken); border-radius: var(--sw-radius-xs); padding: 1px 5px; }

.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.wrap--wide { max-width: 1280px; }
.narrow { max-width: 760px; }
@media (max-width: 600px) { .wrap { padding: 0 16px; } }

/* The insight diamond, the logo's full stop, used as the page's one ornament. */
.diamond { display: inline-block; width: 7px; height: 7px; background: var(--sw-accent); transform: rotate(45deg); flex: none; }

/* ---------- Header ---------- */
.top { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--sw-bg-app) 88%, transparent); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid transparent; }
.top__inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.top__logo img { height: 30px; width: auto; }
/* The dark logo carries its own plate, with more room around the name: same name size, same place. */
@media (prefers-color-scheme: dark) { .top__logo img { height: 46.5px; margin: -8.25px 0 -8.25px -8.25px; } }
.top__nav { display: flex; align-items: center; gap: 28px; font-size: 15px; font-weight: 500; }
.top__nav a:not(.btn) { color: var(--sw-ink-2); text-decoration: none; }
.top__nav a:not(.btn):hover { color: var(--sw-ink); }
@media (max-width: 720px) { .top__nav a:not(.btn) { display: none; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 26px; border-radius: 10px; border: 1px solid var(--sw-line-strong);
  background: var(--sw-bg-surface); color: var(--sw-ink);
  font: inherit; font-size: 16px; font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background var(--sw-duration-fast) var(--sw-ease), border-color var(--sw-duration-fast) var(--sw-ease), transform var(--sw-duration-fast) var(--sw-ease);
}
.btn:hover { color: var(--sw-ink); background: var(--sw-bg-sunken); }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--sw-accent); border-color: var(--sw-accent); color: var(--sw-accent-fg); box-shadow: var(--sw-shadow-sm); }
.btn--primary:hover { background: var(--sw-accent-hover); border-color: var(--sw-accent-hover); color: var(--sw-accent-fg); }
.btn--ghost { background: transparent; }
.btn--small { height: 36px; padding: 0 16px; font-size: 14px; border-radius: var(--sw-radius-md); background: var(--sw-accent); border-color: var(--sw-accent); color: var(--sw-accent-fg); }
.btn--small:hover { background: var(--sw-accent-hover); color: var(--sw-accent-fg); }

/* ---------- Hero ---------- */
.hero { padding: 72px 0 40px; }
.hero__text { text-align: center; display: flex; flex-direction: column; align-items: center; }
.pill { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 28px; padding: 6px 14px 6px 12px; border: 1px solid var(--sw-accent-soft-border); background: var(--sw-accent-soft); color: var(--sw-accent-soft-fg); border-radius: var(--sw-radius-pill); font-size: 13px; font-weight: 600; letter-spacing: .02em; }
h1 {
  font-family: var(--sw-font-display); font-weight: 500;
  font-size: clamp(42px, 7.4vw, 84px); line-height: 1.02; letter-spacing: -.025em;
  margin: 0; text-wrap: balance;
}
.hero__lede { font-family: var(--sw-font-display); font-size: clamp(20px, 2.4vw, 25px); line-height: 1.45; color: var(--sw-ink-2); max-width: 640px; margin: 28px 0 36px; text-wrap: balance; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.hero__meta { margin: 18px 0 0; font-size: 14px; color: var(--sw-ink-3); }
.shot.shot--hero { margin-top: 64px; }
@media (max-width: 600px) {
  .hero { padding-top: 44px; }
  .hero__cta { width: 100%; }
  .hero__cta .btn { width: 100%; }
}

/* ---------- Screenshots in a window ---------- */
.shot {
  position: relative; margin: 0; container-type: inline-size;
  border-radius: 14px; overflow: hidden;
  border: 1px solid var(--sw-line-strong);
  box-shadow: 0 1px 2px rgba(40, 32, 20, .06), 0 24px 60px -12px rgba(40, 32, 20, .22);
  background: var(--sw-bg-chrome);
}
/* A close-up of one view, without the window around it. */
.shot--panel { background: var(--sw-bg-view); }

/* The app draws its own title bar; the window buttons sit in the gap it leaves. */
.shot__lights { position: absolute; top: calc(100cqw * 19 / 1440); left: calc(100cqw * 20 / 1440); display: flex; gap: calc(100cqw * 8 / 1440); transform: translateY(-50%); }
.shot__lights i { width: calc(100cqw * 12 / 1440); height: calc(100cqw * 12 / 1440); border-radius: 50%; background: var(--sw-traffic-close); }
.shot__lights i:nth-child(2) { background: var(--sw-traffic-min); }
.shot__lights i:nth-child(3) { background: var(--sw-traffic-max); }

/* ---------- Sections ---------- */
.section { padding: 112px 0; }
.section--tint { background: var(--sw-bg-chrome); }
@media (max-width: 600px) { .section { padding: 72px 0; } }
.eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; font-size: 13px; font-weight: 600; letter-spacing: var(--sw-tracking-label); text-transform: uppercase; color: var(--sw-accent-soft-fg); }
h2 { font-family: var(--sw-font-display); font-weight: 500; font-size: clamp(32px, 4.4vw, 50px); line-height: 1.1; letter-spacing: -.018em; margin: 0 0 24px; text-wrap: balance; }
h3 { font-size: 17px; font-weight: 600; margin: 0 0 6px; }
.body { color: var(--sw-ink-2); margin: 0 0 16px; max-width: 60ch; text-wrap: pretty; }

.cards { list-style: none; padding: 0; margin: 44px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.cards li { background: var(--sw-bg-surface); border: 1px solid var(--sw-line); border-radius: var(--sw-radius-xl); padding: 24px 22px 26px; }
.cards p { margin: 0; color: var(--sw-ink-2); font-size: 15.5px; line-height: 1.55; }
@media (max-width: 980px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cards { grid-template-columns: 1fr; gap: 14px; } }
.undo { margin: 28px 0 56px; color: var(--sw-ink-2); font-size: 15.5px; }

.pair { display: grid; grid-template-columns: 1.15fr 1fr; gap: 28px; align-items: start; }
.pair .shot:last-child { margin-top: 64px; }
@media (max-width: 800px) { .pair { grid-template-columns: 1fr; } .pair .shot:last-child { margin-top: 0; } }

.split { display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: center; }
.split--flip { grid-template-columns: 1.25fr 1fr; }
@media (max-width: 900px) { .split, .split--flip { grid-template-columns: 1fr; gap: 40px; } .split--flip > .shot { order: 2; } }

.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.facts > div { background: var(--sw-bg-surface); border: 1px solid var(--sw-line); border-radius: var(--sw-radius-xl); padding: 26px 26px 28px; }
.facts p { margin: 0; color: var(--sw-ink-2); font-size: 15.5px; line-height: 1.55; }
@media (max-width: 860px) { .facts { grid-template-columns: 1fr; } }

.install { list-style: none; counter-reset: step; padding: 0; margin: 36px 0 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.install li { counter-increment: step; position: relative; padding: 22px 24px 22px 76px; background: var(--sw-bg-surface); border: 1px solid var(--sw-line); border-radius: var(--sw-radius-xl); }
.install li::before { content: counter(step); position: absolute; left: 24px; top: 20px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--sw-accent-soft); color: var(--sw-accent-soft-fg); font-family: var(--sw-font-mono); font-size: 14px; font-weight: 500; }
.install p { margin: 0; color: var(--sw-ink-2); font-size: 15.5px; line-height: 1.6; }
.install strong { color: var(--sw-ink); font-weight: 600; }
@media (max-width: 560px) { .install li { padding: 64px 18px 20px; } .install li::before { left: 18px; top: 20px; } }

.section--cta { padding-top: 40px; }
.cta { text-align: center; display: flex; flex-direction: column; align-items: center; }
.cta .body { margin-bottom: 32px; }

/* ---------- Pricing ---------- */
.plans { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 760px; }
.plans li { background: var(--sw-bg-surface); border: 1px solid var(--sw-line); border-radius: var(--sw-radius-xl); padding: 26px 26px 28px; }
.plans li p { margin: 0; color: var(--sw-ink-2); font-size: 15.5px; line-height: 1.55; }
.plans .plans__price { margin: 6px 0 12px; color: var(--sw-ink-2); font-size: 16px; }
.plans__price strong { font-family: var(--sw-font-display); font-weight: 500; font-size: 48px; line-height: 1; letter-spacing: -.02em; color: var(--sw-ink); margin-right: 6px; }
.plans__note { margin: 24px 0 0; max-width: 760px; color: var(--sw-ink-3); font-size: 15px; text-wrap: pretty; }
.plans__early { display: flex; align-items: baseline; gap: 12px; margin: 24px 0 0; max-width: 760px; padding: 16px 20px; border: 1px solid var(--sw-accent-soft-border); background: var(--sw-accent-soft); border-radius: var(--sw-radius-xl); color: var(--sw-ink); font-size: 15.5px; }
.plans__early .diamond { transform: translateY(-2px) rotate(45deg); }
.plans__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
@media (max-width: 600px) {
  .plans { grid-template-columns: 1fr; gap: 14px; }
  .plans__cta .btn { width: 100%; }
}

/* ---------- Licences and source code ---------- */
.legal { padding-top: 72px; }
.legal__title { font-size: clamp(36px, 5.4vw, 56px); margin-bottom: 28px; }
.legal__h { font-size: clamp(24px, 3vw, 30px); margin: 56px 0 14px; }
.legal__file { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 20px; margin: 20px 0 0; padding: 20px 22px; background: var(--sw-bg-surface); border: 1px solid var(--sw-line); border-radius: var(--sw-radius-xl); font-size: 15px; }
.legal__file dt { color: var(--sw-ink-3); font-weight: 500; }
.legal__file dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.legal__file code { background: none; padding: 0; }
.legal__build { margin: 20px 0 24px; padding: 20px 22px; overflow-x: auto; background: var(--sw-bg-terminal); border: 1px solid var(--sw-line-strong); border-radius: var(--sw-radius-xl); font-family: var(--sw-font-mono); font-size: 13.5px; line-height: 1.65; }
.legal__build code { background: none; padding: 0; font-size: inherit; }
/* A long path in a sentence wraps rather than widening the page on a phone. */
.legal .body code { overflow-wrap: anywhere; }
@media (max-width: 560px) { .legal__file { grid-template-columns: 1fr; gap: 2px; } .legal__file dd + dt { margin-top: 10px; } }

/* ---------- Terms, privacy, refunds, EULA ---------- */
.legal__date { margin: -12px 0 28px; color: var(--sw-ink-3); font-size: 14px; }
.legal__text h2 { font-family: var(--sw-font-ui); font-size: 19px; font-weight: 600; letter-spacing: 0; margin: 40px 0 10px; }
.legal__text p, .legal__text li { color: var(--sw-ink-2); max-width: 66ch; text-wrap: pretty; overflow-wrap: anywhere; }
.legal__text p { margin: 0 0 14px; }
.legal__text ul { margin: 0 0 14px; padding-left: 22px; }
.legal__text li { margin: 0 0 6px; }
.legal__text strong { color: var(--sw-ink); font-weight: 600; }
mark { background: var(--sw-selection); color: var(--sw-ink); border-radius: var(--sw-radius-xs); padding: 0 3px; }

/* ---------- Footer ---------- */
.foot { border-top: 1px solid var(--sw-line); padding: 36px 0 44px; }
.foot__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.foot p { margin: 0; font-size: 14px; color: var(--sw-ink-3); }
.foot__links { display: flex; flex-wrap: wrap; gap: 6px 18px; width: 100%; font-size: 14px; }
.foot__links a { color: var(--sw-ink-3); }
.foot__links a:hover { color: var(--sw-ink); }
.foot img { height: 36px; width: auto; }