/* Self-hosted variable font: removes two third-party origins from the critical path.
   One file covers weights 400-800 (variable). */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Metric-matched fallback. `font-display: swap` means the first paint happens in
   a system font and the real one swaps in a moment later; if the two have
   different widths and line heights, that swap reflows the page and shows up as
   Cumulative Layout Shift (this was the last 0.126 on the desktop score).

   Measured in Chrome against the real font at 64px, Arial and friends are 4.35%
   narrower, and the real font's heavier weights are wider still: at weight 800
   it is 4.21% wider again. That difference is enough to change where a heading
   wraps, which moves everything below it. So there is one scaled face per weight
   the site actually uses, each matched by measurement:

     weight  ratio to plain Arial   size-adjust
     400     1.0001                 104.36%
     700     1.0321                 107.71%
     800     1.0421                 108.75%

   size-adjust also scales the override percentages, so ascent and descent are
   divided back out by it to land on the real font's 103.80% / 22.20% line
   metrics (e.g. 103.80 / 1.0436 = 99.46). Verified: line box identical at 80px,
   heading widths within 0.03%.

   If none of these families is present (rare; mostly Android, which has Roboto
   and none of these) the family is skipped and the stack falls through to
   ui-sans-serif exactly as it did before. */
@font-face {
  font-family: "Plus Jakarta Sans Fallback";
  font-weight: 400;
  src: local("Arial"), local("Helvetica"), local("Liberation Sans"), local("Arimo");
  size-adjust: 104.36%;
  ascent-override: 99.46%;
  descent-override: 21.27%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Plus Jakarta Sans Fallback";
  font-weight: 700;
  src: local("Arial"), local("Helvetica"), local("Liberation Sans"), local("Arimo");
  size-adjust: 107.71%;
  ascent-override: 96.37%;
  descent-override: 20.61%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Plus Jakarta Sans Fallback";
  font-weight: 800;
  src: local("Arial"), local("Helvetica"), local("Liberation Sans"), local("Arimo");
  size-adjust: 108.75%;
  ascent-override: 95.45%;
  descent-override: 20.41%;
  line-gap-override: 0%;
}

:root {
  --ink: #0f172a;
  --blue: #2563eb;
  --muted: #475569;
  --faint: #64748b;
  --line: #e2e8f0;
  --paper: #ffffff;
  --wash: #f9fafb;
  --max: 1120px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { max-width: 100%; }
body {
  margin: 0;
  font-family: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", ui-sans-serif, system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.5;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  min-height: 103px;
  gap: 2rem;
}
.wordmark {
  font-weight: 800;
  font-size: 36px;
  letter-spacing: -0.04em;
  text-decoration: none;
}
.wordmark .dot { color: var(--blue); }
.nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1.75rem;
  font-size: 15px;
  font-weight: 600;
}
.nav a { text-decoration: none; }
.nav .phone { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.nav .btn .btn-short { display: none; }

/* The mail icon is grouped with the CTA, so the header offers both ways to get
   in touch: book a call, or send a message. Contact was reachable only from the
   footer and the mobile panel, which left a laptop visitor no visible way to
   the form at all. */
.nav-cta { display: flex; align-items: center; gap: 0.6rem; }
.nav-contact {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
}
.nav-contact:hover { border-color: var(--blue); color: var(--blue); }
.nav-contact svg { display: block; }

/* Below 900px the four nav links are hidden, so this panel is the only way to
   reach Marketing, Pricing, Guides and About on a phone. It is a <details>
   element, so it opens and closes with no JavaScript at all; js/nav.js only
   closes it again after a tap. */
.nav-more { display: none; }
.nav-more > summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
}
.nav-more > summary::-webkit-details-marker { display: none; }
.nav-more-icon,
.nav-more-icon::before,
.nav-more-icon::after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
}
.nav-more-icon { position: relative; }
.nav-more-icon::before,
.nav-more-icon::after { content: ""; position: absolute; left: 0; }
.nav-more-icon::before { top: -6px; }
.nav-more-icon::after { top: 6px; }
.nav-more-panel {
  /* .site-header is sticky, so it is the containing block: the panel spans the
     full width and hangs directly below the header. */
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: grid;
  padding: 0.4rem 1.25rem 1.35rem;
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 18px 30px rgba(15, 23, 42, 0.1);
}
.nav-more-panel a {
  padding: 0.85rem 0.25rem;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  font-size: 17px;
  font-weight: 600;
}
.nav-more-panel a.btn {
  width: 100%;
  margin-top: 1rem;
  border-bottom: 0;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--blue);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  width: 230px;
  height: 52px;
  padding: 0 1.25rem;
  border-radius: 8px;
  border: 0;
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease;
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--ink);
}

