/* Water Eject site styles.
   Direction: a diagnostic panel, not a landing page. Dark navy like the app,
   hairline rules, real numbers set in mono. Colours come from aso-tokens.css. */

*,*::before,*::after{box-sizing:border-box}

:root{
  --bg:#071020;
  --panel:#0C1A2B;
  --line:rgba(127,201,251,.22);
  --line-soft:rgba(127,201,251,.12);
  --fg:#DCE7F2;
  --fg-2:#B7CADC;
  --fg-3:#8FA6BC;
  --accent:var(--brand-soft);
  --accent-2:#7FC9FB;
  --ff:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg-2);
  font:16px/1.65 var(--ff);
  overflow-wrap:break-word;
  word-break:break-word;
}

.wrap{max-width:840px;margin:0 auto;padding:0 20px}

a{color:var(--accent);text-decoration:none}
a:hover,a:focus{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px}

img{max-width:100%;height:auto}

h1,h2,h3{color:var(--fg);line-height:1.2;margin:0}
h1{font-size:clamp(28px,6.2vw,42px);font-weight:800;letter-spacing:-.02em}
h2{font-size:clamp(21px,4vw,28px);font-weight:700;letter-spacing:-.01em;margin:0 0 12px}
h3{font-size:17px;font-weight:700;margin:0 0 6px}
p{margin:0 0 14px}
ul,ol{margin:0 0 14px;padding-left:20px}
li{margin:0 0 7px}
strong{color:var(--fg);font-weight:650}
code,.num{font-family:var(--mono);font-size:.92em;color:var(--accent-2)}

/* ---- masthead ---------------------------------------------------------- */
.masthead{border-bottom:1px solid var(--line-soft);background:rgba(7,16,32,.9)}
.masthead .wrap{display:flex;align-items:center;gap:12px;min-height:60px;flex-wrap:wrap}
.mark{display:flex;align-items:center;gap:9px;color:var(--fg);font-weight:700;letter-spacing:-.01em}
.mark:hover{text-decoration:none}
.mark img{width:26px;height:26px;border-radius:7px;display:block}
.masthead nav{margin-left:auto;display:flex;gap:16px;font-size:14px}
.masthead nav a{color:var(--fg-3)}
@media(max-width:600px){
  .masthead .wrap{padding-top:10px;padding-bottom:10px;min-height:0}
  .masthead nav{margin-left:0;width:100%;gap:8px 14px;flex-wrap:wrap}
}

/* ---- eyebrow ----------------------------------------------------------- */
.kicker{
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin:0 0 12px;
}

/* ---- hero -------------------------------------------------------------- */
.hero{padding:44px 0 34px;border-bottom:1px solid var(--line-soft)}
.lead{font-size:clamp(17px,2.4vw,19px);color:var(--fg-2);margin:14px 0 22px;max-width:60ch}
.facts{
  list-style:none;padding:0;margin:20px 0 0;display:flex;flex-wrap:wrap;gap:8px 10px;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.03em;color:var(--fg-3);
}
.facts li{margin:0;border:1px solid var(--line-soft);border-radius:999px;padding:4px 11px}

