/* Public Canalwise website (20 Oct 2026). Palette from docs/BRAND.md; dark = the red night palette,
   as on the tablet at night. No web fonts (nothing loaded from third parties); kept apart from /dev. */
:root {
  --navy:#0B2545; --ink:#0B1A2E; --wave:#7FA7C9; --surface:#EEF3F7; --tick:#1F8A5B; --warn:#D7263D;
  --card:#FFFFFF; --muted:#46525C; --line:rgba(127,167,201,.35); --soft:rgba(127,167,201,.16); --on-navy:#FFFFFF;
  --radius:14px; --max:1080px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --navy:#FF7A63; --ink:#E85A45; --wave:#B0301F; --surface:#1A0604; --tick:#FF7A63; --warn:#FF7A63;
    --card:#2A0C08; --muted:#C2493A; --line:rgba(176,48,31,.5); --soft:rgba(176,48,31,.22); --on-navy:#1A0604;
  }
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:84px; }
body { margin:0; background:var(--surface); color:var(--ink); font:16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
img { max-width:100%; }
a { color:var(--navy); }
h1, h2, h3, h4 { color:var(--navy); line-height:1.2; letter-spacing:-.01em; }
h1 { font-size:clamp(2rem, 4.5vw, 2.75rem); margin:0 0 .5rem; letter-spacing:-.02em; }
h2 { font-size:1.6rem; margin:2.5rem 0 .75rem; }
h3 { font-size:1.15rem; margin:1.75rem 0 .5rem; }
h4 { font-size:1rem; margin:1.25rem 0 .25rem; }
p, ul, ol { margin:.5rem 0 1rem; }
li { margin:.2rem 0; }
code, kbd { font:.9em ui-monospace, SFMono-Regular, Menlo, monospace; background:var(--soft); padding:.05em .35em; border-radius:4px; }
.muted { color:var(--muted); }

/* Header and navigation */
.site-header { position:sticky; top:0; z-index:10; background:color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.site-header .inner { max-width:var(--max); margin:0 auto; padding:10px 16px; display:flex; align-items:center; gap:16px; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:800; font-size:1.2rem; color:var(--navy); }
.brand img { width:34px; height:34px; }
.site-nav { margin-left:auto; display:flex; gap:4px; flex-wrap:wrap; }
.site-nav a { text-decoration:none; padding:6px 12px; border-radius:999px; color:var(--ink); font-weight:500; }
.site-nav a:hover { background:var(--soft); }
.site-nav a[aria-current="page"] { background:var(--navy); color:var(--on-navy); }
.site-nav a.cta { border:1.5px solid var(--navy); color:var(--navy); }
.site-nav a.cta[aria-current="page"] { color:var(--on-navy); }
.menu-btn { display:none; margin-left:auto; background:none; border:1.5px solid var(--line); border-radius:8px; color:var(--navy); font:inherit; padding:6px 10px; cursor:pointer; }
@media (max-width: 720px) {
  .menu-btn { display:block; }
  .site-nav { display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; background:var(--surface); border-bottom:1px solid var(--line); padding:8px 16px 12px; }
  .site-nav.open { display:flex; }
  .site-nav a { padding:10px 12px; }
}

/* Layout */
main { max-width:var(--max); margin:0 auto; padding:24px 16px 48px; }
.narrow { max-width:760px; }
.page-head { padding:24px 0 8px; }
.page-head p.lead { font-size:1.15rem; max-width:62ch; }
.card { background:var(--card); border-radius:var(--radius); padding:20px; }
.grid { display:grid; gap:16px; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); }
.notice { border:1px solid var(--warn); border-radius:12px; padding:12px 16px; font-size:.95rem; background:var(--card); }
.tick { color:var(--tick); font-weight:700; }
.pill { display:inline-block; padding:1px 10px; border-radius:999px; font-size:.8rem; font-weight:600; background:var(--soft); color:var(--navy); white-space:nowrap; }
.pill.paid { background:var(--navy); color:var(--on-navy); }
.pill.later { background:transparent; border:1px dashed var(--wave); color:var(--muted); }
.button { display:inline-block; padding:10px 18px; border-radius:999px; background:var(--navy); color:var(--on-navy); text-decoration:none; font-weight:600; border:0; font-size:1rem; cursor:pointer; }
.button.secondary { background:transparent; color:var(--navy); border:1.5px solid var(--navy); }
.button:disabled { opacity:.5; cursor:default; }

/* Footer */
.site-footer { border-top:1px solid var(--line); }
.site-footer .inner { max-width:var(--max); margin:0 auto; padding:20px 16px 32px; display:flex; gap:12px 24px; flex-wrap:wrap; font-size:.9rem; color:var(--muted); }
.site-footer a { color:var(--muted); }
.site-footer .safety { flex-basis:100%; }

/* Feature comparison */
.compare { width:100%; border-collapse:collapse; background:var(--card); border-radius:var(--radius); overflow:hidden; }
.compare th, .compare td { padding:10px 14px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top; }
.compare thead th { background:var(--navy); color:var(--on-navy); font-size:.95rem; }
.compare thead th.col, .compare td.col { text-align:center; width:120px; }
.compare tr.group th { background:var(--soft); color:var(--navy); font-size:.9rem; text-transform:uppercase; letter-spacing:.04em; }
.compare td .sub { display:block; font-size:.88rem; color:var(--muted); }
.table-wrap { overflow-x:auto; border-radius:var(--radius); }
.yes { color:var(--tick); font-weight:800; font-size:1.1rem; }
.no { color:var(--muted); }
.plans { display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); margin:16px 0 32px; }
.plan h3 { margin-top:0; }
.plan .price { font-size:1.8rem; font-weight:800; color:var(--navy); }
.plan ul { padding-left:1.1rem; }
.plan.featured { outline:2px solid var(--navy); }

