/* minidev.pro inner pages: "Painting & Paper".
   The homepage's world, for reading: a painted band at the top, a paper sheet for the text,
   dusk at the bottom. Display: Cormorant Garamond Light. Text: Hanken Grotesk. Labels: Fragment Mono.
   This file restyles the site's existing class names, so pages keep their HTML and SEO. */

@font-face { font-family: "Fragment Mono"; src: url("/assets/fonts/fragment-mono-latin-400.v1.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --paper: #eee7d9; --paper-2: #e4dbc9; --paper-3: #d9cfbb;
  --ink: #1f1a17; --ink-2: #4f4943; --ink-3: #7a736b; --umber: #8c4a26;
  --cream: #f3ebdd; --cream-2: rgba(243, 235, 221, .78); --gold: #e9d3a2; --dusk: #2a201b; --dusk-2: #352821;
  --hair: rgba(31, 26, 23, .16); --hair-2: rgba(31, 26, 23, .09); --hair-dark: rgba(243, 235, 221, .16);
  --display: "Cormorant Garamond", "Newsreader", Georgia, serif;
  --text: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Fragment Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --gut: clamp(20px, 3.4vw, 48px);
  --measure: 720px;
  --wide: 1180px;
  color-scheme: light;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 18px/1.7 var(--text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
body::after { /* the same grain as the homepage sheets */
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none;
  background: url("/assets/site/painting/grain.png"); opacity: .06; mix-blend-mode: multiply;
}
img, svg, video { max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; text-decoration-color: rgba(31, 26, 23, .38); transition: color .2s ease, text-decoration-color .2s ease; }
a:hover { color: var(--umber); text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--umber); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--gold); color: var(--ink); }
h1, h2, h3, h4, h5, h6 { color: inherit; text-wrap: balance; margin: 0; }
h1, h2 { font-family: var(--display); font-weight: 300; letter-spacing: -.01em; }
h1 { font-size: clamp(44px, 6.2vw, 92px); line-height: .98; }
h2 { font-size: clamp(32px, 3.6vw, 50px); line-height: 1.04; }
h3 { font: 500 clamp(22px, 2vw, 27px)/1.2 var(--display); letter-spacing: 0; }
h4 { font: 500 17px/1.35 var(--text); }
p { margin: 0 0 1.1em; }
strong, b { font-weight: 600; }
em, i { font-style: italic; }
hr { border: 0; border-top: 1px solid var(--hair); margin: 48px 0; }
small { font-size: 14px; }
code { font: 400 .86em/1.4 var(--mono); background: var(--paper-2); padding: .12em .4em; border-radius: 5px; }
pre { font: 400 14px/1.6 var(--mono); background: var(--dusk); color: var(--cream); padding: 20px 22px; border-radius: 14px; overflow-x: auto; }
pre code { background: none; padding: 0; color: inherit; }
blockquote { margin: 32px 0; padding: 0 0 0 24px; border-left: 1px solid var(--ink); font: italic 300 clamp(22px, 2.2vw, 28px)/1.35 var(--display); color: var(--ink); }
blockquote p { margin: 0 0 .5em; } blockquote cite { display: block; font: 400 12px/1.4 var(--mono); letter-spacing: .05em; text-transform: uppercase; font-style: normal; color: var(--ink-3); }
ul, ol { padding-left: 1.25em; margin: 0 0 1.3em; } li { margin: 0 0 .45em; } li::marker { color: var(--ink-3); }
.sr-only, .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono, .cap { font: 400 12px/1.5 var(--mono); letter-spacing: .05em; text-transform: uppercase; }

/* ---------- the header (replaces nav-premium on every page) ---------- */
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--paper); color: var(--ink); padding: 10px 14px; border-radius: 8px; }
.skip:focus { top: 12px; }
.site-nav {
  position: fixed; inset: 0 0 auto; z-index: 80; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px var(--gut); color: var(--cream); transition: background-color .35s ease, box-shadow .35s ease, color .35s ease, padding .35s ease;
}
.site-nav.is-solid { background: rgba(42, 32, 27, .88); -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1); box-shadow: 0 1px 0 var(--hair-dark); padding-block: 10px; }
.site-nav__mark { font: 400 23px/1 var(--display); letter-spacing: -.005em; text-decoration: none; color: inherit; white-space: nowrap; }
.site-nav__mark:hover { color: var(--gold); }
.site-nav__right { display: flex; align-items: center; gap: 6px; padding: 5px 5px 5px 14px; border-radius: 999px; background: rgba(24, 18, 14, .34); border: 1px solid var(--hair-dark); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.site-nav.is-solid .site-nav__right { background: transparent; border-color: transparent; }
.site-nav__links { display: flex; gap: 2px; }
.site-nav__links a, .site-nav__menu { font: 400 15px/1 var(--text); color: inherit; text-decoration: none; padding: 11px 11px; border-radius: 999px; opacity: .9; background: none; border: 0; cursor: pointer; }
.site-nav__links a:hover, .site-nav__menu:hover { opacity: 1; color: var(--gold); }
.site-nav__links a[aria-current="page"] { color: var(--gold); opacity: 1; }
.site-nav__menu { display: none; }
.site-menu { position: fixed; inset: 0; z-index: 85; background: var(--dusk); color: var(--cream); display: flex; flex-direction: column; justify-content: flex-end; padding: 96px var(--gut) 40px; }
.site-menu[hidden] { display: none; }
.site-menu nav { display: grid; gap: 4px; }
.site-menu nav a { font: 300 clamp(36px, 9vw, 56px)/1.12 var(--display); text-decoration: none; color: var(--cream); }
.site-menu .cap { margin-top: 28px; color: var(--cream-2); }
.site-menu__close { position: absolute; top: 18px; right: var(--gut); font: 400 15px/1 var(--text); color: var(--cream); background: none; border: 1px solid var(--hair-dark); border-radius: 999px; padding: 11px 16px; cursor: pointer; }

/* ---------- buttons: every legacy button class becomes one pill ---------- */
.btn, .cta-button, .cta-button-large, .cta-primary, .btn-primary, .nav-cta, .form-submit, .footer-cta, .bp-hero-cta, .error-btn, .pricing-cta, .calc-cta, button.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 50px; padding: 0 24px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--ink); color: var(--paper); text-decoration: none; white-space: nowrap;
  font: 400 16px/1 var(--text); letter-spacing: .005em; text-transform: none;
  transition: background-color .2s ease, color .2s ease, transform .2s var(--ease);
}
.btn:hover, .cta-button:hover, .cta-button-large:hover, .cta-primary:hover, .btn-primary:hover, .nav-cta:hover, .form-submit:hover, .footer-cta:hover, .bp-hero-cta:hover, .error-btn:hover, .pricing-cta:hover { background: var(--umber); color: var(--paper); }
.btn:active, .cta-button:active, .cta-primary:active, .form-submit:active { transform: scale(.98); }
.btn--sm { min-height: 40px; padding: 0 16px; font-size: 15px; }
.site-nav .btn { background: var(--cream); color: var(--ink); }
.site-nav .btn:hover { background: #fff8ea; color: var(--ink); }
.cta-secondary, .btn-secondary, .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 22px; border-radius: 999px;
  background: transparent; color: inherit; border: 1px solid currentColor; text-decoration: none; font: 400 16px/1 var(--text); white-space: nowrap;
}
.cta-secondary:hover, .btn-secondary:hover, .btn-ghost:hover { color: var(--umber); }