.hero { padding: 5.5rem 0 4rem; }
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 290px;
  gap: 4.5rem;
  align-items: center;
}
.hero h1 {
  font-size: clamp(2.6rem, 5vw, 64px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.1;
  margin: 0 0 1.1rem;
  max-width: 15.5em;
}
.lede { color: var(--muted); font-size: 20px; max-width: 42rem; margin: 0 0 1.6rem; line-height: 1.45; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.6rem; align-items: center; }
.btn-ghost { width: 195px; }
.checks {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  color: var(--muted);
  font-size: 15px;
}
.checks span { display: flex; gap: 0.45rem; align-items: center; white-space: nowrap; }

.phone-device {
  width: 290px;
  height: 590px;
  background: #111;
  border-radius: 40px;
  padding: 8px;
  position: relative;
  box-shadow:
    0 0 0 1px #2a2a2c,
    0 0 0 3px #0a0a0a,
    0 22px 50px rgba(15,23,42,0.25);
  margin-inline: auto;
}
.phone-device .screen {
  width: 274px;
  height: 574px;
  /* Before the demo frame is allowed to load this is all you see. Dark reads
     as a phone that is off; white reads as a phone that is broken. */
  background: #0e1628;
  border-radius: 32px;
  overflow: hidden;
  position: relative;
}
.phone-device iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 390px;
  height: 844px;
  border: 0;
  transform: scale(calc(274 / 390));
  transform-origin: top left;
  /* transparent, so the dark screen shows until the sample paints its own body */
  background: transparent;
  overflow: hidden;
  scrollbar-width: none;
}
.phone-device .island {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 78px;
  height: 22px;
  background: #0a0a0a;
  border-radius: 12px;
  z-index: 7;
}
.iphone-status {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 34px;
  z-index: 6;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 8px 16px 0;
  color: #fff;
  /* The sample site scrolls underneath, so the bar needs its own contrast. */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0));
  font-family: -apple-system, "SF Pro Text", "Helvetica Neue", sans-serif;
  pointer-events: none;
}
.iphone-status .time {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  width: 48px;
}
.iphone-status .status-icons {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 62px;
  justify-content: flex-end;
}
.iphone-status .status-icons svg { display: block; }
/* The empty screen is dark, so the light-treatment status bar waits until a
   sample has actually painted. screen-live is set by phone-bind.js on load. */
.phone-device.screen-live:not(.is-dark) .iphone-status {
  color: #111;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
}
.phone-device:not(.is-dark) .island { background: #111; }
.safari-bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 6;
  padding: 7px 12px 0;
  background: linear-gradient(to top, rgba(242,242,247,0.97) 62%, rgba(242,242,247,0.88));
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  pointer-events: none;
  font-family: -apple-system, "SF Pro Text", "Helvetica Neue", sans-serif;
}
.safari-pill {
  height: 38px;
  border-radius: 12px;
  background: rgba(255,255,255,0.94);
  box-shadow: 0 0.5px 0 rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  color: #1d1d1f;
}
.safari-pill .lock { flex: none; opacity: 0.45; }
.safari-pill .reload { flex: none; opacity: 0.4; margin-left: auto; transform: scaleX(-1); }
.safari-pill [data-phone-url],
.safari-pill .safari-host {
  flex: 1;
  text-align: center;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-ind {
  width: 112px;
  height: 4px;
  background: #111;
  border-radius: 4px;
  margin: 8px auto 7px;
}
.phone-link {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: 32px;
}
.phone-cta {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 68px;
  z-index: 8;
  background: rgba(15, 23, 42, 0.88);
  color: #fff;
  text-align: center;
  padding: 0.7rem 0.8rem;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.work-card:hover .phone-cta,
.work-card:focus-visible .phone-cta { opacity: 1; transform: none; }
@media (hover: none) {
  .phone-cta { opacity: 1; transform: none; }
}
.work-intro {
  color: var(--muted);
  font-size: 18px;
  margin: -0.8rem 0 1.8rem;
  max-width: 40rem;
}

.divider { height: 1px; background: var(--line); width: min(var(--max), calc(100% - 2.5rem)); margin: 0 auto; }

section { padding: 4.5rem 0; }
h2 {
  font-size: clamp(1.8rem, 3.5vw, 44px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.15;
  margin: 0 0 1.6rem;
}
.why-grid, .work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.why-grid h3 { margin: 0 0 0.6rem; font-size: 24px; }
.why-grid p { margin: 0; color: var(--muted); }

.split-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}
.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li {
  position: relative;
  padding-left: 36px;
  margin-bottom: 0.7rem;
  font-size: 18px;
}
.ticks li .tick { position: absolute; left: 0; top: 1px; }
.tick {
  width: 24px; height: 24px;
  background: var(--wash);
  color: var(--blue);
  display: grid; place-items: center;
  font-weight: 800; font-size: 14px;
}
.aside { color: var(--muted); font-size: 16px; margin-top: 1rem; }

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.steps .num { font-size: 64px; font-weight: 800; color: var(--blue); line-height: 1; }
.steps h3 { margin: 0.3rem 0; font-size: 24px; }
.steps p { margin: 0; color: var(--muted); }

.work-card {
  text-decoration: none;
  display: block;
}
.work-card iframe { pointer-events: none; }
.work-card .phone-device {
  transition: transform 0.35s ease;
}
.work-card:hover .phone-device { transform: translateY(-6px); }
.work-card {
  text-align: center;
}
.work-card .caption { display: none; }
.badge {
  display: inline-block;
  color: var(--blue);
  font-weight: 700;
  font-size: 14px;
  margin-top: 0.7rem;
}
.work-card h3 { display: none; }
.work-sample { text-align: center; }
.work-sample h3 { margin: 1.1rem 0 0.3rem; font-size: 22px; letter-spacing: -0.02em; }
.work-sample .work-note { color: var(--muted); margin: 0 0 0.4rem; }
.work-sample .link-arrow { font-size: 15px; }

.price-block h2 { margin-bottom: 0.4rem; }
.kicker {
  font-size: 16px;
  font-weight: 800;
  color: var(--muted);
  margin: 0 0 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.price { font-size: clamp(2.6rem, 6vw, 64px); font-weight: 800; letter-spacing: -0.04em; margin: 0 0 1rem; }
.price-copy { font-size: 18px; max-width: 36rem; }

/* One column until there is a founder photo to sit beside the words. Put the
   photo back by restoring `1fr 1fr` and re-adding the .photo-ph div. */
.who-grid {
  display: grid;
  grid-template-columns: minmax(0, 46rem);
  gap: 3rem;
  align-items: center;
}
.who-grid figure { margin: 0; }
.photo-ph {
  width: 100%;
  height: 320px;
  border-radius: 8px;
  background: #e2e8f0;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
}
.who-grid .place { color: var(--ink); font-size: 22px; margin: 0 0 0.8rem; }
.who-grid p { color: var(--muted); font-size: 18px; }

.faq { max-width: 1280px; }
.faq details {
  border-top: 1px solid var(--line);
  padding: 1.25rem 0;
}
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  font-weight: 700;
  font-size: 20px;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--blue); font-weight: 800; }
.faq details[open] summary::after { content: "\2212"; }
.faq p { color: var(--muted); font-size: 16px; margin: 0.8rem 0 0; max-width: 52rem; }
.faq-note { color: var(--muted); font-size: 16px; margin: 1.6rem 0 0; max-width: 52rem; }
.faq-note a { color: var(--ink); }

.final { text-align: left; padding-bottom: 5rem; }
.final h2 { font-size: clamp(2.4rem, 5vw, 64px); max-width: 18ch; letter-spacing: -0.04em; }
.final .or { color: var(--muted); font-weight: 600; margin-left: 0.5rem; }
.final .or a { text-underline-offset: 3px; }
.or-call { color: var(--muted); font-weight: 600; margin: -0.8rem 0 1.6rem; }
.or-call a { color: var(--ink); }

.site-footer {
  background: var(--wash);
  padding: 3rem 0;
}
.site-footer .wrap {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
}
.site-footer .wordmark { font-size: 40px; }
.site-footer .tag { color: var(--muted); font-size: 14px; max-width: 36rem; margin: 0.5rem 0 0; }
.site-footer .contact { color: var(--muted); font-size: 14px; display: grid; gap: 0.35rem; }
.site-footer .contact a { padding: 0.15rem 0; }
.site-footer a { text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .work-card .phone-device { transition: none; }
}

/* pricing + simple inner pages */
.page-head { padding: 3.5rem 0 0.5rem; }
.page-head h1 { font-size: clamp(2rem, 4vw, 44px); letter-spacing: -0.04em; margin: 0 0 0.8rem; }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; margin: 2.5rem 0; align-items: stretch; }
.plan { border: 1px solid var(--line); border-radius: 14px; padding: 1.9rem; background: #fff; }
.plan.featured { border-color: var(--blue); box-shadow: 0 16px 40px rgba(37,99,235,0.12); }
.plan .tag { display: inline-block; background: var(--blue); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.3rem 0.7rem; border-radius: 999px; margin-bottom: 0.9rem; }
.plan h3 { margin: 0 0 0.35rem; font-size: 24px; letter-spacing: -0.02em; }
.plan .plan-price { font-size: 42px; font-weight: 800; letter-spacing: -0.045em; margin: 0; }
.plan .plan-note { color: var(--muted); font-size: 15px; margin: 0.2rem 0 1.2rem; }
.plan ul { list-style: none; margin: 0; padding: 0; }
.plan li { display: grid; grid-template-columns: 18px 1fr; gap: 0.6rem; color: var(--muted); margin-bottom: 0.55rem; }
.plan li::before { content: "\2713"; color: var(--blue); font-weight: 800; }
.plan .plan-price .per { font-size: 0.52em; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.build-block { padding: 1.5rem 0 0.25rem; }
.build-block .kicker { color: var(--faint); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.build-price { font-size: clamp(2.6rem, 8vw, 66px); font-weight: 800; letter-spacing: -0.05em; line-height: 1; margin: 0.5rem 0 0.4rem; }
.build-price .suffix { font-size: 0.42em; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.build-note { color: var(--muted); font-size: 18px; max-width: 46rem; margin: 0 0 1.5rem; }
.callout { background: var(--wash); border-left: 4px solid var(--blue); border-radius: 10px; padding: 1.1rem 1.3rem; color: var(--ink); font-weight: 600; max-width: 46rem; margin: 0 0 1.4rem; }
.build-block ul { list-style: none; margin: 0; padding: 0; }
.build-block li { display: grid; grid-template-columns: 18px 1fr; gap: 0.6rem; color: var(--muted); margin-bottom: 0.55rem; }
.build-block li::before { content: "\2713"; color: var(--blue); font-weight: 800; }
.divider { height: 1px; background: var(--line); margin: 2.25rem 0 1.75rem; }
.pricing-cta { margin: 1.5rem 0 0; }
.link-arrow { display: inline-block; padding: 0.35rem 0; color: var(--blue); font-weight: 700; text-decoration: none; }
.link-arrow:hover { text-decoration: underline; }
.link-arrow::after { content: " \2192"; }
.message-block { max-width: 640px; margin-inline: auto; text-align: center; }
.message-block form { text-align: left; }
.ladder { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1.6rem 0; margin: 2rem 0; }
.ladder dl { display: grid; grid-template-columns: 1fr auto; gap: 0.6rem 2rem; margin: 0; }
.ladder dt { font-weight: 700; }
.ladder dd { margin: 0; text-align: right; color: var(--muted); }
.legal { padding: 2rem 0 4rem; }
.legal h2 { font-size: 22px; margin: 2rem 0 0.6rem; }
.legal p, .legal li { color: var(--muted); }
.legal ul { padding-left: 1.2rem; }
.foot-nav { font-size: 14px; color: var(--faint); margin-top: 0.9rem; }
.foot-nav a { display: inline-block; padding: 0.3rem 0; text-decoration: none; }
.foot-nav a:hover { text-decoration: underline; }
/* Without this, /contact/#message drops the heading under the sticky header. */
[id] { scroll-margin-top: 7rem; }

:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.skip-link { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link:focus { position: fixed; top: 0; left: 0; width: auto; height: auto; margin: 0; padding: 0.75rem 1rem; overflow: visible; clip: auto; background: #fff; color: var(--ink); font-weight: 700; z-index: 100; }

@media (max-width: 900px) {
  .hero-grid, .split-2, .why-grid, .work-grid, .steps, .who-grid, .site-footer .wrap, .plans, .ladder dl {
    grid-template-columns: 1fr;
  }
  .site-header .wrap { min-height: 72px; gap: 0.75rem; }
  .wordmark { font-size: 28px; }
  .nav .hide-sm { display: none; }
  .nav .btn .btn-long { display: none; }
  .nav .btn .btn-short { display: inline; }
  .nav-more { display: block; }
  [id] { scroll-margin-top: 5.25rem; }
  .hero { padding-top: 2rem; }
  .phone-device { margin-top: 1rem; }
  .btn, .btn-ghost { width: auto; }
  .hero h1 { max-width: none; }
}