/* EnerFlox and PUW share one layout. Each page sets data-product on <html>; the colours below are the only
   thing that differs between the two identities. Text colours reach WCAG AA (4.5:1) on every surface in both
   modes (checked in site/README.md). --a1 is the primary accent (buttons, links, headline), --a2 the secondary
   (eyebrows, bullets, flow line). The two logo marks keep their own fixed colours and never follow the theme. */
:root{
  --display:"Archivo",system-ui,sans-serif;
  --body:"Source Sans 3","Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
}

/* EnerFlox: a dark slab in the colours of the app icon, lime and cyan. */
:root[data-product="enerflox"]{
  --bg:#0a121d; --bg2:#132f3d; --surface:#162a39; --surface2:#1c3446;
  --fg:#f6fbfc; --muted:#9fb4c0; --line:rgba(246,251,252,.14);
  --a1:#3db9d6; --a2:#95d553; --a1-ink:#0a121d; --err:#ff9c94; color-scheme:dark;
}
/* PUW: forest green with emerald and mint. The app itself is teal (#0f766e) and green (#286d3f) on a light
   interface; the light theme below uses exactly those two. Against EnerFlox (navy, cyan, lime) the page
   background and the primary accent differ, so the two cannot be mistaken for each other at a glance. */
:root[data-product="puw"]{
  --bg:#0c1a14; --bg2:#12362a; --surface:#14271f; --surface2:#1b3a2d;
  --fg:#f3fbf6; --muted:#a9c4b5; --line:rgba(243,251,246,.14);
  --a1:#35c98b; --a2:#8fe3a8; --a1-ink:#0c1a14; --err:#ff9c94; color-scheme:dark;
}
/* The hub: neutral, so neither tool's colour leads; each tool card carries its own. */
:root[data-product="hub"]{
  --bg:#0c111a; --bg2:#182234; --surface:#141c2b; --surface2:#1d2840;
  --fg:#f4f7fb; --muted:#a8b6c8; --line:rgba(244,247,251,.14);
  --a1:#e9eef5; --a2:#9db4d3; --a1-ink:#0c111a; --err:#ff9c94; color-scheme:dark;
}
@media (prefers-color-scheme: light){
  :root[data-product="enerflox"]:not([data-theme="dark"]){
    --bg:#f3f7f9; --bg2:#e2ecf1; --surface:#ffffff; --surface2:#eaf1f5;
    --fg:#0a121d; --muted:#4c6475; --line:rgba(10,18,29,.14);
    --a1:#0f6f89; --a2:#3f7310; --a1-ink:#ffffff; --err:#b3261e; color-scheme:light;
  }
  :root[data-product="puw"]:not([data-theme="dark"]){
    --bg:#f3f9f6; --bg2:#dcefe5; --surface:#ffffff; --surface2:#e7f4ed;
    --fg:#0e1f17; --muted:#4a6356; --line:rgba(14,31,23,.14);
    --a1:#0f766e; --a2:#286d3f; --a1-ink:#ffffff; --err:#b3261e; color-scheme:light;
  }
  :root[data-product="hub"]:not([data-theme="dark"]){
    --bg:#f5f7fa; --bg2:#e4e9f0; --surface:#ffffff; --surface2:#edf1f6;
    --fg:#0c111a; --muted:#4b5b70; --line:rgba(12,17,26,.14);
    --a1:#1b2638; --a2:#3d5a85; --a1-ink:#ffffff; --err:#b3261e; color-scheme:light;
  }
}
:root[data-product="enerflox"][data-theme="light"]{
  --bg:#f3f7f9; --bg2:#e2ecf1; --surface:#ffffff; --surface2:#eaf1f5;
  --fg:#0a121d; --muted:#4c6475; --line:rgba(10,18,29,.14);
  --a1:#0f6f89; --a2:#3f7310; --a1-ink:#ffffff; --err:#b3261e; color-scheme:light;
}
:root[data-product="puw"][data-theme="light"]{
  --bg:#f3f9f6; --bg2:#dcefe5; --surface:#ffffff; --surface2:#e7f4ed;
  --fg:#0e1f17; --muted:#4a6356; --line:rgba(14,31,23,.14);
  --a1:#0f766e; --a2:#286d3f; --a1-ink:#ffffff; --err:#b3261e; color-scheme:light;
}
:root[data-product="hub"][data-theme="light"]{
  --bg:#f5f7fa; --bg2:#e4e9f0; --surface:#ffffff; --surface2:#edf1f6;
  --fg:#0c111a; --muted:#4b5b70; --line:rgba(12,17,26,.14);
  --a1:#1b2638; --a2:#3d5a85; --a1-ink:#ffffff; --err:#b3261e; color-scheme:light;
}

/* A cross-fade between the two pages where the browser supports it. */
@view-transition{navigation:auto}
*{box-sizing:border-box}
body{margin:0;background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 60%,var(--bg) 100%) fixed,var(--bg);background-color:var(--bg);color:var(--fg);font:400 17px/1.55 var(--body)}
a{color:var(--a1)}
a:focus-visible,button:focus-visible{outline:2px solid var(--a2);outline-offset:3px}
.wrap{max-width:1040px;margin:0 auto;padding-inline:20px}
h1,h2,h3{font-family:var(--display);text-wrap:balance;margin:0}
h2{font-size:clamp(1.5rem,3vw,2rem);font-weight:700;letter-spacing:-.01em}
h3{font-size:1.1rem;font-weight:700}
.eyebrow{font:500 .88rem/1 var(--mono);letter-spacing:.01em;color:var(--a2)}
p{margin:0}
.muted{color:var(--muted)}
code,.mono{font-family:var(--mono);font-size:.9em}
section{padding-block:56px}
section + section{border-top:1px solid var(--line)}

/* Top bar */
nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:18px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;font:800 1.15rem var(--display);color:var(--fg);text-decoration:none;letter-spacing:-.01em}
.brand svg{width:34px;height:34px;flex:none}
nav ul{display:flex;gap:22px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
nav ul a{color:var(--muted);text-decoration:none;font-weight:600;font-size:.95rem}
nav ul a:hover{color:var(--fg)}

/* Hero */
.hero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr);gap:40px;align-items:center;padding-block:48px 40px}
.hero h1{font-size:clamp(2.4rem,6vw,4.2rem);font-weight:800;line-height:1.02;letter-spacing:-.025em}
.hero h1 span{display:block;color:var(--a1)}
.lede{font-size:1.2rem;max-width:34em;margin-top:20px;color:var(--muted)}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.logo{width:min(100%,300px);justify-self:center;filter:drop-shadow(0 20px 40px rgba(0,0,0,.35))}
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border-radius:10px;font:700 1rem var(--display);text-decoration:none;border:1px solid transparent;cursor:pointer}
.btn.primary{background:var(--a1);color:var(--a1-ink)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.ghost{border-color:var(--line);color:var(--fg);background:transparent}
.btn.ghost:hover{border-color:var(--a1)}
.btn svg{width:18px;height:18px;flex:none}

/* Flow line divider */
.flow{display:block;width:100%;height:auto;margin-block:8px 0}

/* Download cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:28px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:24px;display:flex;flex-direction:column;gap:14px;min-width:0}
.card .top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.chip{font:500 .74rem/1 var(--mono);padding:6px 9px;border-radius:999px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.card .btn{align-self:flex-start;margin-top:4px}
.card .meta{font-family:var(--mono);font-size:.8rem;color:var(--muted)}
.note{background:var(--surface2);border-left:3px solid var(--a2);padding:14px 16px;border-radius:0 10px 10px 0;margin-top:22px;font-size:.98rem}
.note b{font-weight:600}
pre{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:16px 18px;overflow-x:auto;font:400 .88rem/1.6 var(--mono);margin:0}

/* Features */
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px 32px;margin-top:28px}
.feat{display:flex;flex-direction:column;gap:8px;min-width:0}
.feat h3{display:flex;align-items:center;gap:10px}
.feat h3::before{content:"";width:10px;height:10px;border-radius:3px;background:linear-gradient(135deg,var(--a2),var(--a1));flex:none}
.feat p{color:var(--muted);font-size:1rem}