/* ---------- the painted band: every page hero ---------- */
.page-hero, .blog-header, .legal-hero, .tool-header, .hero.page-top, .contact-hero, .error-hero, .bp-hero {
  position: relative; isolation: isolate; color: var(--cream); background: var(--dusk);
  padding: clamp(132px, 17vh, 176px) var(--gut) clamp(48px, 7vh, 80px); text-align: left; overflow: hidden;
}
.page-hero::before, .blog-header::before, .legal-hero::before, .tool-header::before, .contact-hero::before, .error-hero::before, .bp-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: url("/assets/site/painting/sierra-1920.webp") 50% 38% / cover no-repeat;
  background-image: image-set(url("/assets/site/painting/sierra-1280.webp") 1x, url("/assets/site/painting/sierra-1920.webp") 2x);
}
.page-hero::after, .blog-header::after, .legal-hero::after, .tool-header::after, .contact-hero::after, .error-hero::after, .bp-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(24, 16, 12, .86) 0%, rgba(24, 16, 12, .62) 46%, rgba(24, 16, 12, .28) 100%), linear-gradient(0deg, rgba(24, 16, 12, .55), rgba(24, 16, 12, 0) 45%);
}
.page-hero-container, .blog-header-content, .legal-hero > *, .tool-header > * { max-width: var(--wide); margin: 0 auto; }
.page-hero-container, .blog-header-content { display: grid; justify-items: start; gap: 0; }
.page-hero-title, .blog-title, .page-hero h1, .blog-header h1, .legal-hero h1, .tool-header h1 {
  font: 300 clamp(44px, 6.2vw, 92px)/.98 var(--display); letter-spacing: -.012em; color: var(--cream); max-width: 15ch; margin: 0;
  text-shadow: 0 2px 30px rgba(10, 6, 4, .35);
}
.blog-title { max-width: 18ch; font-size: clamp(40px, 5.2vw, 76px); }
.page-hero-title .hero-serif, .hero-serif { font: inherit; font-style: normal; }
.page-hero-subtitle, .blog-excerpt, .page-hero .lead, .legal-hero p, .tool-header p {
  font: 300 clamp(18px, 1.6vw, 21px)/1.55 var(--text); color: rgba(243, 235, 221, .9); max-width: 40em; margin: 22px 0 0;
}
.page-breadcrumb, .blog-breadcrumb, .breadcrumb {
  display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 0 0 22px;
  font: 400 12px/1.4 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--cream-2);
}
.page-breadcrumb a, .blog-breadcrumb a, .breadcrumb a { color: inherit; text-decoration: none; }
.page-breadcrumb a:hover, .blog-breadcrumb a:hover, .breadcrumb a:hover { color: var(--gold); }
.blog-category, .case-label, .page-hero .kicker, .eyebrow {
  display: inline-block; font: 400 12px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--gold);
  border: 1px solid rgba(233, 211, 162, .45); border-radius: 999px; padding: 6px 12px; margin: 0 0 18px; background: rgba(24, 16, 12, .25);
}
.page-hero .case-label { margin: 26px 0 0; }
.blog-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 30px; font: 400 12px/1.4 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--cream-2); }
.blog-meta svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 6px; }
.blog-meta-item { display: inline-flex; align-items: center; }
.blog-author { display: flex; align-items: center; gap: 12px; }
.blog-author-avatar, .blog-author-bio-avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--cream); color: var(--ink); font: 400 14px/1 var(--display); letter-spacing: .02em; }
.blog-author-info { display: grid; gap: 3px; }
.blog-author-name a { color: var(--cream); text-decoration: none; }
.blog-author-role { opacity: .8; }
.blog-hero-image { margin: 0; }

/* ---------- the sheet: where reading happens ---------- */
.about-content-section, .legal-content-section, .content-section, .section, .values-section-wrap, .proof-section, .who-for-section, .what-we-do-section, .problem-section, .how-it-works-section, .team-section {
  background: transparent; color: var(--ink); padding: clamp(56px, 8vw, 104px) var(--gut);
}
.content-container, .legal-container, .container, .what-we-do-container, .who-for-container, .problem-container, .how-it-works-container, .proof-container, .bp-section-container, .pricing-container-ai {
  max-width: var(--wide); margin: 0 auto; width: 100%;
}
.content-prose, .legal-content, .blog-content { max-width: var(--measure); }
.content-container > .content-prose, .legal-container > .legal-content { margin: 56px auto 0; }
.content-prose h2, .legal-content h2, .blog-content h2 { margin: 1.9em 0 .55em; }
.content-prose h3, .legal-content h3, .blog-content h3 { margin: 1.6em 0 .45em; }
.content-prose h4, .blog-content h4 { margin: 1.4em 0 .4em; }
.content-prose > :first-child, .blog-content > :first-child { margin-top: 0; }
.large-text, .about-intro p, .section-intro, .legal-intro, .tool-intro, .proof-intro, .problem-text {
  font: 300 clamp(20px, 1.9vw, 25px)/1.5 var(--text); color: var(--ink); max-width: 38em; margin: 0 0 1em;
}
.about-intro { max-width: var(--measure); margin: 0 auto clamp(40px, 6vw, 72px); }
.section-title-serif, .section-title, .values-section > h2, .cta-container h2 {
  font: 300 clamp(34px, 4vw, 56px)/1.03 var(--display); letter-spacing: -.01em; text-transform: none; margin: 0 0 28px; color: inherit;
}
.subheading { font: 300 19px/1.55 var(--text); color: inherit; opacity: .85; max-width: 40em; }
.values-section { padding: clamp(40px, 6vw, 72px) 0; border-top: 1px solid var(--hair); }
.values-section:first-child { border-top: 0; padding-top: 0; }
.content-container > .values-section, .content-container > .values-grid { max-width: var(--wide); }

