/* WattShip website layer.

   Not part of the design system package. It holds what the website needs and
   the package does not have: navigation, hero, section frame, footer, the
   partner band, prose, range sliders and the website's type scale. Every value
   comes from the tokens in ds/tokens/; see WEBSITE.md in the wattship-design
   skill for the rules. Classes here use the prefix "site-" so they are never
   mistaken for package classes ("ws-"). */

/* -- Website tokens ─────────────────────────────────────── */
:root{
  --ws-size-hero:clamp(38px, 2.8vw + 20px, 60px);
  --ws-size-section:clamp(28px, 1.5vw + 20px, 40px);
  --ws-size-lead:18px;
  --ws-section-pad:96px;
  --site-maxw:1200px;          /* 50 raster modules */
  --site-gutter:24px;
  --site-nav-h:var(--ws-topbar-h);
}
@media (max-width:1023px){:root{--ws-section-pad:72px}}
@media (max-width:639px){:root{--ws-section-pad:48px;--ws-size-lead:17px}}
@media (max-width:479px){:root{--site-gutter:16px}}

/* -- Page basics ────────────────────────────────────────── */
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--site-nav-h) + 24px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* The dot raster is fixed to the window: content scrolls over it and the dots
   stand still (user decision 2026-10-21). Every layer that paints the raster
   uses background-attachment:fixed, so all of them share the window origin
   and meet without a seam. iOS Safari ignores fixed and scrolls it instead. */
body{font-size:16px;line-height:1.6;background-image:var(--ws-grid);background-size:var(--ws-grid-size) var(--ws-grid-size);background-attachment:fixed}
img,svg,video{display:block;max-width:100%}
img{height:auto}
p{margin:0}
ul,ol{margin:0;padding:0}
figure{margin:0}
[hidden]{display:none !important}

.site-wrap{width:100%;max-width:calc(var(--site-maxw) + 2 * var(--site-gutter));margin:0 auto;padding:0 var(--site-gutter)}
.site-skip{position:absolute;left:-9999px;top:0;z-index:200;padding:8px 12px;background:var(--ws-accent);color:var(--ws-accent-on);border:0}
.site-skip:focus{left:var(--site-gutter);top:8px;color:var(--ws-accent-on)}
.site-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Links that are buttons keep their button colours: base.css colours every
   a:hover with the accent, which would hide the text on an accent button. */
a.ws-btn,a.ws-btn:hover,a.ws-btn:active{color:var(--ws-accent-on)}
a.ws-btn--secondary,a.ws-btn--secondary:hover,a.ws-btn--secondary:active{color:var(--ws-text)}
a.ws-btn--ghost,a.ws-btn--ghost:hover,a.ws-btn--ghost:active{color:var(--ws-text-muted)}
.site-plain,.site-plain:hover{border-bottom:0}

/* -- Icons ──────────────────────────────────────────────── */
.site-icon{width:24px;height:24px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:square;stroke-linejoin:miter}
.site-icon--16{width:16px;height:16px}
.site-icon--20{width:20px;height:20px}
.ws-btn .site-icon,.ws-iconbtn .site-icon{width:16px;height:16px}

/* -- Type ───────────────────────────────────────────────── */
.site-hero__title{font:800 var(--ws-size-hero)/1.02 var(--ws-font-display);letter-spacing:-0.025em;margin:0;text-wrap:balance}
.site-title{font:var(--ws-weight-bold) var(--ws-size-section)/1.1 var(--ws-font-display);letter-spacing:-0.015em;margin:0;text-wrap:balance}
.site-lead{font-size:var(--ws-size-lead);line-height:1.5;color:var(--ws-text-muted);max-width:60ch}
.site-text{max-width:68ch}