/* Workflow (a real sequence, so the numbers mean something) */
.steps{counter-reset:s;list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.steps li{counter-increment:s;border-top:2px solid var(--line);padding-top:12px;position:relative;min-width:0}
.steps li::before{content:counter(s,decimal-leading-zero);font:700 .85rem var(--mono);color:var(--a1);display:block;margin-bottom:6px}
.steps li p{font-size:.98rem}

/* Two-column facts */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:28px}
.fact{border:1px solid var(--line);border-radius:12px;padding:18px 20px;min-width:0}
.fact .n{font:800 2rem/1 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.fact .n small{font:500 .8rem var(--mono);color:var(--muted);margin-left:8px;letter-spacing:0}
.fact p{color:var(--muted);font-size:.95rem;margin-top:8px}

/* Docs list */
.docs{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-top:28px}
.doc{display:block;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px 20px;text-decoration:none;color:var(--fg);min-width:0}

.doc b{font-family:var(--display);font-weight:700;display:block;margin-bottom:4px}
.doc span{color:var(--muted);font-size:.95rem}

/* Cite */
.cite{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:start;margin-top:22px}
.cite pre{white-space:pre-wrap}
.copy{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:9px;border:1px solid var(--line);background:transparent;color:var(--fg);font:600 .9rem var(--body);cursor:pointer}
.copy:hover{border-color:var(--a1)}

footer{border-top:1px solid var(--line);padding-block:32px 40px;color:var(--muted);font-size:.92rem;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer a{color:var(--muted)}


/* Tool switch: two icons, one per identity, above the product's own navigation. */
.products{background:var(--surface);border-bottom:1px solid var(--line)}
.products .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:10px;flex-wrap:wrap}
.products-label{font:500 .74rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.picks{display:flex;gap:10px}
.pick{display:flex;align-items:center;gap:12px;padding:6px 16px 6px 8px;border-radius:12px;border:1px solid var(--line);color:var(--fg);text-decoration:none;min-width:0}
.pick svg{width:40px;height:40px;flex:none;border-radius:9px}
.pick span{display:flex;flex-direction:column;gap:2px;min-width:0}
.pick b{font:800 1.02rem/1.1 var(--display);letter-spacing:-.01em}
.pick small{font:400 .78rem/1.2 var(--body);color:var(--muted)}
.pick:hover{border-color:var(--a1)}
.pick[aria-current="page"]{background:var(--surface2);border-color:var(--a1);box-shadow:inset 0 -3px 0 var(--a1)}
@media (max-width:560px){
  .products-label{display:none}
  .picks{width:100%}
  .pick{flex:1;padding-right:10px}
  .pick small{display:none}
}

@media (max-width:760px){
  .hero{grid-template-columns:1fr;gap:28px}
  .logo{order:-1;width:min(60%,200px)}
  .cite{grid-template-columns:1fr}
  section{padding-block:44px}
}
@media (prefers-reduced-motion:no-preference){
  .btn,.doc,.card{transition:border-color .15s,filter .15s}
}


/* Back link in the tool switch */
a.products-label{text-decoration:none;font:700 1rem var(--display);letter-spacing:0;text-transform:none;color:var(--fg);padding:8px 12px 8px 0}
a.products-label:hover{text-decoration:underline}

/* Hub: the sign-up on the left, the two tools on the right. On a phone: a short intro, the two tools in one line each, then the form. */
.hero.single{grid-template-columns:minmax(0,1fr);padding-block:40px 24px}
.hero.single .lede{max-width:40em}
.hero.single h1 span{color:var(--a2)}
.brand svg + svg{margin-left:-4px}
.hub{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px;align-items:start;padding-block:8px 56px}
.hub .tools{display:flex;flex-direction:column;gap:18px}
.tool{display:block;position:relative;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px 22px 20px;text-decoration:none;color:var(--fg);overflow:hidden;min-width:0}
.tool::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--stripe)}
.tool[data-tool="puw"]{--stripe:linear-gradient(90deg,#8fe3a8,#35c98b)}
.tool[data-tool="enerflox"]{--stripe:linear-gradient(90deg,#95d553,#3db9d6)}
a.tool:hover{border-color:var(--a2)}
a.tool:focus-visible{outline:3px solid var(--a2);outline-offset:3px}
.tool-head{display:flex;align-items:center;gap:14px}
.tool-head svg{width:56px;height:56px;flex:none;border-radius:12px}
.tool-head h2{font-size:1.35rem}
.tool-head small{display:block;color:var(--muted);font:400 .9rem/1.3 var(--body);margin-top:2px}
.tool p{color:var(--muted);margin-top:14px;font-size:1rem}
.tool-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;flex-wrap:wrap}
/* The two dates look alike but not the same: PUW is next (filled dot), EnerFlox follows (dashed, hollow) */
.soon{display:inline-flex;align-items:center;gap:8px;font:600 .82rem/1 var(--mono);padding:9px 13px;border-radius:999px;background:var(--surface2);border:1px solid var(--muted)}
.soon::before{content:"";width:9px;height:9px;border-radius:50%;background:#35c98b}
.tool[data-tool="enerflox"] .soon{background:transparent;border-style:dashed;font-weight:500}
.tool[data-tool="enerflox"] .soon::before{background:transparent;border:2px solid #3db9d6;width:11px;height:11px;box-sizing:border-box}
.more{font-weight:700;font-family:var(--display);font-size:.95rem}
.link-between{text-align:center;color:var(--muted);font:500 .85rem/1.4 var(--body);text-wrap:balance}

.signup{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:28px;min-width:0}
.signup h2{font-size:1.7rem;font-weight:800;letter-spacing:-.02em}
.signup .ask{margin-top:8px;color:var(--muted)}
.signup form{display:flex;flex-direction:column;gap:18px;margin-top:22px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field > label,.field > .legend{font:600 .95rem var(--body)}
.field .hint{font-weight:400;color:var(--muted)}
.field input[type=text],.field input[type=email],.field textarea{
  width:100%;min-height:50px;font:400 1.0625rem var(--body);color:var(--fg);background:var(--bg);border:1px solid var(--muted);border-radius:10px;padding:12px 14px}
.field textarea{min-height:92px;resize:vertical}
.field input:focus,.field textarea:focus{outline:3px solid var(--a2);outline-offset:1px}
.field [aria-invalid="true"]{border-color:var(--err);border-width:2px}
.err{color:var(--err);font-size:.92rem}
.err:empty{display:none}
.want{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tile{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--muted);border-radius:12px;background:var(--bg);cursor:pointer;min-width:0;position:relative;min-height:64px}
.tile input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.tile svg{width:38px;height:38px;flex:none;border-radius:9px}
.tile b{display:block;font:800 1.05rem/1.1 var(--display)}
.tile small{display:block;color:var(--muted);font-size:.84rem;line-height:1.25}
.tile::after{content:"";position:absolute;right:12px;top:12px;width:20px;height:20px;border-radius:50%;border:2px solid var(--muted);box-sizing:border-box}
.tile:has(input:checked){border-color:var(--fg);border-width:2px;background:var(--surface2)}
.tile:has(input:checked)::after{background:var(--fg);border-color:var(--fg);box-shadow:inset 0 0 0 4px var(--surface2)}
.tile:has(input:focus-visible){outline:3px solid var(--a2);outline-offset:3px}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:.95rem;color:var(--muted);cursor:pointer}
.consent input{width:22px;height:22px;margin-top:1px;accent-color:var(--a1);flex:none}
.consent a{color:var(--fg)}
.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.signup .btn{border:0;justify-content:center;min-height:52px;font-size:1.05rem}
.signup .btn[disabled]{opacity:.6;cursor:progress}
.status{margin-top:18px;padding:16px 18px;border-radius:10px;border:1px solid var(--muted);background:var(--surface2);font-size:1.05rem}
.status.bad{border-color:var(--err);color:var(--err)}
.status[hidden]{display:none}

/* Long text (privacy notice) */
.prose{max-width:46rem}
.prose h2{font-size:1.25rem;margin-top:32px}
.prose p,.prose ul{margin-top:10px;color:var(--muted)}
.prose ul{padding-left:1.2em}
.prose b{color:var(--fg)}



@media (max-width:860px){
  .hub{grid-template-columns:1fr;gap:24px;padding-block:0 40px}
  .hub .tools{order:-1;gap:12px}
  .hero.single{padding-block:28px 12px}
}
@media (max-width:560px){
  .tool{padding:16px 16px 14px}
  .tool-head svg{width:46px;height:46px}
  .tool-head h2{font-size:1.2rem}
  .tool p,.link-between{display:none}
  .tool-foot{margin-top:12px}
  .want{grid-template-columns:1fr}
  .signup{padding:20px 18px}
  .signup .btn{width:100%}
}