:root {
  --green-dark: #0b6b3a;
  --green: #2dcc70;
  --green-tint: #eaf4ee;
  --green-arrow: #8fcba8;
  --ink: #10365c;
  --nav-link: #33475b;
  --body: #55677a;
  --muted: #6b7a87;
  --muted-2: #7b8a96;
  --muted-3: #93a2ae;
  --muted-4: #8a98a5;
  --line: #e9eeeb;
  --line-2: #edf1ef;
  --line-3: #dde4e0;
  --line-4: #d6deda;
  --panel: #f2f5f3;
  --panel-2: #f6f8f7;
  --red: #d14343;
  --red-arrow: #e6a9a9;
  --navy: #274379;
  --blue: #1548aa;
  --radius: 20px;
  --radius-card: 16px;
  --radius-sm: 14px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  font-family: "Plus Jakarta Sans", Helvetica, Arial, sans-serif;
  line-height: 1.6;
  color: var(--body);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--green-dark);
  text-decoration: none;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.ico {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

h1,
h2,
h3,
h5 {
  color: var(--ink);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.wrap {
  width: 100%;
  max-width: min(1600px, 94vw);
  margin: 0 auto;
}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: 9px;
  font-size: 0.96875rem;
  font-weight: 700;
  white-space: nowrap;
  transition:
    background 0.18s,
    border-color 0.18s,
    color 0.18s;
}

.btn .ico {
  width: 17px;
  height: 17px;
}

.btn-primary {
  background: var(--green);
  color: var(--ink);
}

.btn-primary:hover {
  background: #28b463;
  color: var(--ink);
}

.btn-ghost {
  border: 1.5px solid var(--line-4);
  color: var(--ink);
}

.btn-ghost .ico {
  color: var(--green-dark);
}

.btn-ghost:hover {
  border-color: var(--green);
  color: var(--ink);
}

.btn-white {
  background: #fff;
  color: var(--green-dark);
  flex: none;
}

.btn-white:hover {
  background: var(--green-tint);
  color: var(--green-dark);
}

/* ── Nav ── */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 18px 40px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

/* Crop window over the icon block, at x 419-884, y 157-493 of the 1253x934 source. */
.brand-mark {
  position: relative;
  width: 40px;
  height: 29px;
  overflow: hidden;
  flex: none;
}

.brand-mark img {
  position: absolute;
  width: 107.8px; /* 1253px source scaled by 40/465 so the icon spans the window */
  max-width: none;
  left: -36px;
  top: -13.5px;
}

.brand-name {
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--blue);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 34px;
  list-style: none;
}

/* :not(.btn) so this never outranks the CTA's own colour and type — the mobile menu
   puts a .btn-primary inside this list. */
.nav-links a:not(.btn) {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--nav-link);
  transition: color 0.18s;
}

.nav-links a:not(.btn):hover {
  color: var(--green-dark);
}

.nav-links-cta {
  display: none;
}

.nav-cta {
  flex: none;
  padding: 13px 22px;
  font-size: 0.9375rem;
}

.nav-actions {
  display: flex;
  gap: 12px;
  flex: none;
}

/* Same 1.5px border as the ghost button beside it, so the pair matches in height. */
.nav-actions .btn-primary,
.nav-links-cta .btn-primary {
  border: 1.5px solid transparent;
}

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  color: var(--ink);
  cursor: pointer;
  padding: 4px;
}

/* ── Hero ── */
.hero {
  padding-top: 78px;
}

.hero-inner {
  display: grid;
  grid-template-columns: 0.86fr 1.14fr;
  gap: 16px;
  align-items: center;
  padding: 12px 40px 0;
}

/* Equal margins keep the copy centred beside a taller image, and off the nav when it's taller. */
.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  margin-block: 24px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line-3);
  border-radius: 8px;
  padding: 8px 13px;
  font-size: 0.84375rem;
  font-weight: 600;
  color: var(--nav-link);
}

