/* DrawMode site — 2026-08 redesign. Lato, purple brand accents, modern product-led layout.
   Self-contained and file://-safe; Google Fonts are progressive enhancement only. */
:root {
  --purple: #6d5cf0; --purple-dark: #5747d6; --purple-soft: #eeebfe;
  --navy: #131a2e; --ink: #232a3b; --mut: #6b7280; --line: #e5e7eb;
  --band: #f6f6f9; --card: #ffffff; --deep: #221d5e;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
body { margin: 0; font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif; color: var(--ink);
       background: #fff; font-size: 19px; line-height: 1.6; }
a { color: var(--purple-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }

/* ── top bar ─────────────────────────────────────────────────────────── */
header.top {
  position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.96);
  backdrop-filter: blur(6px); border-bottom: 1px solid var(--line);
}
.top-inner { max-width: 1240px; margin: 0 auto; padding: 13px 28px;
             display: flex; align-items: center; gap: 18px; }
.top-inner .logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.top-inner .logo { gap: 9px; text-decoration: none; }
.top-inner .logo img { height: 30px; display: block; }
.top-inner .logo .wordmark { font-size: 21px; font-weight: 900; letter-spacing: -.02em; line-height: 1; }
.top-inner .logo .w1 { color: #14263c; }
.top-inner .logo .w2 { color: #6b9fd4; }
.hero .brandline, .page-head .brandline { display: flex; align-items: center; gap: 16px;
                                          margin: 0 0 38px; }
.hero .brandline img.mark, .page-head .brandline img.mark { height: 62px; width: auto; }
.hero .brandline .wordmark, .page-head .brandline .wordmark { font-size: 48px;
                                          font-weight: 900; letter-spacing: -.02em; }
.hero .brandline .w1, .page-head .brandline .w1 { color: #14263c; }
.hero .brandline .w2, .page-head .brandline .w2 { color: #6b9fd4; }
.page-head .brandline.spec .w2 { color: #3b4256; font-weight: 400; }
.page-head .brandline .coming { background: var(--purple); color: #fff; font-weight: 700;
                                font-size: 15px; border-radius: 999px; padding: 5px 16px;
                                margin-left: 14px; white-space: nowrap; }
nav.menu { display: flex; align-items: center; gap: 24px; flex: 1; min-width: 0;
           margin-left: 42px; }
nav.menu .spacer { margin-left: auto; }
nav.menu a { color: #3b4256; font-size: 20px; font-weight: 400; white-space: nowrap; }
nav.menu a:hover { color: var(--purple-dark); text-decoration: none; }
nav.menu a.current { color: var(--purple-dark); font-weight: 700; }
nav.menu a.login { color: #3b4256; font-weight: 700; }
nav.menu a.cta {
  display: inline-block; background: var(--purple); color: #fff; font-weight: 700;
  padding: 8px 18px; border-radius: 8px; font-size: 18.5px;
  box-shadow: 0 1px 3px rgba(87,71,214,.35);
}
nav.menu a.cta:hover { background: var(--purple-dark); color: #fff; text-decoration: none; }
nav.menu a.cta-outline {
  display: inline-block; border: 1.5px solid var(--purple); color: var(--purple-dark);
  font-weight: 700; padding: 6.5px 16px; border-radius: 8px; font-size: 18.5px;
}
nav.menu a.cta-outline:hover { background: var(--purple-soft); text-decoration: none; }
nav.menu a.cta-outline.current { background: var(--purple-soft); }

/* ── generic page shell ──────────────────────────────────────────────── */
.page { max-width: 1240px; margin: 0 auto; padding: 0 28px; }
.page-head { padding: 56px 0 8px; max-width: 1000px; }
.page-head h1 { font-size: 46px; font-weight: 900; letter-spacing: -.02em;
                color: var(--navy); margin: 0 0 14px; line-height: 1.12; }
.page-head h1 .accent { color: var(--purple); }
.page-head p.lead { font-size: 21px; color: #4b5265; margin: 0 0 10px; }
.btn { display: inline-block; padding: 11px 26px; border-radius: 8px; font-weight: 700;
       font-size: 18px; border: 1.5px solid var(--purple); color: var(--purple-dark); }
.btn:hover { background: var(--purple-soft); text-decoration: none; }
.btn.solid { background: var(--purple); color: #fff; }
.btn.solid:hover { background: var(--purple-dark); }
.btn.ghost { border-color: transparent; }
.actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin: 26px 0 6px; }
.actions .aside { color: var(--mut); font-size: 16px; }

/* ── hero (index) ────────────────────────────────────────────────────── */
.hero { max-width: 1240px; margin: 0 auto; padding: 58px 28px 30px;
        display: grid; grid-template-columns: 1.02fr 1fr; gap: 54px; align-items: center; }
.hero h1 { font-size: 37px; font-weight: 900; letter-spacing: -.02em; line-height: 1.16;
           color: var(--navy); margin: 0 0 22px; }
.hero h1 .accent { color: var(--purple); }
.hero p.lead { font-size: 21px; color: #4b5265; margin: 0; max-width: 30em; }
.hero p.lead + p.lead { margin-top: 14px; }

.chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 30px 0 0; }
.chips a.chip, .chips span.chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px;
  border: 1px solid var(--line); border-radius: 9px; background: #fff;
  color: #3b4256; font-size: 15.5px; font-weight: 700; }
.chips a.chip:hover { border-color: var(--purple); color: var(--purple-dark);
                      text-decoration: none; }
.chips .chip svg { width: 16px; height: 16px; stroke: var(--purple); fill: none;
                   stroke-width: 1.8; flex: 0 0 auto; }
.chips .chip.more { color: var(--purple-dark); border-style: dashed; }
.factrow { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center;
           margin: 18px 0 0; color: var(--mut); font-size: 16px; }
.factrow span { display: inline-flex; align-items: center; gap: 8px; }
.factrow svg { width: 17px; height: 17px; stroke: #9aa1b1; fill: none; stroke-width: 1.7; }

/* the real app window, framed as a browser */
.hero-shot { position: relative; }
.app-frame { background: #fff; border: 1px solid var(--line); border-radius: 14px;
             overflow: hidden; box-shadow: 0 24px 60px rgba(19,26,46,.16); }
.app-frame .browser-bar { display: flex; align-items: center; gap: 10px;
                          padding: 9px 14px; border-bottom: 1px solid var(--line);
                          background: #fafafc; }
.app-frame .browser-bar i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.app-frame .browser-bar i:nth-child(1) { background: #f26d63; }
.app-frame .browser-bar i:nth-child(2) { background: #f5bd4f; }
.app-frame .browser-bar i:nth-child(3) { background: #63c454; }
.app-frame .browser-bar .url { margin-left: 10px; background: #fff; border: 1px solid var(--line);
                               color: #9aa1b1; border-radius: 999px; font-size: 12.5px;
                               padding: 2px 14px; }
.app-frame img { display: block; width: 100%; }
.radial-float { position: absolute; right: -26px; bottom: -44px; width: 200px;
                filter: drop-shadow(0 10px 24px rgba(19,26,46,.25)); }
.shift-note { position: absolute; right: 196px; bottom: -34px; width: 230px; text-align: right;
              font-family: 'Caveat', 'Comic Sans MS', cursive; font-size: 24px; line-height: 1.15;
              color: #3b4256; transform: rotate(-2deg); }
.shift-note svg { position: absolute; right: -34px; top: -6px; width: 40px; height: 34px;
                  stroke: #3b4256; fill: none; stroke-width: 2; }

/* ── feature tiles (index) ───────────────────────────────────────────── */
.tiles { max-width: 1240px; margin: 46px auto 0; padding: 34px 28px 40px;
         border-top: 1px solid var(--line);
         display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.tiles > div { padding: 6px 30px; border-left: 1px solid var(--line); }
.tiles > div:first-child { border-left: 0; padding-left: 0; }
.tiles svg { width: 30px; height: 30px; stroke: var(--purple); fill: none; stroke-width: 1.7;
             margin-bottom: 12px; }
.tiles h3 { font-size: 20px; color: var(--navy); margin: 0 0 8px; }
.tiles p { font-size: 16.5px; color: var(--mut); margin: 0; line-height: 1.55; }
.tiles a { font-weight: 700; font-size: 16px; }

/* ── "built for software thinking" band (index) ─────────────────────── */
.think { background: var(--band); border-top: 1px solid var(--line);
         border-bottom: 1px solid var(--line); }
.think .inner { max-width: 1240px; margin: 0 auto; padding: 48px 28px 54px; }
.think .head { display: flex; align-items: baseline; gap: 24px; flex-wrap: wrap; }
.think h2 { font-size: 36px; font-weight: 900; letter-spacing: -.02em; color: var(--navy);
            margin: 0; }
.think .head a { margin-left: auto; font-weight: 700; font-size: 17.5px; white-space: nowrap; }
.think p.sub { color: var(--mut); margin: 8px 0 26px; font-size: 18px; }
.typecards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.typecards a { background: #fff; border: 1px solid var(--line); border-radius: 12px;
               overflow: hidden; display: flex; flex-direction: column; color: var(--navy);
               box-shadow: 0 2px 10px rgba(19,26,46,.05);
               transition: box-shadow .15s, transform .15s; }
.typecards a:hover { text-decoration: none; box-shadow: 0 10px 26px rgba(19,26,46,.13);
                     transform: translateY(-2px); }
.typecards .pic { height: 150px; display: flex; align-items: center; justify-content: center;
                  padding: 14px; background: #fff; }
.typecards .pic img { max-height: 100%; object-fit: contain; }
.typecards b { display: block; text-align: center; font-size: 16px; padding: 10px 8px;
               border-top: 1px solid var(--line); color: var(--navy); }

/* ── two-up teasers (index) ──────────────────────────────────────────── */
.duo { max-width: 1240px; margin: 0 auto; padding: 44px 28px 10px;
       display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.duo a { border: 1px solid var(--line); border-radius: 14px; padding: 26px 30px;
         display: block; color: inherit; background: #fff;
         transition: box-shadow .15s, transform .15s; }
.duo a:hover { text-decoration: none; box-shadow: 0 10px 26px rgba(19,26,46,.12);
               transform: translateY(-2px); }
.duo h3 { margin: 0 0 8px; font-size: 22px; color: var(--navy); display: flex;
          align-items: center; gap: 12px; }
.duo h3 svg { width: 26px; height: 26px; stroke: var(--purple); fill: none; stroke-width: 1.8; }
.duo p { margin: 0; color: var(--mut); font-size: 17px; }
.duo .go { display: inline-block; margin-top: 12px; font-weight: 700; font-size: 16.5px;
           color: var(--purple-dark); }

/* ── CTA band ────────────────────────────────────────────────────────── */
.ctaband { max-width: 1240px; margin: 48px auto 64px; padding: 0 28px; }
.ctaband .inner { background: linear-gradient(115deg, #221d5e 0%, #2d2680 55%, #37309a 100%);
                  border-radius: 18px; padding: 36px 44px; color: #fff;
                  display: flex; align-items: center; gap: 40px; flex-wrap: wrap; }
.ctaband .brand { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.ctaband .brand img { height: 40px; border-radius: 9px; }
.ctaband .brand b { font-size: 22px; }
.ctaband .brand p { margin: 2px 0 0; font-size: 14.5px; color: #c9c5f2; max-width: 220px;
                    line-height: 1.4; }
.ctaband .msg { flex: 1; min-width: 260px; }
.ctaband .msg h2 { margin: 0 0 6px; font-size: 30px; font-weight: 900; letter-spacing: -.02em; }
.ctaband .msg p { margin: 0; color: #d9d6f6; font-size: 17px; max-width: 34em; }
.ctaband .act { flex: 0 0 auto; text-align: center; }
.ctaband .act a { display: inline-block; background: #fff; color: var(--purple-dark);
                  font-weight: 700; font-size: 18px; padding: 13px 30px; border-radius: 9px; }
.ctaband .act a:hover { background: var(--purple-soft); text-decoration: none; }
.ctaband .act span { display: block; margin-top: 9px; color: #c9c5f2; font-size: 14.5px;
                     max-width: 300px; margin-left: auto; margin-right: auto; }
.ctaband .act span a.alt { display: inline; background: none; padding: 0; border-radius: 0;
                           font-size: inherit; color: #fff; font-weight: 700;
                           text-decoration: underline; }
.ctaband .act span a.alt:hover { background: none; color: #d9d6f6; }

/* ── gallery + tabs (diagrams page) ──────────────────────────────────── */
.tabs { display: flex; gap: 4px; margin: 34px 0 0; border-bottom: 2px solid var(--line); }
.tab { appearance: none; background: none; border: 0; cursor: pointer; font: inherit;
       font-size: 22px; font-weight: 700; letter-spacing: -.01em; color: var(--mut);
       padding: 10px 24px 14px; margin-bottom: -2px; border-bottom: 3px solid transparent; }
.tab:hover { color: var(--purple-dark); }
.tab.current { color: var(--navy); border-bottom-color: var(--purple); }
.tabpanel { display: none; }
.tabpanel.on { display: block; }
.gal-sub { color: var(--mut); margin: 26px 0 28px; font-size: 18px; }
.gal-note { color: #4b5265; font-size: 18px; max-width: 52em; margin: -30px 0 60px;
            border-left: 3px solid var(--purple-soft); padding-left: 18px; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
           gap: 30px; padding-bottom: 70px; }
.gallery figure { margin: 0; background: #fff; border: 1px solid var(--line);
                  border-radius: 12px; overflow: hidden; cursor: zoom-in;
                  box-shadow: 0 2px 10px rgba(19,26,46,.06);
                  transition: box-shadow .15s, transform .15s; }
.gallery figure:hover { box-shadow: 0 8px 24px rgba(19,26,46,.13); transform: translateY(-2px); }
.gallery figure:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; }
.gallery .imgbox { height: 240px; display: flex; align-items: center; justify-content: center;
                   padding: 14px; background: #fbfbfd; border-bottom: 1px solid var(--line); }
.gallery .imgbox img { max-height: 100%; object-fit: contain; }
.gallery figcaption { padding: 15px 20px 17px; }
.gallery figcaption b { display: block; color: var(--navy); font-size: 19.5px; margin-bottom: 5px; }
.gallery figcaption span { color: #4b5265; font-size: 16.5px; line-height: 1.5; }

/* lightbox */
.lb { position: fixed; inset: 0; z-index: 100; display: none;
      background: rgba(15,18,32,.82); align-items: center; justify-content: center; }
.lb.on { display: flex; }
.lb .box { position: relative; background: #fff; border-radius: 14px;
           width: min(calc(100vw - 96px), 1600px);
           max-height: min(calc(100vh - 44px), 1600px);
           display: flex; flex-direction: column; overflow: hidden;
           box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.lb .box img { align-self: center; min-height: 0; object-fit: contain; padding: 18px 88px;
               max-width: 100%; max-height: min(calc(100vh - 200px), 1400px); }
.lb button.nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
                 background: rgba(15,18,32,.55); color: #fff; border: 0; font-size: 30px;
                 width: 52px; height: 52px; border-radius: 50%; cursor: pointer; line-height: 1; }
.lb button.nav:hover { background: rgba(15,18,32,.8); }
.lb .prev { left: 16px; } .lb .next { right: 16px; }
.lb .cap { padding: 12px 22px 18px; border-top: 1px solid var(--line); }
.lb .cap b { color: var(--navy); font-size: 21px; display: block; }
.lb .cap span { color: #4b5265; font-size: 16.5px; }
.lb button.x { position: absolute; top: 14px; right: 16px; z-index: 2;
               background: rgba(15,18,32,.08); color: #3b4256; border: 0;
               font-size: 26px; width: 46px; height: 46px;
               border-radius: 50%; cursor: pointer; line-height: 1; }
.lb button.x:hover { background: rgba(15,18,32,.18); }

/* ── feature split rows (AI / desktop pages) ─────────────────────────── */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center;
         padding: 38px 0; }
.split + .split { border-top: 1px solid var(--line); }
.split .shot { background: #fff; border: 1px solid var(--line); border-radius: 14px;
               padding: 12px; box-shadow: 0 10px 30px rgba(19,26,46,.10); cursor: zoom-in; }
.split .shot:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; }
.split .shot img { display: block; width: 100%; border-radius: 6px; }
.split .shot.natural { padding: 30px; }
.split .shot.natural img { width: auto; max-width: 100%; margin: 0 auto; }
.split .shot-placeholder { border-style: dashed; min-height: 320px; display: flex;
                           align-items: center; justify-content: center; text-align: center;
                           color: #9aa1b1; font-size: 17px; line-height: 1.6;
                           box-shadow: none; background: var(--band); }
.split h2 { font-size: 30px; font-weight: 900; letter-spacing: -.02em; color: var(--navy);
            margin: 0 0 12px; }
.split p { font-size: 18.5px; color: #4b5265; margin: 0 0 10px; }
.split ul { margin: 12px 0 0; padding-left: 22px; color: #4b5265; font-size: 17.5px; }
.split li { margin: 5px 0; }
.split .k { color: var(--navy); font-weight: 700; }

/* ── desktop page extras ─────────────────────────────────────────────── */
.dl-row { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin: 26px 0 8px; }
.dl-note { color: var(--mut); font-size: 16px; }
.factgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; padding: 34px 0 20px; }
.factgrid > div { border: 1px solid var(--line); border-radius: 14px; padding: 24px 28px;
                  background: #fff; }
.factgrid svg { width: 28px; height: 28px; stroke: var(--purple); fill: none; stroke-width: 1.7;
                margin-bottom: 10px; }
.factgrid h3 { margin: 0 0 8px; font-size: 20px; color: var(--navy); }
.factgrid p { margin: 0; color: var(--mut); font-size: 16.5px; line-height: 1.55; }
.factgrid code { font-size: 14.5px; background: var(--band); border: 1px solid var(--line);
                 border-radius: 6px; padding: 1px 7px; color: #3b4256; overflow-wrap: anywhere; }

/* ── web/desktop comparison (desktop page) ───────────────────────────── */
.compare { padding: 8px 0 26px; }
.compare h2 { font-size: 30px; font-weight: 900; letter-spacing: -.02em; color: var(--navy);
              margin: 0 0 10px; }
.compare p.same { color: #4b5265; font-size: 18px; max-width: 46em; margin: 0 0 22px; }
.compare-scroll { overflow-x: auto; }
.compare table { border-collapse: collapse; width: 100%; min-width: 640px; table-layout: fixed;
                 border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
                 border-style: hidden; box-shadow: 0 0 0 1px var(--line); }
.compare th, .compare td { text-align: left; padding: 13px 22px; border-top: 1px solid var(--line);
                           font-size: 17px; vertical-align: top; }
.compare th { background: var(--band); color: var(--navy); font-size: 18px; }
.compare th:first-child { width: 19%; }
.compare td:first-child { color: var(--mut); font-weight: 700; }
.compare td { color: #3b4256; }

/* ── vision page ─────────────────────────────────────────────────────── */
.vision-fig { margin: 10px 0 14px; }
.vision-fig .shot { background: #fff; border: 1px solid var(--line); border-radius: 14px;
                    padding: 26px; box-shadow: 0 10px 30px rgba(19,26,46,.10);
                    cursor: zoom-in; }
.vision-fig .shot:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; }
.vision-fig .shot img { display: block; width: 100%; max-width: 950px; margin: 0 auto; }
.vision-fig .cap { text-align: center; color: var(--mut); font-size: 16px; margin: 12px 0 0; }
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; padding: 34px 0 8px; }
.pillars > div { border: 1px solid var(--line); border-radius: 14px; padding: 24px 28px;
                 background: #fff; }
.pillars svg { width: 28px; height: 28px; stroke: var(--purple); fill: none; stroke-width: 1.7;
               margin-bottom: 10px; }
.pillars h3 { margin: 0 0 8px; font-size: 20px; color: var(--navy); }
.pillars p { margin: 0; color: var(--mut); font-size: 16.5px; line-height: 1.55; }
.mcp-card { display: flex; gap: 24px; align-items: flex-start; background: var(--purple-soft);
            border: 1px solid #d8d1fb; border-radius: 14px; padding: 26px 30px;
            margin: 26px 0 8px; }
.mcp-card svg { width: 34px; height: 34px; stroke: var(--purple-dark); fill: none;
                stroke-width: 1.8; flex: 0 0 auto; margin-top: 4px; }
.mcp-card h3 { margin: 0 0 8px; font-size: 21px; color: var(--navy); }
.mcp-card p { margin: 0; color: #3b4256; font-size: 17.5px; }
.mcp-card .k { color: var(--navy); font-weight: 700; }
.vision-status { color: var(--mut); font-size: 16.5px; font-style: italic; max-width: 52em;
                 margin: 22px 0 10px; }

/* ── pricing ─────────────────────────────────────────────────────────── */
.price-note { color: var(--mut); font-size: 17px; max-width: 780px; margin: 10px auto 16px;
              text-align: center; }
.price-note.tight { margin-bottom: 6px; }

/* ── pricing: hero band ──────────────────────────────────────────────── */
.pricing-hero { position: relative; overflow: hidden;
                background: linear-gradient(165deg, #f4f1ff 0%, #faf9ff 46%, #ffffff 100%);
                border-bottom: 1px solid #ece8fb; }
.pricing-hero .page-head { padding: 52px 0 40px; max-width: 720px; }
.pricing-hero .page-head p.lead { font-size: 20px; }
.hero-orbit { position: absolute; right: 7%; top: 34px; width: 320px; height: 210px;
              pointer-events: none; }
.hero-orbit img { position: absolute; right: 58px; top: 34px; width: 112px; border-radius: 26px;
                  transform: rotate(-13deg);
                  filter: drop-shadow(0 20px 34px rgba(87,71,214,.32)); }
.hero-orbit .ring { position: absolute; border: 1.5px solid rgba(109,92,240,.20);
                    border-radius: 50%; }
.hero-orbit .ring.r1 { right: 6px; top: 46px; width: 300px; height: 104px;
                       transform: rotate(-16deg); }
.hero-orbit .ring.r2 { right: 34px; top: 24px; width: 244px; height: 150px;
                       transform: rotate(12deg); border-color: rgba(109,92,240,.13); }
.hero-orbit .dot { position: absolute; background: #fff; border-radius: 50%;
                   box-shadow: 0 2px 9px rgba(87,71,214,.30); }
.hero-orbit .d1 { right: 232px; top: 24px; width: 11px; height: 11px; }
.hero-orbit .d2 { right: 254px; top: 92px; width: 8px; height: 8px; }
.hero-orbit .d3 { right: 176px; top: 140px; width: 7px; height: 7px; }

/* ── pricing: plan cards + feature matrix ────────────────────────────── */
.plans-scroll { overflow-x: auto; padding: 26px 0 6px; }
table.plans { border-collapse: separate; border-spacing: 0; table-layout: fixed;
              width: 100%; min-width: 940px; }
table.plans col.c-feat { width: 25%; }
/* The plan cards are a flex row of their own, ABOVE the table rather than inside it as a <thead>.
   They were table header cells with `height: 1px` and `height: 100%` on the card — the usual trick for
   a full-height box in a table cell. Chrome resolves that percentage against the row's used height;
   Firefox resolves it against the specified 1px, so every card collapsed to a 1px sliver and its tag,
   price and button piled up on top of one another. A flex row has no such ambiguity: `stretch` gives
   all three cards the tallest one's height in every browser, which is all the trick was ever for.
   The row carries the table's own `min-width` and lives inside `.plans-scroll`, so the columns stay
   lined up and card row + table scroll together as one block. */
.plan-cards { display: flex; align-items: stretch; min-width: 940px; }
.plan-cards > .col { flex: 0 0 25%; max-width: 25%; display: flex; padding: 6px 9px 22px; }
.plan-cards > .col:last-child { padding-right: 0; }
.plan-cards > .col.spacer { padding: 0; }   /* under the feature column — deliberately empty */

.plan-cards .card { position: relative; flex: 1 1 auto; display: flex; flex-direction: column;
                    background: var(--card); border: 1.5px solid var(--line);
                    border-radius: 16px; padding: 24px 20px 22px; text-align: center;
                    box-shadow: 0 12px 32px rgba(19,26,46,.08); }
.plan-cards .card .tag { align-self: center; }
.plan-cards .card.pro { border: 2px solid var(--purple); padding-top: 36px;
                        background: linear-gradient(180deg, #f7f5ff 0%, #fff 62%);
                        box-shadow: 0 18px 44px rgba(87,71,214,.20); }
.plan-cards .card .ribbon { position: absolute; top: -2px; right: -2px; display: inline-flex;
                            align-items: center; gap: 6px; background: #3b31a8; color: #fff;
                            font-size: 12.5px; font-weight: 800; letter-spacing: .07em;
                            text-transform: uppercase; padding: 6px 13px;
                            border-radius: 0 15px 0 14px; }
.plan-cards .card .ribbon svg { width: 13px; height: 13px; fill: #fff; stroke: none; }
.plan-cards .card .tag { display: inline-block; font-size: 12.5px; font-weight: 800; letter-spacing: .07em;
                         text-transform: uppercase; border-radius: 999px; padding: 5px 14px; }
.plan-cards .card .tag.now { background: var(--purple); color: #fff; }
.plan-cards .card .tag.soon { background: #ece9fd; color: var(--purple-dark); }
.plan-cards .card b { display: block; font-size: 24px; color: var(--navy); margin: 14px 0 4px;
                      letter-spacing: -.02em; }
.plan-cards .card .amt { display: block; font-size: 40px; font-weight: 900; color: var(--navy);
                         letter-spacing: -.035em; line-height: 1.15; }
.plan-cards .card .amt small { font-size: 17px; font-weight: 400; color: var(--mut); letter-spacing: 0; }
.plan-cards .card .per { display: block; color: var(--mut); font-size: 15px; min-height: 21px; }
.plan-cards .card .act { display: block; margin-top: auto; padding-top: 18px; }
.plan-cards .card .act .btn { display: block; padding: 11px 18px; font-size: 16.5px; }
.plan-cards .card .act .soonish { display: block; color: var(--mut); font-size: 16.5px;
                                  border: 1.5px dashed #cfc9f2; border-radius: 9px; padding: 11px 18px; }

.plans tbody tr { --sec: #64748b; --sec-soft: #eef1f7; --sec-band: #f6f8fb; --sec-ink: #465069; }
.plans tbody tr.web  { --sec: #6d5cf0; --sec-soft: #ece9fd; --sec-band: #f7f5ff; --sec-ink: #4a3cc0; }
.plans tbody tr.desk { --sec: #0e9384; --sec-soft: #d9f2ed; --sec-band: #f2fbf9; --sec-ink: #0b6f66; }
/* The roadmap is part of DrawMode Desktop, not a section beside it, so it keeps the desktop palette and
   is introduced by a SUB-heading (tr.sub) rather than a section header. What made it read as its own
   area was never the colour — it was repeating COMMUNITY / PROFESSIONAL / ENTERPRISE across the header,
   which is the one thing every top-level section does. A sub-heading gives its name and its date,
   indents, and leaves the plan columns empty, so the eye stays in the section it is already in. */
.plans tr.sub th.feat { background: var(--sec-band); padding: 8px 18px 8px 30px; }
.plans tr.sub th.feat .lbl { display: flex; align-items: center; gap: 8px; color: var(--sec-ink);
                             font-size: 14.5px; font-weight: 800; letter-spacing: -.005em; }
.plans tr.sub th.feat .lbl svg { width: 15px; height: 15px; stroke: currentColor; fill: none;
                                 stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
                                 flex: 0 0 auto; opacity: .85; }
.plans tr.sub th.feat .lbl { white-space: nowrap; }
/* the date sits UNDER the name, the way a section header's sub does — inline it wrapped the title
   itself ("On the / roadmap") in this narrow first column */
.plans tr.sub th.feat .when { display: block; font-weight: 400; font-size: 13px; color: var(--sec-ink);
                              opacity: .78; letter-spacing: 0; margin-top: 2px; padding-left: 23px; }
/* all three plan cells take the SAME band. A sub-heading carries no column names, so the usual stronger
   tint on `pro` had nothing to emphasise and just made the row look lopsided. */
.plans tr.sub td.p, .plans tr.sub td.p.pro { background: var(--sec-band); }
/* the rows beneath it are indented to match, so they read as nested under the sub-heading */
.plans tbody tr.r.soon th.feat { padding-left: 30px; }

.plans tbody th.feat, .plans tbody td.p { border-top: 1px solid var(--line); }
.plans tbody th.feat { text-align: left; font-weight: 700; color: #3b4256; font-size: 16px;
                       padding: 11px 18px; background: #fcfcfe;
                       border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.plans tbody th.feat small { display: block; font-weight: 400; color: var(--mut); font-size: 14px;
                             margin-top: 2px; line-height: 1.35; }
.plans tbody td.p { text-align: center; color: #3b4256; font-size: 16px; line-height: 1.4;
                    padding: 11px 16px; background: var(--card); }
.plans tbody td.p.pro { background: #faf9ff; }
.plans tbody td.p:last-child { border-right: 1px solid var(--line); }
.plans tbody td.p + td.p { border-left: 1px solid var(--line); }
.plans tbody tr.r:hover td.p { background: #f8f7fd; }
.plans tbody tr.r:hover td.p.pro { background: #f4f1ff; }
.plans tbody tr:first-child th.feat { border-top-left-radius: 16px; }
.plans tbody tr:first-child td.p:last-child { border-top-right-radius: 16px; }
.plans tbody tr.last th.feat, .plans tbody tr.last td.p { border-bottom: 1px solid var(--line); }
.plans tbody tr.last th.feat { border-bottom-left-radius: 16px; }
.plans tbody tr.last td.p:last-child { border-bottom-right-radius: 16px; }

.plans tr.sec th.feat { background: var(--sec-soft); padding: 12px 18px; }
.plans tr.sec th.feat .lbl { display: flex; align-items: center; gap: 9px; color: var(--sec-ink);
                             font-size: 18px; font-weight: 900; letter-spacing: -.01em; }
.plans tr.sec th.feat .lbl svg { width: 19px; height: 19px; stroke: currentColor; fill: none;
                                 stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
                                 flex: 0 0 auto; }
.plans tr.sec th.feat span.sub { display: block; font-weight: 400; color: var(--sec-ink);
                                 opacity: .75; font-size: 14px; margin-top: 3px; }
.plans tr.sec td.p { background: var(--sec-band); padding: 12px 16px; vertical-align: bottom; }
.plans tr.sec td.p.pro { background: var(--sec-soft); }
.plans tr.sec td.p .colname { display: block; font-size: 12.5px; font-weight: 800;
                              letter-spacing: .09em; text-transform: uppercase;
                              color: var(--sec-ink); opacity: .62; }
.plans tr.sec td.p.pro .colname { opacity: .95; }

.plans .tick { display: inline-block; width: 21px; height: 21px; border-radius: 50%;
               background: var(--sec); position: relative; vertical-align: middle; }
.plans .tick::after { content: ''; position: absolute; left: 6px; top: 6px; width: 8px; height: 4px;
                      border-left: 2.2px solid #fff; border-bottom: 2.2px solid #fff;
                      transform: rotate(-45deg); }
/* A PLANNED tick is hollow. A solid tick inside a dated section would say "you get this today", which is
   not true of anything in it — the mark has to agree with the date above it. Drawn with an inset shadow
   rather than a border so it cannot shift the 21px circle a solid tick occupies, and the two line up. */
.plans .tick.planned { background: transparent; box-shadow: inset 0 0 0 2px #b3bbc9; }
.plans .tick.planned::after { border-left-color: #8b94a8; border-bottom-color: #8b94a8; }
.plans .nope { color: #c3c8d4; font-size: 17px; }
.plans .note { display: block; color: var(--mut); font-size: 14px; margin-top: 1px; }
a.ast { font-size: 20px; font-weight: 900; color: var(--sec, var(--purple)); vertical-align: super;
        line-height: 0; margin-left: 4px; }
a.ast:hover { filter: brightness(.85); }

/* open-source band (the pricing asterisk lands here) */
.ctaband.inpage { max-width: none; margin: 40px 0 30px; padding: 0; }
.ctaband .ossmark { flex: 0 0 auto; width: 74px; height: 74px; border-radius: 20px;
                    background: rgba(255,255,255,.12); color: #fff; font-size: 58px;
                    font-weight: 900; line-height: 1; display: flex; align-items: center;
                    justify-content: center; padding-top: 22px; }
.ctaband .msg p b { color: #fff; }
.ctaband .msg p + p { margin-top: 8px; }

/* ── contact ─────────────────────────────────────────────────────────── */
.beach-wrap { border-radius: 16px; overflow: hidden; border: 1px solid var(--line);
              box-shadow: 0 10px 30px rgba(19,26,46,.10); margin: 44px 0 34px; }
.beach-wrap img, .beach-wrap svg { display: block; width: 100%; }
.contact-copy { max-width: 1000px; padding-bottom: 40px; }
.contact-copy h1 { font-size: 44px; font-weight: 900; color: var(--navy);
                   letter-spacing: -.02em; margin: 0 0 14px; }
.contact-copy p { font-size: 20px; }
.email-card { display: inline-block; background: var(--purple-soft);
              border: 1px solid #d8d1fb; border-radius: 12px; padding: 16px 28px;
              font-size: 20px; margin: 12px 0 60px; }
.email-card a { font-weight: 700; }

/* ── footer ──────────────────────────────────────────────────────────── */
footer.site { background: #fff; color: #a6adbd; margin-top: 30px;
              border-top: 1px solid var(--line); font-size: 16px; }
footer.site .cols { max-width: 1240px; margin: 0 auto; padding: 34px 28px 8px;
                    display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 30px; }
footer.site .brandcol .brandmark { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px;
                                   text-decoration: none; }
footer.site .brandcol .brandmark img { height: 26px; display: block; }
footer.site .brandcol .wordmark { font-size: 19px; font-weight: 900; letter-spacing: -.02em; line-height: 1; }
footer.site .brandcol .w1 { color: #14263c; }
footer.site .brandcol .w2 { color: #6b9fd4; }
footer.site .brandcol p { margin: 0; font-size: 15px; color: #a6adbd; max-width: 260px; }
footer.site h4 { margin: 4px 0 10px; font-size: 14px; letter-spacing: .08em;
                 text-transform: uppercase; color: #8a92a6; }
footer.site .cols a { display: block; color: #99a1b3; padding: 3px 0; font-size: 15.5px; }
footer.site .cols a:hover { color: var(--purple-dark); }
footer.site .base { max-width: 1240px; margin: 0 auto; padding: 16px 28px 22px;
                    display: flex; gap: 26px; align-items: center; flex-wrap: wrap;
                    border-top: 1px solid var(--line); margin-top: 20px; font-size: 15px; }
footer.site .base a { color: #99a1b3; }
footer.site .base .spacer { margin-left: auto; }

/* ── responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .plans-scroll { margin: 0 -28px; padding-left: 28px; padding-right: 28px; }
  .ctaband .ossmark { width: 58px; height: 58px; font-size: 44px; padding-top: 16px;
                      border-radius: 16px; }
  .pillars { grid-template-columns: 1fr; }
  .hero { grid-template-columns: 1fr; gap: 40px; padding-top: 40px; }
  .hero h1 { font-size: 33px; white-space: normal; }
  .hero .brandline img.mark, .page-head .brandline img.mark { height: 50px; }
  .hero .brandline .wordmark, .page-head .brandline .wordmark { font-size: 40px; }
  .radial-float { right: 0; bottom: -36px; width: 160px; }
  .shift-note { right: 170px; left: 0; width: auto; bottom: -30px; font-size: 21px; }
  .shift-note svg { display: none; }
  .hero-shot { margin-bottom: 26px; }
  .tiles { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .tiles > div { border-left: 0; padding: 0; }
  .typecards { grid-template-columns: repeat(3, 1fr); }
  .duo { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; gap: 26px; }
  .factgrid { grid-template-columns: 1fr; }
  footer.site .cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .top-inner { flex-wrap: wrap; gap: 10px 14px; }
  nav.menu { gap: 14px; flex-wrap: wrap; margin-left: 0; }
  nav.menu a { font-size: 16px; }
  .hero h1 { font-size: 29px; white-space: normal; }
  .typecards { grid-template-columns: repeat(2, 1fr); }
  .ctaband .inner { padding: 28px; }
  .lb .box { width: min(calc(100vw - 24px), 1200px); }
  .lb .box img { padding: 14px 54px; }
  .lb button.nav { width: 38px; height: 38px; font-size: 24px; }
  .lb .prev { left: 8px; } .lb .next { right: 8px; }
  .lb button.x { top: 10px; right: 10px; width: 38px; height: 38px; font-size: 22px; }
}

/* ── download form (desktop page) ────────────────────────────────────── */
/* The email is an ASK, not a gate — the releases repo is public and the "straight from GitHub" link sits
   right under the button, so anyone who would rather not give an address simply doesn't. The field is
   therefore styled as an ordinary optional input on the same row as the button: no asterisk, no
   `required`, nothing that reads as a wall. `.dl-row` already supplies the row itself. */
/* The reason stays ABOVE — read before the button is clickable, so it never reads as a toll gate — but
   the controls themselves sit on one line: label · box · button. */
/* Wide enough that label · field · button stay on ONE line — the button's label is long, and at 720px
   it wrapped underneath, which reads as a second step rather than the same action. Still wraps on a
   narrow viewport, where stacking is right. */
.dl-form { display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
           margin: 26px 0 8px; max-width: 880px; }
/* Wide enough for the sentence to sit on ONE line at desktop widths; it still wraps on a narrow
   viewport, where one line is not possible and stacking is right. */
.dl-why { max-width: 880px; }
.dl-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dl-line label { font-weight: 700; font-size: 16px; color: var(--ink); }
/* A footnote pair: the marker on the field and the marker on the note are the same purple, so the eye
   jumps between them without the note having to repeat which control it is about. (`a.ast` on the
   pricing page is the link form of the same idea; these are plain spans, so they need their own rule.) */
.dl-line label .ast { color: var(--purple); font-weight: 900; font-size: 13px; vertical-align: super;
                      line-height: 0; margin-left: 1px; }
.dl-why .ast { color: var(--purple); font-weight: 900; margin-right: 5px; }
/* A little air between the field and the button — they are two different decisions, and butted
   up against each other they read as one control. */
.dl-line button { margin-left: 10px; }
.dl-why { margin: 0; font-size: 15.5px; color: var(--ink); line-height: 1.5; }
.dl-form input[type=email] { padding: 11px 14px; border-radius: 8px; border: 1px solid var(--line);
                             font: inherit; font-size: 16.5px; min-width: 250px; background: #fff;
                             color: var(--ink); }
.dl-form input[type=email]::placeholder { color: #9aa1ad; }
.dl-form input[type=email]:focus { outline: 2px solid var(--purple-soft); outline-offset: 1px;
                                   border-color: var(--purple); }
/* A submit button has to be re-told the things an <a> inherited for free. */
.dl-form button { border: 0; cursor: pointer; font: inherit; }
.dl-note { font-size: 15px; color: var(--mut); margin: 0; max-width: 640px; }

/* The same form inside the purple CTA band, where the button is white-on-purple. */
.ctaband .act .dl-form { align-items: stretch; gap: 9px; margin: 0 0 9px; max-width: 340px; }
.ctaband .act .dl-form .dl-why { color: #ded9fb; font-size: 14.5px; text-align: left; }
.ctaband .act .dl-line { width: 100%; flex-wrap: nowrap; }
.ctaband .act .dl-line label { color: #fff; font-size: 15px; }
/* On the purple band the brand purple would vanish — the marker goes white there. */
.ctaband .act .dl-line label .ast, .ctaband .act .dl-why .ast { color: #fff; }
.ctaband .act .dl-form input[type=email] { min-width: 0; width: 100%; }
.ctaband .act .dl-form button { display: inline-block; background: #fff; color: var(--purple-dark);
                                font-weight: 700; font-size: 18px; padding: 13px 30px;
                                border-radius: 9px; }
.ctaband .act .dl-form button:hover { background: var(--purple-soft); }

/* The honeypot. Positioned off-canvas rather than display:none — a bot that skips hidden fields still
   walks this one, and a screen reader is kept out by aria-hidden + tabindex, not by the CSS. */
.dl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }