/* IP Lift — marketing site.
 *
 * One stylesheet, no build step, no framework. The page it dresses is served
 * from S3 as plain files, so every byte here is one the browser fetches before
 * it can paint: there is no CDN round-trip for a framework, no webfont blocking
 * first paint, and no JavaScript required to render anything above the fold.
 *
 * Conventions:
 *   - Tokens on :root, re-stated under prefers-color-scheme: dark.
 *   - Layout via CSS grid. `auto-fit` where the column count is genuinely a
 *     consequence of available width; an explicit count with breakpoints where
 *     it is a design decision — the feature cards read as two rows of three,
 *     and letting auto-fit make it four-and-two on a wide screen was a bug.
 *   - Nothing here depends on class order, so sections can be reordered in the
 *     HTML without touching this file.
 */

/* ---------- tokens ---------- */
:root {
  --brand: #3366ff;
  --brand-dark: #2952cc;
  --brand-tint: #eef2ff;

  --ink: #101426;
  --ink-soft: #4a5168;
  --ink-faint: #767d94;

  --bg: #ffffff;
  --bg-alt: #f6f8fc;
  --bg-sunk: #eef1f7;

  --line: #e2e7f0;
  --line-strong: #cbd3e2;

  --ok: #17875b;
  --warn: #9a6700;

  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(16, 20, 38, .05), 0 12px 28px -12px rgba(16, 20, 38, .16);
  --shadow-lift: 0 2px 4px rgba(16, 20, 38, .06), 0 24px 48px -20px rgba(16, 20, 38, .28);

  --measure: 68ch;
  --gap: clamp(1rem, 2.5vw, 1.75rem);
  --section-y: clamp(3.5rem, 8vw, 6.5rem);

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --brand: #6b90ff;
    --brand-dark: #8aa7ff;
    --brand-tint: #18203a;

    --ink: #eef1f8;
    --ink-soft: #b3bbd0;
    --ink-faint: #8790a8;

    --bg: #0d1019;
    --bg-alt: #141926;
    --bg-sunk: #1b2131;

    --line: #262d3f;
    --line-strong: #39425a;

    --ok: #4ec08c;
    --warn: #d9a441;

    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 28px -12px rgba(0, 0, 0, .6);
    --shadow-lift: 0 2px 4px rgba(0, 0, 0, .45), 0 24px 48px -20px rgba(0, 0, 0, .75);
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchored sections must clear the sticky header. */
  scroll-padding-top: 5.5rem;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--brand); text-underline-offset: .18em; }
a:hover { color: var(--brand-dark); }

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  line-height: 1.15;
  letter-spacing: -.02em;
  font-weight: 680;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 1.2rem + 3.6vw, 3.9rem); letter-spacing: -.032em; }
h2 { font-size: clamp(1.6rem, 1.1rem + 1.9vw, 2.5rem); }
h3 { font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem); }
p  { margin: 0 0 1rem; max-width: var(--measure); text-wrap: pretty; }

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

/* ---------- layout ---------- */
.wrap {
  width: min(100% - 2.5rem, 1120px);
  margin-inline: auto;
}
.section { padding-block: var(--section-y); }
.section--alt { background: var(--bg-alt); border-block: 1px solid var(--line); }

.section__lede {
  max-width: 62ch;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.section__lede p { color: var(--ink-soft); font-size: 1.08em; }

.eyebrow {
  display: inline-block;
  margin-bottom: .9rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand);
}

.grid { display: grid; gap: var(--gap); }
/* `min(320px, 100%)` rather than a bare 320px: a minmax() floor wider than its
   container cannot shrink, so on a 320px phone (280px of content width) the
   track stayed 320px and pushed the page sideways. The min() caps the floor at
   the space actually available, which keeps the auto-fit behavior everywhere it
   fits and collapses cleanly where it does not. Same failure the footer grid
   had. */
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }

/* Explicitly three across, not `auto-fit`. With six cards, auto-fit packs four
   onto a wide viewport and leaves two stranded on the second row, and the count
   changes as the window resizes. Both the feature grid and the pricing tiers
   are written to be read three at a time, so the column count is a design
   decision rather than a consequence of the available width.
   `minmax(0, 1fr)` rather than `1fr`: a grid track's default minimum is
   `auto`, which refuses to shrink below its content and lets one long
   unbreakable word push the row wider than its container. */
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 580px) {
  .grid--3 { grid-template-columns: minmax(0, 1fr); }
}

/* Pricing holds three across further down than the feature cards do. Three
   tiers side by side is how a price comparison is read, and the intermediate
   two-column step strands the third tier alone on a row — which reads as a
   lesser option rather than a third peer. The tiers carry short feature lists,
   so they take the narrower column without crowding; below that they go
   straight to one. */