.pill-flag {
  width: 22px;
  height: 11px;
  flex: none;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(16, 54, 92, 0.12);
}

.hero h1 {
  font-size: clamp(2.5rem, 4.7vw, 3.5rem);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.accent {
  color: var(--green);
}

.hero-lede {
  font-size: 1.03125rem;
  line-height: 1.65;
  max-width: 25rem;
  text-wrap: pretty;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.hero-app {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hero-app-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted);
}

/* Store rules: App Store badge first, equal heights, gap at least a quarter of the height. */
.store-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.store-badge {
  flex: none;
}

/* No max-width, so a tight column can never squash a badge out of proportion. */
.store-badge img {
  width: auto;
  max-width: none;
  height: 48px;
}

.hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: min(855px, 75vh);
  margin-inline: auto;
}

.hero-visual img {
  width: calc(100% + 40px);
  max-width: none;
  margin-right: -40px;
}

/* ── Hero value props ── */
.props {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  list-style: none;
  max-width: 800px;
  padding: 28px 40px 32px;
}

.prop {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

/* Box-sizing is border-box, so the padding insets the 24x24 glyph inside the circle. */
.prop-ico {
  width: 42px;
  height: 42px;
  padding: 9px;
  border-radius: 50%;
  background: var(--green-tint);
  color: var(--green);
}

.prop h3 {
  font-size: 0.875rem;
  font-weight: 700;
}

.prop p {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--muted-2);
}

/* ── Panels ── */
.panel {
  background: var(--panel);
  border-radius: var(--radius);
  padding: 40px;
  margin: 0 24px 24px;
}

.panel-plain {
  background: #fff;
  border: 1px solid var(--line-2);
  padding: 34px 32px;
}

.eyebrow {
  font-size: 0.78125rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green);
}

.panel > .eyebrow {
  text-align: center;
}

.panel-title {
  margin: 12px 0 40px;
  text-align: center;
  font-size: 1.875rem;
  font-weight: 800;
  /* Centred headings wrap lopsidedly once they run past one line. */
  text-wrap: balance;
}

.panel-title-tall {
  line-height: 1.3;
  margin-bottom: 34px;
}

/* ── Steps ── */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto;
  gap: 34px 22px;
  list-style: none;
}

/* Verify & Sign: a column per party, each running verify -> signature -> signed.
   The parallel columns carry the "independently, no waiting" idea on their own. */
.party-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.party {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
  text-align: center;
}

.party .scribble {
  width: 100%;
}

.party-state {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--ink);
}

.party-state .ico {
  width: 14px;
  height: 14px;
  color: var(--green);
}

.party-signed {
  color: var(--green-dark);
}

.step {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
}

.step-body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

/* Dashed connector from each step's circle to the next. */
.step:not(:last-child) .step-body::before,
.step:not(:last-child) .step-body::after {
  content: "";
  position: absolute;
  top: 22px;
  border-color: #9ccbb0;
}

.step:not(:last-child) .step-body::before {
  left: calc(50% + 25px);
  width: calc(100% - 28px);
  border-top: 1.5px dashed #9ccbb0;
}

/* Arrowhead sitting at the far end of each dash run. */
.step:not(:last-child) .step-body::after {
  left: calc(150% - 8px);
  width: 5px;
  height: 5px;
  border-top: 1.5px solid #9ccbb0;
  border-right: 1.5px solid #9ccbb0;
  transform: translateY(-50%) rotate(45deg);
}

.step-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--green);
  background: var(--panel);
}

.step-word {
  font-size: 0.5625rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}

.step-num {
  font-size: 0.75rem;
  line-height: 1;
  font-weight: 700;
  color: var(--ink);
}

/* Four columns instead of five */
.step-ico {
  width: 36px;
  height: 36px;
  stroke-width: 1.6;
  color: var(--green);
}

.step h3 {
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green-dark);
}

