/* stiqnote.com's content pages (built from web/content), in the home page's system: the same type
   scale, the pin-shaped label, 110px between sections, cards only where they lift something */

/* Page hero: the text beside a product shot, or one centred column */
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding-top: 22px; font-size: 14px; color: var(--muted); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.crumbs span[aria-hidden] { opacity: 0.6; }
.ph { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 64px; align-items: center; padding-block: 44px 110px; }
.ph__text { display: grid; justify-items: start; }
.ph h1 { font: 800 clamp(38px, 4.4vw, 58px)/1.03 var(--display); letter-spacing: -0.03em; color: var(--ink); margin: 22px 0 18px; text-wrap: balance; }
.ph .actions { margin-top: 6px; }
.ph--one { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 0; padding-block: 0 72px; background: radial-gradient(900px 380px at 50% -60px, #e9e8ff 0%, rgba(233, 232, 255, 0) 70%); }
.ph--one > .crumbs { justify-content: center; padding-bottom: 36px; }
.ph--one > .pill:first-child { margin-top: 64px; }
.ph--one h1 { max-width: 18ch; }
.ph--one .lead, .ph--one .ph__more { margin-inline: auto; }
.ph--one .meta { justify-content: center; }
.ph.ph--one { gap: 0; }
.ph--one .pricing__switches { justify-content: center; }
.lead { font-size: 19px; line-height: 1.55; color: var(--text); max-width: 36em; margin: 0 0 22px; text-wrap: pretty; }
.ph__more { color: var(--muted); font-size: 16px; max-width: 40em; margin: -6px 0 24px; }
.ph__more p { margin: 0 0 10px; }
.ph__more a, .lead a { color: var(--accent-text); }
.small { margin: 14px 0 0; font-size: 14px; color: var(--muted); }
.meta { display: flex; gap: 8px 18px; flex-wrap: wrap; align-items: center; font-size: 14px; color: var(--muted); }
.meta .upd { display: inline-flex; gap: 7px; align-items: center; font-weight: 600; color: var(--text); }
.meta .upd i { width: 7px; height: 7px; border-radius: 50%; background: #16a34a; }
.ph__art .shot--tall { width: min(100%, 360px); }
.ph__art--inset { padding-bottom: 56px; }
.ph__art--inset .inset { bottom: 22px; width: 46%; max-width: 300px; }
.ph__art .shot--tall + .inset { width: 42%; }
.ph__art--rec .inset { left: 50%; right: auto; transform: translateX(-50%); bottom: 18px; width: 62%; max-width: 280px; }

/* Sections */
.sec { padding-block: 0 110px; }
.sec h2 { font: 800 clamp(30px, 3.4vw, 44px)/1.1 var(--display); letter-spacing: -0.02em; color: var(--ink); margin: 0 0 12px; scroll-margin-top: 20px; text-wrap: balance; }
.sec h2 .chip, .benefit h2 .chip { vertical-align: 0.3em; margin-left: 4px; }
.sec__head { max-width: 680px; margin-bottom: 34px; }
.sec__head > p, .row__h > p { color: var(--text); font-size: 17px; margin: 0 0 10px; }
.sec__head a, .row__h a { color: var(--accent-text); }
.sec__after { margin-top: 22px; }
.row { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 20px 72px; align-items: start; }
.row__h h2 { font-size: clamp(28px, 3vw, 38px); line-height: 1.12; }
.row__b > .ticks:first-child { margin-top: 6px; }
.row__b .ticks + .prose { margin-top: 18px; }
.prose { color: var(--text); font-size: 17px; line-height: 1.7; max-width: 68ch; }
.prose > :first-child { margin-top: 0; }
.prose p, .prose ul, .prose ol { margin: 0 0 14px; }
.prose ul, .prose ol { padding-left: 20px; }
.prose li { margin-bottom: 6px; }
.prose h3 { font: 700 20px/1.3 var(--display); letter-spacing: -0.01em; color: var(--ink); margin: 26px 0 8px; }
.prose strong { color: var(--ink); }
.prose a, .card a:not(.btn), .benefit a, .faq a, .note a, .step a { color: var(--accent-text); }
.ticks { gap: 12px; font-size: 16.5px; }
.ticks li::before { top: 3px; }
.ticks--muted li::before { background-color: var(--line); }
.card { background: var(--card); box-shadow: inset 0 0 0 1px var(--line); border-radius: 20px; padding: 28px; }
.card h3 { font: 700 20px/1.25 var(--display); color: var(--ink); margin: 0 0 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.card p { color: var(--muted); font-size: 15px; margin: 0 0 10px; }
.card .ticks { margin: 0; }
.grid2, .grid3, .grid4 { display: grid; gap: 20px; }
.grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Short sections side by side under a rule, like the home page's "Why StiqNote" */
.benefits { gap: 40px 32px; }
.benefit { padding-top: 20px; border-top: 2px solid var(--ink); min-width: 0; }
.sec .benefit h2 { font: 700 21px/1.25 var(--display); letter-spacing: -0.015em; color: var(--ink); margin: 0 0 10px; }
.benefit p { color: var(--text); font-size: 16px; margin: 0 0 10px; }
.steps { gap: 20px; }
.steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.steps--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.step { border: 0; box-shadow: inset 0 0 0 1px var(--line); border-radius: 20px; padding: 26px; }
.step__n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50% 50% 50% 5px; background: var(--accent); color: #fff; font: 700 15px/1 var(--body); letter-spacing: 0; }
.step p { margin: 0 0 6px; }
.step p:first-child { margin-top: 16px; color: var(--text); }
.step code, .prose code, .card code, .benefit code, .faq code, .vs code, .note code { font: 0.88em/1.4 var(--mono); background: var(--paper); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; }
.prose kbd, .step kbd, .card kbd, .benefit kbd, .faq kbd, .note kbd, .art kbd, .vs kbd { font: 600 0.8em/1 var(--mono); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; padding: 2px 6px; background: var(--card); color: var(--ink); white-space: nowrap; }
.code { margin: 0 0 16px; background: var(--band); color: #e6e8ef; border-radius: 14px; padding: 16px 18px; overflow-x: auto; font: 13px/1.6 var(--mono); }
.code code { background: none; border: 0; padding: 0; font: inherit; color: inherit; }
.note { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; background: var(--accent-soft); color: var(--text); border-radius: 14px; padding: 14px 16px; margin: 0 0 16px; font-size: 15px; line-height: 1.55; }
.note > svg { width: 20px; height: 20px; color: var(--accent-text); margin-top: 1px; }
.note p { margin: 0; color: var(--text); }
.note b { color: var(--ink); }
.note--tip { background: rgba(31, 138, 76, 0.1); }
.note--tip > svg { color: var(--good); }
.marker { display: inline-block; margin: 2px 0; border: 2px dashed var(--accent); background: var(--accent-soft); color: var(--accent-text); border-radius: 10px; padding: 2px 8px; font: 600 13.5px/1.45 var(--body); }
p > .marker:only-child, li > .marker:only-child { padding: 10px 14px; }
p > .marker:only-child { display: block; margin: 10px 0; }
.planbox { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; background: var(--accent-soft); border-radius: 20px; padding: 24px 28px; }
.planbox p { color: var(--text); font-size: 16px; max-width: 48em; margin: 0; }
.planbox b { color: var(--ink); }
.rel { display: grid; gap: 8px; text-decoration: none; align-content: start; }
.rel:hover, .tools .tool:hover { box-shadow: inset 0 0 0 1px #c9c8d8, 0 24px 40px -30px rgba(47, 49, 143, 0.45); }
.rel b { font: 700 19px/1.25 var(--display); letter-spacing: -0.01em; color: var(--ink); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rel > span { font-size: 15px; color: var(--muted); }
.rel em { font-style: normal; font-size: 15px; font-weight: 600; color: var(--accent); margin-top: 6px; }

/* The closing call: the home page's indigo band, as a panel inside the page */
.band { display: grid; justify-items: center; gap: 14px; text-align: center; margin-bottom: 110px; padding: 72px 40px; border-radius: 26px; background: var(--accent) radial-gradient(700px 300px at 20% 0%, rgba(255, 255, 255, 0.18), transparent 70%); color: #e6e7ff; }
.band h2 { font: 800 clamp(30px, 4vw, 48px)/1.08 var(--display); letter-spacing: -0.02em; margin: 0; color: #fff; max-width: 20ch; text-wrap: balance; }
.band p { max-width: 40em; margin: 0 0 10px; font-size: 18px; }
.band .actions { justify-content: center; }
.band .btn--ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45); }
.band .btn--ghost:hover { box-shadow: inset 0 0 0 1px #fff; }
.band--quiet { background: var(--accent-soft); color: var(--text); padding-block: 56px; }
.band--quiet h2 { color: var(--ink); }

/* Questions: two columns like the home page, one when there are only a few */
.faq { display: block; columns: 2; column-gap: 48px; }
.faq--one { columns: 1; max-width: 760px; }
.faq details { break-inside: avoid; border-top: 1px solid var(--line); padding: 18px 0; }
.faq summary { font: 700 18px/1.3 var(--display); letter-spacing: -0.01em; gap: 20px; }
.faq summary::after { color: var(--accent); font: 700 18px/1.3 var(--display); }
.faq p { color: var(--text); font-size: 16px; max-width: 64ch; }
.faq details p + p, .faq details ul { margin-top: 8px; }
.faq ul { color: var(--text); font-size: 16px; padding-left: 20px; margin: 8px 0 0; }

/* Tables: words, not icons, so they read the same everywhere */
.tscroll { overflow-x: auto; margin: 0 0 16px; }
.vs { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); border-radius: 20px; overflow: hidden; }
.vs th, .vs td { text-align: left; padding: 13px 18px; border-bottom: 1px solid var(--line); vertical-align: top; }
.vs tr:last-child td { border-bottom: 0; }
.vs thead th { font: 700 15px/1.2 var(--display); color: var(--ink); background: var(--paper); }
.vs td { color: var(--text); }
.vs td:first-child { color: var(--ink); font-weight: 600; }
.vs td a { color: var(--accent-text); }
.vs td.is-yes { color: var(--accent-text); font-weight: 600; }
.vs td.is-no { color: var(--muted); }

/* Comparison pages */
.sources { padding-bottom: 56px; }
.sources .sec__head { margin-bottom: 18px; }
.pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.pick .card h2 { font: 800 24px/1.2 var(--display); letter-spacing: -0.02em; color: var(--ink); margin: 0 0 14px; }
.pick .card--us { box-shadow: inset 0 0 0 2px var(--accent), 0 30px 60px -36px rgba(85, 88, 230, 0.55); }
.pick .ticks { gap: 12px; }
.src { display: grid; gap: 6px; font-size: 14px; color: var(--muted); margin: 0; padding-left: 20px; }
.src a { color: var(--accent-text); overflow-wrap: anywhere; }
.alts { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.alt { background: var(--card); box-shadow: inset 0 0 0 1px var(--line); border-radius: 20px; padding: 24px; display: grid; gap: 8px; align-content: start; text-decoration: none; }
.alt:hover { box-shadow: inset 0 0 0 1px #c9c8d8, 0 24px 40px -30px rgba(47, 49, 143, 0.45); }
.alt h3 { margin: 0; font: 700 19px/1.2 var(--display); color: var(--ink); }
.alt h3 span { color: var(--accent-text); }
.alt p { font-size: 14px; color: var(--muted); margin: 0; }
.alt__best { color: var(--text) !important; }
.alt__best b { color: var(--ink); }
.alt__go { font-size: 13.5px; font-weight: 600; color: var(--accent-text); }

/* Integrations hub */
.tools .tool { display: grid; gap: 8px; align-content: start; text-decoration: none; padding: 20px; }

.tools .tool b { font: 700 17px/1.25 var(--display); color: var(--ink); }
.tools .tool span:not(.ic) { font-size: 14px; color: var(--muted); }

/* Pricing */
.ph--price { padding-bottom: 44px; }
.plan__for { font-size: 14px; color: var(--muted); margin: 8px 0 0; }
.plan .ticks li.all { font-weight: 600; color: var(--ink); }
.plan__trial { margin: 8px 0 0; text-align: center; font-size: 12.5px; color: var(--muted); }
.plans + .fine p { margin: 0; }
.sec--plans { padding-bottom: 56px; }
.seats { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; align-items: center; padding: 34px; }
.seats h2 { font-size: clamp(26px, 3vw, 34px); margin: 0 0 12px; }
.seats ul { color: var(--text); font-size: 15px; padding-left: 20px; margin: 0 0 12px; }
.seats li { margin-bottom: 6px; }
.seats p { color: var(--muted); font-size: 15px; margin: 0; }
.seats strong { color: var(--ink); }
.calc { display: grid; gap: 10px; }
.calc[hidden] { display: none; }
.calc__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-weight: 600; color: var(--ink); }
.stepper { display: inline-flex; align-items: center; gap: 4px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 4px; }
.stepper button { width: 36px; height: 36px; border: 0; border-radius: 9px; background: var(--card); color: var(--ink); font: 600 18px/1 var(--body); cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); }
.stepper output { min-width: 110px; text-align: center; font: 600 15px/1 var(--body); color: var(--ink); font-variant-numeric: tabular-nums; }
.calc__row { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 12px; background: var(--paper); border: 1px solid var(--line); }
.calc__row b { font: 700 16px/1 var(--display); color: var(--ink); }
.calc__row span { font-size: 13.5px; color: var(--muted); }
.calc__row strong { font: 700 22px/1 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc__row strong small { font: 500 12.5px/1 var(--body); color: var(--muted); }
.calc__row.best { border-color: var(--accent); background: var(--accent-soft); }
.calc__row.off strong { color: var(--muted); font: 600 14px/1 var(--body); }
.calc__hint { font-size: 13.5px; color: var(--accent-text); font-weight: 600; min-height: 1.5em; margin: 0; }
.founding { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: center; background: var(--offer-bg); box-shadow: inset 0 0 0 1px var(--offer-line); border-radius: 22px; padding: 30px 34px; color: var(--offer-text); }
.founding[hidden] { display: none; }
.founding p { color: var(--text); max-width: 46em; font-size: 16px; margin: 12px 0 0; }
.founding p b { color: var(--ink); }
.flag { display: inline-block; font: 700 13px/1.4 var(--body); border-radius: 999px; padding: 3px 10px; background: var(--card); color: var(--offer-text); box-shadow: inset 0 0 0 1px var(--offer-line); }
.meter { display: grid; gap: 8px; font-size: 14px; font-weight: 600; }
.meter b { font: 700 26px/1 var(--display); color: var(--ink); }
.meter progress { appearance: none; width: 100%; height: 10px; border: 0; border-radius: 5px; background: rgba(146, 64, 14, 0.14); overflow: hidden; }
.meter progress::-webkit-progress-bar { background: rgba(146, 64, 14, 0.14); border-radius: 5px; }
.meter progress::-webkit-progress-value { background: #d97706; border-radius: 5px; }
.meter progress::-moz-progress-bar { background: #d97706; border-radius: 5px; }
.meter .btn { margin-top: 8px; }
/* The plan row sticks while the table scrolls under it; no overflow box, or sticky would stop */
.ctab { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14.5px; }
.ctab th, .ctab td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; font-weight: 400; }
.ctab td, .ctab thead th:not(:first-child) { text-align: center; width: 20%; }
.ctab thead th { position: sticky; top: calc(var(--nav-h) + env(safe-area-inset-top, 0px)); z-index: 5; background: var(--paper); padding-block: 14px 12px; box-shadow: 0 1px 0 var(--line); vertical-align: bottom; }
.ctab thead th:first-child > span[aria-hidden] { font-size: 13px; color: var(--muted); }
.ctab thead th b { display: block; font: 700 18px/1.1 var(--display); color: var(--ink); }
.ctab thead th > span { display: block; margin: 4px 0 8px; font-size: 13px; color: var(--muted); font-weight: 500; }
.ctab thead th.pro b { color: var(--accent-text); }
.ctab thead .btn { width: 100%; max-width: 170px; }
.ctab tbody th[colspan] { font: 700 17px/1.3 var(--display); color: var(--ink); padding-top: 30px; }
.ctab tbody th[scope='row'] { color: var(--ink); }
.ctab td:nth-child(3) { background: color-mix(in srgb, var(--accent-soft) 55%, transparent); }
.ctab td { color: var(--text); }
.ctab .v { font-size: 13.5px; }
.yes { color: var(--accent); }
.no { color: var(--muted); }
.yes svg, .no svg { width: 18px; height: 18px; vertical-align: -4px; }
.pt__pick { display: none; }

/* Changelog */
.fchips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.fchips[hidden] { display: none; }
.fchips button { border: 1px solid var(--line); background: var(--card); color: var(--text); border-radius: 999px; padding: 7px 13px; font: 600 14px/1 var(--body); cursor: pointer; }
.fchips button[aria-pressed='true'] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); }
.cl { max-width: 900px; margin-inline: auto; padding-bottom: 110px; }
.cl__e { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 32px; padding: 30px 0; border-top: 1px solid var(--line); scroll-margin-top: 20px; }
.cl__e[hidden] { display: none; }
.cl__when { position: sticky; top: calc(var(--nav-h) + 16px); align-self: start; display: grid; gap: 8px; }
.cl__when h2 { margin: 0; position: relative; font: 700 13px/1 var(--mono); letter-spacing: 0; }
.cl__when time { font-size: 14px; color: var(--muted); }
.cl__v { display: inline-block; color: var(--accent-text); background: var(--accent-soft); border-radius: 6px; padding: 6px 9px; font: 700 14px/1 var(--mono); }
.cl__when .anchor { position: absolute; left: -1.2em; top: 5px; color: var(--muted); text-decoration: none; font-weight: 400; opacity: 0; }
.cl__when h2:hover .anchor, .cl__when .anchor:focus-visible { opacity: 1; }
.cl__sum { margin: 0 0 14px; font: 700 20px/1.3 var(--display); letter-spacing: -0.01em; color: var(--ink); }
.cl__b ul { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.cl__b li { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 15px; }
.cl__b li[hidden] { display: none; }
.cl__b li strong { color: var(--ink); }
.cl__b li a { color: var(--accent-text); }
.cl__b code { font: 0.88em/1.4 var(--mono); background: var(--card); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; }
.lbl { justify-self: start; font: 700 12px/1.4 var(--body); border-radius: 6px; padding: 2px 8px; margin-top: 2px; }
.lbl--new { background: #5558e6; color: #fff; }
.lbl--imp { background: var(--accent-soft); color: var(--accent-text); }
.lbl--fix { background: rgba(22, 163, 74, 0.13); color: var(--good); }
.lbl--none { padding: 0; }

/* About */
.ab { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 72px; align-items: start; padding-block: 64px 110px; }
.ab__photo .marker { aspect-ratio: 4 / 5; margin: 0; display: grid; place-items: center; text-align: center; padding: 20px; }
.ab__photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 18px; box-shadow: 0 18px 40px -18px rgba(20, 24, 33, 0.35); }
.ab__photo { position: sticky; top: calc(96px + env(safe-area-inset-top, 0px)); }
.ab__doc { max-width: 64ch; }
.ab--one { grid-template-columns: minmax(0, 1fr); }
.ab--one .ab__doc { width: 100%; max-width: 68ch; margin-inline: auto; }
.ab__doc h1 { font: 800 clamp(36px, 5vw, 60px)/1.03 var(--display); letter-spacing: -0.03em; color: var(--ink); margin: 18px 0 18px; text-wrap: balance; }
.ab__doc h2 { font: 800 clamp(24px, 2.6vw, 30px)/1.15 var(--display); letter-spacing: -0.02em; color: var(--ink); margin: 44px 0 12px; text-wrap: balance; }

/* Help center */
.hc-hero { text-align: center; padding-block: 64px 48px; display: grid; justify-items: center; gap: 16px; }
.hc-hero h1 { font: 800 clamp(36px, 5vw, 60px)/1.03 var(--display); letter-spacing: -0.03em; color: var(--ink); margin: 6px 0 4px; text-wrap: balance; }
.hc-hero .lead { margin: 6px auto 0; max-width: 40em; font-size: 16.5px; }
.search { width: min(620px, 100%); position: relative; }
.search[hidden] { display: none; }
.search input { width: 100%; border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 14px; padding: 16px 52px 16px 50px; font: 16px/1.4 var(--body); box-shadow: 0 20px 44px -30px var(--shadow); }
.search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(85, 88, 230, 0.25); }
.search > svg { position: absolute; left: 18px; top: 50%; width: 19px; height: 19px; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.search kbd { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font: 600 11.5px/1 var(--mono); color: var(--muted); border: 1px solid var(--line); border-radius: 5px; padding: 4px 6px; background: var(--paper); }
.hc-results { width: min(620px, 100%); text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 6px; display: grid; gap: 2px; }
.hc-results[hidden] { display: none; }
.hc-results a { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; text-decoration: none; }
.hc-results a:hover, .hc-results a:focus-visible { background: var(--paper); }
.hc-results b { color: var(--ink); font-size: 15px; }
.hc-results small { color: var(--muted); font-size: 13px; }
.hc-results p { margin: 0; padding: 10px 12px; color: var(--muted); font-size: 14.5px; }
.cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.cat { background: var(--card); box-shadow: inset 0 0 0 1px var(--line); border-radius: 20px; padding: 24px; display: grid; gap: 14px; align-content: start; }
.sec .cat h2 { font: 700 19px/1.25 var(--display); color: var(--ink); margin: 0; padding: 0; letter-spacing: -0.01em; scroll-margin-top: 20px; }
.cat h2 small { display: block; font: 500 12.5px/1.3 var(--body); color: var(--muted); margin-top: 3px; }
.cat ul { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--line); display: grid; gap: 8px; font-size: 15px; }
.cat li a { text-decoration: none; color: var(--text); }
.cat li a:hover { color: var(--accent-text); }
.cats__after { max-width: 760px; margin-top: 24px; }
.ha { display: grid; grid-template-columns: 220px minmax(0, 68ch); gap: 56px; padding-block: 32px 72px; justify-content: center; }
.toc { position: sticky; top: calc(var(--nav-h) + 16px); align-self: start; font-size: 14px; display: grid; gap: 22px; max-height: calc(100vh - var(--nav-h) - 32px); overflow: auto; }
.toc b { display: block; font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 10px; }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; border-left: 2px solid var(--line); }
.toc a { display: block; padding: 5px 0 5px 14px; margin-left: -2px; border-left: 2px solid transparent; color: var(--muted); text-decoration: none; line-height: 1.35; }
.toc a:hover { color: var(--ink); }
.toc a.on { color: var(--accent-text); border-left-color: var(--accent); font-weight: 600; }
.toc details { display: none; }
.art { font-size: 16.5px; line-height: 1.72; min-width: 0; color: var(--text); }
.art .crumbs { padding-top: 0; }
.art h1 { font: 800 clamp(32px, 4vw, 44px)/1.08 var(--display); letter-spacing: -0.03em; color: var(--ink); margin: 14px 0 10px; text-wrap: balance; }
.art h2 { font: 700 22px/1.25 var(--display); color: var(--ink); margin: 32px 0 10px; position: relative; scroll-margin-top: 20px; }
.art h2 .anchor { position: absolute; left: -1.1em; color: var(--muted); text-decoration: none; opacity: 0; font-weight: 400; }
.art h2:hover .anchor, .art h2 .anchor:focus-visible { opacity: 1; }
.art h3 { font: 700 18px/1.3 var(--display); color: var(--ink); margin: 24px 0 8px; }
.art p, .art ul, .art ol { margin: 0 0 14px; }
.art ul, .art ol { padding-left: 22px; }
.art li { margin-bottom: 6px; }
.art strong { color: var(--ink); }
.art a { color: var(--accent-text); }
.art code { font: 0.88em/1.4 var(--mono); background: var(--card); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; }
.art .meta { margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.next { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 34px; }
.next a { border: 1px solid var(--line); background: var(--card); border-radius: 12px; padding: 14px 16px; text-decoration: none; font-size: 14.5px; font-weight: 600; color: var(--ink); line-height: 1.4; }
.next a:hover { border-color: var(--muted); }
.next a small { display: block; color: var(--muted); font-weight: 500; font-size: 12.5px; }
.next__r { text-align: right; }

/* The HTML drawings of other tools (a terminal, a chat channel, a webhook) */
.viz { background: var(--card); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 34px 70px -38px var(--shadow); overflow: hidden; font-size: 13px; color: var(--text); position: relative; min-width: 0; }
.viz--pad { padding: 22px; display: grid; gap: 14px; }
.viz--term { background: #141821; border-color: #262b38; color: #d7dae3; }
.v-gap { margin-top: 16px; }
.v-muted { color: var(--muted); }
.v-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.v-chips span { font: 600 10.5px/1 var(--body); border-radius: 6px; padding: 4px 6px; background: var(--paper); border: 1px solid var(--line); color: var(--muted); }
.v-chips span.a { background: var(--accent-soft); border-color: transparent; color: var(--accent-text); }
.v-chan { font: 700 14px/1 var(--body); color: var(--ink); padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.v-msg { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; }
.v-msg p { margin: 0 0 6px; }
.v-msg p b { color: var(--ink); }
.v-av { width: 36px; height: 36px; border-radius: 8px; background: #5558e6; color: #fff; display: grid; place-items: center; font: 800 15px/1 var(--display); }
.v-quote { border-left: 3px solid #5558e6; padding: 4px 0 4px 10px; margin: 0 0 8px; display: grid; gap: 2px; }
.v-quote b { color: var(--ink); }
.v-quote span { color: var(--muted); }
.v-msg .v-chips { margin-bottom: 8px; }
.v-msg .v-chips span { font-size: 12px; padding: 6px 9px; }
.v-term__h { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid #262b38; font: 500 11.5px/1.4 var(--mono); color: #9aa1b2; }
.v-term__h i { width: 9px; height: 9px; border-radius: 50%; background: #262b38; flex: none; }
.v-term__h span { margin-left: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-term { padding: 14px 16px 16px; font: 12.5px/1.7 var(--mono); }
.v-term p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.v-pr { color: #a9abf5; font-weight: 700; }
.v-tool { color: #a9abf5; }
.v-tool span { color: #9aa1b2; }
.v-out { color: #9aa1b2; padding-left: 14px; }
.v-out--ok { color: #4ade80; }
.v-k { color: #a9abf5; }
.v-s { color: #fcd34d; }
.v-term .v-gap { margin-top: 8px; }
.v-cursor-line i { display: inline-block; width: 8px; height: 15px; background: #d7dae3; vertical-align: -3px; }

.tool__mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); font: 700 15px/1 var(--display); color: var(--ink); margin-bottom: 6px; }
.tool__mark img { width: 22px; height: 22px; }

/* Narrow screens */
@media (max-width: 900px) {
	.ph, .row, .seats, .founding, .ab, .ha { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.ph { padding-block: 28px 72px; }
	.row { gap: 8px; }
	.grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.grid3, .steps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.faq { columns: 1; }
	.cl__e { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.cl__when { position: static; display: flex; align-items: center; gap: 10px; }
	.cl__b li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
	.ab__photo { position: static; max-width: 240px; }
	.toc { position: static; max-height: none; }
	.toc > div { display: none; }
	.toc details { display: block; border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: 12px 14px; }
	.toc summary { font-weight: 600; color: var(--ink); cursor: pointer; }
	.toc details ol { margin-top: 10px; }
	.ha { gap: 18px; padding-block: 20px 72px; }
	.art h2 .anchor { display: none; }
	.plans .plan--pro { order: -1; }
	/* The plan table shows one plan at a time, picked in a bar that sticks */
	.pt__pick { display: flex; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 3px; gap: 2px; position: sticky; top: calc(var(--nav-h) + env(safe-area-inset-top, 0px)); z-index: 6; margin-bottom: 8px; }
	.pt__pick button { flex: 1; border: 0; background: none; font: 600 14px/1 var(--body); color: var(--muted); padding: 10px 6px; border-radius: 8px; cursor: pointer; }
	.pt__pick button[aria-pressed='true'] { background: var(--accent-soft); color: var(--accent-text); }
	.ctab thead th { position: static; }
	.ctab td, .ctab thead th:not(:first-child) { width: 40%; }
	.ctab td:nth-child(3) { background: none; }
	.ctab-wrap[data-plan='free'] :is(th, td):is(:nth-child(3), :nth-child(4)):not([colspan]),
	.ctab-wrap[data-plan='pro'] :is(th, td):is(:nth-child(2), :nth-child(4)):not([colspan]),
	.ctab-wrap[data-plan='agency'] :is(th, td):is(:nth-child(2), :nth-child(3)):not([colspan]) { display: none; }
	.ctab tbody th[colspan] { padding-top: 22px; }
}
@media (max-width: 640px) {
	.crumbs { padding-top: 16px; font-size: 13.5px; }
	.ph { padding-block: 20px 64px; gap: 28px; }
	.ph h1 { font-size: clamp(34px, 10vw, 44px); line-height: 1.06; margin: 18px 0 14px; }
	.ph--one { padding-bottom: 48px; }
	.ph--one > .pill:first-child { margin-top: 40px; }
	.ph--one > .crumbs { padding-bottom: 24px; }
	.lead { font-size: 17px; }
	.ph .actions, .ph .actions .btn, .band .actions, .band .btn { width: 100%; }
	.ph .actions .btn { flex: 1 1 100%; }
	.ph__art--inset { padding-bottom: 16px; }
	.ph__art--rec .inset { position: relative; left: auto; transform: none; margin: -24px auto 0; width: 86%; }
	.sec { padding-block: 0 72px; }
	.sec h2 { font-size: 30px; line-height: 1.12; }
	.row__h h2 { font-size: 28px; }
	.prose, .lead { font-size: 16px; }
	.ticks { font-size: 16px; }
	.grid2, .grid3, .grid4, .steps--4, .steps--2, .pick, .next { grid-template-columns: minmax(0, 1fr); }
	.benefits { gap: 32px; }
	.card, .step { padding: 22px; }
	.band { padding: 44px 22px; margin-bottom: 72px; border-radius: 22px; }
	.band h2 { font-size: 30px; line-height: 1.12; }
	.band p { font-size: 16px; }
	.founding { padding: 24px 22px; }
	.founding .btn { width: 100%; }
	.seats { padding: 22px; gap: 24px; }
	.hc-hero { padding-block: 40px 32px; }
	.ab { padding-block: 24px 64px; }
	.cl { padding-bottom: 72px; }
	.faq summary { font-size: 17px; }
	.calc__row { grid-template-columns: 56px minmax(0, 1fr) auto; }
}
.tools.grid4 { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }