/* Demo Maker Pro, site styles
   Tokens deliberately mirror the desktop app (frontend/index.html) so the
   marketing site and the product read as one thing rather than two. */

:root {
  --bg: #ffffff;
  --bg-soft: #f7f8fa;
  --bg-deep: #0f1216;
  --panel: #ffffff;
  --border: #e2e5e9;
  --border-strong: #d5d9de;
  --text: #171a1f;
  --text-2: #4b5563;
  --muted: #66707c;

  --accent: #f97316;
  --accent-hover: #ea580c;
  --accent-ink: #c2410c;
  --accent-tint: #fff7ed;

  --blue: #2563eb;
  --success: #16a34a;

  --radius: 10px;
  --radius-lg: 16px;
  --maxw: 1180px;   /* matches --wrap on the redesigned pages */
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }

.wrap { width: min(var(--maxw), calc(100% - 48px)); margin-inline: auto; }
.narrow { max-width: 760px; }

/* ---------- type ---------- */

h1, h2, h3 { letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 16px; }
h1 { font-size: clamp(38px, 5.2vw, 60px); font-weight: 700; }
h2 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 700; }
h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0 0 18px; color: var(--text-2); }
.lead { font-size: clamp(17px, 1.6vw, 20px); color: var(--text-2); }

.eyebrow {
  display: inline-block; font-size: 12.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent-ink); background: var(--accent-tint);
  padding: 6px 12px; border-radius: 999px; margin-bottom: 20px;
}

/* ---------- header ---------- */