.step-body p {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--muted);
}

/* ── Step illustrations ── */
.shot {
  width: 100%;
  text-align: left;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.shot-strong {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--ink);
}

.shot-mute {
  font-size: 0.625rem;
  color: var(--muted-3);
}

.shot-foot {
  font-size: 0.625rem;
  color: var(--muted-3);
  text-align: center;
  margin-top: auto;
}

/* 01 — review details */
.shot-phone {
  gap: 0;
}

.mini-title {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--ink);
}

.mini-label {
  font-size: 0.625rem;
  color: var(--muted-3);
  margin-top: 10px;
}

.mini-gap {
  margin-top: 12px;
}

.mini-strong {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.4;
}

.mini-btn {
  display: block;
  margin-top: auto;
  background: var(--blue);
  color: #fff;
  border-radius: 6px;
  padding: 7px;
  text-align: center;
  font-size: 0.6875rem;
  font-weight: 700;
}

/* 02 — Verify & Sign parties */
.avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  flex: none;
  object-fit: cover;
  object-position: center top;
  background: repeating-linear-gradient(
    45deg,
    #e6ebe8 0 4px,
    #f4f7f5 4px 8px
  );
}

.verify-role {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--green);
}

/* 03 — signatures */
.scribble {
  width: 100%;
  height: 26px;
  margin: 2px 0;
  fill: none;
  stroke: var(--muted-3);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.scribble path {
  vector-effect: non-scaling-stroke;
}

/* 04 — WhatsApp notice */
.shot-wa {
  gap: 0;
}

.wa-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line-2);
}

.wa-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  flex: none;
}

.wa-ico .ico {
  width: 10px;
  height: 10px;
}

.wa-head .shot-mute {
  margin-left: auto;
}

.wa-msg {
  font-size: 0.6875rem;
  line-height: 1.6;
  color: var(--nav-link);
  margin-top: 10px;
}

.wa-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  margin-top: auto;
  align-self: flex-end;
}

.wa-send .ico {
  width: 15px;
  height: 15px;
}

/* 05 — completed package */
.shot-done {
  gap: 8px;
}

.done-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--green-dark);
}

.done-head .ico {
  width: 14px;
  height: 14px;
  color: var(--green);
}

.file-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 2px;
}

.file-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
}

.file-row > span:nth-child(2) {
  flex: 1;
}

.file-tag {
  font-size: 0.5625rem;
  font-weight: 700;
  color: var(--red);
  background: #fcecec;
  border-radius: 2px;
  padding: 1px 3px;
  flex: none;
}

.file-dl {
  width: 13px;
  height: 13px;
  color: var(--blue);
  flex: none;
}

.done-notes {
  border-top: 1px solid var(--line-2);
  padding-top: 8px;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.done-notes p {
  font-size: 0.625rem;
  color: var(--body);
  padding-left: 10px;
  position: relative;
}

.done-notes p::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  border: 1px solid var(--green);
}

/* ── Why Zurely comparison ── */
/* One card, not two. Both columns hang off the same top edge, so where each one stops is
   read against a shared baseline — the empty space under the Zurely column is the
   argument the section is making. */
.compare {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  align-items: stretch;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 22px 8px 26px;
}

/* Column, not card. Flex so the payoff line can sink to the foot. min-width: 0 because
   a grid item defaults to min-content, which would let a long label widen the column
   past its 1fr share instead of wrapping. */
.lane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0 20px;
}