/* -- Navigation ─────────────────────────────────────────── */
.site-nav{position:sticky;top:0;z-index:100;height:var(--site-nav-h);background:var(--ws-bg);border-bottom:1px solid var(--ws-line)}
.site-nav__inner{display:flex;align-items:center;gap:24px;height:100%}
.site-brand{display:inline-flex;align-items:center;gap:10px;color:var(--ws-text);border-bottom:0;font:800 19px/1 var(--ws-font-display);letter-spacing:-0.01em}
.site-brand:hover{color:var(--ws-text);border-bottom:0}
.site-brand img{width:28px;height:auto}
.site-nav__menu{display:flex;align-items:center;gap:4px;margin-left:auto}
.site-nav__link{display:inline-flex;align-items:center;height:36px;padding:0 10px;color:var(--ws-text-muted);border-bottom:0;font:500 14px/1 var(--ws-font-ui);transition:color var(--ws-dur) var(--ws-ease)}
.site-nav__link:hover{color:var(--ws-text);border-bottom:0}
.site-nav__link[aria-current="page"]{color:var(--ws-text);box-shadow:inset 0 -1px 0 var(--ws-accent)}
.site-nav__menu .ws-btn{margin-left:12px}
.site-nav__end{display:flex;align-items:center;gap:12px}
.site-lang{display:flex;align-items:center;font:400 var(--ws-size-label)/1 var(--ws-font-label);letter-spacing:var(--ws-ls-label);text-transform:uppercase}
.site-lang a,.site-lang span{display:inline-flex;align-items:center;height:28px;padding:0 6px;color:var(--ws-text-faint);border-bottom:0}
.site-lang a:hover{color:var(--ws-text);border-bottom:0}
.site-lang [aria-current]{color:var(--ws-text)}
.site-lang__sep{padding:0 !important;color:var(--ws-line-strong) !important}
.site-nav__toggle{display:none}

@media (max-width:959px){
  .site-nav__toggle{display:inline-flex}
  .site-nav__end{margin-left:auto}
  .site-nav__menu{display:none;position:absolute;top:var(--site-nav-h);left:0;right:0;flex-direction:column;align-items:stretch;gap:0;margin:0;
    padding:8px var(--site-gutter) 24px;background:var(--ws-surface);border-bottom:1px solid var(--ws-line);max-height:calc(100vh - var(--site-nav-h));overflow-y:auto}
  .site-nav.is-open .site-nav__menu{display:flex}
  .site-nav__link{height:48px;padding:0;border-bottom:1px solid var(--ws-line-quiet);font-size:16px}
  .site-nav__link:hover{border-bottom:1px solid var(--ws-line-quiet)}
  .site-nav__link[aria-current="page"]{box-shadow:inset 2px 0 0 var(--ws-accent);padding-left:12px}
  .site-nav__menu .ws-btn{margin:16px 0 0;height:var(--ws-control-h-lg)}
}

/* -- Sections ───────────────────────────────────────────── */
.site-section{padding:var(--ws-section-pad) 0;border-top:1px solid var(--ws-line)}
.site-section--sunken{background-color:var(--ws-bg-sunken);background-image:var(--ws-grid);background-size:var(--ws-grid-size) var(--ws-grid-size);background-attachment:fixed}
.site-section__head{display:grid;gap:16px;margin-bottom:48px;max-width:760px}
.site-section__head--center{margin-left:auto;margin-right:auto;text-align:center;justify-items:center}

/* -- Hero ───────────────────────────────────────────────── */
.site-hero{padding:72px 0 var(--ws-section-pad)}
.site-hero__grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:48px;align-items:center}
.site-hero__text{display:grid;gap:24px;justify-items:start}
.site-hero__text > p:not(.ws-label){max-width:52ch}

/* Hero with the wave photo and rising bubbles (user decision 2026-10-21,
   brought back from the old site). Layers, back to front: photo, tint (the
   old site's navy-to-cyan wash, now from tokens), dot raster, bubbles, then
   the content. This tint is the website's one gradient surface; WEBSITE.md
   records it as an exception. */
.site-hero--photo{position:relative;isolation:isolate;overflow:hidden}
.site-hero__photo{position:absolute;inset:0;z-index:-4}
.site-hero__photo img{width:100%;height:100%;object-fit:cover}
.site-hero--photo::before{content:"";position:absolute;inset:0;z-index:-3;
  background:linear-gradient(135deg,
    color-mix(in srgb,var(--ws-ink-800) 92%,transparent) 0%,
    color-mix(in srgb,var(--ws-ink-900) 82%,transparent) 50%,
    color-mix(in srgb,var(--ws-cyan-600) 78%,transparent) 100%)}
.site-hero--photo::after{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background-image:var(--ws-grid);background-size:var(--ws-grid-size) var(--ws-grid-size);background-attachment:fixed}

/* Bubbles: each one is a full-height track that moves up by its own height,
   so a dot starts at the bottom edge and leaves at the top, whatever the
   hero's height. js/site.js creates them and pauses them off screen. Round on
   purpose: they are the raster's dots set in motion. */
.site-bubbles{position:absolute;inset:0;z-index:-1;pointer-events:none}
.site-bubble{position:absolute;top:0;left:var(--x);width:var(--s);height:100%;opacity:0;
  animation:site-rise var(--d) linear var(--delay) infinite}
.site-bubble::before{content:"";position:absolute;bottom:0;left:0;width:var(--s);height:var(--s);border-radius:50%;
  background:color-mix(in srgb,var(--ws-foam-500) 55%,transparent)}
