/* ============================================================================
   PowerWise design system
   ----------------------------------------------------------------------------
   Two references, and what each is for:

   Stripe              -> the structure. Ruled grid, precise small type,
                          navy/slate ink, figures set as data, restrained
                          colour, generous rhythm.
   Clear Energy Facts  -> the tools. Ranked cheapest-first plan list, a bill
                          analyzer, checkmark proof lists. Layout copied from
                          their two tools; type stays all-sans.

   Rules for extending this:
   1. Colour is a signal, never decoration. The gradient marks the brand and the
      cheap option. --bad marks money you are losing. Nothing else is coloured.
   2. Every number the reader compares is --mono with tabular figures.
   3. One typeface throughout: Archivo. Weight and size carry hierarchy, not
      a second family.
   4. Spacing comes from the --s scale. No arbitrary pixel margins.
   5. If a component isn't in here, add it here, not inline in a page.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&display=swap');

:root {
  /* ---- brand ---- */
  --green:     #3DD68C;
  --teal:      #10B9AB;
  --teal-deep: #0E9FA8;
  --teal-pale: #E8FAF7;
  --grad:      linear-gradient(120deg, #3DD68C 0%, #10B9AB 55%, #0E9FA8 100%);

  /* ---- ink: navy over slate, never pure black ---- */
  --ink:      #0A2540;
  --ink-dim:  #425466;
  --ink-mute: #8792A2;

  /* ---- surface ---- */
  --bg:       #FFFFFF;
  --bg-soft:  #F6F9FC;
  --border:   #E3E8EE;
  --border-2: #C1C9D2;

  /* ---- signal. only ever on a number that means something ---- */
  --bad:      #C1362F;
  --bad-bg:   #FDF3F2;
  --good:     #0E7C66;
  --good-bg:  #EDFAF5;

  /* ---- type ---- */
  --sans:  'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, sans-serif;
  --mono:  ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

  /* ---- spacing scale ---- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px;

  /* ---- shape + depth ---- */
  --r:   10px;
  --r-s: 6px;
  --shadow-sm: 0 1px 1px rgba(10,37,64,.04), 0 2px 5px rgba(10,37,64,.05);
  --shadow-md: 0 2px 5px rgba(10,37,64,.06), 0 15px 35px rgba(10,37,64,.08);
}

/* ============================ base ============================ */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.wrap      { max-width: 820px;  margin: 0 auto; padding: 0 var(--s5); }
.wrap-wide { max-width: 1140px; margin: 0 auto; padding: 0 var(--s5); }

/* Stripe rules its content column. Two hairlines, fixed, behind everything. */
.rails { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.rails i { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--border); }
@media (max-width: 1240px) { .rails { display: none; } }
body > * { position: relative; z-index: 1; }

/* ============================ type ============================ */
h1 {
  font-weight: 700;
  font-size: clamp(38px, 5.2vw, 60px); line-height: 1.04;
  letter-spacing: -0.035em; margin: 0 0 var(--s4); text-wrap: balance;
}
h1 .grad {
  background: var(--grad); -webkit-background-clip: text;
  background-clip: text; color: transparent;
}
h2 {
  font-weight: 700;
  font-size: clamp(23px, 2.5vw, 30px); line-height: 1.15;
  letter-spacing: -0.025em; margin: var(--s8) 0 var(--s3); text-wrap: balance;
}
h3 {
  font-size: 17px; font-weight: 600; letter-spacing: -0.01em;
  margin: var(--s6) 0 var(--s2);
}
p { margin: 0 0 var(--s4); }
.lede {
  font-size: clamp(17px, 1.6vw, 19px); line-height: 1.55;
  color: var(--ink-dim); max-width: 36em;
}
a { color: var(--teal-deep); text-underline-offset: 2px; }
small, .small { font-size: 13.5px; color: var(--ink-mute); line-height: 1.55; }
strong { font-weight: 600; }
ol, ul { margin: 0 0 var(--s4); padding-left: 20px; }
li { margin-bottom: var(--s2); }

/* eyebrow: label:value line above a headline */
.eyebrow { font-size: 13.5px; font-weight: 500; color: var(--ink-dim); margin: 0 0 var(--s4); }
.eyebrow b { font-weight: 600; color: var(--teal-deep); font-family: var(--mono); }

/* kicker: small caps label above a section */
.kicker {
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--teal-deep); margin: var(--s8) 0 var(--s2);
}
.kicker + h2 { margin-top: 0; }

.arrow { text-decoration: none; font-weight: 600; }
.arrow::after { content: " \2192"; }
.arrow:hover { text-decoration: underline; }