/* cards become editorial entries: a hairline on top, no boxes */
.values-grid, .stats-grid, .pricing-grid, .steps-grid, .timeline-grid, .team-grid, .who-for-grid, .blog-related-grid, .case-studies-grid, .features-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 36px 32px; margin: 0 0 8px;
}
.value-item, .step-card, .timeline-card, .feature, .who-for-column, .process-step, .team-member {
  border-top: 1px solid var(--ink); padding-top: 18px; background: none; border-radius: 0; box-shadow: none; min-width: 0;
}
.value-item h3, .step-card h3, .timeline-card h3, .feature h3, .who-for-column h3, .process-step h3 { font: 400 clamp(23px, 2vw, 28px)/1.15 var(--display); margin: 0 0 10px; }
.value-item h3 a { text-decoration: none; } .value-item h3 a:hover { color: var(--umber); }
.value-item p, .step-card p, .timeline-card p, .feature p { font-size: 16px; line-height: 1.6; color: var(--ink-2); margin: 0 0 .6em; }
.value-item .case-label, .values-grid .case-label { color: var(--umber); border-color: rgba(140, 74, 38, .35); background: none; margin: 0 0 12px; padding: 4px 10px; font-size: 11px; }
.step-number, .step-header .num { font: 400 12px/1 var(--mono); letter-spacing: .06em; color: var(--umber); display: block; margin-bottom: 10px; }
.stat-card, .blog-stat { border-top: 1px solid var(--ink); padding-top: 16px; background: none; box-shadow: none; border-radius: 0; }
.stat-number, .blog-stat-number { display: block; font: 300 clamp(40px, 4.4vw, 64px)/1 var(--display); color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.stat-label, .blog-stat-label { display: block; margin-top: 8px; font: 400 12px/1.4 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.blog-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 24px; margin: 32px 0; }
.neo-shadow, .modern-shadow { box-shadow: none !important; }

/* pricing */
.pricing-card, .pricing-card-ai { border-top: 1px solid var(--ink); padding: 20px 0 0; background: none; border-radius: 0; box-shadow: none; }
.price-tag, .price { font: 300 clamp(40px, 4vw, 58px)/1 var(--display); color: var(--ink); margin: 6px 0 10px; font-variant-numeric: lining-nums; }
.price-period { font: 400 13px/1 var(--mono); color: var(--ink-3); }
.price-description, .pricing-note, .price-commitment { font-size: 16px; color: var(--ink-2); }
.pricing-features { list-style: none; padding: 0; } .pricing-features li { padding: 8px 0; border-bottom: 1px solid var(--hair-2); margin: 0; font-size: 16px; }

/* ---------- blog article ---------- */
.blog-article { background: transparent; }
.blog-content-wrapper { padding: clamp(48px, 7vw, 88px) var(--gut) clamp(64px, 8vw, 104px); }
.blog-content { margin: 0 auto; font-size: 18.5px; }
.blog-content > p:first-of-type { font-size: 20px; }
.blog-toc, .tldr-box, .blog-takeaway, .blog-callout, .key-insight, .note-box, .svc-note, .uk-note {
  margin: 0 0 40px; padding: 22px 24px; border: 1px solid var(--hair); border-radius: 16px; background: rgba(228, 219, 201, .55);
}
.blog-toc-title, .tldr-label, .blog-takeaway-title, .blog-callout-title, .key-insight-title {
  display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font: 400 12px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--umber);
}
.blog-toc-title svg, .blog-takeaway-title svg, .blog-callout-title svg { width: 14px; height: 14px; }
.blog-toc-list { margin: 0; padding-left: 1.3em; columns: 2 260px; column-gap: 32px; }
.blog-toc-list li { font-size: 16px; margin: 0 0 6px; break-inside: avoid; }
.blog-toc-list a { text-decoration: none; } .blog-toc-list a:hover { text-decoration: underline; }
.tldr-box ul, .blog-takeaway ul { margin: 0; padding-left: 1.15em; } .tldr-box li, .blog-takeaway li { font-size: 17px; }
.tldr-box p:last-child, .blog-takeaway p:last-child, .blog-callout p:last-child { margin-bottom: 0; }
.blog-callout { margin: 32px 0; }
.blog-callout-warning .blog-callout-title { color: #9a3b1c; }
.blog-callout-success .blog-callout-title { color: #4a6a2c; }
.blog-cta, .cta-box {
  margin: 48px 0; padding: 32px; border-radius: 20px; background: var(--dusk); color: var(--cream); display: grid; gap: 12px; justify-items: start;
}
.blog-cta h3 { font: 300 clamp(28px, 2.6vw, 36px)/1.08 var(--display); color: var(--cream); margin: 0; }
.blog-cta p { color: var(--cream-2); margin: 0; }
.blog-cta .cta-button, .cta-box .cta-button { background: var(--cream); color: var(--ink); margin-top: 6px; }
.blog-cta .cta-button:hover { background: var(--gold); color: var(--ink); }
.blog-comparison { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 20px; margin: 28px 0; }
.blog-comparison-card { border-top: 1px solid var(--ink); padding-top: 14px; }
.blog-comparison-card h4 { font: 400 22px/1.2 var(--display); margin: 0 0 8px; }
.blog-author-bio { display: flex; gap: 16px; align-items: flex-start; margin: 40px 0 24px; }
.blog-author-bio-avatar { background: var(--ink); color: var(--paper); width: 52px; height: 52px; font-size: 17px; }
.blog-author-bio-content h4 { font: 400 22px/1.2 var(--display); margin: 0 0 2px; }
.blog-author-bio-content h4 a { text-decoration: none; }
.blog-author-bio-content .role, .role, .member-role { font: 400 12px/1.4 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 8px; }
.author-links { font-size: 15px; } .author-links a { margin-right: 14px; }
.blog-share { display: flex; align-items: center; gap: 12px; margin: 24px 0 56px; }
.blog-share-label { font: 400 12px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.blog-share-buttons { display: flex; gap: 8px; }
.blog-share-btn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--hair); color: var(--ink); }
.blog-share-btn:hover { border-color: var(--ink); color: var(--umber); }
.blog-share-btn svg { width: 16px; height: 16px; fill: currentColor; }
.blog-related { border-top: 1px solid var(--ink); padding-top: 28px; margin-top: 8px; }
.blog-related-title { font: 400 12px/1.4 var(--mono) !important; letter-spacing: .06em !important; text-transform: uppercase; color: var(--umber); margin: 0 0 20px !important; }
.blog-related-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 20px 24px; }
.blog-related-card { display: block; text-decoration: none; padding: 16px 0 0; border-top: 1px solid var(--hair); background: none; border-radius: 0; }
.blog-related-card h4 { font: 400 21px/1.2 var(--display); margin: 0 0 6px; }
.blog-related-card p { font-size: 15px; line-height: 1.5; color: var(--ink-2); margin: 0; }
.blog-related-card:hover h4 { color: var(--umber); }
.blog-card-with-image .blog-card-thumb, .blog-card-thumb { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 10px; margin-bottom: 12px; }
.reading-progress { position: fixed; top: 0; left: 0; z-index: 95; height: 2px; width: 0; background: var(--gold); }
.back-to-top { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: 20px; z-index: 70; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--hair); background: var(--paper); color: var(--ink); display: grid; place-items: center; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.back-to-top.visible { opacity: 1; pointer-events: auto; }
.back-to-top svg { width: 18px; height: 18px; }

