:root {
  --demo-green: #167b3a;
  --demo-green-dark: #0e5e2b;
  --demo-navy: #12355a;
  --demo-ink: #17212b;
  --demo-muted: #5a6875;
  --demo-line: #d9e2dd;
  --demo-pale: #f1f8f3;
}

.demo-hero { padding: 38px 0 42px; }
.demo-hero h1 { max-width: 760px; font-size: clamp(2rem, 5vw, 3.25rem); }
.demo-hero p:last-child { max-width: 780px; font-size: 1.05rem; }
.eyebrow { margin: 0 0 8px; font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow.green { color: var(--demo-green); }
.demo-main { padding-top: 30px; }

.demo-notice {
  max-width: 920px;
  margin: 0 auto 36px;
  padding: 15px 18px;
  border: 1px solid #ead797;
  border-left: 5px solid #e3a721;
  border-radius: 6px;
  background: #fff9e8;
}

.walkthrough {
  display: grid;
  grid-template-columns: minmax(290px, .9fr) minmax(360px, 1.1fr);
  gap: clamp(32px, 7vw, 84px);
  align-items: start;
}

.walkthrough-copy { position: sticky; top: 24px; padding-top: 20px; }
.walkthrough-copy h2, .demo-next-step h2 { margin: 0 0 12px; color: var(--demo-ink); font-size: clamp(1.7rem, 3vw, 2.35rem); line-height: 1.15; }
.walkthrough-intro { color: var(--demo-muted); font-size: 1rem; }
.demo-step-list { margin: 28px 0; padding: 0; list-style: none; }
.demo-step-list li + li { margin-top: 8px; }

.demo-step-button {
  display: grid;
  grid-template-columns: 42px 1fr;
  grid-template-rows: auto auto;
  width: 100%;
  min-height: 58px;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--demo-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.demo-step-button:hover { background: #f6f9f7; }
.demo-step-button:focus-visible, .phone-primary:focus-visible, .demo-control:focus-visible, .country-options button:focus-visible, .category-grid button:focus-visible { outline: 3px solid #ffb326; outline-offset: 3px; }
.demo-step-button > span { grid-row: 1 / 3; display: grid; place-items: center; align-self: center; width: 32px; height: 32px; border-radius: 50%; background: #e5eee8; color: var(--demo-green-dark); font-weight: 700; }
.demo-step-button strong { font-size: .97rem; }
.demo-step-button small { color: var(--demo-muted); font-size: .79rem; }
.demo-step-button.is-current { border-color: #b8d7c1; background: var(--demo-pale); }
.demo-step-button.is-current > span { background: var(--demo-green); color: #fff; }

.demo-guidance { padding: 18px 20px; border-left: 4px solid var(--demo-green); background: #f6f9f7; }
.demo-guidance h3 { margin-bottom: 8px; font-weight: 700; }
.demo-guidance ul { margin: 0; padding-left: 20px; color: var(--demo-muted); }
.phone-demo { min-width: 0; }

.phone-shell {
  position: relative;
  width: min(390px, 100%);
  margin: 0 auto;
  padding: 11px;
  border: 2px solid #202428;
  border-radius: 54px;
  background: linear-gradient(145deg, #131517, #494d50 47%, #0d0f10);
  box-shadow: 0 26px 60px rgba(17, 40, 27, .22), inset 0 0 0 2px #858a8e;
}

.phone-hardware { position: absolute; z-index: 5; top: 16px; left: 50%; width: 42%; height: 27px; border-radius: 0 0 18px 18px; background: #090a0a; transform: translateX(-50%); }
.phone-hardware span { position: absolute; top: 8px; left: 50%; width: 40px; height: 5px; border-radius: 5px; background: #22272a; transform: translateX(-50%); }
.phone-display { overflow: hidden; min-height: 700px; border-radius: 43px; background: #fff; }
.phone-status { display: flex; justify-content: space-between; height: 33px; padding: 10px 22px 0; color: #111; font-size: .69rem; font-weight: 700; }
.status-icons { font-size: .55rem; letter-spacing: 1px; }
.phone-appbar { display: flex; align-items: center; justify-content: space-between; height: 70px; padding: 8px 18px 10px; border-bottom: 1px solid #e6ece8; }
.phone-appbar img { width: 205px; max-width: 76%; height: 58px; object-fit: contain; object-position: left center; }
.phone-display.shows-supplied-image .phone-appbar { display: none; }
.phone-menu { display: grid; gap: 4px; width: 27px; }
.phone-menu i { height: 3px; border-radius: 2px; background: #17212b; }
.phone-screens { position: relative; }
.phone-screen { min-height: 597px; padding: 22px 20px 24px; animation: phone-screen-in 220ms ease-out; }
.phone-screen[hidden] { display: none; }
.phone-screen.supplied-screen-page { min-height: 0; padding: 0; background: #fff; }
.demo-supplied-image { display: block; width: 100%; height: auto; }

@keyframes phone-screen-in {
  from { opacity: 0; transform: translateX(9px); }
  to { opacity: 1; transform: translateX(0); }
}

.phone-cover { overflow: hidden; margin: -22px -20px 0; color: #fff; background: #075b65; }
.cover-sky { position: relative; overflow: hidden; height: 165px; background: linear-gradient(#73c8f0 0 53%, #1b8eaa 54% 70%, #0a697c 71%); }
.cover-sun { position: absolute; top: 22px; right: 30px; width: 44px; height: 44px; border-radius: 50%; background: #ffd76b; box-shadow: 0 0 0 12px rgba(255,255,255,.12); }
.cover-hill { position: absolute; bottom: 39px; width: 210px; height: 105px; border-radius: 60% 70% 12% 0; transform: rotate(-5deg); }
.hill-one { left: -40px; background: #237a4c; }
.hill-two { right: -55px; height: 122px; background: #135e42; transform: rotate(6deg); }
.cover-water { position: absolute; right: 0; bottom: 0; left: 0; height: 42px; background: linear-gradient(8deg,#0b6a79,#25abc2); }
.cover-content { padding: 22px 22px 25px; background: linear-gradient(150deg, #064a4f, #083e54); }
.phone-kicker { margin: 0 0 5px; color: var(--demo-green); font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.cover-content .phone-kicker { color: #9ce3b4; }
.screen-title { margin: 0 0 7px; color: var(--demo-ink); font-size: 1.5rem; font-weight: 700; line-height: 1.08; }
.cover-content .screen-title { color: #fff; font-size: 1.85rem; }
.cover-content p:not(.phone-kicker) { margin-bottom: 16px; font-size: .86rem; line-height: 1.42; }

.phone-primary { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 45px; padding: 10px 16px; border: 0; border-radius: 24px; background: #16a742; color: #fff; font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer; }
.phone-primary:hover { background: #0e8c35; }
.phone-benefits { padding: 18px 2px 0; }
.phone-benefits > div { display: flex; align-items: center; gap: 11px; padding: 9px 0; }
.benefit-icon { display: grid; flex: 0 0 42px; place-items: center; height: 42px; border-radius: 13px; font-size: 1.25rem; font-weight: 700; }
.green-icon { background: #e0f4e5; color: #15953a; }
.blue-icon { background: #dff1fb; color: #1683bf; }
.phone-benefits p { margin: 0; line-height: 1.2; }
.phone-benefits strong, .phone-benefits small { display: block; }
.phone-benefits strong { font-size: .86rem; }
.phone-benefits small { margin-top: 3px; color: var(--demo-muted); font-size: .71rem; }

.screen-heading { padding-bottom: 13px; }
.screen-heading > p:last-child { margin: 0; color: var(--demo-muted); font-size: .78rem; line-height: 1.4; }
.country-heading { margin: -22px -20px 8px; padding: 23px 20px 16px; background: linear-gradient(135deg, #e9f8ed, #d8f2e0); }
.compact-heading { padding-bottom: 12px; }
.country-options { display: grid; gap: 7px; }
.country-options button { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 10px; min-height: 62px; padding: 7px 11px; border: 1px solid #e2e8e4; border-radius: 11px; background: #fff; color: var(--demo-ink); font: inherit; text-align: left; }
.country-options button.selected { border-color: #73bd87; background: #f0faf2; }
.country-options button > span:nth-child(2) strong, .country-options button > span:nth-child(2) small { display: block; }
.country-options small { margin-top: 2px; color: var(--demo-muted); font-size: .67rem; }
.country-options b { color: var(--demo-green); font-size: 1.25rem; }
.flag-emoji { display: grid; place-items: center; width: 42px; height: 32px; font-size: 1.8rem; line-height: 1; }

.phone-search { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; min-height: 40px; margin-bottom: 12px; padding: 7px 12px; border: 1px solid #cfd9d3; border-radius: 22px; color: #77838e; font-size: .75rem; }
.demo-map { position: relative; overflow: hidden; height: 260px; border: 1px solid #cfe2d5; border-radius: 14px; background: linear-gradient(145deg,#edf3e8,#d8ecdf); }
.map-water { position: absolute; top: 0; right: -30px; width: 34%; height: 100%; background: #b7e7ef; transform: skewX(-8deg); }
.map-road { position: absolute; height: 7px; border: 2px solid #fff; background: #d7d9cf; box-shadow: 0 0 0 1px #bec7bd; }
.road-a { top: 55%; left: -12%; width: 110%; transform: rotate(-19deg); }
.road-b { top: 24%; left: -5%; width: 93%; transform: rotate(34deg); }
.road-c { top: 69%; left: 18%; width: 72%; transform: rotate(59deg); }
.map-block { position: absolute; border-radius: 10px; background: #b9d8b8; }
.block-a { top: 20px; left: 18px; width: 85px; height: 58px; }
.block-b { bottom: 17px; left: 28px; width: 110px; height: 64px; }
.map-label { position: absolute; right: 28px; bottom: 49px; color: #324b4a; font-size: .7rem; font-weight: 700; }
.map-pin { position: absolute; top: 45%; left: 55%; width: 35px; height: 35px; border-radius: 50% 50% 50% 0; background: #17a944; box-shadow: 0 3px 8px rgba(0,0,0,.25); transform: rotate(-45deg); }
.map-pin i { position: absolute; top: 9px; left: 9px; width: 17px; height: 17px; border: 4px solid #fff; border-radius: 50%; }
.location-card { display: flex; gap: 10px; margin-top: 12px; padding: 11px 12px; border-radius: 10px; background: var(--demo-pale); }
.location-card p { margin: 0; line-height: 1.25; }
.location-card strong, .location-card small { display: block; }
.location-card strong { font-size: .78rem; }
.location-card small { margin-top: 3px; color: var(--demo-muted); font-size: .66rem; }
.mini-pin { color: var(--demo-green); }

.category-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.category-grid button { display: grid; place-items: center; min-height: 103px; padding: 10px 5px; border: 1px solid #dbe3de; border-radius: 12px; background: #fff; color: var(--demo-ink); font: inherit; font-size: .71rem; line-height: 1.15; }
.category-grid button > span { color: var(--demo-green); font-size: 1.45rem; }
.category-grid button.selected { border: 2px solid #20a64a; background: #eefaf1; }
.phone-footnote { margin: 14px 2px 0; color: var(--demo-muted); font-size: .67rem; line-height: 1.35; }

.review-card { overflow: hidden; border: 1px solid #dbe3de; border-radius: 13px; }
.review-card > div { display: flex; align-items: flex-start; gap: 10px; padding: 13px; }
.review-card > div + div { border-top: 1px solid #e5ebe7; }
.review-card > div > span { color: var(--demo-green); font-weight: 700; }
.review-card p { margin: 0; line-height: 1.25; }
.review-card small, .review-card strong { display: block; }
.review-card small { color: var(--demo-muted); font-size: .65rem; text-transform: uppercase; letter-spacing: .05em; }
.review-card strong { margin-top: 3px; font-size: .75rem; }
.privacy-note { margin: 14px 0; padding: 13px 14px; border-radius: 10px; background: #edf7ef; font-size: .72rem; }
.privacy-note p { margin: 3px 0 0; color: var(--demo-muted); }
.finish-preview { margin-top: 5px; }
.not-submitted { margin: 9px 0 0; color: var(--demo-muted); font-size: .68rem; text-align: center; }

.phone-controls { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; width: min(430px, 100%); margin: 18px auto 0; }
.phone-controls p { margin: 0; color: var(--demo-muted); font-size: .78rem; text-align: center; }
.demo-control { justify-self: end; min-height: 44px; padding: 9px 15px; border: 1px solid var(--demo-green); border-radius: 7px; background: var(--demo-green); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.demo-control.secondary { justify-self: start; background: #fff; color: var(--demo-green-dark); }
.demo-control:disabled { border-color: #cbd5cf; background: #edf1ee; color: #7b867f; cursor: not-allowed; }

.demo-next-step { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-top: 64px; padding: 28px 30px; border-top: 3px solid var(--demo-green); background: #f5f8f6; }
.demo-next-step h2 { font-size: 1.6rem; }
.demo-next-step p:not(.eyebrow) { max-width: 690px; margin-bottom: 0; color: var(--demo-muted); }

@media (max-width: 820px) {
  .walkthrough { grid-template-columns: 1fr; }
  .walkthrough-copy { position: static; padding-top: 0; }
  .demo-step-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
  .demo-step-list li + li { margin-top: 0; }
  .demo-step-button { display: block; min-height: 48px; padding: 7px 4px; text-align: center; }
  .demo-step-button > span { margin: auto; }
  .demo-step-button strong, .demo-step-button small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  .demo-guidance { display: none; }
}

@media (max-width: 530px) {
  .demo-hero { padding: 27px 0 31px; }
  .demo-hero p:last-child { font-size: .96rem; }
  .demo-main { padding-top: 22px; }
  .demo-notice { margin-bottom: 27px; font-size: .87rem; }
  .walkthrough { gap: 22px; }
  .walkthrough-copy h2 { font-size: 1.55rem; }
  .walkthrough-intro { font-size: .92rem; }
  .demo-step-list { margin: 18px 0 0; }
  .phone-shell { padding: 8px; border-radius: 42px; }
  .phone-display { min-height: 635px; border-radius: 34px; }
  .phone-screen { min-height: 532px; padding: 18px 16px 20px; }
  .phone-cover { margin: -18px -16px 0; }
  .cover-sky { height: 132px; }
  .cover-content { padding: 18px 18px 20px; }
  .cover-content .screen-title { font-size: 1.55rem; }
  .country-heading { margin: -18px -16px 7px; padding: 19px 16px 13px; }
  .country-options { gap: 5px; }
  .country-options button { min-height: 56px; }
  .demo-map { height: 218px; }
  .category-grid button { min-height: 88px; }
  .phone-controls { gap: 7px; }
  .demo-control { padding: 8px 11px; font-size: .84rem; }
  .demo-next-step { align-items: flex-start; flex-direction: column; margin-top: 44px; padding: 23px 20px; }
}

@media (max-width: 350px) {
  .phone-appbar img { max-width: 73%; }
  .phone-display { min-height: 605px; }
  .phone-screen { min-height: 502px; }
  .phone-controls p { font-size: .7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .phone-screen { animation: none; }
}