.lane-title {
  text-align: center;
  font-size: 0.78125rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.lane-title-old {
  color: var(--red);
}

.lane-title-new {
  color: var(--green-dark);
}

/* Vertical spine: a dashed rule down the icon column, same language as the connector in
   "How Zurely Works". Each icon sits on a white disc that breaks the rule, so the column
   reads as a sequence of nodes rather than a list. Shrink-wrapped and centred. */
.flow {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 34px;
  list-style: none;
  width: fit-content;
  margin-inline: auto;
}

.flow::before {
  content: "";
  position: absolute;
  left: 40px;
  top: 14px;
  bottom: 14px;
  border-left: 1.5px dashed var(--red-arrow);
}

.lane-new .flow::before {
  border-left-color: var(--green-arrow);
}

.flow > li {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  text-align: left;
}

/* Counting without measuring — quiet, because the column lengths already argue. */
.step-n {
  flex: none;
  width: 14px;
  text-align: right;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--muted-3);
}

.flow-ico {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  background: #fff;
  color: var(--red);
}

.lane-new .flow-ico {
  color: var(--green);
}

.flow-ico .ico {
  width: 16px;
  height: 16px;
}

.flow-label {
  display: block;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--muted);
}

/* Centred on the lane titles, so it reads as the hinge between the two halves. Both the
   badge and the titles start at the grid's content top, so the offset is half the
   difference between the 20px title line box and the 46px badge. */
.vs {
  align-self: start;
  margin-top: -13px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--panel);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--muted-4);
}

/* Sinks to the foot of its column so it lands level with the usual way's last chore,
   leaving the gap above it clean. */
.lane-foot {
  text-align: center;
  margin-top: auto;
  padding-top: 16px;
  font-size: 0.78125rem;
  font-weight: 700;
  color: var(--green);
}

/* ── About ── */
.about {
  display: grid;
  grid-template-columns: 1.15fr 0.95fr 1fr;
  gap: 28px;
  align-items: start;
}

.about-copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.about-copy p {
  font-size: 0.78125rem;
  line-height: 1.7;
}

.about-title {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.3;
  margin: 0 0 6px;
}

.about-kicker {
  color: var(--green);
  font-weight: 700;
}

.founder {
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-card);
  padding: 16px;
  display: flex;
  gap: 14px;
}

.founder-photo {
  width: 96px;
  height: 118px;
  flex: none;
  border-radius: 12px;
  overflow: hidden;
  background: repeating-linear-gradient(
    45deg,
    #e6ebe8 0 6px,
    #f4f7f5 6px 12px
  );
}

.founder-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.founder-name {
  font-size: 0.9375rem;
  font-weight: 800;
  color: var(--ink);
}

.founder-role {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--green);
  margin-top: 2px;
}

.founder-bio,
.founder-badge {
  font-size: 0.75rem;
  line-height: 1.6;
  margin-top: 10px;
}

.founder-bio {
  color: var(--muted);
}

.founder-badge {
  color: var(--muted-3);
}

.ambitions {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
}

.ambitions li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.amb-ico {
  width: 42px;
  height: 42px;
  padding: 9px;
  border-radius: 50%;
  background: var(--green-tint);
  color: var(--green);
}

.ambitions p {
  font-size: 0.78125rem;
  line-height: 1.65;
}

/* ── PDPA band ── */
.pdpa {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 30px 34px;
  overflow: hidden;
}

.pdpa-shield {
  width: 46px;
  height: 46px;
  stroke-width: 1.5;
  color: var(--green);
}

.pdpa-copy {
  flex: 1;
}

.pdpa h3 {
  font-size: 1.1875rem;
  font-weight: 800;
}

.pdpa p {
  font-size: 0.8125rem;
  line-height: 1.65;
  margin-top: 8px;
  max-width: 26rem;
}

.pdpa-tile {
  flex: none;
  width: 74px;
  height: 74px;
  border-radius: var(--radius-card);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--green-tint);
  color: var(--green-dark);
}

.pdpa-tile .ico {
  width: 34px;
  height: 34px;
}

/* ── Closing CTA ── */
.cta {
  background: var(--green);
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 30px 34px;
}