/* ---------- tables ---------- */
.ai-table-wrap, .table-wrap, .nc-table-wrap, .sm-table-wrap, .comparison-table-wrap, div.comparison-table { overflow-x: auto; margin: 26px 0 10px; -webkit-overflow-scrolling: touch; }
table, .ai-table, .comparison-table, .blog-comparison-table, .nc-table, .sm-table, .sum-table {
  width: 100%; border-collapse: collapse; font: 400 15.5px/1.45 var(--text); color: var(--ink); background: none; border: 0; font-variant-numeric: tabular-nums;
}
th, td { text-align: left; vertical-align: top; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--hair); background: none; }
thead th, th { background: none; font: 400 11.5px/1.4 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--ink); }
tbody th { font: 500 15.5px/1.45 var(--text); letter-spacing: 0; text-transform: none; color: var(--ink); border-bottom: 1px solid var(--hair); }
tr:last-child td, tr:last-child th { border-bottom: 1px solid var(--hair); }
.ai-table-sm td, .ai-table-sm th { padding-block: 9px; }
.highlight-col, td.highlight-col, th.highlight-col { background: rgba(228, 219, 201, .7); padding-left: 10px; }
.highlight-row td, .highlight-row th { background: rgba(228, 219, 201, .7); }
.ai-table-note, .nc-table-note, .sm-table-note, .table-note { font-size: 14px; color: var(--ink-3); margin: 0 0 1.6em; }
.ai-sources, .nc-sources, .sm-sources, .svc-sources, .uk-sources, .sources { font-size: 15px; color: var(--ink-2); }
.ai-sources a, .sources a { word-break: break-word; }

