/* ============================================================================
   My Energy Tracker — theme
   Warm, sunlit, light. Fraunces (display) + Plus Jakarta Sans (UI/body).
   ========================================================================= */

:root {
    --paper:        #fbf7ef;
    --paper-2:      #f3ead9;
    --surface:      #ffffff;
    --ink:          #20302c;
    --ink-soft:     #56655f;
    --muted:        #8b958e;
    --line:         #ece2d2;
    --line-strong:  #ddd0ba;

    --primary:      #0e7c66;
    --primary-dark: #0a5c4b;
    --primary-tint: #e3f0ea;

    --sun:          #f5a623;
    --sun-deep:     #e08a00;
    --sun-soft:     #fcecca;

    --good:         #0e7c66;
    --bad:          #c0392b;

    --radius:       16px;
    --radius-sm:    10px;
    --shadow:       0 1px 2px rgba(60,45,20,.05), 0 8px 24px rgba(60,45,20,.06);
    --shadow-lg:    0 2px 4px rgba(60,45,20,.06), 0 18px 48px rgba(60,45,20,.10);

    --display: "Fraunces", Georgia, serif;
    --body:    "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    font-family: var(--body);
    color: var(--ink);
    background: var(--paper);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

/* Atmospheric background: a soft sun glow up top fading into warm paper. */
.sky {
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(900px 520px at 78% -8%, var(--sun-soft) 0%, rgba(252,236,202,0) 60%),
        radial-gradient(700px 460px at 8% 4%, #eaf4ef 0%, rgba(234,244,239,0) 55%),
        linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

small { font-size: .82em; font-weight: 500; color: var(--muted); }
code {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    background: var(--primary-tint);
    color: var(--primary-dark);
    padding: .1em .4em;
    border-radius: 6px;
    font-size: .88em;
}

/* ---- Top bar -------------------------------------------------------------- */
.topbar {
    /* Floating bar, same behaviour as mailme.nz.

       The bar spans the full width so its translucent background reaches
       both edges, while the padding below keeps the brand and the nav on
       exactly the same column as .wrap uses for page content: the 1140px
       gutter, plus .wrap's own inner padding. Below 1140px the max() falls
       back to that inner padding alone.

       Doing it with padding rather than a wrapper element means the
       stylesheet cannot fall out of step with the markup. */
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(251, 247, 239, .85);
    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--line);

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px calc(max(0px, (100% - 1140px) / 2) + clamp(16px, 4vw, 40px));
}

/* Some versions of header.php wrap the bar's contents in this div. It is
   no longer needed: display:contents removes it from layout, so the brand
   and nav become flex children of .topbar either way and the bar renders
   identically with or without the wrapper. */
.topbar-inner { display: contents; }
.brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: var(--ink);
    font-weight: 700;
}
.brand:hover { text-decoration: none; }
.brand-mark {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 13px;
    box-shadow: var(--shadow);
}
.brand-text {
    font-family: var(--display);
    font-size: 20px;
    letter-spacing: -.01em;
}
.nav {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.nav > a:not(.btn) {
    color: var(--ink-soft);
    font-weight: 600;
    padding: 8px 12px;
    border-radius: 9px;
    font-size: 14px;
}
.nav > a:not(.btn):hover { background: rgba(14,124,102,.07); text-decoration: none; color: var(--primary-dark); }
.nav > a.active { color: var(--primary-dark); background: var(--primary-tint); }
.nav-user {
    color: var(--muted);
    font-size: 13px;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-left: 4px;
}

/* ---- Layout --------------------------------------------------------------- */
.wrap {
    max-width: 1140px;
    margin: 0 auto;
    padding: 8px clamp(16px, 4vw, 40px) 64px;
}

.foot {
    max-width: 1140px;
    margin: 40px auto 0;
    padding: 20px clamp(16px, 4vw, 40px) 40px;
    color: var(--muted);
    font-size: 13px;
    display: flex;
    gap: 10px;
    align-items: center;
}
.dot { color: var(--line-strong); }

/* ---- Flash messages ------------------------------------------------------- */
.flash {
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    margin-bottom: 16px;
    font-weight: 500;
    border: 1px solid transparent;
    animation: fade-up .35s ease both;
}
.flash a { font-weight: 700; }
.flash-success { background: var(--primary-tint); color: var(--primary-dark); border-color: #c4e3d8; }
.flash-error   { background: #fdecea; color: #9b2c1c; border-color: #f4c9c1; }
.flash-info    { background: var(--sun-soft); color: #8a5800; border-color: #f3dca0; }

/* ---- Buttons -------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-family: var(--body);
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    padding: 12px 18px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .08s ease, box-shadow .15s ease, background .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 6px 16px rgba(14,124,102,.28);
}
.btn-primary:hover { background: var(--primary-dark); text-decoration: none; }
.btn-ghost {
    background: var(--surface);
    color: var(--ink);
    border-color: var(--line-strong);
}
.btn-ghost:hover { background: #fcfaf5; text-decoration: none; border-color: var(--muted); }
.btn-sm { padding: 8px 13px; font-size: 13px; border-radius: 8px; }
.btn-block { width: 100%; }

/* ---- Auth screens --------------------------------------------------------- */
.auth {
    min-height: 64vh;
    display: grid;
    place-items: center;
    padding: 24px 0;
}
.auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 36px 32px;
    box-shadow: var(--shadow-lg);
    animation: fade-up .45s ease both;
}
.auth-card-wide { max-width: 480px; }
.auth-title {
    font-family: var(--display);
    font-weight: 600;
    font-size: 30px;
    letter-spacing: -.02em;
    margin: 14px 0 6px;
}
.auth-sub { color: var(--ink-soft); margin: 0 0 22px; }
.auth-links {
    margin-top: 18px;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    font-size: 14px;
    color: var(--muted);
}

.pill {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--primary-dark);
    background: var(--primary-tint);
    padding: 5px 11px;
    border-radius: 999px;
}
.pill-amber { color: var(--sun-deep); background: var(--sun-soft); }

/* ---- Forms ---------------------------------------------------------------- */
.form { display: flex; flex-direction: column; gap: 15px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font-weight: 600; font-size: 13.5px; color: var(--ink-soft); }
.field input,
.field select {
    font-family: var(--body);
    font-size: 15px;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    padding: 12px 13px;
    width: 100%;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus,
.field select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(14,124,102,.14);
}
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sep { border: none; border-top: 1px solid var(--line); margin: 4px 0; }
.hint { margin: 2px 0 0; }

/* ---- Page head & cards ---------------------------------------------------- */
.page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin: 10px 0 22px;
    flex-wrap: wrap;
}
.h1 {
    font-family: var(--display);
    font-weight: 600;
    font-size: clamp(26px, 4vw, 34px);
    letter-spacing: -.02em;
    margin: 0 0 4px;
}
.h2 {
    font-family: var(--display);
    font-weight: 600;
    font-size: 21px;
    letter-spacing: -.01em;
    margin: 0 0 4px;
}
.muted { color: var(--muted); margin: 0; }
.small { font-size: 13px; }

.counter {
    font-family: var(--display);
    font-weight: 600;
    font-size: 30px;
    color: var(--primary-dark);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 10px 18px;
    box-shadow: var(--shadow);
    white-space: nowrap;
}
.counter small { font-family: var(--body); color: var(--muted); }
.counter-amber { color: var(--sun-deep); }

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px;
    box-shadow: var(--shadow);
    animation: fade-up .45s ease both;
}

/* ---- Summary stat cards --------------------------------------------------- */
.cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 22px;
}
.stat { display: flex; flex-direction: column; gap: 7px; }
.stat-label { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.stat-value {
    font-family: var(--display);
    font-weight: 600;
    font-size: 30px;
    letter-spacing: -.02em;
    color: var(--ink);
    line-height: 1.05;
}
.stat-value small { font-family: var(--body); font-size: 14px; color: var(--muted); }

.trend { font-size: 12.5px; font-weight: 700; }
.trend-good { color: var(--good); }
.trend-bad  { color: var(--bad); }
.trend-flat { color: var(--muted); font-weight: 600; }

/* ---- Two-column grid (form + chart) -------------------------------------- */
.grid {
    display: grid;
    grid-template-columns: 0.92fr 1.08fr;
    gap: 16px;
    align-items: start;
    margin-bottom: 16px;
}
.grid-settings { grid-template-columns: 1.3fr 1fr; }

/* ---- Bill entry ----------------------------------------------------------- */
.bill-head, .chart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}
.bill-tag {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--sun-deep);
    background: var(--sun-soft);
    padding: 4px 10px;
    border-radius: 999px;
}
.bill-form { margin-top: 14px; }