/* Documentation */
.docs { display:grid; grid-template-columns:240px minmax(0, 1fr); gap:32px; }
.toc { position:sticky; top:76px; align-self:start; max-height:calc(100vh - 96px); overflow:auto; font-size:.92rem; }
.toc ol, .toc ul { list-style:none; padding-left:0; margin:0; }
.toc ul ul { padding-left:12px; }
.toc a { display:block; padding:3px 8px; border-radius:6px; text-decoration:none; color:var(--ink); }
.toc a:hover { background:var(--soft); }
.toc a.active { background:var(--soft); color:var(--navy); font-weight:600; }
.toc .part { margin-top:12px; font-weight:700; color:var(--navy); padding:3px 8px; font-size:.8rem; text-transform:uppercase; letter-spacing:.05em; }
.doc-part { border-top:3px solid var(--navy); margin-top:48px; padding-top:8px; }
.doc-part:first-of-type { margin-top:0; border-top:0; }
.doc-part > h2:first-child { margin-top:16px; }
.callout { border-left:4px solid var(--wave); background:var(--card); padding:10px 14px; border-radius:0 10px 10px 0; margin:12px 0 16px; }
.callout.safety { border-left-color:var(--warn); }
.callout.paid { border-left-color:var(--navy); }
.steps { counter-reset:step; list-style:none; padding-left:0; }
.steps > li { counter-increment:step; position:relative; padding-left:36px; margin:.6rem 0; }
.steps > li::before { content:counter(step); position:absolute; left:0; top:1px; width:24px; height:24px; border-radius:50%; background:var(--navy); color:var(--on-navy); font-size:.8rem; font-weight:700; display:grid; place-items:center; }
.defs { display:grid; grid-template-columns:max-content 1fr; gap:4px 16px; margin:8px 0 16px; }
.defs dt { font-weight:600; }
.defs dd { margin:0; }
@media (max-width: 860px) {
  .docs { grid-template-columns:1fr; }
  .toc { position:static; max-height:none; background:var(--card); border-radius:var(--radius); padding:12px; }
  .defs { grid-template-columns:1fr; }
  .defs dd { margin-bottom:8px; }
}

/* Forms */
form .field { margin:0 0 16px; }
form label.title { display:block; font-weight:600; margin-bottom:4px; }
form .hint { font-size:.88rem; color:var(--muted); margin:2px 0 6px; }
input[type=text], input[type=email], select, textarea {
  width:100%; font:inherit; color:var(--ink); background:var(--surface); border:1.5px solid var(--line); border-radius:10px; padding:10px 12px;
}
input:focus, select:focus, textarea:focus { outline:2px solid var(--navy); outline-offset:1px; border-color:transparent; }
textarea { min-height:110px; resize:vertical; }
.choices { display:grid; gap:8px; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); }
.choice { display:flex; gap:10px; align-items:flex-start; background:var(--surface); border:1.5px solid var(--line); border-radius:10px; padding:10px 12px; cursor:pointer; }
.choice:has(input:checked) { border-color:var(--navy); }
.choice input { margin-top:4px; accent-color:var(--navy); }
.consent { display:flex; gap:10px; align-items:flex-start; padding:12px; border-radius:10px; background:var(--surface); margin-bottom:12px; }
.consent input { margin-top:5px; accent-color:var(--navy); width:18px; height:18px; flex:none; }
.two { display:grid; gap:0 16px; grid-template-columns:1fr 1fr; }
@media (max-width: 600px) { .two { grid-template-columns:1fr; } }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-msg { margin-top:12px; font-weight:600; }
.form-msg.err { color:var(--warn); }
.done { text-align:center; padding:32px 20px; }
.done .big-tick { font-size:3rem; color:var(--tick); line-height:1; }
details.privacy { background:var(--surface); border-radius:10px; padding:10px 14px; margin-bottom:12px; }
details.privacy summary { cursor:pointer; font-weight:600; color:var(--navy); }