/* ---------- FAQ (details and legacy accordions) ---------- */
details { border-bottom: 1px solid var(--hair); padding: 2px 0; }
details > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 18px; padding: 16px 0; font: 500 18px/1.4 var(--text); }
details > summary::-webkit-details-marker { display: none; }
details > summary::after { content: "+"; font: 300 26px/1 var(--display); color: var(--ink-3); transition: transform .3s var(--ease); }
details[open] > summary::after { transform: rotate(45deg); }
details > :not(summary) { margin: 0 0 18px; color: var(--ink-2); }
.quick-faqs { margin: 24px 0; }
.quick-faq, .faq-item { border-bottom: 1px solid var(--hair); padding: 18px 0; }
.quick-faq h3, .faq-item h3, .faq-question { font: 500 18px/1.4 var(--text); margin: 0 0 8px; }
.faq-question { display: flex; justify-content: space-between; width: 100%; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; color: inherit; }
.faq-answer { color: var(--ink-2); }
.faq-toggle { font: 300 26px/1 var(--display); }

/* ---------- forms ---------- */
.form-group { display: grid; gap: 8px; margin: 0 0 18px; }
label { font: 400 12px/1.4 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); }
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea {
  width: 100%; font: 400 17px/1.4 var(--text); color: var(--ink); background: rgba(255, 252, 245, .55); border: 1px solid var(--hair); border-radius: 12px; padding: 13px 15px;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ink); background: #fffcf4; }
