/* landing-polish.css -- the main page (landing.html), after the page's own styles. Styles only.
   The colours of the rest of the site: the five colours along the top, a colour for each section and each
   card, coloured tiles for the pictures, and the site's papers behind the moving example in the header.
   Taking this file away gives back the page as it was. */

/* ---- the top bar ---- */
.nav { border-bottom: 0; }
.nav::before { content: ""; display: block; height: 4px; background: linear-gradient(90deg, #E8590C 0 20%, #0E9F6E 20% 40%, #2563EB 40% 60%, #D6257F 60% 80%, #6D3FD6 80% 100%); }
section { scroll-margin-top: 64px; }
.nav-links { gap: 6px; }
.nav-link { padding: 6px 11px; border-radius: 999px; transition: background .12s, color .12s; }
.nav-link:hover { background: rgba(255,255,255,.09); }
.nav a.dl { border-radius: 9px; box-shadow: 0 2px 0 #8F5A12; }

/* ---- the header ---- */
.hero::before { background: radial-gradient(circle, rgba(255,200,61,.16), transparent 68%); }
.hero .eyebrow { color: #FFC83D; background: rgba(255,200,61,.12); border-color: rgba(255,200,61,.36); }
.hero h1 span { color: #FFC83D; }
.hero .btn-primary { border-radius: 10px; box-shadow: 0 3px 0 #8F5A12; }
.hero .btn-primary:active { transform: translateY(2px); box-shadow: 0 1px 0 #8F5A12; }
.hero .btn-ghost { border-radius: 10px; border-color: #46627A; }
.trust { gap: 8px; }
.trust li { padding: 5px 11px 5px 8px; border: 1px solid rgba(255,255,255,.13); border-radius: 999px; background: rgba(255,255,255,.06); color: #E4ECF0; }
.trust li:nth-child(1) svg { color: #37D7A2; }
.trust li:nth-child(2) svg { color: #A9C8FF; }
.trust li:nth-child(3) svg { color: #FFC83D; }
/* the moving example: the site's papers behind it, the money and the tick on its corners */
.demo-card { position: relative; overflow: visible; }
.demo-bar { border-radius: 14px 14px 0 0; }
.demo-card::before { content: ""; position: absolute; z-index: -1; inset: -58px -46px -52px -44px; pointer-events: none; background:
  url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 190 220%22%3E%3Cg transform=%22translate(35 25) rotate(-13 60 85)%22%3E%3Crect width=%22120%22 height=%22170%22 rx=%2210%22 fill=%22%23E8590C%22/%3E%3Crect x=%2216%22 y=%2226%22 width=%2264%22 height=%227%22 rx=%223.5%22 fill=%22%23fff%22 opacity=%22.6%22/%3E%3Crect x=%2216%22 y=%2242%22 width=%2246%22 height=%227%22 rx=%223.5%22 fill=%22%23fff%22 opacity=%22.6%22/%3E%3Crect x=%2216%22 y=%2258%22 width=%2256%22 height=%227%22 rx=%223.5%22 fill=%22%23fff%22 opacity=%22.6%22/%3E%3C/g%3E%3C/svg%3E") left top / 172px auto no-repeat, url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 190 220%22%3E%3Cg transform=%22translate(35 25) rotate(11 60 85)%22%3E%3Crect width=%22120%22 height=%22170%22 rx=%2210%22 fill=%22%230E9F6E%22/%3E%3Crect x=%2216%22 y=%2226%22 width=%2256%22 height=%227%22 rx=%223.5%22 fill=%22%23fff%22 opacity=%22.6%22/%3E%3Crect x=%2216%22 y=%2242%22 width=%2266%22 height=%227%22 rx=%223.5%22 fill=%22%23fff%22 opacity=%22.6%22/%3E%3Crect x=%2216%22 y=%2258%22 width=%2244%22 height=%227%22 rx=%223.5%22 fill=%22%23fff%22 opacity=%22.6%22/%3E%3C/g%3E%3C/svg%3E") right top / 172px auto no-repeat,
  url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 190 220%22%3E%3Cg transform=%22translate(35 25) rotate(15 60 85)%22%3E%3Crect width=%22120%22 height=%22170%22 rx=%2210%22 fill=%22%236D3FD6%22/%3E%3Crect x=%2216%22 y=%2226%22 width=%2260%22 height=%227%22 rx=%223.5%22 fill=%22%23fff%22 opacity=%22.6%22/%3E%3Crect x=%2216%22 y=%2242%22 width=%2240%22 height=%227%22 rx=%223.5%22 fill=%22%23fff%22 opacity=%22.6%22/%3E%3Crect x=%2216%22 y=%2258%22 width=%2252%22 height=%227%22 rx=%223.5%22 fill=%22%23fff%22 opacity=%22.6%22/%3E%3C/g%3E%3C/svg%3E") right bottom / 172px auto no-repeat, url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 190 220%22%3E%3Cg transform=%22translate(35 25) rotate(-9 60 85)%22%3E%3Crect width=%22120%22 height=%22170%22 rx=%2210%22 fill=%22%23D6257F%22/%3E%3Crect x=%2216%22 y=%2226%22 width=%2252%22 height=%227%22 rx=%223.5%22 fill=%22%23fff%22 opacity=%22.6%22/%3E%3Crect x=%2216%22 y=%2242%22 width=%2262%22 height=%227%22 rx=%223.5%22 fill=%22%23fff%22 opacity=%22.6%22/%3E%3Crect x=%2216%22 y=%2258%22 width=%2240%22 height=%227%22 rx=%223.5%22 fill=%22%23fff%22 opacity=%22.6%22/%3E%3C/g%3E%3C/svg%3E") left bottom / 172px auto no-repeat; }
.demo-card::after { content: ""; position: absolute; z-index: 1; inset: -24px -22px -24px -22px; pointer-events: none; background:
  url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 60 60%22%3E%3Ccircle cx=%2231%22 cy=%2233%22 r=%2226%22 fill=%22%230B1B26%22 opacity=%22.35%22/%3E%3Ccircle cx=%2229%22 cy=%2229%22 r=%2226%22 fill=%22%23FFC83D%22/%3E%3Cpath d=%22M20 19h18M20 27h18M23 19c11 0 11 8 0 8l12 14%22 fill=%22none%22 stroke=%22%23132A3A%22 stroke-width=%224%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E") right top / 58px auto no-repeat, url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 60 60%22%3E%3Ccircle cx=%2231%22 cy=%2233%22 r=%2226%22 fill=%22%230B1B26%22 opacity=%22.35%22/%3E%3Ccircle cx=%2229%22 cy=%2229%22 r=%2226%22 fill=%22%2337D7A2%22/%3E%3Cpath d=%22M18 30l8 8 16-17%22 fill=%22none%22 stroke=%22%23132A3A%22 stroke-width=%225%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E") left bottom / 58px auto no-repeat; }

/* ---- a colour for each section, on its small heading ---- */
#how { --tone:#2563EB;--deep:#1A3F9C;--tint:#E7EFFF;--edge:#BFD2FA;--glow:rgba(37,99,235,.22); }
#how + .band { --tone:#E8590C;--deep:#9A3A00;--tint:#FFF0E3;--edge:#F8CFAE;--glow:rgba(232,89,12,.22); }
#features { --tone:#6D3FD6;--deep:#4A22A6;--tint:#EEE8FD;--edge:#D0C0F6;--glow:rgba(109,63,214,.22); }
#features + .band { --tone:#0E9F6E;--deep:#05674A;--tint:#E2F7EC;--edge:#AEE5CB;--glow:rgba(14,159,110,.22); }
#faq { --tone:#D6257F;--deep:#96124F;--tint:#FDE7F1;--edge:#F5BDD8;--glow:rgba(214,37,127,.22); }
#faq + .band { --tone:#0891B2;--deep:#0B5F75;--tint:#E0F5FA;--edge:#A9DDE9;--glow:rgba(8,145,178,.22); }
.section-head .eyebrow { color: var(--deep, var(--marigold-dark)); background: var(--tint, var(--marigold-light)); border-color: var(--edge, var(--marigold-line)); }
.section-head { max-width: 800px; }
.section-head h2 { font-size: 28px; }
.section-head p { max-width: 620px; margin-left: auto; margin-right: auto; }

/* ---- how it works: four steps, four colours ---- */
.step:nth-child(1) { --tone:#E8590C;--deep:#9A3A00;--tint:#FFF0E3;--edge:#F8CFAE;--glow:rgba(232,89,12,.22); }
.step:nth-child(2) { --tone:#0E9F6E;--deep:#05674A;--tint:#E2F7EC;--edge:#AEE5CB;--glow:rgba(14,159,110,.22); }
.step:nth-child(3) { --tone:#2563EB;--deep:#1A3F9C;--tint:#E7EFFF;--edge:#BFD2FA;--glow:rgba(37,99,235,.22); }
.step:nth-child(4) { --tone:#6D3FD6;--deep:#4A22A6;--tint:#EEE8FD;--edge:#D0C0F6;--glow:rgba(109,63,214,.22); }
.step { border-color: var(--edge); border-radius: 14px; padding: 18px; box-shadow: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.step .num { width: 40px; height: 40px; border-radius: 11px; background: var(--tone); font-size: 17px; margin-bottom: 14px; box-shadow: 0 3px 0 var(--deep); }
.step h3 { font-size: 15.5px; }

/* ---- two ways to use it ---- */
.role:nth-child(1) { --tone:#E8590C;--deep:#9A3A00;--tint:#FFF0E3;--edge:#F8CFAE;--glow:rgba(232,89,12,.22); }
.role:nth-child(2) { --tone:#0E9F6E;--deep:#05674A;--tint:#E2F7EC;--edge:#AEE5CB;--glow:rgba(14,159,110,.22); }
.role { display: flex; flex-direction: column; background: var(--tint); border-color: var(--edge); border-radius: 16px; }
.role-ic.a, .role-ic.b { width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--tone); color: #fff; box-shadow: 0 3px 0 var(--deep); }
.role-sub { color: var(--deep); font-weight: 600; }
.ticks { flex: 1 1 auto; background: #fff; border: 1px solid var(--edge); border-radius: 12px; padding: 4px 14px; }
.ticks li { border-top-color: var(--edge); }
.tick { background: var(--tone); color: #fff; }

/* ---- features: each in the colour of its page ---- */
.feature:nth-child(1) { --tone:#2563EB;--deep:#1A3F9C;--tint:#E7EFFF;--edge:#BFD2FA;--glow:rgba(37,99,235,.22); }
.feature:nth-child(2) { --tone:#6D3FD6;--deep:#4A22A6;--tint:#EEE8FD;--edge:#D0C0F6;--glow:rgba(109,63,214,.22); }
.feature:nth-child(3) { --tone:#E8590C;--deep:#9A3A00;--tint:#FFF0E3;--edge:#F8CFAE;--glow:rgba(232,89,12,.22); }
.feature:nth-child(4) { --tone:#0E9F6E;--deep:#05674A;--tint:#E2F7EC;--edge:#AEE5CB;--glow:rgba(14,159,110,.22); }
.feature:nth-child(5) { --tone:#D6257F;--deep:#96124F;--tint:#FDE7F1;--edge:#F5BDD8;--glow:rgba(214,37,127,.22); }
.feature:nth-child(6) { --tone:#0891B2;--deep:#0B5F75;--tint:#E0F5FA;--edge:#A9DDE9;--glow:rgba(8,145,178,.22); }
.feature { border-color: var(--edge); border-radius: 14px; box-shadow: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.feature .ic { width: 42px; height: 42px; border-radius: 12px; background: var(--tone); color: #fff; box-shadow: 0 3px 0 var(--deep); }

/* ---- about your money ---- */
.promise-card:nth-child(1) { --tone:#0E9F6E;--deep:#05674A;--tint:#E2F7EC;--edge:#AEE5CB;--glow:rgba(14,159,110,.22); }
.promise-card:nth-child(2) { --tone:#2563EB;--deep:#1A3F9C;--tint:#E7EFFF;--edge:#BFD2FA;--glow:rgba(37,99,235,.22); }
.promise-card:nth-child(3) { --tone:#6D3FD6;--deep:#4A22A6;--tint:#EEE8FD;--edge:#D0C0F6;--glow:rgba(109,63,214,.22); }
.promise-card { background: var(--tint); border-color: var(--edge); border-left-color: var(--tone); border-left-width: 5px; border-radius: 14px; }
.promise-card h3 { color: var(--deep); }
.pay-line span { background: #fff; padding: 4px 12px; }
.pay-line em { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; background: #E2F7EC; color: #05674A; }

/* ---- questions ---- */
.faq { border-color: var(--edge); border-radius: 16px; box-shadow: none; }
.faq-item { border-top-color: var(--edge); }
.faq-q { padding: 15px 16px 15px 18px; transition: background .12s; }
.faq-q:hover { background: var(--tint); }
.faq-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--tint); color: var(--tone); font-size: 19px; }
.faq-item.open { background: var(--tint); }
.faq-item.open .faq-q { color: var(--deep); }
.faq-item.open .faq-icon { background: var(--tone); color: #fff; }
.faq-a p { color: var(--text); }

/* ---- the team ---- */
.person:nth-child(1) { --tone:#2563EB;--deep:#1A3F9C;--tint:#E7EFFF;--edge:#BFD2FA;--glow:rgba(37,99,235,.22); }
.person:nth-child(2) { --tone:#E8590C;--deep:#9A3A00;--tint:#FFF0E3;--edge:#F8CFAE;--glow:rgba(232,89,12,.22); }
.person { background: var(--tint); border-color: var(--edge); border-radius: 14px; }
.avatar { border-radius: 13px; background: var(--tone); box-shadow: 0 3px 0 var(--deep); }
.person .role-name { color: var(--deep); }
.location-line svg { color: var(--tone); }

/* ---- the last band ---- */
.closer::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, #E8590C 0 20%, #0E9F6E 20% 40%, #2563EB 40% 60%, #D6257F 60% 80%, #6D3FD6 80% 100%); }
.closer p { max-width: 540px; }
.closer .btn-primary { border-radius: 10px; box-shadow: 0 3px 0 #8F5A12; }

@media (hover: hover) {
  .step:hover, .feature:hover { border-color: var(--tone); box-shadow: 0 10px 20px -10px var(--glow), 0 0 0 3px var(--glow); transform: translateY(-2px); }
}
@media (max-width: 960px) {
  .demo-card::before { inset: -40px -16px -38px -16px; background-size: 132px auto; }
  .demo-card::after { inset: -20px -8px -20px -8px; background-size: 50px auto; }
}
@media (max-width: 760px) {
  .hero-grid { gap: 44px; }
  .hero { padding-bottom: 54px; }
  .section-head h2 { font-size: 21px; }
  .step .num { width: 34px; height: 34px; font-size: 15px; margin-bottom: 10px; }
  .ticks { padding: 2px 12px; }
}
@media (prefers-reduced-motion: reduce) { .step, .feature { transition: none; } .step:hover, .feature:hover { transform: none; } }