.site-bubbles.is-paused .site-bubble{animation-play-state:paused}
@keyframes site-rise{
  0%{transform:translate(0,0);opacity:0}
  10%{opacity:1}
  90%{opacity:1}
  100%{transform:translate(var(--drift),-100%);opacity:0}
}
@media (prefers-reduced-motion:reduce){.site-bubbles{display:none}}
.site-actions{display:flex;flex-wrap:wrap;gap:12px}
.site-shot img{width:100%}
.site-shot figcaption{display:flex;justify-content:space-between;gap:12px;padding:10px 16px;border-top:1px solid var(--ws-line)}
@media (max-width:1023px){
  .site-hero{padding-top:48px}
  .site-hero__grid{grid-template-columns:minmax(0,1fr)}
}

/* -- Grids and tiles ────────────────────────────────────── */
.site-grid{display:grid;gap:24px;grid-template-columns:repeat(var(--site-cols,3),minmax(0,1fr))}
.site-grid--2{--site-cols:2}
.site-grid--4{--site-cols:4}
@media (max-width:1023px){.site-grid,.site-grid--4{--site-cols:2}}
@media (max-width:639px){.site-grid,.site-grid--2,.site-grid--4{--site-cols:1}}

.site-card{display:grid;gap:12px;align-content:start}
.site-card > .site-icon{color:var(--ws-accent);margin-bottom:4px}
.site-card p{color:var(--ws-text-muted)}

.site-photo{display:grid;grid-template-rows:auto 1fr}
.site-photo img{width:100%;aspect-ratio:3/2;object-fit:cover;border-bottom:1px solid var(--ws-line)}
.site-photo__body{display:grid;gap:12px;align-content:start;padding:var(--ws-tile-pad)}
.site-photo__body p{color:var(--ws-text-muted)}

/* Hairline-joined facts, e.g. a row of key figures */
.site-facts{display:grid;grid-template-columns:repeat(var(--site-cols,4),minmax(0,1fr));gap:1px;background:var(--ws-line);border:1px solid var(--ws-line)}
.site-facts > *{background:var(--ws-surface);padding:var(--ws-tile-pad);display:grid;gap:8px;align-content:start}
@media (max-width:1023px){.site-facts{--site-cols:2}}
@media (max-width:479px){.site-facts{--site-cols:1}}

/* -- Lifecycle (landing page) ───────────────────────────── */
.site-lifecycle__tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;border:1px solid var(--ws-line);background:var(--ws-surface)}
.site-phase{position:relative;display:grid;gap:12px;justify-items:start;padding:16px;min-height:120px;background:transparent;border:0;border-left:1px solid var(--ws-line);
  color:var(--ws-text-muted);font:500 15px/1.25 var(--ws-font-ui);text-align:left;cursor:pointer;transition:background var(--ws-dur) var(--ws-ease),color var(--ws-dur) var(--ws-ease)}
.site-phase:first-child{border-left:0}
.site-phase:hover{background:var(--ws-surface-raised);color:var(--ws-text)}
.site-phase:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--ws-focus)}
.site-phase[aria-selected="true"]{background:var(--ws-accent-quiet);color:var(--ws-text);box-shadow:inset 0 2px 0 var(--ws-accent)}
.site-phase[aria-selected="true"] .site-icon{color:var(--ws-accent)}
.site-phase__num{font:400 var(--ws-size-label)/1 var(--ws-font-label);letter-spacing:var(--ws-ls-label);color:var(--ws-text-faint)}
.site-phase[aria-selected="true"] .site-phase__num{color:var(--ws-accent)}

/* The rail under the tabs: a hairline with the ship moving to the chosen
   phase. Position is the only thing that moves (README: Bewegung). */
.site-lifecycle__rail{position:relative;height:32px;margin:0 0 8px}
.site-lifecycle__rail::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px dashed var(--ws-line-strong)}
.site-lifecycle__ship{position:absolute;top:50%;left:calc((var(--site-phase, 0) + .5) * 20%);width:20px;transform:translate(-50%,-50%);
  transition:left var(--ws-dur-slow) var(--ws-ease)}
@media (prefers-reduced-motion:reduce){.site-lifecycle__ship{transition:none}}

