/* SOLARA design tokens — shared across all pages
   Reconciled palette: solara.farm cream + Springtide teal family from solar dashboard.
*/
:root{
  /* Surfaces */
  --bg:#FCFCF9;
  --paper:#FFFFFD;
  --soft:#F4F2EC;
  --rule:#D5D2C8;

  /* Ink */
  --ink:#13343B;
  --ink-soft:#3D4F50;
  --muted:#626C71;

  /* Teal family */
  --teal-deep:#1B474D;
  --teal:#21808D;
  --teal-hover:#1D7480;
  --teal-light:#3FA9B5;

  /* Accent colors for dataviz */
  --pv:#E0A52A;
  --load:#2D6066;
  --batt:#7A4B9C;
  --short:#A33A2C;
  --amber:#C8821C;

  /* Per-country chart palette (from solara.farm audit) */
  --c-nl:#1FB8CD;
  --c-uk:#FFC185;
  --c-it:#B4413C;
  --c-ma:#ECEBD5;

  /* Typography */
  --font-body:'FKGroteskNeue','Geist','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-display:'DM Sans','FKGroteskNeue','Inter',system-ui,sans-serif;
  --font-mono:'Berkeley Mono','JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Spacing */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;

  --radius:4px;
  --maxw:1240px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-body);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}

a{color:var(--teal);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:2px;text-decoration-color:rgba(33,128,141,0.4)}
a:hover{color:var(--teal-hover);text-decoration-color:var(--teal-hover)}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:500;letter-spacing:-0.01em;margin:0;color:var(--teal-deep)}
h1{font-size:2.15rem;line-height:1.12}
h2{font-size:1.32rem;line-height:1.25;margin-bottom:6px}
h3{font-size:1.08rem;line-height:1.3;color:var(--teal)}
h4{font-size:0.92rem;line-height:1.3;color:var(--ink)}
strong{font-weight:700}

p{margin:0 0 12px 0}
p:last-child{margin-bottom:0}

.kicker{font-family:var(--font-mono);font-size:0.7rem;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--muted);margin-bottom:8px}

.lede{font-size:1.05rem;color:var(--ink-soft);max-width:62ch}

.container{max-width:var(--maxw);margin:0 auto;padding:32px}

/* ===== Top nav ===== */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 32px;background:var(--paper);
  border-bottom:1px solid var(--rule);
  position:sticky;top:0;z-index:50;
}
.brand{display:flex;align-items:center;gap:12px;color:var(--teal-deep);text-decoration:none}
.brand:hover{color:var(--teal-deep)}
.brand-mark{color:var(--teal)}
.brand-title{font-family:var(--font-display);font-weight:700;font-size:1.05rem;letter-spacing:0.06em;line-height:1}
.brand-sub{font-size:0.72rem;color:var(--muted);margin-top:3px;letter-spacing:0.02em}

.topnav{display:flex;gap:4px;align-items:center;font-family:var(--font-body)}
.topnav a{
  color:var(--ink-soft);font-size:0.88rem;font-weight:500;
  text-decoration:none;padding:8px 14px;border-radius:3px;
  transition:background 0.15s,color 0.15s;
}
.topnav a:hover{background:var(--soft);color:var(--teal-deep);text-decoration:none}
.topnav a.active{color:var(--teal);background:rgba(33,128,141,0.08)}
.topnav .pill{
  margin-left:8px;padding:6px 12px;border-radius:3px;
  background:var(--teal);color:#fff;font-size:0.82rem;font-weight:500;
}
.topnav .pill:hover{background:var(--teal-hover);color:#fff}

/* ===== Page chrome ===== */
.crumbs{
  font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--muted);margin-bottom:14px;
}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--teal)}
.crumbs .sep{margin:0 8px;opacity:0.5}

.page-hero{margin-bottom:32px;max-width:62rem}
.page-hero h1{margin-bottom:14px}

/* ===== Cards ===== */
.card{
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);
  padding:22px 24px;
}
.card-head{margin-bottom:14px}
.card-sub{color:var(--ink-soft);font-size:0.88rem;margin-top:2px;max-width:80ch}

.module-grid{
  display:grid;gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.module-card{
  display:block;text-decoration:none;color:inherit;
  background:var(--paper);border:1px solid var(--rule);border-top:3px solid var(--teal);
  padding:20px 22px;border-radius:var(--radius);
  transition:transform 0.15s,box-shadow 0.15s,border-color 0.15s;
}
.module-card:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 18px -8px rgba(27,71,77,0.25);
  border-color:var(--teal);
  text-decoration:none;color:inherit;
}
.module-card.coming{border-top-color:var(--muted);opacity:0.85}
.module-card.coming:hover{transform:none;box-shadow:none}
.module-card .step{
  font-family:var(--font-mono);font-size:0.68rem;letter-spacing:0.14em;
  color:var(--teal);text-transform:uppercase;margin-bottom:6px;
}
.module-card.coming .step{color:var(--muted)}
.module-card h3{margin-bottom:8px;color:var(--teal-deep)}
.module-card p{font-size:0.88rem;color:var(--ink-soft)}
.module-card .status{
  margin-top:12px;font-family:var(--font-mono);font-size:0.7rem;
  letter-spacing:0.1em;text-transform:uppercase;
}
.module-card .status.live{color:var(--teal)}
.module-card .status.soon{color:var(--muted)}

/* ===== KPI tiles ===== */
.kpi-grid{display:grid;gap:12px;grid-template-columns:repeat(6,1fr)}
.kpi{
  background:var(--paper);border:1px solid var(--rule);border-top:3px solid var(--teal);
  padding:14px 16px;border-radius:3px;
}
.kpi.warn{border-top-color:var(--short)}
.kpi-label{font-family:var(--font-mono);font-size:0.66rem;letter-spacing:0.1em;
  color:var(--muted);text-transform:uppercase;margin-bottom:8px}
.kpi-value{font-family:var(--font-display);font-weight:700;font-size:1.6rem;
  color:var(--teal-deep);line-height:1}
.kpi.warn .kpi-value{color:var(--short)}
.kpi-unit{font-size:0.76rem;color:var(--muted);margin-top:4px}

/* ===== Charts / blocks ===== */
.chart-block{
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);
  padding:20px 22px;margin-bottom:22px;
}
.chart-block.split{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.chart-block.split .chart-head{margin-bottom:8px}
.chart-head{margin-bottom:10px}
.chart-sub{color:var(--ink-soft);font-size:0.85rem;margin-top:2px;max-width:80ch}

.legend-row{margin-top:12px;font-size:0.76rem;color:var(--ink-soft);
  font-family:var(--font-mono);letter-spacing:0.02em;
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px}
.legend-row .legend-item{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.legend-row .swatch{display:inline-block;width:14px;height:10px;border-radius:2px;flex:none}
.legend-row .swatch.envelope{background:transparent;border:1.5px solid var(--teal-deep)}

/* ===== Toggle ===== */
.controls{
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);
  padding:14px 18px;margin-bottom:18px;
  display:flex;flex-wrap:wrap;gap:16px;align-items:center;
}
.control-group{display:flex;align-items:center;gap:12px}
.control-group label{font-family:var(--font-mono);font-size:0.7rem;letter-spacing:0.12em;
  color:var(--muted);text-transform:uppercase}
.toggle{display:inline-flex;border:1px solid var(--rule);border-radius:3px;overflow:hidden;background:#fff}
.toggle-btn{
  background:transparent;border:0;padding:8px 14px;font-family:var(--font-body);
  font-size:0.85rem;color:var(--ink-soft);cursor:pointer;border-right:1px solid var(--rule)
}
.toggle-btn:last-child{border-right:0}
.toggle-btn.active{background:var(--teal-deep);color:#fff}
.toggle-btn:not(.active):hover{background:var(--soft)}

/* ===== Answer card ===== */
.answer-card{
  background:var(--paper);border:1px solid var(--rule);border-left:4px solid var(--short);
  padding:22px 24px;border-radius:var(--radius);
}
.answer-card.positive{border-left-color:var(--teal)}
.kicker.negative{color:var(--short)}
.kicker.positive{color:var(--teal)}
.answer-headline{font-family:var(--font-display);font-weight:700;font-size:1.2rem;
  color:var(--short);margin-bottom:10px}
.answer-card.positive .answer-headline{color:var(--teal-deep)}
.answer-body{color:var(--ink-soft);font-size:0.93rem}

/* ===== Buttons ===== */
.btn{
  display:inline-block;padding:10px 18px;border-radius:3px;
  background:var(--teal);color:#fff;text-decoration:none;border:0;
  font-family:var(--font-body);font-size:0.9rem;font-weight:500;cursor:pointer;
  transition:background 0.15s;
}
.btn:hover{background:var(--teal-hover);color:#fff;text-decoration:none}
.btn-ghost{background:transparent;color:var(--teal);border:1px solid var(--rule)}
.btn-ghost:hover{background:var(--soft);color:var(--teal-deep)}

/* ===== Methodology grid ===== */
.methodology{background:var(--paper);border:1px solid var(--rule);
  padding:24px;border-radius:var(--radius);margin-top:8px}
.meth-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:14px}
.meth-label{font-family:var(--font-mono);font-size:0.7rem;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--teal);margin-bottom:6px}
.meth-grid p{margin:0;color:var(--ink-soft);font-size:0.92rem}

/* ===== Hero + product cards (home) ===== */
.home-hero{
  display:grid;grid-template-columns:1.6fr 1fr;gap:48px;align-items:start;
  margin:32px 0 56px 0;
}
.home-hero h1{font-size:2.6rem;line-height:1.08;margin-bottom:18px;max-width:18ch}
.home-hero .lede{font-size:1.08rem;max-width:46ch}
.home-hero .hero-meta{
  font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--muted);
  border-left:2px solid var(--teal);padding-left:14px;
}
.home-hero .hero-meta .row{margin-bottom:8px}
.home-hero .hero-meta .row:last-child{margin-bottom:0}
.home-hero .hero-meta strong{color:var(--teal-deep);font-weight:500}

.product-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:48px;
}
.product-card{
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);
  padding:28px 28px 24px 28px;display:flex;flex-direction:column;
  text-decoration:none;color:inherit;
  transition:transform 0.15s,box-shadow 0.15s;
}
.product-card:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px -10px rgba(27,71,77,0.22);
  text-decoration:none;color:inherit;
}
.product-card .product-kicker{
  font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--teal);margin-bottom:10px;
}
.product-card h2{font-size:1.5rem;margin-bottom:10px;color:var(--teal-deep)}
.product-card .product-tag{font-size:0.96rem;color:var(--ink);margin-bottom:14px}
.product-card .product-body{font-size:0.88rem;color:var(--ink-soft);margin-bottom:18px;flex:1}
.product-card .product-foot{
  font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--teal);
}

