/* Existing public routes share the approved JP Studio presentation.
   Functional classes, chart dimensions and form visibility remain owned by their pages. */
body.studio-public,
body.studio-public:is(.niche, .studio-house, .website-service, .growth-site, .redesign, .first-site) {
  --paper: #fafaf9;
  --paper-deep: #efeeeb;
  --stock: #fafaf9;
  --white: #fafaf9;
  --cream: #fafaf9;
  --ink: #23221f;
  --muted: rgb(35 34 31 / 65%);
  --line: rgb(35 34 31 / 16%);
  --pink: #efeeeb;
  --sun: #efeeeb;
  --yellow: #efeeeb;
  --amber: #efeeeb;
  --aqua: #efeeeb;
  --blue: #efeeeb;
  --teal: #23221f;
  --grass: #23221f;
  --green: #23221f;
  --accent: #23221f;
  --soft: #efeeeb;
  --surface: #efeeeb;
  --op-indigo: #23221f;
  --op-red: #23221f;
  --op-green: #23221f;
  --edge: 1px;
  --drop: 0px;
  --shadow: none;
  --radius-panel: 20px;
  --radius-control: 10px;
  --public-gutter: clamp(32px, 4vw, 80px);
  --font: Manrope, Arial, sans-serif;
  --heading: Manrope, Arial, sans-serif;
  --head: Manrope, Arial, sans-serif;
  --sans: Manrope, Arial, sans-serif;
  --fat: 600;
  --mid: 500;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.7 Manrope, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
body.studio-public :is(button, input, textarea, select, summary) { font-family: Manrope, Arial, sans-serif; }
body.studio-public :is(h1, h2, h3, h4) {
  font-family: Manrope, Arial, sans-serif;
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: 1.12;
  color: inherit;
  text-transform: none;
  text-wrap: balance;
}
body.studio-public h1 {
  font-size: clamp(44px, 6vw, 88px);
  line-height: 1.06;
  letter-spacing: -.055em;
  max-width: 20ch;
  margin: 20px 0 24px;
}
body.studio-public h2 { font-size: clamp(32px, 3.7vw, 54px); margin-bottom: 24px; }
body.studio-public h3 { font-size: clamp(22px, 2vw, 28px); margin-bottom: 14px; }
body.studio-public :is(h1, h2) em {
  font-style: normal;
  color: inherit;
  background: transparent;
  box-shadow: none;
}
body.studio-public :is(p, li) { text-wrap: pretty; }
body.studio-public :is(a, button, input, textarea, select, summary):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}
body.studio-public .wrap {
  width: calc(100% - var(--public-gutter) * 2);
  max-width: none;
  margin-inline: auto;
}
body.studio-public main { padding-bottom: 0; }
body.studio-public main > section { padding-block: 72px; }
body.studio-public :is(.hero, .studio-house .hero) { padding-block: 48px 64px; background: var(--paper); }
body.studio-public .hero::before { display: none; }
body.studio-public .hero h1 { font-size: clamp(44px, 6vw, 88px); max-width: 17ch; margin: 20px 0 24px; }
body.studio-public .hero-grid { gap: clamp(32px, 5vw, 80px); }
body.studio-public :is(.lede, .hero-lead, .intro > p) {
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: 1.6;
  font-weight: 400;
  color: var(--muted);
  max-width: 43ch;
}
body.studio-public :is(.eyebrow, .poster-label, .small-label, .art-label, .case-meta, .house-showcase-kicker) {
  font-family: Manrope, Arial, sans-serif;
  font-size: 11px;
  line-height: 1.6;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
body.studio-public .eyebrow { margin-bottom: 12px; }
body.studio-public .eyebrow::before,
body.studio-public .eyebrow > i { display: none; }
body.studio-public :is(.hero-fine, .hero-price, .hero-note, .small, .pk-note, .meta, .src) {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
  font-weight: 400;
}
body.studio-public .hero-actions { margin-top: 28px; gap: 18px 24px; }
body.studio-public :is(.btn, .button, .cta, .action, .submit, .lf-send) {
  min-height: 48px;
  padding: 13px 24px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  box-shadow: none;
  text-decoration: none;
  transition: opacity 160ms ease, background-color 160ms ease;
  transform: none;
}
body.studio-public :is(.btn, .button, .cta, .action, .submit, .lf-send):is(:hover, :active) {
  opacity: .82;
  transform: none;
  box-shadow: none;
}
body.studio-public :is(.btn, .button, .cta, .action, .submit, .lf-send):disabled {
  opacity: .55;
  cursor: wait;
  transform: none;
}
body.studio-public :is(.text-link, .whatsapp-link, .work-note a) {
  color: inherit;
  font-size: 14px;
  font-weight: 500;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
/* Remove arrows added by the old presentation, preserving diagram connectors. */
body.studio-public .scope-list li::after,
body.studio-public :is(.btn, .button, .cta, .text-link, .work-note a)::after { content: none; }
body.studio-public :is(.btn, .button, .cta, .text-link, .work-note a) > svg { display: none; }

/* Editorial service pages, pricing, and research. */
body.studio-public :is(.def, .card, .pk, .add, .lad-row, .bars, .cite, .panel, .aside, .board, .surface, .open, .work-note) {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: none;
  transform: none !important;
}
body.studio-public :is(.card, .card:first-child, .card:last-child) { background: var(--paper) !important; min-height: 0; padding: 28px; border: 1px solid var(--line); }
body.studio-public :is(.card-grid, .cards, .grid) { gap: 24px; }
body.studio-public .card-grid { border-top: 0; }
body.studio-public .grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }
body.studio-public .card :is(h3, b) { font-size: 25px; line-height: 1.2; font-weight: 600; }
body.studio-public .card h3 { margin: 22px 0 16px; }
body.studio-public .card p { color: var(--muted); font-size: 15px; line-height: 1.75; }
body.studio-public :is(.num, .card .no) { font-weight: 500; color: var(--ink); }
body.studio-public .num { font-size: clamp(40px, 4vw, 64px); line-height: 1; }
body.studio-public .def { padding: 26px 30px; margin-top: 32px; max-width: 64ch; }
body.studio-public .def p { font-size: clamp(18px, 1.7vw, 23px); line-height: 1.6; font-weight: 400; }
body.studio-public :is(.section-top, .house-showcase-head) { margin-bottom: 32px; }
body.studio-public :is(.section-top h2, .house-showcase-head h2, .scope-grid h2, .faq h2) {
  font-size: clamp(32px, 3.7vw, 54px);
  line-height: 1.12;
}
body.studio-public :is(.section-top > p, .house-showcase-head > p, .scope-note) { color: var(--muted); line-height: 1.75; }
body.studio-public .scope-section { background: #efeeeb; border: 0; }
body.studio-public .scope-list { border-top: 1px solid var(--line); }
body.studio-public .scope-list li { border-bottom: 1px solid var(--line); font-weight: 500; padding-block: 16px; }
body.studio-public .work-note { padding: 22px 26px; margin-top: 32px; }
body.studio-public .lad { gap: 16px; }
body.studio-public .lad-row { padding: 28px; }
body.studio-public .lad-body p { font-weight: 400; }
body.studio-public .lad-body p.lad-spec { text-transform: none; letter-spacing: 0; font-size: 13px; line-height: 1.7; }
body.studio-public :is(.lad-n, .lad-price, .add b, .add .add-p, .pk-price b) { font-weight: 600; }
body.studio-public :is(.lad-feature, .pk-feature) { background: var(--ink); color: var(--paper); border-color: var(--ink); box-shadow: none; }
body.studio-public .pk { padding: 28px 24px; }
body.studio-public .pk h3 { font-size: 25px; line-height: 1.2; }
body.studio-public .pk p.pk-sub { font-size: 12px; letter-spacing: 0; text-transform: none; margin-top: 6px; }
body.studio-public .pk p.pk-for { font-weight: 400; font-size: 15px; line-height: 1.7; }
body.studio-public .tl { border-top: 1px solid rgb(35 34 31 / 16%); }
body.studio-public .tl li { border-color: var(--line); padding-left: 18px; font-size: 14px; }
body.studio-public .tl li::before { width: 4px; height: 4px; border-radius: 50%; background: currentColor; top: 1.2em; }
body.studio-public .pk-feature .tl,
body.studio-public .pk-feature .tl li { border-color: rgb(250 250 249 / 20%); }
body.studio-public .add { padding: 22px; }
body.studio-public .add small { font-size: 13px; line-height: 1.7; }
body.studio-public :is(table, .bars, .cite) { background: var(--paper); color: var(--ink); box-shadow: none; border: 1px solid var(--line); }
body.studio-public table { font-size: 14px; line-height: 1.65; }
body.studio-public :is(th, td) { padding: 16px 18px; border-bottom: 1px solid var(--line); }
body.studio-public thead th { background: var(--ink); color: var(--paper); font-weight: 600; }
body.studio-public tr.n :is(th, td) { background: #efeeeb; }
body.studio-public .tablewrap { padding: 0; }
body.studio-public .bars { padding: 24px; }
body.studio-public .bars figcaption { font-weight: 600; }
body.studio-public .bar { height: 16px; border: 0; background: #e7e6e2; }
body.studio-public .bar span { background: var(--ink); border-right: 0; }
body.studio-public .tot .bar span { background: var(--ink); }
body.studio-public :is(.bar-l, .bar-v) { font-size: 13px; font-weight: 500; }
body.studio-public .tip { border-left: 2px solid var(--ink); font-weight: 500; }
body.studio-public .cite code { border: 1px solid var(--line); background: #efeeeb; font-weight: 500; }
body.studio-public .legal { padding-top: 0; }
body.studio-public .legal > .wrap { max-width: 900px; margin-inline: var(--public-gutter) auto; }
body.studio-public .legal :is(p, li) { font-size: 16px; line-height: 1.85; max-width: 68ch; }
body.studio-public .legal h2 { font-size: clamp(26px, 2.7vw, 36px); margin: 42px 0 18px; }
body.studio-public .legal h2:first-child { margin-top: 0; }

/* Quiet artwork frames retain their actual images and underlying layouts. */
body.studio-public :is(.poster, .niche-poster, .art, .screen, .niche-site, .shop-screen, .case-preview, .house-showcase-frame, .hero-card, .hero-card-inner) {
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: none;
  transform: none !important;
  background: #efeeeb;
}
body.studio-public :is(.poster, .niche-poster, .art)::after { display: none; }
body.studio-public :is(.screen, .niche-site, .shop-screen) { background: var(--paper); overflow: hidden; border-radius: 14px; }
body.studio-public .hero-card-inner { background: var(--paper); }
body.studio-public .hero-card strong { font-weight: 600; line-height: 1.15; }
body.studio-public .hero-card small { font-size: 11px; font-weight: 500; letter-spacing: .06em; }
body.studio-public :is(.screen-top, .shop-top, .mock-nav, .browser-chrome) { border-bottom-width: 1px; font-weight: 500; }
body.studio-public .stamp { left: 12px; bottom: 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); box-shadow: none; transform: none; font-weight: 500; }
body.studio-public :is(.screen-action, .mini-button, .mock-cta) { border-width: 1px; border-radius: 999px; background: var(--ink); color: var(--paper); font-weight: 500; }
body.studio-public :is(.mock-tags span, .house-showcase-services li) { border-color: var(--line); font-weight: 500; }
body.studio-public .mock-caption { transform: none; color: var(--muted); }
body.studio-public .house-showcase-frame { overflow: hidden; }
body.studio-public .house-showcase-story { background: var(--ink); color: var(--paper); border-left: 0; }
body.studio-public .house-showcase-story :is(.house-showcase-kicker, .house-showcase-desc) { color: rgb(250 250 249 / 74%); }
body.studio-public .house-showcase-services li { border-color: rgb(250 250 249 / 25%); }
body.studio-public .house-showcase-title { font-size: clamp(30px, 3vw, 44px); line-height: 1.13; }
body.studio-public .house-showcase-caption { background: var(--paper); border-top: 1px solid var(--line); color: var(--muted); }
body.studio-public :is(.service-card, .workflow, .workflow-item, .art-note) { border-radius: 18px; box-shadow: none; }
body.studio-public :is(.website-card, .automation-card, .workflow) { background: #efeeeb; }
body.studio-public .workflow-item { border: 1px solid var(--line); background: var(--paper); }
body.studio-public .service-copy :is(p, .workflow-note) { color: var(--muted); }
body.studio-public .flow-icon { background: #efeeeb; color: var(--ink); }
body.studio-public .facts { background: var(--paper); border-block: 1px solid var(--line); }
body.studio-public .fact { border-color: var(--line); border-right-width: 1px; }
body.studio-public .fact b { font-weight: 600; }
body.studio-public .fact :is(span, div > span) { color: var(--muted); font-weight: 400; }
body.studio-public :is(.fact-dot, .note-dot) { background: var(--ink); }

/* The process and enquiry areas provide deliberate contrast. */
body.studio-public :is(.process, .form-section, .cta-band) {
  background: var(--ink);
  color: var(--paper);
  border: 0;
  box-shadow: none;
  transform: none;
}
body.studio-public .cta-band { padding: clamp(28px, 4vw, 56px); border-radius: 20px; }
body.studio-public .process { padding-block: 64px; }
body.studio-public .process-shell { padding: 0; background: transparent; color: inherit; border-radius: 0; }
body.studio-public :is(.process, .form-section, .cta-band) .eyebrow { color: rgb(250 250 249 / 68%); background: transparent; }
body.studio-public :is(.process h2, .form-intro h2, .cta-band h2) { color: var(--paper); font-size: clamp(34px, 4vw, 58px); line-height: 1.1; }
body.studio-public :is(.process-note, .form-intro > p, .form-alternative > p, .cta-band > p, .price-note) {
  color: rgb(250 250 249 / 72%);
  background: transparent;
  font-weight: 400;
  line-height: 1.75;
}
body.studio-public .step {
  min-height: 0;
  padding: 24px 0 0;
  border: 0;
  border-top: 1px solid rgb(250 250 249 / 24%);
  background: transparent !important;
  box-shadow: none;
}
body.studio-public .step b { color: var(--paper); font-size: 30px; font-weight: 500; padding-top: 0; }
body.studio-public .step h3 { font-size: 24px; line-height: 1.25; margin: 22px 0 14px; }
body.studio-public .step p { color: rgb(250 250 249 / 72%); font-size: 14px; line-height: 1.75; }
body.studio-public .form-section { padding-block: 72px; }
body.studio-public .form-grid { gap: clamp(32px, 6vw, 88px); }
body.studio-public .form-intro { top: 112px; }
body.studio-public .form-intro h2 { margin: 22px 0 24px; max-width: 15ch; }
body.studio-public .price-note { padding: 16px 0 0; border: 0; border-top: 1px solid rgb(250 250 249 / 20%); border-radius: 0; box-shadow: none; transform: none; }
body.studio-public :is(.form-section, .cta-band) :is(.button, .btn, .lf-send) { background: var(--paper); color: var(--ink); border-color: var(--paper); }
body.studio-public .form-card {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: clamp(24px, 3vw, 40px);
  box-shadow: none;
}
body.studio-public .form-card h3 { font-size: 29px; line-height: 1.2; margin-bottom: 12px; }
body.studio-public .form-card > p { color: var(--muted); font-size: 14px; line-height: 1.7; }
body.studio-public .form-card :is(.submit, .button) { background: var(--ink); color: var(--paper); border-color: var(--ink); }
body.studio-public :is(.field label, .field legend, .lf label) { font-size: 12px; font-weight: 500; letter-spacing: 0; line-height: 1.5; text-transform: none; }
body.studio-public :is(.field input, .field select, .lf input):not([type="radio"]):not([type="checkbox"]):not([type="hidden"]),
body.studio-public :is(.field textarea, .lf textarea, .text-input, .verify-code-row input) {
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid rgb(35 34 31 / 28%);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  box-shadow: none;
}
body.studio-public :is(.field textarea, .lf textarea) { min-height: 130px; }
body.studio-public :is(.field input, .field textarea, .lf input, .lf textarea)::placeholder { color: var(--muted); opacity: 1; }
body.studio-public .field .choice input { width: 1px; min-height: 1px; padding: 0; border: 0; }
body.studio-public .choice span,
body.studio-public .lf-chip {
  border: 1px solid rgb(35 34 31 / 28%);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  box-shadow: none;
}
body.studio-public :is(.choice span, .lf-chip):hover { background: #efeeeb; }
body.studio-public .choice input:checked + span,
body.studio-public .choice input:checked + span:hover,
body.studio-public .lf-chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
body.studio-public :is(.field small, .privacy-note, .privacy, .form-card .lf-note) { color: var(--muted); font-size: 11px; line-height: 1.7; }
body.studio-public .lf-note { color: rgb(250 250 249 / 72%); font-size: 12px; line-height: 1.7; }
body.studio-public .lf-note a { color: inherit; }
body.studio-public .form-progress li { background: #efeeeb; color: var(--muted); border-radius: 10px; font-weight: 500; }
body.studio-public .form-progress li > span { background: #e1e0dc; color: var(--ink); }
body.studio-public .form-progress li[aria-current="step"] { background: var(--ink); color: var(--paper); }
body.studio-public .form-progress li[aria-current="step"] > span { background: var(--paper); color: var(--ink); }
body.studio-public .form-progress li.is-complete > span { background: var(--ink); color: var(--paper); }
body.studio-public .form-step-title { font-size: 18px; font-weight: 600; line-height: 1.4; }
body.studio-public .form-back { background: var(--paper); color: var(--ink); border: 1px solid var(--line); box-shadow: none; font-weight: 500; }
body.studio-public :is(.form-error, .success, .verify-card, .confirmation, .lf-msg, .stage, .loading, .status, .market-status) {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #efeeeb;
  color: var(--ink);
  box-shadow: none;
  font-weight: 500;
}
body.studio-public :is(.form-error, .lf-msg.err, .message.error, .verify-error) { color: var(--ink); font-weight: 600; }
body.studio-public .form-error,
body.studio-public .lf-msg.err { border-left: 3px solid var(--ink); }
body.studio-public .lf-msg.ok { background: var(--paper); color: var(--ink); }
body.studio-public .verify-card { background: var(--paper); padding: 18px; }
body.studio-public .verify-status.is-verified { color: var(--ink); }
body.studio-public .verify-button { min-height: 44px; padding: 10px 15px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); font-size: 13px; font-weight: 500; }
body.studio-public .verify-button:is(:hover, :focus-visible) { background: var(--ink); color: var(--paper); }
body.studio-public .verify-consent input { width: 20px; min-height: 20px; height: 20px; padding: 0; accent-color: var(--ink); }

/* Dropdown JS owns fixed positioning, keyboard state and hidden attributes. */
body.studio-public .studio-dropdown .studio-dropdown-trigger {
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid rgb(35 34 31 / 28%);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  font-size: 15px;
  font-weight: 400;
  box-shadow: none;
}
body.studio-public .studio-dropdown .studio-dropdown-trigger:hover { background: #efeeeb; }
body.studio-public .studio-dropdown .studio-dropdown-trigger:focus-visible { outline-color: var(--ink); }
body.studio-public .studio-dropdown .studio-dropdown-trigger[aria-expanded="true"] { border-color: var(--ink); }
body.studio-public .studio-dropdown .studio-dropdown-trigger[aria-invalid="true"] { border: 2px solid var(--ink); }
body.studio-public .studio-dropdown .studio-dropdown-menu {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 5px;
  box-shadow: 0 12px 32px rgb(35 34 31 / 15%);
}
body.studio-public .studio-dropdown .studio-dropdown-option { min-height: 44px; padding: 11px 12px; border-radius: 8px; background: var(--paper); color: var(--ink); font-size: 14px; font-weight: 400; }
body.studio-public .studio-dropdown .studio-dropdown-option:is(.is-active, [aria-selected="true"]) { background: #efeeeb; }
body.studio-public .studio-dropdown-option[aria-selected="true"]::after { border-color: var(--ink); }
body.studio-public .studio-dropdown .studio-dropdown-error { color: var(--ink); font-weight: 600; }

/* FAQ stays native details/summary, with a restrained disclosure indicator. */
body.studio-public details,
body.studio-public .faq details { background: var(--paper); border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 22px 0; box-shadow: none; }
body.studio-public summary,
body.studio-public .faq summary { padding: 0 32px 0 0; font-size: 16px; font-weight: 500; line-height: 1.5; min-height: 32px; }
body.studio-public summary:hover,
body.studio-public details[open] summary { background: transparent; }
body.studio-public summary::after { font-size: 24px; font-weight: 400; }
body.studio-public details .body { padding: 16px 0 0; }
body.studio-public details p,
body.studio-public .faq details p { color: var(--muted); font-size: 15px; line-height: 1.75; }
body.studio-public .faq { background: var(--paper); }

/* Booking and checkout retain all stateful controls and payment embeds. */
body.studio-public .layout { gap: 24px; margin-top: 36px; }
body.studio-public .panel { padding: clamp(24px, 3vw, 38px); }
body.studio-public .panel h2 { font-size: clamp(26px, 3vw, 38px); }
body.studio-public .aside { padding: 26px; }
body.studio-public .aside strong { font-weight: 600; }
body.studio-public .day { border-top: 1px solid var(--line); }
body.studio-public .slot { min-height: 48px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); font-size: 14px; font-weight: 500; box-shadow: none; }
body.studio-public .slot:hover { background: #efeeeb; }
body.studio-public .slot[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); box-shadow: none; }
body.studio-public .book-row { border-top: 1px solid var(--line); }
body.studio-public .confirmation { padding: 26px; }
body.studio-public .confirmation .action { background: var(--ink); color: var(--paper); }
body.studio-public .summary { background: var(--ink) !important; color: var(--paper); border-color: var(--ink); }
body.studio-public .summary li { font-weight: 400; }
body.studio-public .price strong { font-weight: 600; }
body.studio-public :is(.price span, .note, .secure) { font-weight: 500; }
body.studio-public .divider { border-top: 1px solid rgb(250 250 249 / 24%); }
body.studio-public .finish { background: #efeeeb; color: var(--ink); }

/* Keep the shared enquiry dialog at its own compact scale. */
body.studio-public .intake-heading h2 { font-size: clamp(28px, 3.4vw, 38px); font-weight: 500; line-height: 1.15; letter-spacing: -.055em; max-width: 17ch; margin: 0; }
body.studio-public .intake-success h3 { font-size: 26px; font-weight: 500; letter-spacing: -.04em; margin: 0 0 12px; }

/* Quickfit diagrams keep their connectors, grouping, and scalable SVG canvas. */
body.studio-public > .wrap:has(.board) { padding-block: 48px; padding-inline: 0; }
body.studio-public .board { padding: clamp(16px, 2.4vw, 28px); }
body.studio-public hr.rule { height: 1px; background: var(--line); }
body.studio-public .key span { border: 1px solid var(--line); font-weight: 500; }
body.studio-public .key .dot { border-width: 1px; }
body.studio-public .key .dot.c { background: var(--paper); }
body.studio-public .key .dot.s { background: #b7b6b0; }
body.studio-public .key .dot.a { background: var(--ink); }
body.studio-public .surface { padding: 24px; }
body.studio-public :is(.surface.andrea, .surface.cliente) { background: var(--ink); color: var(--paper); }
body.studio-public :is(.surface.andrea, .surface.cliente) .eyebrow { color: rgb(250 250 249 / 72%); }
body.studio-public .open-row { background: var(--paper); padding: 18px 22px; }
body.studio-public .open-row + .open-row { border-top: 1px solid var(--line); }
body.studio-public .board .mermaid { font-family: Manrope, Arial, sans-serif; }
body.studio-public .board .mermaid .node :is(rect, circle, ellipse, polygon, path) { fill: var(--paper) !important; stroke: var(--ink) !important; stroke-width: 1px !important; }
body.studio-public .board .mermaid .node.sys :is(rect, circle, ellipse, polygon, path) { fill: #b7b6b0 !important; }
body.studio-public .board .mermaid .node:is(.and, .pay) :is(rect, circle, ellipse, polygon, path) { fill: var(--ink) !important; }
body.studio-public .board .mermaid .node.later :is(rect, circle, ellipse, polygon, path) { fill: #efeeeb !important; stroke-dasharray: 5 4 !important; }
body.studio-public .board .mermaid .cluster rect { fill: #efeeeb !important; stroke: rgb(35 34 31 / 28%) !important; stroke-width: 1px !important; }
body.studio-public .board .mermaid :is(.nodeLabel, .cluster-label, .edgeLabel) { color: var(--ink) !important; font-family: Manrope, Arial, sans-serif !important; }
body.studio-public .board .mermaid .node:is(.and, .pay) .nodeLabel { color: var(--paper) !important; }
body.studio-public .board .mermaid .edgeLabel rect { fill: var(--paper) !important; }
body.studio-public .board .mermaid :is(.flowchart-link, .edgePath path) { stroke: var(--ink) !important; }
body.studio-public .board .mermaid marker path { fill: var(--ink) !important; stroke: var(--ink) !important; }

@media (max-width: 1000px) {
  body.studio-public { --public-gutter: 28px; }
  body.studio-public .hero h1 { font-size: clamp(44px, 6.4vw, 68px); }
}
@media (max-width: 760px) {
  body.studio-public { --public-gutter: 20px; font-size: 15px; }
  body.studio-public main > section { padding-block: 52px; }
  body.studio-public :is(.hero, .studio-house .hero) { padding-block: 32px 48px; }
  body.studio-public :is(h1, .hero h1) { font-size: clamp(40px, 8.2vw, 62px); line-height: 1.09; max-width: 19ch; }
  body.studio-public :is(h2, .section-top h2, .house-showcase-head h2, .scope-grid h2, .faq h2) { font-size: 36px; line-height: 1.15; }
  body.studio-public :is(.process h2, .form-intro h2, .cta-band h2) { font-size: 38px; line-height: 1.12; }
  body.studio-public :is(.hero-lead, .lede, .intro > p) { font-size: 17px; line-height: 1.65; }
  body.studio-public .hero-actions { flex-direction: row; align-items: center; gap: 16px 22px; }
  body.studio-public :is(.form-grid, .scope-grid, .layout) { grid-template-columns: minmax(0, 1fr); }
  body.studio-public .form-intro { position: static; }
  body.studio-public :is(.process, .form-section) { padding-block: 52px; }
  body.studio-public .step { padding-top: 22px; }
  body.studio-public .step h3 { font-size: 22px; margin-top: 0; }
  body.studio-public .process-shell .step h3 { margin-top: 18px; }
  body.studio-public .form-card { padding: 28px; }
  body.studio-public .legal > .wrap { margin-inline: auto; }
  body.studio-public .legal :is(p, li) { font-size: 15px; }
  body.studio-public .house-showcase-story { border-top: 0; }
  body.studio-public .house-showcase-title { font-size: 36px; }
  body.studio-public :is(.card, .card:first-child, .card:last-child, .lad-row, .pk, .def) { padding: 24px; }
}
@media (max-width: 500px) {
  body.studio-public { --public-gutter: 18px; }
  body.studio-public :is(h1, .hero h1) { font-size: clamp(38px, 10.3vw, 52px); }
  body.studio-public :is(h2, .section-top h2, .house-showcase-head h2, .scope-grid h2, .faq h2) { font-size: 32px; }
  body.studio-public :is(.process h2, .form-intro h2, .cta-band h2) { font-size: 34px; }
  body.studio-public :is(.btn, .button, .cta, .action, .submit, .lf-send) { font-size: 13px; padding-inline: 20px; }
  body.studio-public :is(.cards, .card-grid, .field-row, .verify-grid) { grid-template-columns: minmax(0, 1fr); }
  body.studio-public .form-card { padding: 24px 20px; }
  body.studio-public .form-card h3 { font-size: 26px; }
  body.studio-public .intake-heading h2 { font-size: 32px; }
  body.studio-public .bar-row { grid-template-columns: 7.2em minmax(0, 1fr) 2.8em; gap: 8px; }
  body.studio-public .bar-l { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  body.studio-public :is(.btn, .button, .cta, .action, .submit, .lf-send) { transition: none; }
}
@media (forced-colors: active) {
  body.studio-public :is(a, button, input, textarea, select, summary):focus-visible { outline-color: Highlight; }
  body.studio-public .studio-dropdown .studio-dropdown-option.is-active { outline: 1px solid Highlight; }
  body.studio-public .studio-dropdown-option[aria-selected="true"]::after { border-color: Highlight; }
}