/* Techlosoft — base theme */

:root {
  --ink: #0f172a;
  --ink-soft: #475569;
  --muted: #64748b;
  --line: #e2e8f0;
  --bg: #f7f8fb;
  --surface: #ffffff;
  --brand: #4338ca;
  --brand-2: #4f46e5;
  --accent: #14b8a6;
  --warn-bg: #fff7ed;
  --warn-line: #fdba74;
  --warn-ink: #9a3412;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -12px rgba(15, 23, 42, 0.12);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

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

h1, h2, h3, h4 { line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); }
h1 { font-size: 2.25rem; margin: 0 0 0.5rem; }
h2 { font-size: 1.375rem; margin: 2rem 0 0.75rem; }
h3 { font-size: 1.1rem; margin: 1.5rem 0 0.5rem; }
p { margin: 0 0 1rem; }
.muted { color: var(--muted); font-size: 0.9rem; }

/* Header */
.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 20;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
.brand { display: flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 700; font-size: 1.05rem; }
.brand:hover { text-decoration: none; }
.brand__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--brand), var(--accent));
  color: #fff;
  font-weight: 800;
  font-size: 0.85rem;
}
.site-nav { display: flex; align-items: center; gap: 20px; font-size: 0.92rem; }
.site-nav a { color: var(--ink-soft); font-weight: 500; }
.site-nav a:hover { color: var(--ink); text-decoration: none; }
.site-nav__cta {
  background: var(--ink);
  color: #fff !important;
  padding: 8px 14px;
  border-radius: 8px;
}
.site-nav__cta:hover { background: var(--brand); }

