/* Easy Solar UK (theme easystep): Look B base, violet #6d28d9 with cobalt #2450e6, Quicksand headings + Wix Madefor Text.
   Signature: one big stepper card with a segmented progress bar and big tap-to-choose tiles; lilac bands; numbered rail.
   Phone first: 16px gutters, 44px+ tap targets, bottom tab bar under 900px. */
:root {
  --ink: #1e1442; --text: #3b3557; --muted: #5d5878; --line: #e6e1f5; --line-2: #d8d0f0;
  --bg: #fbfaff; --soft: #f5f3fc; --lilac: #f1ecfd; --lilac-2: #e6dcfb;
  --violet: #6d28d9; --violet-d: #5b21b6; --violet-l: #c4b5fd; --cobalt: #2450e6; --cobalt-t: #e8eefd;
  --sun: #ffc93c; --sun-t: #fff5d6; --sun-ink: #5c4300;
  --ok: #067647; --bad: #b42318; --bad-t: #fef3f2;
  --r-xl: 28px; --r-l: 20px; --r-m: 16px; --r-s: 12px;
  --head: "Quicksand", "Wix Madefor Text", system-ui, sans-serif;
  --sans: "Wix Madefor Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  --shadow: 0 18px 50px -24px rgba(76, 29, 149, .35);
  --gut: 16px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.6;
  overflow-x: hidden; overflow-wrap: break-word; font-variant-numeric: tabular-nums; }
img, svg { max-width: 100%; }
img { height: auto; display: block; }
a { color: var(--cobalt); text-underline-offset: 3px; }
a:hover { color: var(--violet); }
:focus-visible { outline: 3px solid var(--violet-l); outline-offset: 2px; border-radius: 8px; }
h1, h2, h3, .h1like, .h2like { margin: 0; color: var(--ink); font-family: var(--head); font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: clamp(31px, 8.4vw, 50px); line-height: 1.08; }
h2, .h2like { font-size: clamp(23px, 5.8vw, 32px); line-height: 1.18; margin-bottom: 12px; }
h3 { font-size: 18.5px; line-height: 1.3; margin: 20px 0 8px; }
p { margin: 0 0 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 80; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 12px; }
.skip:focus { left: 8px; }
.wrap { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 var(--gut); }
.wrap--text { max-width: 780px; }
.wrap--form { max-width: 720px; }
.muted, .hint { color: var(--muted); }
.small { font-size: 13.5px; color: var(--muted); }
.center { text-align: center; }
.lead { color: var(--muted); font-size: 17px; max-width: 660px; }
.ico { flex: none; vertical-align: middle; }

/* ---------- header ---------- */
.top { position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, .94); backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--line); }
.top__in { display: flex; align-items: center; gap: 8px; min-height: 64px; }
.logo { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-right: auto; color: var(--ink); text-decoration: none; }
.logo__word { font: 700 20px/1 var(--head); letter-spacing: -0.01em; }
.logo__word span, .foot__logo span { color: var(--violet); }
.top__acts { display: flex; align-items: center; gap: 8px; }
.pillbtn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--lilac);
  color: var(--violet-d); font-weight: 700; font-size: 15px; text-decoration: none; }
.pillbtn:hover { background: var(--lilac-2); color: var(--violet-d); }
.roundbtn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px;
  border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; padding: 0; text-decoration: none; }
.roundbtn:hover { border-color: var(--violet-l); color: var(--violet); }
.roundbtn .count { position: absolute; top: -5px; right: -5px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
  background: var(--sun); color: var(--ink); font: 700 12px/20px var(--sans); text-align: center; }
.top__nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow); }
.top__nav.is-open { display: block; }
.top__nav ul { list-style: none; margin: 0 auto; padding: 6px var(--gut) 14px; max-width: 1140px; }
.top__nav a { display: flex; align-items: center; min-height: 52px; padding: 0 6px; border-bottom: 1px solid var(--line); color: var(--ink);
  text-decoration: none; font-weight: 600; }
