/* ==========================================================================
   Foreman — marketing site
   Stripe-style visual system: Inter throughout, navy ink on white and a very
   light blue wash, one blurple accent, an angled gradient hero, and structure
   drawn with soft shadows and radii instead of hairline rules. Light only,
   like the reference.
   ========================================================================== */

:root {
  --paper:  #ffffff;   /* page */
  --wash:   #f6f9fc;   /* alternating section background */
  --card:   #ffffff;
  --ink:    #0a2540;   /* headings */
  --body:   #425466;   /* body copy */
  --muted:  #697386;   /* labels, meta */
  --line:   #e6ebf1;

  --accent:      #635bff;
  --accent-hi:   #7a73ff;
  --accent-soft: #f0efff;
  --green:       #0ba85e;

  --navy:      #0a2540;
  --on-navy:   #ffffff;
  --on-navy-2: #b3c2cf;
  --on-navy-3: #8a9bac;

  --shadow-sm: 0 2px 5px -1px rgba(50,50,93,.15), 0 1px 3px -1px rgba(0,0,0,.15);
  --shadow:    0 15px 35px rgba(50,50,93,.08), 0 5px 15px rgba(0,0,0,.05);
  --shadow-lg: 0 30px 60px -12px rgba(50,50,93,.22), 0 18px 36px -18px rgba(0,0,0,.2);
  --ring: 0 0 0 1px var(--line);

  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --r: 14px;
  --wrap: 1180px;
  --pad: 20px;
  --t: 180ms cubic-bezier(.2,.7,.3,1);
}