@media (max-width: 900px) {
  .grid--3.tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .grid--3.tiers { grid-template-columns: minmax(0, 1fr); }
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: .75rem 1.1rem;
  background: var(--brand);
  color: #fff;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

/* ---------- header ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.header__bar {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: 4.25rem;
}
.brand { display: flex; align-items: center; gap: .6rem; margin-right: auto; text-decoration: none; }
.brand img, .brand svg { height: 30px; width: auto; }
.brand__name { font-weight: 700; letter-spacing: -.02em; color: var(--ink); font-size: 1.15rem; }

.nav { display: flex; align-items: center; gap: .35rem; }
.nav a {
  padding: .5rem .75rem;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  font-weight: 550;
  font-size: .95rem;
  text-decoration: none;
}
.nav a:hover { color: var(--ink); background: var(--bg-sunk); }

.nav-toggle {
  display: none;
  padding: .55rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: absolute;
    inset: 100% 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: .2rem;
    padding: .75rem 1.25rem 1.25rem;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
  }
  .nav[hidden] { display: none; }
  .nav a { padding: .7rem .5rem; font-size: 1rem; }
  .nav .btn { margin-top: .4rem; text-align: center; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .72rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font: inherit;
  font-weight: 620;
  font-size: .97rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, background-color .15s ease, border-color .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-dark); color: #fff; }
.btn--ghost { border-color: var(--line-strong); color: var(--ink); background: transparent; }
.btn--ghost:hover { background: var(--bg-sunk); color: var(--ink); }
.btn--lg { padding: .9rem 1.6rem; font-size: 1.03rem; }
.btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

/* ---------- hero ---------- */
.hero { padding-block: clamp(3rem, 7vw, 5.5rem) var(--section-y); }
.hero__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
}
@media (max-width: 940px) { .hero__grid { grid-template-columns: 1fr; } }

.hero__sub {
  font-size: clamp(1.06rem, 1rem + .45vw, 1.25rem);
  color: var(--ink-soft);
  max-width: 54ch;
  margin-bottom: 1.75rem;
}
.hero__note { font-size: .9rem; color: var(--ink-faint); margin: 1rem 0 0; }

/* The deliverable, drawn rather than screenshotted: a screenshot of a product
   mid-change dates the page the moment the UI moves, and these have to keep
   being true. */
.doc-preview {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}
.doc-preview__chrome {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .7rem .9rem;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--line);
}
.doc-preview__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.doc-preview__file {
  margin-left: .5rem;
  font-family: var(--font-mono);
  font-size: .76rem;
  color: var(--ink-faint);
}
.doc-preview__body { padding: 1.4rem 1.5rem 1.6rem; }
.doc-preview__title { font-weight: 700; font-size: 1.02rem; margin-bottom: 1.1rem; letter-spacing: -.01em; }

.doc-line { height: .5rem; border-radius: 3px; background: var(--bg-sunk); margin-bottom: .5rem; }
.doc-section { margin-bottom: 1.15rem; }
.doc-section__label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: .45rem;
}

/* ---------- cards ---------- */
.card {
  padding: 1.6rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.card--flat { background: transparent; border-color: transparent; padding: 0; }
.card h3 { margin-bottom: .4rem; }
.card p { color: var(--ink-soft); margin-bottom: 0; font-size: .97rem; }

.icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 1rem;
  border-radius: 11px;
  background: var(--brand-tint);
  color: var(--brand);
}
.icon svg { width: 21px; height: 21px; }

/* ---------- steps ---------- */
.steps { counter-reset: step; list-style: none; margin: 0; padding: 0; }
.steps > li {
  counter-increment: step;
  position: relative;
  padding-left: 3.4rem;
  margin-bottom: 1.9rem;
}
.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -.1rem;
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
}
.steps h3 { margin-bottom: .25rem; }
.steps p { color: var(--ink-soft); margin-bottom: 0; }