/* ---- store button ------------------------------------------------------ */
.aso-badge{display:inline-block;line-height:0}
.aso-badge img{height:55px;width:auto;display:block}
.getrow{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.getnote{font-size:13.5px;color:var(--fg-3);margin:0}

/* ---- sections ---------------------------------------------------------- */
section{padding:38px 0;border-bottom:1px solid var(--line-soft)}
section:last-of-type{border-bottom:0}
.sub{color:var(--fg-2);max-width:62ch}

/* ---- screenshots ------------------------------------------------------- */
.shots{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(160px,1fr);
  gap:14px;overflow-x:auto;padding-bottom:10px;scroll-snap-type:x proximity;
}
.shots figure{margin:0;scroll-snap-align:start}
.shots img{
  width:100%;height:auto;display:block;border-radius:14px;
  border:1px solid var(--line-soft);background:var(--panel);
}
.shots figcaption{font-size:13px;color:var(--fg-3);margin-top:8px;line-height:1.45}

/* ---- feature grid ------------------------------------------------------ */
.grid{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:620px){.grid{grid-template-columns:1fr 1fr}}
.panel{
  border:1px solid var(--line-soft);border-left:2px solid var(--accent);
  border-radius:0 12px 12px 0;background:var(--panel);padding:18px 18px 14px;
}
.panel p:last-child{margin-bottom:0}
.panel .hz{display:block;font-family:var(--mono);font-size:12.5px;color:var(--accent-2);margin:0 0 8px}

/* ---- numbered steps ---------------------------------------------------- */
.steps{list-style:none;counter-reset:s;padding:0;margin:0}
.steps>li{
  counter-increment:s;position:relative;padding:0 0 20px 46px;margin:0;
  border-left:1px solid var(--line-soft);margin-left:15px;
}
.steps>li:last-child{border-left-color:transparent;padding-bottom:0}
.steps>li::before{
  content:counter(s);position:absolute;left:-15px;top:0;
  width:30px;height:30px;border-radius:50%;
  background:var(--panel);border:1px solid var(--line);
  color:var(--accent-2);font-family:var(--mono);font-size:13px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.steps h3{margin-top:3px}
.steps p:last-child{margin-bottom:0}

/* ---- spec table -------------------------------------------------------- */
.tablewrap{overflow-x:auto;border:1px solid var(--line-soft);border-radius:12px}
table{border-collapse:collapse;width:100%;min-width:480px;font-size:14.5px}
caption{text-align:left;font-size:13px;color:var(--fg-3);padding:0 0 10px}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line-soft);vertical-align:top}
thead th{color:var(--fg);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;font-family:var(--mono);font-weight:600}
tbody tr:last-child td,tbody tr:last-child th{border-bottom:0}
td.hz{font-family:var(--mono);color:var(--accent-2);white-space:nowrap}
th[scope=row]{color:var(--fg);font-weight:650}

/* ---- call to action band ---------------------------------------------- */
.cta{
  border:1px solid var(--line);border-radius:14px;background:var(--panel);
  padding:24px 22px;margin:32px 0;
}
.cta h2{margin-bottom:8px}
.cta p{max-width:56ch}

/* ---- callout ----------------------------------------------------------- */
.note{
  border-left:2px solid var(--accent-2);padding:2px 0 2px 16px;margin:0 0 16px;
  color:var(--fg-2);
}
.note p:last-child{margin-bottom:0}

/* ---- faq --------------------------------------------------------------- */
.faq{display:grid;gap:18px}
.faq h3{color:var(--fg)}
.faq p:last-child{margin-bottom:0}

/* ---- related links ----------------------------------------------------- */
.links{list-style:none;padding:0;margin:0;display:grid;gap:2px}
.links li{margin:0;border-bottom:1px solid var(--line-soft)}
.links li:last-child{border-bottom:0}
.links a{display:block;padding:12px 0;color:var(--fg)}
.links a:hover{color:var(--accent-2)}
.links span{display:block;font-size:13.5px;color:var(--fg-3)}

/* ---- pulse diagram ----------------------------------------------------- */
.pulse{border:1px solid var(--line-soft);border-radius:12px;background:var(--panel);padding:16px;margin:0 0 16px}
.pulse svg{display:block;width:100%;height:auto}
.pulse rect{fill:var(--brand-soft)}
.pulse polyline{stroke:var(--brand-soft);fill:none}
.pulse figcaption{font-size:13px;color:var(--fg-3);margin-top:10px;line-height:1.5}

/* ---- footer ------------------------------------------------------------ */
footer{border-top:1px solid var(--line-soft);padding:26px 0 40px;font-size:14px;color:var(--fg-3)}
footer nav{display:flex;flex-wrap:wrap;gap:8px 18px;margin-bottom:12px}
footer a{color:var(--fg-3)}
footer p{margin:0 0 8px;max-width:70ch}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .shots{scroll-behavior:auto}
}