/* ============================ hero ============================ */
.hero {
  background: var(--bg); border-bottom: 1px solid var(--border);
  padding: var(--s8) 0; position: relative; overflow: hidden; isolation: isolate;
}
/* soft sweep, kept beside the reading column so content stays on white */
.hero::after {
  content: ""; position: absolute; z-index: -1;
  top: -40%; right: -14%; width: 38%; height: 180%;
  background: conic-gradient(from 205deg at 50% 50%,
      #3DD68C 0deg, #10B9AB 80deg, #5FC8E0 150deg, #8BE8CE 230deg, #3DD68C 360deg);
  filter: blur(60px); opacity: .3;
  border-radius: 46% 54% 62% 38% / 52% 42% 58% 48%;
  transform: rotate(-14deg);
}
@media (max-width: 1080px) { .hero::after { display: none; } }

/* ============================ proof list ============================ */
/* One claim per line, scannable. Circled tick drawn from the brand gradient. */
.proof { list-style: none; margin: var(--s5) 0; padding: 0; }
.proof li {
  position: relative; padding-left: 28px; margin-bottom: var(--s3);
  font-size: 15.5px; color: var(--ink-dim); line-height: 1.5;
}
.proof li::before {
  content: ""; position: absolute; left: 0; top: 5px;
  width: 17px; height: 17px; background: var(--grad);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7.1' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M4.6 8.3l2.2 2.2 4.6-4.6' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7.1' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M4.6 8.3l2.2 2.2 4.6-4.6' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.proof b { color: var(--ink); font-weight: 600; }

/* ============================ the verdict ============================ */
.verdict {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r);
  padding: var(--s5); margin: var(--s5) 0; box-shadow: var(--shadow-sm);
}
.verdict .n {
  font-weight: 700;
  font-size: clamp(34px, 4vw, 48px); letter-spacing: -0.035em; line-height: 1.05;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.verdict .cap { font-size: 15px; color: var(--ink-dim); margin-top: var(--s3); max-width: 44em; }
.verdict.good .n { color: var(--good); }

/* ============================ bars ============================ */
.bars { margin: var(--s5) 0; }
.bar-row {
  display: grid; grid-template-columns: 230px 1fr 86px; gap: var(--s4);
  align-items: center; margin-bottom: var(--s2); font-size: 14.5px;
}
.bar-row .lbl { color: var(--ink-dim); line-height: 1.25; }
.bar-track { background: var(--bg-soft); border: 1px solid var(--border);
             border-radius: var(--r-s); height: 32px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--border-2); }
.bar-fill.hi { background: var(--bad); }
.bar-fill.lo { background: var(--grad); }
.bar-row .val {
  text-align: right; font-family: var(--mono); font-size: 14px;
  font-variant-numeric: tabular-nums; font-weight: 500;
}
@media (max-width: 640px) {
  .bar-row { grid-template-columns: 1fr 72px; }
  .bar-row .bar-track { grid-column: 1 / -1; height: 24px; }
}

/* ============================ tables ============================ */
.tablewrap {
  overflow-x: auto; margin: var(--s5) 0; border: 1px solid var(--border);
  border-radius: var(--r); background: var(--bg); box-shadow: var(--shadow-sm);
}
table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
th, td { text-align: left; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--border); }
thead th {
  font-weight: 600; color: var(--ink-dim); font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .08em; white-space: nowrap;
  background: var(--bg-soft);
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--bg-soft); }
td.num {
  text-align: right; font-family: var(--mono); font-size: 13px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
th.num { text-align: right; }
tr.flag td { background: var(--bad-bg); }
tr.flag:hover td { background: #fceceb; }
tr.best td { background: var(--good-bg); }
tr.best:hover td { background: #e2f6ef; }

/* ============================ source quote ============================ */
.src {
  border-left: 3px solid var(--teal); background: var(--bg-soft);
  padding: var(--s4) var(--s5); margin: var(--s5) 0; border-radius: 0 var(--r-s) var(--r-s) 0;
}
.src .q { font-size: 18px; font-weight: 500; line-height: 1.45; margin: 0 0 var(--s2); color: var(--ink); }
.src .who { font-size: 13px; color: var(--ink-mute); }

/* ============================ callout ============================ */
.note {
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--r-s);
  padding: var(--s4) var(--s5); margin: var(--s5) 0; color: var(--ink-dim); font-size: 15.5px;
}
.note strong { color: var(--ink); }

/* ============================ buttons ============================ */
.cta {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--teal-deep); color: #fff; padding: 10px 18px;
  border-radius: var(--r-s); text-decoration: none; font-weight: 600; font-size: 15px;
  box-shadow: var(--shadow-sm); transition: background .12s;
}
.cta::after { content: "\203A"; font-size: 16px; line-height: 1; opacity: .8; }
.cta:hover { background: #0b7f86; }

/* ============================ header + nav ============================ */
header {
  background: rgba(255,255,255,.9); backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--border); padding: var(--s3) 0;
  position: sticky; top: 0; z-index: 20;
}
header .wrap-wide { display: flex; align-items: center; gap: var(--s6); }
.brand {
  font-weight: 800; font-size: 21px;
  letter-spacing: -0.035em; color: var(--ink); text-decoration: none; white-space: nowrap;
}
.brand span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
nav.top { display: flex; gap: var(--s5); flex-wrap: wrap; font-size: 14.5px; font-weight: 500; }
nav.top a { color: var(--ink-dim); text-decoration: none; }
nav.top a:hover { color: var(--teal-deep); }

/* ============================ the rate check ============================ */
.tabs { display: flex; gap: var(--s1); margin: var(--s6) 0 0; border-bottom: 1px solid var(--border); }
.tab {
  appearance: none; background: none; border: 0; cursor: pointer; font-family: var(--sans);
  font-size: 14.5px; font-weight: 600; color: var(--ink-mute);
  padding: 10px 14px; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab:hover { color: var(--ink-dim); }
.tab.is-on { color: var(--ink); border-bottom-color: var(--teal); }
.pane { padding-top: var(--s5); }

.drop {
  display: flex; flex-direction: column; gap: var(--s1); align-items: flex-start;
  border: 1px dashed var(--border-2); border-radius: var(--r); padding: var(--s5);
  cursor: pointer; background: var(--bg-soft); max-width: 460px;
  transition: border-color .12s, background .12s;
}
.drop:hover { border-color: var(--teal); background: #fff; }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drop strong { font-size: 15.5px; font-weight: 600; }
.drop span { font-size: 13.5px; color: var(--ink-mute); line-height: 1.5; }
#uploadmsg { margin-top: var(--s3); }

.billform { margin: var(--s5) 0; max-width: 440px; }
.fieldrow { margin-bottom: var(--s4); }
.fieldrow label { display: block; font-size: 13.5px; color: var(--ink-dim); margin-bottom: var(--s1); font-weight: 600; }
.fieldrow input, .fieldrow select {
  font-size: 15px; padding: 10px 13px; border: 1px solid var(--border-2);
  border-radius: var(--r-s); width: 100%; font-family: var(--sans);
  background: var(--bg); color: var(--ink);
}
.prefixed { position: relative; }
.prefixed span { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--ink-mute); font-size: 15px; }
.prefixed input { padding-left: 27px; }
.fieldrow input:focus, .fieldrow select:focus {
  outline: 3px solid rgba(16,185,171,.22); outline-offset: 1px; border-color: var(--teal);
}
.billform button {
  font-size: 15px; font-weight: 600; padding: 10px 20px; border: 0;
  border-radius: var(--r-s); background: var(--teal-deep); color: #fff;
  cursor: pointer; font-family: var(--sans);
}
.billform button:hover { background: #0b7f86; }

/* ============================ stat strip ============================ */
.threeup {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin: var(--s7) 0 0; border-top: 1px solid var(--border);
}
.threeup > div { padding: var(--s5) var(--s5) var(--s5) 0; border-right: 1px solid var(--border); }
.threeup > div:last-child { border-right: 0; }
.threeup b {
  display: block; font-weight: 700; font-size: 30px;
  letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.1;
}
.threeup span { display: block; font-size: 13.5px; color: var(--ink-dim); margin-top: var(--s1); line-height: 1.45; }
@media (max-width: 700px) {
  .threeup > div { border-right: 0; border-bottom: 1px solid var(--border); padding: var(--s4) 0; }
}

/* ============================ utility picker ============================ */
.picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); gap: var(--s3); margin: var(--s5) 0; }
.pick {
  display: flex; flex-direction: column; gap: var(--s1);
  border: 1px solid var(--border); border-radius: var(--r); padding: var(--s4) var(--s5);
  text-decoration: none; color: var(--ink); background: var(--bg);
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
.pick:hover { border-color: var(--teal); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.pick strong { font-size: 15.5px; font-weight: 600; line-height: 1.2; }
.pick span { font-size: 13px; color: var(--ink-mute); font-family: var(--mono); }

/* browse row */
.browse { font-size: 13.5px; color: var(--ink-mute); border-top: 1px solid var(--border); padding-top: var(--s5); }
.browse a { margin-left: var(--s3); font-weight: 600; text-decoration: none; }
.browse a:hover { text-decoration: underline; }

/* enrol link on a plan row */
.enroll {
  display: inline-block; font-size: 13px; font-weight: 600; color: var(--teal-deep);
  text-decoration: none; white-space: nowrap; border: 1px solid var(--border-2);
  border-radius: 5px; padding: 4px 10px; transition: border-color .12s, background .12s;
}
.enroll:hover { border-color: var(--teal); background: var(--teal-pale); }

/* ============================ footer ============================ */
footer {
  background: var(--bg-soft); border-top: 1px solid var(--border);
  margin-top: var(--s8); padding: var(--s7) 0; font-size: 13.5px; color: var(--ink-mute);
}
footer a { color: var(--ink-dim); }
footer nav { display: flex; gap: var(--s5); flex-wrap: wrap; font-weight: 600; }

/* ============================ ranked plan list ============================ */
/* Layout follows clearenergyfacts.com's plan tool: cheapest first, no featured
   sorting, priced at the reader's own usage. */
.ranktool { margin: var(--s5) 0 var(--s7); }
.rankbar {
  display: flex; gap: var(--s5); align-items: flex-end; flex-wrap: wrap;
  padding: var(--s4) var(--s5); background: var(--bg-soft);
  border: 1px solid var(--border); border-radius: var(--r); margin-bottom: var(--s4);
}
.rankbar .fieldrow { margin: 0; }
.rankbar input[type=number], .rankbar select { width: 150px; }
.check { display: flex; align-items: center; gap: 8px; font-size: 14px;
         color: var(--ink-dim); font-weight: 500; padding-bottom: 10px; cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--teal-deep); }

.plan {
  display: grid;
  grid-template-columns: 34px minmax(200px, 1fr) 96px 104px 118px auto;
  gap: var(--s4); align-items: center;
  padding: var(--s4) var(--s5); border: 1px solid var(--border);
  border-radius: var(--r); margin-bottom: var(--s2); background: var(--bg);
  transition: border-color .12s, box-shadow .12s;
}
.plan:hover { border-color: var(--border-2); box-shadow: var(--shadow-sm); }
.plan.is-best { border-color: var(--teal); background: var(--good-bg); }
.plan-rank { font-family: var(--mono); font-size: 13px; color: var(--ink-mute); }
.plan-name { font-weight: 600; font-size: 15.5px; letter-spacing: -0.01em; }
.plan-sup { font-size: 13px; color: var(--ink-mute); margin-top: 2px; }
.plan-num { text-align: right; }
.plan-num b {
  display: block; font-family: var(--mono); font-size: 16px; font-weight: 600;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.plan-num span { display: block; font-size: 11.5px; color: var(--ink-mute); margin-top: 1px; }
.plan-diff b { color: var(--ink-dim); font-size: 14px; }
.plan-diff b.win { color: var(--good); font-family: var(--sans); font-size: 13px;
                   text-transform: uppercase; letter-spacing: .06em; }
.plan-go { display: flex; align-items: center; gap: var(--s2); }
.plan-go .efl { font-size: 12.5px; color: var(--ink-mute); text-decoration: none; }
.plan-go .efl:hover { text-decoration: underline; }

.tag {
  display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; padding: 2px 7px; border-radius: 4px;
  background: var(--bg-soft); color: var(--ink-dim); border: 1px solid var(--border);
  vertical-align: 2px; margin-left: 6px;
}
.tag.warn { background: var(--bad-bg); color: var(--bad); border-color: #f3d5d3; }
.planwarn {
  font-size: 12.5px; color: var(--bad); margin-top: 6px; line-height: 1.4;
}
.planwarn b { font-weight: 700; }

@media (max-width: 860px) {
  .plan { grid-template-columns: 28px 1fr auto; row-gap: var(--s2); }
  .plan-num { text-align: left; }
  .plan-go { grid-column: 1 / -1; }
}

/* ============================ stat band ============================ */
/* Marketing social proof, Stripe's treatment: a bounded band, a kicker, then
   big figures with a short label under each. Numbers do the persuading. */
.band {
  background: var(--bg-soft);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: var(--s7) 0;
}
.band .kicker { margin-top: 0; }
.statrow {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--s6); margin-top: var(--s5);
}
.statrow b {
  display: block; font-size: clamp(46px, 6vw, 68px); font-weight: 700;
  letter-spacing: -0.04em; line-height: 1;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  color: transparent; font-variant-numeric: tabular-nums;
}
.statrow b i { font-style: normal; font-size: .55em; letter-spacing: -0.02em; }
.statrow span {
  display: block; font-size: 14.5px; color: var(--ink-dim);
  margin-top: var(--s3); line-height: 1.5; max-width: 22em;
}

/* drop target state */
.drop.is-over {
  border-color: var(--teal); border-style: solid; background: var(--teal-pale);
  box-shadow: 0 0 0 4px rgba(16,185,171,.14);
}
.drop.is-over strong { color: var(--teal-deep); }