/* ---------- ideakey ---------- */
.key-card {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.key-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  padding-bottom: 1rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--line);
}
.key-card__title { font-weight: 700; font-size: 1.08rem; margin-right: auto; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .6rem;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 650;
  letter-spacing: .01em;
}
.badge--ok { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.badge--brand { background: var(--brand-tint); color: var(--brand); }

.kv { display: grid; grid-template-columns: max-content 1fr; gap: .55rem 1.25rem; margin: 0; font-size: .94rem; }
.kv dt { color: var(--ink-faint); }
.kv dd { margin: 0; color: var(--ink); font-weight: 550; }
.kv dd.mono { font-family: var(--font-mono); font-size: .87rem; }

/* ---------- pricing ---------- */
.tiers { align-items: stretch; }
.tier {
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.tier--featured {
  border-color: var(--brand);
  box-shadow: var(--shadow-lift);
  position: relative;
}
.tier--featured::after {
  content: "Most popular";
  position: absolute;
  top: -.7rem;
  left: 1.75rem;
  padding: .18rem .6rem;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.tier__name { font-size: 1.05rem; font-weight: 700; margin-bottom: .15rem; }
.tier__for { color: var(--ink-faint); font-size: .88rem; margin-bottom: 1.1rem; }
.tier__price { display: flex; align-items: baseline; gap: .3rem; margin-bottom: .25rem; }
.tier__amount { font-size: 2.4rem; font-weight: 700; letter-spacing: -.035em; }
.tier__period { color: var(--ink-faint); font-size: .92rem; }
/* Words where a number would go: sized to sit on the price line without
   wrapping the card the way a 2.4rem sentence would. */
.tier__amount--text { font-size: 1.45rem; line-height: 1.25; }
.tier__list { list-style: none; margin: 1.25rem 0 1.75rem; padding: 0; display: grid; gap: .6rem; }
.tier__list li { display: flex; gap: .6rem; align-items: flex-start; font-size: .95rem; color: var(--ink-soft); }
.tier__list svg { flex: none; width: 17px; height: 17px; margin-top: .28rem; color: var(--ok); }
.tier .btn { margin-top: auto; width: 100%; }

/* A price nobody has set yet must look unset, not like a number to plan
   around. */
.tbd { color: var(--ink-faint); font-style: normal; }

/* ---------- faq ---------- */
.faq { max-width: 76ch; }
.faq details {
  border-bottom: 1px solid var(--line);
  padding: 1.05rem 0;
}
.faq summary {
  cursor: pointer;
  font-weight: 620;
  font-size: 1.02rem;
  list-style: none;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  margin-left: auto;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--ink-faint);
  font-weight: 400;
}
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: .85rem 0 0; color: var(--ink-soft); font-size: .97rem; }

/* ---------- forms ---------- */
.form { display: grid; gap: .9rem; max-width: 30rem; }
.field { display: grid; gap: .35rem; }
.field label { font-size: .88rem; font-weight: 600; color: var(--ink-soft); }
.field input, .field textarea, .field select {
  width: 100%;
  padding: .7rem .85rem;
  font: inherit;
  font-size: .97rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--brand);
  outline: 2px solid color-mix(in srgb, var(--brand) 30%, transparent);
  outline-offset: 0;
}
.field textarea { min-height: 6.5rem; resize: vertical; }

/* Bots fill everything; people never see this. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__status {
  margin: 0;
  padding: .7rem .9rem;
  border-radius: var(--radius-sm);
  font-size: .92rem;
}
.form__status[data-state="ok"]   { background: color-mix(in srgb, var(--ok) 12%, transparent); color: var(--ok); }
.form__status[data-state="err"]  { background: color-mix(in srgb, #d2333e 12%, transparent); color: #d2333e; }
.form__status[data-state="busy"] { background: var(--bg-sunk); color: var(--ink-soft); }

/* ---------- cta ---------- */
.cta {
  padding: clamp(2.25rem, 5vw, 3.5rem);
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--brand) 0%, #5b46d9 100%);
  color: #fff;
  text-align: center;
}
.cta h2 { color: #fff; }
.cta p { color: rgba(255, 255, 255, .88); margin-inline: auto; }
.cta .btn--primary { background: #fff; color: var(--brand); }
.cta .btn--primary:hover { background: rgba(255, 255, 255, .9); color: var(--brand); }
.cta .btn--ghost { border-color: rgba(255, 255, 255, .5); color: #fff; }
.cta .btn--ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.cta .btn-row { justify-content: center; }

/* ---------- footer ---------- */
.footer {
  padding-block: clamp(2.5rem, 5vw, 4rem) 2rem;
  background: var(--bg-alt);
  border-top: 1px solid var(--line);
  font-size: .93rem;
}
/* The minimum track widths here add up: 220px for the brand column plus 140px
   for the first link column is 360px of floor, against 335px of content width
   on a 375px phone. A grid cannot shrink below its minima, so it pushed the
   whole page 37px wider and gave every phone a horizontal scrollbar — the kind
   of break that is invisible on a desktop and obvious on the device. Explicit
   counts below the point where the minima stop fitting. */
.footer__grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(220px, 1.4fr) repeat(auto-fit, minmax(140px, 1fr));
  margin-bottom: 2.5rem;
}

@media (max-width: 700px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem; }
}

@media (max-width: 400px) {
  .footer__grid { grid-template-columns: minmax(0, 1fr); }
}
.footer h4 {
  font-size: .78rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: .9rem;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.footer a { color: var(--ink-soft); text-decoration: none; }
.footer a:hover { color: var(--brand); text-decoration: underline; }
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  color: var(--ink-faint);
  font-size: .87rem;
}
.footer__legal p { margin: 0; max-width: none; }

/* ---------- utility ---------- */
.muted { color: var(--ink-soft); }
.small { font-size: .88rem; }
.mono { font-family: var(--font-mono); }
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}