/* Footer */
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--surface);
  margin-top: 64px;
  padding: 40px 0;
}
.site-footer__inner {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.site-footer__meta { text-align: right; max-width: 420px; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 9px;
  font-weight: 600;
  font-size: 0.95rem;
}
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--brand-2); color: #fff !important; }
.btn--primary:hover { background: var(--brand); }
.btn--ghost { background: transparent; color: var(--ink) !important; border: 1px solid var(--line); }
.btn--ghost:hover { background: var(--surface); border-color: #cbd5e1; }

/* Pills */
.pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  background: #eef2ff;
  color: var(--brand);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.pill--essentials, .pill--simple { background: #eef2ff; color: var(--brand); }
.pill--pro { background: #ecfeff; color: #0e7490; }
.pill--team, .pill--teams { background: #f0fdf4; color: #15803d; }
.pill--vertical { background: #fdf4ff; color: #a21caf; }
.pill--live { background: #0f766e; color: #fff; }
.pill--free { background: #f1f5f9; color: var(--ink-soft); }

/* Hero (homepage) */
.hero {
  position: relative;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 88px 0 64px;
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 420px at 12% -10%, rgba(79, 70, 229, 0.12) 0%, transparent 60%),
    radial-gradient(700px 380px at 92% 10%, rgba(20, 184, 166, 0.10) 0%, transparent 55%),
    radial-gradient(circle, rgba(79, 70, 229, 0.10) 1.4px, transparent 1.4px);
  background-size: auto, auto, 26px 26px;
  background-position: 0 0, 0 0, 0 0;
  mask-image: linear-gradient(to bottom, black, transparent 92%);
  pointer-events: none;
}
.hero__inner { position: relative; }
/* The heading used to carry a diagonal gradient across its whole box, so where
   the colour changed depended on where the text happened to wrap — it landed
   mid-phrase and read as an accident rather than as emphasis. The accent is on
   one chosen phrase now, and it stays there whatever the line breaks do. */
.hero h1 {
  font-size: 3rem;
  max-width: 760px;
  color: var(--ink);
}
.hero h1 .accent,
.cluster-hero h1 .accent { color: var(--brand-2); }
.hero__lede { font-size: 1.15rem; color: var(--ink-soft); max-width: 640px; }
.hero__stats { display: flex; gap: 40px; margin-top: 32px; flex-wrap: wrap; }
.stat__num { font-size: 1.9rem; font-weight: 800; color: var(--ink); display: block; letter-spacing: -0.02em; }
.stat__num--accent { color: var(--accent); }
.stat__label { color: var(--muted); font-size: 0.85rem; }

/* Quick nav */
.quicknav {
  position: sticky;
  top: 64px;
  z-index: 15;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
/* Vertical only. This element carries .wrap too, and a shorthand here dropped
   its 24px gutter: on a phone the chips ran off both edges of the screen, and on
   a desktop they sat 24px to the left of the hero text they are meant to line up
   with. */
.quicknav__inner { padding-top: 0; padding-bottom: 0; }
.quicknav__scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 12px 0;
  scrollbar-width: thin;
}
.quicknav__scroll::-webkit-scrollbar { height: 5px; }
.quicknav__scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.quicknav__chip {
  flex-shrink: 0;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft) !important;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none !important;
  transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}
.quicknav__chip:hover, .quicknav__chip.is-active { border-color: var(--brand-2); color: var(--brand-2) !important; background: #eef2ff; }
.quicknav__chip--live { border-color: #99f6e4; color: #0f766e !important; background: #f0fdf9; }
.quicknav__chip--live:hover { background: #ccfbf1; border-color: #5eead4; color: #0f766e !important; }

/* Live section */
.live-section { padding: 56px 0 8px; scroll-margin-top: 120px; }
.live-section__head { margin-bottom: 24px; }

/* Catalog / grid */
.catalog { padding: 56px 0 80px; scroll-margin-top: 120px; }
.catalog-toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin: 20px 0 8px;
}
.search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 10px;
  padding: 9px 14px;
  color: var(--muted);
  flex: 1 1 260px;
  max-width: 360px;
}
.search-box:focus-within { border-color: var(--brand-2); color: var(--brand-2); }
.search-box input {
  border: none;
  outline: none;
  font-family: var(--font);
  font-size: 0.9rem;
  width: 100%;
  color: var(--ink);
  background: transparent;
}
.search-box__kbd {
  flex-shrink: 0;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 1px 6px;
  font-family: var(--font);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  background: #f8fafc;
  line-height: 1.4;
}
.search-box:focus-within .search-box__kbd { opacity: 0; }
.chip-filter {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font);
}
.chip-filter.is-active, .chip-filter:hover { border-color: var(--brand-2); color: var(--brand-2); }
.chip-filter.is-active { background: #eef2ff; }
.catalog-toolbar__count { color: var(--muted); font-size: 0.82rem; margin-left: auto; }
.empty-search { text-align: center; color: var(--muted); padding: 48px 0; font-size: 0.95rem; }

.cluster-group { margin-top: 48px; scroll-margin-top: 120px; }
.cluster-group__head { display: flex; align-items: baseline; gap: 12px; justify-content: space-between; flex-wrap: wrap; }
.cluster-group__head h2 { margin: 0; }
.cluster-group__head h2 a { color: inherit; text-decoration: none; }
.cluster-group__head h2 a:hover { color: var(--brand); text-decoration: underline; }
.related__head h2 a { color: inherit; text-decoration: none; }
.related__head h2 a:hover { color: var(--brand); text-decoration: underline; }
.cluster-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #f0fdf9;
  border: 1px solid #99f6e4;
  color: #0f766e;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 3px 10px;
  border-radius: 999px;
}
.cluster-group__desc { color: var(--muted); font-size: 0.9rem; margin: 4px 0 18px; max-width: 720px; }

.tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.tool-card {
  display: flex;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  color: var(--ink);
  box-shadow: var(--shadow);
  transition: transform 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
}
.tool-card:hover {
  text-decoration: none;
  transform: translateY(-3px);
  border-color: #c7d2fe;
  box-shadow: 0 4px 6px rgba(15, 23, 42, 0.05), 0 16px 32px -14px rgba(67, 56, 202, 0.28);
}
.tool-card__logo { border-radius: 10px; flex-shrink: 0; }
/* Two rows' worth of height, always. A long name plus a "Vertical" and a
   "Ready" pill wraps onto a second line on some cards and not others, which
   left the descriptions in a row starting at different heights. */
/* The name on its own line, the pills always on the next. Sharing one wrapping
   row meant a long name pushed its pills down while a short one kept them
   inline, so the text underneath started at a different height on each card in a
   row of four. */
.tool-card__title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-height: 52px;
  align-content: flex-start;
}
/* Full width, so the pills are always pushed onto the row below it. */
.tool-card__title { flex: 0 0 100%; }
.tool-card__title { margin: 0; font-size: 1rem; }
.tool-card__tagline { color: var(--ink-soft); font-size: 0.86rem; margin: 4px 0 8px; }
.tool-card__meta { font-size: 0.78rem; color: var(--muted); }

/* Tool page */
.tool-hero {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 48px 0;
}
.tool-hero__inner { display: flex; gap: 24px; align-items: center; }
.tool-hero__logo { border-radius: 18px; box-shadow: var(--shadow); }
.eyebrow { color: var(--muted); font-size: 0.85rem; margin: 0 0 6px; text-transform: uppercase; letter-spacing: 0.03em; }
.tool-hero__tagline { font-size: 1.1rem; color: var(--ink-soft); max-width: 640px; }
.tool-hero__actions { display: flex; gap: 12px; margin-top: 8px; }

.live-build { padding: 28px 0 0; }
.live-build__card {
  background: #f0fdf9;
  border: 1px solid #99f6e4;
  border-radius: var(--radius);
  padding: 22px 24px;
  scroll-margin-top: 80px;
}
.badge-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #0f766e;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.live-build__card p { color: #0f4c47; margin-bottom: 14px; max-width: 780px; }
.download-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.download-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #ffffff;
  border: 1px solid #99f6e4;
  color: #0f766e !important;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 8px 14px;
  border-radius: 8px;
}
.download-chip:hover { background: #ccfbf1; text-decoration: none; }
.download-chip__icon { flex-shrink: 0; }
.download-fineprint { font-size: 0.8rem; color: #0f766e; margin: 0; }
.download-fineprint a { color: #0f766e; text-decoration: underline; }

.tool-body { display: grid; grid-template-columns: 1fr 300px; gap: 40px; padding: 48px 24px 80px; align-items: start; }
.tool-body__main h2:first-child { margin-top: 0; }
.tool-body__main ul { padding-left: 1.2rem; }
.tool-body__main li { margin-bottom: 0.4rem; }

.fact-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
}
.fact-card h2 { margin: 0 0 12px; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); }
.fact-card dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 0.9rem; }
.fact-card dt { color: var(--muted); }
.fact-card dd { margin: 0; text-align: right; font-weight: 600; }
.fact-card--warn { background: var(--warn-bg); border-color: var(--warn-line); }
.fact-card--warn h2 { color: var(--warn-ink); }
.fact-card--warn p { margin: 0; font-size: 0.88rem; color: var(--warn-ink); }
.source-list { list-style: none; margin: 0; padding: 0; font-size: 0.9rem; }
.source-list li { padding: 6px 0; border-top: 1px solid var(--line); }
.source-list li:first-child { border-top: none; }

/* Plan page */
/* Keeps the gutter .wrap provides; with "0" here the heading and body text ran
   into both edges of a phone screen. */
.plan-page { padding: 48px 24px 96px; max-width: 1040px; }
.plan-live-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f0fdf9;
  border: 1px solid #99f6e4;
  border-radius: var(--radius);
  padding: 12px 18px;
  color: #0f4c47 !important;
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0 0 28px;
}
.plan-live-banner:hover { background: #ccfbf1; text-decoration: none; }
.plan-live-banner .badge-live { margin-bottom: 0; flex-shrink: 0; }
.plan-page__layout { display: grid; grid-template-columns: 200px 1fr; gap: 40px; align-items: start; }
.plan-toc {
  position: sticky;
  top: 84px;
  font-size: 0.85rem;
  border-left: 2px solid var(--line);
  padding-left: 14px;
}
.plan-toc__title { color: var(--muted); font-weight: 700; text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.04em; margin: 0 0 10px; }
.plan-toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.plan-toc a { color: var(--ink-soft); display: block; line-height: 1.3; }
.plan-toc a:hover { color: var(--brand-2); text-decoration: none; }
.plan-toc a.is-active { color: var(--brand-2); font-weight: 700; }
.plan-doc { min-width: 0; }
.plan-doc h2 { border-top: 1px solid var(--line); padding-top: 1.5rem; scroll-margin-top: 84px; }
.plan-doc table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.92rem; }
.plan-doc th, .plan-doc td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.plan-doc th { color: var(--muted); font-weight: 600; }
.plan-doc code { background: #f1f5f9; padding: 2px 6px; border-radius: 4px; font-size: 0.88em; }
.plan-doc ul, .plan-doc ol { padding-left: 1.3rem; }
.plan-doc li { margin-bottom: 0.35rem; }
.plan-doc input[type="checkbox"] { margin-right: 6px; }
@media (max-width: 860px) {
  .plan-page__layout { grid-template-columns: 1fr; }
  .plan-toc { position: static; border-left: none; padding-left: 0; border-bottom: 1px solid var(--line); padding-bottom: 14px; }
}

/* About */
.about { padding: 64px 0; }
.about-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 24px; }
.about-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }

/* 404 */
.notfound { padding: 120px 0 140px; }
.notfound__inner { max-width: 640px; }
.notfound h1 { margin: 0 0 12px; }

@media (max-width: 860px) {
  .tool-body { grid-template-columns: 1fr; }
  .tool-hero__inner { flex-direction: column; align-items: flex-start; }
  .about-grid { grid-template-columns: 1fr; }
  .site-footer__meta { text-align: left; }
}

@media (max-width: 640px) {
  /* Vertical padding only. This element also carries .wrap, whose "padding: 0
     24px" is what keeps content off the edge of the screen — and a shorthand
     here wiped it, so on a phone the brand and the nav sat flush against both
     edges of the display. */
  .site-header__inner { padding-top: 10px; padding-bottom: 10px; height: auto; flex-wrap: wrap; row-gap: 8px; }
  .site-nav { gap: 12px; font-size: 0.86rem; order: 3; width: 100%; justify-content: space-between; }
  .site-nav__cta { padding: 7px 12px; font-size: 0.85rem; }
  .hero { padding: 56px 0 40px; }
  .hero h1 { font-size: 2.1rem; }
  .hero__lede { font-size: 1rem; }
  .hero__stats { gap: 24px; }
  .catalog-toolbar__count { margin-left: 0; width: 100%; }
  .quicknav { position: static; }
}

/* Recorded terminal demos */
.demo { margin: 18px 0 14px; }
.demo img {
  display: block;
  width: 100%;
  max-width: 820px;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(15,23,42,.08), 0 18px 40px -18px rgba(15,23,42,.45);
}
.demo figcaption {
  margin-top: 8px;
  font-size: 0.78rem;
  color: #0f766e;
  max-width: 820px;
}
.hero-demo { margin: 32px 0 0; }
.hero-demo img {
  display: block;
  width: 100%;
  max-width: 760px;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(15,23,42,.10), 0 28px 60px -24px rgba(15,23,42,.55);
}

/* Consumer-facing product page */
.get-app { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 14px; }
.btn--get { font-size: 1.02rem; padding: 13px 26px; }
.get-app__meta { color: var(--muted); font-size: 0.85rem; }

.ui-shot { padding: 40px 24px 8px; }
.ui-shot img {
  display: block; width: 100%; max-width: 900px; height: auto; margin: 0 auto;
  border-radius: 14px;
}
.ui-shot__cap {
  text-align: center; color: var(--muted); font-size: 0.82rem;
  max-width: 620px; margin: 12px auto 0;
}

.get-section { padding: 32px 24px 8px; scroll-margin-top: 90px; }
.get-card {
  background: linear-gradient(135deg, #f8fafc, #eef2ff);
  border: 1px solid #c7d2fe;
  border-radius: var(--radius);
  padding: 32px;
  text-align: center;
}
.get-card h2 { margin: 0 0 8px; font-size: 1.5rem; }
.get-card__lede { color: var(--ink-soft); max-width: 560px; margin: 0 auto 22px; }
.get-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn--platform { padding: 13px 22px; font-size: 0.98rem; }
.get-card__note { color: var(--muted); font-size: 0.8rem; margin: 18px 0 0; }

/* Advanced disclosure */
/* ---------- Keyboard ---------- */
/* Reaching the catalogue with a keyboard meant tabbing through the whole
   header on every page. And the browser default focus ring is invisible on the
   dark buttons, so it is drawn explicitly. */
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 16px;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.12s ease;
}
.skip-link:focus { top: 12px; }
main:focus { outline: none; }

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible {
  outline: 3px solid var(--brand-2);
  outline-offset: 2px;
  border-radius: 6px;
}

/* The guides block on the home page. */
.home-guides { padding: 8px 0 64px; scroll-margin-top: 120px; }
.home-guides .section-head { margin-bottom: 22px; }
.home-guides .section-head h2 { margin: 0 0 6px; }
.home-guides .section-head p { margin: 0; max-width: 70ch; }
.home-guides .guide-card h3 { margin: 0 0 8px; font-size: 1.05rem; }
.home-guides__more { margin: 22px 0 0; }

/* A pointer from a program or a group to the guide about the job it does. */
.guide-strip { padding: 8px 24px 8px; }
.guide-strip__inner {
  background: var(--brand-soft, #eef2ff);
  border: 1px solid #dfe3ff;
  border-radius: var(--radius);
  padding: 18px 22px;
}
.guide-strip__label {
  margin: 0 0 10px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--brand);
}
.guide-strip__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.guide-strip__list li { font-size: 0.95rem; }
.guide-strip__list a { font-weight: 600; }
.guide-strip__list .muted { display: block; font-size: 0.86rem; margin-top: 2px; }

/* ---------- Guides ---------- */
.guide-hero {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 52px 0 40px;
}
.guide-hero__inner { max-width: 760px; }
.guide-hero h1 { font-size: 2.3rem; margin: 0 0 12px; letter-spacing: -0.02em; }
.guide-hero .hero__lede { margin: 0; }
.guide-answer {
  margin: 22px 0 0;
  background: var(--brand-soft, #eef2ff);
  border: 1px solid #dfe3ff;
  border-left: 4px solid var(--brand-2);
  border-radius: 10px;
  padding: 14px 18px;
}
.guide-answer__label {
  margin: 0 0 4px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--brand);
}
.guide-answer p:last-child { margin: 0; color: var(--ink); }

.guide-body { display: grid; grid-template-columns: 1fr 300px; gap: 44px; padding: 44px 24px 24px; align-items: start; }
.guide-body__main { max-width: 68ch; }
.guide-body__main h2 { font-size: 1.35rem; margin: 32px 0 10px; }
.guide-body__main h2:first-child { margin-top: 0; }
.guide-body__main h3 { font-size: 1.05rem; margin: 22px 0 6px; }
.guide-body__main p { margin: 0 0 14px; }
.guide-body__main ul, .guide-body__main ol { padding-left: 1.2rem; margin: 0 0 16px; }
.guide-body__main li { margin-bottom: 6px; }
.guide-body__main code { background: var(--field, #f8fafc); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; font-size: 0.88em; }
.guide-body__main pre { background: #0f172a; color: #e2e8f0; border-radius: 10px; padding: 14px 16px; overflow-x: auto; font-size: 0.84rem; }
.guide-body__main pre code { background: none; border: 0; padding: 0; color: inherit; }

.guide-tools {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  position: sticky;
  top: 84px;
}
.guide-tools h2 { margin: 0 0 4px; font-size: 1.05rem; }
.guide-tools > .muted { font-size: 0.85rem; margin: 0 0 14px; }
.guide-tool {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
}
.guide-tool:hover { background: var(--canvas, #f7f8fb); }
.guide-tool img { border-radius: 9px; flex-shrink: 0; }
.guide-tool strong { display: block; font-size: 0.94rem; }
.guide-tool__line { display: block; color: var(--muted); font-size: 0.8rem; }
.guide-tools__more { margin: 12px 0 0; font-size: 0.86rem; }

.guide-more { padding: 8px 24px 72px; }
.guide-more h2 { font-size: 1.15rem; margin: 0 0 12px; }
.guide-more__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px 24px; margin: 0 0 16px; padding-left: 1.1rem; }

/* Guides index */
.guide-index { padding: 40px 24px 72px; }
.guide-index__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.guide-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.guide-card:hover { border-color: var(--brand-2); transform: translateY(-2px); }
.guide-card h2 { margin: 0 0 8px; font-size: 1.08rem; }
.guide-card p { margin: 0; color: var(--ink-soft); font-size: 0.9rem; }
.guide-card__go { display: block; margin-top: 12px; color: var(--brand-2); font-size: 0.85rem; font-weight: 600; }

@media (max-width: 900px) {
  .guide-body { grid-template-columns: 1fr; gap: 28px; }
  .guide-tools { position: static; }
}
@media (max-width: 640px) {
  .guide-hero { padding: 40px 0 32px; }
  .guide-hero h1 { font-size: 1.85rem; }
  .guide-body { padding: 32px 24px 16px; }
  .guide-more { padding: 8px 24px 56px; }
  .guide-index { padding: 32px 24px 56px; }
}

/* ---------- One group of four ---------- */
.cluster-hero {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 56px 0 44px;
}
.cluster-hero__inner { max-width: 760px; }
.cluster-hero h1 { font-size: 2.5rem; margin: 0 0 12px; letter-spacing: -0.02em; }
.cluster-hero .hero__lede { margin: 0; }

.cluster-list { padding: 44px 24px 8px; display: grid; gap: 28px; }
.cluster-item {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 28px;
  align-items: start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
}
/* Same box for every drawing, whatever its own height, so four rows line up
   instead of stepping down the page. */
.cluster-item__shot {
  display: block;
  aspect-ratio: 900 / 700;
  background: var(--canvas, #f7f8fb);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.cluster-item__shot img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cluster-item__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.cluster-item__logo { border-radius: 9px; flex-shrink: 0; }
.cluster-item__head h2 { margin: 0; font-size: 1.3rem; }
.cluster-item__head h2 a { color: inherit; text-decoration: none; }
.cluster-item__head h2 a:hover { color: var(--brand); }
.cluster-item__lede { font-size: 1.02rem; color: var(--ink-soft); margin: 0 0 8px; max-width: 62ch; }
.cluster-item__text .muted { margin: 0; max-width: 62ch; font-size: 0.92rem; }
.cluster-item__go { margin: 16px 0 0; }

.cluster-shared { padding: 36px 24px 72px; }
.cluster-shared h2 { font-size: 1.3rem; margin: 0 0 14px; }
.cluster-shared__list { margin: 0; padding-left: 1.15rem; max-width: 74ch; }
.cluster-shared__list li { margin-bottom: 8px; color: var(--ink-soft); }
.cluster-shared__more { margin-top: 20px; }

@media (max-width: 860px) {
  .cluster-item { grid-template-columns: 240px 1fr; gap: 20px; }
}
@media (max-width: 640px) {
  .cluster-hero { padding: 44px 0 36px; }
  .cluster-hero h1 { font-size: 2rem; }
  .cluster-list { padding: 32px 24px 4px; gap: 20px; }
  .cluster-item { grid-template-columns: 1fr; gap: 16px; padding: 16px; }
  .cluster-shared { padding: 28px 24px 56px; }
}


/* The other three programs in this program's group. The horizontal padding is
   repeated here because setting `padding` on an element that also carries
   .wrap overrides the gutter .wrap gives it, and text then runs into both
   edges of a phone. */
.related { padding: 8px 24px 64px; }
.related__head { margin-bottom: 18px; }
.related__head h2 { margin: 0 0 6px; font-size: 1.2rem; }
.related__head p { margin: 0; max-width: 66ch; font-size: 0.92rem; }

.advanced { padding: 8px 24px 64px; }
.adv {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.adv > summary {
  cursor: pointer;
  padding: 18px 22px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.adv > summary::-webkit-details-marker { display: none; }
.adv > summary::after {
  content: "▸";
  position: absolute;
  right: 26px;
  color: var(--muted);
  transition: transform 0.15s ease;
}
.adv { position: relative; }
.adv[open] > summary::after { transform: rotate(90deg); }
.adv__title { font-weight: 700; font-size: 0.98rem; }
.adv__hint { color: var(--muted); font-size: 0.83rem; }
.adv__body { padding: 4px 22px 24px; border-top: 1px solid var(--line); }
.adv__body h3 { font-size: 0.95rem; margin: 22px 0 8px; }
/* The program's own usage text, exactly as it prints it. It scrolls inside its
   own box rather than widening the page, because some of these list a whole
   config file format. */
.cli-help {
  margin: 0 0 10px; padding: 14px 16px; max-width: 100%;
  background: #0f172a; color: #e2e8f0; border-radius: 10px;
  overflow-x: auto; max-height: 420px; overflow-y: auto;
}
.cli-help code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem; line-height: 1.55; white-space: pre; background: none;
  color: inherit; padding: 0;
}
.get-card__warn {
  background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn-ink);
  border-radius: 10px; padding: 12px 16px; font-size: 0.83rem;
  max-width: 620px; margin: 18px auto 0; text-align: left;
}


/* ---- one content edge -------------------------------------------------- */
/* Everything on a program page lines up on the same left edge: the hero
   text, the interface image, the download card and the body. */
.tool-hero { padding: 56px 0 48px; }
.tool-hero__inner { display: block; }
.tool-hero__logo { border-radius: 16px; box-shadow: var(--shadow); margin-bottom: 18px; display: block; }
.tool-hero__text { max-width: 720px; }
.tool-hero h1 { font-size: 2.5rem; margin: 0 0 10px; }
.tool-hero__tagline { font-size: 1.15rem; color: var(--ink-soft); margin: 0 0 22px; max-width: 620px; }

.ui-shot { padding: 0 24px 8px; }
.ui-shot img { max-width: 100%; margin: 0; }
.ui-shot__cap { text-align: left; margin: 12px 0 0; max-width: 720px; }

.get-section { padding: 40px 24px 0; }
.get-card { text-align: left; padding: 28px 32px; }
.get-card h2 { margin: 0 0 6px; }
.get-card__lede { margin: 0 auto 20px 0; }
.get-buttons { justify-content: flex-start; }
.get-card__note { margin: 16px 0 0; }
.get-card__warn { margin: 16px 0 0; max-width: 660px; }

.tool-body { padding: 44px 24px 56px; }
.related { padding: 0 24px 40px; }
.advanced { padding: 0 24px 72px; }

/* ---------- Pricing ---------- */
/* Note: .wrap already supplies the 24px gutter. Any rule below that sets its
   own padding must repeat that 24px on the sides, or the page loses its left
   edge alignment on narrow screens. */
.price-hero { padding: 64px 0 8px; }
.price-hero h1 { font-size: 2.6rem; margin: 6px 0 14px; }
.price-hero__lede { font-size: 1.15rem; color: var(--ink-soft); max-width: 720px; margin: 0 0 20px; }
.price-hero__note {
  max-width: 720px;
  margin: 0;
  padding: 14px 18px;
  border-radius: 12px;
  background: #f0fdf9;
  border: 1px solid #99f6e4;
  color: #0f4c47;
  font-size: 0.95rem;
}

.plans { padding: 36px 24px 8px; }
/* Stretch, not start: the cards must share a bottom edge. The min-heights
   below hold the price, the button and the feature list on the same line
   across all three cards even when a line of copy wraps in one and not the
   others (body line-height is 1.55, so two lines is 3.1em). */
.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 26px;
  box-shadow: var(--shadow);
}
.plan-card--featured { border-color: #c7d2fe; box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 18px 40px -18px rgba(79,70,229,.45); }
.plan-card__flag {
  position: absolute;
  top: -12px;
  left: 26px;
  background: var(--brand-2);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
}
.plan-card__name { font-size: 1.35rem; margin: 0 0 6px; }
.plan-card__lede { color: var(--ink-soft); margin: 0 0 18px; font-size: 0.96rem; min-height: 3.1em; }
.plan-card__price { margin: 0 0 4px; display: flex; align-items: baseline; gap: 8px; }
.plan-card__amount { font-size: 2.6rem; font-weight: 750; letter-spacing: -0.02em; color: var(--ink); }
.plan-card__period { color: var(--muted); font-size: 0.95rem; }
.plan-card__billing { color: var(--muted); font-size: 0.85rem; margin: 0 0 20px; min-height: 3.1em; }
.plan-card__cta { width: 100%; justify-content: center; margin-bottom: 22px; }
.plan-card__list { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 11px; }
.plan-card__list li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.93rem; color: var(--ink-soft); }
.plan-card__list svg { color: #0f766e; flex: none; margin-top: 3px; }
.plan-card__best { font-size: 0.9rem; color: var(--ink-soft); margin: auto 0 0; padding-top: 16px; border-top: 1px solid var(--line); }
.plan-card__list { margin-bottom: 20px; }
.plan-card__foot { font-size: 0.83rem; color: var(--muted); margin: 10px 0 0; }
.plans__teams { margin: 28px 0 0; color: var(--muted); font-size: 0.95rem; max-width: 720px; }

.compare { padding: 56px 24px 8px; }
.compare h2 { margin: 0 0 18px; }
.compare__scroll { overflow-x: auto; }
.compare-table { width: 100%; border-collapse: collapse; min-width: 640px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.compare-table th, .compare-table td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--line); font-size: 0.93rem; }
.compare-table thead th { background: #fbfcfe; font-size: 1rem; vertical-align: bottom; }
.compare-table__price { display: block; font-weight: 500; color: var(--muted); font-size: 0.82rem; margin-top: 3px; }
.compare-table tbody th { font-weight: 600; color: var(--ink); }
.compare-table tbody td { color: var(--ink-soft); }
.compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td { border-bottom: 0; }

.price-faq { padding: 56px 24px 8px; }
.price-faq h2 { margin: 0 0 18px; }
.faq-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.faq-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; }
.faq-card h3 { font-size: 1.02rem; margin: 0 0 8px; }
.faq-card p { margin: 0; }

.price-cta { padding: 64px 0 80px; }
/* The max-width goes on the children, never on the .wrap itself -- putting it
   on .wrap shrinks the gutter box and centres the whole block, breaking the
   single left edge every other section shares. */
.price-cta h2 { margin: 0 0 10px; max-width: 720px; }
.price-cta p { color: var(--ink-soft); margin: 0 0 22px; max-width: 720px; }

/* Plan strip on the home page and the tool pages. */
.plan-strip { padding: 56px 24px; }
.plan-strip__inner {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 30px;
  box-shadow: var(--shadow);
}
.plan-strip h2 { margin: 0 0 8px; }
.plan-strip__lede { color: var(--ink-soft); margin: 0 0 22px; max-width: 640px; }
.plan-strip__row { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 20px; }
.plan-strip__item { border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; min-width: 168px; }
.plan-strip__item--featured { border-color: #c7d2fe; background: #f8f9ff; }
.plan-strip__label { display: block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.plan-strip__amount { display: block; font-size: 1.6rem; font-weight: 750; color: var(--ink); margin-top: 4px; }
.plan-strip__period { color: var(--muted); font-size: 0.85rem; }

@media (max-width: 900px) {
  .plan-grid { grid-template-columns: 1fr; }
  .faq-grid { grid-template-columns: repeat(2, 1fr); }
  .price-hero h1 { font-size: 2.1rem; }
}
@media (max-width: 640px) {
  .faq-grid { grid-template-columns: 1fr; }
}
.source-list a { display: inline-block; }
.live-section__more { margin: 24px 0 0; font-weight: 600; }

/* ---------- Big call to action ---------- */
.btn--xl {
  padding: 18px 32px;
  font-size: 1.08rem;
  font-weight: 750;
  border-radius: 14px;
  gap: 10px;
}
.btn--pop {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 55%, #14b8a6 140%);
  color: #fff !important;
  border: 0;
  box-shadow: 0 10px 28px -10px rgba(79, 70, 229, 0.75);
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}
.btn--pop:hover {
  filter: brightness(1.06);
  transform: translateY(-2px);
  box-shadow: 0 16px 36px -12px rgba(79, 70, 229, 0.85);
}
.btn--pop:active { transform: translateY(0); }
.btn__arrow { transition: transform 0.18s ease; }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* Reassurance line that sits under a CTA. */
.cta-note { margin: 12px 0 0; color: var(--muted); font-size: 0.9rem; }
.cta-note strong { color: var(--ink-soft); }

.trust-row { display: flex; flex-wrap: wrap; gap: 10px 20px; margin: 20px 0 0; padding: 0; list-style: none; }
.trust-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 0.92rem; font-weight: 600; color: var(--ink-soft); }
.trust-chip svg { color: #0f766e; flex: none; }

/* A loud, friendly badge for "this costs nothing right now". */
.free-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #ecfdf5, #d1fae5);
  border: 1px solid #6ee7b7;
  color: #065f46;
  font-weight: 750;
  font-size: 0.88rem;
  padding: 7px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.free-badge__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  animation: pulse-dot 2.2s infinite;
}
@keyframes pulse-dot {
  70% { box-shadow: 0 0 0 9px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* ---------- Sticky bottom bar ---------- */
/* Slides up once the reader has scrolled past the hero's own CTA, so the
   download is never more than one click away however far down they are. */
.cta-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  background: rgba(15, 23, 42, 0.97);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  transform: translateY(110%);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.cta-bar.is-visible { transform: none; }
.cta-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 24px;
  flex-wrap: wrap;
}
.cta-bar__text { color: #fff; font-weight: 650; font-size: 1rem; margin: 0; }
.cta-bar__text span { color: #a5b4fc; }
.cta-bar__close {
  background: transparent; border: 0; cursor: pointer;
  color: rgba(255,255,255,0.55); font-size: 1.3rem; line-height: 1;
  padding: 4px 8px; border-radius: 8px;
}
.cta-bar__close:hover { color: #fff; background: rgba(255,255,255,0.1); }
.cta-bar__actions { display: flex; align-items: center; gap: 12px; }

/* ---------- Marquee of program names ---------- */
.marquee {
  overflow: hidden;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.marquee__track { display: flex; gap: 12px; width: max-content; animation: marquee 64s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee__item {
  flex: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 0.88rem;
  font-weight: 650;
  color: var(--ink-soft) !important;
  background: #fbfcfe;
}
.marquee__item:hover { border-color: #c7d2fe; color: var(--brand) !important; text-decoration: none; }

/* ---------- Bigger, friendlier download block on a program page ---------- */
.get-card {
  background: linear-gradient(150deg, #ffffff 0%, #f7f8ff 55%, #f0fdfa 100%);
  border: 1px solid #c7d2fe;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 22px 48px -26px rgba(79,70,229,.5);
}
.get-card h2 { font-size: 1.9rem; }
.btn--platform {
  padding: 17px 26px;
  font-size: 1.02rem;
  font-weight: 750;
  border-radius: 13px;
}
.get-buttons { gap: 14px; }

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .free-badge__dot { animation: none; }
  .btn--pop, .cta-bar { transition: none; }
  .btn--pop:hover { transform: none; }
}
@media (max-width: 640px) {
  .btn--xl { padding: 16px 22px; font-size: 1rem; width: 100%; justify-content: center; }
  /* The row has to become a column, or flex-shrink squeezes both buttons onto
     one line and every label wraps mid-phrase. */
  .hero .tool-hero__actions,
  .price-hero .tool-hero__actions,
  .price-cta .tool-hero__actions { flex-direction: column; align-items: stretch; }
  .cta-bar__inner { padding: 12px 18px; }
  .cta-bar__text { font-size: 0.92rem; flex: 1 1 100%; }
  .cta-bar__actions { width: 100%; }
  .cta-bar__actions .btn { flex: 1; justify-content: center; }
}
.get-card__trust { margin-top: 20px; }
.tool-hero .free-badge { margin-bottom: 16px; }
.plan-card__per {
  /* Two lines reserved: one of the three wraps and the others do not, which
     otherwise pushes that card's button 22px below its neighbours. */
  min-height: 3.1em;
  margin: 0 0 16px;
  font-size: 0.88rem;
  font-weight: 700;
  color: #0f766e;
  background: #f0fdfa;
  border: 1px solid #99f6e4;
  border-radius: 8px;
  padding: 8px 12px;
}
.price-hero .free-badge { margin-bottom: 20px; }
.price-hero h1 { font-size: 2.9rem; }
/* Room for the fixed bar so it never sits on the last line of the footer. */
.site-footer { padding-bottom: 92px; }

/* ---------- Featured programs ---------- */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.feature-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 22px 20px;
  box-shadow: var(--shadow);
  color: var(--ink) !important;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.feature-card:hover {
  text-decoration: none;
  transform: translateY(-3px);
  border-color: #c7d2fe;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 22px 44px -22px rgba(79,70,229,.5);
}
.feature-card__head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.feature-card__logo { border-radius: 12px; flex: none; }
.feature-card__title { margin: 0 0 5px; font-size: 1.2rem; }
/* Two lines reserved so the screenshots below line up across the row. */
.feature-card__pitch { color: var(--ink-soft); font-size: 0.93rem; margin: 0 0 16px; min-height: 4.7em; }
.feature-card__shot {
  width: 100%;
  /* One shape for every card, as in the preview rail. Sized by its own aspect,
     a short drawing gave a short card and a tall one a tall card, so a row of
     six came out visibly uneven. The ground matches the drawings' own canvas,
     so the letterboxing does not show. */
  aspect-ratio: 900 / 700;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 16px;
  background: #f7f8fb;
}
.feature-card__go { margin-top: auto; font-weight: 700; color: var(--brand-2); font-size: 0.95rem; }
.feature-card:hover .btn__arrow { transform: translateX(4px); }

@media (max-width: 980px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .feature-grid { grid-template-columns: 1fr; }
  .feature-card__pitch { min-height: 0; }
}

/* ---------- Screenshot rail, App Store style ---------- */
/* Stacked screenshots pushed the rest of the page a full screen down. One
   horizontal rail keeps five shots inside one screen height. It bleeds past
   the .wrap gutter on purpose, so the last shot is visibly cut off and the
   rail reads as scrollable without needing a scrollbar to say so. */
.shots { padding: 8px 0 0; }
.shots__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.shots__title { margin: 0 0 4px; }
.shots__cap { color: var(--muted); font-size: 0.92rem; margin: 0; max-width: 620px; }
.shots__nav { display: flex; gap: 8px; flex: none; }
.shots__btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}
.shots__btn:hover:not(:disabled) { background: #f1f5f9; border-color: #cbd5e1; }
.shots__btn:disabled { opacity: 0.35; cursor: default; }

.shot-rail {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px calc((100vw - 1120px) / 2 + 24px) 24px;
  /* Without a matching scroll-padding, snapping aligns the first shot to the
     container edge and scrolls straight past the gutter, so it lands flush
     against the viewport instead of the page's content column. */
  scroll-padding-left: calc((100vw - 1120px) / 2 + 24px);
  scrollbar-width: none;
}
.shot-rail::-webkit-scrollbar { display: none; }
.shot-rail:focus-visible { outline: 2px solid var(--brand-2); outline-offset: -2px; }
@media (max-width: 1168px) {
  .shot-rail { padding-left: 24px; padding-right: 24px; scroll-padding-left: 24px; }
}

.shot { margin: 0; flex: none; scroll-snap-align: start; width: min(78vw, 620px); }
.shot__open {
  display: block; width: 100%; padding: 0; cursor: zoom-in;
  /* Every card the same shape. The images behind them are 900 wide but anywhere
     from 484 to 964 tall, so sizing each card by its own aspect gave a shelf of
     cards between 333 and 664 pixels tall — ragged, and worse next to the
     screenshot, which has a different shape again. The ground here is the same
     colour as the drawings' own canvas, so the letterboxing does not show. */
  /* 900x700 is the shape of a typical design, so most fill the card exactly
     and only the tallest few get any letterboxing at all. */
  aspect-ratio: 900 / 700;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: #f7f8fb;
  box-shadow: var(--shadow);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.shot__open:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 20px 40px -20px rgba(15,23,42,.4); }
.shot img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(15, 23, 42, 0.92);
  display: flex; align-items: center; justify-content: center;
  padding: 24px 72px;
}
.lightbox[hidden] { display: none; }
.lightbox__img { max-width: 100%; max-height: 88vh; border-radius: 12px; background: #fff; }
.lightbox__close {
  position: absolute; top: 18px; right: 22px;
  background: transparent; border: 0; cursor: pointer;
  color: rgba(255,255,255,0.75); font-size: 2rem; line-height: 1; padding: 6px 12px; border-radius: 10px;
}
.lightbox__close:hover { color: #fff; background: rgba(255,255,255,0.12); }
.lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.1); color: #fff;
  font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.lightbox__nav:hover { background: rgba(255,255,255,0.22); }
.lightbox__nav--prev { left: 16px; }
.lightbox__nav--next { right: 16px; }
.lightbox__count { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; color: rgba(255,255,255,0.7); font-size: 0.86rem; margin: 0; }
@media (max-width: 640px) {
  .lightbox { padding: 16px; }
  .lightbox__nav { width: 40px; height: 40px; }
  .shots__nav { display: none; }
  .shot { width: 86vw; }
}

/* ---------- Contact-for-pricing tiers ---------- */
.contact-plans { padding: 56px 24px 8px; }
.contact-plans h2 { margin: 0 0 6px; }
.contact-plans__lede { color: var(--ink-soft); margin: 0 0 24px; max-width: 640px; }
.contact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.contact-card {
  display: flex;
  flex-direction: column;
  background: linear-gradient(155deg, #0f172a 0%, #1e1b4b 100%);
  border: 1px solid #312e81;
  border-radius: var(--radius);
  padding: 28px 26px;
  color: #e2e8f0;
}
.contact-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 8px; }
.contact-card__head h3 { margin: 0; font-size: 1.4rem; color: #fff; }
.contact-card__price { font-size: 1rem; font-weight: 700; color: #a5b4fc; white-space: nowrap; }
.contact-card__lede { color: #cbd5e1; margin: 0 0 20px; font-size: 0.97rem; }
.contact-card__list { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 11px; }
.contact-card__list li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.92rem; color: #cbd5e1; }
.contact-card__list svg { color: #34d399; flex: none; margin-top: 3px; }
.contact-card__best { font-size: 0.9rem; color: #cbd5e1; margin: auto 0 20px; padding-top: 16px; border-top: 1px solid #312e81; }
.contact-card__cta { width: 100%; justify-content: center; }
.contact-card__note { font-size: 0.82rem; color: #94a3b8; margin: 12px 0 0; text-align: center; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }

/* ---------- Techlosoft Suite ---------- */
.suite-strip { padding: 64px 0; background: linear-gradient(150deg, #0f172a 0%, #1e1b4b 60%, #312e81 100%); color: #e2e8f0; }
.suite-strip__inner { display: flex; align-items: center; gap: 48px; justify-content: space-between; }
.suite-strip__text { max-width: 620px; }
.suite-strip .eyebrow { color: #a5b4fc; }
.suite-strip h2 { color: #fff; margin: 6px 0 12px; font-size: 2rem; }
.suite-strip p { color: #cbd5e1; margin: 0 0 24px; }
.suite-strip__art { flex: none; }
/* Four tiles becoming one: the Suite's whole job in a shape. */
.suite-tile { display: grid; grid-template-columns: repeat(2, 58px); gap: 12px; transform: rotate(-8deg); }
.suite-tile span {
  width: 58px; height: 58px; border-radius: 16px;
  background: linear-gradient(140deg, rgba(255,255,255,0.22), rgba(255,255,255,0.06));
  border: 1px solid rgba(255,255,255,0.2);
}
.suite-tile span:nth-child(1) { background: linear-gradient(140deg, #6366f1, #4338ca); }
.suite-tile span:nth-child(4) { background: linear-gradient(140deg, #14b8a6, #0f766e); }

.suite-note { padding: 40px 24px 0; }
.suite-note__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px 28px; box-shadow: var(--shadow);
}
.suite-note__inner h2 { margin: 0 0 6px; font-size: 1.3rem; }
.suite-note__inner p { margin: 0; color: var(--ink-soft); max-width: 620px; font-size: 0.96rem; }
.suite-note__inner .btn { flex: none; }
@media (max-width: 860px) {
  .suite-strip__inner { flex-direction: column; align-items: flex-start; gap: 32px; }
  .suite-note__inner { flex-direction: column; align-items: flex-start; }
}
.get-card__both {
  margin: 16px 0 0;
  padding: 12px 16px;
  border-radius: 10px;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  color: #312e81;
  max-width: 660px;
}
.shot figcaption { margin-top: 9px; color: var(--muted); font-size: 0.82rem; font-weight: 600; }
.shot__badge {
  display: inline-block;
  background: #0f766e;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  margin-right: 6px;
}
/* The design badge and the screenshot badge must not be mistaken for each other:
   one labels a drawing, the other a photograph. Different colour, same shape. */
.shot__badge--design { background: #eef2ff; color: #3730a3; }
.shot--real .shot__open { border-color: #99f6e4; }