/* Switch Energy business landing page.
   Colours, font and corners come from switch.cy (src/styles/tokens.css) so the two sites read as one brand.
   Type sizes, button sizes and layout follow the Base Power business page, measured at 1280px and 375px wide:
   h1 48px, h2 40px, h3 32px, body 16px, buttons 40px tall with 14px text (48px / 16px on phones). */

@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/fonts/inter-greek-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/fonts/inter-latin-ext-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/fonts/inter-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #F0EEEB;
  --panel: #FFFFFF;
  --ink: #292826;
  --ink-soft: #54524F;
  --ink-mute: #6F6D68;
  --green: #1E4D2B;
  --lime: #B2DD79;
  --lime-soft: #E3F2CF;
  --line: #E4E1DC;
  --font: "Inter Variable", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --r-panel: 16px;
  --r-card: 12px;
  --r-ctl: 8px;
  --gutter: 16px;
  --header-h: 64px;
  --section: 64px;
  /* type scale (Base Power at 375px) */
  --fs-h1: 40px;
  --fs-h2: 32px;
  --fs-h3: 24px;
  --fs-h3-sm: 20px;
  --fs-body: 16px;
  --fs-small: 14px;
  --btn-h: 48px;
  --btn-fs: 16px;
  --w-head: 650;
}
@media (min-width: 720px) {
  :root { --r-panel: 20px; --gutter: 32px; --section: 96px; --fs-h1: 48px; --fs-h2: 40px; --fs-h3: 28px; --btn-h: 40px; --btn-fs: 14px; }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 12px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: var(--fs-body); line-height: 1.5; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--green); }
h1, h2, h3 { margin: 0; color: var(--ink); letter-spacing: -.015em; font-weight: var(--w-head); line-height: 1.1; text-wrap: balance; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p { margin: 0 0 12px; }
.wrap { width: 100%; max-width: 1216px; margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.section-title { max-width: 22ch; }
.center { text-align: center; margin-inline: auto; }
.muted { color: var(--ink-soft); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Keyboard users: one clear focus ring everywhere, in the brand green (lime on dark panels). */
:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; border-radius: 4px; }
.on-dark :focus-visible { outline-color: var(--lime); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--panel); color: var(--green); padding: 10px 14px; border-radius: var(--r-ctl); font-weight: 600; }
.skip:focus { top: 12px; }

/* The asterisk after every savings figure: a link to the footnote. */
.fn { color: inherit; text-decoration: none; font-weight: 600; margin-left: 1px; }
.fn:hover { text-decoration: underline; }

/* buttons: lime on green like switch.cy, sized like Base */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--btn-h); padding: 0 16px; border-radius: var(--r-ctl); border: 0; font: inherit; font-size: var(--btn-fs); font-weight: 600; letter-spacing: .01em; cursor: pointer; text-decoration: none; text-align: center; line-height: 1.2; white-space: nowrap; }
.btn-primary { background: var(--lime); color: var(--green); }
.btn-primary:hover { filter: brightness(.96); }
.btn-block { width: 100%; }
@media (min-width: 720px) { .btn-block { width: auto; } }

/* header */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(240, 238, 235, .92); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.site-header.scrolled { border-bottom-color: var(--line); }
.header-inner { display: flex; align-items: center; gap: 12px; min-height: var(--header-h); }
.logo { display: inline-flex; line-height: 0; margin-right: auto; }
.logo img { height: 20px; width: auto; }
.nav { display: none; gap: 24px; }
.nav a { color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 500; }
.nav a:hover { color: var(--green); }
.lang { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--ink-mute); }
.lang [aria-current] { color: var(--ink); }
.lang a { color: var(--ink-mute); text-decoration: none; padding: 4px 2px; }
.lang a:hover { color: var(--green); }
.site-header .btn { min-height: 40px; font-size: 14px; padding: 0 14px; }
@media (min-width: 900px) {
  .logo img { height: 22px; }
  .nav { display: flex; margin-right: 12px; }
  .header-inner { gap: 16px; }
}