.site-panel__head{display:grid;gap:12px;margin-bottom:32px;max-width:720px}
.site-panel__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 48px}
.site-panel__cols > div{display:grid;gap:16px;align-content:start}
.site-featlist{display:grid;gap:0;margin:0}
.site-featlist > div{display:grid;gap:4px;padding:14px 0;border-top:1px solid var(--ws-line-quiet)}
.site-featlist dt{font-weight:600;color:var(--ws-text)}
.site-featlist dd{margin:0;color:var(--ws-text-muted);font-size:15px}
@media (max-width:767px){
  .site-phase{min-height:0;padding:12px 8px;justify-items:center}
  .site-phase__name{display:none}
  .site-panel__cols{grid-template-columns:minmax(0,1fr)}
}

/* -- Benefits (landing page) ────────────────────────────── */
.site-benefits{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:start}
.site-benefit-list{list-style:none;display:grid;gap:0}
.site-benefit-list li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:16px;padding:20px 0;border-top:1px solid var(--ws-line-quiet)}
.site-benefit-list li:first-child{border-top:0;padding-top:0}
.site-benefit-list .site-icon{color:var(--ws-accent);margin-top:2px}
.site-benefit-list p{color:var(--ws-text-muted)}
.site-metric-xl{font:400 clamp(56px, 6vw + 16px, 96px)/1 var(--ws-font-data);letter-spacing:-0.04em;font-variant-numeric:tabular-nums;color:var(--ws-text)}
.site-metric-xl .ws-unit{font-size:.4em;letter-spacing:0;margin-left:4px}
@media (max-width:1023px){.site-benefits{grid-template-columns:minmax(0,1fr)}}

/* -- Photo band with a flat scrim (no gradient) ─────────── */
.site-band{position:relative;isolation:isolate;padding:var(--ws-section-pad) 0;border-top:1px solid var(--ws-line)}
.site-band__img{position:absolute;inset:0;z-index:-2}
.site-band__img img{width:100%;height:100%;object-fit:cover}
.site-band::before{content:"";position:absolute;inset:0;z-index:-1;background:color-mix(in srgb,var(--ws-ink-900) 60%,transparent)}
.site-band .ws-tile{max-width:720px;margin:0 auto;display:grid;gap:20px;justify-items:center;text-align:center}
.site-band .site-actions{justify-content:center}

/* -- Partner logos ──────────────────────────────────────── */
/* No plates: each logo is a single-colour mask (images/web/mark-*.png, alpha
   follows the mark) filled with a token colour, muted at rest and text colour
   on hover. --w (set per logo) comes from equal area, so wide word marks do
   not outweigh compact signs; aspect-ratio keeps the shape. */
.site-logos{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:32px 56px}
.site-logo{display:flex;align-items:center;justify-content:center;padding:12px;color:var(--ws-text-muted);border-bottom:0;transition:color var(--ws-dur) var(--ws-ease)}
.site-logo:hover{color:var(--ws-text);border-bottom:0}
.site-logo__mark{display:block;width:calc(var(--w) * var(--site-logo-scale, 1));max-width:100%;background-color:currentColor;
  -webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat}
.site-supported{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px 24px;margin-top:56px;padding-top:40px;border-top:1px solid var(--ws-line-quiet)}
@media (max-width:639px){.site-logos{gap:20px 32px;--site-logo-scale:.8}.site-supported{--site-logo-scale:.8}}

/* -- Footer ─────────────────────────────────────────────── */
.site-footer{background-color:var(--ws-bg-sunken);border-top:1px solid var(--ws-line);padding:64px 0 32px}
.site-footer__grid{display:grid;grid-template-columns:minmax(0,4fr) repeat(3,minmax(0,2fr));gap:32px 48px}
.site-footer__col{display:grid;gap:14px;align-content:start}
.site-footer__col ul{list-style:none;display:grid;gap:10px}
.site-footer__col p{color:var(--ws-text-muted);font-size:15px}
.site-footer a:not(.ws-btn){color:var(--ws-text-muted);border-bottom:0}
.site-footer a:not(.ws-btn):hover{color:var(--ws-text)}
.site-footer__contact{font:400 14px/1.6 var(--ws-font-data);font-variant-numeric:tabular-nums}
.site-footer__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:48px;padding-top:24px;border-top:1px solid var(--ws-line-quiet)}
@media (max-width:1023px){.site-footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:479px){.site-footer__grid{grid-template-columns:minmax(0,1fr)}}

/* -- Investor area: page head, prose, inputs ────────────── */
.site-pagehead{padding:56px 0 48px;border-bottom:1px solid var(--ws-line)}
.site-pagehead .site-wrap{display:grid;gap:16px;justify-items:start}
.site-pagehead h1{font:800 clamp(36px, 3vw + 20px, 56px)/1.04 var(--ws-font-display);letter-spacing:-0.02em;margin:0}