/* -------------------------------- reset -------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--body);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3 {
  margin: 0;
  color: var(--ink);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.025em;
  /* even line lengths beat a hand-placed <br> that only holds at one width */
  text-wrap: balance;
}
h1 em, h2 em, h3 em { font-style: normal; color: var(--accent); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
svg { fill: none; stroke: currentColor; stroke-width: 1.8; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* -------------------------------- buttons ------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 11px 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.005em;
  white-space: nowrap;
  transition: background var(--t), color var(--t), border-color var(--t),
              box-shadow var(--t), transform var(--t);
}
/* the arrow that nudges on hover is the one flourish worth copying wholesale */
.btn::after {
  content: '→';
  margin-left: 8px;
  font-size: 15px;
  transition: transform var(--t);
}
.btn:hover::after { transform: translateX(3px); }
.btn-plain::after { content: none; }

.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 4px 12px rgba(99,91,255,.3); }
.btn-primary:hover { background: var(--accent-hi); box-shadow: 0 6px 18px rgba(99,91,255,.36); }
.btn-soft { background: var(--accent-soft); color: var(--accent); }
.btn-soft:hover { background: var(--accent); color: #fff; }
.btn-white { background: #fff; color: var(--accent); box-shadow: var(--shadow-sm); }
.btn-white:hover { background: #fff; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(10,37,64,.18); }
.btn-ghost { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.4); }
.btn-ghost:hover { background: rgba(255,255,255,.24); }
.btn-xs { min-height: 38px; padding: 8px 16px; font-size: 14px; }
.btn-wide { width: 100%; }
.btn:active { transform: scale(.985); }

/* --------------------------------- tags -------------------------------- */
/* Stripe eyebrows: no pill, just small bold uppercase in the accent */
.tag {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .075em;
  text-transform: uppercase;
  color: var(--accent);
}
.tag-light { color: #9d97ff; }

/* --------------------------------- nav --------------------------------- */
.nav-shell {
  position: sticky;
  top: 0;
  z-index: 80;
  padding: 14px var(--pad) 0;
  padding-top: calc(14px + env(safe-area-inset-top));
}
.nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 8px 8px 8px 20px;
  background: rgba(255,255,255,.14);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  transition: background var(--t), border-color var(--t), box-shadow var(--t);
}
/* Over the gradient the nav is glass. Past it, white on white is invisible,
   so it turns solid and the links go navy. */
.nav.is-solid {
  background: var(--card);
  border-color: var(--line);
  box-shadow: var(--shadow);
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-right: auto;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  transition: color var(--t);
}
.wordmark svg { width: 19px; height: 19px; stroke-width: 2; }
.wordmark span { text-transform: uppercase; }
.nav.is-solid .wordmark { color: var(--ink); }

.nav-links { display: none; gap: 26px; }
.nav-links a {
  font-size: 14.5px;
  font-weight: 500;
  color: rgba(255,255,255,.85);
  transition: color var(--t), opacity var(--t);
}
.nav-links a:hover { color: #fff; }
.nav.is-solid .nav-links a { color: var(--body); }
.nav.is-solid .nav-links a:hover { color: var(--accent); }

.nav-end { display: flex; align-items: center; gap: 6px; }
.nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 999px;
  color: rgba(255,255,255,.85);
  transition: color var(--t), background var(--t);
}
.nav-icon:hover { color: #fff; background: rgba(255,255,255,.16); }
.nav.is-solid .nav-icon { color: var(--muted); }
.nav.is-solid .nav-icon:hover { color: var(--accent); background: var(--accent-soft); }
.nav-icon svg { width: 17px; height: 17px; }

@media (max-width: 420px) {
  /* the bar cannot hold a wordmark, two icons and a pill at this width, and
     the thumb-zone dock is already carrying the call to action */
  .nav .btn-xs { display: none; }
}

@media (max-width: 899px) {
  /* comfortable thumbs without changing the look */
  .nav-icon { width: 42px; height: 42px; }
  .wordmark { padding: 10px 0; }
  .foot-col a { display: flex; align-items: center; min-height: 44px; }
  .foot-col { gap: 0; }
  .nav-links.is-open {
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: absolute;
    left: 0; right: 0;
    top: calc(100% + 8px);
    padding: 10px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: var(--shadow-lg);
  }
  .nav-links.is-open a { padding: 13px 14px; font-size: 15.5px; color: var(--ink); }
}

/* --------------------------------- hero -------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  margin-top: -76px;
  padding-top: 76px;
  background: var(--paper);
  overflow: hidden;
}
/* The signature: a saturated band skewed so its bottom edge climbs to the
   right. The height has to clear the hero copy at the FAR right, where the
   skew has lifted the edge highest, or the last lines of the subhead fall off
   the gradient onto white and disappear. Rule of thumb at this angle: the
   right edge sits about 280px higher than the left. */
.hero-grad {
  position: absolute;
  z-index: -1;
  will-change: transform;
  top: -240px; left: -10%; right: -10%;
  height: 1400px;   /* stacked hero: copy and phone both sit on the gradient */
  background: linear-gradient(101deg, #00d4ff 0%, #4f7dff 34%, #635bff 58%, #9d5cff 80%, #ff6ba8 100%);
  transform: skewY(-10deg);
  transform-origin: 0 0;
}
/* Left-aligned copy with the product on the right, which is the layout the
   whole reference is built on. Centred hero text is the tell that it is not. */
.hero-in {
  display: grid;
  gap: 44px;
  align-items: center;
  /* wrap PLUS the padding, so the copy starts on the column edge and not
     one pad inside it */
  max-width: calc(var(--wrap) + 2 * var(--pad));
  margin: 0 auto;
  padding: 56px var(--pad) 44px;
  color: #fff;
}
.hero .tag { color: rgba(255,255,255,.86); }
.hero h1 {
  max-width: 620px;
  margin: 16px 0 0;
  color: #fff;
  font-size: clamp(38px, 6.4vw, 62px);
  line-height: 1.06;
  letter-spacing: -.035em;
}
.hero-sub strong { color: #fff; font-weight: 600; }
.hero-sub {
  max-width: 560px;
  margin: 20px 0 0;
  font-size: 18px;
  color: rgba(255,255,255,.9);
}
.hero-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

/* ------------------------------- hero art ------------------------------ */
/* The product is the back office, so the hero shows a week of it running:
   what went out, what is still being chased, and the one line that actually
   needed the owner. Drawn in CSS. There is no product screenshot to take. */
.hero-art { position: relative; justify-self: center; width: 100%; max-width: 420px; }
.office {
  background: var(--card);
  border-radius: 16px;
  box-shadow: 0 40px 80px -24px rgba(10,37,64,.45), 0 16px 32px -18px rgba(0,0,0,.25);
  overflow: hidden;
}
.office-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--line);
}
.office-k { color: var(--ink); font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.office-t { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }

.office-rows li {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  padding: 12px 18px 12px 42px;
  border-bottom: 1px solid var(--line);
}
.office-rows li:last-child { border-bottom: 0; }
.office-rows .k { color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.3; }
.office-rows .d { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.office-rows .m { grid-column: 1 / -1; font-size: 12.5px; color: var(--muted); }
.office-rows li::before {
  content: '';
  position: absolute;
  left: 18px; top: 14px;
  width: 15px; height: 15px;
  border-radius: 50%;
}
.office-rows .done::before {
  background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat;
}
.office-rows .live::before { border: 2px solid var(--accent); }
.office-rows .wait { background: var(--accent-soft); }
.office-rows .wait::before { border: 2px solid var(--accent); background: #fff; }
.office-rows .wait .k { color: var(--accent); }
.office-foot {
  padding: 12px 18px;
  background: var(--wash);
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
}

/* the four-step spine, as a card lifted over the gradient edge */
.flow {
  position: relative;
  width: calc(100% - 2 * var(--pad));
  max-width: var(--wrap);
  margin: 0 auto 48px;
  display: grid;
  gap: 1px;
  background: var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  text-align: left;
}
.flow li { padding: 26px 24px; background: var(--card); }
.fn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  margin-bottom: 14px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
}
.ft { display: block; color: var(--ink); font-size: 18px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.fd { display: block; margin-top: 8px; font-size: 14px; color: var(--body); }

/* logo strip */
.strip { padding: 40px 0 56px; background: var(--paper); overflow: hidden; }
.strip-label {
  margin-bottom: 20px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .075em;
  text-transform: uppercase;
  color: var(--muted);
}
.marquee { position: relative; overflow: hidden; }
.marquee::before, .marquee::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 90px;
  z-index: 2;
  pointer-events: none;
}
.marquee::before { left: 0;  background: linear-gradient(90deg, var(--paper), transparent); }
.marquee::after  { right: 0; background: linear-gradient(270deg, var(--paper), transparent); }
.marquee-row {
  display: flex;
  align-items: center;
  gap: 26px;
  width: max-content;
  animation: slide 42s linear infinite;
}
.marquee-row span { font-size: 16px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.marquee-row i { width: 5px; height: 5px; border-radius: 50%; background: var(--line); flex: none; }
@keyframes slide { to { transform: translateX(-50%); } }


/* ------------------------------- sections ------------------------------ */
.sec {
  position: relative;
  padding: 72px var(--pad);
}
.sec-wash { background: var(--wash); }
.sec > * { max-width: var(--wrap); margin-left: auto; margin-right: auto; }
.sec-head { max-width: 720px; margin: 0 auto 40px; text-align: center; }
.sec-head h2 { margin-top: 14px; font-size: clamp(30px, 5vw, 42px); }
.sec-sub { max-width: 580px; margin: 18px auto 0; font-size: 17px; color: var(--body); }
/* Left-aligned heads keep the wrap and constrain the text inside it, so the
   heading, the cards under it and the nav all start on the same line. */
.sec-head-left { max-width: var(--wrap); text-align: left; }
.sec-head-left h2 { max-width: 780px; }
.sec-head-left .sec-sub { max-width: 640px; margin-left: 0; }

/* cards */
.cells { display: grid; gap: 24px; }
.cell {
  position: relative;
  padding: 28px 26px;
  background: var(--card);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}

/* tick lists */
.ticks { display: grid; gap: 11px; }
.ticks li { position: relative; padding-left: 28px; font-size: 15px; color: var(--body); }
.ticks li::before {
  content: '';
  position: absolute;
  left: 0; top: 4px;
  width: 17px; height: 17px;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* --------------------------------- pain -------------------------------- */
.pains .cell { display: grid; gap: 10px; align-content: start; }
.pain-k { color: var(--ink); font-size: 17px; font-weight: 700; letter-spacing: -.015em; }
.pains p { font-size: 15px; }
.pains-foot {
  max-width: var(--wrap);
  margin: 34px auto 0;
  color: var(--ink);
  font-size: clamp(21px, 3.4vw, 28px);
  font-weight: 700;
  letter-spacing: -.02em;
}

/* --------------------------- the angled navy band ---------------------- */
.slab {
  position: relative;
  isolation: isolate;
  margin: 120px 0;
  padding: 40px var(--pad) 60px;
  color: var(--on-navy);
}
.slab::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -100px 0;
  background: var(--navy);
  transform: skewY(-10deg);
}
.slab-in { max-width: 760px; margin: 0 auto 40px; text-align: center; }
.slab h2 { color: #fff; margin-top: 14px; font-size: clamp(30px, 5vw, 42px); }
.slab-sub { max-width: 620px; margin: 18px auto 0; font-size: 17px; color: var(--on-navy-2); }
.slab-in-left { max-width: var(--wrap); text-align: left; }
.slab-in-left h2 { max-width: 780px; }
.slab-in-left .slab-sub { max-width: 640px; margin-left: 0; }

/* the translation panel: raw field input on one side, finished documents on
   the other. The whole pitch is this one block, so it shows rather than tells */
.xlate {
  display: grid;
  gap: 24px;
  max-width: var(--wrap);
  margin: 0 auto;
  text-align: left;
}
.xl {
  background: var(--card);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.xl-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 20px;
  border-bottom: 1px solid var(--line);
}
.xl-k {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.xl + .xl .xl-k { color: var(--green); }
.xl-time { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.xl-body { display: grid; gap: 12px; align-content: start; padding: 20px; }

/* raw input, quoted the way it actually arrives, mess included */
.raw { padding: 14px 16px; background: var(--wash); border: 1px solid var(--line); border-radius: 10px; }
.raw-k {
  display: block;
  margin-bottom: 7px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--muted);
}
.raw p { font-size: 14.5px; line-height: 1.55; color: var(--body); }

/* finished output */
.out li { padding: 14px 0; border-bottom: 1px solid var(--line); }
.out li:first-child { padding-top: 0; }
.out li:last-child { padding-bottom: 0; border-bottom: 0; }
.o-d {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}
.o-d::before {
  content: '';
  width: 16px; height: 16px;
  margin-top: 2px;
  flex: none;
  background: var(--green);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
}
.o-s { display: block; margin-top: 4px; padding-left: 27px; font-size: 13px; color: var(--muted); }

.xlate-foot {
  max-width: var(--wrap);
  margin: 40px auto 0;
  color: #fff;
  font-size: clamp(20px, 3.2vw, 26px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.02em;
}

/* --------------------------------- bento -------------------------------- */
/* The reference leans on product graphics: a white card, a heading, then a
   pastel gradient panel with the actual UI mocked on it, bleeding off the
   bottom edge. Everything here is drawn in CSS. No screenshots exist yet. */
.bento { display: grid; gap: 24px; margin-bottom: 24px; }
.bento-card {
  display: flex;
  flex-direction: column;
  padding: 30px 30px 0;
  background: var(--card);
  border-radius: 20px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.bento-copy { max-width: 520px; }
.bento-card .art { margin-top: auto; }
.bento-card h3 { font-size: 23px; line-height: 1.2; }
.bento-sub { margin-top: 12px; font-size: 15.5px; color: var(--body); }

.art {
  position: relative;
  flex: 1;
  min-height: 300px;
  margin: 28px -30px 0;
  padding: 30px 30px 0;
  overflow: hidden;
}
.art-1 { background: linear-gradient(135deg, #ffd7bd 0%, #f0c9f7 42%, #c9d6ff 78%, #bfe6ff 100%); }
.art-2 { background: linear-gradient(150deg, #d6c9ff 0%, #b7c8ff 55%, #ffd9c9 100%); }

/* browser-ish window holding the finished document */
.win {
  background: #fff;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 30px 60px -20px rgba(10,37,64,.4), 0 12px 26px -14px rgba(0,0,0,.25);
  overflow: hidden;
}
.win-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 13px;
  background: #f6f9fc;
  border-bottom: 1px solid #e6ebf1;
}
.win-bar i { width: 8px; height: 8px; border-radius: 50%; background: #dfe4ec; }
.win-url {
  margin-left: 10px;
  padding: 3px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #e6ebf1;
  font-size: 10.5px;
  color: #697386;
}
.doc { padding: 20px 22px 26px; }
.doc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.doc-title { color: #0a2540; font-size: 17px; font-weight: 700; letter-spacing: -.015em; }
.doc-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(11,168,94,.1);
  color: #0ba85e;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.doc-badge::before {
  content: '';
  width: 11px; height: 11px;
  background: #0ba85e;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
}
.doc-meta { display: flex; flex-wrap: wrap; gap: 14px; margin: 8px 0 16px; font-size: 11.5px; color: #697386; }
.doc-row {
  display: grid;
  gap: 2px;
  padding: 11px 0;
  border-top: 1px solid #eef1f6;
}
.doc-row .k { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #8a97a8; }
.doc-row .v { font-size: 13.5px; color: #0a2540; }
.doc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.doc-tags em {
  padding: 4px 9px 4px 22px;
  background: #f6f9fc;
  border: 1px solid #e6ebf1;
  border-radius: 6px;
  font-size: 11.5px;
  font-style: normal;
  color: #425466;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23697386' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5 12.5 20a5 5 0 0 1-7-7l8.5-8.5a3.3 3.3 0 0 1 4.7 4.7L10 17.9a1.7 1.7 0 0 1-2.4-2.4l7.9-7.9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 6px center;
  background-size: 12px;
}

/* permit tracker */
.track {
  background: #fff;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 30px 60px -20px rgba(10,37,64,.4), 0 12px 26px -14px rgba(0,0,0,.25);
  overflow: hidden;
}
.track-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 18px;
  border-bottom: 1px solid #eef1f6;
}
.track-id { color: #0a2540; font-size: 14px; font-weight: 700; }
.track-pill {
  padding: 3px 10px;
  border-radius: 999px;
  background: #f0efff;
  color: #635bff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.steps { padding: 6px 18px 22px; }
.steps li {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0 11px 26px;
  color: #8a97a8;
  font-size: 13px;
}
.steps li span { font-size: 11px; color: #a6b1bf; white-space: nowrap; }
.steps li::before {
  content: '';
  position: absolute;
  left: 0; top: 14px;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid #dfe4ec;
  background: #fff;
}
/* the spine between the dots */
.steps li::after {
  content: '';
  position: absolute;
  left: 6.5px; top: 28px;
  width: 1px; height: calc(100% - 14px);
  background: #e6ebf1;
}
.steps li:last-child::after { display: none; }
.track-foot {
  padding: 14px 18px 22px;
  border-top: 1px solid #eef1f6;
  background: #f6f9fc;
  font-size: 12px;
  color: #697386;
}
.steps .done { color: #0a2540; }
.steps .done::before {
  border-color: #0ba85e;
  background: #0ba85e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/9px no-repeat;
}
.steps .now { color: #0a2540; font-weight: 600; }
.steps .now::before { border-color: #635bff; box-shadow: 0 0 0 4px rgba(99,91,255,.16); }
.steps .now span { color: #635bff; font-weight: 600; }

/* ------------------------------ what we handle ------------------------- */
.docs h3 { margin: 16px 0 8px; font-size: 20px; }
.docs p { font-size: 15px; }
.ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
}
.ico svg { width: 21px; height: 21px; stroke-width: 1.7; }

/* --------------------------- what exists today ------------------------- */
.opts .cell { display: grid; gap: 10px; align-content: start; }
.opt-k {
  position: relative;
  padding-left: 26px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.01em;
}
.opt-k::before {
  content: '';
  position: absolute;
  left: 0; top: 3px;
  width: 17px; height: 17px;
  background: #c9536a;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M15 9l-6 6M9 9l6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M15 9l-6 6M9 9l6 6'/%3E%3C/svg%3E") center/contain no-repeat;
}
.opts p { font-size: 14.5px; }

/* -------------------------------- why both ----------------------------- */
.why .cell { display: grid; gap: 12px; align-content: start; }
.why-k { font-size: 12.5px; font-weight: 700; letter-spacing: .075em; text-transform: uppercase; color: var(--muted); }
.why p { font-size: 15.5px; }
/* the one that is us gets the accent bar and the lift */
.why .is-us { box-shadow: var(--shadow-lg); overflow: hidden; }
.why .is-us::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, #00d4ff, var(--accent) 60%, #9d5cff);
}
.why .is-us .why-k { color: var(--accent); }
.why .is-us p { color: var(--ink); }

/* ------------------------------- packages ------------------------------ */
.plan { display: flex; flex-direction: column; }
.plan .ticks { margin-bottom: 26px; }
.plan h3 { font-size: 24px; }
.plan-who { margin-top: 8px; font-size: 14.5px; color: var(--muted); min-height: 44px; }
.plan-price { margin-top: 20px; color: var(--ink); font-size: 44px; font-weight: 700; line-height: 1; letter-spacing: -.03em; }
.plan-price .per { font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.plan-cta { margin-top: auto; align-self: stretch; }
.plan-alt {
  display: block;
  margin-top: 12px;
  text-align: center;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--muted);
  transition: color var(--t);
}
.plan-alt:hover { color: var(--accent); }
.plan-inc {
  display: block;
  margin: 22px 0 14px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.plan.is-pick { box-shadow: var(--shadow-lg); overflow: hidden; }
.plan.is-pick::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, #00d4ff, var(--accent) 60%, #9d5cff);
}
.plan-flag {
  position: absolute;
  top: 22px; right: 22px;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
}

.notes {
  display: grid;
  gap: 12px;
  margin-top: 26px;
  padding: 24px 26px;
  background: var(--card);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}
.notes li { position: relative; padding-left: 20px; font-size: 14.5px; color: var(--body); }
.notes li::before {
  content: '';
  position: absolute;
  left: 0; top: 10px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .5;
}

/* --------------------------------- never ------------------------------- */
.nevers .cell {
  display: flex;
  align-items: center;
  gap: 13px;
  font-size: 15.5px;
  font-weight: 500;
  color: var(--ink);
}
.nevers .cell::before {
  content: '';
  width: 18px; height: 18px;
  flex: none;
  background: var(--muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------------------------------- faq -------------------------------- */
.faq-grid { display: grid; gap: 34px; max-width: var(--wrap); margin: 0 auto; }
.faq-left h2 { margin-top: 14px; font-size: clamp(30px, 5.4vw, 44px); }
.faq-note { margin: 18px 0 20px; font-size: 16px; color: var(--body); }

.faq-right {
  background: var(--card);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 4px 26px;
}
.faq + .faq { border-top: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 62px;
  padding: 18px 0;
  list-style: none;
  cursor: pointer;
  color: var(--ink);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.01em;
  transition: color var(--t);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }
.pm { position: relative; flex: none; width: 26px; height: 26px; border-radius: 999px; background: var(--accent-soft); }
.pm::before, .pm::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 11px; height: 2px;
  margin: -1px 0 0 -5.5px;
  border-radius: 2px;
  background: var(--accent);
  transition: transform var(--t);
}
.pm::after { transform: rotate(90deg); }
.faq[open] .pm::after { transform: rotate(0); }
.faq-body { padding: 0 44px 20px 0; }
.faq-body p { font-size: 15.5px; color: var(--body); }
.faq[open] .faq-body { animation: fade 380ms cubic-bezier(.2,.7,.3,1) both; }
@keyframes fade { from { opacity: 0; transform: translateY(-4px); } }

/* --------------------------------- form -------------------------------- */
.cta-sec { padding-bottom: 90px; }
.cta-sec .sec-head { text-align: center; }
.form {
  max-width: 580px;
  margin: 0 auto;
  padding: 32px 28px;
  background: var(--card);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
}
.f-row { display: grid; gap: 16px; margin-bottom: 16px; }
.f { display: block; margin-bottom: 16px; }
.f-row .f { margin-bottom: 0; }
.f > span { display: block; margin-bottom: 7px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.f input, .f select {
  width: 100%;
  min-height: 48px;
  padding: 12px 15px;
  font-family: var(--sans);
  font-size: 16px;              /* 16px keeps iOS Safari from zooming */
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--t), box-shadow var(--t);
  -webkit-appearance: none;
  appearance: none;
}
.f select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23697386' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 17px;
  padding-right: 42px;
}
.f input:focus, .f select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(99,91,255,.22);
}
.f input::placeholder { color: var(--muted); }
.f.is-bad input, .f.is-bad select { border-color: #df1b41; }
.f-err { margin-bottom: 14px; font-size: 14.5px; color: #df1b41; }
.f-note { margin-top: 14px; text-align: center; font-size: 13px; color: var(--muted); }

.form-done {
  max-width: 580px;
  margin: 0 auto;
  padding: 56px 26px;
  text-align: center;
  background: var(--card);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
}
.form-done h3 { font-size: 34px; }
.form-done p { margin-top: 12px; font-size: 15.5px; color: var(--body); }

/* -------------------------------- footer ------------------------------- */
.foot {
  background: var(--wash);
  border-top: 1px solid var(--line);
  padding: 60px var(--pad) calc(28px + env(safe-area-inset-bottom));
  overflow: hidden;
}
.foot-top { display: grid; gap: 34px; max-width: var(--wrap); margin: 0 auto 48px; }
.foot-col { display: grid; gap: 11px; align-content: start; }
.foot-k { font-size: 12.5px; font-weight: 700; letter-spacing: .075em; text-transform: uppercase; color: var(--ink); }
.foot-col a { font-size: 14.5px; color: var(--body); transition: color var(--t); }
.foot-col a:hover { color: var(--accent); }
.foot-cta { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }

/* Drawn as SVG text stretched to exactly the column width. Sized in vw it
   overflowed the column on wide screens and got clipped by the viewport
   instead of ending where every other block ends. */
.foot-mark { max-width: var(--wrap); margin: 0 auto; }
.foot-mark svg { display: block; width: 100%; }
.foot-mark text {
  font-family: var(--sans);
  font-size: 128px;
  font-weight: 800;
  fill: var(--line);
  stroke: none;
  text-transform: uppercase;
}
.foot-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  max-width: var(--wrap);
  margin: 34px auto 0;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
}

/* --------------------------- mobile dock ------------------------------- */
/* The page is long on a phone and the only other call to action is a small
   pill in the header, so put one in the thumb zone once the hero is gone. */
.dock {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px var(--pad);
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  background: var(--card);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px rgba(10,37,64,.1);
  transform: translateY(110%);
  transition: transform 320ms cubic-bezier(.2,.7,.3,1);
}
.dock.is-up { transform: none; }
.dock-t { font-size: 13.5px; color: var(--body); }
.dock-t strong { color: var(--ink); font-weight: 700; }
.dock .btn { flex: none; }

/* -------------------------------- reveal ------------------------------- */
.rv { opacity: 0; }
.rv-head { transform: translateY(12px); }
.rv-in {
  opacity: 1;
  transform: none;
  transition: opacity 600ms cubic-bezier(.2,.7,.3,1), transform 600ms cubic-bezier(.2,.7,.3,1);
}


/* ================================ motion ================================ */
/* Everything here is slow, small and either loops calmly or fires once on
   scroll. Nothing bounces, nothing spins, and every bit of it is switched off
   under prefers-reduced-motion at the bottom of the file. */

/* the hero band drifts through its own colours, roughly one pass a minute */
.hero-grad {
  background-size: 220% 220%;
  animation: drift 46s ease-in-out infinite alternate;
}
@keyframes drift {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

/* whatever is being chased right now */
.steps .now::before, .office-rows .live::before { animation: pulse 2.6s ease-out infinite; }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(99,91,255,.34); }
  70%  { box-shadow: 0 0 0 9px rgba(99,91,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(99,91,255,0); }
}

/* cards answer to the cursor */
.plan, .bento-card, .docs .cell, .why .cell, .opts .cell {
  transition: transform var(--t), box-shadow var(--t);
}
.plan:hover, .bento-card:hover, .docs .cell:hover, .why .cell:hover, .opts .cell:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

/* the hero arrives in order: who it is for, what we do, the detail, the
   buttons, then the office panel beside them */
.hero-copy > * { animation: rise 720ms cubic-bezier(.2,.7,.3,1) both; }
.hero-copy > *:nth-child(1) { animation-delay: 60ms; }
.hero-copy > *:nth-child(2) { animation-delay: 140ms; }
.hero-copy > *:nth-child(3) { animation-delay: 230ms; }
.hero-copy > *:nth-child(4) { animation-delay: 320ms; }
.hero-art { animation: rise 820ms cubic-bezier(.2,.7,.3,1) 380ms both; }
@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
}

/* Rows that read as work being done arrive one at a time: the week filling
   in, the four steps, the documents going out, the permit progressing. */
.seq > * { opacity: 0; transform: translateY(8px); }
.seq.is-in > * {
  opacity: 1;
  transform: none;
  transition: opacity 440ms cubic-bezier(.2,.7,.3,1), transform 440ms cubic-bezier(.2,.7,.3,1);
}
.seq.is-in > *:nth-child(1) { transition-delay: 40ms; }
.seq.is-in > *:nth-child(2) { transition-delay: 120ms; }
.seq.is-in > *:nth-child(3) { transition-delay: 200ms; }
.seq.is-in > *:nth-child(4) { transition-delay: 280ms; }
.seq.is-in > *:nth-child(5) { transition-delay: 360ms; }
.seq.is-in > *:nth-child(6) { transition-delay: 440ms; }
.seq.is-in > *:nth-child(7) { transition-delay: 520ms; }
/* the panel is on screen at load, so its rows wait for it to arrive first */
/* An empty panel sitting there while the rows wait reads as broken, so it
   starts filling as soon as the panel itself has landed. */
.office-rows.is-in > *:nth-child(1) { transition-delay: 440ms; }
.office-rows.is-in > *:nth-child(2) { transition-delay: 520ms; }
.office-rows.is-in > *:nth-child(3) { transition-delay: 600ms; }
.office-rows.is-in > *:nth-child(4) { transition-delay: 680ms; }
.office-rows.is-in > *:nth-child(5) { transition-delay: 760ms; }
.office-rows.is-in > *:nth-child(6) { transition-delay: 840ms; }

/* grids come in one card at a time rather than as a slab */
.rv-stagger > * { opacity: 0; transform: translateY(16px); }
.rv-stagger.rv-in > * {
  opacity: 1;
  transform: none;
  transition: opacity 560ms cubic-bezier(.2,.7,.3,1), transform 560ms cubic-bezier(.2,.7,.3,1);
}
.rv-stagger.rv-in > *:nth-child(2) { transition-delay: 70ms; }
.rv-stagger.rv-in > *:nth-child(3) { transition-delay: 140ms; }
.rv-stagger.rv-in > *:nth-child(4) { transition-delay: 210ms; }
.rv-stagger.rv-in > *:nth-child(5) { transition-delay: 280ms; }
.rv-stagger.rv-in > *:nth-child(6) { transition-delay: 350ms; }

@media (max-width: 899px) {
  /* the dock covers the last stripe of the footer without this */
  body { padding-bottom: 72px; }
  .plan-who { min-height: 0; }
  .sec { padding: 60px var(--pad); }
  .sec-head { margin-bottom: 30px; }
  .cell { padding: 24px 22px; }
  .cells { gap: 16px; }
  .slab { margin: 90px 0; padding-top: 20px; }
  .slab::before { inset: -70px 0; }
  .xlate-foot { margin-top: 32px; }
  .form { padding: 24px 20px; }
  .faq-right { padding: 4px 20px; }
  .bento-card { padding: 24px 22px 0; }
  .art { margin: 22px -22px 0; padding: 24px 22px 0; min-height: 260px; }
  .art-1 .win { margin-top: 4px; }
}

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

/* ------------------------------ breakpoints ---------------------------- */
@media (min-width: 660px) {
  :root { --pad: 28px; }
  .cells-2 { grid-template-columns: 1fr 1fr; }
  .cells-3 { grid-template-columns: 1fr 1fr; }
  .cells-4 { grid-template-columns: 1fr 1fr; }
  .flow { grid-template-columns: 1fr 1fr; }
  .f-row { grid-template-columns: 1fr 1fr; }
  .sec { padding: 90px var(--pad); }
  .hero-in { padding: 84px var(--pad) 52px; }
}

@media (min-width: 900px) {
  .nav-links { display: flex; }
  .nav-burger { display: none; }
  .nav { padding-left: 24px; }

  .hero-in { grid-template-columns: 1fr 360px; gap: 52px; padding: 96px var(--pad) 56px; }
  .hero-grad { height: 1110px; }   /* finishes right at the hero's bottom edge */
  .hero-art { justify-self: end; }
  .sec { padding: 104px var(--pad); }
  .sec-head { margin-bottom: 48px; }
  .slab { padding: 60px var(--pad) 56px; }

  .cells-3 { grid-template-columns: repeat(3, 1fr); }
  .cells-4 { grid-template-columns: repeat(4, 1fr); }
  .cell { padding: 32px 30px; }
  /* in and out sit side by side, which is the whole point of the block */
  .xlate { grid-template-columns: 1fr 1fr; }
  .bento { grid-template-columns: 1.55fr 1fr; }
  .bento-card { padding: 34px 34px 0; }
  /* Both cards' art has to start on the same line whatever the copy above it
     wraps to, so the two cards share one row track rather than guessing at a
     min-height that only holds at one width. */
  /* Both cards are the same height because they share a grid row, so giving
     the art a fixed height and pinning it to the card's bottom makes the two
     graphics start and end on the same lines however the copy above wraps.
     A min-height on the copy only holds at the one width you measured. */
  .art { height: 438px; min-height: 0; flex: none; }
  .art { margin: 30px -34px 0; padding: 34px 34px 0; min-height: 340px; }
  /* the voice-note chip overlaps the document's left edge, so make room */
  .art-1 .win { margin-left: 44px; }

  .faq-grid { grid-template-columns: 360px 1fr; gap: 56px; }
  .faq-left { position: sticky; top: 110px; align-self: start; }

  .foot-top { grid-template-columns: 1fr 1fr 1fr; }
  .foot-cta { justify-content: flex-end; }
}

@media (min-width: 1100px) {
  .flow { grid-template-columns: repeat(4, 1fr); }
  .hero-in { grid-template-columns: 1fr 420px; gap: 64px; }
}

@media (min-width: 900px) {
  /* Statement lines keep their box on the column and cap the measure with
     padding, so they start where the cards start without running 1180 wide. */
  .pains-foot { padding-right: 22%; }
  .xlate-foot { padding-right: 26%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv { opacity: 1; transform: none; }
  .rv-stagger > * { opacity: 1; transform: none; }
  .plan:hover, .bento-card:hover, .docs .cell:hover,
  .why .cell:hover, .opts .cell:hover { transform: none; }
  .seq > *, .hero-copy > *, .hero-art { opacity: 1; transform: none; }
  *, *::before, *::after {
    animation: none !important;
    transition-duration: .001ms !important;
  }
}