.top__nav li:last-child a { border-bottom: 0; }
.top__nav a[aria-current="page"] { color: var(--violet); }
@media (min-width: 960px) {
  .top__in { min-height: 72px; }
  .top__nav { display: block; position: static; border: 0; box-shadow: none; background: none; }
  .top__nav ul { display: flex; gap: 4px; padding: 0; margin: 0 10px 0 0; }
  .top__nav a { min-height: 44px; padding: 0 14px; border: 0; border-radius: 12px; font-size: 15px; }
  .top__nav a:hover, .top__nav a[aria-current="page"] { background: var(--lilac); color: var(--violet-d); }
  .roundbtn--menu { display: none; }
}
.soonbar { background: var(--sun-t); border-bottom: 1px solid #f2e2a8; }
.soonbar .kit-closed-note { max-width: 1140px; margin: 0 auto; padding: 9px var(--gut); font-size: 14px; font-weight: 600; color: var(--sun-ink); }

/* ---------- buttons, tags ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 12px 22px; border-radius: 16px;
  border: 1.5px solid transparent; font: 700 16px/1.2 var(--sans); text-decoration: none; cursor: pointer; text-align: center; }
.btn--violet { background: var(--violet); color: #fff; box-shadow: 0 10px 22px -12px rgba(109, 40, 217, .8); }
.btn--violet:hover { background: var(--violet-d); color: #fff; }
.btn--ghost { background: #fff; color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--violet); color: var(--violet); }
.btn--white { background: #fff; color: var(--violet-d); }
.btn--white:hover { background: var(--lilac); color: var(--violet-d); }
.btn--clear { background: transparent; color: inherit; border-color: currentColor; }
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: #33275f; color: #fff; }
.btn--wide { display: flex; width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btnrow { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }
.links { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 14px 0 0; }
.links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.tag { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px; padding: 6px 12px; border-radius: 999px; background: var(--cobalt-t);
  color: var(--cobalt); font-weight: 700; font-size: 13px; line-height: 1.3; }
.stamp { display: inline-block; margin: 8px 0 0; font-size: 13px; color: var(--muted); }

/* ---------- sections ---------- */
.sec { padding: 26px 0; }
.sec--tight { padding: 8px 0; }
.sec--soft { background: var(--soft); padding: 34px 0; margin-top: 16px; }
.sec--lilac { background: linear-gradient(180deg, var(--lilac), var(--bg)); padding: 34px 0; }
.sechead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 6px 20px; margin-bottom: 14px; }
.sechead .lead { margin-bottom: 0; }
.sechead__link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 700; text-decoration: none; }
.wrap--text p, .wrap--text li { color: var(--text); }
.list { margin: 0 0 14px; padding-left: 22px; }
.list li { margin: 5px 0; }
.list--num li::marker { color: var(--violet); font-weight: 700; }
.ticks { list-style: none; margin: 6px 0 14px; padding: 0; display: grid; gap: 10px; }
.ticks li { display: flex; gap: 10px; align-items: flex-start; font-size: 15.5px; }
.ticks .ico { flex: none; width: 24px; height: 24px; padding: 4px; border-radius: 999px; background: var(--lilac); color: var(--violet); stroke-width: 2.8; }
.ticks--light .ico { background: rgba(255, 255, 255, .18); color: #fff; }
.note { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-m); background: var(--cobalt-t); color: var(--ink); font-size: 15px; margin: 16px 0; }
.note .ico { color: var(--cobalt); margin-top: 1px; }
.contactline { display: flex; gap: 10px; align-items: center; min-height: 44px; font-weight: 600; }
.contactline .ico { color: var(--violet); }

