/* S4NDO — s4ndo.net
   Palette: indigo #4F46E5 primary, amber #F59E0B reserved for "happening now".
   Type: Plus Jakarta Sans (display) / Inter (body). */

:root {
  --ink: #0B1020;
  --ink-soft: #3A4160;
  --body: #5A6178;
  --indigo: #4F46E5;
  --indigo-deep: #3730A3;
  --indigo-wash: #EEF0FE;
  --amber: #F59E0B;
  --amber-wash: #FEF5E6;
  --line: #E5E8F2;
  --line-soft: #F0F2F8;
  --wash: #F8F9FD;
  --white: #FFFFFF;

  /* product-shot surfaces */
  --primary-subtle: #EEF2FF;
  --text-muted: #5A6178;

  --shell: 1160px;
  --gutter: 24px;
  --radius: 14px;
  --radius-sm: 9px;

  --shadow-sm: 0 1px 2px rgba(11, 16, 32, .05);
  --shadow-md: 0 10px 30px -12px rgba(11, 16, 32, .16), 0 1px 2px rgba(11, 16, 32, .04);
  --shadow-lg: 0 30px 70px -30px rgba(24, 22, 84, .30), 0 2px 6px rgba(11, 16, 32, .05);
}

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

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

body {
  margin: 0;
  background: var(--white);
  color: var(--body);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, .wordmark, .btn, .stat-num {
  font-family: "Plus Jakarta Sans", Inter, system-ui, sans-serif;
  color: var(--ink);
}

h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -.028em; line-height: 1.08; }

a { color: var(--indigo); text-decoration: none; }
a:hover { color: var(--indigo-deep); }

p { margin: 0; }

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

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

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  border-radius: 0 0 8px 0;
  z-index: 99;
}
.skip:focus { left: 0; color: #fff; }

/* ---------- eyebrow / labels ---------- */

.eyebrow {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--indigo);
  margin: 0 0 18px;
}

.eyebrow-muted { color: var(--ink-soft); }

/* ---------- nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
}

.nav-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 68px;
}

.wordmark {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--ink);
}
.wordmark span { color: var(--indigo); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
}

/* :not(.btn) keeps this from outranking .btn-primary on the nav CTA */
.nav-links a:not(.btn) {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-soft);
}
.nav-links a:not(.btn):hover { color: var(--ink); }

.nav-hide-sm { display: inline; }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 13px 24px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease;
}

.btn-primary {
  background: var(--indigo);
  color: #fff;
  box-shadow: 0 10px 22px -12px rgba(79, 70, 229, .85);
}
.btn-primary:hover {
  background: var(--indigo-deep);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 14px 28px -12px rgba(79, 70, 229, .9);
}

.btn-ghost {
  background: var(--white);
  color: var(--ink);
  border-color: var(--line);
}
.btn-ghost:hover { border-color: #C9CEE4; color: var(--ink); transform: translateY(-1px); }

.btn-sm { padding: 10px 18px; font-size: 14px; border-radius: 9px; }

.btn-full { width: 100%; }

.btn svg { flex: none; }

/* ---------- sections ---------- */

/* clears the 68px sticky nav on anchor jumps */
[id] { scroll-margin-top: 88px; }

.section { padding: 104px 0; }
.section-wash { background: var(--wash); border-block: 1px solid var(--line-soft); }
.section-tight { padding: 76px 0; }

.section-head { max-width: 640px; margin-bottom: 54px; }
.section-head h2 { font-size: clamp(30px, 4vw, 42px); }
.section-head p { margin-top: 18px; font-size: 18px; }

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

.hero {
  position: relative;
  padding: 74px 0 96px;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: -220px 0 auto 0;
  height: 620px;
  background:
    radial-gradient(660px 340px at 18% 42%, rgba(79, 70, 229, .10), transparent 68%),
    radial-gradient(520px 300px at 88% 12%, rgba(245, 158, 11, .09), transparent 66%);
  pointer-events: none;
}

.hero-in {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 56px;
  align-items: center;
}

.hero h1 {
  font-size: clamp(38px, 5.4vw, 60px);
  line-height: 1.03;
  letter-spacing: -.035em;
}

.hero-sub {
  margin-top: 24px;
  font-size: 18.5px;
  line-height: 1.62;
  max-width: 33em;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.hero-note {
  margin-top: 20px;
  font-size: 14px;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 9px;
}

.hero-note svg { color: var(--indigo); }

/* ---------- product shots: browser + phone framing ---------- */

/* Layered shadow shared by every framed screenshot: a tight contact shadow
   plus a wide soft one, so the frames sit on the page instead of floating. */
.browser,
.phone-frame {
  box-shadow:
    0 4px 12px rgba(16, 24, 40, .06),
    0 24px 48px rgba(16, 24, 40, .10);
}

/* minimal browser chrome */
.browser {
  border-radius: 14px;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
}

.browser-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 40px;
  padding: 0 14px;
  background: #F4F5FA;
  border-bottom: 1px solid var(--line);
}

.browser-dots { display: flex; gap: 7px; flex: none; }
.browser-dots i {
  display: block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #D8DCE8;
}

.browser-url {
  flex: 1;
  max-width: 320px;
  height: 24px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--line);
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: -.005em;
}