header.site {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
}
.nav { display: flex; align-items: center; gap: 28px; height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.brand-mark {
  width: 30px; height: 30px; border-radius: 8px; background: var(--accent);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
/* 22px and a 30px mark, matching the redesigned pages' .brand. */
.brand-word { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.brand-word .demo { color: var(--text); }
.brand-word .pro { color: var(--accent); }
/* align-items:center is load-bearing: the Use cases dropdown is a
   <details>, which stretches to full height by default and drops its
   summary out of line with the plain links beside it. */
/* gap/size/colour matched to the redesigned pages so the header does not
   change appearance as you move between old and new templates. */
.nav-links { display: flex; gap: 30px; margin-left: auto; align-items: center; }
.nav-links a { text-decoration: none; color: #111827; font-size: 15px; font-weight: 500; }
.nav-links a:hover { color: var(--text); }
/* Dropdown built on <details>, so it opens on click everywhere including
   touch, needs no JavaScript, and keeps every link in the DOM for
   crawlers. A hover-only menu is fiddly on mobile and easy to get wrong. */
.nav-drop { position: relative; display: flex; align-items: center; }
.nav-drop > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  color: #111827; font-size: 15px; font-weight: 500; line-height: 1;
}
.nav-drop > summary::-webkit-details-marker { display: none; }
.nav-drop > summary:hover { color: var(--text); }
.nav-drop > summary::after {
  content: ''; width: 6px; height: 6px; margin-top: -3px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg); transition: transform .15s ease;
}
.nav-drop[open] > summary::after { transform: rotate(-135deg); margin-top: 2px; }
.nav-drop-menu {
  position: absolute; top: calc(100% + 14px); left: -16px; z-index: 70;
  min-width: 268px; background: #fff; border: 1px solid var(--border);
  border-radius: 14px; padding: 8px;
  box-shadow: 0 4px 10px rgba(16,24,40,.06), 0 20px 44px rgba(16,24,40,.14);
}
.nav-drop-menu a {
  display: block; padding: 11px 12px; border-radius: 9px; text-decoration: none;
  color: var(--text); font-size: 14.5px; font-weight: 600;
}
.nav-drop-menu a span { display: block; font-size: 13px; font-weight: 400; color: var(--muted); margin-top: 2px; line-height: 1.45; }
.nav-drop-menu a:hover { background: var(--bg-soft); }

/* flex:0, not 1. The redesigned pages right-align the nav with
   .nav-links{margin-left:auto}; this file now does the same. A
   flex:1 spacer would swallow the free space FIRST (flex-grow is
   resolved before auto margins), leaving the auto margin nothing to
   work with and the links stranded on the left. Kept as an element
   so the markup does not have to change. */
.nav-spacer { flex: 0 0 0; }
.nav-cta { display: flex; gap: 10px; align-items: center; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px; border-radius: var(--radius);
  font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer;
  border: 1px solid transparent; transition: background .15s ease, border-color .15s ease, transform .06s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost { background: #fff; color: var(--text); border-color: var(--border-strong); }
.btn-ghost:hover { background: var(--bg-soft); }
.btn-sm { height: 38px; padding: 0 16px; font-size: 14px; }
.btn-lg { height: 52px; padding: 0 28px; font-size: 16px; }

/* ---------- sections ---------- */

section { padding: 84px 0; }
section.tight { padding: 56px 0; }
.section-head { max-width: 680px; margin-bottom: 48px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.soft { background: var(--bg-soft); }

/* ---------- hero ---------- */

/* Soft warm glow behind the hero so the top of the page has some depth
   instead of being a white rectangle with text on it. */
.hero { padding: 88px 0 56px; position: relative; }
.hero::before {
  content: ''; position: absolute; inset: -10% -20% auto -20%; height: 620px;
  background: radial-gradient(680px 340px at 22% 12%, rgba(249,115,22,.10), transparent 62%),
              radial-gradient(560px 300px at 78% 0%, rgba(37,99,235,.07), transparent 60%);
  pointer-events: none; z-index: 0;
}
.hero > .wrap { position: relative; z-index: 1; }
.hero h1 span.hl { color: var(--accent); }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.hero-note { font-size: 13.5px; color: var(--muted); margin-top: 16px; }

/* ---------- hero audience shortcuts ---------- */

.hero-audiences {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 30px;
}

.hero-audience {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  background: rgba(255,255,255,.82);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.hero-audience strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}

.hero-audience span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.hero-audience:hover {
  border-color: #fdba74;
  transform: translateY(-2px);
  box-shadow:
    0 2px 4px rgba(16,24,40,.04),
    0 12px 28px rgba(16,24,40,.08);
}


/* The demo frame. Heavier elevation than a normal surface on purpose, 
   the embedded demo is the single most persuasive thing on the page, so
   it should sit above everything rather than blend into the section. */
.demo-frame {
  margin-top: 56px; border-radius: var(--radius-lg); overflow: hidden;
  background: #fff; border: 1px solid var(--border);
  box-shadow:
    0 1px 3px rgba(15,23,42,.10),
    0 10px 24px rgba(15,23,42,.10),
    0 30px 64px rgba(15,23,42,.16),
    0 70px 150px rgba(15,23,42,.14);
}
.demo-chrome {
  height: 38px; background: #f1f2f5; border-bottom: 1px solid #e1e4ea;
  display: flex; align-items: center; gap: 8px; padding: 0 14px;
}
.dot { width: 10px; height: 10px; border-radius: 50%; }
.demo-embed { position: relative; width: 100%; aspect-ratio: 16 / 10; background: #fff; }
.demo-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.demo-placeholder {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; text-align: center;
  color: var(--muted); background: repeating-linear-gradient(45deg, #fafbfc, #fafbfc 12px, #f4f6f8 12px, #f4f6f8 24px);
  padding: 24px;
}


/* ---------- local by default ---------- */

/* Warm elevated trust strip so it pops cleanly against both the white hero
   and the light-gray section that follows. */
.local-default {
  padding: 0 0 68px;
  background: var(--bg);
}

.local-default-card {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px 28px;

  background:
    radial-gradient(520px 180px at 0% 50%, rgba(249,115,22,.12), transparent 68%),
    linear-gradient(135deg, #fffaf5 0%, #ffffff 48%, #fff7ed 100%);

  border: 1px solid #fdba74;
  border-radius: 18px;

  box-shadow:
    0 2px 4px rgba(249,115,22,.05),
    0 14px 32px rgba(249,115,22,.10),
    0 28px 70px rgba(15,23,42,.08);
}

.local-default-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent) 0%, #fdba74 45%, rgba(253,186,116,.2) 100%);
}

.local-default-icon {
  position: relative;
  width: 50px;
  height: 50px;
  flex: 0 0 50px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #fff;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
  border-radius: 14px;

  box-shadow: 0 8px 18px rgba(249,115,22,.25);
}

.local-default-copy {
  position: relative;
  flex: 1;
  min-width: 0;
}

.local-default-copy h2 {
  margin: 0 0 5px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}

.local-default-copy p {
  margin: 0;
  max-width: 720px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-2);
}

.local-default-copy strong {
  color: var(--accent-ink);
  font-weight: 700;
}

.local-default-badge {
  position: relative;
  flex: 0 0 auto;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 9px 13px;

  background: rgba(255,255,255,.88);
  border: 1px solid rgba(22,163,74,.22);
  border-radius: 999px;

  box-shadow: 0 4px 14px rgba(15,23,42,.06);

  font-size: 12.5px;
  font-weight: 600;
  color: #3f4a57;
  white-space: nowrap;
}

.local-default-badge .status-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;

  background: var(--success);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(22,163,74,.10);
}

@media (max-width: 760px) {
  .local-default {
    padding-bottom: 50px;
  }

  .local-default-card {
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 22px;
  }

  .local-default-badge {
    margin-left: 70px;
  }
}

@media (max-width: 520px) {
  .local-default-badge {
    margin-left: 0;
    width: 100%;
    justify-content: center;
  }
}

/* ---------- grids ---------- */

.grid { display: grid; gap: 24px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 18px; padding: 30px 28px;
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
  transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s ease, border-color .18s ease;
}
/* Cards lift on hover even when they aren't links. It reads as a live,
   modern surface rather than a printed panel, and costs nothing. */
.card:hover {
  transform: translateY(-3px); border-color: #cfd5dd;
  box-shadow: 0 2px 4px rgba(16,24,40,.05), 0 16px 36px rgba(16,24,40,.10);
}
.card h3 { margin-bottom: 10px; font-size: 18px; line-height: 1.3; }
.card p { margin: 0; font-size: 15px; line-height: 1.6; }
/* Gradient chip with a soft coloured shadow instead of a flat tint
   square. Small change, and it's most of what made the old cards look
   like a 2012 bootstrap page. */
.card-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: linear-gradient(135deg, #ffedd5 0%, #fed7aa 100%);
  color: var(--accent-ink); display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px; box-shadow: 0 4px 12px rgba(249,115,22,.18);
}

/* ---------- pain / contrast ---------- */

/* The .good column is raised 6px and carries a 50px-blur glow, so the row
   needs bottom room or the glow lands on the paragraph below it. */
.contrast { display: grid; gap: 24px; grid-template-columns: 1fr 1fr;
  align-items: start; margin: 8px 0 48px; }
.contrast-col {
  position: relative; border-radius: 20px; padding: 32px; border: 1px solid var(--border);
  overflow: hidden;
}
/* The "before" column is deliberately flat and quiet: no lift, no
   shadow, muted text. It should feel like the status quo, not like an
   equally attractive option. */
.contrast-col.bad { background: linear-gradient(180deg,#fbfcfd 0%,#f3f5f7 100%); }
.contrast-col.bad li { color: #6b7480; }

/* The "after" column is raised, warmer, and carries an accent bar along
   the top edge so the eye lands there first. */
.contrast-col.good {
  background: linear-gradient(180deg,#fffaf5 0%,#fff0e0 100%);
  border-color: #fdba74;
  box-shadow: 0 2px 4px rgba(249,115,22,.06), 0 22px 50px rgba(249,115,22,.16);
  transform: translateY(-6px);
}
.contrast-col.good::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--accent) 0%, #fdba74 100%);
}

/* Headings become a labelled row with an icon badge and a divider, so
   each column announces what it is instead of being a bare sentence. */
.contrast-col h3 {
  display: flex; align-items: center; gap: 12px;
  font-size: 17px; margin: 0 0 8px; padding-bottom: 20px;
  border-bottom: 1px solid rgba(15,23,42,.08);
}
.contrast-col h3::before {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
}
/* Soft red rather than solid: a filled red block next to the orange
   accent on the other column reads as noisy, and this still says "this
   is the problem" clearly enough. */
.contrast-col.bad h3::before { content: '✕'; background: #fee2e2; color: #dc2626; }
.contrast-col.good h3::before {
  content: '✓'; background: var(--accent); color: #fff;
  box-shadow: 0 3px 8px rgba(249,115,22,.35);
}
.contrast-col.good h3 { border-bottom-color: rgba(249,115,22,.22); }

.tick-list { list-style: none; margin: 0; padding: 0; }
.tick-list li { display: flex; gap: 14px; align-items: flex-start; padding: 11px 0; font-size: 15px; color: var(--text-2); line-height: 1.55; }
.tick-list li strong { color: var(--text); font-weight: 600; }
/* Circular badges rather than bare ✓ and ✕ glyphs sitting in the text
   flow. This is the single biggest visual difference in the section. */
.tick {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; margin-top: 1px;
}
.contrast-col.bad .tick { background: #fee2e2; color: #dc2626; }
.contrast-col.good .tick { background: var(--accent); color: #fff; box-shadow: 0 2px 6px rgba(249,115,22,.35); }
/* Used outside the contrast columns, e.g. on the trial page. */
.tick-list .tick:not(.contrast-col .tick) { background: #dcfce7; color: var(--success); }

/* ---------- steps ---------- */

/* Steps are cards, with the number badge straddling the top edge so it
   reads as a deliberate treatment rather than the same card used
   everywhere else. Borderless numbered steps are a fine pattern in
   isolation, but next to card-heavy sections they look unstyled.
   margin-top on the row leaves room for the badge to overhang. */
/* THE 1-2-3 ROW BREAKS OUT OF A NARROW TEXT COLUMN.
   .narrow caps its children at 760px, which is right for prose and wrong for
   three cards side by side: 760/3 leaves each card about 230px of usable
   width, so the copy stacks into a tall thin ribbon. Centring a full-width
   grid inside the narrow parent gives each card roughly 330px and takes about
   a third off the row's height without cutting a word. margin-left:50% plus a
   -50% translate is the trick, it does not need to know the parent's width. */
.narrow > .steps {
  width: min(var(--maxw), calc(100vw - 48px));
  margin-left: 50%; transform: translateX(-50%);
  /* The transform does not affect flow, so following prose would otherwise
     butt straight up against the cards. */
  margin-bottom: 30px;
}

/* WIDER AND SHORTER. These were 28px-gapped thirds with 28px side padding,
   which left a narrow text column inside each card and pushed the copy down
   into a tall thin block. Tightening the gap and the horizontal padding gives
   each line more characters, so the same words occupy fewer lines and the row
   loses roughly a third of its height without anything being cut. */
.steps {
  counter-reset: step; display: grid; gap: 18px;
  grid-template-columns: repeat(3, 1fr); margin-top: 34px;
}
.step {
  position: relative; padding: 38px 22px 24px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 18px;
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
  transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s ease, border-color .18s ease;
}
.step:hover {
  transform: translateY(-3px); border-color: #cfd5dd;
  box-shadow: 0 2px 4px rgba(16,24,40,.05), 0 16px 36px rgba(16,24,40,.10);
}
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: -21px; left: 26px;
  width: 44px; height: 44px; border-radius: 14px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 17px;
  box-shadow: 0 6px 16px rgba(249,115,22,.32);
  border: 3px solid var(--panel);
}
/* On the tinted sections the badge's ring has to match that background
   or it shows as a white halo. */
.soft .step::before { border-color: var(--bg-soft); }
.step h3 { font-size: 18px; margin-bottom: 10px; }
.step p { font-size: 15px; line-height: 1.6; margin: 0; }

/* ---------- pricing ---------- */

/* Tier sizing lives in pricing.html's own inline <style>, which is the only
   page using .tiers and which overrides this file. */
.tiers { display: grid; gap: 24px; grid-template-columns: repeat(3, 1fr); align-items: start; }
.tier {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 32px 28px; background: #fff; position: relative;
}
.tier.featured { border-color: var(--accent); box-shadow: 0 20px 50px rgba(249,115,22,.14); }
.tier-badge {
  position: absolute; top: -13px; left: 28px;
  background: var(--accent); color: #fff; font-size: 11.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px;
}
.tier-name { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 6px; }
.tier-price { font-size: 44px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.tier-price span { font-size: 15px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.tier-desc { font-size: 14.5px; color: var(--text-2); margin: 14px 0 22px; min-height: 44px; }
.tier .btn { width: 100%; }
.tier-features { list-style: none; margin: 24px 0 0; padding: 24px 0 0; border-top: 1px solid var(--border); }
.tier-features li { display: flex; gap: 11px; align-items: flex-start; padding: 7px 0; font-size: 14.5px; color: var(--text-2); }

.billing-toggle { display: inline-flex; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 999px; padding: 4px; gap: 4px; margin-bottom: 40px; }
.billing-toggle button {
  border: 0; background: none; padding: 8px 18px; border-radius: 999px;
  font-family: inherit; font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer;
}
.billing-toggle button.active { background: #fff; color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.08); }

/* ---------- faq ---------- */

.faq { border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); padding: 20px 0; }
.faq summary { cursor: pointer; font-weight: 600; font-size: 16.5px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--accent); font-size: 22px; line-height: 1; font-weight: 400; }
.faq details[open] summary::after { content: '−'; }
.faq details p { margin: 14px 0 0; font-size: 15px; }

/* ---------- forms ---------- */

.form-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 36px; box-shadow: 0 20px 50px rgba(15,23,42,.07); }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 7px; }
.field input, .field select {
  width: 100%; height: 46px; padding: 0 14px; font-family: inherit; font-size: 15px;
  border: 1px solid var(--border-strong); border-radius: var(--radius); background: #fff; color: var(--text);
}
.field input:focus, .field select:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
.field .hint { font-size: 13px; color: var(--muted); margin-top: 7px; }
.form-note { font-size: 13.5px; color: var(--muted); margin-top: 18px; line-height: 1.6; }

/* ---------- docs ---------- */

.doc-layout { display: grid; grid-template-columns: 240px 1fr; gap: 56px; align-items: start; }
.doc-nav { position: sticky; top: 92px; }
.doc-nav h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 12px; }
.doc-nav a { display: block; padding: 7px 0; font-size: 14.5px; color: var(--text-2); text-decoration: none; }
.doc-nav a:hover { color: var(--accent-ink); }
.doc-body h2 { margin-top: 8px; scroll-margin-top: 100px; }
.doc-body h3 { margin-top: 34px; scroll-margin-top: 100px; }
.doc-body ol, .doc-body ul { color: var(--text-2); padding-left: 22px; }
.doc-body li { margin-bottom: 9px; }
.callout {
  border-left: 3px solid var(--accent); background: var(--accent-tint);
  padding: 16px 20px; border-radius: 0 var(--radius) var(--radius) 0; margin: 24px 0;
}
.callout p { margin: 0; color: var(--accent-ink); font-size: 14.5px; }
code { background: var(--bg-soft); border: 1px solid var(--border); padding: 2px 6px; border-radius: 5px; font-size: 13.5px; }

/* ---------- legal ---------- */

.legal h2 { font-size: 24px; margin-top: 40px; scroll-margin-top: 100px; }
.legal p, .legal li { font-size: 15.5px; }
.legal ul { color: var(--text-2); padding-left: 22px; }

/* ---------- cta band ---------- */

/* A flat dark rectangle is the most dated element on any 2020s landing
   page. Gradient plus a warm glow bleeding in from the corner. */
.cta-band {
  position: relative; overflow: hidden;
  background:
    radial-gradient(900px 400px at 85% -10%, rgba(249,115,22,.30), transparent 60%),
    linear-gradient(160deg, #171c22 0%, #0f1216 100%);
  color: #fff; border-radius: 24px; padding: 72px 48px; text-align: center;
  box-shadow: 0 30px 70px rgba(15,18,22,.28);
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; }
.cta-band p { color: #a9b1bd; max-width: 560px; margin-left: auto; margin-right: auto; }
.cta-band .btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.28); }
.cta-band .btn-ghost:hover { background: rgba(255,255,255,.08); }

/* ---------- footer ---------- */

footer.site { border-top: 1px solid var(--border); padding: 48px 0 40px; margin-top: 20px; }
.foot { display: flex; gap: 40px; flex-wrap: wrap; align-items: flex-start; }
.foot-brand { flex: 1 1 260px; }
.foot-brand p { font-size: 14px; margin-top: 14px; max-width: 300px; }
.foot-col h4 { font-size: 13px; font-weight: 700; margin: 0 0 12px; }
.foot-col a { display: block; font-size: 14px; color: var(--text-2); text-decoration: none; padding: 5px 0; }
.foot-col a:hover { color: var(--accent-ink); }
/* Every comparison page is linked here and nowhere else in the chrome, the
   Compare tab was removed from the top nav, so this column carries eleven
   links. Two CSS columns stop it towering over the other four. */
.foot-col-compare { flex: 1 1 320px; }
.foot-col-compare > a { columns: unset; }
.foot-col-compare { column-count: 2; column-gap: 26px; }
.foot-col-compare h4 { column-span: all; }
.foot-bottom { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--border); font-size: 13.5px; color: var(--muted); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ---------- examples gallery ---------- */

/* Segmented control rather than a row of outlined buttons. Same pattern
   as the billing toggle on the pricing page, so the site has one way of
   expressing "pick one of these". */
.filter-bar {
  display: inline-flex; flex-wrap: wrap; gap: 4px; justify-content: center;
  background: var(--bg-soft); border: 1px solid var(--border);
  padding: 5px; border-radius: 999px; margin: 0 auto 52px;
}
.filter-wrap { display: flex; justify-content: center; }
.filter-pill {
  border: 0; background: none; color: var(--muted);
  height: 38px; padding: 0 20px; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 600;
  transition: color .13s ease, background .13s ease, box-shadow .13s ease;
}
.filter-pill:hover { color: var(--text); }
.filter-pill.active {
  background: #fff; color: var(--text);
  box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 3px 8px rgba(16,24,40,.08);
}

.example-grid { display: grid; gap: 28px; grid-template-columns: repeat(3, 1fr); }
.example-card {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  border: 1px solid var(--border); border-radius: 18px; overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
  transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s ease, border-color .18s ease;
}
.example-card:hover {
  transform: translateY(-4px); border-color: #cfd5dd;
  box-shadow: 0 2px 4px rgba(16,24,40,.05), 0 18px 40px rgba(16,24,40,.13);
}

/* The thumbnail area doubles as artwork until a real screenshot exists.
   A tinted gradient with a small browser bar reads as deliberate design;
   the diagonal-stripe placeholder it replaced read as a broken image. */
.example-thumb {
  aspect-ratio: 16 / 10; position: relative; overflow: hidden;
  border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column;
}
.example-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.thumb-bar {
  height: 28px; flex-shrink: 0; display: flex; align-items: center; gap: 5px; padding: 0 11px;
  background: rgba(255,255,255,.72); backdrop-filter: blur(6px); border-bottom: 1px solid rgba(15,23,42,.06);
}
.thumb-bar i { width: 7px; height: 7px; border-radius: 50%; background: #cfd5dd; display: block; }
.thumb-face {
  flex: 1; display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: rgba(23,26,31,.55);
  text-align: center; padding: 16px;
}
.example-card[data-cat="cloud"]   .example-thumb { background: linear-gradient(135deg,#eef4ff 0%,#e3ecff 55%,#dbe6ff 100%); }
.example-card[data-cat="network"] .example-thumb { background: linear-gradient(135deg,#fff4ec 0%,#ffe9d8 55%,#ffe0c7 100%); }
.example-card[data-cat="itsm"]    .example-thumb { background: linear-gradient(135deg,#eefaf3 0%,#dcf3e7 55%,#cfeeddff 100%); }
.example-card[data-cat="security"].example-thumb { background: linear-gradient(135deg,#f6f0ff 0%,#ebe0ff 55%,#e2d4ff 100%); }

.example-body { padding: 22px 24px 26px; flex: 1; display: flex; flex-direction: column; }
.example-tag {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 10px;
}
.example-body h3 { margin-bottom: 9px; font-size: 17.5px; line-height: 1.3; }
.example-body p { font-size: 14.5px; margin: 0 0 20px; line-height: 1.55; }
.example-meta {
  margin-top: auto; font-size: 14px; font-weight: 600; color: var(--accent-ink);
  display: inline-flex; align-items: center; gap: 7px;
}
.example-meta .arrow { transition: transform .18s cubic-bezier(.2,.7,.3,1); }
.example-card:hover .example-meta .arrow { transform: translateX(4px); }

.example-card.is-hidden { display: none; }

/* ---------- single example page ---------- */

.example-hero-embed {
  border-radius: var(--radius-lg); overflow: hidden; background: #fff;
  border: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(15,23,42,.10), 0 10px 24px rgba(15,23,42,.10), 0 30px 64px rgba(15,23,42,.16);
}
.example-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 32px 0; }
.fact { border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; }
.fact strong { display: block; font-size: 22px; letter-spacing: -0.02em; margin-bottom: 2px; }
.fact span { font-size: 13.5px; color: var(--muted); }

.disclaimer { font-size: 13px; color: var(--muted); line-height: 1.65; border-top: 1px solid var(--border); padding-top: 24px; margin-top: 48px; }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .hero-audiences { grid-template-columns: 1fr; }
  .g3, .g4, .steps, .tiers, .contrast, .example-grid, .example-facts { grid-template-columns: 1fr; }
  .foot-col-compare { column-count: 1; }
  .g2 { grid-template-columns: 1fr; }
  .doc-layout { grid-template-columns: 1fr; gap: 32px; }
  .doc-nav { position: static; }
  .nav-links { display: none; }
  .nav-drop-menu { position: static; box-shadow: none; border: 0; padding: 0; min-width: 0; }
  section { padding: 64px 0; }
  .cta-band { padding: 48px 24px; }
}

/* ---------- SEO comparison / editorial pages ---------- */
.article-hero { padding-bottom: 34px; }
.article-wrap { max-width: 900px; margin: 0 auto; padding: 0 24px; }
.article-body { padding-bottom: 72px; }
.article-body h2 { font-size: clamp(25px, 3vw, 34px); margin-top: 48px; }
.article-body h3 { font-size: 21px; margin-top: 34px; }
.article-body p, .article-body li { font-size: 16px; line-height: 1.72; }
.article-body ul, .article-body ol { color: var(--text-2); padding-left: 24px; }
.article-body li { margin-bottom: 9px; }
.article-body a { color: var(--accent-ink); font-weight: 600; }
.article-body strong { color: var(--text); }
.comparison-table-wrap {
  width: 100%; overflow-x: auto; margin: 28px 0 34px;
  border: 1px solid var(--border); border-radius: 14px; background: #fff;
  /* THE SCROLL CONTAINER CARRIES THE CARD, THE TABLE STAYS FLAT INSIDE IT.
     Putting the shadow on the table instead clips it at the scroll edge the
     moment the table is wider than the viewport, which is exactly when the
     card matters most. */
  box-shadow: 0 1px 2px rgba(20,24,35,.04), 0 12px 28px rgba(20,24,35,.07);
}
/* TABLE STYLING IS SCOPED TO THE WRAPPER, NOT TO .article-body.
   It used to be .article-body only, which meant every table on a page that
   is not an article, the capability pages, the use-case pages, /about and
   the resources explainers, rendered completely unstyled: centred browser
   default headers, no padding, no row rules. Nine pages shipped that way.
   .comparison-table-wrap is the one thing every table on the site is
   wrapped in, so scoping here covers both kinds of page from one rule. */
.article-body table, .comparison-table-wrap table {
  width: 100%; min-width: 680px; border-collapse: collapse; background: #fff;
}
.article-body th, .article-body td,
.comparison-table-wrap th, .comparison-table-wrap td {
  padding: 14px 18px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--border); font-size: 14.5px; line-height: 1.55;
}
/* HEADERS ARE QUIET LABELS, NOT THE LOUDEST THING IN THE TABLE.
   A bold 14px header on a tinted band competes with the data underneath it
   and makes a comparison table read as a spreadsheet. Small uppercase with
   open letter-spacing and muted ink reads as a column label instead: the eye
   registers it once, then goes to the answers, which is the whole job of
   these pages. The 2px rule under the header row replaces the tint that used
   to separate it. */
.article-body th, .comparison-table-wrap th {
  background: #fff; color: var(--muted); font-weight: 600;
  font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em;
  white-space: nowrap; border-bottom: 2px solid var(--border-strong);
}
/* ONE TREATMENT, TWO AXES. The site has both table shapes: vendor-per-column
   matrices (every *-alternative page) and vendor-per-row tables (the
   capability pages). Demo Maker Pro must look IDENTICAL in both, or the same
   brand reads as two different levels of emphasis depending on which page you
   landed on. So both get the same three things:

     tinted ground   var(--accent-tint)
     accent ink      var(--accent-ink)
     weight 700
     a 3px accent bar at the leading edge of the band
                     (top of a column, left of a row)

   These were 700 and 600 respectively until 2026-09-09, which made the
   column noticeably heavier than the row. */
.article-body td.hl, .comparison-table-wrap td.hl,
.article-body tr.me td, .comparison-table-wrap tr.me td {
  background: var(--accent-tint); color: var(--accent-ink); font-weight: 700;
}
.article-body th.hl, .comparison-table-wrap th.hl {
  color: var(--accent-ink); background: var(--accent-tint);
  border-top: 3px solid var(--accent);
}
/* The band ends cleanly at the card edge on either axis. */
.comparison-table-wrap tbody tr:last-child td.hl { border-bottom: 0; }
/* The row's leading edge, matching the column's accent cap. Both are applied
   by _build/mark_dmp_rows.py, which reads each table's header to decide which
   axis Demo Maker Pro sits on. The bar also keeps the row findable when a wide
   table is scrolled sideways and the vendor name has gone off screen. */
.article-body tr.me td:first-child, .comparison-table-wrap tr.me td:first-child {
  box-shadow: inset 3px 0 0 var(--accent);
}
.comparison-table-wrap tbody tr.me:hover td { background: #ffefdd; }

/* Row hover makes a wide row trackable across a scrolling table. */
.comparison-table-wrap tbody tr:hover td { background: #fcfcfd; }
.comparison-table-wrap tbody tr:hover td.hl { background: #ffefdd; }
.article-body tr:last-child td, .comparison-table-wrap tr:last-child td { border-bottom: 0; }
/* The first column carries the long descriptive phrase in most of these
   tables ("Learn where a function lives and what order the steps go in").
   Auto layout starves it and wraps two words onto their own line, so give
   it room and let the comparison columns share what is left. */
.comparison-table-wrap th:first-child, .comparison-table-wrap td:first-child { width: 34%; }
.article-note { margin: 30px 0; padding: 22px 24px; border: 1px solid #fed7aa; background: var(--accent-tint); border-radius: 14px; }
.article-note h2, .article-note h3 { margin-top: 0; }
.article-note p:last-child { margin-bottom: 0; }
.article-cta { margin: 56px 0 0; padding: 38px; border-radius: 20px; background: var(--bg-deep); text-align: center; }
.article-cta h2 { color: #fff; margin: 0 0 10px; }
.article-cta p { color: #c9d0d8; max-width: 620px; margin: 0 auto 22px; }
.article-source { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--border); color: var(--muted); font-size: 13px !important; }
@media (max-width: 760px) {
  .article-wrap { padding: 0 18px; }
  .article-body h2 { margin-top: 38px; }
  .article-cta { padding: 30px 22px; }
}