/* Wyrd-first public-site system. Scoped to public pages so the authenticated
   workbench continues to use the application theme. */
:root {
  --public-action-radius: 0px;
}
/* Colors come from the shared light mapping in mitari-theme.css; the public
   profile adds only its quiet editorial ground and one soft card shadow. */
body:has(.public-nav) {
  --public-card-shadow: 0 12px 34px color-mix(in srgb, var(--text) 6%, transparent);
  background: radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--brand-strong) 7%, transparent), transparent 28%), var(--bg);
  color: var(--text);
}
body:has(.public-nav) a { color: inherit; }
/* Public actions share the brand's one radius. Keep this selector scoped to
   the marketing shell so authenticated workspace controls retain their own
   control language. Status badges, chips, tags, cards, and form fields are
   intentionally excluded. */
body:has(.public-nav) .public-nav-console,
body:has(.public-nav) .public-button-dark,
body:has(.public-nav) .public-button-light,
body:has(.public-nav) .public-nav-toggle,
body:has(.public-nav) .intent-page .btn,
body:has(.public-nav) .cb,
body:has(.public-nav) .ap-btn,
body:has(.public-nav) .sp-btn,
body:has(.public-nav) .btn-submit,
body:has(.public-nav) .vp-cta a {
  border-radius: var(--public-action-radius);
}
body:has(.sp-wrap) .sp-btn {
  border-radius: var(--public-action-radius);
}
.public-nav { position: sticky; top: 0; z-index: 30; min-height: 72px; padding: 0 max(20px, calc((100% - 1280px) / 2)); display: flex; align-items: center; gap: 30px; background: var(--surface); border-bottom: 1px solid var(--border); }
.public-nav-brand, .public-footer-brand { font: 650 28px/1 var(--font-serif); letter-spacing: -.04em; text-decoration: none; color: var(--text); }
.public-nav-links { display: flex; align-items: center; gap: clamp(14px, 2vw, 27px); margin-left: auto; font: 500 14px var(--font-body); color: var(--muted); }
.public-nav-links > a { text-decoration: none; white-space: nowrap; }
.public-nav-links > a:hover, .public-nav-links > a.active { color: var(--blue-dk); }
.public-nav-console, .public-button-dark { display: inline-flex; justify-content: center; align-items: center; gap: 8px; padding: 12px 17px; background: var(--text); color: var(--surface) !important; border: 1px solid var(--text); font-weight: 700; }
.public-nav-console, .public-button-dark, .public-button-light, .public-nav-toggle,
.public-card, .public-pill { border-radius: var(--public-action-radius); }
.public-nav-console:focus-visible, .public-button-dark:focus-visible,
.public-button-light:focus-visible, .public-nav-toggle:focus-visible,
.public-button-text:focus-visible { outline: 3px solid var(--blue-dk); outline-offset: 3px; }
.public-nav-toggle { display: none; margin-left: auto; background: transparent; border: 1px solid var(--border-mid); color: var(--text); padding: 8px 10px; font: 700 12px var(--font-mono); text-transform: uppercase; }
.public-footer { max-width: 1180px; margin: 64px auto 0; padding: 44px 28px 30px; border-top: 1px solid var(--border); display: grid; grid-template-columns: 1.15fr 1.85fr; gap: 40px; color: var(--text-muted); }
.public-footer p { max-width: 37ch; margin-top: 14px; font-size: 14px; line-height: 1.6; }
.public-footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.public-footer-links div { display: grid; align-content: start; gap: 8px; }
.public-footer-links strong { color: var(--text); font: 700 11px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 4px; }
.public-footer-links a { font-size: 14px; text-decoration: none; }
.public-footer-links a:hover { color: var(--blue-dk); }
.public-footer small { grid-column: 1 / -1; padding-top: 22px; border-top: 1px solid var(--border); font-size: 12px; }

.public-page { max-width: 1180px; padding: 0 28px; margin: 0 auto; }
.public-kicker { color: var(--eyebrow-muted); font: 800 12px var(--font-body); letter-spacing: .16em; text-transform: uppercase; }
.public-display { margin: 0; color: var(--text); font: 500 clamp(2.9rem, 5.4vw, 4.7rem)/.98 var(--font-serif); letter-spacing: -.052em; }
.public-section { padding: 74px 0; }
.public-section.alt { margin-inline: calc(max(28px, (100vw - 1180px) / 2) * -1); padding-inline: max(28px, calc((100vw - 1180px) / 2)); background: var(--surface); border-block: 1px solid var(--border); }
.public-section h2 { max-width: 20ch; margin: 0 0 16px; color: var(--text); font: 500 clamp(2.25rem, 4vw, 3rem)/1.05 var(--font-serif); letter-spacing: -.04em; }
.public-lede { max-width: 740px; color: var(--text-muted); font-size: 18px; line-height: 1.58; }
.public-button-light { display: inline-flex; justify-content: center; align-items: center; padding: 12px 17px; border: 1px solid var(--border-mid); background: var(--surface); color: var(--text); font-weight: 700; }
.public-button-text { display: inline-flex; align-items: center; padding: 12px 0; color: var(--muted); font-weight: 700; }
.public-button-dark:hover, .public-button-light:hover { text-decoration: none; transform: translateY(-1px); }
/* Public action controls share the homepage closing CTA response: boxed actions
   lift with a quiet hard shadow; text actions underline. This stays scoped to
   the public shell so workspace buttons, cards, tags, and form controls retain
   their own interaction language. */
body:has(.public-nav) :is(
  .public-nav-console,
  .public-button-dark,
  .public-button-light,
  .wh-hero-action,
  .bm-bottom-button,
  .intent-page .btn,
  .cb,
  .ap-btn,
  .sp-btn,
  .btn-submit,
  .vp-cta a,
  .vp-managed-button,
  a[class*="-btn"],
  button[class*="-btn"],
  a[class*="-button"],
  button[class*="-button"],
  a[class*="-cta"],
  button[class*="-cta"],
  a[class*="-action"],
  button[class*="-action"]
) {
  transition: transform .18s ease, box-shadow .18s ease;
}
body:has(.public-nav) :is(
  .public-nav-console,
  .public-button-dark,
  .public-button-light,
  .wh-hero-action,
  .bm-bottom-button,
  .intent-page .btn,
  .cb,
  .ap-btn,
  .sp-btn,
  .btn-submit,
  .vp-cta a,
  .vp-managed-button,
  a[class*="-btn"],
  button[class*="-btn"],
  a[class*="-button"],
  button[class*="-button"],
  a[class*="-cta"],
  button[class*="-cta"],
  a[class*="-action"],
  button[class*="-action"]
):hover {
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 5px 5px 0 color-mix(in srgb, var(--text) 10%, transparent);
}
body:has(.public-nav) :is(
  .public-nav-console,
  .public-button-dark,
  .public-button-light,
  .wh-hero-action,
  .bm-bottom-button,
  .intent-page .btn,
  .cb,
  .ap-btn,
  .sp-btn,
  .btn-submit,
  .vp-cta a,
  .vp-managed-button,
  a[class*="-btn"],
  button[class*="-btn"],
  a[class*="-button"],
  button[class*="-button"],
  a[class*="-cta"],
  button[class*="-cta"],
  a[class*="-action"],
  button[class*="-action"]
):active {
  transform: translateY(0);
  box-shadow: none;
}
body:has(.public-nav) :is(.public-button-text, .bm-bottom-link):hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.public-card { background: var(--surface); border: 1px solid var(--border); padding: 25px; box-shadow: var(--public-card-shadow); }
.public-pill { display: inline-block; padding: 4px 8px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); font: 600 11px var(--font-mono); }
/* Closing section shared by the home page and /demo: the three ways in. */
.public-closing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.public-closing .public-card { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.public-closing h3 { margin: 0; color: var(--text); font: 500 24px/1.15 var(--font-serif); letter-spacing: -.02em; }
.public-closing p { margin: 0; color: var(--text-muted); line-height: 1.55; }
.public-closing .public-card > a:first-of-type { margin-top: auto; }
.public-closing-pilot { color: var(--brand-strong) !important; font-size: 14px; font-weight: 700; }
@media (max-width: 900px) { .public-closing { grid-template-columns: 1fr; } }
.public-lede, .public-page .public-copy, .public-page .longform-copy { max-width: 68ch; }
.public-page .public-copy p + p, .public-page .longform-copy p + p { margin-top: 1.15em; }

@media (max-width: 900px) { .public-nav { padding: 0 20px; } .public-nav-toggle { display: block; } .public-nav-links { display: none; position: absolute; inset: 72px 0 auto; padding: 20px; background: var(--surface); border-bottom: 1px solid var(--border); flex-direction: column; align-items: stretch; gap: 0; } .public-nav-links.is-open { display: flex; } .public-nav-links > a { padding: 13px 0; border-bottom: 1px solid var(--border); } .public-nav-console { margin-top: 12px; border: 0 !important; } .public-footer { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .public-page { padding-inline: 20px; } .public-section { padding-block: 48px; } .public-section.alt { margin-inline: -20px; padding-inline: 20px; } .public-footer { padding-inline: 20px; margin-top: 40px; } .public-footer-links { grid-template-columns: 1fr 1fr; } .public-display { font-size: clamp(2.6rem, 13vw, 3.5rem); } }

/* At mobile widths, section titles should sit close to their introductory
   copy. These explicit pairs replace desktop grid gaps only after their
   public layouts have stacked; already-tight title/copy compositions stay
   untouched. */
@media (max-width: 720px) {
  body:has(.about-plan) .about-plan .ap-two,
  body:has(.about-plan) .about-plan .ap-team-head,
  body:has(.intent-page) .intent-page .two,
  body:has(.cp) .cp .ch,
  body:has(.cp) .cp .uh {
    gap: 12px;
  }

  body:has(.about-plan) .about-plan .ap-hero h1,
  body:has(.about-plan) .about-plan .ap-cta h2,
  body:has(.rs-hero) .rs-hero h1,
  body:has(.bl-hero) .bl-hero h1,
  body:has(.bl-hero) .bl-hero h2,
  body:has(.sec-hero) .sec-hero h1,
  body:has(.demo-hero-head) .demo-hero-head h1,
  body:has(.intent-page) .intent-page .hero h1,
  body:has(.cp) .cp .ch h1 {
    margin-bottom: 12px;
  }

  body:has(.cp) .cp .uh h2 {
    margin-bottom: 0;
  }
}

/* Customers: supplied Paai featured-story supporting details. */
.cp .story .pill { position: relative; display: inline-flex; align-items: center; margin-right: 180px; }
.cp .story .pill::after { content: "PARTNER DISCOVERY"; position: absolute; left: calc(100% + 18px); color: var(--muted); font: 750 10px var(--font-mono); letter-spacing: .08em; white-space: nowrap; }
.cp .story .metric::after { content: "The verification record preserves what was checked, what evidence supported the result, and why the work was accepted."; display: block; margin-top: 18px; color: var(--muted); font: 13px/1.5 var(--font-body); letter-spacing: 0; }
.cp .story .out::after { content: "INTENT → EVIDENCE → REVIEW → DECISION"; display: block; margin-top: 36px; color: var(--muted); font: 750 10px/1.8 var(--font-mono); letter-spacing: .08em; white-space: nowrap; }
.cp .story .out { align-self: center; }
.cp .story a.lime { display: inline-block; margin-top: 20px; color: var(--lime-text); font-weight: 850; font-size: 13px; }
.cp .story > .ce { display: block; margin-bottom: 18px; }

/* Customers hero: match the supplied Paai proof panel and CTA proportions. */
.cp .cu-actions > a { min-height: 52px; padding: 0 20px; font: 800 14px var(--font-display); text-decoration: none; }
.cp .ch > div > p { margin: 0 0 28px; }
.cp .quote::after { content: "FROM THE PAAI CUSTOMER STORY · CAUGHT BEFORE PRODUCTION"; display: block; margin-top: 18px; color: var(--muted); font: 800 10px var(--font-mono); letter-spacing: .11em; text-transform: uppercase; }
@media (max-width: 700px) { .cp .cu-actions > a { min-height: 52px; padding-inline: 20px; font-size: 14px; } }

/* Customers closing CTA: preserve the supplied two-line copy measure and rhythm. */
.cp .cta h2 { margin: 14px 0 20px; font-size: 48px; }
.cp .cta .cu-copy { max-width: 620px; margin: 0 auto 25px; color: var(--muted); font-size: 15px; line-height: 1.55; }

/* Major Customers-page section eyebrows alternate by their explicit section
   context. Card labels, badges, metadata, and the dark proof panel are not
   part of this marketing-eyebrow sequence. */
body:has(.cp) .cp .ch .ce,
body:has(.cp) .cp .out .ce,
body:has(.cp) .cp .cta .ce { color: var(--eyebrow-muted); }
body:has(.cp) .cp .story > .ce,
body:has(.cp) .cp .uses .uh .ce { color: var(--eyebrow-gold); }

/* Story figures: one graphic, three beats, one caption per beat. The markup is
   the finished picture; public-motion.js adds .is-playing to replay it from
   the first beat. Each animated part sets its own start with --d. */
.story { margin: 0; }
.story svg { display: block; width: 100%; height: auto; overflow: visible; }
.story .st-out { opacity: 0; }
.story-caps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 18px 0 0; padding: 0; list-style: none; }
.story-caps li { padding-top: 12px; border-top: 1px solid var(--border-mid); color: var(--text-muted); font-size: 15px; line-height: 1.5; }
.story-caps b { display: block; margin-bottom: 4px; color: var(--text); font: 600 17px var(--font-display); }
.story-replay { margin-top: 14px; padding: 6px 10px; border: 1px solid var(--border-mid); border-radius: var(--public-action-radius); background: transparent; color: var(--muted); font: 700 11px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.story-replay:hover { color: var(--text); border-color: var(--text); }
.story-replay:focus-visible { outline: 3px solid var(--blue-dk); outline-offset: 3px; }
.story.is-playing .st-in { animation: story-in .5s var(--d, 0s) both; }
.story.is-playing .st-out { animation: story-out .5s var(--d, 0s) both; }
.story.is-playing .st-draw { stroke-dasharray: 1; animation: story-draw .8s var(--d, 0s) both; }
.story.is-playing .story-caps li { animation: story-cap .5s var(--d, 0s) both; }
@keyframes story-in { from { opacity: 0; } }
@keyframes story-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes story-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes story-cap { from { opacity: .3; } }
@media (max-width: 700px) { .story-caps { grid-template-columns: 1fr; gap: 12px; } }
@media (prefers-reduced-motion: reduce) { .story.is-playing * { animation: none !important; } .story-replay { display: none; } }