.browser img { width: 100%; height: auto; display: block; }

/* hero: the window runs past the right edge and turns slightly away */
.hero-shot {
  margin: 0;
  perspective: 1800px;
  width: calc(100% + 190px);
}

.hero-shot .browser {
  transform: rotateY(-8deg);
  transform-origin: left center;
}

/* ---------- showcase panel ---------- */

.showcase {
  background: var(--primary-subtle);
  border-radius: 28px;
  padding: 60px 40px 52px;
}

/* Overlapped, not a flat row: the middle screen is larger and on top, the
   outer two tuck behind its edges.
   Frames are bottom-aligned (margin-top:auto inside equal-height columns) so
   the taller middle one reads as raised, and every caption lands on one clear
   row underneath. Letting the captions flow directly under their own frame
   instead puts the short ones level with the middle frame, which then covers
   them. */
.phones {
  display: flex;
  justify-content: center;
  align-items: stretch;
}

.phone {
  margin: 0;
  width: 244px;
  flex: none;
  display: flex;
  flex-direction: column;
}

.phone .phone-frame { margin-top: auto; }

.phone-mid {
  width: 296px;
  margin-inline: -16px;
  position: relative;
  z-index: 2;
}

/* thin bezel, rounded, nothing else — no notch, no speaker slit */
.phone-frame {
  border-radius: 30px;
  padding: 7px;
  background: #141824;
  overflow: hidden;
}

.phone-frame img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 23px;
  background: var(--wash);
}

.phone figcaption {
  margin-top: 18px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
  text-align: center;
  text-wrap: balance;
  /* clear of the neighbouring frame's overlap, so nothing sits under a bezel */
  padding-inline: 20px;
}

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

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.feature {
  background: var(--white);
  padding: 34px 30px 36px;
  transition: background-color .2s ease;
}
.feature:hover { background: #FCFCFF; }

.feature-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--indigo-wash);
  color: var(--indigo);
  display: grid;
  place-items: center;
  margin-bottom: 20px;
}

.feature h3 { font-size: 17.5px; letter-spacing: -.02em; margin-bottom: 9px; }
.feature p { font-size: 15px; line-height: 1.6; }

/* ---------- who it's for: scale rail ---------- */

.rail {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  position: relative;
  padding-top: 34px;
}

.rail::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--indigo-wash), var(--indigo) 55%, var(--indigo-deep));
  border-radius: 2px;
}

.stop { position: relative; }

/* -34px lifts the dot out of the grid row onto the rail (rail padding-top 34px) */
.stop::before {
  content: "";
  position: absolute;
  top: -34px;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--indigo);
}

.stop-size {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--indigo);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.stop h3 { font-size: 21px; margin: 10px 0 10px; }
.stop p { font-size: 15.5px; }

/* ---------- proof ---------- */

/* sits directly under the hero — the second thing on the page */
.proof {
  padding: 76px 0;
  background: var(--indigo-wash);
  border-block: 1px solid #DDE0FB;
  text-align: center;
}

.proof p {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: clamp(26px, 4vw, 42px);
  font-weight: 800;
  letter-spacing: -.032em;
  color: var(--ink);
  max-width: 24ch;
  margin-inline: auto;
  line-height: 1.16;
}

.proof span { color: var(--indigo); }

/* ---------- pricing ---------- */

.pricing-head h1 { font-size: clamp(34px, 4.6vw, 48px); }

.plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: start;
}

.plan {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 28px 32px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}

.plan-pop {
  border-color: var(--indigo);
  box-shadow: var(--shadow-md);
}

.plan-badge {
  position: absolute;
  top: -12px;
  left: 28px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #fff;
  background: var(--indigo);
  border-radius: 999px;
  padding: 5px 12px;
}

.plan-name {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--indigo);
}

.plan-price {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-top: 16px;
  font-variant-numeric: tabular-nums;
}

.plan-figure {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* line-height 1 keeps the "Up to N cleaners" rule level across all three cards */
.plan-per { font-size: 15px; font-weight: 500; line-height: 1; color: var(--body); }

.plan-limit {
  margin-top: 12px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.plan-lead {
  margin: 22px 0 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}

.plan-list {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  display: grid;
  gap: 11px;
  font-size: 15px;
  line-height: 1.5;
}

.plan-list li {
  display: grid;
  grid-template-columns: 17px 1fr;
  gap: 10px;
  align-items: start;
}

.plan-list svg { color: var(--indigo); margin-top: 4px; }

.plan .btn { margin-top: auto; }

.plans-note {
  margin-top: 30px;
  font-size: 15.5px;
  color: var(--ink-soft);
}

/* ---------- contact ---------- */

.contact-in {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}

.contact-aside h2 { font-size: clamp(29px, 3.6vw, 38px); }
.contact-aside p { margin-top: 18px; font-size: 17px; }

.contact-mail {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-top: 26px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--indigo);
}
.contact-mail:hover { color: var(--indigo-deep); }

.form {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px;
  box-shadow: var(--shadow-md);
}

.field { margin-bottom: 18px; }

.field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 7px;
  letter-spacing: -.005em;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 13px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.field input::placeholder,
.field textarea::placeholder { color: #A6ACC4; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--indigo);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, .14);
}

.field textarea { resize: vertical; min-height: 104px; }

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.form-note {
  margin-top: 14px;
  font-size: 12.5px;
  line-height: 1.55;
  color: #7E85A6;
}

.form-status {
  margin-top: 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--indigo-deep);
  background: var(--indigo-wash);
  border-radius: 10px;
  padding: 11px 14px;
  display: none;
}
.form-status.is-shown { display: block; }

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

