:root{
  --sans: Verdana, Geneva, Tahoma, "DejaVu Sans", sans-serif;
  --mono: "Courier New", ui-monospace, Menlo, monospace;

  --ink:        #20242a;
  --muted:      #5d646c;
  --faint:      #888f96;

  --teal:       #043c52;   /* menu bar + headings */
  --teal-2:     #0a6f93;   /* hover / accent */
  --teal-3:     #0e84ad;

  --link:       #14507a;
  --link-hover: #b4471f;   /* warm hover, classic doc-site feel */

  --band-1:     #d6e7f2;
  --band-2:     #f1f7fb;

  --rule:       #b9c1c8;
  --rule-soft:  #dfe4e8;
  --paper:      #ffffff;
  --box:        #f2f6f9;
  --box-line:   #cfdae2;

  --wrap: 880px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }

body{
  font-family:var(--sans);
  font-size:13.5px;
  line-height:1.62;
  color:var(--ink);
  background:var(--paper);
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

a{ color:var(--link); text-decoration:none; }
a:hover{ color:var(--link-hover); text-decoration:underline; }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 22px; }

/* ---------------- Header band ---------------- */
.band{
  background:linear-gradient(180deg, var(--band-1) 0%, var(--band-2) 70%, var(--paper) 100%);
  border-bottom:1px solid var(--rule);
}
.band-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:16px 0 14px;
}
.logo{ display:flex; align-items:center; gap:13px; }
.logo:hover{ text-decoration:none; }
.logo .mark{
  width:44px; height:44px; flex:none;
  display:grid; place-items:center;
}
.logo .mark img{ display:block; width:100%; height:100%; object-fit:contain; }
.logo .word{ line-height:1.1; }
.logo .word b{
  display:block;
  font-size:25px; font-weight:700; letter-spacing:-0.01em; color:var(--teal);
}
.logo .word b .c{ color:var(--teal-2); }
.logo .word .sub{
  font-family:var(--mono); font-size:11px; color:var(--muted); margin-top:2px;
}
.band-meta{
  font-family:var(--mono); font-size:11px; color:var(--muted); text-align:right; line-height:1.6;
}
.band-meta b{ color:var(--teal); font-weight:700; }