.cta-ico {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: #fff;
  color: var(--green-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.cta-ico .ico {
  width: 28px;
  height: 28px;
}

.cta-copy {
  flex: 1;
}

.cta h2 {
  font-size: 1.3125rem;
  font-weight: 800;
  color: var(--ink);
}

.cta p {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: rgba(16, 54, 92, 0.92);
  margin-top: 6px;
  max-width: 40rem; /* 13px text would otherwise run a 1000px+ line on a wide screen */
}

/* ── Footer ── */
.footer {
  background: var(--navy);
  padding: 34px 0 22px;
  margin-top: 10px;
}

.footer .wrap {
  padding: 0 40px;
}

.footer-cols {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr 1.6fr;
  gap: 20px;
}

/* No column heading here — the entity line leads instead. */
.footer-entity {
  font-size: 0.78125rem;
  font-weight: 600;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}

.footer .brand-name {
  font-size: 1.25rem;
  color: #fff;
}

.footer-brand p {
  font-size: 0.78125rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
  margin-top: 10px;
}

.footer-brand .store-badges {
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
}

.footer-brand .store-badge img {
  height: 40px;
}

.footer-col h5 {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
}

.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 12px;
}

.footer-col a,
.footer-plain {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78125rem;
  color: rgba(255, 255, 255, 0.85);
  transition: color 0.18s;
}

.footer-col a:hover {
  color: #fff;
}

.footer-col .ico {
  width: 13px;
  height: 13px;
}

.footer-bottom {
  margin-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: 14px;
  text-align: center;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.62);
}

/* ── Sub-pages (support, privacy policy, terms of service) ── */
/* Only the sub-pages use .container; index.html lays out with .wrap. */
/* Sub-page content shares the nav/footer grid — same max-width, same 40px inset — so
   every page's left and right edges line up with the nav brand and CTA. */
.container {
  width: 100%;
  max-width: min(1600px, 94vw);
  margin: 0 auto;
  padding: 0 40px;
}

/* Long-form pages keep a short measure and stay centred in the grid — a 900px column
   pinned left reads lopsided on a wide monitor. */
.container > * {
  max-width: 900px;
  margin-inline: auto;
}

/* Tinted band behind the content column, so the centred card reads as a document on a
   page rather than floating in white space on a large screen. */
.page-main {
  padding: 122px 0 72px;
  background: var(--panel-2);
}

.page-head {
  text-align: center;
  margin-bottom: 36px;
}

.page-head h1 {
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.page-head p {
  font-size: 1.03125rem;
  margin-top: 12px;
}

.page-card {
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 36px 32px;
  box-shadow: 0 6px 24px rgba(16, 54, 92, 0.05);
}

.page-card h2 {
  font-size: 1.25rem;
  font-weight: 800;
  margin-bottom: 22px;
}

/* ── Forms ── */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

/* Spacing between top-level form blocks only — fields inside a .form-row are
   spaced by the grid gap, so this must not reach them. */
form > * + * {
  margin-top: 18px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.field label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink);
}

.field input,
.field select,
.field textarea {
  font: inherit;
  font-size: 0.9375rem;
  color: var(--ink);
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line-3);
  border-radius: 9px;
  background: #fff;
  transition:
    border-color 0.18s,
    box-shadow 0.18s;
}

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

.field select {
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355677a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 17px;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--muted-3);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(45, 204, 112, 0.14);
}

.form-submit {
  width: 100%;
  margin-top: 22px;
  border: 0;
  cursor: pointer;
}

.form-status {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 9px;
  font-size: 0.8125rem;
}

.form-status.success {
  background: var(--green-tint);
  color: var(--green-dark);
}

.form-status.error {
  background: #fdf0ef;
  color: var(--red);
}

/* Legal copy is fetched from zurely-docs at runtime, so show a spinner until it lands. */
zero-md[loading] {
  display: block;
  min-height: 120px;
  position: relative;
}

zero-md[loading]::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border: 3px solid var(--line);
  border-top-color: var(--green);
  border-radius: 50%;
  animation: zm-spin 0.9s linear infinite;
}