.site-prose{max-width:72ch;display:grid;gap:16px}
.site-prose h2{font:var(--ws-weight-bold) var(--ws-size-h1)/1.15 var(--ws-font-display);letter-spacing:-0.01em;margin-top:24px}
.site-prose h3{font:var(--ws-weight-bold) var(--ws-size-h3)/1.3 var(--ws-font-display);margin-top:8px}
.site-prose p,.site-prose li{color:var(--ws-text-muted)}
.site-prose strong{color:var(--ws-text);font-weight:600}
.site-prose ul,.site-prose ol{padding-left:20px;display:grid;gap:6px}
.site-prose ul{list-style:square}
.site-prose li::marker{color:var(--ws-accent)}

.site-table-wrap{overflow-x:auto;max-width:100%}
.site-table-wrap .ws-table td{white-space:normal}

/* Range input on the system's terms: hairline track, square thumb. The two-stop
   gradient on the WebKit track is the filled part (set via --site-fill by the
   page), not a visual gradient; Firefox draws it with ::-moz-range-progress. */
.site-range{-webkit-appearance:none;appearance:none;width:100%;height:24px;margin:0;background:transparent;cursor:pointer}
.site-range:focus{outline:none}
.site-range::-webkit-slider-runnable-track{height:2px;background:linear-gradient(var(--ws-accent),var(--ws-accent)) 0/var(--site-fill,0%) 100% no-repeat,var(--ws-line-strong)}
.site-range::-moz-range-track{height:2px;background:var(--ws-line-strong)}
.site-range::-moz-range-progress{height:2px;background:var(--ws-accent)}
.site-range::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-6px;background:var(--ws-accent);border:1px solid var(--ws-bg);border-radius:0}
.site-range::-moz-range-thumb{width:14px;height:14px;background:var(--ws-accent);border:1px solid var(--ws-bg);border-radius:0}
.site-range:focus-visible::-webkit-slider-thumb{box-shadow:var(--ws-focus-ring)}
.site-range:focus-visible::-moz-range-thumb{box-shadow:var(--ws-focus-ring)}

/* Segmented choice (Year 1 / 2 / 3, customer type): buttons on a hairline. */
.site-segmented{display:inline-flex;flex-wrap:wrap;border:1px solid var(--ws-line)}
.site-segmented > button{height:var(--ws-control-h);padding:0 16px;background:transparent;border:0;border-left:1px solid var(--ws-line);color:var(--ws-text-muted);
  font:500 13px/1 var(--ws-font-ui);cursor:pointer;transition:background var(--ws-dur) var(--ws-ease),color var(--ws-dur) var(--ws-ease)}
.site-segmented > button:first-child{border-left:0}
.site-segmented > button:hover{background:var(--ws-surface-raised);color:var(--ws-text)}
.site-segmented > button:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--ws-focus)}
.site-segmented > button.is-active,.site-segmented > button[aria-pressed="true"]{background:var(--ws-accent-quiet);color:var(--ws-accent);box-shadow:inset 0 -2px 0 var(--ws-accent)}

/* -- Login ──────────────────────────────────────────────── */
.site-auth{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.site-auth__form{display:flex;flex-direction:column;justify-content:center;padding:48px var(--site-gutter)}
.site-auth__form > .ws-tile{width:100%;max-width:420px;margin:0 auto;display:grid;gap:24px}
.site-auth__media{position:relative;border-left:1px solid var(--ws-line)}
.site-auth__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.site-auth__media::after{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--ws-ink-900) 35%,transparent)}
.site-message{min-height:20px;font:400 12px/1.4 var(--ws-font-mono)}
.site-message.is-error{color:var(--ws-danger)}
.site-message.is-success{color:var(--ws-success)}
@media (max-width:899px){.site-auth{grid-template-columns:minmax(0,1fr)}.site-auth__media{display:none}}

/* An input inside .ws-control: the control's accent border already marks
   focus, so the input does not draw the focus ring a second time. */
.ws-control .ws-input:focus-visible{box-shadow:none}

/* The page head already draws the hairline the first section would repeat. */
.site-pagehead + .site-section{border-top:0}

/* Phones: large tiles fall back to the normal tile padding, and the screenshot
   caption keeps only its first part. */
@media (max-width:479px){
  .ws-tile--lg{padding:var(--ws-tile-pad)}
  .site-shot figcaption > :not(:first-child){display:none}
}

/* Plotly modebar: base.css underlines every link (the modebar buttons are
   links) and the img/svg reset above would squeeze its icons. */
.js-plotly-plot .modebar-btn,.js-plotly-plot .modebar-btn:hover{border-bottom:0}
.js-plotly-plot .modebar svg{display:inline-block;max-width:none}