.footer {
  background: var(--ink);
  color: #9AA2BE;
  padding: 54px 0 40px;
}

.footer-in {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  align-items: flex-start;
  justify-content: space-between;
}

.footer .wordmark { color: #fff; }
.footer .wordmark span { color: #A5A0FF; }

.footer-blurb {
  font-size: 14px;
  margin-top: 12px;
  max-width: 34ch;
  color: #7C8399;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  font-size: 14.5px;
}
.footer-links a { color: #C6CBDD; }
.footer-links a:hover { color: #fff; }

.footer-base {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .09);
  font-size: 13px;
  color: #6E7590;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
}

/* ---------- legal pages ---------- */

.legal { padding: 68px 0 96px; }

.legal-head {
  max-width: 760px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 40px;
}
.legal-head h1 { font-size: clamp(32px, 4.4vw, 46px); }
.legal-head .updated {
  margin-top: 16px;
  font-size: 13.5px;
  color: #868DA6;
  font-variant-numeric: tabular-nums;
}

.prose { max-width: 760px; }
.prose h2 {
  font-size: 21px;
  margin: 42px 0 14px;
  letter-spacing: -.02em;
}
.prose h3 {
  font-size: 16.5px;
  margin: 26px 0 10px;
  letter-spacing: -.015em;
}
.prose p { margin-bottom: 15px; font-size: 16px; }
.prose ul { margin: 0 0 15px; padding-left: 22px; font-size: 16px; }
.prose li { margin-bottom: 8px; }
.prose strong { color: var(--ink); font-weight: 600; }

.callout {
  background: var(--indigo-wash);
  border-left: 3px solid var(--indigo);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 20px 22px;
  margin: 26px 0;
}
.callout p { margin-bottom: 10px; font-size: 15.5px; }
.callout p:last-child { margin-bottom: 0; }

.kv {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 26px 0;
}
.kv-row {
  display: grid;
  grid-template-columns: 168px 1fr;
  gap: 18px;
  padding: 14px 20px;
  font-size: 15.5px;
  border-bottom: 1px solid var(--line-soft);
}
.kv-row:last-child { border-bottom: 0; }
.kv-row dt {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 700;
  color: var(--ink);
  font-size: 14px;
  letter-spacing: -.01em;
}
.kv-row dd { margin: 0; }

/* ---------- responsive ---------- */

@media (max-width: 980px) {
  .hero-in { grid-template-columns: 1fr; gap: 46px; }
  .hero { padding-top: 56px; }
  .contact-in { grid-template-columns: 1fr; gap: 40px; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .plans { grid-template-columns: 1fr; max-width: 560px; }
  /* no room to bleed or tilt once the hero is a single column */
  .hero-shot { width: 100%; perspective: none; }
  .hero-shot .browser { transform: none; }
  .showcase { padding: 44px 24px 40px; border-radius: 22px; }
  .phone { width: 200px; }
  .phone-mid { width: 240px; margin-inline: -24px; }
}

@media (max-width: 720px) {
  body { font-size: 16.5px; }
  .section { padding: 76px 0; }
  .section-tight { padding: 60px 0; }
  .grid-3 { grid-template-columns: 1fr; }
  .rail { grid-template-columns: 1fr; gap: 34px; padding-top: 0; }
  .rail::before {
    top: 0;
    bottom: 0;
    left: 5px;
    right: auto;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg, var(--indigo-wash), var(--indigo) 55%, var(--indigo-deep));
  }
  .stop { padding-left: 32px; }
  .stop::before { top: 4px; left: 0; }
  .nav-hide-sm { display: none; }
  .plan { padding: 26px 22px 28px; }
  .plan-badge { left: 22px; }
  .field-row { grid-template-columns: 1fr; }
  .form { padding: 24px 20px; }
  .kv-row { grid-template-columns: 1fr; gap: 4px; }
  /* stack: overlapping three screens in a 390px column just hides two of them */
  .phones { flex-direction: column; align-items: center; gap: 38px; }
  .phone,
  .phone-mid { width: min(280px, 78vw); margin-inline: 0; transform: none; }
  .showcase { padding: 36px 18px 32px; }
  .browser-url { max-width: none; }
}

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