/* Long-form pages: guides and comparisons.
   Tokens, nav, footer, .wrap, .big, .ul, .lede, .btn, .sect-lab and .cpill come
   from css/v7.css (load v7.css and v7-fixes.css first), so these pages stay one
   system with the landing page. Only reading-layout and comparison pieces live here. */

body { padding-top:78px; }
nav, nav.scrolled { background:rgba(239,235,226,.95); backdrop-filter:blur(12px); box-shadow:0 1px 0 rgba(27,42,56,.1); }

/* ---- hero ---------------------------------------------------------------- */
.art-hero { padding:48px 0 5vh; }
.crumbs { font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:#6f6a5e; }
.crumbs a { color:#6f6a5e; text-decoration:none; }
.crumbs a:hover { color:var(--blue); text-decoration:underline; }
.crumbs span[aria-hidden] { margin:0 8px; }
.art-hero h1 { margin-top:22px; max-width:22ch; font-size:clamp(34px,4vw,58px); }
.art-hero .lede { max-width:62ch; margin-top:20px; }
.byline { margin-top:22px; font-size:14px; color:#6f6a5e; }
.byline b { color:var(--ink); font-weight:700; }
.art-hero .cta-row { margin-top:28px; display:flex; gap:14px; flex-wrap:wrap; }

/* ---- the short answer: what an answer engine should quote ------------------ */
.answer { margin-top:34px; max-width:780px; background:var(--cream-hi); border:1px solid var(--line); border-left:3px solid var(--blue); border-radius:8px; padding:22px 26px; }
.answer .al { font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--blue); font-weight:500; }
.answer p { margin-top:10px; font-size:17px; line-height:1.6; color:var(--ink); }
.answer ul { margin:12px 0 0 20px; font-size:16px; line-height:1.6; }

/* ---- reading layout -------------------------------------------------------- */
.art { display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:clamp(40px,5vw,80px); padding:4vh 0 10vh; align-items:start; }
.toc { position:sticky; top:104px; order:2; border-top:1.5px solid var(--line); padding-top:13px; }
.toc .tl { font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:#6b6559; font-weight:500; }
.toc ol { list-style:none; margin-top:14px; padding:0; }
.toc li { margin:0 0 10px; }
.toc a { color:var(--ink-soft); text-decoration:none; font-size:14.5px; line-height:1.4; }
.toc a:hover { color:var(--blue); }
.prose { max-width:70ch; font-size:17px; line-height:1.7; color:var(--ink); }
.prose > * + * { margin-top:18px; }
.prose h2 { font-family:var(--serif); font-weight:500; font-size:clamp(28px,2.6vw,38px); line-height:1.15; letter-spacing:-.01em; margin-top:64px; padding-top:18px; border-top:1.5px solid var(--line); scroll-margin-top:100px; }
.prose h2:first-child { margin-top:0; }
.prose h3 { font-size:20px; font-weight:700; line-height:1.3; margin-top:34px; scroll-margin-top:100px; }
.prose p, .prose li { color:#2b3946; }
.prose ul, .prose ol { padding-left:22px; }
.prose li + li { margin-top:8px; }
.prose a { color:var(--blue); text-decoration-thickness:1px; text-underline-offset:3px; }
.prose a:hover { text-decoration-thickness:2px; }
.prose strong { color:var(--ink); }
.prose code { font-family:var(--mono); font-size:.88em; background:var(--cream-hi); border:1px solid var(--line); border-radius:4px; padding:1px 5px; }
.prose .note { font-size:15px; color:#5a6670; }

/* first-hand passage from the founder, credited to the LinkedIn post it came from */
.prose .fbq { margin:30px 0; padding:2px 0 2px 22px; border-left:2px solid var(--blue-soft); }
.fbq blockquote p { font-family:var(--serif); font-size:20.5px; line-height:1.5; color:var(--ink); }
.fbq figcaption { margin-top:10px; font-size:14px; line-height:1.5; color:#6f6a5e; }
.prose .fbq figcaption a { color:#6f6a5e; text-decoration-thickness:1px; white-space:nowrap; }
.prose .fbq figcaption a:hover { color:var(--blue); }

/* tables inside prose */
.ctable-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:10px; background:#fff; }
.ctable { width:100%; min-width:560px; border-collapse:collapse; font-size:15px; line-height:1.5; }
.ctable th { text-align:left; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#6f6a5e; padding:13px 16px 10px; border-bottom:1px solid var(--line); font-weight:500; background:#FAF8F3; }
.ctable td { padding:13px 16px; border-bottom:1px solid #efeadd; vertical-align:top; color:#2b3946; }
.ctable tr:last-child td { border-bottom:0; }
.ctable td:first-child { font-weight:700; color:var(--ink); }

/* steps */
.howto { list-style:none; padding:0 !important; counter-reset:st; }
.howto > li { counter-increment:st; position:relative; padding-left:52px; }
.howto > li::before { content:counter(st,decimal-leading-zero); position:absolute; left:0; top:2px; font-family:var(--mono); font-size:13px; color:var(--blue); border:1px solid var(--blue-soft); border-radius:99px; width:34px; height:34px; display:grid; place-items:center; }
.howto > li + li { margin-top:22px; }
.howto b { display:block; color:var(--ink); }

/* the Nupact block inside a guide */
.nblock { margin-top:44px; background:var(--navy-card); color:#E9EEF2; border-radius:12px; padding:30px 32px; }
.nblock .nl { font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--blue-soft); }
.nblock h3 { margin-top:12px; font-family:var(--serif); font-weight:500; font-size:28px; line-height:1.2; color:#fff; }
.nblock p { margin-top:12px; color:#C9D3DB; font-size:16.5px; line-height:1.65; }
.nblock ul { margin-top:12px; padding-left:20px; color:#C9D3DB; font-size:16px; line-height:1.65; }
.nblock li + li { margin-top:6px; }
.nblock a:not(.btn) { color:#fff; text-decoration-color:var(--blue-soft); }
.nblock .cta-row { margin-top:22px; display:flex; gap:12px; flex-wrap:wrap; }
.nblock .btn.acc { background:#fff; color:var(--ink); }
.nblock .btn.ghost { color:#fff; border-color:rgba(255,255,255,.6); }

/* FAQ */
.faq { margin-top:8px; border-top:1px solid var(--line); }
.faq details { border-bottom:1px solid var(--line); padding:18px 0; }
.faq summary { cursor:pointer; font-weight:700; font-size:17.5px; color:var(--ink); list-style:none; display:flex; justify-content:space-between; gap:18px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; font-family:var(--mono); color:var(--blue); font-size:20px; line-height:1; }
.faq details[open] summary::after { content:"\2212"; }
.faq summary:focus-visible { outline:2px solid var(--blue); outline-offset:4px; border-radius:4px; }
.faq details > div { margin-top:12px; color:#2b3946; font-size:16.5px; line-height:1.65; }
.faq details > div > * + * { margin-top:10px; }

/* related */
.related { padding:9vh 0; background:var(--cream-hi); }
.rel-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; margin-top:8px; }
.rel-grid a { display:block; background:#fff; border:1px solid var(--line); border-radius:10px; padding:20px 22px; color:var(--ink); text-decoration:none; }
.rel-grid a:hover { border-color:var(--blue); box-shadow:0 12px 30px rgba(27,42,56,.08); }
.rel-grid .k { font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#6f6a5e; }
.rel-grid b { display:block; margin-top:8px; font-size:17px; line-height:1.35; }

/* ---- comparison pages ------------------------------------------------------ */
.verdict { margin-top:34px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff; max-width:1040px; }
.verdict > div { padding:20px 22px; border-right:1px solid var(--line); }
.verdict > div:last-child { border-right:0; }
.verdict .vk { font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#6f6a5e; }
.verdict .vv { margin-top:8px; font-size:16px; line-height:1.45; color:var(--ink); }
.verdict .vv b { color:var(--blue); }

.cmp-sec { padding:8vh 0; }
.cmp-sec.alt { background:var(--cream-hi); }
.cmp-sec .big { max-width:22ch; font-size:clamp(30px,3.4vw,48px); }
.cmp-sec .lede { max-width:62ch; margin-top:18px; }
.cmp-wrap { margin-top:36px; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff; }
.cmp { width:100%; border-collapse:collapse; font-size:15px; line-height:1.5; }
.cmp th, .cmp td { padding:15px 18px; text-align:left; vertical-align:top; border-bottom:1px solid #efeadd; }
.cmp thead th { font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:500; color:#6f6a5e; background:#FAF8F3; border-bottom:1px solid var(--line); }
.cmp tbody th { font-weight:700; color:var(--ink); width:24%; }
.cmp td { color:#3b4853; width:38%; }
.cmp .us { background:#F1F4FB; color:var(--ink); border-left:3px solid var(--blue); }
.cmp thead .us { background:var(--blue); color:#fff; border-left:3px solid var(--blue); }
.cmp tfoot td { border-bottom:0; padding:18px; }
.cmp tfoot .us { background:var(--blue); }
.cmp tfoot .us a { color:#fff; font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:13px; text-decoration:none; }
.cmp tfoot .us a:hover { text-decoration:underline; }
.cmp .yes { color:var(--ok); font-weight:700; }

.why-grid { margin-top:36px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.wcard { background:#fff; border:1px solid var(--line); border-radius:12px; padding:26px 26px 24px; }
.wcard .n { font-family:var(--mono); font-size:12px; color:var(--blue); letter-spacing:.1em; }
.wcard h3 { margin-top:10px; font-family:var(--serif); font-weight:500; font-size:25px; line-height:1.2; }
.wcard p { margin-top:10px; color:var(--ink-soft); font-size:16px; line-height:1.6; }
.wcard.hero-card { grid-column:1 / -1; background:var(--navy-card); border-color:var(--navy-card); }
.wcard.hero-card h3 { color:#fff; font-size:30px; }
.wcard.hero-card p { color:#C9D3DB; max-width:70ch; }
.wcard.hero-card .n { color:var(--blue-soft); }

.fit { margin-top:36px; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:16px; }
.fit > div { border-radius:12px; padding:26px; border:1px solid var(--line); background:#fff; }
.fit .ours { border:2px solid var(--blue); }
.fit h3 { font-size:18px; font-weight:700; }
.fit ul { margin-top:12px; padding-left:20px; color:#2b3946; font-size:16px; line-height:1.6; }
.fit li + li { margin-top:6px; }

/* ---- responsive ------------------------------------------------------------ */
@media (max-width:980px) {
  .art { grid-template-columns:minmax(0,1fr); }
  .toc { position:static; order:0; }
  .verdict { grid-template-columns:minmax(0,1fr); }
  .verdict > div { border-right:0; border-bottom:1px solid var(--line); }
  .verdict > div:last-child { border-bottom:0; }
  .why-grid, .fit { grid-template-columns:minmax(0,1fr); }
}
/* Phones: the comparison table becomes stacked cards so the Nupact cell is never off-screen. */
@media (max-width:720px) {
  .cmp thead { display:none; }
  .cmp, .cmp tbody, .cmp tr, .cmp th, .cmp td, .cmp tfoot { display:block; width:100%; }
  .cmp tr { border-bottom:1px solid var(--line); padding:6px 0; }
  .cmp tbody th { border:0; padding:14px 16px 4px; width:auto; }
  .cmp td { border:0; padding:8px 16px; width:auto; }
  .cmp td::before { content:attr(data-label); display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:#6f6a5e; margin-bottom:3px; }
  .cmp .us { border-left:3px solid var(--blue); }
  .cmp .us::before { color:var(--blue); }
  .cmp tfoot tr { border:0; padding:0; }
  .cmp tfoot td:not(.us) { display:none; }
  .nblock { padding:24px 22px; }
  .prose .fbq { padding-left:16px; }
  .fbq blockquote p { font-size:18.5px; }
}