@keyframes zm-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ── Book a demo ── */
.demo-wrap {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 52px;
  align-items: start;
  max-width: min(1600px, 94vw);
  margin: 0 auto;
  padding: 0 40px;
}

.demo-copy h1 {
  font-size: clamp(2.1rem, 4vw, 2.9rem);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 22px 0 18px;
}

.demo-lede {
  font-size: 1rem;
  line-height: 1.7;
  max-width: 26rem;
}

.demo-points {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-top: 34px;
}

.demo-points li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.demo-points h3 {
  font-size: 0.9375rem;
  font-weight: 700;
  margin-bottom: 3px;
}

.demo-points p {
  font-size: 0.84375rem;
  line-height: 1.6;
  color: var(--muted);
}

/* Required marker sits after the label, per the project convention. */
.req {
  color: var(--red);
  margin-left: 2px;
}

.field-optional {
  color: var(--muted-3);
  font-weight: 400;
}

.form-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-top: 14px;
  font-size: 0.78125rem;
  line-height: 1.6;
  color: var(--muted-3);
}

.form-note .ico {
  width: 15px;
  height: 15px;
  flex: none;
  margin-top: 2px;
}

/* ── Notes list ── */
.page-notes {
  margin-top: 28px;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 0.875rem;
  line-height: 1.7;
}

.page-notes ul {
  margin: 8px 0 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.page-notes li::marker {
  color: var(--green);
}

.page-notes a {
  font-weight: 600;
}

.page-notes a:hover {
  text-decoration: underline;
}

/* ── Responsive ── */
@media (max-width: 1080px) {
  /* Tighter nav spacing from here down keeps Agent Login beside Book a Demo. */
  .nav-inner {
    padding: 16px 24px;
    gap: 20px;
  }

  .nav-links {
    gap: 22px;
  }

  .nav-cta {
    padding: 11px 18px;
  }

  .hero-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .hero-copy {
    margin-block: 0;
  }

  /* Stacked, so cap the measure rather than letting the line run the full width. */
  .hero-lede {
    max-width: 34rem;
  }

  /* Stacked, so cap and centre the render. */
  .hero-visual {
    max-width: 840px;
    margin: 0 auto;
  }

  .hero-visual img {
    width: 100%;
    margin-right: 0;
  }

  .props {
    max-width: none;
  }

  /* Below the 4-across layout each step just stacks its own card, so drop the subgrid.
     Two columns keeps the four steps as a clean 2x2 with no orphan. */
  .steps {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: none;
    gap: 40px 22px;
  }

  .step {
    display: flex;
    flex-direction: column;
    grid-row: auto;
    gap: 22px;
  }

  /* Steps wrap onto multiple rows here, so the horizontal connector no longer holds. */
  .step-body::before,
  .step-body::after {
    display: none;
  }

  .about {
    grid-template-columns: 1fr 1fr;
  }

  .ambitions {
    grid-column: 1 / -1;
    flex-direction: row;
  }
}

@media (max-width: 900px) {
  /* ── Nav collapses to the hamburger here — below this Agent Login no longer fits ── */
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 24px 20px;
    background: #fff;
    border-bottom: 1px solid var(--line);
  }

  .nav-links.open {
    display: flex;
  }

  .nav-links li {
    padding: 12px 0;
  }

  .nav-links-cta {
    display: block;
    padding-top: 16px;
  }

  .nav-links-cta .btn {
    width: 100%;
  }

  .nav-links-cta + .nav-links-cta {
    padding-top: 0;
  }

  .nav-actions {
    display: none;
  }

  .nav-toggle {
    display: block;
  }

  .hero-inner,
  .props,
  .container,
  .demo-wrap {
    padding-left: 24px;
    padding-right: 24px;
  }

  /* Two columns get too cramped here — copy above, form below. */
  .demo-wrap {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 22px;
  }

  .props {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 24px;
  }

  .panel {
    margin: 0 16px 16px;
    padding: 32px 24px;
  }

  .pdpa,
  .cta {
    flex-direction: column;
    align-items: flex-start;
  }

  .pdpa-tile {
    align-self: flex-end;
  }

  .footer .wrap {
    padding: 0 24px;
  }

  .footer-cols {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px 20px;
  }
}