/* 1. hero */
.hero { padding-block: 24px 48px; }
.hero-grid { display: grid; gap: 28px; align-items: center; }
.badge { display: inline-block; background: var(--lime-soft); color: var(--green); font-size: 12px; font-weight: 600; letter-spacing: .02em; padding: 4px 10px; border-radius: 6px; margin-bottom: 16px; }
.hero h1 { font-size: 34px; margin-bottom: 14px; }
.hero-sub { font-size: 16px; font-weight: 500; line-height: 1.5; color: var(--ink-soft); max-width: 36em; margin-bottom: 24px; }
.hero-photo { position: relative; }
.hero-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-panel); background: var(--lime-soft); }
.callout { position: absolute; background: var(--panel); border-radius: var(--r-card); padding: 12px 14px; box-shadow: 0 8px 24px rgba(41, 40, 38, .14); display: grid; line-height: 1.2; }
.callout small { font-size: 12px; color: var(--ink-soft); font-weight: 500; }
.callout strong { font-size: 28px; font-weight: 650; color: var(--green); letter-spacing: -.02em; }
.hero-callout { left: 12px; bottom: 12px; }
@media (min-width: 900px) {
  .hero { padding-block: 32px 72px; }
  /* The Greek headline is long: a wider text column and 36px keep it on two lines. */
  .hero-grid { grid-template-columns: 1.4fr 1fr; gap: 56px; }
  .hero h1 { font-size: 36px; }
  .hero-callout { left: 20px; bottom: 20px; padding: 14px 18px; }
}

/* 2. three steps */
.easy { padding-block: 8px var(--section); }
.easy-grid { list-style: none; margin: 0; padding: 32px 0 0; display: grid; gap: 28px; border-top: 1px solid var(--line); }
.easy-grid h3 { margin: 14px 0 8px; }
.easy-grid p { color: var(--ink-soft); font-size: var(--fs-small); font-weight: 500; margin: 0; }
.icon-round { width: 44px; height: 44px; border-radius: 50%; background: var(--lime-soft); color: var(--green); display: inline-flex; align-items: center; justify-content: center; }
.icon-round svg { width: 22px; height: 22px; }
@media (min-width: 720px) { .easy-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; } }

