/* plugsolarnz.com: a sunny back deck, not a power company or a ministry. Warm weatherboard paper, deep harbour-blue
   ink, one sun-yellow mark, and three status colours (done, under way, not yet) that the tracker is built on. Squarer
   corners and a 2px ink rule give it a printed, noticeboard feel. Sora for headings, Albert Sans for text (both OFL,
   self-hosted). Every text/background pair below is checked for contrast in light and dark mode by tests/design.test.ts. */

@font-face { font-family: "Sora"; src: url("/fonts/sora-normal.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Albert Sans"; src: url("/fonts/albert-sans-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --bg: #f7f4ec;          /* weatherboard paper */
  --band: #efe9db;
  --card: #fffdf8;
  --text: #13242c;        /* harbour ink */
  --muted: #4a5a62;
  --line: #d8d0bf;
  --rule: #13242c;        /* the 2px printed rule on key cards */
  --link: #0b5c74;
  --tint-bg: #e3f0f3;
  --sun: #f4b400;         /* graphics only, never text on paper */
  --sun-soft: #fde9a8;
  --board: #e2d9c6;       /* the weatherboard lines on the home page's wall */
  --ink: #0f2a35;         /* the dark band, the same in both modes */
  --ink-2: #173a48;
  --on-ink: #f4f8f9;
  --on-ink-muted: #b8ccd4;
  --btn: #0b5c74;
  --btn-text: #ffffff;
  --btn-hover: #08465a;
  /* status: text on its own chip background, and a solid mark for the track and dots */
  --done: #1b6236; --done-bg: #e1f1e5; --done-mark: #2e8b52;
  --open: #6c4700; --open-bg: #fcefc9; --open-mark: #b97f00;
  --wait: #4a5a62; --wait-bg: #eae6dc; --wait-mark: #8b979c;
  --serif: "Sora", "Segoe UI", system-ui, sans-serif;
  --sans: "Albert Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius: 8px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1a20;
    --band: #12222a;
    --card: #172a33;
    --text: #eef3f4;
    --muted: #aebfc6;
    --line: #2c424c;
    --rule: #6f8f9c;
    --link: #7fd0e6;
    --tint-bg: #16343f;
    --sun-soft: #4a3a10;
    --board: #1a2f38;
    --ink: #08141a;
    --ink-2: #13262f;
    --btn: #7fd0e6;
    --btn-text: #0a2630;
    --btn-hover: #a9e1f0;
    --done: #93e0b0; --done-bg: #15362a; --done-mark: #4fbf7d;
    --open: #f7d27e; --open-bg: #3a2d0e; --open-mark: #e0a52a;
    --wait: #c3d0d5; --wait-bg: #22323a; --wait-mark: #7d8f96;
    color-scheme: dark;
  }
}

/* ---------- type ---------- */
body { font-family: var(--sans); font-size: 18px; line-height: 1.65; background: var(--bg); color: var(--text); }
h1, h2, h3 { font-family: var(--serif); font-weight: 650; letter-spacing: -0.025em; }
h1 { font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.07; margin: 0.1em 0 0.35em; }
h2 { font-size: clamp(1.45rem, 3vw, 1.95rem); line-height: 1.2; margin: 1.8em 0 0.5em; }
h3 { font-size: 1.15rem; line-height: 1.3; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
strong { font-weight: 750; }
.wrap { max-width: 1160px; padding: 0 24px; }
@media (max-width: 600px) { .wrap { padding: 0 16px; } body { font-size: 17px; } }
.narrow { max-width: 760px; }
::selection { background: #fde9a8; color: #13242c; }
.kicker { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.label { font-size: 0.88rem; line-height: 1.5; color: var(--muted); margin: 10px 0 0; }
.muted { color: var(--muted); }
.page-head .lede { font-size: 1.2rem; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- header and footer ---------- */
.site-header { background: var(--bg); border-bottom: 2px solid var(--rule); }
.brand { gap: 10px; }
.brand svg.logo-mark { height: 38px; }
.logo-mark .lm-face { fill: #0f2a35; }
@media (prefers-color-scheme: dark) { .logo-mark .lm-face { stroke: #6f8f9c; stroke-width: 1.5; } }
.logo-mark .lm-sun { fill: #f4b400; }
.logo-mark .lm-rays { stroke: #f4b400; }
.logo-mark .lm-pins { stroke: #ffffff; }
.wordmark { display: flex; align-items: baseline; gap: 6px; line-height: 1; }
.wm-name { font-family: var(--serif); font-weight: 700; font-size: 1.2rem; letter-spacing: -0.03em; color: var(--text); }
.wm-kicker { font-family: var(--serif); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em; color: var(--text); background: var(--sun); color: #13242c; padding: 3px 6px 2px; border-radius: 4px; }
.main-nav a { font-weight: 600; }
.main-nav .nav-cta { background: var(--btn); color: var(--btn-text); border-radius: 6px; }
.main-nav .nav-cta:hover, .main-nav .nav-cta[aria-current="page"] { background: var(--btn-hover); color: var(--btn-text); }
.site-footer { background: var(--band); margin-top: 0; border-top: 2px solid var(--rule); }
.footer-col h2 { font-family: var(--sans); letter-spacing: 0.08em; }

/* ---------- buttons ---------- */
.btn { background: var(--btn); color: var(--btn-text); border-radius: 6px; font-weight: 750; padding: 12px 22px; }
.btn:hover { background: var(--btn-hover); color: var(--btn-text); }
.btn-quiet { background: transparent; color: var(--link); box-shadow: inset 0 0 0 2px var(--link); }
.btn-quiet:hover { background: var(--tint-bg); color: var(--link); }

/* ---------- status chips ---------- */
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 750; line-height: 1.2; padding: 4px 10px 4px 8px; border-radius: 4px; white-space: nowrap; }
.chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.chip-done { color: var(--done); background: var(--done-bg); } .chip-done::before { background: var(--done-mark); }
.chip-open { color: var(--open); background: var(--open-bg); } .chip-open::before { background: var(--open-mark); }
.chip-waiting { color: var(--wait); background: var(--wait-bg); } .chip-waiting::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--wait-mark); }

/* ---------- home: the wall socket, switched off ---------- */
/* the hero is a weatherboard wall: horizontal boards, the socket on it */
.hero { padding: 36px 0 44px; border-bottom: 2px solid var(--rule); background:
  repeating-linear-gradient(180deg, transparent 0 41px, var(--board) 41px 43px), var(--band); }
.hero h1 { font-size: clamp(1.45rem, 3.4vw, 2.1rem); line-height: 1.15; margin: 0 0 18px; max-width: 20em; }
.verdict { display: flex; align-items: center; gap: clamp(16px, 4vw, 40px); margin: 0 0 22px; }
.verdict .socket { width: clamp(128px, 30vw, 260px); flex: none; }
.verdict-a { font-family: var(--serif); font-weight: 800; font-size: clamp(3rem, 12vw, 6.5rem); line-height: 0.95; letter-spacing: -0.05em; margin: 0; }
.verdict-when { font-family: var(--serif); font-weight: 600; font-size: clamp(1.05rem, 2.6vw, 1.45rem); line-height: 1.3; margin: 10px 0 0; }
.hero-why { font-size: 1.1rem; max-width: 36em; margin: 0 0 10px; }
.hero-checked { font-size: 0.88rem; color: var(--muted); max-width: 40em; margin: 0; }
/* a white plastic socket: the same in dark mode, like the ballot paper */
.socket .sk-plate { fill: #fbf8f0; stroke: #13242c; stroke-width: 2.5; }
.socket .sk-shadow { fill: #13242c; opacity: 0.16; }
.socket .sk-screw { fill: none; stroke: #8b979c; stroke-width: 2; }
.socket .sk-slot { fill: #13242c; }
.socket .sk-frame { fill: #efe9db; stroke: #13242c; stroke-width: 2; }
.socket .sk-rocker { fill: #fbf8f0; stroke: #13242c; stroke-width: 2; }
.socket .sk-rocker-edge { stroke: #b8b0a0; stroke-width: 3; stroke-linecap: round; }
.socket .sk-label { font-family: var(--serif); font-size: 15px; font-weight: 800; letter-spacing: 0.08em; fill: #13242c; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- home: the cable from the socket to the plug, lit as far as things have got ---------- */
.steps { padding: 56px 0 48px; }
/* wide: the intro and the latest news on the left, the cable on the right; phones: intro, cable, then the news */
.steps-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-template-areas: "intro cable" "latest cable"; grid-template-rows: auto 1fr; gap: 0 56px; align-items: start; }
.steps-intro { grid-area: intro; }
.steps-cable { grid-area: cable; }
.steps-latest { grid-area: latest; }
.steps-intro h2 { margin-top: 0; }
.latest-head { font-size: 1rem; margin: 28px 0 8px; }
.latest { list-style: none; margin: 0; padding: 0; font-size: 0.95rem; }
.latest li { padding: 10px 0; border-top: 1px solid var(--line); }
.latest time { display: block; font-weight: 750; font-size: 0.85rem; color: var(--muted); }
.cable { list-style: none; margin: 0; padding: 0; }
.cable li { position: relative; padding: 0 0 28px 50px; }
.cable li::before { content: ""; position: absolute; left: 14px; top: 16px; bottom: -16px; width: 8px; border-radius: 4px; background: var(--wait-mark); }
.cable li.is-done::before { background: var(--sun); }
.cable li.is-open::before { background: linear-gradient(180deg, var(--sun) 0 30%, var(--wait-mark) 30%); }
.cable li.is-waiting::before { background: repeating-linear-gradient(180deg, var(--wait-mark) 0 9px, transparent 9px 16px); }
.cable .c-node { position: absolute; left: 2px; top: 2px; width: 32px; height: 32px; border-radius: 50%; box-sizing: border-box; background: var(--bg); border: 3px solid var(--wait-mark); z-index: 1; }
.cable .is-done .c-node { background: var(--sun); border-color: var(--text); }
.cable .is-open .c-node { background: var(--sun-soft); border-color: var(--open-mark); box-shadow: 0 0 0 6px var(--open-bg); }
.cable .c-when { margin: 0; font-size: 0.88rem; color: var(--muted); }
.cable .c-status { font-weight: 800; }
.cable .is-done .c-status { color: var(--done); }
.cable .is-open .c-status { color: var(--open); }
.cable h3 { margin: 2px 0 0; font-size: 1.2rem; }
.cable .is-waiting h3 { color: var(--muted); }
.cable .c-text { margin: 8px 0 0; font-size: 0.98rem; }
.cable-end { display: flex; align-items: center; gap: 14px; margin-top: -12px; }
.cable-end .plug { width: 36px; flex: none; }
.cable-end p { margin: 18px 0 0; font-family: var(--serif); font-weight: 650; }
.plug .pl-cable { stroke: var(--wait-mark); stroke-width: 8; stroke-dasharray: 9 7; }
.plug .pl-body { fill: var(--card); stroke: var(--text); stroke-width: 3; }
.plug .pl-pin { stroke: var(--text); stroke-width: 5; stroke-linecap: round; fill: none; }

/* ---------- home: the render, full width ---------- */
.deck { margin: 0; }
.deck img { display: block; width: 100%; height: auto; max-height: 78vh; object-fit: cover; }
.deck figcaption { font-size: 0.9rem; color: var(--muted); padding-top: 10px; padding-bottom: 8px; }

/* ---------- home: the ballot paper ---------- */
.vote { background: var(--ink); color: var(--on-ink); padding: 64px 0; margin-top: 40px; }
.vote h2 { color: #ffffff; margin-top: 0; }
.vote a { color: #ffd766; }
.vote-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 56px; align-items: start; }
/* paper, so it stays white with black print in dark mode too */
.ballot { background: #ffffff; color: #111111; border-radius: 3px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35); }
.ballot-head { margin: 0; background: #111111; color: #ffffff; font-family: var(--serif); font-weight: 700; font-size: 1.05rem; padding: 12px 20px; border-radius: 3px 3px 0 0; }
.ballot ul { list-style: none; margin: 0; padding: 0 20px; }
.ballot li { display: grid; grid-template-columns: minmax(0, 1fr) 46px; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1.5px solid #111111; }
.ballot li:last-child { border-bottom: 0; }
.ballot p { margin: 0; }
.ballot .b-party { font-family: var(--serif); font-weight: 800; font-size: 1.05rem; letter-spacing: 0.06em; text-transform: uppercase; }
.ballot .b-what { font-size: 0.95rem; line-height: 1.5; margin-top: 4px; }
.ballot .b-src { font-size: 0.82rem; color: #4d4d4d; margin-top: 6px; }
.ballot .b-src a { color: #0b5c74; }
.ballot .b-mark { width: 46px; height: 46px; box-sizing: border-box; border: 2px solid #111111; border-radius: 50%; display: grid; place-items: center; }
.ballot .b-mark svg { width: 34px; height: 34px; }
.ballot .b-mark path { fill: none; stroke: #111111; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 861px) { .ballot { transform: rotate(0.8deg); } }

/* ---------- home: what a kit would save ---------- */
.money { padding: 64px 0; }
.money-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 56px; align-items: start; }
.money h2, .money h3 { margin-top: 0; }
.saving { font-family: var(--serif); font-weight: 600; font-size: clamp(1.4rem, 3.6vw, 2rem); line-height: 1.4; letter-spacing: -0.02em; margin: 0 0 18px; }
.saving strong { font-weight: 800; background: linear-gradient(transparent 62%, var(--sun-soft) 62%); }
.saving select { font: inherit; color: var(--text); background-color: transparent; border: 0; border-bottom: 4px solid var(--sun); border-radius: 0; padding: 0 1.1em 0 0; margin: 0; cursor: pointer; -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 0.35em top 58%, right 0.05em top 58%; background-size: 0.3em 0.3em; background-repeat: no-repeat; }
.saving select:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; }
.saving option { font-size: 1rem; color: #13242c; background: #ffffff; }
.money-note { font-size: 0.9rem; color: var(--muted); max-width: 34em; }
.bars li.is-picked { font-weight: 800; }
.bars li.is-picked .b-fill { background: var(--open-mark); }

/* ---------- home: what to read ---------- */
.reading { background: var(--band); padding: 56px 0; border-top: 2px solid var(--rule); }
.reading h2 { margin-top: 0; }
.reading-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0 40px; }
.reading-list li { padding: 16px 0; border-top: 1px solid var(--line); }
.reading-list a { font-family: var(--serif); font-weight: 700; font-size: 1.15rem; }
.reading-list p { margin: 4px 0 0; color: var(--muted); font-size: 0.95rem; }
.alert-band { padding: 56px 0 64px; }

@media (max-width: 860px) {
  .hero { padding: 24px 0 32px; }
  .steps { padding: 40px 0 32px; }
  .steps-grid { grid-template-columns: 1fr; grid-template-areas: "intro" "cable" "latest"; grid-template-rows: auto; gap: 20px; }
  .vote-grid, .money-grid { grid-template-columns: 1fr; gap: 28px; }
  .verdict .socket { width: clamp(140px, 38vw, 200px); }
  .vote, .money { padding: 44px 0; }
  .ballot ul { padding: 0 14px; }
  .ballot-head { padding: 12px 14px; }
  .reading-list { grid-template-columns: 1fr; }
}

/* ---------- the track: every step to legal, as stations ---------- */
.track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); gap: 0; counter-reset: st; }
.track li { position: relative; padding: 34px 12px 0 0; }
.track li::before { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 4px; background: var(--wait-mark); }
.track li:first-child::before { left: 10px; }
.track li:last-child::before { right: auto; width: 10px; }
.track li.is-done::before { background: var(--done-mark); }
.track li.is-open::before { background: linear-gradient(90deg, var(--open-mark) 0 50%, var(--wait-mark) 50%); }
.track .dot { position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--card); box-shadow: inset 0 0 0 4px var(--wait-mark); }
.track .is-done .dot { background: var(--done-mark); box-shadow: none; }
.track .is-open .dot { background: var(--open-mark); box-shadow: 0 0 0 5px var(--open-bg); }
.track .st-name { display: block; font-family: var(--serif); font-weight: 650; font-size: 0.98rem; line-height: 1.25; }
.track .st-when { display: block; font-size: 0.85rem; color: var(--muted); margin-top: 4px; }
.track .chip { margin-top: 8px; }
@media (max-width: 860px) {
  .track { grid-template-columns: 1fr; }
  .track li { padding: 0 0 22px 40px; }
  .track li::before { left: 11px; right: auto; top: 0; bottom: 0; width: 4px; height: auto; }
  .track li:first-child::before { left: 11px; top: 12px; }
  .track li:last-child::before { width: 4px; bottom: auto; height: 12px; }
  .track li.is-open::before { background: linear-gradient(180deg, var(--open-mark) 0 50%, var(--wait-mark) 50%); }
}

/* ---------- timeline ---------- */
.timeline { list-style: none; margin: 0; padding: 0 0 0 22px; border-left: 3px solid var(--line); }
.timeline li { position: relative; margin: 0 0 22px; }
.timeline li::before { content: ""; position: absolute; left: -31px; top: 6px; width: 15px; height: 15px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 3px var(--link); }
.timeline li.is-key::before { background: var(--sun); box-shadow: inset 0 0 0 3px var(--text); }
.timeline li.is-next::before { background: var(--bg); box-shadow: inset 0 0 0 3px var(--wait-mark); }
.timeline time, .timeline .tl-when { display: block; font-size: 0.85rem; font-weight: 750; color: var(--muted); }
.timeline p { margin: 2px 0 0; }

/* ---------- facts grid ---------- */
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin: 18px 0; padding: 0; }
.facts div { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; }
.facts dt { font-size: 0.82rem; color: var(--muted); }
.facts dd { margin: 2px 0 0; font-weight: 750; }

/* ---------- city chart: payback bars from the calculator ---------- */
.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bars li { display: grid; grid-template-columns: 8.5em minmax(0, 1fr) 5.5em; gap: 12px; align-items: center; font-size: 0.95rem; }
.bars .b-track { height: 14px; background: var(--wait-bg); border-radius: 3px; overflow: hidden; }
.bars .b-fill { display: block; height: 100%; background: var(--sun); box-shadow: inset 0 0 0 1px rgba(19, 36, 44, 0.25); }
.bars .b-val { text-align: right; font-weight: 750; font-variant-numeric: tabular-nums; }
@media (max-width: 520px) { .bars li { grid-template-columns: 6.5em minmax(0, 1fr) 4.8em; gap: 8px; font-size: 0.9rem; } }

/* ---------- calculator ---------- */
.tool { background: var(--card); border: 2px solid var(--rule); border-radius: var(--radius); }
.tool input, .tool select { border-radius: 6px; }
.calc-out { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 16px; }
.calc-headline { font-family: var(--serif); font-weight: 700; font-size: clamp(1.3rem, 3vw, 1.7rem); line-height: 1.25; margin: 0 0 12px; letter-spacing: -0.02em; }
.calc-headline .hl { background: linear-gradient(transparent 62%, var(--sun-soft) 62%); }
.result-grid div { background: var(--bg); border-radius: 6px; }
.calc-note { font-size: 0.88rem; color: var(--muted); margin: 12px 0 0; }
.calc-error { color: #9b2c1f; font-weight: 700; }
@media (prefers-color-scheme: dark) { .calc-error { color: #ffb3a6; } }
.assume { font-size: 0.92rem; }
.assume li { margin: 4px 0; }

/* ---------- tables ---------- */
.table-scroll { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.data-table { font-size: 0.94rem; }
.data-table th, .data-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); }
.data-table thead th { background: var(--band); font-size: 0.84rem; letter-spacing: 0.02em; }
.data-table tbody th { background: transparent; font-weight: 700; }
.data-table tbody th small, .data-table td small { display: block; font-weight: 400; color: var(--muted); font-size: 0.84rem; margin-top: 2px; }
.data-table tr:last-child > * { border-bottom: 0; }
.checked-line { font-size: 0.88rem; color: var(--muted); margin: 10px 0 0; }

/* ---------- sources and the one-line notes ---------- */
.sources { margin-top: 2.4em; font-size: 0.9rem; color: var(--muted); }
.sources h2 { font-size: 1.2rem; }
.sources ol { padding-left: 1.3em; }
.sources li { margin: 4px 0; }
.sources a { color: var(--muted); }
.note-line { font-size: 0.95rem; border-left: 3px solid var(--sun); padding: 2px 0 2px 12px; margin: 14px 0; }

/* ---------- guides as cards ---------- */
.cards { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.card { background: var(--card); border-radius: var(--radius); border: 1px solid var(--line); }
a.card:hover { border-color: var(--rule); }
a.card h3 { color: var(--text); }
a.card p { color: var(--muted); font-size: 0.95rem; }

/* ---------- figures ---------- */
.figure { margin: 1.4em 0; }
.figure img { display: block; width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--line); }
.figure figcaption { font-size: 0.86rem; color: var(--muted); margin-top: 6px; }
.diagram { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.diagram svg { display: block; width: 100%; height: auto; }
.diagram text { font-family: var(--sans); fill: var(--text); }
.diagram .d-muted { fill: var(--muted); }
.diagram .d-line { stroke: var(--text); }
.diagram .d-box { fill: var(--bg); stroke: var(--text); }
.diagram .d-sun { fill: var(--sun); }
.diagram .d-panel { fill: var(--ink-2); stroke: var(--text); }
.diagram .d-flow { stroke: var(--open-mark); }

/* ---------- sign-up ---------- */
.signup-block { background: var(--card); border: 2px solid var(--rule); border-radius: var(--radius); padding: 28px; }
.signup-block h2 { margin-top: 0; }
.signup-block select { font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--text); margin: 4px 0 12px; max-width: 100%; }
.signup-block .field-label { display: block; font-weight: 650; }
.signup input[type="email"] { border-radius: 6px; }