/* ---------------- Menu bar ---------------- */
.menubar{
  background:var(--teal);
  border-bottom:1px solid #02232f;
  position:sticky; top:0; z-index:50;
}
.menubar-inner{ display:flex; align-items:stretch; }
.menu{ display:flex; align-items:stretch; flex:1; }
.menu-item{ position:relative; }
.menu-item > a.mlink{
  display:flex; align-items:center; height:36px; padding:0 14px;
  color:#dcebf3; color:#d7e6ef;
  font-size:12.5px; font-weight:700; letter-spacing:0.01em;
  white-space:nowrap;
}
.menu-item > a.mlink:hover,
.menu-item:hover > a.mlink{ background:var(--teal-2); color:#fff; text-decoration:none; }
.menu-item > a.mlink.active{ background:#022a39; color:#fff; }
.menu-item > a.mlink .caret{ margin-left:7px; font-size:9px; opacity:0.7; }

.dropdown{
  display:none;
  position:absolute; top:100%; left:0;
  min-width:215px;
  background:var(--paper);
  border:1px solid var(--teal);
  border-top:none;
  z-index:60;
}
.menu-item:hover .dropdown, .menu-item.open .dropdown{ display:block; }
.dropdown a{
  display:block; padding:7px 14px;
  color:var(--ink); font-size:12.5px; border-bottom:1px solid var(--rule-soft);
}
.dropdown a:last-child{ border-bottom:none; }
.dropdown a:hover{ background:var(--band-1); color:var(--teal); text-decoration:none; }
.dropdown a .d{ display:block; font-size:11px; color:var(--faint); font-weight:400; margin-top:1px; }
.dropdown a:hover .d{ color:var(--muted); }

/* search in menu bar */
.menu-search{ display:flex; align-items:center; gap:0; padding:0 0 0 8px; }
.menu-search input{
  font-family:var(--sans); font-size:12px;
  height:23px; width:148px; padding:0 8px;
  border:1px solid #02303f; border-right:none;
  background:#f4f9fc; color:var(--ink); outline:none;
}
.menu-search input:focus{ background:#fff; }
.menu-search button{
  height:23px; padding:0 10px; cursor:pointer;
  border:1px solid #02303f; background:var(--teal-2); color:#fff;
  font-family:var(--mono); font-size:11px;
}
.menu-search button:hover{ background:var(--teal-3); }

/* ---------------- Content ---------------- */
main{ flex:1 0 auto; padding:26px 0 30px; }
.page[hidden]{ display:none; }

h1.title{
  font-size:23px; font-weight:700; color:var(--teal); letter-spacing:-0.01em;
  margin:0 0 4px;
}
.crumb{
  font-family:var(--mono); font-size:11px; color:var(--faint);
  text-transform:uppercase; letter-spacing:0.08em; margin:0 0 14px;
}
h2.sec{
  font-size:16px; font-weight:700; color:var(--teal);
  margin:26px 0 8px; padding-bottom:5px; border-bottom:1px solid var(--rule-soft);
}
p{ margin:0 0 12px; max-width:64ch; }
.muted{ color:var(--muted); }
strong.k{ color:var(--ink); }

ul.doc{ margin:6px 0 14px; padding-left:20px; }
ul.doc li{ margin:4px 0; }
ul.doc li::marker{ color:var(--teal-2); }

kbd{
  font-family:var(--mono); font-size:11px; font-weight:700;
  background:var(--box); border:1px solid var(--box-line); border-bottom-width:2px;
  border-radius:3px; padding:1px 6px; color:var(--ink); white-space:nowrap;
}
code{ font-family:var(--mono); font-size:12.5px; background:var(--box); padding:1px 5px; border:1px solid var(--rule-soft); }

/* tables · sqlite-style flat tables */
table.t{ border-collapse:collapse; width:100%; margin:6px 0 16px; font-size:12.5px; }
table.t caption{ text-align:left; font-weight:700; color:var(--teal); padding:0 0 6px; font-size:13px; }
table.t th, table.t td{ border:1px solid var(--box-line); padding:7px 11px; text-align:left; vertical-align:top; }
table.t th{ background:var(--box); color:var(--teal); font-weight:700; }
table.t tr:nth-child(even) td{ background:#fafcfd; }
table.t td.c{ text-align:center; }
table.t td.mono, table.t th.mono{ font-family:var(--mono); }
.yes{ color:#0a7a4a; font-weight:700; }
.no{ color:#b0b6bc; }

/* notice / callout · utilitarian bordered, no rounding */
.notice{
  border:1px solid var(--box-line); border-left:3px solid var(--teal-2);
  background:var(--box); padding:10px 14px; margin:0 0 16px; font-size:12.5px;
  max-width:64ch;
}
.notice b{ color:var(--teal); }

/* Home layout */
.home-grid{ display:flex; gap:30px; align-items:flex-start; }
.home-main{ flex:1; min-width:0; }
.home-side{ flex:none; width:248px; }

.tagline{ margin:4px 0 18px; }
.tagline .big{ font-size:27px; font-weight:700; color:var(--teal); line-height:1.16; letter-spacing:-0.01em; }
.tagline .big em{ font-style:italic; color:var(--teal-2); font-weight:700; }

.release{
  border:1px solid var(--box-line); background:var(--box);
}
.release h3{
  margin:0; padding:8px 12px; font-size:12px; color:#fff; background:var(--teal);
  font-family:var(--mono); font-weight:700; letter-spacing:0.04em; text-transform:uppercase;
}
.release .body{ padding:12px; }
.release .ver{ font-size:17px; font-weight:700; color:var(--teal); }
.release dl{ margin:8px 0 12px; font-size:12px; }
.release dl div{ display:flex; justify-content:space-between; padding:2px 0; border-bottom:1px dotted var(--box-line); }
.release dl dt{ color:var(--muted); }
.release dl dd{ margin:0; font-family:var(--mono); color:var(--ink); }
.btn{
  display:inline-block; width:100%; text-align:center;
  background:var(--teal-2); color:#fff; border:1px solid #064c66;
  padding:7px 12px; font-size:13px; font-weight:700; cursor:pointer;
}
.btn:hover{ background:var(--teal-3); color:#fff; text-decoration:none; }
.btn.sec{ background:var(--paper); color:var(--teal); border-color:var(--box-line); margin-top:6px; }
.btn.sec:hover{ background:var(--band-1); color:var(--teal); }

.quicklinks{ columns:2; column-gap:24px; font-size:12.5px; margin-top:4px; }
.quicklinks a{ display:block; padding:2px 0; }
.quicklinks a::before{ content:"› "; color:var(--teal-2); }

/* ascending capability path · "increasing autonomy" */
.ladder-head{ font-family:var(--mono); font-size:10.5px; letter-spacing:0.03em; color:var(--teal-2); margin:18px 0 8px; }
.ladder{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; align-items:end; height:196px; border-bottom:2px solid var(--teal); border-left:1px solid var(--box-line); padding:0 6px; }
.step{ height:100%; display:flex; align-items:flex-end; }
.bar{ position:relative; width:100%; height:var(--h); }
.bar.shipped{ background:var(--teal-2); border:1px solid #064c66; }
.bar.coming{ background:repeating-linear-gradient(45deg,#e9f4fa,#e9f4fa 4px,#ffffff 4px,#ffffff 9px); border:1px dashed var(--teal-2); }
.bar .num{ position:absolute; top:-24px; left:50%; transform:translateX(-50%); width:20px; height:20px; border-radius:50%; background:#fff; border:1px solid var(--teal); color:var(--teal); font-family:var(--mono); font-weight:700; font-size:11px; display:grid; place-items:center; }
.bar.coming .num{ border-style:dashed; color:var(--teal-2); }
.ladder-labels{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; padding:9px 6px 0; }
.ladder-labels > div{ text-align:center; line-height:1.3; }
.ladder-labels b{ display:block; font-size:12px; color:var(--teal); }
.ladder-labels span{ display:block; font-size:10.5px; color:var(--muted); margin:1px 0 4px; }
.ladder-labels .pl{ display:inline-block; font-family:var(--mono); font-style:normal; font-size:9px; text-transform:uppercase; letter-spacing:0.05em; color:#fff; background:var(--teal-2); padding:1px 6px; }
.ladder-labels .soon b{ color:var(--faint); }
.ladder-labels .soon .pl{ background:#fff; color:var(--teal-2); border:1px dashed var(--teal-2); }
/* mobile-only vertical reflow of the ladder; hidden (no render) on desktop */
.ladder-m{ display:none; }
.ladder-legend{ display:flex; gap:18px; align-items:center; flex-wrap:wrap; font-family:var(--mono); font-size:11px; color:var(--muted); margin-top:15px; }
.ladder-legend kbd{ font-size:10px; }
.ladder-legend i.sw{ display:inline-block; width:11px; height:11px; vertical-align:-1px; margin-right:5px; }
.ladder-legend i.sw.shipped{ background:var(--teal-2); border:1px solid #064c66; }
.ladder-legend i.sw.coming{ background:repeating-linear-gradient(45deg,#e9f4fa,#e9f4fa 3px,#fff 3px,#fff 7px); border:1px dashed var(--teal-2); }

/* flow diagram · plain boxes */
.flow{ display:flex; align-items:center; gap:0; flex-wrap:wrap; margin:8px 0 16px; font-size:12px; }
.flow .node{ border:1px solid var(--box-line); background:var(--box); padding:8px 13px; text-align:center; }
.flow .node b{ display:block; color:var(--teal); font-size:12.5px; }
.flow .node span{ font-family:var(--mono); font-size:10.5px; color:var(--muted); }
.flow .node.live{ border-color:var(--teal-2); background:#eaf5fa; }
.flow .arr{ color:var(--teal-2); font-family:var(--mono); padding:0 10px; font-size:15px; }

/* mini app preview · flat window, no shadow */
/* Super Auto suggestion HUD · frameless always-on-top overlay */
.hud{ background:#fff; border:1px solid var(--teal); max-width:372px; margin:6px 0 16px; }
.hud-pad{ padding:14px 15px 15px; }
.hud-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
.hud-brand{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap; color:var(--teal); font-weight:700; font-size:12px; letter-spacing:0.01em; }
.hud-mark{ width:20px; height:20px; flex:none; display:grid; place-items:center; }
.hud-mark img{ width:100%; height:100%; object-fit:contain; display:block; }
.hud-keys{ color:var(--muted); font-family:var(--mono); font-size:10.5px; display:flex; gap:7px; align-items:center; white-space:nowrap; }
.hud-keys kbd{ padding:1px 4px; font-size:10px; }
.hud-keys .k-accept kbd{ color:var(--teal); background:#eaf5fa; border-color:var(--teal-2); }
.hud .sugg{ font-family:var(--mono); font-size:14px; font-weight:700; color:var(--ink); margin-top:13px; word-break:break-word; }
.hud-timer{ display:flex; align-items:center; gap:6px; margin-top:11px; font-family:var(--mono); font-size:10.5px; font-weight:700; color:var(--muted); }
.hud-timer svg{ color:var(--teal-2); flex:none; }
.hud .progress{ height:5px; background:var(--box); border-top:1px solid var(--box-line); }
.hud .progress > i{ display:block; height:100%; width:62%; background:var(--teal-2); }
@media (prefers-reduced-motion:no-preference){
  .hud .progress > i{ animation:huddrain 6s linear infinite; }
  @keyframes huddrain{ from{ width:100%; } to{ width:0%; } }
}

/* price columns */
.cols2{ display:flex; gap:22px; align-items:flex-start; flex-wrap:wrap; }
.col-card{ flex:1; min-width:240px; border:1px solid var(--box-line); }
.col-card.pro{ border-color:var(--teal-2); }
.col-card h3{ margin:0; padding:9px 14px; font-size:12.5px; font-family:var(--mono); letter-spacing:0.05em; color:var(--teal); background:var(--box); border-bottom:1px solid var(--box-line); }
.col-card.pro h3{ color:#fff; background:var(--teal-2); border-bottom-color:var(--teal-2); }
.col-card .price{ padding:12px 14px 0; }
.col-card .price .amt{ font-size:30px; font-weight:700; color:var(--ink); }
.col-card .price .per{ font-family:var(--mono); font-size:12px; color:var(--muted); }
.col-card .price .note{ font-family:var(--mono); font-size:11px; color:var(--teal-2); margin-top:2px; min-height:15px; }
.col-card ul{ list-style:none; margin:10px 0 4px; padding:0 14px 12px; font-size:12.5px; }
.col-card ul li{ padding:4px 0; border-top:1px solid var(--rule-soft); }
.col-card ul li:first-child{ border-top:none; }
.col-card ul li::before{ content:"✓ "; color:#0a7a4a; font-weight:700; }
.col-card .act{ padding:0 14px 14px; }
.btn.btn--app{ display:flex; align-items:center; justify-content:center; gap:8px; }
.btn.btn--app svg{ flex:none; }
.inapp-note{ font-family:var(--mono); font-size:10.5px; line-height:1.55; color:var(--muted); margin:9px 0 0; }
.inapp-note b{ color:var(--teal); font-weight:700; }
.inapp-note .arrow{ color:var(--teal-2); }

/* changelog */
.log .v{ margin:0 0 16px; }
.log .v h3{ margin:0 0 2px; font-size:14px; color:var(--teal); }
.log .v h3 .d{ font-family:var(--mono); font-size:11px; color:var(--faint); font-weight:400; margin-left:8px; }

/* footer */
footer{
  flex:none;
  border-top:1px solid var(--rule);
  background:var(--band-2);
  font-family:var(--mono); font-size:11px; color:var(--muted);
}
footer .wrap{ display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; padding-top:12px; padding-bottom:14px; }
footer a{ color:var(--link); }

@media (max-width:720px){
  .menu-search{ display:none; }
  .home-grid{ flex-direction:column; }
  .home-side{ width:100%; }
  .menubar-inner{ overflow-x:auto; }

  /* dropdowns: on a narrow, scrollable menubar, anchor them to the viewport
     edge so an opened menu never pushes the page wider than the screen */
  .dropdown{ position:fixed; left:0; right:0; top:auto; min-width:0; width:100%; border-left:none; border-right:none; }

  /* ladder: hide the desktop bar-chart + label grids, show the vertical list */
  .ladder, .ladder-labels{ display:none; }
  .ladder-m{
    display:block; list-style:none; margin:4px 0 2px; padding:0;
    border-top:1px solid var(--rule-soft);
  }
  .ladder-m .lrow{
    display:grid;
    grid-template-columns:22px 64px minmax(0,1fr) auto;
    align-items:center; gap:11px;
    padding:9px 2px; border-bottom:1px solid var(--rule-soft);
  }
  .lnum{
    width:20px; height:20px; border-radius:50%;
    background:#fff; border:1px solid var(--teal); color:var(--teal);
    font-family:var(--mono); font-weight:700; font-size:11px;
    display:grid; place-items:center;
  }
  .lrow.coming .lnum{ border-style:dashed; color:var(--teal-2); }
  /* small horizontal bar: length grows with the step (--w drives the width) */
  .lbar{ position:relative; height:15px; width:100%; }
  .lbar::before{
    content:""; position:absolute; left:0; top:0; bottom:0;
    width:calc(var(--w) / 182 * 100%); min-width:14px;
  }
  .lrow.shipped .lbar::before{ background:var(--teal-2); border:1px solid #064c66; }
  .lrow.coming  .lbar::before{ background:repeating-linear-gradient(45deg,#e9f4fa,#e9f4fa 4px,#ffffff 4px,#ffffff 9px); border:1px dashed var(--teal-2); }
  .ltext{ min-width:0; line-height:1.3; }
  .ltext b{ display:block; font-size:12.5px; color:var(--teal); }
  .lrow.soon .ltext b{ color:var(--faint); }
  .ltext .lsub{ display:block; font-size:11px; color:var(--muted); }
  .ladder-m .pl{
    display:inline-block; font-family:var(--mono); font-style:normal;
    font-size:9px; text-transform:uppercase; letter-spacing:0.05em;
    color:#fff; background:var(--teal-2); padding:1px 6px; white-space:nowrap;
  }
  .ladder-m .soon .pl{ background:#fff; color:var(--teal-2); border:1px dashed var(--teal-2); }

  /* flat tables: let them keep their natural column widths and scroll
     horizontally inside their wrapper, instead of widening the page or
     crushing columns to a per-character wrap */
  .table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; }
  .table-wrap > table.t{ min-width:max-content; }

  /* header band: keep logo + meta on one line without overflowing */
  .band-inner{ gap:12px; }
  .band-meta{ font-size:10px; }

  /* footer: stack the two notes */
  footer .wrap{ gap:4px; }
}

/* tighter phone breakpoint */
@media (max-width:480px){
  .band-meta{ font-size:9.5px; }
  .ladder-m .lrow{ grid-template-columns:20px 52px minmax(0,1fr) auto; gap:9px; }
  .ladder-legend{ gap:10px 14px; }
  /* slightly tighter table cells so less horizontal scrolling is needed */
  .table-wrap table.t th, .table-wrap table.t td{ padding:6px 9px; }
}