@media (max-width: 700px) {
  .about,
  .steps {
    grid-template-columns: 1fr;
  }

  /* One step per row: keep it to a readable column instead of stretching the card
     to the full panel width. */
  .step {
    max-width: 420px;
    margin-inline: auto;
  }


  .ambitions {
    flex-direction: column;
  }

  .founder {
    flex-direction: column;
  }

  /* The columns stay side by side at every width — stacked, the two lanes stop being a
     comparison and become two lists. Paid for with tighter insets on this panel alone
     and smaller rows, which buys each column about 147px at 390px wide. */
  .panel-compare {
    margin-inline: 8px;
    padding-inline: 10px;
  }

  .compare {
    padding: 16px 2px 20px;
  }

  .lane {
    padding: 0 6px;
  }

  .lane-title {
    font-size: 0.625rem;
    letter-spacing: 0.06em;
    margin-bottom: 14px;
  }

  .vs {
    width: 30px;
    height: 30px;
    margin-top: -8px;
    font-size: 0.5625rem;
  }

  .flow {
    gap: 26px;
  }

  .flow > li {
    gap: 7px;
  }

  /* Icon column centre: 9px number + 7px gap + half of a 24px disc. */
  .flow::before {
    left: 28px;
  }

  .step-n {
    width: 9px;
    font-size: 0.5625rem;
  }

  .flow-ico {
    width: 24px;
    height: 24px;
  }

  .flow-ico .ico {
    width: 13px;
    height: 13px;
  }

  .flow-label {
    font-size: 0.6875rem;
    line-height: 1.3;
    /* Last resort at the narrowest widths — nothing may escape the card. */
    overflow-wrap: break-word;
  }

  .lane-foot {
    font-size: 0.6875rem;
  }
}

/* Small phones: buy back about 30px of column width so the longest labels still wrap on
   whole words rather than breaking mid-word. */
@media (max-width: 380px) {
  .lane {
    padding: 0 3px;
  }

  .vs {
    width: 26px;
    height: 26px;
    margin-top: -6px;
  }

  .flow > li {
    gap: 5px;
  }

  .flow::before {
    left: 24px;
  }

  .flow-ico {
    width: 21px;
    height: 21px;
  }

  .flow-ico .ico {
    width: 12px;
    height: 12px;
  }

  .panel-title {
    font-size: 1.5rem;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .page-main {
    padding: 104px 0 56px;
  }

  .page-card {
    padding: 26px 20px;
  }

  .btn {
    width: 100%;
  }

  .hero-actions {
    align-self: stretch;
    flex-direction: column;
  }

  /* Card text is sized for the 1200px artboard; lift it to readable sizes here. */
  .shot-strong,
  .verify-role,
  .party-state,
  .mini-title,
  .done-head {
    font-size: 0.8125rem;
  }

  .avatar {
    width: 46px;
    height: 46px;
  }

  .shot-mute,
  .shot-foot,
  .mini-label,
  .file-row,
  .done-notes p {
    font-size: 0.75rem;
  }

  .mini-strong,
  .wa-msg {
    font-size: 0.8125rem;
  }

  .file-tag {
    font-size: 0.5625rem;
  }
}

@media (max-width: 520px) {
  .props {
    gap: 24px 16px;
  }

  .hero-app .store-badges {
    gap: 10px;
  }

  .hero-app .store-badge img {
    height: 40px;
  }

  .footer-cols {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Below 360px a two-column footer cell is narrower than the 135px Google Play badge. */
@media (max-width: 359px) {
  .footer-brand {
    grid-column: 1 / -1;
  }
}