/* ===== Module flow (interactive) ===== */
.flow-stage{
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);
  padding:28px 22px;margin-bottom:28px;
}
.flow-svg{width:100%;height:auto;display:block}

/* ===== Footer ===== */
footer.site{
  margin-top:48px;padding:24px 32px;border-top:1px solid var(--rule);
  display:flex;justify-content:space-between;align-items:center;
  color:var(--muted);font-size:0.78rem;font-family:var(--font-mono);
  letter-spacing:0.02em;background:var(--paper);
}
footer.site .right{text-align:right}

/* ===== Tables ===== */
table.data{width:100%;border-collapse:collapse;font-size:0.88rem}
table.data th,table.data td{padding:9px 12px;text-align:left;
  border-bottom:1px solid var(--rule);vertical-align:top}
table.data th{font-family:var(--font-mono);font-size:0.7rem;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--muted);font-weight:500;background:var(--soft)}
table.data tr:last-child td{border-bottom:0}

/* ===== Misc utilities ===== */
.muted{color:var(--muted)}
.section-spacer{height:32px}
.tag-pill{
  display:inline-block;font-family:var(--font-mono);font-size:0.68rem;
  letter-spacing:0.1em;text-transform:uppercase;color:var(--teal);
  background:rgba(33,128,141,0.08);padding:3px 9px;border-radius:2px;
}
.tag-pill.warn{color:var(--short);background:rgba(163,58,44,0.08)}
.tag-pill.soon{color:var(--muted);background:rgba(98,108,113,0.1)}

/* ===== Modal ===== */
.modal-backdrop{
  position:fixed;inset:0;background:rgba(15,27,28,0.55);
  display:none;align-items:center;justify-content:center;z-index:200;
  padding:24px;
}
.modal-backdrop.open{display:flex}
.modal{
  background:var(--paper);border-radius:var(--radius);
  max-width:560px;width:100%;padding:28px 30px;
  box-shadow:0 20px 60px -20px rgba(15,27,28,0.4);
}
.modal h2{margin-bottom:10px}
.modal-close{
  float:right;background:transparent;border:0;font-size:1.4rem;
  color:var(--muted);cursor:pointer;line-height:1;padding:0;margin-left:12px;
}
.modal-close:hover{color:var(--ink)}
.modal-actions{display:flex;gap:10px;margin-top:20px}

/* ===== Responsive ===== */
@media (max-width: 1080px){
  .home-hero{grid-template-columns:1fr;gap:24px}
  .product-grid{grid-template-columns:1fr}
  .kpi-grid{grid-template-columns:repeat(3,1fr)}
  .chart-block.split{grid-template-columns:1fr}
  .meth-grid{grid-template-columns:1fr}
}
@media (max-width: 720px){
  .topbar{flex-direction:column;align-items:flex-start;gap:10px;padding:14px 20px}
  .topnav{flex-wrap:wrap}
  .container{padding:20px}
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  h1{font-size:1.7rem}
  .home-hero h1{font-size:1.9rem}
  footer.site{flex-direction:column;align-items:flex-start;gap:8px}
}

/* Stub pages */
.coming-band{margin-top:24px;padding:20px 24px;border:1px dashed var(--rule);border-radius:8px;background:var(--soft);color:var(--muted);font-size:.95rem}
.coming-band a{color:var(--teal-primary);text-decoration:none;border-bottom:1px solid var(--rule)}
.coming-band a:hover{color:var(--teal-hover)}