/* 3. calculator: a white panel like switch.cy's calculator; the intro shows a start button, then the steps */
.calc { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 36px 20px; }
.calc-inner { max-width: 640px; margin: 0 auto; }
.calc-intro { text-align: center; }
.calc .icon-round { background: var(--lime); width: 48px; height: 48px; margin: 0 auto 18px; }
.calc h2 { font-size: 28px; margin-bottom: 10px; }
.calc-sub { color: var(--ink-soft); font-size: var(--fs-small); font-weight: 500; margin-bottom: 20px; }
.calc-active .calc-intro { display: none; }
.cstart { text-align: center; }
.cstep-head { margin-bottom: 14px; }
.cstep-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 6px; }
.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); margin: 0; }
.clink { background: none; border: 0; padding: 4px 0; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink-soft); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.clink:hover { color: var(--green); }
.cstep-title { font-size: 22px; margin: 0; }
.chint { color: var(--ink-soft); font-size: var(--fs-small); margin: 0 0 12px; }
/* tiles, as on switch.cy */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tiles + .tiles, .cmore { margin-top: 10px; }
.tiles.one { grid-template-columns: 1fr; }
.tile { display: flex; flex-direction: column; align-items: stretch; gap: 8px; text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); padding: 12px; font: inherit; color: var(--ink); cursor: pointer; min-height: 112px; }
.tile:hover { border-color: var(--green); }
.tile.selected { background: var(--lime-soft); border: 2px solid var(--green); padding: 11px; }
.tile.compact { min-height: 0; padding: 12px 14px; }
.tile.compact.selected { padding: 11px 13px; }
.tile-icon { color: var(--ink); height: 52px; display: flex; align-items: center; justify-content: center; }
.tile-icon svg { height: 100%; width: auto; max-width: 100%; }
.tile-label { font-weight: 600; font-size: 15px; line-height: 1.25; }
.ic { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ic-accent { fill: var(--lime); stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.ic-coin { fill: var(--panel); stroke: currentColor; stroke-width: 1.6; }
.cmore select { font: inherit; font-size: 15px; height: 48px; padding: 0 40px 0 14px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--panel); color: var(--ink); width: 100%; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231E4D2B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.cexact { margin-top: 16px; }
.cexact label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.cexact .row { display: grid; gap: 8px; }
.cexact input, .cfield input { font: inherit; font-size: 16px; height: 46px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--panel); color: var(--ink); width: 100%; }
.cexact .btn, .creg .btn { min-height: 46px; }
/* result */
.cresult-title { font-size: 22px; margin: 0 0 18px; text-align: center; }
.ckpis { display: grid; gap: 8px; }
.ckpi { border: 1px solid var(--line); border-radius: var(--r-card); padding: 12px 14px; display: grid; gap: 4px; background: var(--panel); }
.ckpi-value { font-size: 24px; font-weight: 650; color: var(--green); letter-spacing: -.01em; line-height: 1.2; }
.cbasis { color: var(--ink-soft); font-size: 13px; margin: 14px 0 0; }
.creg { margin-top: 24px; padding: 20px; border-radius: var(--r-card); background: var(--lime-soft); }
.creg-title { font-size: 20px; font-weight: var(--w-head); margin: 0 0 6px; }
.creg-body { color: var(--ink-soft); font-size: var(--fs-small); margin: 0 0 14px; }
.cfields { display: grid; gap: 10px; margin-bottom: 12px; }
.cfield label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.creg .btn { width: 100%; }
.creg .small { font-size: 12px; color: var(--ink-soft); margin: 10px 0 0; }
.cerr { color: #9B2C1C; font-size: 14px; font-weight: 600; margin: 0 0 10px; }
.cthanks { margin-top: 24px; padding: 16px; border-radius: var(--r-card); background: var(--lime-soft); color: var(--green); font-weight: 600; text-align: center; }
.crestart { margin: 18px 0 0; text-align: center; }
@media (min-width: 560px) {
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .tiles.one { grid-template-columns: 1fr; }
  .cexact .row { grid-template-columns: 1fr auto; }
  .ckpis { grid-template-columns: repeat(2, 1fr); }
  .cfields { grid-template-columns: 1fr 1fr; }
  .creg .btn { width: auto; }
  .cresult-title { font-size: 26px; }
  .cstep-title { font-size: 24px; }
}
@media (min-width: 720px) { .calc { padding: 48px 40px; } .calc h2 { font-size: 32px; } }

/* 4. the story: three photos joined by one line that zig-zags from step to step (Base Power style).
   On a desktop the line is drawn by the SVG connectors between the steps; on a phone the steps stack
   and each one carries a short vertical line with a dot. */
.story-head { margin-bottom: 0; }
@media (min-width: 900px) { .story-head { margin-bottom: 20px; } } /* room between the title and the line's first dot */
.story { display: grid; gap: 0; }
.connector { display: none; width: 100%; height: auto; }
.connector path { fill: none; stroke: var(--green); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.connector circle { fill: var(--green); }
.story-step { display: grid; gap: 18px; }
.story-step::before, .story-close::before { content: ""; display: block; width: 12px; height: 56px; margin: 0 auto 24px; background: linear-gradient(var(--green), var(--green)) center / 1px 100% no-repeat, radial-gradient(circle, var(--green) 4.5px, transparent 5.5px) center bottom / 12px 12px no-repeat; }
.story-photo { position: relative; margin: 0; }
.story-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-panel); background: var(--lime-soft); }
.story-num { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .08em; color: var(--green); background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 3px 8px; margin-bottom: 12px; }
.story-text h3 { font-size: var(--fs-h3-sm); margin: 0 0 10px; }
.story-text p { color: var(--ink-soft); font-size: var(--fs-small); font-weight: 500; margin: 0; max-width: 36em; }
.bill-callout { right: 12px; top: 12px; }
.bill-callout .down { color: var(--green); font-weight: 600; font-size: 12px; margin-top: 2px; }
.bill-callout .sample { position: absolute; top: -9px; right: 10px; background: var(--ink); color: #fff; font-size: 10px; font-weight: 600; letter-spacing: .04em; padding: 2px 7px; border-radius: 999px; }
.story-close { text-align: center; }
.story-close .line { font-size: var(--fs-h2); font-weight: var(--w-head); letter-spacing: -.015em; line-height: 1.1; max-width: 24ch; margin: 0 auto 20px; color: var(--ink); text-wrap: balance; }
.story-close .note { font-size: 12px; color: var(--ink-soft); max-width: 38em; margin: 18px auto 0; }
@media (min-width: 900px) {
  .connector { display: block; }
  .story-step::before, .story-close::before { display: none; }
  .story-step { grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
  .story-step .story-photo { grid-column: 1; grid-row: 1; }
  .story-step .story-text { grid-column: 2; grid-row: 1; padding-right: 32px; }
  .story-step.flip .story-photo { grid-column: 2; }
  .story-step.flip .story-text { grid-column: 1; padding-right: 0; padding-left: 32px; }
  .story-text h3 { font-size: var(--fs-h3); }
  .story-text p { font-size: var(--fs-body); }
  .bill-callout { right: 20px; top: 20px; }
  .story-close .note { font-size: var(--fs-small); }
}

/* 5. dashboard */
.dash { background: var(--panel); border-radius: var(--r-panel); padding: 40px 20px; display: grid; gap: 36px; align-items: center; }
.dash .section-title { font-size: var(--fs-h2); max-width: none; margin-bottom: 28px; }
/* Two points as a tidy list: icon and title on one line, the text under them, a hairline between. */
.dash-points { list-style: none; margin: 0; padding: 0; }
.dash-points li { display: grid; grid-template-columns: 36px 1fr; column-gap: 12px; row-gap: 8px; align-items: center; padding: 20px 0; border-top: 1px solid var(--line); }
.dash-points li:last-child { border-bottom: 1px solid var(--line); }
.dash-points .icon-round { width: 36px; height: 36px; }
.dash-points .icon-round svg { width: 18px; height: 18px; }
.dash-points h3 { font-size: 18px; margin: 0; }
.dash-points p { grid-column: 1 / -1; color: var(--ink-soft); font-size: var(--fs-small); font-weight: 500; margin: 0; }
@media (min-width: 900px) { .dash { grid-template-columns: .85fr 1.15fr; gap: 56px; padding: 56px; } .dash .section-title { font-size: 28px; } }

/* the dashboard mock-up: drawn in HTML and CSS, inside a simple browser frame */
.frame { border-radius: var(--r-card); background: var(--panel); border: 1px solid var(--line); box-shadow: 0 24px 48px rgba(41, 40, 38, .10); overflow: hidden; font-size: 13px; line-height: 1.3; }
.frame-bar { display: flex; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: #F7F6F3; }
.frame-bar i { width: 9px; height: 9px; border-radius: 50%; background: #D9D5CE; }
.app { display: grid; }
.app-side { padding: 12px; border-bottom: 1px solid var(--line); background: #FAF9F7; display: flex; gap: 6px; overflow-x: auto; }
.app-side .logo-mini { display: none; }
.loc { display: grid; gap: 1px; white-space: nowrap; padding: 8px 10px; border-radius: var(--r-ctl); color: var(--ink); font: inherit; text-align: left; border: 0; background: none; }
button.loc { cursor: pointer; }
button.loc:hover { background: #F0EEEB; }
.biz-name { display: none; margin: -6px 10px 12px; font-size: 11.5px; font-weight: 600; color: var(--ink-soft); line-height: 1.3; }
.loc b { font-weight: 600; font-size: 12.5px; }
.loc small { font-size: 11px; color: var(--ink-mute); }
.loc.on { background: var(--lime-soft); }
.loc.on b { color: var(--green); }
.loc.add { color: var(--ink-mute); font-size: 12px; align-self: center; }
.app-main { padding: 16px; }
.app-top { display: flex; justify-content: flex-end; margin-bottom: 14px; }
.tabs { display: inline-flex; background: var(--bg); border-radius: 999px; padding: 3px; }
.tabs button { font: inherit; border: 0; background: none; cursor: pointer; padding: 4px 12px; border-radius: 999px; color: var(--ink-mute); font-weight: 600; font-size: 12px; transition: background .2s, color .2s; }
.tabs button:hover { color: var(--green); }
.chart svg, .figs b { transition: opacity .25s; }
.dash-fading .chart svg, .dash-fading .figs b { opacity: .15; }
.tabs .on { background: var(--panel); color: var(--green); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.figs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
/* Both cards stretch to the same height and the numbers sit on the same line, whatever the label's length. */
.fig { background: #F7F6F3; border-radius: 10px; padding: 10px 12px; display: grid; align-content: end; gap: 2px; }
.fig small { color: var(--ink-mute); font-size: 11.5px; }
.fig b { font-size: 20px; font-weight: 650; color: var(--green); letter-spacing: -.01em; }
.fig.forecast b { color: var(--ink); }
.chart svg { width: 100%; height: auto; display: block; font-family: var(--font); }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .lbl { font-size: 9px; fill: var(--ink-mute); }
.chart .area { fill: var(--lime-soft); opacity: .7; }
.chart .actual { fill: none; stroke: var(--green); stroke-width: 2.5; stroke-linecap: round; }
.chart .forecast { fill: none; stroke: #8DBF52; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 5 6; }
.chart .today { stroke: var(--green); stroke-width: 1; stroke-dasharray: 2 3; opacity: .6; }
.chart .dot { fill: var(--green); stroke: #fff; stroke-width: 2; }
.legend { display: flex; gap: 16px; color: var(--ink-mute); font-size: 11.5px; margin-top: 8px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 16px; height: 0; border-top: 2.5px solid var(--green); }
.legend i.dashed { border-top: 2.5px dashed #8DBF52; }
/* On a phone the locations sit in one row, names only. */
@media (max-width: 559px) { .loc small { display: none; } .loc { padding: 7px 9px; } }
@media (min-width: 560px) {
  .app { grid-template-columns: 172px 1fr; }
  .app-side { flex-direction: column; gap: 4px; border-bottom: 0; border-right: 1px solid var(--line); overflow: visible; }
  .app-side .logo-mini { display: block; height: 14px; width: auto; margin: 6px 10px 14px; }
  .biz-name { display: block; }
  .loc.add { margin-top: 4px; }
}

/* 6. FAQ */
.faq-list { max-width: 800px; margin: 36px auto 0; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; font-size: 16px; font-weight: 600; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231E4D2B' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center no-repeat; transition: transform .2s; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-body { padding: 0 44px 22px 0; color: var(--ink-soft); font-size: var(--fs-small); font-weight: 500; line-height: 1.55; }
.faq-body p:last-child { margin-bottom: 0; }
.timeline { list-style: none; margin: 18px 0 4px; padding: 0; display: grid; gap: 10px; counter-reset: tl; }
.timeline li { counter-increment: tl; background: var(--panel); border-radius: var(--r-card); padding: 12px 14px; display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: center; color: var(--ink); font-weight: 600; font-size: 14px; line-height: 1.3; position: relative; }
.timeline li::before { content: counter(tl); width: 28px; height: 28px; border-radius: 50%; background: var(--lime); color: var(--green); font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
@media (min-width: 720px) {
  .timeline { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .timeline li { grid-template-columns: 1fr; align-items: start; }
  .timeline li:not(:last-child)::after { content: ""; position: absolute; right: -19px; top: 30px; width: 14px; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E4D2B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat; }
}

/* 7. final band: edge to edge photo with a green tint, the line, a lime underline and the button */
.final { position: relative; overflow: hidden; background: var(--green); color: #fff; padding: 72px 0; text-align: center; display: grid; place-items: center; min-height: 420px; }
.final-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.final::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23, 61, 34, .42), rgba(23, 61, 34, .62)); }
.final-inner { position: relative; z-index: 1; }
.final h2 { color: #fff; font-size: 32px; max-width: 22ch; margin: 0 auto; text-shadow: 0 1px 12px rgba(0, 0, 0, .22); }
.squiggle { display: block; width: min(320px, 70%); height: auto; margin: 4px auto 0; }
.squiggle path { fill: none; stroke: var(--lime); stroke-width: 3; stroke-linecap: round; }
.final-sub { font-size: 16px; font-weight: 500; color: rgba(255, 255, 255, .92); margin: 22px auto 24px; text-shadow: 0 1px 8px rgba(0, 0, 0, .2); }
@media (min-width: 720px) { .final { padding: 120px 0; min-height: 560px; } .final h2 { font-size: 40px; } .final-sub { font-size: 18px; } }

/* footer */
.site-footer { padding-block: 48px 40px; font-size: 14px; color: var(--ink-soft); }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px 32px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.footer-top .logo img { height: 20px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; }
.footer-links a { color: var(--ink-soft); }
.footer-links a:hover { color: var(--green); }
.footnote { margin: 24px 0 8px; max-width: 60em; font-size: 12px; }
.copy { font-size: 12px; margin: 0; }

/* privacy page */
.prose { max-width: 720px; padding-block: 32px 64px; }
.prose h1 { margin-bottom: 8px; }
.prose h2 { font-size: 20px; margin: 32px 0 8px; }
.prose p, .prose li { color: var(--ink); }