/* boxes */
.box { border-radius: var(--r-xl); padding: 22px; }
.box > :last-child { margin-bottom: 0; }
.box--lilac { background: var(--lilac); }
.box--soft { background: var(--soft); padding: 14px 18px; border-radius: var(--r-m); }
.box--violet { background: linear-gradient(135deg, var(--violet) 0%, #4f2fd8 55%, var(--cobalt) 100%); color: #fff; }
.box--violet h2, .box--violet p, .box--violet li { color: #fff !important; }
.box--violet a:not(.btn) { color: #fff; }
.box__btn { margin: 16px 0 0; }
.card { border: 1px solid var(--line); border-radius: var(--r-xl); padding: 20px; background: #fff; }

/* ---------- breadcrumbs + page head ---------- */
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0 6px; margin: 0; padding: 0; font-size: 13.5px; color: var(--muted); }
.crumbs li + li::before { content: "›"; margin-right: 6px; color: var(--violet-l); }
.crumbs li, .crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
.head { padding: 6px 0 10px; background: linear-gradient(180deg, var(--lilac) 0%, var(--bg) 100%); }
.head h1 { margin-top: 4px; }
.head__intro { margin-top: 12px; font-size: 17.5px; color: var(--muted); max-width: 640px; }
.head__intro p:last-child { margin-bottom: 0; }
.head__grid { display: grid; gap: 18px; }
.head .ticks { margin-top: 16px; }
.head__ph { margin-top: 18px; aspect-ratio: 16 / 9; }
.head--form { padding-bottom: 24px; }
.head--legal { background: var(--bg); }
.head--legal h1 { font-size: clamp(28px, 7vw, 40px); }
@media (min-width: 960px) {
  .head--form .head__grid { grid-template-columns: 1fr 1.05fr; gap: 44px; align-items: start; }
  .head--form .head__copy { position: sticky; top: 100px; padding-top: 16px; }
}
.is-bare .head { padding-top: 18px; }

/* ---------- home hero ---------- */
.hero { padding: 18px 0 8px; background:
  radial-gradient(1200px 420px at 85% -10%, rgba(196, 181, 253, .55), transparent 60%),
  linear-gradient(180deg, var(--lilac) 0%, var(--bg) 78%); }
.hero__grid { display: grid; gap: 18px; grid-template-areas: "copy" "card" "points" "media"; }
.hero__copy { grid-area: copy; }
.hero__card { grid-area: card; min-width: 0; }
.hero__media { grid-area: media; position: relative; }
.hero h1 { max-width: 15ch; }
.hero__intro { margin-top: 12px; font-size: 17.5px; color: var(--muted); max-width: 560px; }
.hero__intro p:last-child { margin-bottom: 0; }
.hero__points { grid-area: points; margin: 4px 0 0; }
.hero__ph { aspect-ratio: 16 / 9; box-shadow: var(--shadow); }
.savechip { position: absolute; left: 12px; bottom: -16px; display: inline-flex; align-items: center; gap: 8px; max-width: calc(100% - 24px);
  padding: 10px 16px; border-radius: 16px; background: #fff; color: var(--ink); font-weight: 800; font-size: 15px; text-decoration: none;
  box-shadow: 0 12px 30px -12px rgba(30, 20, 66, .4); border: 1px solid var(--line); }
.savechip .ico { flex: none; width: 30px; height: 30px; padding: 6px; border-radius: 10px; background: var(--sun); color: var(--ink); }
.savechip:hover { color: var(--violet-d); }
.footnote { margin: 30px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); max-width: 720px; }
.footnote a { color: inherit; }
@media (min-width: 960px) {
  .hero { padding: 40px 0 16px; }
  .hero__grid { grid-template-columns: 1fr minmax(0, 520px); grid-template-areas: "copy card" "points card" "media card"; gap: 20px 48px; align-items: start; }
  .hero__points { margin: 0; }
  .hero__card { position: sticky; top: 96px; }
}

/* ---------- the stepper card ---------- */
.stepper { position: relative; background: #fff; border-radius: var(--r-xl); padding: 20px 18px 18px; border: 1px solid var(--line);
  box-shadow: 0 28px 60px -30px rgba(76, 29, 149, .5); }
.stepper::before { content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 4px; border-radius: 0 0 6px 6px;
  background: linear-gradient(90deg, var(--violet), var(--cobalt)); }
.stepper__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.stepper__h { margin: 4px 0 0; font-size: clamp(22px, 5.6vw, 28px); }
.stepper__time { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.stepper__intro { margin: 8px 0 0; color: var(--muted); font-size: 15px; }
.stepper__bar { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 16px 0 6px; padding: 0; }
.stepper__bar li { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 700; color: var(--muted); }
.stepper__bar li span { display: block; height: 6px; border-radius: 999px; background: var(--lilac-2); font-size: 0; }
.stepper__bar li.is-on span { background: var(--violet); }
.stepper__bar li.is-now { color: var(--violet-d); }
.stepper:not(.is-js) .stepper__bar { display: none; }
.step { border: 0; margin: 0; padding: 14px 0 0; min-width: 0; }
.stepper:not(.is-js) .step + .step { margin-top: 10px; border-top: 1px solid var(--line); }
.step__q { display: block; padding: 0; margin: 0 0 12px; font: 700 20px/1.3 var(--head); color: var(--ink); }
.step__q:focus { outline: none; }
.step__n { display: block; margin-bottom: 2px; font: 700 12px/1.4 var(--sans); color: var(--cobalt); letter-spacing: .04em; text-transform: uppercase; }
.step__label { margin: 14px 0 8px; font-size: 14px; font-weight: 700; color: var(--ink); }
.step__label:first-of-type { margin-top: 0; }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.choices--2 { grid-template-columns: 1fr 1fr; }
.choices--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.choice { position: relative; display: block; cursor: pointer; min-width: 0; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice > span { display: flex; flex-direction: column; justify-content: center; gap: 8px; min-height: 56px; height: 100%; padding: 12px; border-radius: var(--r-m);
  border: 1.5px solid var(--line-2); background: #fff; transition: border-color .15s, background .15s; }
.choice b { font-size: 15px; line-height: 1.3; font-weight: 600; color: var(--ink); }
.choice .ico { width: 38px; height: 38px; padding: 8px; border-radius: 12px; background: var(--lilac); color: var(--violet); }
.choices--3 .choice > span { min-height: 52px; padding: 10px 8px; text-align: center; align-items: center; }
.choices--3 .choice b { font-size: 14px; }
.choice:hover > span { border-color: var(--violet-l); }
.choice input:checked + span { border-color: var(--violet); background: var(--lilac); box-shadow: inset 0 0 0 1px var(--violet); }
.choice input:checked + span .ico { background: var(--violet); color: #fff; }
.choice input:focus-visible + span { outline: 3px solid var(--violet-l); outline-offset: 2px; }
.step__kit { margin-top: 14px; padding: 14px; border-radius: var(--r-m); background: var(--cobalt-t); }
.step__kit p { font-size: 15px; color: var(--ink); }
.stepper .field { margin-top: 14px; }
.stepper__msg { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--bad-t); color: var(--bad); font-weight: 600; font-size: 14.5px; }
.stepper__nav { display: flex; gap: 10px; margin-top: 18px; }
.stepper__nav .btn { flex: 1; }
.stepper__nav [data-back] { flex: 0 0 auto; }
.stepper:not(.is-js) [data-next], .stepper:not(.is-js) [data-back] { display: none; }
.stepper__nav [hidden] { display: none; }
.stepper__small { margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.tick { display: flex; gap: 10px; align-items: flex-start; min-height: 44px; margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--soft);
  cursor: pointer; font-size: 14.5px; color: var(--text); }
.tick input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--violet); }
@media (min-width: 600px) { .stepper { padding: 26px 26px 22px; } }

/* ---------- form fields ---------- */
.field { display: grid; gap: 6px; margin: 0 0 14px; min-width: 0; }
.field label, .field legend { font-size: 14px; font-weight: 700; color: var(--ink); }
.field input, .field select, .field textarea { width: 100%; max-width: 100%; min-height: 50px; padding: 11px 14px; border: 1.5px solid var(--line-2); border-radius: 14px;
  background: #fff; font: 400 16px/1.4 var(--sans); color: var(--ink); }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--violet) 50%), linear-gradient(135deg, var(--violet) 50%, transparent 50%);
  background-position: calc(100% - 20px) 22px, calc(100% - 15px) 22px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 38px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--violet); outline: 3px solid var(--lilac-2); }
.field.is-bad input { border-color: var(--bad); background: var(--bad-t); }
.form h2 { margin-bottom: 6px; }
.form__intro { color: var(--muted); }
.form .choices { margin-bottom: 14px; }
.form .btn { margin-top: 14px; }
.form__msg { margin: 12px 0 0; color: var(--bad); font-weight: 600; }
.inrow { display: flex; gap: 8px; }
.inrow input { flex: 1; min-width: 0; }
.inrow .btn { min-height: 50px; padding: 10px 18px; }

/* ---------- numbered rail (steps block) ---------- */
.rail { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 0; counter-reset: r; }
.rail li { position: relative; display: flex; gap: 16px; padding: 0 0 20px; }
.rail li::before { content: ""; position: absolute; left: 19px; top: 40px; bottom: 0; width: 2px; background: var(--lilac-2); }
.rail li:last-child { padding-bottom: 0; }
.rail li:last-child::before { display: none; }
.rail__n { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px;
  background: var(--violet); color: #fff; font: 700 17px/1 var(--head); box-shadow: 0 0 0 5px var(--lilac); }
.rail__t { padding-top: 7px; }
.rail__t b { display: block; font: 700 18px/1.3 var(--head); color: var(--ink); }
.rail__t p { margin: 4px 0 0; color: var(--muted); font-size: 15.5px; }
.rail--small .rail__n { width: 32px; height: 32px; font-size: 15px; }
.rail--small li::before { left: 15px; top: 32px; }
.rail--small .rail__t { padding-top: 3px; }
@media (min-width: 900px) {
  .rail:not(.rail--small) { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 24px; }
  .rail:not(.rail--small) li { flex-direction: column; gap: 14px; padding: 0; }
  .rail:not(.rail--small) li::before { left: 48px; right: -24px; top: 19px; bottom: auto; width: auto; height: 2px; }
  .rail:not(.rail--small) .rail__t { padding-top: 0; }
}

/* ---------- tiles (cards block) ---------- */
.tiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.tile { border: 1px solid var(--line); border-radius: var(--r-l); padding: 18px; background: #fff; }
.tile h3 { margin-top: 10px; }
.tile p { margin: 0; color: var(--muted); font-size: 15.5px; }
.tile__ico { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 14px; background: var(--lilac); color: var(--violet); }

/* ---------- tables ---------- */
.tscroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--r-l); margin: 8px 0 14px; background: #fff; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 520px; }
.tbl th, .tbl td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.tbl thead th { background: var(--lilac); font-size: 13px; color: var(--violet-d); font-weight: 700; }
.tbl tbody th { font-weight: 600; color: var(--ink); }
.tbl tbody tr:last-child > * { border-bottom: 0; }
.matrix { border-collapse: separate; border-spacing: 0; font-size: 14px; width: 100%; }
.matrix th, .matrix td { padding: 11px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.matrix thead th { background: var(--lilac); font-weight: 700; min-width: 150px; }
.matrix thead th a { display: flex; align-items: center; min-height: 44px; color: var(--ink); font-family: var(--head); font-size: 16px; text-decoration: none; }
.matrix thead th span { display: block; font-weight: 500; font-size: 12px; color: var(--muted); }
.matrix tbody th { position: sticky; left: 0; background: #fff; font-weight: 600; color: var(--muted); font-size: 13px; min-width: 116px; box-shadow: 1px 0 0 var(--line); }
.matrix thead td { position: sticky; left: 0; background: var(--lilac); box-shadow: 1px 0 0 var(--line); }
.matrix td { min-width: 150px; color: var(--ink); }
.matrix tbody tr:last-child > * { border-bottom: 0; }

/* ---------- FAQ ---------- */
.qa { display: grid; gap: 10px; }
.qa__item { border: 1px solid var(--line); border-radius: var(--r-m); background: #fff; }
.qa__item[open] { border-color: var(--violet-l); }
.qa__item summary { display: flex; justify-content: space-between; align-items: center; gap: 14px; min-height: 58px; padding: 12px 16px; cursor: pointer; list-style: none; }
.qa__item summary::-webkit-details-marker { display: none; }
.qa__q { font-weight: 700; font-size: 16px; color: var(--ink); }
.qa__ico { flex: none; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 999px; background: var(--lilac); color: var(--violet); transition: transform .2s; }
.qa__item[open] .qa__ico { transform: rotate(45deg); background: var(--violet); color: #fff; }
.qa__a { padding: 0 16px 14px; }
.qa__a p { font-size: 15.5px; color: var(--text); }

/* ---------- photos ---------- */
.ph { position: relative; margin: 0; border-radius: var(--r-xl); overflow: hidden; background: var(--lilac-2); }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph__tag { position: absolute; right: 12px; top: 12px; padding: 3px 9px; border-radius: 999px; background: rgba(30, 20, 66, .62); color: #fff;
  font-size: 11px; font-weight: 600; letter-spacing: .02em; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.pf { display: grid; gap: 20px; align-items: center; }
.pf__media { aspect-ratio: 4 / 3; box-shadow: 8px 8px 0 var(--lilac-2); }
.pf__body h2 { margin-top: 0; }
.pf__body p { color: var(--text); }
@media (min-width: 900px) {
  .pf { grid-template-columns: 1fr 1fr; gap: 56px; }
  .pf__media { box-shadow: 14px 14px 0 var(--lilac-2); }
  .pf--flip .pf__media { order: 2; box-shadow: -14px 14px 0 var(--lilac-2); }
}

/* ---------- kit cards ---------- */
.kgrid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.kgrid--strip { grid-auto-flow: column; grid-auto-columns: minmax(270px, 82%); grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 4px var(--gut) 12px; margin: 0 calc(-1 * var(--gut)); -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.kgrid--strip .kc { scroll-snap-align: start; }
@media (min-width: 900px) { .kgrid--strip { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; padding: 0; margin: 0; } }
.kc { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; background: #fff; min-width: 0;
  box-shadow: 0 14px 34px -26px rgba(76, 29, 149, .55); }
.kc__media { display: block; background: var(--lilac); }
.kc__body { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; flex: 1; }
.kc__badge { align-self: flex-start; margin: 0 0 2px; padding: 3px 10px; border-radius: 999px; background: var(--cobalt-t); color: var(--cobalt); font-size: 12px; font-weight: 700; }
.kc__name { margin: 0; font-size: 20px; }
.kc__name a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; min-height: 44px; padding-top: 6px; color: var(--ink); text-decoration: none; }
.kc__name span { font: 600 13px var(--sans); color: var(--muted); }
.kc__line { margin: 0; font-size: 14.5px; color: var(--text); }
.kc__facts { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0; }
.kc__facts li { padding: 4px 9px; border-radius: 8px; background: var(--soft); font-size: 12.5px; font-weight: 600; color: var(--muted); }
.kc__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 12px 0 12px; }
.kc__price { margin: 0; font: 700 18px var(--head); color: var(--ink); }
.kc .btn { margin-top: auto; min-height: 48px; font-size: 15px; }
.kc--small .kc__body { padding: 10px 12px 12px; }
.kc--small .kc__name { font-size: 16px; }
.kc--small .kc__name a { flex-direction: column; align-items: flex-start; gap: 0; }
.kc--small .kc__name span { font-size: 12px; }
.kc--small .kc__facts li:nth-child(n+2) { display: none; }
.kc--small .kc__foot { margin: 6px 0 8px; }
.kc--small .kc__price { font-size: 15px; }
.kc--small .kit-stock { display: none; }
.kgrid--small { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 900px) { .kgrid--small { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.kimg { position: relative; display: block; overflow: hidden; }
.kimg img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 897; object-fit: cover; }
.kimg__tag { position: absolute; left: 8px; bottom: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(30, 20, 66, .62); color: #fff; font-size: 11px; font-weight: 600; }

/* shared kit pieces, restyled */
.kit-stock { display: inline-flex; align-self: flex-start; margin: 0; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.kit-stock--waitlist { background: var(--sun-t); color: var(--sun-ink); }
.kit-stock--preorder { background: var(--cobalt-t); color: var(--cobalt); }
.kit-list { margin: 14px 0 0; padding: 18px; border-radius: var(--r-l); background: var(--lilac); }
.kit-list p { margin: 0; }
.kit-list__title { font: 700 19px var(--head); color: var(--ink); }
.kit-list__intro { font-size: 14.5px; color: var(--muted); }
.kit-list__field label { font-size: 14px; font-weight: 700; color: var(--ink); }
.kit-list__field input { border: 1.5px solid var(--line-2); border-radius: 14px; background: #fff; font-family: var(--sans); color: var(--ink); }
.kit-list__field input:focus { border-color: var(--violet); outline: 3px solid var(--lilac-2); }
.kit-list__tick { font-size: 14px; color: var(--text); }
.kit-list__tick input, .kit-terms input { accent-color: var(--violet); }
.kit-list__msg { color: var(--bad); font-size: 14px; }
.kit-list__btn { background: var(--violet); color: #fff; border: 0; border-radius: 16px; font: 700 16px var(--sans); cursor: pointer; min-height: 52px; }
.kit-list__btn:hover { background: var(--violet-d); }
.kit-note { font-size: 13.5px; color: var(--muted); margin: 10px 0 0; }
.kit-closed { margin: 12px 0 0; font-weight: 600; }
.kit-terms { font-size: 14px; color: var(--text); }
.kit-thanks { margin: 16px 0 0; padding: 20px; border-radius: var(--r-l); background: var(--lilac); }
.kit-thanks__title { font: 700 24px var(--head); color: var(--ink); }

/* ---------- product page ---------- */
.kp { padding: 4px 0 8px; background: linear-gradient(180deg, var(--lilac) 0, var(--bg) 360px); }
.kp__top { display: grid; gap: 18px; margin-top: 4px; }
.kp__fig { margin: 0; }
.kp__fig .kimg, .kp__fig--draw .kp__img { border-radius: var(--r-xl); }
.kp__img { width: 100%; }
.kp__fig figcaption { margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.kp__fig--draw { margin-top: 12px; }
@media (max-width: 899px) {
  .kp__media { display: contents; }
  .kp__fig--draw { order: 2; margin-top: 4px; }
}
.kp__fig--draw .kp__img { height: auto; background: var(--lilac); }
.kp__info h1 { font-size: clamp(27px, 7vw, 40px); line-height: 1.12; }
.kp__sum { margin: 10px 0 0; color: var(--muted); font-size: 16px; }
.kp__chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; padding: 0; }
.kp__chips li { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 12.5px; font-weight: 600; color: var(--ink); }
.kp__chips .ico { color: var(--violet); stroke-width: 3; }
.buy { margin-top: 16px; box-shadow: var(--shadow); }
.buy__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.buy__title { margin: 0; font: 700 20px var(--head); }
.buy .kit-stock { margin-top: 8px; }
.buy__note { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0 0; padding: 12px; border-radius: 14px; background: var(--soft); font-size: 14.5px; }
.buy__note .ico { color: var(--violet); margin-top: 2px; }
.addkit { margin-top: 12px; }
.addkit__msg { margin: 8px 0 0; font-size: 14px; font-weight: 600; }
.sec--kp { padding: 20px 0; }
.sec--kp h2 { font-size: clamp(22px, 5.4vw, 26px); }
.glance { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; }
.glance li { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: var(--r-m); background: #fff; border: 1px solid var(--line); }
.glance b { font: 700 20px/1.2 var(--head); color: var(--violet-d); }
.glance span { font-size: 13px; color: var(--muted); }
@media (min-width: 700px) { .glance { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.boxlist { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; }
.boxlist li { display: flex; gap: 10px; padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--line); font-size: 15px; color: var(--text); }
.boxlist .ico { color: var(--violet); margin-top: 2px; }
.specs { margin: 0; border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; font-size: 14.5px; background: #fff; }
.specs div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.specs div:last-child { border-bottom: 0; }
.specs dt { color: var(--muted); }
.specs dd { margin: 0; color: var(--ink); }
.specs + .small { margin-top: 8px; }
.dispatch { display: flex; gap: 10px; align-items: center; margin: 0; }
.dispatch .ico { color: var(--violet); }
@media (min-width: 900px) {
  .kp { padding-top: 10px; }
  .kp__top { grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: start; }
  .kp__media { position: sticky; top: 96px; }
}

/* ---------- key-value rows ---------- */
.kv { margin: 12px 0 0; border-top: 1px solid var(--line); }
.kv__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 11px 0; border-bottom: 1px dashed var(--line-2); }
.kv__row dt { flex: 0 1 auto; color: var(--muted); font-size: 14.5px; min-width: 6.5em; }
.kv__row dd { flex: 0 1 auto; min-width: 0; margin: 0; font-weight: 700; text-align: right; overflow-wrap: break-word; }
.kv__row--total { border-bottom: 0; padding-top: 13px; }
.kv__row--total dt { color: var(--ink); font-weight: 700; font-size: 15px; }
.kv__row--total dd { font: 700 19px var(--head); }
.kv--tight .kv__row { padding: 8px 0; }

/* ---------- estimator ---------- */
.est__grid { display: grid; gap: 18px; }
.est__adv { margin: 4px 0 0; }
.est__adv summary { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; cursor: pointer; font-weight: 700; color: var(--violet); list-style: none; }
.est__adv summary::-webkit-details-marker { display: none; }
.est__adv[open] summary { margin-bottom: 8px; }
.est__card { border-radius: var(--r-xl); padding: 22px 20px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.est__label { margin: 0; font-size: 13px; font-weight: 700; color: var(--cobalt); text-transform: uppercase; letter-spacing: .05em; }
.est__big { margin: 2px 0 0; font: 700 clamp(30px, 8vw, 40px)/1.1 var(--head); color: var(--violet-d); }
.est__assume { margin: 12px 0; font-size: 13px; color: var(--muted); }
.est__warn { padding: 12px; border-radius: 14px; background: var(--sun-t); color: var(--sun-ink); font-size: 14px; font-weight: 600; }
.est__card .btn + .btn { margin-top: 10px; }
.est--mini .btn--clear { color: var(--violet-d); border-color: var(--line-2); }
@media (min-width: 900px) {
  .est .est__grid { grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
  .est__out { position: sticky; top: 96px; }
}

/* ---------- join box ---------- */
.joinbox { display: grid; gap: 18px; padding: 24px 20px; border-radius: var(--r-xl); background: linear-gradient(140deg, var(--violet) 0%, #4f2fd8 60%, var(--cobalt) 100%); color: #fff; }
.joinbox h2, .joinbox p { color: #fff; }
.joinbox .ticks li { color: #fff; }
.joinbox .kit-list { background: #fff; margin: 0; color: var(--ink); }
.joinbox .kit-list .kit-list__title { color: var(--ink); }
.joinbox .kit-list .kit-list__intro { color: var(--muted); }
.joinbox .kit-list .kit-list__msg { color: var(--bad); }
@media (min-width: 900px) { .joinbox { grid-template-columns: 1fr 1fr; gap: 40px; padding: 40px; align-items: start; } }

/* ---------- checkout ---------- */
.co { display: grid; gap: 14px; }
.co__main { display: grid; gap: 14px; min-width: 0; }
.co__form { display: grid; gap: 14px; }
.co__h { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font: 700 19px var(--head); }
.co__n { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 999px; background: var(--violet); color: #fff; font-size: 14px; }
.hint { font-size: 14px; margin: 0; }
.hint.is-ok { color: var(--ok); font-weight: 600; }
.hint.is-bad { color: var(--bad); font-weight: 600; }
.bline { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.bline:first-child { border-top: 0; padding-top: 0; }
.bline img { width: 72px; height: 54px; object-fit: cover; border-radius: 10px; }
.bline__name { margin: 0; font-weight: 700; font-size: 15px; }
.bline__name a { color: var(--ink); text-decoration: none; }
.bline__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; margin-top: 4px; }
.bline__rm { min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--bad); font: 600 14px var(--sans); cursor: pointer; text-decoration: underline; }
.co__sum .kv { margin-top: 0; border-top: 0; }
.co__terms { margin: 10px 0 12px; padding: 12px; background: var(--soft); border-radius: 14px; }
.errors { margin: 0 0 12px; padding: 12px 14px; border-radius: 14px; background: var(--bad-t); color: var(--bad); font-size: 14px; font-weight: 600; }
.errors ul { margin: 0; padding-left: 18px; }
@media (min-width: 900px) {
  .co { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; gap: 24px; }
  .co__side { position: sticky; top: 96px; }
}

/* ---------- end card + thanks ---------- */
.endcard { padding: 24px 20px; border-radius: var(--r-xl); background: var(--ink); color: #fff; }
.endcard__t { margin: 0; font: 700 21px/1.3 var(--head); color: #fff !important; }
.endcard .btnrow { margin-top: 14px; }
.endcard .btn--clear { color: #fff; border-color: rgba(255, 255, 255, .35); }
.h1like { font-size: clamp(30px, 8vw, 44px); line-height: 1.1; margin: 0 0 10px; }
.donemark { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; margin: 14px 0 12px; border-radius: 20px;
  background: var(--violet); color: #fff; box-shadow: 0 0 0 8px var(--lilac-2); }
.donemark .ico { stroke-width: 2.6; }
.thanks-alt > p:not(.h1like):not(.donemark) { color: var(--muted); font-size: 17px; }
.thanks-alt .rail { margin-top: 18px; }
[data-thanks-ref] { margin-top: 12px; }

/* legal */
.form-quote { margin: 12px 0; padding: 16px 18px; border-left: 4px solid var(--violet); background: var(--soft); border-radius: 0 var(--r-m) var(--r-m) 0; }
.form-quote p { font-size: 15px; overflow-wrap: anywhere; }
.tpl-legal .wrap--text h2 { font-size: clamp(20px, 5vw, 24px); margin-top: 8px; }
.wrap--text code { font-size: 13px; }

/* ---------- footer ---------- */
.foot { margin-top: 36px; padding: 30px 0 calc(110px + env(safe-area-inset-bottom)); background: var(--ink); color: #d6d0ec; font-size: 14.5px; border-radius: 32px 32px 0 0; }
.foot__top { display: grid; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid #352a66; }
.foot a.foot__logo { display: inline-block; line-height: 44px; font: 700 22px/44px var(--head); color: #fff; text-decoration: none; }
.foot__logo span { color: var(--violet-l) !important; }
.foot__tag { margin: 2px 0 0; color: #d6d0ec; max-width: 460px; }
.foot__cta { justify-self: start; }
.foot__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; margin-top: 18px; }
.foot__col:first-child { grid-column: 1 / -1; }
.foot__col:first-child ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
.foot__head { margin: 0 0 4px; font-weight: 700; color: #fff; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; }
.foot__col ul { list-style: none; margin: 0; padding: 0; }
.foot a:not(.btn), .foot__btn { display: flex; align-items: center; min-height: 44px; color: #d6d0ec; text-decoration: none; }
.foot a:not(.btn):hover, .foot__btn:hover { color: #fff; text-decoration: underline; }
.foot__btn { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-align: left; }
.foot__rules { margin: 20px 0 6px; padding-top: 16px; border-top: 1px solid #352a66; color: #d6d0ec; }
.foot__small { margin: 0; font-size: 13px; color: #a9a2c8; }
@media (min-width: 900px) {
  .foot__top { grid-template-columns: 1fr auto; align-items: center; }
  .foot__cols { grid-template-columns: 1.4fr 1fr 1fr; }
  .foot__col:first-child { grid-column: auto; }
}

/* ---------- toast + consent ---------- */
.toast { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 70; max-width: 480px; margin: 0 auto; padding: 14px 16px; border-radius: var(--r-m);
  background: var(--ink); color: #fff; font-size: 15px; box-shadow: 0 12px 30px -10px rgba(30, 20, 66, .5); }
.toast a { color: var(--sun); font-weight: 700; }
.consent { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 75; max-width: 520px; margin: 0 auto; padding: 18px; border-radius: var(--r-l);
  background: #fff; border: 1px solid var(--line); box-shadow: 0 24px 50px -18px rgba(30, 20, 66, .5); }
.consent__title { margin: 0 0 6px; font: 700 18px var(--head); }
.consent p { font-size: 14px; color: var(--text); }
.consent__btns { display: flex; gap: 8px; }
.consent__btns .btn { flex: 1; min-height: 48px; padding: 10px 12px; }

/* ---------- bottom tab bar (phones, small tablets) ---------- */
.tabbar { position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 60; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
  padding: 6px; border-radius: 22px; background: rgba(255, 255, 255, .94); border: 1px solid var(--line);
  backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); box-shadow: 0 14px 34px -14px rgba(30, 20, 66, .45); }
.tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; border-radius: 16px;
  color: var(--muted); text-decoration: none; font-size: 11.5px; font-weight: 700; }
.tabbar a[aria-current="page"] { color: var(--violet-d); background: var(--lilac); }
.tabbar .tabbar__cta { color: #fff; background: var(--violet); }
.tabbar a:active { transform: scale(.96); }
.is-bare .foot { padding-bottom: 36px; }
.toast, .consent { bottom: calc(86px + env(safe-area-inset-bottom)); }
@media (min-width: 900px) {
  .tabbar { display: none; }
  .foot { padding-bottom: 36px; }
  .toast, .consent { bottom: 12px; }
}

@media (min-width: 900px) {
  :root { --gut: 24px; }
  .sec { padding: 36px 0; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
/* thank-you mark and title keep their own colours inside text columns */
.wrap--text .donemark { color: #fff; }
.wrap--text .h1like { color: var(--ink); }
/* phones: a shorter kit photo so the name and buy card come sooner */
@media (max-width: 899px) { .kp__fig .kimg img { aspect-ratio: 16 / 10; } }
.pf__body .tag, .head__copy .tag { color: var(--cobalt); }
/* one left edge on wide screens: text columns sit on the same line as the full-width sections */
.wrap--text, .wrap--form { max-width: 1140px; }
.wrap--text > * { max-width: 780px; }
.wrap--form > * { max-width: 720px; }

/* Plug-in solar kit pieces (generator/partials/_kit.html). Appended to the theme CSS on kit sites only.
   Structure only, at zero specificity: colours, fonts and borders come from the theme, which can restyle any of it.
   Mobile first: fields fill the width, tap targets are 44px or more, long words wrap instead of scrolling sideways. */
:where(.kit-list, .kit-terms, .kit-note, .kit-stock, .kit-closed, .kit-closed-note, .kit-thanks) { box-sizing: border-box; max-width: 100%; overflow-wrap: anywhere; }
:where(.kit-list) { display: grid; gap: .75rem; margin: 1rem 0; min-width: 0; }
:where(.kit-list *, .kit-list *::before, .kit-list *::after) { box-sizing: border-box; }
:where(.kit-list__title, .kit-thanks__title) { margin: 0; font-weight: 700; }
:where(.kit-list__intro, .kit-list__msg) { margin: 0; }
:where(.kit-list__msg) { font-weight: 600; }
:where(.kit-list__field) { display: grid; gap: .3rem; min-width: 0; }
:where(.kit-list__field input) { width: 100%; max-width: 100%; min-height: 48px; padding: .6rem .75rem; font: inherit; font-size: max(16px, 1em); }
:where(.kit-list__tick, .kit-terms) { display: flex; gap: .65rem; align-items: flex-start; min-height: 44px; padding: .4rem 0; cursor: pointer; }
:where(.kit-list__tick input, .kit-terms input) { flex: none; width: 24px; height: 24px; margin: .1rem 0 0; }
:where(.kit-list__btn) { width: 100%; min-height: 48px; }
:where(.kit-hp) { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
:where(.kit-stock) { display: inline-block; margin: .25rem 0; font-weight: 700; }
:where(.kit-opt) { font-weight: 400; opacity: .8; }
:where(.kit-thanks__lines) { padding-left: 1.2rem; }
@media (min-width: 40em) { :where(.kit-list__btn) { width: auto; justify-self: start; padding-inline: 1.5rem; } }