input[type="range"] { accent-color: var(--umber); width: 100%; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--ink); }
.form-card, .contact-form { background: rgba(228, 219, 201, .5); border: 1px solid var(--hair); border-radius: 20px; padding: clamp(22px, 3vw, 36px); }

/* ---------- the dusk band: closing calls to action ---------- */
.final-cta, .cta-section, .section-dark, .bp-cta {
  position: relative; isolation: isolate; overflow: hidden; background: var(--dusk); color: var(--cream); text-align: left;
  padding: clamp(64px, 9vw, 120px) var(--gut);
}
.final-cta::before, .section-dark::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .55;
  background: linear-gradient(0deg, rgba(42, 32, 27, 1) 10%, rgba(42, 32, 27, .2)), url("/assets/site/painting/twilight-1280.webp") 50% 40% / cover no-repeat;
}
.cta-section { display: grid; justify-items: start; gap: 16px; border-radius: 24px; margin: clamp(56px, 7vw, 88px) 0 0; padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 64px); }
.final-cta .container, .final-cta .cta-container { max-width: var(--wide); margin: 0 auto; display: grid; justify-items: start; gap: 18px; }
.final-cta .section-title, .final-cta h2, .cta-title, .cta-section h2 {
  font: 300 clamp(38px, 5vw, 72px)/1 var(--display); text-transform: none; letter-spacing: -.012em; color: var(--cream); margin: 0; max-width: 16ch;
}
.final-cta .subheading, .final-cta p, .cta-subtitle, .cta-section p { color: var(--cream-2); font: 300 19px/1.55 var(--text); max-width: 36em; margin: 0; }
.final-cta a:not(.cta-primary):not(.cta-secondary):not(.cta-button), .cta-section a:not(.cta-button-large) { color: var(--gold) !important; }
.final-cta .cta-primary, .final-cta .cta-button, .cta-section .cta-button-large, .section-dark .btn { background: var(--cream); color: var(--ink); }
.final-cta .cta-primary:hover, .final-cta .cta-button:hover, .cta-section .cta-button-large:hover { background: var(--gold); color: var(--ink); }
.final-cta .cta-secondary { color: var(--cream); }
.cta-aside { margin: 6px 0 0 !important; font: 400 15px/1.5 var(--text) !important; } .cta-aside a { text-decoration: none; } .cta-aside a:hover { text-decoration: underline; }
.cta-buttons, .final-cta .buttons { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- the footer (replaces footer-premium on every page) ---------- */
.site-foot { position: relative; isolation: isolate; overflow: hidden; background: var(--dusk); color: var(--cream); padding: clamp(64px, 8vw, 104px) var(--gut) 28px; }
.site-foot::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .4; background: linear-gradient(180deg, rgba(42, 32, 27, 1) 0%, rgba(42, 32, 27, .55) 60%, rgba(42, 32, 27, .9)), url("/assets/site/painting/twilight-1280.webp") 50% 70% / cover no-repeat; }
.site-foot__grid { max-width: var(--wide); margin: 0 auto; display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 36px 28px; }
.site-foot__lead p { font: 300 clamp(26px, 2.6vw, 34px)/1.12 var(--display); margin: 0 0 20px; max-width: 14ch; }
.site-foot__lead .btn { background: var(--cream); color: var(--ink); }
.site-foot__lead .btn:hover { background: var(--gold); color: var(--ink); }
.site-foot h2 { font: 400 11.5px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--gold); margin: 6px 0 14px; }
.site-foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.site-foot li { margin: 0; font-size: 15.5px; }
.site-foot a { color: var(--cream); text-decoration: none; }
.site-foot a:hover { color: var(--gold); text-decoration: underline; }
.site-foot__mark { max-width: var(--wide); margin: clamp(48px, 8vw, 96px) auto 0; font: 300 clamp(64px, 17vw, 236px)/.8 var(--display); letter-spacing: -.03em; color: var(--cream); opacity: .92; white-space: nowrap; }
.site-foot__fine { max-width: var(--wide); margin: 26px auto 0; padding-top: 18px; border-top: 1px solid var(--hair-dark); display: grid; gap: 6px; font-size: 13px; line-height: 1.55; color: rgba(243, 235, 221, .66); }
.site-foot__fine p { margin: 0; }
.site-foot__fine button { font: inherit; color: inherit; background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }

/* ---------- cookie notice: a small card in the corner, in the site's colours ---------- */
body #cookie-consent.cookie-consent { padding: 0; left: auto; right: max(16px, env(safe-area-inset-right, 0px)); bottom: 16px; width: min(420px, calc(100vw - 32px)); border-radius: 18px; background: var(--dusk); border: 1px solid var(--hair-dark); box-shadow: 0 18px 50px rgba(20, 14, 10, .35); backdrop-filter: none; font-family: var(--text); }
body #cookie-consent .cookie-consent-inner { flex-direction: column; align-items: stretch; gap: 14px; padding: 18px 18px 16px; max-width: none; }
body #cookie-consent .cookie-consent-text { color: var(--cream-2); font: 400 14px/1.5 var(--text); margin: 0; }
body #cookie-consent .cookie-consent-text a { color: var(--gold); }
body #cookie-consent .cookie-consent-actions { display: flex; gap: 8px; justify-content: flex-end; }
body #cookie-consent .cookie-consent-btn { min-height: 40px; padding: 0 16px; border-radius: 999px; background: transparent; color: var(--cream); border: 1px solid var(--hair-dark); font: 400 14px/1 var(--text); }
body #cookie-consent .cookie-consent-accept { background: var(--cream); color: var(--ink); border-color: var(--cream); }

/* ---------- legacy bits with no place in the new world ---------- */
.bp-honeypot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.hero-shapes, .shape, .grain, .hero-background, .svgContainer, .reading-progress:empty:not([style]) { display: none; }
.nav-premium, .footer-premium, .mobile-menu-overlay { display: none !important; }

/* ---------- small screens ---------- */
@media (max-width: 960px) {
  .site-foot__grid { grid-template-columns: 1fr 1fr; }
  .site-foot__lead { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .site-nav__links { display: none; }
  .site-nav__menu { display: inline-block; }
  .site-nav__mark { font-size: 21px; }
  .site-nav__right { padding-left: 6px; }
}
@media (max-width: 600px) {
  body { font-size: 17px; }
  .page-hero, .blog-header { padding-top: 116px; }
  .page-hero::after, .blog-header::after { background: linear-gradient(0deg, rgba(24, 16, 12, .9) 0%, rgba(24, 16, 12, .62) 60%, rgba(24, 16, 12, .45)); }
  .blog-content { font-size: 17.5px; }
  .blog-toc-list { columns: 1; }
  .blog-cta { padding: 24px; }
  th, td { padding-right: 12px; font-size: 14.5px; }
  .site-foot__grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media print { .site-nav, .site-foot, .final-cta, .back-to-top, .reading-progress, body::after { display: none !important; } .page-hero, .blog-header { color: var(--ink); background: none; padding-top: 0; } .page-hero::before, .page-hero::after, .blog-header::before, .blog-header::after { display: none; } .page-hero-title, .blog-title { color: var(--ink); text-shadow: none; } }