.bill-preview {
    background: linear-gradient(180deg, #fffdf8, #fbf6ec);
    border: 1px dashed var(--line-strong);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.bp-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 14px;
    color: var(--ink-soft);
}
.bp-line b { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 700; }
.bp-total {
    border-top: 1px solid var(--line-strong);
    padding-top: 8px;
    margin-top: 1px;
    font-size: 15px;
    color: var(--ink);
    font-weight: 700;
}
.bp-total b { font-family: var(--display); font-size: 20px; color: var(--primary-dark); }
.bp-rate { font-size: 13px; }
.bp-rate b { color: var(--sun-deep); }

/* ---- Chart ---------------------------------------------------------------- */
.chart-card { min-height: 280px; display: flex; flex-direction: column; }
.legend { display: flex; gap: 14px; align-items: center; }
.lg { font-size: 12.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; color: var(--ink-soft); }
.lg::before { content: ""; width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.lg-cost::before { background: var(--primary); }
.lg-kwh::before  { background: var(--sun); }
.chart { width: 100%; margin-top: 12px; flex: 1; min-height: 220px; }
.chart svg { width: 100%; height: auto; display: block; }
.chart-note { margin-top: 10px; }

/* ---- Empty states --------------------------------------------------------- */
.empty {
    text-align: center;
    color: var(--muted);
    padding: 36px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.empty p { max-width: 280px; margin: 0; }
.empty-sun {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 45%, var(--sun) 0 42%, var(--sun-soft) 43% 100%);
    box-shadow: 0 0 0 8px rgba(245,166,35,.12);
}

/* ---- Tables --------------------------------------------------------------- */
.table-card { margin-top: 16px; }
.table-scroll { overflow-x: auto; margin-top: 12px; }
.data {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    min-width: 640px;
}
.data th, .data td {
    padding: 11px 12px;
    text-align: left;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}
.data thead th {
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .03em;
    border-bottom: 1.5px solid var(--line-strong);
    vertical-align: bottom;
}
.data thead th small { text-transform: none; letter-spacing: 0; }
.data tbody tr:hover { background: #fcfaf4; }
.data tbody tr:last-child td { border-bottom: none; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.strong { font-weight: 700; color: var(--ink); }
th.num { text-align: right; }

.actions-col { text-align: right; }
.actions { display: inline-flex; gap: 7px; justify-content: flex-end; flex-wrap: wrap; }
.inline { display: inline; margin: 0; }

.badge {
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    text-transform: capitalize;
}
.badge-pending  { color: var(--sun-deep);     background: var(--sun-soft); }
.badge-active   { color: var(--primary-dark); background: var(--primary-tint); }
.badge-disabled { color: #6b7280;             background: #eceef0; }

.btn-del {
    border: 1px solid var(--line-strong);
    background: #fff;
    color: var(--muted);
    width: 30px; height: 30px;
    border-radius: 8px;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: all .12s ease;
}
.btn-del:hover { background: #fdecea; color: var(--bad); border-color: #f0c2ba; }

/* ---- Tips ----------------------------------------------------------------- */
.tips { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 16px; }
.tips h3 { font-family: var(--display); font-weight: 600; font-size: 15px; margin: 0 0 6px; }

/* ---- Motion --------------------------------------------------------------- */
@keyframes fade-up {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.cards .card:nth-child(2) { animation-delay: .05s; }
.cards .card:nth-child(3) { animation-delay: .10s; }
.cards .card:nth-child(4) { animation-delay: .15s; }

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

/* ---- Responsive ----------------------------------------------------------- */
@media (max-width: 880px) {
    .cards { grid-template-columns: repeat(2, 1fr); }
    .grid, .grid-settings { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    body { font-size: 14.5px; }
    .cards { grid-template-columns: 1fr 1fr; gap: 12px; }
    .card { padding: 18px; }
    .row-2 { grid-template-columns: 1fr; }
    .nav-user { display: none; }
    .auth-card { padding: 28px 22px; }
}

/* ---- Two-register form additions ----------------------------------------- */
.row-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.reg-label {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--primary-dark);
    background: var(--primary-tint);
    padding: 4px 10px;
    border-radius: 999px;
    margin: 4px 0 -2px;
}
.bill-form .reg-label:first-of-type { margin-top: 2px; }

@media (max-width: 620px) {
    .row-4 { grid-template-columns: 1fr 1fr; }
}

/* ---- Production page ------------------------------------------------------ */
.months-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 8px 0 6px;
}
.month-field > span { font-size: 12px; }
.month-field input { padding: 9px 10px; }
.lg-gen::before { background: #1f9d57; }
.save-pos { color: var(--good); font-weight: 700; }
.save-neg { color: var(--bad); font-weight: 700; }

@media (max-width: 620px) {
    .months-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
    .months-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Public landing ------------------------------------------------------- */
.hero { max-width: 720px; margin: 24px auto 0; text-align: center; }
.hero-title {
    font-family: var(--display);
    font-weight: 600;
    font-size: clamp(28px, 5vw, 42px);
    letter-spacing: -.02em;
    line-height: 1.1;
    margin: 14px 0 10px;
}
.hero-sub { color: var(--ink-soft); font-size: 17px; max-width: 600px; margin: 0 auto 8px; }
.postcode-form {
    display: flex;
    gap: 10px;
    max-width: 460px;
    margin: 22px auto 8px;
}
.postcode-form input {
    flex: 1;
    font-size: 16px;
    padding: 13px 15px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: #fff;
}
.postcode-form input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(14,124,102,.14); }
.how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 40px 0 8px; }
.how-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
.how-card h3 { font-family: var(--display); font-weight: 600; font-size: 17px; margin: 10px 0 6px; }
.how-num {
    width: 34px; height: 34px; border-radius: 10px;
    display: grid; place-items: center;
    background: var(--primary-tint); color: var(--primary-dark);
    font-family: var(--display); font-weight: 700;
}
.landing-foot { text-align: center; margin-top: 28px; }

/* ---- Guest area views ----------------------------------------------------- */
.area-banner {
    display: flex; justify-content: space-between; align-items: center;
    gap: 16px; margin: 10px 0 20px; flex-wrap: wrap;
}
.area-banner .h1 { margin: 8px 0 4px; }
.area-empty {
    text-align: center; max-width: 540px; margin: 48px auto;
    display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.area-empty .h1 { margin: 4px 0; }
.area-cta { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.cta-card { display: flex; flex-direction: column; gap: 12px; justify-content: center; }

/* ---- Account & forms ------------------------------------------------------ */
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ink); cursor: pointer; }
.check input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--primary); flex: none; }
.check small { display: block; color: var(--muted); }

/* ---- Prose (privacy) ------------------------------------------------------ */
.prose .h2 { margin-top: 20px; }
.prose ul { margin: 6px 0 4px; padding-left: 20px; color: var(--ink-soft); }
.prose li { margin: 4px 0; }
.prose p { color: var(--ink-soft); }

@media (max-width: 760px) {
    .how { grid-template-columns: 1fr; }
    .postcode-form { flex-direction: column; }
}

/* ---- Admin: company rename row ------------------------------------------- */
.inline-rename { display: flex; gap: 8px; align-items: center; }
.inline-rename input { flex: 1; min-width: 120px; padding: 7px 10px; font-size: 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: #fff; }
.inline-rename input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(14,124,102,.14); }

/* ---- Consumption: full-width tab toggle (CSS-only, CSP-safe) ------------- */
.cons-toggle { margin-top: 4px; }
.tab-radio { position: absolute; width: 1px; height: 1px; opacity: 0; }
/* Tabs on the left, an optional counter cluster on the right, same line. */
.tab-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.tab-row .counter-group { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cons-tabs {
    display: inline-flex;
    gap: 4px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 4px;
    box-shadow: var(--shadow);
}
.tab-btn {
    cursor: pointer;
    padding: 8px 18px;
    border-radius: calc(var(--radius) - 4px);
    font-weight: 500;
    font-size: 14px;
    color: var(--ink-soft);
    user-select: none;
    transition: background .12s ease, color .12s ease;
}
.tab-btn:hover { color: var(--ink); }

/* Only the selected panel is shown, full width. */
.cons-toggle .panel { display: none; }
#tab-bill:checked   ~ .panel-bill   { display: block; }
#tab-trends:checked ~ .panel-trends { display: block; }

/* Active + keyboard-focus styling on the matching tab. */
#tab-bill:checked   ~ .tab-row label[for="tab-bill"],
#tab-trends:checked ~ .tab-row label[for="tab-trends"] { background: var(--primary); color: #fff; }
#tab-bill:focus-visible   ~ .tab-row label[for="tab-bill"],
#tab-trends:focus-visible ~ .tab-row label[for="tab-trends"] { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Production page reuses the toggle with its own ids. */
#ptab-setup:checked  ~ .panel-setup  { display: block; }
#ptab-trends:checked ~ .panel-trends { display: block; }
#ptab-setup:checked  ~ .tab-row label[for="ptab-setup"],
#ptab-trends:checked ~ .tab-row label[for="ptab-trends"] { background: var(--primary); color: #fff; }
#ptab-setup:focus-visible  ~ .tab-row label[for="ptab-setup"],
#ptab-trends:focus-visible ~ .tab-row label[for="ptab-trends"] { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Counter badges sit a touch smaller when inline on the tab row. */
.tab-row .counter { font-size: 22px; padding: 8px 14px; border-radius: 12px; }
@media (max-width: 760px) {
    .tab-row { gap: 10px; }
    .tab-row .counter { font-size: 19px; }
}

/* Production: dollar-saving series swatch (matches the dashed line on the chart). */
.lg-save::before { background: #3b82c4; }

/* Production overlay: bill-with-solar swatch (matches the dashed blue line). */
.lg-newcost::before { background: #3b82c4; }

/* ---- Landing page: bill-first layout -------------------------------- */
.hero-cta-line { margin: 24px 0 8px; }

.btn-lg {
    font-size: 17px;
    padding: 15px 30px;
}

/* The pitch sits below the three cards, so it reads as the explanation
   for them rather than a second headline competing with the first. */
.landing-pitch {
    max-width: 680px;
    margin: 34px auto 0;
    text-align: center;
}
.landing-pitch .body {
    color: var(--ink-soft);
    font-size: 16.5px;
    line-height: 1.65;
    margin: 0 0 14px;
}

/* Banner on the trial page. Deliberately calm: it explains the limits
   without shouting at someone who has not signed up yet. */
.guest-banner {
    margin-bottom: 18px;
    line-height: 1.55;
}
.guest-banner a { text-decoration: underline; }