@import url("https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300..600&display=swap");

/* ───────────────────────────────────────────────────────────────────────────
   Phyllis — Paper (variant A), dark
   White paper, black ink, Inter. Big confident headlines with a gray second
   line; the real product, in its light theme, is the imagery. Square corners,
   hairline borders, no decorative animation. Colour only for product state.
   Loaded last on every page. Remove this <link> to revert.
   ─────────────────────────────────────────────────────────────────────────── */
:root {
  --pp-paper: #0b0c0e;
  --pp-paper-2: #17181b;
  --pp-card: #121316;
  --pp-ink: #f4f4f5;
  --pp-ink-2: #d9dadd;
  --pp-gray: #6b6e74;
  --pp-body: #a1a4aa;
  --pp-muted: #7d8087;
  --pp-line: #222327;
  --pp-line-2: #34363b;
  --pp-on-ink: #0b0c0e;
  --pp-nav: rgba(11,12,14,.84);
  --pp-wash: linear-gradient(180deg, #141518, #0f1012);
  --pp-wash-2: linear-gradient(180deg, #141518, #101113);
  --pp-shadow: 0 1px 2px rgba(0,0,0,.3), 0 16px 40px -18px rgba(0,0,0,.7);
  --pp-inter: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Re-point the template palette: "light" = paper grounds, "dark" = ink type */
  --_🎨-color--base---base--light-0: #0b0c0e00;
  --_🎨-color--base---base--light-4: #0b0c0e0a;
  --_🎨-color--base---base--light-8: #0b0c0e14;
  --_🎨-color--base---base--light-16: #0b0c0e29;
  --_🎨-color--base---base--light-32: #0b0c0e52;
  --_🎨-color--base---base--light-48: #0b0c0e7a;
  --_🎨-color--base---base--light-64: #0b0c0ea3;
  --_🎨-color--base---base--light-88: #0b0c0ee0;
  --_🎨-color--base---base--light-100: #0b0c0e;
  --_🎨-color--base---base--dark-0: #f4f4f500;
  --_🎨-color--base---base--dark-4: #f4f4f50a;
  --_🎨-color--base---base--dark-8: #f4f4f514;
  --_🎨-color--base---base--dark-16: #f4f4f529;
  --_🎨-color--base---base--dark-32: #f4f4f552;
  --_🎨-color--base---base--dark-48: #f4f4f57a;
  --_🎨-color--base---base--dark-64: #f4f4f5a3;
  --_🎨-color--base---base--dark-88: #f4f4f5e0;
  --_🎨-color--base---base--dark-100: #f4f4f5;
  --_🎨-color--base---depth--light: #121316;
  --_🎨-color--base---lift--light: #1a1b1f;
  --_🎨-color--base---depth--dark: #121316;
  --_🎨-color--base---lift--dark: #1a1b1f;
  --_🎨-color--base---accent--primary: #f4f4f5;
  --_🎨-color--base---colors--nscorecoral: #f4f4f5;
  --_🎨-color--base---colors--nssyntaxmint: #17181b;
  --_🎨-color--base---colors--nspacketsky: #17181b;
  --_🎨-color--base---colors--nsqubitorchid: #17181b;
  --_🎨-color--base---colors--nslatencypeach: #17181b;
  --_🎨-color--base---colors--nscachesand: #17181b;

  /* Type: Inter everywhere */
  --_🔠-typography---font--body: var(--pp-inter);
  --_🔠-typography---font--button: var(--pp-inter);
  --_🔠-typography---font--heading-sans: var(--pp-inter);
  --_🔠-typography---font--heading-serif: var(--pp-inter);
  --_🔠-typography---font--label: var(--pp-inter);
  --_🔠-typography---weight--heading-sans: 500;
  --_🔠-typography---weight--heading-serif: 500;
  --_🔠-typography---weight--body: 400;
  --_🔠-typography---weight--button: 500;
  --_🔠-typography---weight--label: 500;
  --font-display: var(--pp-inter);

  /* Square */
  --_🔘-radius---general--default: 6px;
  --_🔘-radius---general--large: 10px;
  --_🔘-radius---general--small: 4px;
  --_🔘-radius---ui--button-base: 8px;
  --_🔘-radius---ui--input: 8px;
  --_🔘-radius---ui--tag: 4px;
}

/* ── Ground + type ─────────────────────────────────────────────────────── */
html, body, .page-wrapper, .main-wrapper { background-color: var(--pp-paper) !important; color: var(--pp-ink); }
body { font-family: var(--pp-inter) !important; -webkit-font-smoothing: antialiased; font-feature-settings: "cv02", "cv03", "cv04", "cv11"; letter-spacing: -.011em; }
h1, h2, h3, h4, h5, h6, .display, .type-h2, .type-h3, [class*="heading-style-h"], .sol-ph-title, .contact-ph-title {
  font-family: var(--pp-inter) !important; font-weight: 500 !important; color: var(--pp-ink);
}
h1, .heading-style-h0, .heading-style-h1, .sol-ph-title, .contact-ph-title { letter-spacing: -.052em !important; line-height: 1 !important; }
h2, .heading-style-h2, .heading-style-h3 { letter-spacing: -.045em !important; line-height: 1.05 !important; }
h3, h4, .heading-style-h4, .heading-style-h5, .heading-style-h6 { letter-spacing: -.025em !important; }
p, .tone-medium, .text-size-large, .text-size-medium { color: var(--pp-body); }
.ed-g, .pp-g { color: var(--pp-gray) !important; }
.label-large, .label-small, .uc-card-tag, .loop-num, .card-head, .text_article-category .label-large {
  font-family: var(--pp-inter) !important; font-weight: 500 !important; letter-spacing: -.005em !important;
  text-transform: none !important; font-size: 13px !important; color: var(--pp-muted) !important;
}

/* ── Banner + nav ─────────────────────────────────────────────────────── */
.banner { background: var(--pp-card) !important; color: var(--pp-body) !important; box-shadow: inset 0 0 0 1px var(--pp-line) !important; border-radius: 8px !important; }
.banner * { color: var(--pp-body) !important; }
.banner a { color: var(--pp-ink) !important; }
.banner svg { color: var(--pp-ink) !important; }
.navbar.w-nav { background-color: var(--pp-nav) !important; backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid var(--pp-line) !important; }
.navbar.w-nav .nav-menu a, .nav-menu a, .w-dropdown-toggle, .w-dropdown-toggle * { color: var(--pp-ink-2) !important; }
.w-dropdown-list, .nav-menu .dropdown_inner { background: var(--pp-card) !important; box-shadow: 0 0 0 1px var(--pp-line), var(--pp-shadow) !important; border-radius: 10px !important; }
.w-dropdown-list *, .w-dropdown-list .heading-style-h5, nav .heading-style-h5 { color: var(--pp-ink) !important; }
.w-dropdown-list p, .w-dropdown-list .tone-medium { color: var(--pp-body) !important; }
.nav-menu .nav_feature { border-radius: 8px !important; }
img[alt="phyllis"], [class*="footer"] img[alt="phyllis"] { filter: none; }
.menu-button, .menu-button * { color: var(--pp-ink) !important; }

/* ── Buttons: ink primary, paper secondary ───────────────────────────── */
.cta_primary { font-family: var(--pp-inter) !important; font-weight: 500 !important; letter-spacing: -.01em; border-radius: 8px !important; color: var(--pp-on-ink) !important; }
.cta_primary .btn-bg { border-radius: 8px !important; background-color: var(--pp-ink) !important; border-color: var(--pp-ink) !important; }
.cta_primary .text-button { color: var(--pp-on-ink) !important; text-shadow: 0 1.5em 0 var(--pp-on-ink) !important; }
.cta_primary .icon_button, .cta_primary svg { color: var(--pp-on-ink) !important; }
.cta_primary.w-variant-1ff8d96e-78cc-eac8-de90-206ecdaded5f .btn-bg, .cta_primary.secondary .btn-bg,
.cta_primary[data-wf--cta-primary--variant="secondary"] .btn-bg { background-color: var(--pp-card) !important; border-color: var(--pp-line) !important; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.cta_primary.w-variant-1ff8d96e-78cc-eac8-de90-206ecdaded5f .text-button, .cta_primary[data-wf--cta-primary--variant="secondary"] .text-button,
.cta_primary.w-variant-1ff8d96e-78cc-eac8-de90-206ecdaded5f, .cta_primary[data-wf--cta-primary--variant="secondary"],
.cta_primary.w-variant-1ff8d96e-78cc-eac8-de90-206ecdaded5f svg, .cta_primary[data-wf--cta-primary--variant="secondary"] svg { color: var(--pp-ink) !important; text-shadow: 0 1.5em 0 var(--pp-ink) !important; }
.w-tab-link { color: var(--pp-body) !important; }
.w-tab-link.w--current { background: var(--pp-card) !important; color: var(--pp-ink) !important; border-radius: 10px !important; box-shadow: inset 0 0 0 1px var(--pp-line), var(--pp-shadow) !important; }
.w-tab-link.w--current * { color: var(--pp-ink) !important; }

/* ── Sections: flatten the theme's black bands to paper ─────────────── */
[class*="section_"], .section_home-a-features, .section_home-a-blog, .section_home-a-blog .card_blog, .section_home-a-blog [class*="card"], [class*="section_cta"] {
  background-color: var(--pp-paper) !important; background-image: none !important;
}
.page-wrapper .main-wrapper > section + section, .page-wrapper main > section + section, .page-wrapper > section + section { border-top: 1px solid var(--pp-line) !important; }
.section_home-a-features h2, .section_investors :where(h1,h2,h3,h4,h5,h6), .section_cta :where(h1,h2,h3), .section_home-a-scroll .loop-head h2 { color: var(--pp-ink) !important; }
.section_investors p, .section_investors .tone-medium, .section_home-a-scroll .loop-head p { color: var(--pp-body) !important; }

/* ── Panels that held teal waves: paper wash, hairline ────────────────── */
.page-wrapper :is(.nav-cta_desktop, .right_profile, .left_book, .card-plan_top-tile, .video_about, .right_product-a,
  .right_column.data-stack, .card_impact-left, .master_product-b-marquee, .image-wrap_product-c-tabs, .image-wrap_scroll-card,
  .card_bento-left, .card_bento-middle-top, .card_bento-right, .right_home-b, .left_tab-home, .image-wrap_scroll, [class*="-ph-root"]),
.page-wrapper .image-wrap_scroll.third.desktop, .page-wrapper .left_tab-home.second, .page-wrapper .left_tab-home.third,
.page-wrapper .left_tab-home.fourth, .page-wrapper .left_tab-home.fifth, .page-wrapper .image-wrap_scroll-card.second,
.page-wrapper .image-wrap_scroll-card.third, .page-wrapper .right_profile.create, .page-wrapper .right_profile.reset,
.page-wrapper .card-plan_top-tile.pro, .page-wrapper .card-plan_top-tile.max {
  background: var(--pp-wash) !important; box-shadow: inset 0 0 0 1px var(--pp-line) !important; border-radius: 16px !important; color: var(--pp-ink);
}
.cta_bg { background: var(--pp-wash) !important; }
.uc-hero-rounded { background: var(--pp-paper) !important; box-shadow: none !important; margin: 0 !important; border-radius: 0 !important; }
.cta_mobile-menu { display: none !important; }

/* ── Cards ────────────────────────────────────────────────────────────── */
.card_product, .uc-card, .phx-card, .card_case, .card_team, .section_home-a-features .card_product, .section_home-a-scroll .card_product, .uc-carousel .card_product {
  background: var(--pp-card) !important; border: 0 !important; box-shadow: inset 0 0 0 1px var(--pp-line) !important; border-radius: 14px !important; color: var(--pp-ink);
}
a.card_product, .uc-card { transition: box-shadow .25s, transform .25s cubic-bezier(.16,1,.3,1) !important; }
a.card_product:hover, .uc-card:hover { box-shadow: inset 0 0 0 1px var(--pp-line-2), var(--pp-shadow) !important; transform: translateY(-2px); }
.card_product .heading-style-h5, .card_product h3, .uc-card-name, .section_home-a-features .card_product .heading-style-h5 { color: var(--pp-ink) !important; }
.card_product p, .card_product .tone-medium, .uc-card-dek, .section_home-a-features .card_product p { color: var(--pp-body) !important; }
.section_home-a-features .card_product .label-large { color: var(--pp-muted) !important; }
.icon-wrap_tag, .icon-wrap_tag.sky, .icon-wrap_tag.yellow, .icon-wrap_tag.purple, .icon-wrap_tag.peach, .icon-wrap_tag.green, .section_home-a-features .card_product .icon-wrap_tag {
  background: var(--pp-paper-2) !important; box-shadow: none !important; color: var(--pp-ink) !important; border-radius: 6px !important;
}
.uc-card-arrow, .loop-arrow { color: var(--pp-ink) !important; }
.uc-arrow-btn { border-color: var(--pp-line) !important; color: var(--pp-ink) !important; background: var(--pp-card) !important; border-radius: 8px !important; }
.card_case { background-color: var(--pp-card) !important; }
.overlay_card-case, .overlay_card-case-top { display: none !important; }
.case_large *, .case-large_quote { color: var(--pp-ink) !important; }
.section_home-a-features .card_product img, img[src*="images.unsplash.com"] { display: none !important; }
.phx-tile { background: var(--pp-card) !important; border: 0 !important; box-shadow: inset 0 0 0 1px var(--pp-line) !important; border-radius: 12px !important; }
.phx-tile img { filter: none; }

/* FAQ */
.expandable-single { border-color: var(--pp-line) !important; }
.faq-horizontal, .faq-vertical { background-color: var(--pp-ink) !important; }
.faq-paragraph { color: var(--pp-body) !important; }

/* Footer */
.footer { background: var(--pp-paper) !important; border-top: 1px solid var(--pp-line) !important; color: var(--pp-ink) !important; }
.footer a, .link_footer, .link_footer-legal { color: var(--pp-body) !important; }
.footer a:hover, .link_footer-legal:hover, .link-socials:hover { color: var(--pp-ink) !important; }
.footer-partner-badges img { filter: none; }

/* Forms */
.text-field, .section_hero-contact-b .text-field { background: var(--pp-card) !important; border: 1px solid var(--pp-line) !important; color: var(--pp-ink) !important; border-radius: 8px !important; }
.section_hero-contact-b .text-field::placeholder { color: var(--pp-muted) !important; }
.section_hero-contact-b .text-field:focus, .section_hero-contact-b .text-field:hover { border-color: var(--pp-ink) !important; }
.section_hero-contact-b form .label-large { color: var(--pp-ink-2) !important; }

/* Product visuals already in paper ink (phv) sit on the wash */
.right_column:has(.phv) .widget-list_outer, .widget-list_outer:has(.phv) { background: var(--pp-card) !important; border: 1px solid var(--pp-line) !important; border-radius: 12px !important; }
.widget-list_outer:has(.phv) .widget-list_bottom-tile, .widget-list_outer:has(.phv) .text_body-bold { color: var(--pp-ink) !important; }
.phv, .phv * { font-family: var(--pp-inter) !important; }
.phv { background: var(--pp-card) !important; box-shadow: inset 0 0 0 1px var(--pp-line); border-radius: 10px !important; }

/* Kill decorative motion: content at rest */
.phx-reveal { opacity: 1 !important; transform: none !important; }

/* ═══ Variant A components (home) ═══════════════════════════════════════ */
.pp-wrap { width: min(1240px, calc(100% - 32px)); margin-inline: auto; }
.pp-hero { padding: clamp(64px, 9vw, 120px) 0 0; background: var(--pp-paper); }
.pp-pill { display: inline-flex; gap: 10px; align-items: center; font-size: 13.5px; color: var(--pp-body); padding: 4px 12px 4px 4px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--pp-line); background: var(--pp-card); text-decoration: none; }
.pp-pill b { background: var(--pp-ink); color: var(--pp-on-ink); font: 500 11px/1 var(--pp-inter); padding: 5px 8px; border-radius: 999px; letter-spacing: .04em; }
.pp-hero h1 { font-size: clamp(48px, 7vw, 104px) !important; font-weight: 500 !important; letter-spacing: -.055em !important; line-height: .96 !important; margin: 28px 0 0; max-width: 12ch; color: var(--pp-ink); }
.pp-sub { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: end; margin-top: 36px; }
.pp-sub p { font-size: 19px; line-height: 1.55; color: var(--pp-body); max-width: 46ch; margin: 0; }
.pp-ctas { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 800px) { .pp-sub { grid-template-columns: 1fr; } }
.pp-btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 8px; font: 500 15px/1 var(--pp-inter); letter-spacing: -.01em; text-decoration: none; white-space: nowrap; transition: background .2s, box-shadow .2s; }
.pp-btn svg { width: 15px; height: 15px; }
.pp-btn.k { background: var(--pp-ink); color: var(--pp-on-ink) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 1px 2px rgba(0,0,0,.2); }
.pp-btn.k:hover { background: #ffffff; }
.pp-btn.o { background: var(--pp-card); color: var(--pp-ink) !important; box-shadow: inset 0 0 0 1px var(--pp-line), 0 1px 2px rgba(0,0,0,.04); }
.pp-btn.o:hover { box-shadow: inset 0 0 0 1px var(--pp-line-2), 0 1px 2px rgba(0,0,0,.06); }
.pp-shot { margin-top: 64px; padding: clamp(12px, 2.4vw, 32px); border-radius: 24px; background: var(--pp-wash); box-shadow: inset 0 0 0 1px var(--pp-line); }
.pp-fit { position: relative; overflow: hidden; border-radius: 14px; margin-inline: auto; }
.pp-fit > .pp-scale { width: 1200px; transform-origin: top left; }
.pp-shot .frame { box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 30px 80px -30px rgba(0,0,0,.8) !important; }
.pp-proof { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px; padding: 40px 0; border-bottom: 1px solid var(--pp-line); color: var(--pp-muted); font-size: 14px; }
.pp-proof span { display: inline-flex; gap: 8px; align-items: center; }
.pp-proof svg { width: 15px; height: 15px; color: var(--pp-ink); }
.pp-sec { padding: clamp(80px, 10vw, 136px) 0; background: var(--pp-paper); }
.pp-sec h2 { font-size: clamp(34px, 4.4vw, 60px) !important; font-weight: 500 !important; letter-spacing: -.045em !important; line-height: 1.02 !important; max-width: 18ch; margin: 0; color: var(--pp-ink); }
.pp-sec h2 span { color: var(--pp-gray); }
.pp-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-top: 56px; }
.pp-card { grid-column: span 2; background: var(--pp-card); border-radius: 18px; box-shadow: inset 0 0 0 1px var(--pp-line); overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: box-shadow .25s, transform .25s cubic-bezier(.16,1,.3,1); }
.pp-card.w { grid-column: span 3; }
.pp-card:hover { box-shadow: inset 0 0 0 1px var(--pp-line-2), var(--pp-shadow); transform: translateY(-2px); }
.pp-card .pp-t { padding: 24px 24px 0; }
.pp-card .pp-t small { font: 500 13px/1 var(--pp-inter); color: var(--pp-muted); }
.pp-card h3 { font-size: 19px !important; font-weight: 500 !important; letter-spacing: -.02em !important; margin: 10px 0 0; color: var(--pp-ink); line-height: 1.25 !important; }
.pp-card p { color: var(--pp-body); font-size: 15px; margin: 6px 0 0; line-height: 1.55; }
.pp-card .go { display: inline-flex; gap: 6px; align-items: center; margin-top: 14px; font: 500 14px/1 var(--pp-inter); color: var(--pp-ink); }
.pp-card .go svg { width: 14px; height: 14px; transition: transform .25s; }
.pp-card:hover .go svg { transform: translateX(3px); }
.pp-card .pp-vis { margin-top: 24px; padding: 20px 20px 0; background: var(--pp-wash-2); flex: 1; display: flex; align-items: flex-end; border-top: 1px solid var(--pp-line); }
.pp-card .pp-vis .pa { padding: 0; display: block; }
.pp-card .pp-vis .pa-card { width: 100%; border-radius: 10px 10px 0 0 !important; box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 10px 30px -16px rgba(0,0,0,.6) !important; }
@media (max-width: 960px) { .pp-card, .pp-card.w { grid-column: span 6; } }

/* Product cards inside legacy panels (product pages) */
.pa { width: 100%; display: flex; align-items: center; justify-content: center; padding: clamp(20px, 4vw, 44px); box-sizing: border-box; font-family: var(--pp-inter); }
.pa .pa-card { width: min(100%, 520px); text-align: left; border-radius: 10px !important; font-size: 13px; box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 24px 60px -28px rgba(0,0,0,.7) !important; }
.pa .pa-card .jira { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--a-mfg); font-weight: 400; }
.pa .pa-card .jira svg { width: 12px; height: 12px; color: #2684ff; }
.pa .pa-card .atf .seg { background: #027586; }
.pa-pipe { display: flex; align-items: center; gap: 8px; padding: 14px 12px; font-size: 12px; font-weight: 500; }
.pa-pipe span { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--a-border-2); color: var(--a-fg2); }
.pa-pipe span.ok { color: #027586; background: #e1f3f1; box-shadow: none; }
.pa-pipe span.ok::before { content: "✓"; }
.pa-pipe span.wait { color: #9a6b00; background: var(--pp-card)6d9; box-shadow: none; }
.pa-pipe span.wait::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pa-pipe i { flex: 1; height: 1px; background: var(--a-border-2); }
.pa-appr { padding: 10px 12px 12px; border-top: 1px solid var(--a-border); }
.pa-appr .appr { box-shadow: none; padding: 0; background: transparent; }
.page-wrapper :is(.left_tab-home, .right_product-a):has(.pa) { display: flex !important; align-items: center; justify-content: center; }


/* Small nav buttons (.cta-small): ink primary, paper secondary */
.cta-small, .cta-small .btn-bg { border-radius: 8px !important; }
.cta-small { font-family: var(--pp-inter) !important; font-weight: 500 !important; }
.navbar .cta-small:not([class*="w-variant"]) .text-button, .cta-small:not([class*="w-variant"]) .text-button { color: var(--pp-on-ink) !important; text-shadow: 0 1.5em 0 var(--pp-on-ink) !important; }
.cta-small:not([class*="w-variant"]) .btn-bg { background-color: var(--pp-ink) !important; border-color: var(--pp-ink) !important; }
.cta-small[class*="w-variant"] .btn-bg { background-color: var(--pp-card) !important; border: 1px solid var(--pp-line) !important; }
.navbar .cta-small[class*="w-variant"] .text-button { color: var(--pp-ink) !important; text-shadow: 0 1.5em 0 var(--pp-ink) !important; }
/* The fixed nav overlays the page top — clear it */
.pp-hero { padding-top: clamp(150px, 14vw, 200px) !important; }

/* Phyllis chat panels keep the app's dark theme */
.phx .chat { box-shadow: 0 0 0 1px #26282c, 0 24px 60px -30px rgba(0,0,0,.8) !important; border-radius: 12px !important; }

/* Halftone squares — used sparingly: rising under the hero, and behind the closing CTA */
.pp-hero { background-image: linear-gradient(180deg, var(--pp-paper) 0%, var(--pp-paper) 58%, rgba(11,12,14,.55) 100%), url("/assets/nd/ed-halftone.svg") !important; background-size: 100% 100%, 544px 544px !important; background-position: 0 0, 50% 100% !important; background-repeat: no-repeat, repeat !important; }
.page-wrapper [class*="section_cta"] { background-image: linear-gradient(180deg, var(--pp-paper) 0%, rgba(11,12,14,.35) 55%, var(--pp-paper) 100%), url("/assets/nd/ed-halftone.svg") !important; background-size: 100% 100%, 544px 544px !important; background-position: 0 0, 50% 50% !important; background-repeat: no-repeat, repeat !important; }
.cta_bg { background: transparent !important; }

/* Product cards replacing the old paper visuals (product pages) */
.pa-ask { display: flex; justify-content: flex-end; padding: 12px 12px 6px; }
.pa-ask span { max-width: 85%; background: var(--a-muted); color: var(--a-fg); padding: 7px 11px; border-radius: 6px; font-size: 12.5px; font-weight: 500; line-height: 1.4; }
.right_column:has(.pa-solo) { display: flex !important; align-items: center; justify-content: center; background: var(--pp-wash) !important; box-shadow: inset 0 0 0 1px var(--pp-line) !important; border-radius: 16px !important; padding: clamp(20px, 3vw, 40px) !important; }
.pa-solo { padding: 0 !important; }
/* dark-mode pipeline + status tints */
.pa-pipe span.ok { color: #35c9dd; background: rgba(2,117,134,.18); }
.pa-pipe span.wait { color: #f5b400; background: rgba(245,180,0,.12); }

/* ═══ Editorial page system (generated pages) ════════════════════════════
   One rhythm everywhere: tag row → headline with gray second clause → body.
   Product visuals sit inside their frame and run off the bottom-right edge. */
.ed-eyebrow { font: 500 12px/1 var(--pp-inter); letter-spacing: .18em; text-transform: uppercase; color: var(--pp-muted); display: inline-flex; align-items: center; gap: 10px; }
.ed-eyebrow::before { content: ""; width: 6px; height: 6px; background: var(--pp-ink); }
.ed-hero h1 { max-width: 16ch; }
.ed-hero .pp-sub p { max-width: 52ch; }

/* hero window: offset, cropped by its frame */
.ed-shot { position: relative; margin-top: 64px; height: clamp(360px, 44vw, 600px); overflow: hidden; border-radius: 18px; background: var(--pp-wash); box-shadow: inset 0 0 0 1px var(--pp-line); }
.ed-shot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--pp-line); pointer-events: none; }
.ed-shot-in { position: absolute !important; left: clamp(20px, 4.5vw, 64px); top: clamp(20px, 4.5vw, 64px); padding: 0 !important; display: block !important; width: auto !important; }
.ed-shot .pp-fit { border-radius: 12px 0 0 0; overflow: visible; }
.ed-shot .frame { box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 40px 100px -40px rgba(0,0,0,.9) !important; }

/* sections */
.ed-sec { padding: clamp(88px, 10vw, 140px) 0; border-top: 1px solid var(--pp-line); }
.ed-tags { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 16px; margin-bottom: clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--pp-line); }
.ed-tags span { font: 500 11.5px/1 var(--pp-inter); letter-spacing: .18em; text-transform: uppercase; color: var(--pp-muted); font-variant-numeric: tabular-nums; }
.ed-head { display: grid; grid-template-columns: 1.25fr 1fr; gap: 24px 64px; align-items: end; margin-bottom: clamp(40px, 5vw, 64px); }
.ed-head h2 { font-size: clamp(34px, 4.2vw, 58px) !important; max-width: 18ch; margin: 0; }
.ed-head p { color: var(--pp-body); font-size: 17px; line-height: 1.6; max-width: 46ch; margin: 0; justify-self: end; }
@media (max-width: 900px) { .ed-head { grid-template-columns: 1fr; } .ed-head p { justify-self: start; } }
.ed-sec .pp-grid { margin-top: 0; }

/* cards: visual runs off the bottom-right */
.pp-card { background: var(--pp-card) !important; border-radius: 14px; }
.pp-card .pp-t { padding: 28px 28px 0; }
.pp-card .pp-t small { font: 500 11.5px/1 var(--pp-inter); letter-spacing: .18em; text-transform: uppercase; color: var(--pp-muted); }
.pp-card h3 { font-size: 20px !important; margin-top: 14px; }
.pp-card .pp-vis { position: relative; margin-top: 28px; height: 300px; padding: 0; overflow: hidden; display: block; background: var(--pp-wash-2); border-top: 1px solid var(--pp-line); }
.pp-card .pp-vis .pa { position: absolute; left: 28px; top: 28px; width: 540px; padding: 0 !important; display: block !important; }
.pp-card.w .pp-vis .pa { width: 640px; }
.pp-card .pp-vis .pa-card { width: 100% !important; border-radius: 10px 0 0 0 !important; box-shadow: 0 0 0 1px rgba(255,255,255,.07), 0 20px 50px -24px rgba(0,0,0,.8) !important; }
.ed-grid2.cards .pp-card .pp-vis { height: 320px; }
.ed-grid3.cards .pp-card .pp-vis .pa { width: 480px; }

/* grids */
.ed-grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.ed-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 1000px) { .ed-grid3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .ed-grid2, .ed-grid3 { grid-template-columns: 1fr; } }
.ed-grid2 > .pp-card, .ed-grid3 > .pp-card { grid-column: auto; }

/* text cards */
.ed-tcard { display: flex; flex-direction: column; gap: 10px; padding: 28px; min-height: 220px; background: var(--pp-card); border-radius: 14px; box-shadow: inset 0 0 0 1px var(--pp-line); text-decoration: none; color: inherit; transition: box-shadow .25s, transform .25s cubic-bezier(.16,1,.3,1); }
a.ed-tcard:hover { box-shadow: inset 0 0 0 1px var(--pp-line-2), var(--pp-shadow); transform: translateY(-2px); }
.ed-tcard small { font: 500 11.5px/1 var(--pp-inter); letter-spacing: .18em; text-transform: uppercase; color: var(--pp-muted); }
.ed-tcard h3 { font-size: 20px !important; font-weight: 500 !important; letter-spacing: -.025em !important; line-height: 1.25 !important; margin: 8px 0 0; color: var(--pp-ink); }
.ed-tcard p { font-size: 15px; line-height: 1.55; color: var(--pp-body); margin: 0; }
.ed-tcard .go { margin-top: auto; padding-top: 12px; display: inline-flex; gap: 6px; align-items: center; font: 500 14px/1 var(--pp-inter); color: var(--pp-ink); }
.ed-tcard .go svg { width: 14px; height: 14px; transition: transform .25s; }
a.ed-tcard:hover .go svg { transform: translateX(3px); }
.ed-more { margin-top: 28px; }

/* split + ledger + offset visual */
.ed-split { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 5vw, 72px); align-items: stretch; }
@media (max-width: 900px) { .ed-split { grid-template-columns: 1fr; } }
.ed-lede { font-size: 18px; line-height: 1.6; color: var(--pp-body); max-width: 50ch; margin: 0 0 28px; }
.ed-ledger { border-top: 1px solid var(--pp-line); }
.ed-ledger > div { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--pp-line); }
.ed-ledger svg { width: 15px; height: 15px; color: var(--pp-ink); }
.ed-ledger b { font-weight: 400; color: var(--pp-ink-2); font-size: 15.5px; }
.ed-visual { position: relative; min-height: 380px; overflow: hidden; border-radius: 14px; background: var(--pp-wash); box-shadow: inset 0 0 0 1px var(--pp-line); }
.ed-visual .pa { position: absolute; left: 36px; top: 36px; width: 600px; padding: 0 !important; display: block !important; }
.ed-visual .pa-card { width: 100% !important; border-radius: 10px 0 0 0 !important; }

/* prompts */
.ed-prompt { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 56px; background: var(--pp-card); border-radius: 12px; box-shadow: inset 0 0 0 1px var(--pp-line); }
.ed-prompt small { font: 500 11.5px/1 var(--pp-inter); letter-spacing: .18em; text-transform: uppercase; color: var(--pp-muted); }
.ed-prompt p { margin: 0; color: var(--pp-ink-2); font-size: 15.5px; line-height: 1.5; }
.ed-prompt .send { position: absolute; right: 16px; bottom: 16px; width: 28px; height: 28px; border-radius: 6px; background: var(--pp-paper-2); display: grid; place-items: center; color: var(--pp-ink); }
.ed-prompt .send svg { width: 13px; height: 13px; }

/* FAQ */
.ed-faq { border-top: 1px solid var(--pp-line); max-width: 920px; }
.ed-faq details { border-bottom: 1px solid var(--pp-line); }
.ed-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; padding: 24px 0; font-size: 18px; font-weight: 500; letter-spacing: -.02em; color: var(--pp-ink); }
.ed-faq summary::-webkit-details-marker { display: none; }
.ed-faq summary::after { content: "+"; color: var(--pp-muted); font-weight: 400; font-size: 22px; line-height: 1; transition: transform .25s; }
.ed-faq details[open] summary::after { transform: rotate(45deg); }
.ed-faq details div { padding: 0 0 24px; max-width: 70ch; }
.ed-faq details p { color: var(--pp-body); line-height: 1.65; margin: 0 0 12px; }

/* closing CTA with the halftone */
.ed-cta { padding: clamp(110px, 13vw, 180px) 0; text-align: center; border-top: 1px solid var(--pp-line);
  background: linear-gradient(180deg, var(--pp-paper) 0%, rgba(11,12,14,.3) 55%, var(--pp-paper) 100%), url("/assets/nd/ed-halftone.svg") 50% 50% / 544px repeat, var(--pp-paper); }
.ed-cta h2 { font-size: clamp(40px, 5.4vw, 76px) !important; max-width: 14ch; margin: 0 auto; }
.ed-cta .pp-ctas { justify-content: center; margin-top: 36px; }

/* template reveal animations must never hide content */
.main-wrapper [data-w-id][style*="opacity"] { opacity: 1 !important; transform: none !important; }
.pp-card .pp-vis { flex: none !important; height: 300px; }
.ed-grid2.cards .pp-card .pp-vis { height: 330px; }
/* editorial rows (roles etc.) */
.ed-rows { border-top: 1px solid var(--pp-line); }
.ed-rows > div { display: grid; grid-template-columns: 220px 1fr 1.2fr; gap: 24px 48px; padding: 26px 0; border-bottom: 1px solid var(--pp-line); align-items: baseline; }
.ed-rows small { font: 500 11.5px/1.4 var(--pp-inter); letter-spacing: .18em; text-transform: uppercase; color: var(--pp-muted); }
.ed-rows h3 { font-size: 22px !important; font-weight: 500 !important; letter-spacing: -.03em !important; margin: 0; color: var(--pp-ink); line-height: 1.2 !important; }
.ed-rows p { margin: 0; color: var(--pp-body); font-size: 15.5px; line-height: 1.6; }
@media (max-width: 900px) { .ed-rows > div { grid-template-columns: 1fr; gap: 8px; } }

/* ── Mega menu: editorial ─────────────────────────────────────────────── */
.dropdown-bg { background: var(--pp-paper) !important; border: 0 !important; box-shadow: inset 0 1px 0 var(--pp-line), inset 0 -1px 0 var(--pp-line) !important; border-radius: 0 !important; }
.w-dropdown-list, .nav-menu .dropdown_inner, .dropdown_inner-small { background: transparent !important; box-shadow: none !important; }
.nav_column + .nav_column { border-left: 1px solid var(--pp-line); padding-left: 28px !important; }
.nav_label .label-large { text-transform: uppercase !important; letter-spacing: .18em !important; font-size: 11px !important; color: var(--pp-muted) !important; }
.nav_label { padding-bottom: 14px; margin-bottom: 8px; border-bottom: 1px solid var(--pp-line); }
.icon-wrap_dropdown-link, .icon-wrap_dropdown-link.blue, .icon-wrap_dropdown-link.green, .icon-wrap_dropdown-link.peach, .icon-wrap_dropdown-link.purple, .icon-wrap_dropdown-link.yellow { display: none !important; }
.link_dropdown { padding: 9px 0 !important; border-radius: 0 !important; background: transparent !important; gap: 0 !important; }
.link_dropdown .text_body-bold { font-weight: 500 !important; font-size: 15px !important; color: var(--pp-ink-2) !important; transition: color .15s; }
.link_dropdown:hover .text_body-bold { color: var(--pp-ink) !important; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--pp-line-2); }
.link_dropdown .text-size-small { color: var(--pp-muted) !important; font-size: 13px !important; }
.nav-menu .nav_feature { border-radius: 10px !important; box-shadow: inset 0 0 0 1px var(--pp-line); }
.nav-menu .nav_feature img { filter: grayscale(1) brightness(.7); }
.nav-menu .nav_feature .nf-kicker { color: var(--pp-muted) !important; letter-spacing: .18em !important; }

/* ── Radius system (one rule): bars square · cards 12 · buttons 8 · chips 6 ── */
.nav-container, .nav-container_bg, .nav-container_bg.for-scroll, .nav-container_bg.for-dropdown { border-radius: 0 !important; }
.nav-container { max-width: none !important; width: 100% !important; left: 0 !important; margin: 0 !important; padding-inline: clamp(16px, 3vw, 40px) !important; }
.nav-container_bg, .nav-container_bg.for-scroll, .nav-container_bg.for-dropdown { background: transparent !important; box-shadow: none !important; }
.brand_navbar { background: transparent !important; }
.w-dropdown-list, .dropdown-list, .dropdown-large_inner, .dropdown-bg { border-radius: 0 !important; }
.dropdown-bg { background: var(--pp-paper) !important; box-shadow: inset 0 -1px 0 var(--pp-line) !important; }
.banner { border-radius: 0 !important; box-shadow: none !important; border-bottom: 1px solid var(--pp-line) !important; }
.nav_label { display: block !important; width: 100% !important; }
.nav-menu .nav_feature { border-radius: 12px !important; overflow: hidden; }
.pp-card, .ed-tcard, .ed-visual, .ed-prompt, .card_product, .uc-card, .phx-card, .card_case, .card_team { border-radius: 12px !important; }
.ed-shot { border-radius: 12px !important; }
.pp-btn, .cta_primary, .cta_primary .btn-bg, .cta-small, .cta-small .btn-bg { border-radius: 8px !important; }

/* cards: the product visual always fills to the card's bottom edge */
.pp-card .pp-vis { flex: 1 1 auto !important; min-height: 300px; height: auto !important; }
.ed-grid2.cards .pp-card .pp-vis { min-height: 330px; }
/* bars run edge to edge; content shares one 40px gutter */
.wrap_banner, .navbar.w-nav, .dropdown-list.w-dropdown-list { padding-left: 0 !important; padding-right: 0 !important; }
.banner { width: 100% !important; }
.nav-container { padding-inline: 40px !important; }
.dropdown_inner { padding-left: 40px !important; padding-right: 40px !important; }
@media (max-width: 991px) { .nav-container { padding-inline: 16px !important; } }
.nav-menu .nav_feature img { display: none !important; }
.nav-menu .nav_feature { background: linear-gradient(180deg, var(--pp-paper-2) 0%, rgba(23,24,27,.2) 70%), url("/assets/nd/ed-halftone.svg") 50% 100% / 544px repeat, var(--pp-card) !important; }
.nav-menu .nav_feature::after { display: none !important; }

/* ═══ Page-level components (about, security, contact, demo, blog, legal, index) ═══ */
.ed-page-hero { padding-bottom: clamp(56px, 7vw, 96px) !important; }
.ed-page-hero .ed-eyebrow { margin-bottom: 28px; }
.ed-hero-grid { display: grid; grid-template-columns: 1fr; gap: 48px; }
.ed-hero-grid.has-right { grid-template-columns: 1fr 1fr; align-items: start; }
.ed-hero-grid.has-right.book { grid-template-columns: .9fr 1.1fr; }
@media (max-width: 960px) { .ed-hero-grid.has-right, .ed-hero-grid.has-right.book { grid-template-columns: 1fr; } }
.ed-page-hero h1 { font-size: clamp(44px, 6vw, 88px) !important; font-weight: 500 !important; letter-spacing: -.055em !important; line-height: .98 !important; margin: 0; max-width: 14ch; color: var(--pp-ink); }
.ed-hero-lede { font-size: 19px; line-height: 1.55; color: var(--pp-body); max-width: 52ch; margin: 28px 0 0; }
.ed-page-hero .pp-ctas { margin-top: 32px; }
.ed-first { border-top: 0 !important; padding-top: 0 !important; }

.ed-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); border-top: 1px solid var(--pp-line); }
.ed-stats > div { padding: 32px 28px 8px 0; }
.ed-stats > div + div { padding-left: 28px; border-left: 1px solid var(--pp-line); }
.ed-stats b { display: block; font-size: clamp(44px, 5vw, 72px); font-weight: 500; letter-spacing: -.055em; line-height: 1; color: var(--pp-ink); }
.ed-stats p { color: var(--pp-body); font-size: 15px; margin: 14px 0 0; max-width: 28ch; }
@media (max-width: 760px) { .ed-stats > div, .ed-stats > div + div { padding: 24px 0; border-left: 0; border-top: 1px solid var(--pp-line); } }
.ed-cols3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 48px; }
.ed-cols3 p { color: var(--pp-body); font-size: 15.5px; line-height: 1.6; margin: 0; }
@media (max-width: 860px) { .ed-cols3 { grid-template-columns: 1fr; } }

.ed-video { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--pp-line); background: #000; max-width: 100%; }
.ed-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ed-longform { columns: 2 320px; column-gap: 56px; }
.ed-longform p { color: var(--pp-body); font-size: 17px; line-height: 1.7; margin: 0 0 18px; break-inside: avoid; }
.ed-longform p:first-child::first-line { color: var(--pp-ink); }

.ed-person { display: grid; grid-template-columns: 200px 1fr; gap: 28px; padding: 24px; background: var(--pp-card); border-radius: 12px; box-shadow: inset 0 0 0 1px var(--pp-line); }
.ed-person .ph { aspect-ratio: 4 / 5; border-radius: 8px; overflow: hidden; background: var(--pp-paper-2); }
.ed-person .ph img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; filter: grayscale(1) contrast(1.05); }
.ed-person small { font: 500 11.5px/1.4 var(--pp-inter); letter-spacing: .14em; text-transform: uppercase; color: var(--pp-muted); }
.ed-person h3 { font-size: 24px !important; margin: 10px 0 12px; color: var(--pp-ink); }
.ed-person p { color: var(--pp-body); font-size: 15px; line-height: 1.6; margin: 0; }
@media (max-width: 700px) { .ed-person { grid-template-columns: 1fr; } }

.ed-ledger.wide > div { grid-template-columns: 24px 1fr; }
.ed-ledger.pts { margin-top: 36px; }
.ed-ledger.pts > div { grid-template-columns: 24px 1fr; align-items: start; }
.ed-ledger.pts p { grid-column: 2; margin: 4px 0 0; color: var(--pp-body); font-size: 14.5px; }
.ed-grid3.sec .ed-tcard > svg { width: 20px; height: 20px; color: var(--pp-ink); margin-bottom: 18px; }
.ed-grid3.sec .ed-tcard h3 { margin-top: 0; }
.ed-visual.tall { min-height: 440px; }
.ed-hero-right .ed-visual { margin-top: 0; }

.ed-form-card { background: var(--pp-card); border-radius: 12px; box-shadow: inset 0 0 0 1px var(--pp-line); padding: clamp(24px, 3vw, 36px); }
.ed-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ed-field { display: grid; gap: 8px; }
.ed-field.full { grid-column: 1 / -1; }
.ed-field span { font: 500 13px/1 var(--pp-inter); color: var(--pp-ink-2); }
.ed-field input, .ed-field textarea { width: 100%; box-sizing: border-box; background: var(--pp-paper); color: var(--pp-ink); border: 1px solid var(--pp-line); border-radius: 8px; padding: 12px 14px; font: 400 15px/1.4 var(--pp-inter); transition: border-color .15s; }
.ed-field textarea { min-height: 140px; resize: vertical; }
.ed-field input:focus, .ed-field textarea:focus { outline: 0; border-color: var(--pp-ink); }
.ed-field input::placeholder, .ed-field textarea::placeholder { color: var(--pp-muted); }
.ed-form-foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
.ed-form-foot span, .ed-form-foot a { font-size: 13.5px; color: var(--pp-muted); }
.ed-form-foot a { color: var(--pp-ink); text-decoration: underline; text-underline-offset: 3px; }
.ed-form-foot button { border: 0; cursor: pointer; }
.ed-form-err { grid-column: 1 / -1; color: #ff8a80; font-size: 14px; margin: 0; }
.ed-form-done b { font-size: 20px; font-weight: 500; color: var(--pp-ink); }
.ed-form-done p { color: var(--pp-body); }
@media (max-width: 600px) { .ed-form { grid-template-columns: 1fr; } }
.ed-cal { background: var(--pp-card); border-radius: 12px; box-shadow: inset 0 0 0 1px var(--pp-line); overflow: hidden; min-height: 660px; }

.ed-posts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.ed-post { display: flex; flex-direction: column; background: var(--pp-card); border-radius: 12px; box-shadow: inset 0 0 0 1px var(--pp-line); overflow: hidden; text-decoration: none; color: inherit; transition: box-shadow .25s, transform .25s cubic-bezier(.16,1,.3,1); }
.ed-post:hover { box-shadow: inset 0 0 0 1px var(--pp-line-2), var(--pp-shadow); transform: translateY(-2px); }
.ed-post.lead { grid-column: 1 / -1; flex-direction: row; }
.ed-post .pt { padding: 32px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.ed-post small { font: 500 11.5px/1 var(--pp-inter); letter-spacing: .16em; text-transform: uppercase; color: var(--pp-muted); }
.ed-post h3 { font-size: 24px !important; line-height: 1.2 !important; margin: 6px 0 0; color: var(--pp-ink); }
.ed-post p { color: var(--pp-body); font-size: 15px; line-height: 1.6; margin: 0; }
.ed-post .go { margin-top: auto; padding-top: 16px; display: inline-flex; gap: 6px; align-items: center; font: 500 14px/1 var(--pp-inter); color: var(--pp-ink); }
.ed-post .go svg { width: 14px; height: 14px; }
.ed-post .bv { position: relative; min-height: 260px; overflow: hidden; background: var(--pp-wash-2); border-top: 1px solid var(--pp-line); }
.ed-post.lead .bv { flex: 1.1; border-top: 0; border-left: 1px solid var(--pp-line); min-height: 360px; }
.ed-post .bv img { position: absolute; left: 32px; top: 32px; width: 820px; max-width: none; border-radius: 10px 0 0 0; box-shadow: 0 0 0 1px rgba(255,255,255,.07), 0 20px 50px -24px rgba(0,0,0,.8); }
.ed-post .bv .pa { position: absolute; left: 32px; top: 32px; width: 520px; padding: 0 !important; display: block !important; }
.ed-post .bv .pa-card { border-radius: 10px 0 0 0 !important; }
@media (max-width: 860px) { .ed-posts { grid-template-columns: 1fr; } .ed-post.lead { flex-direction: column; } .ed-post.lead .bv { border-left: 0; border-top: 1px solid var(--pp-line); } }

.ed-article-head { padding-bottom: clamp(48px, 6vw, 80px) !important; }
.ed-article-head h1 { font-size: clamp(40px, 5.4vw, 76px) !important; max-width: 18ch; margin: 22px 0 0; }
.ed-back { display: inline-block; margin-bottom: 28px; font-size: 14px; color: var(--pp-muted); text-decoration: none; }
.ed-back:hover { color: var(--pp-ink); }
.ed-post-fig { position: relative; margin-top: 48px; height: clamp(300px, 36vw, 480px); overflow: hidden; border-radius: 12px; background: var(--pp-wash); box-shadow: inset 0 0 0 1px var(--pp-line); }
.ed-post-fig img { position: absolute; left: clamp(20px, 4vw, 56px); top: clamp(20px, 4vw, 56px); width: min(1180px, 110%); max-width: none; border-radius: 10px 0 0 0; box-shadow: 0 0 0 1px rgba(255,255,255,.07), 0 30px 80px -30px rgba(0,0,0,.9); }

.ed-prose { max-width: 68ch; color: var(--pp-ink-2); font-size: 17.5px; line-height: 1.75; }
.ed-prose > * + * { margin-top: 1.1em; }
.ed-prose h2 { font-size: 30px !important; font-weight: 500 !important; letter-spacing: -.035em !important; line-height: 1.2 !important; margin: 2.2em 0 .6em; color: var(--pp-ink); }
.ed-prose h3, .ed-prose h4 { font-size: 20px !important; font-weight: 500 !important; margin: 1.8em 0 .5em; color: var(--pp-ink); }
.ed-prose p, .ed-prose li { color: var(--pp-ink-2); }
.ed-prose a { color: var(--pp-ink); text-decoration: underline; text-decoration-color: var(--pp-line-2); text-underline-offset: 3px; }
.ed-prose strong { color: var(--pp-ink); font-weight: 600; }
.ed-prose ul, .ed-prose ol { padding-left: 1.2em; }
.ed-prose li + li { margin-top: .4em; }
.ed-prose li::marker { color: var(--pp-muted); }
.ed-prose blockquote { margin: 1.6em 0; padding-left: 20px; border-left: 2px solid var(--pp-ink); font-size: 20px; color: var(--pp-ink); }
.ed-prose code { font: .86em/1 "JetBrains Mono", ui-monospace, monospace; background: var(--pp-paper-2); padding: 2px 6px; border-radius: 4px; }
.ed-prose pre { background: var(--pp-card); box-shadow: inset 0 0 0 1px var(--pp-line); border-radius: 10px; padding: 18px 20px; overflow-x: auto; font-size: 13.5px; }
.ed-prose pre code { background: none; padding: 0; }
.ed-prose img { max-width: 100%; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--pp-line); }
.ed-prose hr { border: 0; height: 1px; background: var(--pp-line); margin: 2.4em 0; }

.ed-legal { display: grid; grid-template-columns: 260px 1fr; gap: 72px; align-items: start; }
.ed-toc { position: sticky; top: 140px; display: grid; gap: 2px; padding-left: 16px; border-left: 1px solid var(--pp-line); }
.ed-toc a { font-size: 13.5px; line-height: 1.4; color: var(--pp-muted); padding: 5px 0; text-decoration: none; }
.ed-toc a:hover { color: var(--pp-ink); }
.ed-legal .ed-prose section + section { margin-top: 2.4em; }
.ed-legal .ed-prose h2 { margin-top: 0; font-size: 24px !important; }
@media (max-width: 900px) { .ed-legal { grid-template-columns: 1fr; } .ed-toc { position: static; } }

.ed-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 32px; }
.ed-filters button { height: 32px; padding: 0 12px; border-radius: 6px; border: 0; background: var(--pp-card); box-shadow: inset 0 0 0 1px var(--pp-line); color: var(--pp-body); font: 500 13px/1 var(--pp-inter); cursor: pointer; }
.ed-filters button:hover { color: var(--pp-ink); }
.ed-filters button[aria-pressed="true"] { background: var(--pp-ink); color: var(--pp-on-ink); box-shadow: none; }
.ed-tcard[hidden] { display: none !important; }
.ed-rows.two > div { grid-template-columns: 1fr 1.3fr; }
@media (max-width: 900px) { .ed-rows.two > div { grid-template-columns: 1fr; } }

/* ═══ Refinement pass ═══════════════════════════════════════════════════ */
/* 12-col card grid: 3 wide on the first row, 4 on the second (7 roles) */
.ed-grid12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.ed-grid12 > .pp-card { grid-column: span 3; }
.ed-grid12 > .pp-card:nth-child(-n+3) { grid-column: span 4; }
.ed-grid12 .pp-card .pp-vis { min-height: 240px; }
.ed-grid12 .pp-card .pp-vis .pa { width: 460px; }
@media (max-width: 1100px) { .ed-grid12 > .pp-card, .ed-grid12 > .pp-card:nth-child(-n+3) { grid-column: span 6; } }
@media (max-width: 700px) { .ed-grid12 > .pp-card, .ed-grid12 > .pp-card:nth-child(-n+3) { grid-column: span 12; } }
.ed-grid3.cards.sm .pp-card .pp-vis { min-height: 230px; }
.ed-grid3.cards.sm .pp-card .pp-vis .pa { width: 470px; }
.pp-card .pp-t p { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* the visual stage inside every card: soft light from the top-left, faint grid */
.pp-card .pp-vis, .ed-visual, .ed-shot, .ed-post .bv, .ed-post-fig {
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255,255,255,.05), transparent 55%),
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--pp-wash-2) !important;
}

/* posture tiles */
.ed-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ed-tile { display: flex; flex-direction: column; gap: 22px; padding: 24px; min-height: 150px; background: var(--pp-card); border-radius: 12px; box-shadow: inset 0 0 0 1px var(--pp-line); }
.ed-tile svg { width: 18px; height: 18px; color: var(--pp-ink); }
.ed-tile b { margin-top: auto; font-size: 18px; font-weight: 500; letter-spacing: -.02em; color: var(--pp-ink); line-height: 1.3; }
@media (max-width: 900px) { .ed-tiles { grid-template-columns: 1fr 1fr; } }

/* one solid ink for every bar, so the nav and its menu read as one surface */
.banner, .wrap_banner, .navbar.w-nav, .dropdown-bg { background: var(--pp-paper) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.navbar.w-nav { border-bottom: 1px solid var(--pp-line) !important; }
.dropdown-bg { box-shadow: inset 0 1px 0 var(--pp-line), 0 30px 60px -30px rgba(0,0,0,.8) !important; }
.nav_label { border-bottom-color: var(--pp-line) !important; }
.link_dropdown:hover .text_body-bold { text-decoration: none !important; color: #fff !important; }
.link_dropdown .text_body-bold { color: var(--pp-body) !important; }
.link_dropdown:hover .text-size-small { color: var(--pp-body) !important; }

/* brushed-silver rails down both sides of the content column, with
   registration crosses where each section rule meets them */
:root { --rail-x: min(644px, calc(50vw - 20px)); --silver: rgba(226,232,240,.34); --silver-dim: rgba(148,158,175,.06); }
.page-wrapper { position: relative; }
.page-wrapper::before, .page-wrapper::after {
  content: ""; position: fixed; top: 0; bottom: 0; width: 1px; pointer-events: none; z-index: 5;
  background: linear-gradient(180deg, var(--silver-dim) 0%, var(--silver) 35%, var(--silver) 65%, var(--silver-dim) 100%);
}
.page-wrapper::before { left: calc(50% - var(--rail-x)); }
.page-wrapper::after { left: calc(50% + var(--rail-x)); }
.ed-sec, .ed-cta { border-top: 1px solid transparent !important; border-image: linear-gradient(90deg, var(--silver-dim), var(--silver) 25%, var(--silver) 75%, var(--silver-dim)) 1 !important; position: relative; }
.ed-sec.ed-first { border-image: none !important; }
.ed-sec::before, .ed-sec::after, .ed-cta::before, .ed-cta::after {
  content: ""; position: absolute; top: -6px; width: 11px; height: 11px; pointer-events: none;
  background: linear-gradient(var(--pp-ink), var(--pp-ink)) center / 11px 1px no-repeat, linear-gradient(var(--pp-ink), var(--pp-ink)) center / 1px 11px no-repeat;
  opacity: .55;
}
.ed-sec::before, .ed-cta::before { left: calc(50% - var(--rail-x) - 5px); }
.ed-sec::after, .ed-cta::after { left: calc(50% + var(--rail-x) - 5px); }
.ed-sec.ed-first::before, .ed-sec.ed-first::after { display: none; }
@media (max-width: 1320px) { .page-wrapper::before, .page-wrapper::after, .ed-sec::before, .ed-sec::after, .ed-cta::before, .ed-cta::after { display: none; } }

/* ═══ Finesse ═══════════════════════════════════════════════════════════ */
/* menu: no rules, no dividers — spacing and type do the work */
.nav_label { border-bottom: 0 !important; padding-bottom: 0 !important; margin-bottom: 18px !important; }
.nav_column + .nav_column { border-left: 0 !important; padding-left: 0 !important; }
.nav-menu .left_nav-menu { gap: 56px !important; }
.nav_label .label-large:empty, .nav_label:has(.label-large:only-child) .label-large:not(:has(*)) { }
.nav_column:nth-child(n+3) .nav_label { visibility: hidden; }
.link_dropdown { padding: 7px 0 !important; }
.nav_column .link_dropdown + .link_dropdown { margin-top: 2px; }

/* rails belong to the page body, not the viewport: they stop at the footer */
.page-wrapper::before, .page-wrapper::after { display: none !important; }
.main-wrapper { position: relative; }
.main-wrapper::before, .main-wrapper::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 1px; pointer-events: none; z-index: 5;
  background: linear-gradient(180deg, transparent 0, var(--silver) 240px, var(--silver) calc(100% - 240px), transparent 100%);
}
.main-wrapper::before { left: calc(50% - var(--rail-x)); }
.main-wrapper::after { left: calc(50% + var(--rail-x)); }
@media (max-width: 1320px) { .main-wrapper::before, .main-wrapper::after { display: none; } }

/* ISO certificate panel (vector, not an image) */
.ed-visual.cert { display: flex; align-items: center; justify-content: center; padding: clamp(24px, 4vw, 48px); }
.ed-cert { width: min(100%, 460px); background: var(--pp-card); border-radius: 12px; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 30px 70px -30px rgba(0,0,0,.9); overflow: hidden; }
.ed-cert-top { display: grid; grid-template-columns: 112px 1fr; gap: 20px; align-items: center; padding: 24px; border-bottom: 1px solid var(--pp-line); }
.ed-cert-mark .iso-mark { width: 112px; height: auto; display: block; }
.ed-cert small { font: 500 11px/1 var(--pp-inter); letter-spacing: .18em; text-transform: uppercase; color: var(--pp-muted); }
.ed-cert h4 { margin: 10px 0 12px; font-size: 22px; font-weight: 500; letter-spacing: -.03em; color: var(--pp-ink); }
.ed-cert-badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 6px; font: 500 12px/1 var(--pp-inter); color: #35c9dd; background: rgba(2,117,134,.18); }
.ed-cert-badge svg { width: 12px; height: 12px; }
.ed-cert-rows > div { display: flex; justify-content: space-between; gap: 16px; padding: 13px 24px; border-bottom: 1px solid var(--pp-line); font-size: 14px; }
.ed-cert-rows > div:last-child { border-bottom: 0; }
.ed-cert-rows span { color: var(--pp-muted); }
.ed-cert-rows b { font-weight: 500; color: var(--pp-ink); text-align: right; }

/* no hairline under the nav — it sits directly on the page or its menu */
.navbar.w-nav { border-bottom: 0 !important; box-shadow: none !important; }
.dropdown-bg { box-shadow: 0 30px 60px -30px rgba(0,0,0,.8) !important; }

/* ═══ The Phyllis Knowledge Graph ═══════════════════════════════════════ */
.kg { display: grid; grid-template-columns: 1.15fr 1fr; border-radius: 12px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--pp-line); background: var(--pp-card); }
.kg-viz { position: relative; display: flex; align-items: center; justify-content: center; padding: clamp(16px, 3vw, 40px);
  background: radial-gradient(60% 60% at 50% 50%, rgba(255,255,255,.04), transparent 70%), #0d0e10; border-right: 1px solid var(--pp-line); }
.kg-svg { width: 112%; max-width: 680px; margin: -4% -6%; height: auto; font-family: var(--pp-inter); overflow: visible; }
.kg-r1 { fill: none; stroke: rgba(226,232,240,.26); stroke-width: 1; }
.kg-r2 { fill: none; stroke: rgba(226,232,240,.14); stroke-width: 1; }
.kg-tk { stroke: rgba(226,232,240,.22); stroke-width: 1; }
.kg-rot { transform-box: view-box; transform-origin: 390px 390px; animation: kgspin 120s linear infinite; }
@keyframes kgspin { to { transform: rotate(360deg); } }
.kg-cap { font: 500 11px/1 var(--pp-inter); letter-spacing: .28em; fill: #6b6e74; }
.kg-beam { stroke: #35c9dd; stroke-width: 1.5; stroke-dasharray: 260; stroke-dashoffset: 260; opacity: 0; transition: stroke-dashoffset .7s cubic-bezier(.16,1,.3,1), opacity .3s; filter: drop-shadow(0 0 4px rgba(53,201,221,.8)); }
.kg-beam.on { stroke-dashoffset: 0; opacity: 1; }
.kg-nd { fill: #f4f4f5; transition: fill .4s; }
.kg-nd-ring { fill: #0d0e10; stroke: rgba(255,255,255,.22); stroke-width: 1; transition: stroke .4s, fill .4s; }
.kg-src.on .kg-nd { fill: #35c9dd; }
.kg-src.on .kg-nd-ring { stroke: #35c9dd; fill: rgba(53,201,221,.12); }
.kg-t { font-size: 15.5px; font-weight: 500; fill: #d9dadd; letter-spacing: -.01em; transition: fill .4s; }
.kg-s { font-size: 12.5px; fill: #6b6e74; }
.kg-src.on .kg-t { fill: #fff; }
.kg-core-dot { fill: #f4f4f5; transition: filter .6s; }
.kg-core-ring { fill: none; stroke: rgba(226,232,240,.2); stroke-dasharray: 2 5; }
.kg-mark { color: #0b0c0e; }
.kg-halo { opacity: .45; transition: opacity .6s; }
.kg-svg.hot .kg-halo { opacity: 1; }
.kg-svg.hot .kg-core-dot { filter: drop-shadow(0 0 26px rgba(53,201,221,.75)); }
/* the live panel */
.kg-panel { display: flex; flex-direction: column; gap: 18px; padding: clamp(24px, 3vw, 40px); min-height: 560px; }
.kg-q { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px; border-radius: 10px; background: var(--pp-paper); box-shadow: inset 0 0 0 1px var(--pp-line-2); font-size: 15px; color: var(--pp-ink); }
.kg-q > svg { width: 15px; height: 15px; color: var(--pp-muted); flex: none; }
.kg-qt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kg-caret { width: 1.5px; height: 18px; background: #35c9dd; flex: none; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.kg-steps { display: grid; gap: 0; border-top: 1px solid var(--pp-line); }
.kg-step { display: grid; grid-template-columns: 18px 1fr; gap: 14px; align-items: start; padding: 13px 0; border-bottom: 1px solid var(--pp-line); opacity: 0; transform: translateY(6px); transition: opacity .45s, transform .45s cubic-bezier(.16,1,.3,1); }
.kg-step.in { opacity: 1; transform: none; }
.kg-step i { width: 16px; height: 16px; margin-top: 2px; border-radius: 50%; background: rgba(53,201,221,.16); box-shadow: inset 0 0 0 1px rgba(53,201,221,.5);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.3 2.3 4.7-5' fill='none' stroke='%2335c9dd' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.kg-step small { display: block; font: 500 10.5px/1 var(--pp-inter); letter-spacing: .16em; text-transform: uppercase; color: var(--pp-muted); margin-bottom: 5px; }
.kg-step b { font-size: 14.5px; font-weight: 400; color: var(--pp-ink-2); }
.kg-res { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 10px; background: rgba(2,117,134,.14); box-shadow: inset 0 0 0 1px rgba(53,201,221,.35); opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .5s cubic-bezier(.16,1,.3,1); }
.kg-res.in { opacity: 1; transform: none; }
.kg-res b { font-size: 15px; font-weight: 500; color: var(--pp-ink); }
.kg-res span { font-size: 13.5px; color: #35c9dd; text-align: right; }
@media (max-width: 960px) { .kg { grid-template-columns: 1fr; } .kg-viz { border-right: 0; border-bottom: 1px solid var(--pp-line); } .kg-panel { min-height: 460px; } }
@media (max-width: 560px) { .kg-s { display: none; } .kg-t { font-size: 17px; } .kg-svg { width: 100%; margin: 0; } .kg-viz { padding: 12px 4px; } }
@media (prefers-reduced-motion: reduce) { .kg-rot, .kg-caret { animation: none; } }
/* outcomes strip */
.kg-outs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 16px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--pp-line); background: var(--pp-card); }
.kg-outs > div { display: grid; grid-template-columns: 20px 1fr; gap: 4px 12px; padding: 20px 22px; }
.kg-outs > div + div { border-left: 1px solid var(--pp-line); }
.kg-outs svg { width: 16px; height: 16px; color: #35c9dd; grid-row: span 2; margin-top: 2px; }
.kg-outs b { font-size: 15px; font-weight: 500; color: var(--pp-ink); }
.kg-outs span { font-size: 13px; color: var(--pp-muted); }
@media (max-width: 900px) { .kg-outs { grid-template-columns: 1fr 1fr; } .kg-outs > div:nth-child(3) { border-left: 0; } .kg-outs > div:nth-child(n+3) { border-top: 1px solid var(--pp-line); } }
@media (max-width: 700px) { .kg-l, .kg-cs { display: none; } .kg-ct { font-size: 16px; } .kg-q { top: 12px; height: 40px; font-size: 13px; } .kg-q em { display: none; } .kg-res { position: relative; left: auto; bottom: auto; transform: none; margin: 0 auto 16px; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .kg-pulses { display: none; } .kg-n.f, .kg-core-ring.r2 { animation: none; } }
.kg-x { margin-top: 16px; }
.kg-x .pp-card .pp-vis { min-height: 280px; }
.kgx-compose { padding: 10px 12px 12px; }
.kgx-compose .composer { box-shadow: inset 0 0 0 1px var(--a-border-2); }
.kg-x .pa-ask { justify-content: flex-start; }
.kg-x .pa-ask span { max-width: 420px; }

/* ── Phyllis Plugins ───────────────────────────────────────────────── */
.plug .plug-id { display: flex; align-items: center; gap: 12px; }
.plug .plug-logo { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px var(--pp-line); }
.plug .plug-logo img { width: 26px; height: 26px; display: block; object-fit: contain; }
.plug .plug-nm { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.plug .plug-nm b { font: 500 15px/1 var(--pp-inter); color: var(--pp-ink); letter-spacing: -.01em; }
.plug .plug-nm small { font: 500 11px/1 var(--pp-inter) !important; letter-spacing: .16em !important; text-transform: uppercase; color: var(--pp-muted); }
.plug .plug-soon { margin-left: auto; font: 500 11px/1 var(--pp-inter); letter-spacing: .08em; text-transform: uppercase; color: var(--pp-muted); padding: 7px 9px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--pp-line-2, var(--pp-line)); white-space: nowrap; }
.plug h3 { margin-top: 22px !important; }
.plug.soon .pp-vis .pa-card { opacity: .72; }
.ed-grid2.plugs { gap: 16px; }
.ed-grid2.plugs .pp-card .pp-vis .pa { width: calc(100% - 14px); }
.plug .plug-ic { background: #fff !important; display: inline-grid; place-items: center; }
.plug .plug-ic img { width: 12px; height: 12px; display: block; }
@media (max-width: 700px) { .ed-grid2.plugs .pp-card .pp-vis .pa { width: calc(100% - 6px); left: 20px; top: 20px; } .plug .pp-t { padding: 22px 20px 0 !important; } }
.kg-logo rect { fill: #fff; stroke: rgba(255,255,255,.2); transition: stroke .4s; }
.kg-src.on .kg-logo rect { stroke: #35c9dd; stroke-width: 1.5; }
.kg { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.kg-panel, .kg-viz, .kg-q { min-width: 0; }
@media (max-width: 960px) { .kg { grid-template-columns: minmax(0, 1fr); } }
.kg-sn-disc { fill: #fff !important; stroke: rgba(255,255,255,.25) !important; }
.kg-src.on .kg-sn-disc { stroke: #35c9dd !important; stroke-width: 2.5; fill: #fff !important; }

/* ── KG query panel: editorial ─────────────────────────────────────── */
.kg-panel { display: flex; flex-direction: column; gap: 0; padding: clamp(24px, 3.2vw, 44px); min-height: 0; border-left: 1px solid var(--pp-line); }
.kg-ph { display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--pp-line); font: 500 11px/1 var(--pp-inter); letter-spacing: .2em; text-transform: uppercase; color: var(--pp-muted); }
.kg-ph > span:first-child { display: inline-flex; align-items: center; gap: 10px; }
.kg-live { width: 6px; height: 6px; border-radius: 50%; background: #35c9dd; box-shadow: 0 0 0 4px rgba(53,201,221,.14); animation: kglive 2.4s ease-in-out infinite; }
@keyframes kglive { 50% { box-shadow: 0 0 0 7px rgba(53,201,221,0); } }
.kg-n { font-variant-numeric: tabular-nums; color: var(--pp-ink-2, #c9cacd); }
.kg-q { display: block !important; height: auto !important; padding: 0 !important; margin: 28px 0 32px !important; background: none !important; box-shadow: none !important; border-radius: 0 !important;
  font: 400 clamp(22px, 2.1vw, 28px)/1.22 var(--pp-inter) !important; letter-spacing: -.025em; color: var(--pp-ink); text-wrap: balance; min-height: 2.44em; }
.kg-qt { white-space: normal !important; overflow: visible !important; }
.kg-caret { display: inline-block; vertical-align: -.12em; width: 2px; height: 1em; margin-left: 3px; background: #35c9dd; }
.kg-sh { display: flex; justify-content: space-between; font: 500 11px/1 var(--pp-inter); letter-spacing: .2em; text-transform: uppercase; color: var(--pp-muted); padding-bottom: 12px; }
.kg-cnt { font-variant-numeric: tabular-nums; letter-spacing: .08em; }
.kg-steps { display: grid; border-top: 1px solid var(--pp-line-2, var(--pp-line)); }
.kg-step { display: grid !important; grid-template-columns: 34px minmax(0, 1fr) 18px; gap: 0 12px; align-items: center; padding: 13px 0 !important; border-bottom: 1px solid var(--pp-line); opacity: 1 !important; transform: none !important; }
.kg-step em { font: 500 12px/1 var(--pp-inter); font-style: normal; font-variant-numeric: tabular-nums; color: #55585e; transition: color .4s; }
.kg-step small { display: block; font: 500 10.5px/1 var(--pp-inter); letter-spacing: .16em; text-transform: uppercase; color: #55585e; margin-bottom: 6px; transition: color .4s; }
.kg-step b { display: block; height: 20px; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14.5px; font-weight: 400; color: var(--pp-ink-2, #d9dadd); }
.kg-step:not(.in) b { width: 46%; background: linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.11), rgba(255,255,255,.05)) 0 50% / 200% 7px no-repeat; border-radius: 4px; animation: kgsh 1.6s linear infinite; }
@keyframes kgsh { to { background-position: -200% 50%; } }
.kg-step.in em { color: #35c9dd; }
.kg-step.in small { color: var(--pp-muted); }
.kg-step.in b { animation: kgin .45s cubic-bezier(.16,1,.3,1); }
@keyframes kgin { from { opacity: 0; transform: translateY(4px); } }
.kg-tick { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--pp-line-2, #2a2b30); color: transparent; transition: all .35s; }
.kg-tick svg { width: 10px; height: 10px; }
.kg-step.in .kg-tick { color: #35c9dd; box-shadow: inset 0 0 0 1px rgba(53,201,221,.55); background: rgba(53,201,221,.1); }
.kg-step i { display: none; }
.kg-res { margin-top: auto !important; padding: 22px 0 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; display: grid !important; grid-template-columns: 1fr auto; gap: 8px 16px; align-items: end; min-height: 76px; }
.kg-steps + .kg-res { margin-top: 28px !important; }
.kg-res small { grid-column: 1 / -1; font: 500 11px/1 var(--pp-inter); letter-spacing: .2em; text-transform: uppercase; color: var(--pp-muted); }
.kg-res b { font-size: 19px !important; font-weight: 500; letter-spacing: -.02em; color: var(--pp-ink); }
.kg-res span { font-size: 13.5px; color: #35c9dd; text-align: right; }
.kg-prog { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 24px; }
.kg-prog i { height: 2px; background: var(--pp-line-2, #2a2b30); overflow: hidden; }
.kg-prog i b { display: block; height: 100%; width: 0; background: #d9dadd; }
.kg-prog i.done b { width: 100%; }
.kg-prog i.on b { width: 100%; transition: width 9s linear; }
.kg:not([data-go]) .kg-prog i.on b { width: 34%; transition: none; }
@media (max-width: 960px) { .kg-panel { border-left: 0; } }
@media (prefers-reduced-motion: reduce) { .kg-live, .kg-step:not(.in) b { animation: none; } }
.kg-steps { min-height: 385px; align-content: start; }
.kg-q { min-height: 2.44em; }
@media (max-width: 1200px) { .kg-q { min-height: 3.66em; } }

/* ── Blast radius (monochrome) ───────────────────────────────────── */
.br { border-radius: 12px; box-shadow: inset 0 0 0 1px var(--pp-line); background: var(--pp-card); padding: clamp(24px, 3.4vw, 48px); }
.br code { font-family: var(--pp-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: .8em; color: var(--pp-ink); background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px var(--pp-line-2, #2a2b30); padding: 2px 8px; border-radius: 6px; }
.br-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding-bottom: 28px; }
.br-top small, .br-why small { display: block; font: 500 11px/1 var(--pp-inter); letter-spacing: .2em; text-transform: uppercase; color: var(--pp-muted); margin-bottom: 14px; }
.br-top p { margin: 0 !important; font: 400 clamp(22px, 2.4vw, 32px)/1.2 var(--pp-inter) !important; letter-spacing: -.025em; color: var(--pp-ink); }
.br-tot { text-align: right; }
.br-tot b { display: block; font-size: clamp(44px, 5vw, 64px); font-weight: 400; letter-spacing: -.05em; line-height: .9; color: var(--pp-ink); font-variant-numeric: tabular-nums; }
.br-tot span { font-size: 13px; color: var(--pp-muted); }
.br-bar { display: grid; grid-template-columns: repeat(16, 1fr); gap: 4px; }
.br-bar i { height: 10px; border-radius: 2px; box-shadow: inset 0 0 0 1px #3a3b40; }
.br-bar i.h { background: #f4f4f5; box-shadow: none; }
.br-bar-l { display: flex; justify-content: space-between; margin-top: 10px; font-size: 12.5px; color: var(--pp-muted); }
.br-bar-l span:last-child { color: var(--pp-ink); }
.br-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 36px; border-top: 1px solid var(--pp-line-2, var(--pp-line)); }
.br-col { padding-top: 22px; min-width: 0; }
.br-col + .br-col { padding-left: clamp(20px, 3vw, 44px); border-left: 1px solid var(--pp-line); }
.br-col:first-child { padding-right: clamp(20px, 3vw, 44px); }
.br-ch { display: flex; align-items: baseline; gap: 14px; margin-bottom: 10px; font-size: 14px; color: var(--pp-muted); }
.br-ch .br-n { font-size: 30px; font-weight: 400; letter-spacing: -.04em; color: #6b6e74; font-variant-numeric: tabular-nums; }
.br-col.hid .br-ch { color: var(--pp-ink); }
.br-col.hid .br-ch .br-n { color: var(--pp-ink); }
.br-it { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--pp-line); }
.br-c { font-size: 13px; color: var(--pp-muted); font-variant-numeric: tabular-nums; }
.br-c::before { content: "×"; margin-right: 2px; opacity: .6; }
.br-it b { display: block; font-size: 15px; font-weight: 500; color: #9a9da3; }
.br-it small { display: block; margin-top: 3px; font-size: 13px; color: #6b6e74; }
.br-col.hid .br-it b { color: var(--pp-ink); }
.br-col.hid .br-it small { color: var(--pp-body); }
.br-r { font: 500 11px/1 var(--pp-inter); letter-spacing: .12em; text-transform: uppercase; color: var(--pp-muted); }
.br-r.hi { color: var(--pp-ink); }
.br-r.hi::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--pp-ink); margin-right: 7px; vertical-align: 1px; }
.br-foot { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); margin-top: 36px; align-items: start; }
.br-code { border-radius: 10px; background: var(--pp-paper); box-shadow: inset 0 0 0 1px var(--pp-line-2, var(--pp-line)); overflow: hidden; }
.br-code-h { display: flex; justify-content: space-between; padding: 11px 16px; font-size: 12px; color: var(--pp-muted); border-bottom: 1px solid var(--pp-line); }
.br-code pre { margin: 0; padding: 16px; overflow-x: auto; font: 13px/1.7 var(--pp-mono, ui-monospace, SFMono-Regular, Menlo, monospace); color: #9a9da3; white-space: pre; }
.br-code .k { color: #c9cacd; } .br-code .s { color: #c9cacd; }
.br-code u { color: var(--pp-ink); text-decoration: none; background: rgba(255,255,255,.1); box-shadow: 0 1.5px 0 var(--pp-ink); padding: 0 2px; }
.br-why p { margin: 0 !important; font-size: 15.5px; line-height: 1.65; color: var(--pp-body); max-width: 52ch; }
@media (max-width: 860px) { .br-cols, .br-foot { grid-template-columns: minmax(0, 1fr); } .br-col + .br-col { padding-left: 0; border-left: 0; margin-top: 12px; } .br-col:first-child { padding-right: 0; } .br-top { flex-direction: column; align-items: flex-start; } .br-tot { text-align: left; } .br-bar-l { flex-direction: column; gap: 4px; } }
/* ── Assessment report (a paper page on the dark ground) ───────────── */
.rp-split { align-items: stretch; }
.rp-vis { min-height: 560px; background: var(--pp-wash-2, #16171a); }
.rp { position: absolute; left: 40px; top: 40px; width: 640px; padding: 32px 34px; background: #f7f7f5; color: #16171a; border-radius: 10px 0 0 0; box-shadow: 0 30px 80px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.06); font-family: var(--pp-inter); transform: rotate(-1.2deg); transform-origin: 0 0; }
.rp-top { display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; color: #6b6e74; letter-spacing: .02em; padding-bottom: 14px; border-bottom: 1px solid #e3e3e0; }
.rp-brand { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: #16171a; font-size: 13px; }
.rp-brand svg { width: 16px; height: 15px; color: #16171a; }
.rp h4 { margin: 20px 0 16px !important; font: 500 26px/1.1 var(--pp-inter) !important; letter-spacing: -.03em; color: #0b0c0e !important; }
.rp-score { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; padding: 16px 0; border-top: 1px solid #e3e3e0; border-bottom: 1px solid #e3e3e0; }
.rp-big { font-size: 52px; font-weight: 500; letter-spacing: -.05em; line-height: 1; color: #0b0c0e; }
.rp-big small { font-size: 18px; color: #8a8d93; letter-spacing: 0; }
.rp-score b { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #9a5b00; background: #fdefd6; padding: 5px 8px; border-radius: 5px; }
.rp-score span { display: block; margin-top: 8px; font-size: 12.5px; color: #55585e; }
.rp-hz { display: flex; gap: 6px; margin: 16px 0 10px; }
.rp-hz span { font-size: 12px; font-weight: 500; padding: 6px 10px; border-radius: 6px; color: #55585e; box-shadow: inset 0 0 0 1px #e0e0dc; }
.rp-hz span.on { background: #16171a; color: #f7f7f5; box-shadow: none; }
.rp-t { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.rp-t th { text-align: left; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #8a8d93; padding: 8px 8px 8px 0; border-bottom: 1px solid #d9d9d5; }
.rp-t td { padding: 9px 8px 9px 0; border-bottom: 1px solid #ecece8; color: #33353a; vertical-align: top; }
.rp-t td b { display: block; font-weight: 500; color: #0b0c0e; }
.rp-t td small { display: block; margin-top: 2px; font-family: var(--pp-mono, ui-monospace, Menlo, monospace); font-size: 10.5px; color: #8a8d93; }
.rp-t .n { text-align: right; font-variant-numeric: tabular-nums; }
.rp-sev { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-top: 4px; background: #c9cacd; }
.rp-sev.high { background: #e5484d; } .rp-sev.med { background: #f5a524; }
.rp-q { margin-top: 12px; }
.rp-q code { color: #9a5b00 !important; background: #fdefd6 !important; font-size: 11px !important; }
@media (max-width: 960px) { .rp-split { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .rp-vis { min-height: 520px; } .rp { left: 18px; top: 22px; width: 560px; padding: 24px; transform: rotate(-1deg); } }

/* ── Governance cards ─────────────────────────────────────────────── */
.gov .pp-vis { min-height: 360px !important; }
.gv-modes { display: flex; gap: 6px; padding: 12px 14px 4px; }
.gv-modes span { font-size: 12px; padding: 6px 9px; border-radius: 6px; color: #80838a; box-shadow: inset 0 0 0 1px var(--a-border-2, #2a2b30); white-space: nowrap; }
.gv-modes span.on { color: #0b0c0e; background: #f4f4f5; box-shadow: none; font-weight: 500; }
.gv-sec { padding: 12px 14px; border-top: 1px solid var(--a-border, #222327); }
.gv-modes + .gv-sec { border-top: 0; }
.gv-sec > small { display: block; font-size: 10.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #80838a; margin-bottom: 8px; }
.gv-ln { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 13px; color: #e4e4e7; }
.gv-c { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; flex: none; }
.gv-c.y { color: #35c9dd; background: rgba(53,201,221,.12); box-shadow: inset 0 0 0 1px rgba(53,201,221,.45); }
.gv-c.n { color: #8a8d93; box-shadow: inset 0 0 0 1px #33353a; }
.gv-sw { display: flex; align-items: center; gap: 10px; padding: 10px 14px; font-size: 13px; color: #e4e4e7; border-top: 1px solid var(--a-border, #222327); }
.gv-sec .gv-sw { padding: 5px 0; border-top: 0; }
.gv-sw b { font-weight: 500; }
.gv-sw small { margin-left: auto; font-size: 12px; color: #80838a; }
.gv-k { width: 28px; height: 16px; border-radius: 9px; background: #2a2b30; position: relative; flex: none; }
.gv-k i { position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #8a8d93; }
.gv-k.on { background: #35c9dd; } .gv-k.on i { left: 14px; background: #0b0c0e; }
.gv-appr { margin: 12px 14px; }
.gv-log { display: grid; grid-template-columns: 44px 1fr; gap: 10px; padding: 5px 0; font-size: 13px; color: #e4e4e7; }
.gv-log time { font-variant-numeric: tabular-nums; color: #80838a; }
.gv-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.gv-tags span { font: 12px var(--pp-mono, ui-monospace, Menlo, monospace); padding: 4px 7px; border-radius: 5px; color: #e4e4e7; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px #33353a; }
.gv-tags span.t { font-family: var(--pp-inter); color: #80838a; background: none; box-shadow: inset 0 0 0 1px #33353a; }
.gv-cred { display: flex; align-items: baseline; gap: 10px; }
.gv-cred b { font-size: 22px; font-weight: 500; letter-spacing: -.02em; color: #f4f4f5; font-variant-numeric: tabular-nums; }
.gv-cred span { font-size: 12.5px; color: #80838a; }
.gv-modes span:not(.on) { color: #9a9da3; }

/* ── Stage pages: numbers, build grid, pipeline, value dashboard ───── */
.ed-nums { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 16px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--pp-line); background: var(--pp-card); }
.ed-nums > div { padding: 28px 28px 26px; }
.ed-nums > div + div { border-left: 1px solid var(--pp-line); }
.ed-nums b { display: block; font-size: clamp(34px, 3.6vw, 48px); font-weight: 400; letter-spacing: -.045em; line-height: 1; color: var(--pp-ink); }
.ed-nums span { display: block; margin-top: 10px; font-size: 14px; color: var(--pp-muted); }
.ed-bgrid { display: grid; grid-template-columns: repeat(4, 1fr); border-radius: 12px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--pp-line); background: var(--pp-card); }
.ed-bgrid > div { padding: 22px 24px; box-shadow: inset -1px -1px 0 var(--pp-line); display: flex; flex-direction: column; gap: 10px; min-height: 104px; justify-content: space-between; }
.ed-bgrid b { font-size: 16px; font-weight: 500; color: var(--pp-ink); letter-spacing: -.01em; }
.ed-bgrid code { font: 12px var(--pp-mono, ui-monospace, SFMono-Regular, Menlo, monospace); color: var(--pp-muted); }
.pl { display: grid; grid-template-columns: 1fr 120px 1fr 120px 1fr; align-items: stretch; }
.pl-env { padding: 24px; border-radius: 12px; background: var(--pp-card); box-shadow: inset 0 0 0 1px var(--pp-line); display: flex; flex-direction: column; gap: 10px; }
.pl-env small { font: 500 11px/1 var(--pp-inter); letter-spacing: .2em; text-transform: uppercase; color: var(--pp-muted); }
.pl-env b { font: 400 24px/1.1 var(--pp-mono, ui-monospace, SFMono-Regular, Menlo, monospace); letter-spacing: -.02em; color: var(--pp-ink); margin-bottom: 8px; }
.pl-env.on { box-shadow: inset 0 0 0 1px #f4f4f5; }
.pl-env.prod { background: transparent; box-shadow: inset 0 0 0 1px var(--pp-line); }
.pl-env.prod .pl-r { color: var(--pp-muted); }
.pl-r { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--pp-ink-2, #d9dadd); }
.pl-arr { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 0 10px; text-align: center; }
.pl-arr span { font-size: 12px; color: var(--pp-muted); line-height: 1.35; }
.pl-arr i { width: 100%; height: 1px; background: var(--pp-line-2, #3a3b40); position: relative; }
.pl-arr i::after { content: ""; position: absolute; right: 0; top: -4px; border: 4.5px solid transparent; border-left: 7px solid #9a9da3; border-right: 0; }
.pl-note { margin: 22px 0 0 !important; font-size: 15.5px; color: var(--pp-body); max-width: 70ch; }
@media (max-width: 960px) { .ed-bgrid { grid-template-columns: repeat(2, 1fr); } .pl { grid-template-columns: 1fr; gap: 0; } .pl-arr { flex-direction: row; padding: 14px 0; } .pl-arr i { width: 1px; height: 28px; order: -1; } .pl-arr i::after { display: none; } }
@media (max-width: 700px) { .ed-nums { grid-template-columns: 1fr; } .ed-nums > div + div { border-left: 0; border-top: 1px solid var(--pp-line); } }
.vd { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--a-border, #222327); }
.vd > div { padding: 14px 16px; }
.vd > div + div { border-left: 1px solid var(--a-border, #222327); }
.vd small { display: block; font-size: 10.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #80838a; }
.vd b { display: block; margin: 8px 0 4px; font-size: 26px; font-weight: 500; letter-spacing: -.03em; color: #f4f4f5; }
.vd span { font-size: 12px; color: #80838a; }
.vd-sz { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; align-items: end; height: 110px; padding: 14px 16px 10px; border-bottom: 1px solid var(--a-border, #222327); }
.vd-sz > div { display: grid; grid-template-rows: 1fr auto; height: 100%; align-items: end; gap: 6px; position: relative; }
.vd-sz i { display: block; width: 100%; background: #e4e4e7; border-radius: 3px 3px 0 0; opacity: .9; }
.vd-sz span { font-size: 11px; color: #80838a; }
.vd-sz em { position: absolute; right: 0; bottom: 0; font-style: normal; font-size: 11px; color: #c9cacd; font-variant-numeric: tabular-nums; }
.ed-visual .pa { width: calc(100% - 20px) !important; }
@media (max-width: 700px) { .ed-visual .pa { left: 20px !important; top: 20px !important; width: calc(100% - 8px) !important; } }

/* ── Motion layer (Mintlify-influenced) ─────────────────────────────── */
:root { --ease-soft: cubic-bezier(.16, 1, .3, 1); }
/* odometer digits */
.odo { display: inline-flex; align-items: baseline; font-variant-numeric: tabular-nums; }
.odo-d { display: inline-block; height: 1em; line-height: 1em; overflow: hidden; vertical-align: -.1em; }
.odo-s { display: flex; flex-direction: column; transition: transform .9s var(--ease-soft); will-change: transform; }
.odo-s > span { display: block; height: 1em; line-height: 1em; text-align: center; }
.odo-c { display: inline-block; line-height: 1em; }
/* blur-in reveal */
.rv { opacity: 0; filter: blur(6px); transform: translateY(14px); transition: opacity .8s var(--ease-soft) var(--rv-d, 0ms), filter .8s var(--ease-soft) var(--rv-d, 0ms), transform .8s var(--ease-soft) var(--rv-d, 0ms); }
.rv.in { opacity: 1; filter: none; transform: none; }
/* rail tick on every section label */
.ed-tags { position: relative; }
.ed-tick { position: absolute; top: 50%; left: calc(50% - var(--rail-x) - 1px); width: 2px; height: 22px; transform: translateY(-50%); background: #35c9dd; box-shadow: 0 0 12px rgba(53,201,221,.5); }
@media (max-width: 1319px) { .ed-tick { display: none; } }
/* stats marquee (replaces the proof strip) */
.ed-mq { border-bottom: 1px solid var(--pp-line); }
.ed-mq-in { display: flex; align-items: center; gap: 22px; padding: 26px 0; }
.ed-mq-l { flex: none; font-size: 14.5px; font-weight: 500; color: var(--pp-ink); }
.ed-mq-bar { flex: none; width: 1px; height: 20px; background: var(--pp-line-2, #2a2b30); }
.ed-mq-vp { position: relative; flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); outline: none; }
.ed-mq-track { display: flex; width: max-content; animation: edmq 48s linear infinite; }
.ed-mq:hover .ed-mq-track, .ed-mq-vp:focus-visible .ed-mq-track, .ed-mq.paused .ed-mq-track { animation-play-state: paused; }
@keyframes edmq { to { transform: translateX(-50%); } }
.mq-run { display: flex; align-items: center; gap: 40px; padding-right: 40px; }
.mq-i { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; font-size: 14px; color: var(--pp-muted); }
.mq-i b { font-size: 15px; font-weight: 500; color: var(--pp-ink); font-variant-numeric: tabular-nums; }
.mq-i.f { align-items: center; }
.mq-i.f svg { width: 14px; height: 14px; color: var(--pp-ink); }
.ed-mq-pause { flex: none; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; gap: 3px; border: 0; border-radius: 6px; background: transparent; box-shadow: inset 0 0 0 1px var(--pp-line-2, #2a2b30); cursor: pointer; transition: box-shadow .2s; }
.ed-mq-pause:hover { box-shadow: inset 0 0 0 1px #6b6e74; }
.ed-mq-pause i { width: 2px; height: 10px; background: var(--pp-ink); border-radius: 1px; }
.ed-mq.paused .ed-mq-pause i:first-child { width: 0; height: 0; background: none; border-left: 8px solid var(--pp-ink); border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-radius: 0; }
.ed-mq.paused .ed-mq-pause i:last-child { display: none; }
@media (max-width: 700px) { .ed-mq-l, .ed-mq-bar { display: none; } .ed-mq-in { padding: 20px 0; } }
/* hero: soft brand glow under the product frame */
.ed-hero .pp-wrap { position: relative; }
.ed-hero .ed-shot { isolation: isolate; }
.ed-hero .ed-shot { background: radial-gradient(55% 38% at 50% 0%, rgba(53,201,221,.2), transparent 72%), var(--pp-wash) !important; }
/* arrow nudge on hover, everywhere */
a:hover > svg:last-child, a:hover .go svg, .pp-btn:hover svg { transform: translateX(3px); }
.pp-btn svg, .go svg { transition: transform .25s var(--ease-soft); }
@media (prefers-reduced-motion: reduce) { .ed-mq-track { animation: none; } .rv { opacity: 1; filter: none; transform: none; } .odo-s { transition: none; } }
.odo .odo-d, .odo .odo-c, .odo .odo-s, .odo .odo-s > span { font: inherit !important; color: inherit !important; letter-spacing: inherit !important; margin: 0 !important; padding: 0 !important; text-align: center; }
.odo .odo-d { display: inline-block !important; height: 1em !important; line-height: 1em !important; overflow: hidden !important; }
.odo .odo-c { display: inline-block !important; line-height: 1em !important; }
.odo .odo-s { display: flex !important; flex-direction: column !important; }
.odo .odo-s > span { display: block !important; height: 1em !important; line-height: 1em !important; }
.br-tot b.odo, .ed-nums b.odo, .vd b.odo { display: flex; }
.br-tot b.odo { justify-content: flex-end; }
span.odo { font-size: inherit !important; display: inline-flex !important; margin: 0 !important; color: inherit !important; letter-spacing: inherit !important; }

/* ── Split hero with waves ─────────────────────────────────────────── */
.pp-hero.hx { position: relative; overflow: hidden; min-height: 860px; background: var(--pp-paper) !important; background-image: none !important; padding-bottom: 0 !important; }
.hx-waves { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .95; }
.hx-wrap { position: relative; z-index: 2; }
.hx-l { max-width: 560px; }
.hx h1 { font-size: clamp(44px, 5.1vw, 74px) !important; line-height: 1 !important; letter-spacing: -.045em !important; max-width: 11ch !important; margin-top: 26px !important; }
.hx-lede { margin: 26px 0 0 !important; font-size: 19px; line-height: 1.55; color: var(--pp-body); max-width: 40ch; }
.hx .pp-ctas { margin-top: 34px; justify-content: flex-start; }
.hx .ed-shot.hx-shot { position: absolute; z-index: 1; left: calc(50% - 40px); top: clamp(170px, 14vw, 210px); width: 980px; height: 660px; margin: 0; border-radius: 14px 0 0 0 !important;
  background: var(--pp-card) !important; box-shadow: 0 0 0 1px var(--pp-line-2, #2a2b30), 0 40px 120px -40px rgba(53,201,221,.35), 0 30px 80px -30px rgba(0,0,0,.9);
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 72%, transparent 100%); }
.hx.pp-hero:not(.home) h1 { }
@media (max-width: 1180px) {
  .pp-hero.hx { min-height: 0; }
  .hx-l { max-width: 640px; }
  .hx .ed-shot.hx-shot { position: relative; left: auto; top: auto; width: auto; height: clamp(320px, 62vw, 560px); margin: 56px 0 0 max(16px, 4vw); }
}

/* ── Bento ─────────────────────────────────────────────────────────── */
.bx { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.bx-t { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 440px; padding: 30px; border-radius: 12px; background: var(--pp-card); box-shadow: inset 0 0 0 1px var(--pp-line); isolation: isolate; }
.bx-t.w7 { grid-column: span 7; } .bx-t.w5 { grid-column: span 5; } .bx-t.w4 { grid-column: span 4; min-height: 420px; }
.bx-t > canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.bx-v { position: absolute; inset: 0 0 96px 0; z-index: 1; display: flex; align-items: center; justify-content: center; }
.bx-h { position: relative; z-index: 2; }
.bx-h h3 { margin: 0 !important; font-size: 19px !important; font-weight: 500 !important; letter-spacing: -.02em !important; color: var(--pp-ink); }
.bx-h p { margin: 6px 0 0 !important; font-size: 14.5px; color: var(--pp-muted); max-width: 44ch; }
@media (max-width: 1000px) { .bx-t.w7, .bx-t.w5 { grid-column: span 12; } .bx-t.w4 { grid-column: span 6; } }
@media (max-width: 700px) { .bx-t.w4 { grid-column: span 12; } .bx-t, .bx-t.w4 { min-height: 380px; padding: 24px; } }
/* ask bar */
.bx-ask { display: flex; align-items: center; gap: 14px; width: min(78%, 540px); height: 74px; padding: 0 26px; border-radius: 999px; background: #16171a; box-shadow: 0 0 0 1px #2c2d33, 0 24px 60px -20px rgba(0,0,0,.9); }
.bx-spark svg { width: 20px; height: 20px; color: #35c9dd; display: block; }
.bx-q { flex: 1; min-width: 0; font-size: 20px; color: #d9dadd; letter-spacing: -.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bx-q::after { content: ""; display: inline-block; width: 1.5px; height: 1em; margin-left: 2px; vertical-align: -.15em; background: #35c9dd; animation: blink 1s steps(1) infinite; }
.bx-go svg { width: 18px; height: 18px; color: #9a9da3; display: block; }
/* read-back cards */
.bx-rbs { display: grid; gap: 14px; width: 78%; }
.bx-rb { display: grid; grid-template-columns: 28px 1fr auto; gap: 14px; align-items: center; height: 68px; padding: 0 18px; border-radius: 14px; background: #16171a; box-shadow: 0 0 0 1px #2c2d33; margin-left: calc(var(--i) * 26px); margin-right: calc((2 - var(--i)) * 26px); }
.bx-rb em { font: normal 11.5px var(--pp-mono, ui-monospace, Menlo, monospace); color: #6b6e74; }
.bx-spin { position: relative; width: 22px; height: 22px; }
.bx-spin i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid #3a3b40; border-top-color: #9a9da3; animation: bxspin 1s linear infinite, bxfade 6s calc(var(--i) * .9s) infinite; }
.bx-spin svg { position: absolute; inset: 3px; width: 16px; height: 16px; color: #35c9dd; opacity: 0; animation: bxok 6s calc(var(--i) * .9s) infinite; }
@keyframes bxspin { to { transform: rotate(360deg); } }
@keyframes bxfade { 0%, 30% { opacity: 1; } 36%, 92% { opacity: 0; } 100% { opacity: 1; } }
@keyframes bxok { 0%, 30% { opacity: 0; transform: scale(.6); } 38%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.bx-sk { display: grid; gap: 8px; }
.bx-sk i { display: block; height: 8px; border-radius: 4px; background: #2a2b30; }
.bx-sk i + i { height: 6px; background: #222327; }
/* roles */
.bx-roles { display: grid; gap: 12px; width: 100%; padding-left: 28px; }
.bx-role { display: grid; grid-template-columns: 40px 1fr auto; gap: 14px; align-items: center; height: 64px; padding: 0 16px 0 12px; border-radius: 10px 0 0 10px; background: #16171a; box-shadow: 0 0 0 1px #2c2d33; margin-left: 22px; }
.bx-role.on { margin-left: 0; box-shadow: 0 0 0 1.5px #35c9dd, 0 0 30px -8px rgba(53,201,221,.4); background: #131a1c; }
.bx-role.add { background: none; box-shadow: none; height: 36px; margin-left: 34px; grid-template-columns: 26px 1fr; }
.bx-av { width: 40px; height: 40px; border-radius: 8px; display: grid; place-items: center; background: #1d1e22; color: #6b6e74; }
.bx-role.on .bx-av { background: rgba(53,201,221,.14); color: #35c9dd; }
.bx-av svg { width: 18px; height: 18px; }
.bx-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 6px; font-size: 13px; font-weight: 500; color: #e4e4e7; background: #1d1e22; }
.bx-role.on .bx-chip { color: #35c9dd; background: transparent; box-shadow: inset 0 0 0 1px rgba(53,201,221,.45); }
.bx-chip svg { width: 12px; height: 12px; }
.bx-plus { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; color: #6b6e74; background: #1d1e22; }
/* logos */
.bx-logos { display: flex; gap: 12px; }
.bx-logo { width: 72px; height: 72px; border-radius: 16px; display: grid; place-items: center; background: #f4f4f5; box-shadow: 0 16px 40px -18px rgba(0,0,0,.9); }
.bx-logo img { width: 32px; height: 32px; object-fit: contain; }
/* doc + cursors */
.bx-doc { position: absolute; right: 0; top: 32px; width: 82%; height: calc(100% - 44px); border-radius: 12px 0 0 12px; background: #16171a; box-shadow: 0 0 0 1px #2c2d33; }
.bx-t.doc .bx-v::before { content: ""; position: absolute; left: 10%; top: 20%; width: 60%; height: 60%; border-radius: 50%; background: radial-gradient(closest-side, rgba(53,201,221,.16), transparent); filter: blur(20px); }
.bx-tabs { display: flex; gap: 2px; padding: 0 10px; border-bottom: 1px solid #26272c; }
.bx-tabs span { font-size: 11.5px; color: #6b6e74; padding: 11px 10px; }
.bx-tabs span.on { color: #e4e4e7; box-shadow: inset 0 -1.5px 0 #35c9dd; }
.bx-lines { display: grid; gap: 10px; padding: 18px 20px; }
.bx-lines i { display: block; height: 6px; border-radius: 3px; background: #26272c; width: 70%; }
.bx-lines i.h { width: 26%; height: 8px; background: rgba(53,201,221,.5); margin-top: 6px; }
.bx-cur { position: absolute; left: var(--x); top: var(--y); display: inline-flex; align-items: flex-start; gap: 4px; animation: bxcur 7s ease-in-out infinite; }
.bx-cur svg { width: 14px; height: 14px; fill: currentColor; stroke: none; }
.bx-cur b { font-size: 11.5px; font-weight: 500; padding: 3px 7px; border-radius: 5px; margin-top: 10px; white-space: nowrap; }
.bx-cur.c1 { color: #35c9dd; } .bx-cur.c1 b { background: rgba(53,201,221,.14); box-shadow: inset 0 0 0 1px rgba(53,201,221,.45); }
.bx-cur.c2 { color: #e4e4e7; animation-delay: -2.3s; } .bx-cur.c2 b { background: #26272c; box-shadow: inset 0 0 0 1px #3a3b40; }
.bx-cur.c3 { color: #8a8d93; animation-delay: -4.6s; } .bx-cur.c3 b { background: #1d1e22; box-shadow: inset 0 0 0 1px #2c2d33; }
@keyframes bxcur { 0%, 100% { transform: translate(0, 0); } 33% { transform: translate(18px, 8px); } 66% { transform: translate(-10px, 14px); } }
@media (prefers-reduced-motion: reduce) { .bx-cur, .bx-spin i, .bx-spin svg { animation: none; } .bx-spin svg { opacity: 1; } .bx-spin i { opacity: 0; } }

/* ── Section head with CTA; stats band ─────────────────────────────── */
.ed-head2 { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin: 8px 0 48px; }
.ed-head2 h2 { margin: 0 !important; }
.ed-head2 .pp-btn { flex: none; }
@media (max-width: 800px) { .ed-head2 { flex-direction: column; align-items: flex-start; } }
.sb-wave { position: relative; height: clamp(220px, 26vw, 380px); margin: 0 calc(-1 * clamp(0px, 2vw, 24px)); }
.sb-wave canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.sb-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--pp-line); }
.sb-stats > div { padding: 36px 32px 8px 0; }
.sb-stats > div + div { padding-left: 32px; border-left: 1px solid var(--pp-line); }
.sb-stats svg { width: 22px; height: 22px; color: var(--pp-muted); display: block; margin-bottom: 36px; }
.sb-stats b { display: block; font-size: clamp(40px, 4.4vw, 60px); font-weight: 400; letter-spacing: -.045em; line-height: 1; color: var(--pp-ink); }
.sb-stats b.odo { display: flex; }
.sb-stats span { display: block; margin-top: 14px; font-size: 16px; color: var(--pp-body); }
@media (max-width: 800px) { .sb-stats { grid-template-columns: 1fr; } .sb-stats > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--pp-line); } .sb-stats svg { margin-bottom: 20px; } }

/* ── Note / testimonial cards ──────────────────────────────────────── */
.nc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.nc { display: flex; flex-direction: column; gap: 26px; min-height: 264px; padding: 20px; border-radius: 8px; background: var(--pp-card); box-shadow: inset 0 0 0 1px var(--pp-line); text-decoration: none; color: inherit; transition: background .2s, box-shadow .2s; margin: 0; }
a.nc:hover { background: #16171a; box-shadow: inset 0 0 0 1px var(--pp-line-2, #2a2b30); }
.nc-top { display: flex; align-items: center; gap: 14px; min-width: 0; }
.nc-ic { flex: none; width: 48px; height: 48px; border-radius: 6px; display: grid; place-items: center; background: rgba(255,255,255,.04); color: var(--pp-ink); }
.nc-ic svg { width: 20px; height: 20px; }
.nc-ic img { width: 26px; height: 26px; object-fit: contain; }
.nc-id { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.nc-id b { font-size: 15px; font-weight: 500; color: var(--pp-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nc-id small { font-size: 14px; color: var(--pp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nc h3 { margin: 0 !important; font-size: 17px !important; font-weight: 500 !important; line-height: 1.35 !important; letter-spacing: -.01em !important; color: var(--pp-ink); }
.nc p, .nc blockquote { margin: -14px 0 0 !important; font-size: 15px; line-height: 1.6; color: var(--pp-body); }
.nc.q blockquote { margin: 0 !important; font-size: 16px; }
@media (max-width: 1000px) { .nc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .nc-grid { grid-template-columns: 1fr; } }
.hx .ed-shot.hx-shot { z-index: 6; }
.hx .hx-shot .ed-shot-in { left: 0 !important; top: 0 !important; }
.hx .hx-shot .pp-scale > .app, .hx .hx-shot .pp-scale > div { border-radius: 14px 0 0 0; }
.bx-v { inset: 0 0 136px 0; }
.bx-t.doc .bx-doc { top: 32px; height: calc(100% - 44px); }
.nc { min-height: 208px; }
.hx.long h1 { font-size: clamp(36px, 3.7vw, 54px) !important; max-width: 15ch !important; line-height: 1.04 !important; }
.hx-waves { -webkit-mask-image: linear-gradient(100deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.25) 34%, #000 58%); mask-image: linear-gradient(100deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.25) 34%, #000 58%); }
@media (max-width: 1180px) { .hx-waves { -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.3) 45%, #000 70%); mask-image: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.3) 45%, #000 70%); } }

/* ── Knowledge Graph as bento ──────────────────────────────────────── */
.kgb .bx-t.kgb-graph { min-height: 700px; justify-content: space-between; }
.kgb-graph .kg-viz { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; padding: 0; background: none; border: 0; }
.kgb-graph .kg-svg { width: 100%; max-width: 640px; margin: -2% 0 0; }
.kgb .bx-t.kgb-panel { padding: 0; justify-content: stretch; min-height: 700px; }
.kgb-panel .kg-panel { flex: 1; border-left: 0 !important; padding: 30px !important; }
.kgb-panel .kg-steps { min-height: 0 !important; }
.kgb .bx-t.w4 { min-height: 400px; }
.bx-ask.sm { width: 88%; height: 64px; padding: 0 22px; }
.bx-ask.sm .bx-q { font-size: 16px; }
.bx-q.static::after { display: none; }
.kgb-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 88%; }
.kgb-chip { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px 0 10px; border-radius: 999px; background: #16171a; box-shadow: 0 0 0 1px #2c2d33, 0 12px 30px -14px rgba(0,0,0,.9); font-size: 13.5px; color: #e4e4e7; white-space: nowrap; }
.kgb-chip svg { width: 14px; height: 14px; color: #35c9dd; }
.kgb-chip img { width: 14px; height: 13px; }
.kgb-chip[data-sn] { box-shadow: 0 0 0 1px rgba(98,216,78,.28), 0 12px 30px -14px rgba(0,0,0,.9); }
.kgb-ship { width: 88%; }
.kgb-ship .bx-rb { height: 60px; grid-template-columns: 24px 1fr auto; margin-left: calc(var(--i) * 14px); margin-right: calc((2 - var(--i)) * 14px); }
.kgb-rl b { display: block; font-size: 13.5px; font-weight: 500; color: #e4e4e7; }
.kgb-rl small { display: block; margin-top: 2px; font-size: 12px; color: #6b6e74; }
.kgb-ship .bx-rb em { font-family: var(--pp-inter); font-size: 12px; color: #35c9dd; }
@media (max-width: 1000px) { .kgb .bx-t.kgb-graph, .kgb .bx-t.kgb-panel { min-height: 0; } .kgb-graph .kg-viz { padding: 12px 0 24px; } }
.bx-ask.sm { height: auto; min-height: 64px; padding: 16px 22px; border-radius: 22px; align-items: flex-start; }
.bx-ask.sm .bx-q { white-space: normal; line-height: 1.4; }
.bx-ask.sm .bx-spark, .bx-ask.sm .bx-go { margin-top: 2px; }

/* ── Offset cards → bento tiles (visual on top, text at the bottom) ── */
.pp-card.bxc { border-radius: 12px !important; background: var(--pp-card) !important; box-shadow: inset 0 0 0 1px var(--pp-line) !important; }
.pp-card.bxc:hover { box-shadow: inset 0 0 0 1px var(--pp-line-2, #2a2b30), 0 30px 60px -40px rgba(0,0,0,.9) !important; transform: translateY(-2px); }
.pp-card.bxc .pp-vis { order: 0; margin-top: 0 !important; border-top: 0 !important; background: transparent !important; min-height: 320px !important; flex: 1 1 auto !important;
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, #000 62%, transparent 100%); }
.pp-card.bxc .pp-vis::before { content: ""; position: absolute; inset: -20% -10% auto 20%; height: 70%; background: radial-gradient(closest-side, rgba(53,201,221,.08), transparent); pointer-events: none; }
.pp-card.bxc .pp-vis .pa { left: 30px !important; top: 30px !important; }
.pp-card.bxc .pp-vis .pa-card { border-radius: 12px 0 0 0 !important; box-shadow: 0 0 0 1px #2c2d33, 0 24px 60px -24px rgba(0,0,0,.9) !important; background: #16171a !important; }
.pp-card.bxc .pp-t { order: 1; padding: 4px 30px 30px !important; }
.pp-card.bxc .pp-t small { display: block; }
.pp-card.bxc h3 { margin-top: 12px !important; }
.pp-card.bxc .go { margin-top: 16px; }
.ed-grid12 .pp-card.bxc .pp-vis { min-height: 260px !important; }
.ed-grid3.cards.sm .pp-card.bxc .pp-vis { min-height: 280px !important; }
.plug.bxc .pp-t { padding-top: 8px !important; }
.plug.bxc h3 { margin-top: 18px !important; }
@media (max-width: 700px) { .pp-card.bxc .pp-vis { min-height: 260px !important; } .pp-card.bxc .pp-vis .pa { left: 20px !important; top: 20px !important; } .pp-card.bxc .pp-t { padding: 4px 22px 24px !important; } }

/* ── Blast radius: one grid for columns, code and note ─────────────── */
.br-cols { position: relative; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; column-gap: clamp(32px, 5vw, 80px) !important; }
.br-cols::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--pp-line); }
.br-col, .br-col + .br-col, .br-col:first-child { padding-left: 0 !important; padding-right: 0 !important; border-left: 0 !important; }
.br-foot { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; column-gap: clamp(32px, 5vw, 80px) !important; }
.br-why { padding-top: 2px; }
@media (max-width: 860px) { .br-cols::before { display: none; } .br-cols, .br-foot { grid-template-columns: minmax(0, 1fr) !important; } }
.pp-card.bxc .pp-vis { flex: none !important; height: 320px !important; min-height: 0 !important; }
.ed-grid12 .pp-card.bxc .pp-vis { height: 260px !important; }
.ed-grid3.cards.sm .pp-card.bxc .pp-vis { height: 280px !important; }
.gov .pp-card.bxc .pp-vis { height: 340px !important; }
@media (max-width: 700px) { .pp-card.bxc .pp-vis, .ed-grid3.cards.sm .pp-card.bxc .pp-vis, .gov .pp-card.bxc .pp-vis { height: 260px !important; } }
.pp-card.bxc .pp-t p { display: block !important; -webkit-line-clamp: unset !important; overflow: visible !important; }

/* ── True bento spans for card grids ───────────────────────────────── */
.ed-grid3.cards, .ed-grid2.cards { display: grid !important; grid-template-columns: repeat(12, minmax(0, 1fr)) !important; gap: 16px !important; }
.ed-grid3.cards > .pp-card, .ed-grid2.cards > .pp-card { grid-column: span 6 !important; }
.ed-grid3.cards > .pp-card:nth-child(6n+1), .ed-grid2.cards > .pp-card:nth-child(4n+1) { grid-column: span 7 !important; }
.ed-grid3.cards > .pp-card:nth-child(6n+2), .ed-grid2.cards > .pp-card:nth-child(4n+2) { grid-column: span 5 !important; }
.ed-grid3.cards > .pp-card:nth-child(6n+3), .ed-grid2.cards > .pp-card:nth-child(4n+3) { grid-column: span 5 !important; }
.ed-grid3.cards > .pp-card:nth-child(6n+4), .ed-grid2.cards > .pp-card:nth-child(4n+4) { grid-column: span 7 !important; }
.ed-grid3.cards > .pp-card:nth-child(3):last-child { grid-column: span 12 !important; }
@media (max-width: 900px) { .ed-grid3.cards > .pp-card, .ed-grid2.cards > .pp-card, .ed-grid3.cards > .pp-card:nth-child(n) , .ed-grid2.cards > .pp-card:nth-child(n) { grid-column: span 12 !important; } }
/* waves behind the offset visual; visual runs off the right edge */
.pp-card.bxc .pp-vis > canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .8; pointer-events: none; }
.pp-card.bxc .pp-vis .pa { z-index: 1; width: min(720px, calc(100% + 30px)) !important; }
.pp-card.bxc .pp-vis::before { z-index: 0; }
.ed-grid3.cards > .pp-card:nth-child(3):last-child .pp-vis .pa { width: 680px !important; }

/* ── Blast radius as bento ─────────────────────────────────────────── */
.brx .bx-t { min-height: 360px; }
.brx .br-t1 { justify-content: space-between; }
.brx .br-t1 > canvas { opacity: .45; }
.brx .br-top, .brx .br-bar { position: relative; z-index: 2; }
.brx .br-top { padding-bottom: 22px; }
.brx .br-t2 .bx-v { inset: 0 0 150px 0; align-items: flex-start; justify-content: flex-start; padding: 30px 0 0 30px; }
.brx .br-t2 .br-code { width: calc(100% + 40px); border-radius: 10px 0 0 10px; }
.brx .br-t3, .brx .br-t4 { justify-content: flex-start; min-height: 0; }
.brx .br-col { padding: 0 !important; }
.brx .br-t4 { box-shadow: inset 0 0 0 1px var(--pp-line-2, #2a2b30), 0 0 60px -30px rgba(53,201,221,.25); }
.bx-t.w6 { grid-column: span 6; }
@media (max-width: 1000px) { .bx-t.w6 { grid-column: span 12; } }
.brx code { font-family: var(--pp-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: .78em; color: var(--pp-ink); background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px var(--pp-line-2, #2a2b30); padding: 2px 8px; border-radius: 6px; white-space: nowrap; }
.brx .br-top small, .brx .br-why small { display: block; font: 500 11px/1 var(--pp-inter); letter-spacing: .2em; text-transform: uppercase; color: var(--pp-muted); margin-bottom: 14px; }
.brx .br-top p { margin: 0 !important; font: 400 clamp(22px, 2.2vw, 30px)/1.25 var(--pp-inter) !important; letter-spacing: -.025em; color: var(--pp-ink); }
.brx .br-tot { flex: none; text-align: right; }
.brx .br-tot span { white-space: nowrap; }

/* ── Hero composer scene ───────────────────────────────────────────── */
.hx-scene { position: absolute; z-index: 6; left: calc(50% + 10px); top: clamp(190px, 15vw, 230px); width: min(600px, calc(50% - 60px)); }
.hx-glow { position: absolute; left: -10%; right: -10%; top: -20%; height: 70%; background: radial-gradient(closest-side, rgba(53,201,221,.18), transparent); filter: blur(30px); pointer-events: none; }
.hx-comp { position: relative; padding: 18px 18px 14px; border-radius: 20px; background: rgba(20,21,24,.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px #2c2d33, 0 0 0 6px rgba(53,201,221,.04), 0 40px 100px -40px rgba(53,201,221,.35), 0 30px 80px -30px rgba(0,0,0,.9); transition: box-shadow .5s; }
.hx-scene.sent .hx-comp { box-shadow: 0 0 0 1px rgba(53,201,221,.55), 0 0 0 6px rgba(53,201,221,.08), 0 40px 100px -40px rgba(53,201,221,.5), 0 30px 80px -30px rgba(0,0,0,.9); }
.hx-head { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 500; color: #c9cacd; padding: 2px 4px 12px; }
.hx-dot { width: 7px; height: 7px; border-radius: 50%; background: #35c9dd; box-shadow: 0 0 10px #35c9dd; }
.hx-sp { flex: 1; } .hx-n { font-variant-numeric: tabular-nums; color: #6b6e74; letter-spacing: .08em; font-size: 11.5px; }
.hx-cq { margin: 0 !important; padding: 4px 4px 18px; min-height: 3.1em; font: 400 clamp(18px, 1.55vw, 22px)/1.4 var(--pp-inter) !important; letter-spacing: -.015em; color: #f4f4f5; }
.hx-caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -.16em; background: #35c9dd; animation: blink 1s steps(1) infinite; }
.hx-row { display: flex; align-items: center; gap: 6px; }
.hx-row .cp { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 8px; font-size: 12.5px; color: #c9cacd; box-shadow: inset 0 0 0 1px #2c2d33; }
.hx-row .cp b { font-weight: 500; color: #f4f4f5; }
.hx-row .cp svg { width: 13px; height: 13px; color: #35c9dd; }
.hx-row .cp .d { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; }
.hx-row .cv { color: #6b6e74; font-size: 10px; }
.hx-row .sp { flex: 1; }
.hx-row .send { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #f4f4f5; }
.hx-row .send svg { width: 15px; height: 15px; color: #0b0c0e; }
.hx-scene.sent .hx-row .send { background: #35c9dd; }
.hx-res { position: relative; display: grid; gap: 10px; margin-top: 16px; }
.hx-r { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 58px; padding: 0 16px 0 12px; border-radius: 14px; background: rgba(20,21,24,.9);
  box-shadow: 0 0 0 1px #2c2d33, 0 18px 40px -22px rgba(0,0,0,.9); margin-left: calc(var(--k) * 22px); margin-right: calc((3 - var(--k)) * -8px);
  opacity: 0; transform: translateY(10px); filter: blur(4px); transition: opacity .6s var(--ease-soft), transform .6s var(--ease-soft), filter .6s var(--ease-soft); }
.hx-r.in { opacity: 1; transform: none; filter: none; }
.hx-r.out { opacity: 0; transform: translateY(-6px); filter: blur(4px); transition-duration: .35s; }
.hx-ic .ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: rgba(53,201,221,.1); color: #35c9dd; }
.hx-ic svg { width: 15px; height: 15px; }
.hx-t b { display: block; font-size: 14px; font-weight: 500; color: #f4f4f5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-t small { display: block; margin-top: 2px; font-size: 12px; color: #80838a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-r em { font-style: normal; font-size: 11.5px; font-weight: 500; letter-spacing: .04em; color: #35c9dd; padding: 5px 8px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(53,201,221,.35); }
@media (max-width: 1180px) { .hx-scene { position: relative; left: auto; top: auto; width: auto; max-width: 640px; margin: 56px 0 0; padding: 0 var(--pp-gutter, 24px) 48px; } .hx-r { margin-right: 0; } }
@media (max-width: 700px) { .hx-scene { padding: 0 16px 40px; } .hx-r { margin-left: calc(var(--k) * 8px); } }
@media (prefers-reduced-motion: reduce) { .hx-caret { animation: none; } }
.hx-r { margin-right: 0 !important; }

/* ── Hero, calmer: monochrome composer + a quiet ruled list ─────────── */
.hx-waves { filter: grayscale(1) brightness(.9); opacity: .5; }
.hx-glow { display: none; }
.hx-comp, .hx-scene.sent .hx-comp { background: #121316; box-shadow: 0 0 0 1px #2a2b30, 0 40px 90px -40px rgba(0,0,0,.95) !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
.hx-scene.sent .hx-comp { box-shadow: 0 0 0 1px #4a4b52, 0 40px 90px -40px rgba(0,0,0,.95) !important; }
.hx-dot { background: #9a9da3; box-shadow: none; }
.hx-head { color: #9a9da3; }
.hx-row .cp svg { color: #9a9da3; }
.hx-row .cp .d { background: #9a9da3; }
.hx-scene.sent .hx-row .send { background: #f4f4f5; }
.hx-res { gap: 0; margin: 22px 6px 0; border-top: 1px solid #222327; }
.hx-r, .hx-r.in { margin: 0 !important; min-height: 46px; padding: 0 2px; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; border-radius: 0; background: none; box-shadow: none; border-bottom: 1px solid #1c1d21; }
.hx-ic .ic { width: 16px; height: 16px; background: none; color: #6b6e74; }
.hx-ic svg { width: 14px; height: 14px; }
.hx-t { display: flex !important; align-items: baseline; gap: 10px; min-width: 0; }
.hx-t b { font-size: 14px; font-weight: 400; color: #d9dadd; flex: none; }
.hx-t small { margin: 0; font-size: 12.5px; color: #5c5f66; }
.hx-r em { padding: 0; box-shadow: none; font-size: 12px; font-weight: 400; letter-spacing: 0; color: #6b6e74; }
.hx-r.in em::before { content: "✓ "; color: #f4f4f5; }
.hx-r.in .hx-ic .ic { color: #c9cacd; }
@media (max-width: 700px) { .hx-t small { display: none; } }

/* ── Hero composer — matches the product composer ──────────────────── */
.hc { position: relative; padding: 18px 16px 14px 20px; border-radius: 16px; background: #151619; box-shadow: 0 0 0 1px #26272b, 0 40px 90px -40px rgba(0,0,0,.95); transition: box-shadow .4s; }
.hx-scene.sent .hc { box-shadow: 0 0 0 1px #3a3b40, 0 40px 90px -40px rgba(0,0,0,.95); }
.hc-top { position: absolute; right: 18px; top: 16px; display: flex; align-items: center; gap: 9px; }
.hc-pct { font-size: 13px; color: #7a7d83; font-variant-numeric: tabular-nums; }
.hc-ring { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid #2e2f34; border-top-color: #6b6e74; transform: rotate(35deg); }
.hc .hx-cq { padding: 0 80px 0 0 !important; min-height: 4.4em; font: 400 17px/1.5 var(--pp-inter) !important; color: #e4e4e7; letter-spacing: -.005em; }
.hc .hx-caret { width: 1.5px; height: 1.1em; background: #c9cacd; margin: 0 1px; }
.hc-ph { color: #7a7d83; }
.hx-qt:not(:empty) ~ .hc-ph { display: none; }
.hc-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.hc-chip { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; border-radius: 8px; font-size: 14px; color: #9a9da3; white-space: nowrap; }
.hc-chip.f { background: #222326; }
.hc-chip.f b { font-weight: 600; color: #e4e4e7; }
.hc-chip.o { box-shadow: inset 0 0 0 1px #26272b; }
.hc-chip svg { width: 16px; height: 16px; color: #c9cacd; }
.hc-chip.o svg { color: #9a9da3; }
.hc-chip .hc-cv { width: 13px; height: 13px; color: #7a7d83; }
.hc-red { width: 9px; height: 9px; border-radius: 50%; background: #b23a33; }
.hc-sn { width: 22px; height: 22px; border-radius: 5px; display: grid; place-items: center; background: #1f3a2a; }
.hc-sn img { width: 13px; height: 12px; }
.hc-sp { flex: 1; }
.hc-clip { width: 18px; height: 18px; color: #7a7d83; margin-right: 6px; }
.hc-send { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; box-shadow: inset 0 0 0 1px #26272b; transition: background .3s, box-shadow .3s; }
.hc-send svg { width: 15px; height: 15px; color: #5c5f66; }
.hx-scene.sent .hc-send { background: #f4f4f5; box-shadow: none; }
.hx-scene.sent .hc-send svg { color: #0b0c0e; }
.hc-disc { margin: 12px 0 0 !important; text-align: center; font-size: 12.5px; color: #6b6e74; }
.hx-scene .hx-res { margin-top: 26px; }
@media (max-width: 560px) { .hc-chip.o, .hc-clip { display: none; } .hc .hx-cq { padding-right: 64px !important; font-size: 16px !important; } }

/* ── Centred hero: composer → instance window ──────────────────────── */
.pp-hero.hc2 { position: relative; overflow: hidden; min-height: 0; padding-bottom: 0 !important; background: var(--pp-paper) !important; background-image: none !important; text-align: center; }
.hc2-top { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.hc2 h1 { font-size: clamp(44px, 5.4vw, 80px) !important; line-height: 1 !important; letter-spacing: -.045em !important; max-width: 16ch !important; margin: 26px auto 0 !important; }
.hc2.long h1 { font-size: clamp(36px, 4vw, 58px) !important; max-width: 22ch !important; line-height: 1.05 !important; }
.hc2 .hx-lede { margin: 24px auto 0 !important; max-width: 58ch; font-size: 18px; line-height: 1.6; color: var(--pp-body); }
.hc2 .pp-ctas { justify-content: center; margin-top: 32px; }
.hc2-stage { position: relative; margin-top: 64px; padding: 0 16px; }
.hc2-waves { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; filter: grayscale(.75); opacity: .75; }
.hc2 .hx-scene { position: relative; z-index: 2; left: auto; top: auto; width: auto; max-width: none; margin: 0 auto; padding: 0; display: flex; flex-direction: column; align-items: center; text-align: left; }
.hc2 .hc { width: min(640px, 100%); }
.hc2-link { display: block; width: 1px; height: 56px; background: linear-gradient(180deg, #4a4b52, #2a2b30); }
.hx-scene.sent .hc2-link { background: linear-gradient(180deg, #9a9da3, #4a4b52); }
.hc2-win { width: min(940px, 100%); height: 400px; border-radius: 16px 16px 0 0; background: #121316; box-shadow: 0 0 0 1px #26272b, 0 -30px 80px -40px rgba(0,0,0,.9);
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%); overflow: hidden; }
.hc2-bar { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 16px; border-bottom: 1px solid #1f2024; }
.hc2-bar i { display: block; height: 14px; border-radius: 7px; background: #222326; }
.hc2-bar i.p1 { width: 54px; background: #2e3035; } .hc2-bar i.p2 { width: 72px; } .hc2-bar span { flex: 1; } .hc2-bar i.p3 { width: 140px; margin-right: auto; } .hc2-bar i.p4 { width: 40px; }
.hc2-body { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 28px; padding: 26px 26px 0 22px; }
.hc2-side { display: grid; gap: 12px; align-content: start; }
.hc2-side i { display: block; height: 9px; border-radius: 5px; background: #1f2024; width: 70%; }
.hc2-side i:nth-child(2) { width: 90%; } .hc2-side i:nth-child(4) { width: 80%; } .hc2-side i:nth-child(5) { width: 60%; }
.hc2-win .hx-res { margin: 0 !important; border-top: 0; gap: 12px; }
.hc2-win .hx-r, .hc2-win .hx-r.in { min-height: 50px; padding: 0 14px 0 12px; border: 0; border-radius: 12px; background: #17181b; box-shadow: 0 0 0 1px #202125; transform: none; filter: none; opacity: 1; }
.hc2-win .hx-r:not(.in) .hx-t b, .hc2-win .hx-r:not(.in) .hx-t small, .hc2-win .hx-r:not(.in) em { color: transparent !important; background: #222326; border-radius: 6px; }
.hc2-win .hx-r:not(.in) .hx-t small { display: none; }
.hc2-win .hx-r:not(.in) em::before { content: none; }
.hc2-win .hx-r:not(.in) .hx-ic .ic { color: #3a3b40; }
.hc2-win .hx-r.in { box-shadow: 0 0 0 1px #2c2d33; }
.hc2-win .hx-r.out { opacity: .3; }
@media (max-width: 700px) { .hc2-body { grid-template-columns: minmax(0, 1fr); padding: 18px 14px 0; } .hc2-side { display: none; } .hc2-win { height: 340px; } .hc2 .hx-lede { font-size: 16.5px; } }

/* ── Bento sketch details ──────────────────────────────────────────── */
.bx-ico { position: absolute; z-index: 3; left: 30px; top: 28px; color: #9a9da3; }
.bx-ico svg { width: 20px; height: 20px; display: block; }
.asx .as-big { min-height: 640px; }
.asx .as-vis { position: absolute !important; inset: 70px 0 150px 30px; min-height: 0 !important; background: transparent !important; box-shadow: none !important; border-radius: 0; }
.asx .as-vis .rp { left: 10px; top: 10px; transform: rotate(-1deg); }
.as-stack { grid-column: span 5; display: grid; gap: 16px; }
.as-stack .bx-t { min-height: 0; }
@media (max-width: 1000px) { .as-stack { grid-column: span 12; } .asx .as-big { min-height: 600px; } }
@media (max-width: 700px) { .asx .as-vis { inset: 64px 0 190px 16px; } }
.bx-t .bx-v { top: 62px !important; }
.bx-t.roles .bx-roles { padding-top: 0; }
.brx .br-t2 .bx-v { top: 0 !important; }
.bx-roles { gap: 9px; }
.bx-role { height: 54px; }
.bx-role.add { height: 26px; }
.bx-av { width: 34px; height: 34px; }

/* ── Sketch tiles ──────────────────────────────────────────────────── */
.bx-t.sk { min-height: 470px; }
.sk .bx-v { align-items: center; justify-content: center; }
.sk-sw { width: 42px; height: 24px; border-radius: 12px; background: #2a2b30; position: relative; flex: none; }
.sk-sw i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #6b6e74; transition: left .4s var(--ease-soft); }
.sk-sw.on { background: #35c9dd; } .sk-sw.on i { left: 21px; background: #0b0c0e; }
.sk-tgi { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; background: #1f2024; color: #c9cacd; flex: none; }
.sk-tgi svg { width: 16px; height: 16px; }
.sk-tw { position: relative; width: 92%; height: 100%; display: flex; align-items: center; }
.sk-tg { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; width: 44%; padding: 12px 14px; border-radius: 14px; background: #121316; box-shadow: 0 0 0 1px #2c2d33; }
.sk-tg b { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 500; color: #c9cacd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-dots { position: relative; z-index: 1; width: 8%; height: 60%; margin-top: -8%; overflow: visible; }
.sk-dots path { fill: none; stroke: #4a4b52; stroke-width: 2; stroke-dasharray: 2 5; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.sk-win { position: relative; z-index: 2; flex: 1; align-self: flex-start; margin-top: 2%; border-radius: 14px; background: #0f1012; box-shadow: 0 0 0 1px #2c2d33; overflow: hidden; }
.sk-wbar { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; }
.sk-wbar i { display: block; height: 10px; border-radius: 5px; background: #222326; }
.sk-wbar i.a { width: 42px; background: rgba(53,201,221,.55); } .sk-wbar i.b { width: 60px; } .sk-wbar span { flex: 1; } .sk-wbar i.c { width: 110px; margin-right: auto; } .sk-wbar i.d { width: 26px; }
.sk-wbody { display: grid; grid-template-columns: 22% 1fr; gap: 16px; padding: 12px 14px 22px; }
.sk-side { display: grid; gap: 9px; align-content: start; }
.sk-side i { display: block; height: 7px; border-radius: 4px; background: #1f2024; width: 80%; }
.sk-side i.a { width: 60%; background: rgba(53,201,221,.55); }
.sk-main { display: grid; gap: 12px; align-content: start; }
.sk-main > i { display: block; height: 16px; border-radius: 8px; background: #1f2024; }
.sk-main > i.hi { background: rgba(53,201,221,.6); }
.sk-stack { position: relative; width: 82%; height: 150px; }
.sk-card { position: absolute; left: 0; right: 0; height: 74px; border-radius: 18px; background: #121316; box-shadow: 0 0 0 1px #2c2d33; }
.sk-card.b2 { top: 0; left: 12%; right: 12%; opacity: .55; }
.sk-card.b1 { top: 16px; left: 6%; right: 6%; opacity: .8; }
.sk-card.f { top: 34px; display: flex; align-items: center; gap: 14px; padding: 0 18px 0 16px; box-shadow: 0 0 0 1px #34353b, 0 24px 50px -24px rgba(0,0,0,.9); }
.sk-card.f b { flex: 1; min-width: 0; font-size: 17px; font-weight: 500; color: #9a9da3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-card.f .sk-tgi { background: rgba(53,201,221,.12); color: #35c9dd; }
.sk-askb { width: min(86%, 520px); }
.sk-bw { position: relative; width: 70%; height: 86%; }
.sk-win.sm { position: absolute; inset: 12% 8% 6% 12%; margin: 0; }
.sk-blocks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sk-blocks i { display: block; height: 58px; border-radius: 12px; background: #1f2024; }
.sk-blocks i.hi { background: rgba(53,201,221,.5); }
.sk-bd { position: absolute; z-index: 3; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; transform: translate(-50%, -50%); background: #16171a; color: #c9cacd; box-shadow: 0 0 0 1px #3a3b40, 0 14px 30px -14px rgba(0,0,0,.9); animation: skfloat 6s ease-in-out infinite; }
.sk-bd:nth-of-type(2) { animation-delay: -2s; } .sk-bd:nth-of-type(3) { animation-delay: -4s; }
.sk-bd svg { width: 18px; height: 18px; }
.sk-cur { position: absolute; z-index: 4; display: inline-flex; align-items: flex-start; gap: 4px; color: #c9cacd; animation: bxcur 7s ease-in-out infinite; }
.sk-cur.t { color: #35c9dd; animation-delay: -3s; }
.sk-cur svg { width: 16px; height: 16px; fill: currentColor; }
.sk-cur b { margin-top: 12px; font-size: 12px; font-weight: 500; padding: 3px 8px; border-radius: 6px; background: #1f2024; box-shadow: inset 0 0 0 1px #3a3b40; white-space: nowrap; }
.sk-cur.t b { background: rgba(53,201,221,.12); box-shadow: inset 0 0 0 1px rgba(53,201,221,.45); }
@keyframes skfloat { 50% { transform: translate(-50%, calc(-50% - 6px)); } }
@media (max-width: 700px) { .bx-t.sk { min-height: 420px; } .sk-tw { flex-direction: column; align-items: stretch; gap: 14px; } .sk-tg { width: 100%; } .sk-dots { display: none; } .sk-win { margin: 0; } .sk-bw { width: 92%; } }
@media (prefers-reduced-motion: reduce) { .sk-bd, .sk-cur { animation: none; } }
.bx-t.sk > canvas, .bx-t > canvas { -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 50%, transparent 72%); mask-image: linear-gradient(180deg, #000 0%, #000 50%, transparent 72%); }
.sk .bx-v { bottom: 176px !important; }
.sk-tw { height: auto; }

/* ── 3D cursors ────────────────────────────────────────────────────── */
.c3 { position: absolute; z-index: 5; display: inline-flex; align-items: flex-start; gap: 2px; transform: rotate(var(--r, -8deg)); animation: c3float 7s ease-in-out infinite; pointer-events: none; }
.c3 svg { width: 34px; height: 34px; overflow: visible; filter: drop-shadow(0 8px 10px rgba(0,0,0,.55)); }
.c3 .bk { opacity: .9; }
.c3 .fr { stroke-width: 1.4; stroke-linejoin: round; }
.c3 b { margin-top: 24px; font-size: 12.5px; font-weight: 500; padding: 4px 9px; border-radius: 7px; white-space: nowrap; transform: rotate(calc(-1 * var(--r, -8deg))); box-shadow: 0 10px 24px -12px rgba(0,0,0,.8); }
.c3.t .s1 { stop-color: #b8f1f8; } .c3.t .s2 { stop-color: #35c9dd; } .c3.t .fr { stroke: #7fe3ef; } .c3.t .bk { fill: #0e5963; }
.c3.t b { color: #b8f1f8; background: rgba(12,56,62,.92); box-shadow: inset 0 0 0 1px rgba(53,201,221,.55), 0 10px 24px -12px rgba(0,0,0,.8); }
.c3.w .s1 { stop-color: #ffffff; } .c3.w .s2 { stop-color: #b9bcc2; } .c3.w .fr { stroke: #e4e4e7; } .c3.w .bk { fill: #4a4b52; }
.c3.w b { color: #0b0c0e; background: #e4e4e7; }
.c3.g .s1 { stop-color: #9a9da3; } .c3.g .s2 { stop-color: #55585e; } .c3.g .fr { stroke: #9a9da3; } .c3.g .bk { fill: #2a2b30; }
.c3.g b { color: #c9cacd; background: #26272c; box-shadow: inset 0 0 0 1px #3a3b40; }
.c3:nth-of-type(2n) { animation-delay: -3.2s; }
@keyframes c3float { 0%, 100% { translate: 0 0; } 33% { translate: 10px 6px; } 66% { translate: -6px 10px; } }
.bx-doc .c3 { position: absolute; }

/* ── Unique sketches ───────────────────────────────────────────────── */
.sk-tri { position: relative; width: 82%; padding: 16px; border-radius: 14px; background: #0f1012; box-shadow: 0 0 0 1px #2c2d33; overflow: hidden; }
.tri-h { display: flex; justify-content: space-between; font-size: 12px; color: #80838a; padding: 0 2px 12px; border-bottom: 1px solid #1f2024; margin-bottom: 6px; }
.tri-h em { font-style: normal; color: #c9cacd; font-variant-numeric: tabular-nums; }
.sk-tri .tr { display: flex; align-items: center; gap: 14px; height: 46px; border-bottom: 1px solid #18191c; }
.sk-tri .bar { display: block; height: 10px; border-radius: 5px; background: #1f2024; flex: none; max-width: 46%; }
.sk-tri .seg { margin-left: auto; display: inline-flex; padding: 3px; border-radius: 9px; background: #16171a; box-shadow: inset 0 0 0 1px #26272b; }
.sk-tri .seg b { font-size: 11.5px; font-weight: 500; color: #6b6e74; padding: 5px 9px; border-radius: 7px; }
.sk-tri .seg b.on { color: #0b0c0e; background: #e4e4e7; }
.sk-tri .tr:nth-child(3) .seg b.on { background: #35c9dd; }
.sk-tri .scan { position: absolute; left: 0; right: 0; height: 40px; top: 40px; background: linear-gradient(180deg, transparent, rgba(53,201,221,.08), transparent); border-bottom: 1px solid rgba(53,201,221,.35); animation: skscan 4.5s ease-in-out infinite; pointer-events: none; }
@keyframes skscan { 0% { top: 30px; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: calc(100% - 30px); opacity: 0; } }
.sk-ring { position: relative; width: 200px; height: 200px; display: grid; place-items: center; }
.sk-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.sk-ring .tk { fill: none; stroke: #1f2024; stroke-width: 7; }
.sk-ring .pg { fill: none; stroke: #e4e4e7; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 314; stroke-dashoffset: 314; animation: skring 5s var(--ease-soft) infinite; }
@keyframes skring { 0% { stroke-dashoffset: 314; } 60%, 100% { stroke-dashoffset: 0; } }
.rg-c { text-align: center; }
.rg-c b { display: block; font-size: 40px; font-weight: 400; letter-spacing: -.04em; color: #f4f4f5; line-height: 1; }
.rg-c b small { font-size: 16px; color: #6b6e74; letter-spacing: 0; }
.rg-c span { display: block; margin-top: 6px; font-size: 12px; color: #80838a; }
.rg-dots { position: absolute; bottom: -34px; display: flex; gap: 6px; }
.rg-dots i { width: 7px; height: 7px; border-radius: 50%; background: #26272b; animation: skdot 5s calc(var(--d) * .25s) infinite; }
@keyframes skdot { 0%, 5% { background: #26272b; } 12%, 90% { background: #35c9dd; } 100% { background: #26272b; } }
.sk-br { position: relative; width: 86%; height: 170px; display: flex; align-items: flex-end; justify-content: space-between; }
.sk-br .arc { position: absolute; left: 8%; right: 8%; top: 0; width: 84%; height: 120px; overflow: visible; }
.sk-br .arc path { fill: none; stroke: #3a3b40; stroke-width: 1.5; stroke-dasharray: 3 6; vector-effect: non-scaling-stroke; }
.sk-br .dot { fill: #35c9dd; filter: drop-shadow(0 0 6px #35c9dd); }
.vp { position: relative; z-index: 2; padding: 10px 16px; border-radius: 12px; font-size: 14px; font-weight: 500; background: #121316; box-shadow: 0 0 0 1px #2c2d33; color: #9a9da3; }
.vp.b { color: #f4f4f5; box-shadow: 0 0 0 1px #4a4b52, 0 18px 40px -20px rgba(0,0,0,.9); }
.br-score { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); font-size: 12px; color: #80838a; padding: 6px 10px; border-radius: 8px; box-shadow: inset 0 0 0 1px #26272b; white-space: nowrap; }
.br-score b { color: #f4f4f5; font-weight: 500; margin-left: 4px; }
.sk-env { position: relative; width: 86%; height: 200px; display: grid; grid-template-columns: repeat(3, 1fr); align-items: start; padding-top: 20px; }
.en-track { position: absolute; left: 16%; right: 16%; top: 38px; height: 2px; background: repeating-linear-gradient(90deg, #3a3b40 0 6px, transparent 6px 12px); }
.en-track .tok { position: absolute; top: -4px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: #35c9dd; box-shadow: 0 0 10px #35c9dd; animation: sktok 4s ease-in-out infinite; }
@keyframes sktok { 0% { left: 0; opacity: 0; } 10% { opacity: 1; } 50%, 85% { left: calc(50% - 5px); opacity: 1; } 100% { left: calc(50% - 5px); opacity: 0; } }
.en { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.en i { width: 38px; height: 38px; border-radius: 12px; background: #121316; box-shadow: 0 0 0 1px #3a3b40; }
.en.on i { box-shadow: 0 0 0 1.5px #35c9dd, 0 0 24px -6px rgba(53,201,221,.6); }
.en.lk i { background: #0f1012 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6e74' stroke-width='1.8'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 018 0v3'/%3E%3C/svg%3E") center / 16px no-repeat; }
.en b { font: 500 13px var(--pp-mono, ui-monospace, Menlo, monospace); color: #c9cacd; }
.en.on b { color: #f4f4f5; }
.en small { font-size: 11.5px; color: #6b6e74; }
.en-appr { position: absolute; left: 50%; top: 128px; transform: translateX(-50%); font-size: 13px; font-weight: 500; color: #0b0c0e; background: #f4f4f5; padding: 9px 14px; border-radius: 9px; white-space: nowrap; }
.sk-fence { position: relative; width: 84%; }
.fz { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 16px; border-radius: 16px; background: #0f1012; box-shadow: 0 0 0 1px #2c2d33; }
.fz span { display: flex; align-items: center; gap: 7px; height: 48px; padding: 0 12px; border-radius: 10px; background: #16171a; color: #4a4b52; overflow: hidden; }
.fz span svg { width: 12px; height: 12px; flex: none; }
.fz code { font: 11.5px var(--pp-mono, ui-monospace, Menlo, monospace); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fz span.on { color: #e4e4e7; background: #131a1c; box-shadow: 0 0 0 1.5px rgba(53,201,221,.7), 0 0 24px -10px rgba(53,201,221,.6); }
.fz span:nth-child(n+4) { opacity: .55; }
.fl { display: block; margin-top: 12px; text-align: center; font-style: normal; font-size: 12px; color: #80838a; }
.sk-tl { position: relative; width: 80%; padding-left: 18px; border-left: 1px solid #2c2d33; display: grid; gap: 18px; }
.tl-e { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 10px; font-size: 13px; color: #c9cacd; }
.tl-e i { position: absolute; left: -23px; top: 5px; width: 9px; height: 9px; border-radius: 50%; background: #0f1012; box-shadow: 0 0 0 1.5px #4a4b52; }
.tl-e:first-child i { background: #35c9dd; box-shadow: 0 0 0 1.5px #35c9dd, 0 0 10px #35c9dd; }
.tl-e time { color: #6b6e74; font-variant-numeric: tabular-nums; }
.stamp { position: absolute; right: -6px; top: -10px; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #e4e4e7; padding: 7px 11px; border-radius: 8px; box-shadow: inset 0 0 0 1.5px #e4e4e7; transform: rotate(8deg); }
.stamp svg { width: 13px; height: 13px; }
.sk-sws { width: 80%; padding: 6px 16px; border-radius: 14px; background: #0f1012; box-shadow: 0 0 0 1px #2c2d33; }
.sw-r { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; height: 50px; border-bottom: 1px solid #18191c; }
.sw-r:last-child { border-bottom: 0; }
.sw-r b { font-size: 13.5px; font-weight: 500; color: #e4e4e7; }
.sw-r:nth-child(4) b { font-family: var(--pp-mono, ui-monospace, Menlo, monospace); font-size: 12.5px; color: #9a9da3; }
.sw-r small { font-size: 11.5px; color: #6b6e74; }
.sw-lk { width: 42px; display: grid; place-items: center; color: #9a9da3; } .sw-lk svg { width: 15px; height: 15px; }
.sk-sw.flip i { animation: skflip 4s ease-in-out infinite; }
.sk-sw.flip { animation: skflipbg 4s ease-in-out infinite; }
@keyframes skflip { 0%, 40% { left: 21px; background: #0b0c0e; } 50%, 90% { left: 3px; background: #6b6e74; } 100% { left: 21px; background: #0b0c0e; } }
@keyframes skflipbg { 0%, 40% { background: #35c9dd; } 50%, 90% { background: #2a2b30; } 100% { background: #35c9dd; } }
.sk-keys { position: relative; width: 78%; height: 210px; display: grid; grid-template-columns: 1fr 1fr 1.3fr; align-items: stretch; }
.kl { position: absolute; inset: 0; width: 100%; height: 100%; }
.kl path { fill: none; stroke: #2e2f34; stroke-width: 1.5; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.kc { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 16px 0; }
.kp i { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 600; color: #c9cacd; background: #1f2024; box-shadow: 0 0 0 1px #3a3b40; }
.kk { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: #9a9da3; background: #121316; box-shadow: 0 0 0 1px #2c2d33; }
.kk svg { width: 15px; height: 15px; }
.ki { display: inline-flex; align-items: center; gap: 7px; font: 12.5px var(--pp-mono, ui-monospace, Menlo, monospace); color: #9a9da3; padding: 8px 12px; border-radius: 10px; background: #121316; box-shadow: 0 0 0 1px #2c2d33; }
.ki .d { width: 6px; height: 6px; border-radius: 50%; background: #4a4b52; }
.ki.lit { color: #f4f4f5; box-shadow: 0 0 0 1.5px rgba(53,201,221,.7); } .ki.lit .d { background: #35c9dd; }
@media (max-width: 700px) { .sk-tri, .sk-fence, .sk-sws, .sk-tl { width: 94%; } .sk-env, .sk-br, .sk-keys { width: 96%; } .fz { grid-template-columns: repeat(2, 1fr); } .fz span:nth-child(n+7) { display: none; } }
@media (prefers-reduced-motion: reduce) { .c3, .sk-tri .scan, .sk-ring .pg, .rg-dots i, .en-track .tok, .sk-sw.flip, .sk-sw.flip i { animation: none; } .sk-ring .pg { stroke-dashoffset: 0; } }

/* ── Composed wireframe sketches ───────────────────────────────────── */
.bx-t.sk > canvas { opacity: 1; }
.sx { position: absolute; inset: 0; }
.sw { position: absolute; border-radius: 14px; background: #0c0d0f; box-shadow: 0 0 0 1px #34363b, 0 30px 70px -30px rgba(0,0,0,.95); overflow: hidden; z-index: 2; }
.sw-bar { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; }
.sw-bar i { display: block; height: 12px; border-radius: 6px; background: #2a2c30; }
.sw-bar i.a { width: 44px; background: #35c9dd; } .sw-bar i.b { width: 64px; } .sw-bar span { flex: 1; } .sw-bar i.c { width: 120px; margin-right: auto; } .sw-bar i.d { width: 28px; }
.sw-body { display: grid; grid-template-columns: 70px 1fr; gap: 22px; padding: 16px 18px 26px 16px; }
.sw-side { display: grid; gap: 10px; align-content: start; }
.sw-side i { display: block; height: 7px; border-radius: 4px; background: #232529; width: 80%; }
.sw-side i:first-child { width: 55%; } .sw-side i:nth-child(3) { width: 95%; }
.sw-main { display: grid; gap: 12px; align-content: start; }
.sw-main > i { display: block; height: 18px; border-radius: 9px; background: #232529; }
.sw-main > i.sw-h { width: 34%; height: 20px; background: #2a2c30; }
.sw-row { display: flex; align-items: center; gap: 12px; height: 30px; }
.sw-row > i { display: block; height: 16px; border-radius: 8px; background: #232529; }
.sw-row.hi > i { background: #35c9dd; }
.tri3 { margin-left: auto; display: inline-flex; gap: 4px; padding: 4px; border-radius: 8px; background: #16171a; box-shadow: inset 0 0 0 1px #26282c; }
.tri3 b { width: 18px; height: 10px; border-radius: 4px; background: #232529; }
.tri3 b.on { background: #c9cacd; }
.sw-row.hi .tri3 b.on { background: #35c9dd; }
.sk-tgi.t { background: #35c9dd; color: #0b0c0e; }
/* triage */
.sx-tri .sx-ctl { position: absolute; z-index: 3; left: 30px; top: 40%; width: 38%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: #0c0d0f; box-shadow: 0 0 0 1px #34363b, 0 24px 50px -24px rgba(0,0,0,.95); }
.sx-sk { flex: 1; display: grid; gap: 7px; } .sx-sk i { display: block; height: 9px; border-radius: 5px; background: #2a2c30; } .sx-sk i + i { height: 7px; background: #232529; }
.sx-ctl b { font-size: 15px; font-weight: 500; color: #f4f4f5; font-variant-numeric: tabular-nums; }
.sx-dots { position: absolute; z-index: 1; left: calc(30px + 38%); top: 12%; width: 8%; height: 40%; overflow: visible; }
.sx-dots path { fill: none; stroke: #35c9dd; stroke-width: 2; stroke-dasharray: 1 6; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: .8; }
.sx-tri .sw.crop { left: calc(30px + 46%); right: -2px; top: 4%; bottom: -30px; border-radius: 14px 0 0 0; }
.sx-tri .c3 { z-index: 4; }
/* readiness stack */
.sx-stk { display: flex; align-items: center; justify-content: center; }
.sx-stk .sc { position: absolute; left: 10%; right: 10%; height: 82px; border-radius: 20px; background: #0c0d0f; box-shadow: 0 0 0 1px #34363b; z-index: 2; }
.sx-stk .sc.b3 { top: calc(50% - 76px); left: 20%; right: 20%; opacity: .5; }
.sx-stk .sc.b2 { top: calc(50% - 58px); left: 15%; right: 15%; opacity: .75; }
.sx-stk .sc.b3 i, .sx-stk .sc.b2 i { position: absolute; left: 24px; top: 10px; width: 16px; height: 6px; border-radius: 3px; background: #35c9dd; opacity: .8; }
.sx-stk .sc.f { top: calc(50% - 36px); display: flex; align-items: center; gap: 16px; padding: 0 18px; box-shadow: 0 0 0 1px #3c3e44, 0 30px 60px -28px rgba(0,0,0,.95); }
.sx-stk .sc.f .sk-tgi { width: 42px; height: 42px; border-radius: 11px; }
.sx-stk .sc.f b { flex: 1; min-width: 0; font-size: clamp(17px, 1.6vw, 22px); font-weight: 500; letter-spacing: -.015em; color: #6b6e74; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-score { position: relative; width: 46px; height: 46px; display: grid; place-items: center; font-size: 14px; font-weight: 600; color: #f4f4f5; }
.sc-score svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.sc-score circle { fill: none; stroke: #232529; stroke-width: 3.5; }
.sc-score circle.p { stroke: #35c9dd; stroke-linecap: round; stroke-dasharray: 94.2; stroke-dashoffset: 13.2; }
/* release */
.sx-rel .sw.mid { left: 16%; right: 12%; top: 12%; bottom: 2%; }
.sw-blocks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sw-blocks i { position: relative; display: block; height: 64px; border-radius: 12px; background: #232529; }
.sw-blocks i.hi { background: #35c9dd; }
.sw-blocks em { position: absolute; left: 12px; bottom: 9px; font: normal 11.5px var(--pp-mono, ui-monospace, Menlo, monospace); color: #6b6e74; }
.sw-blocks i.hi em { color: #06363c; }
.sx-bd { position: absolute; z-index: 4; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; transform: translate(-50%, -50%); color: #e4e4e7; background: #16171a;
  box-shadow: 0 0 0 1.5px #4a4b52, 0 16px 34px -14px rgba(0,0,0,.95); animation: skfloat 6s ease-in-out infinite; }
.sx-bd.t { color: #35c9dd; background: #0f2a2e; box-shadow: 0 0 0 1.5px #35c9dd, 0 16px 34px -14px rgba(0,0,0,.95); animation-delay: -2s; }
.sx-bd:last-of-type { animation-delay: -4s; }
.sx-bd svg { width: 20px; height: 20px; }
.sx .c3 svg { width: 40px; height: 40px; }
@media (max-width: 700px) { .sx-tri .sx-ctl { width: 56%; top: 8%; } .sx-dots { display: none; } .sx-tri .sw.crop { left: 18%; top: 38%; } .sx-rel .sw.mid { left: 10%; right: 6%; } .sw-body { grid-template-columns: 1fr; } .sw-side { display: none; } }
.sk .bx-v { overflow: visible; }
.sx-tri .sw.crop, .sx-rel .sw.mid { -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%); mask-image: linear-gradient(180deg, #000 60%, transparent 100%); }
.sx-rel .sw.mid { bottom: -40px; }
.sk-ring .pg { stroke: #35c9dd; }

/* ── Stage pages: composed bento ───────────────────────────────────── */
.bx-t.w12 { grid-column: span 12; }
.bx-t.sk.wide { min-height: 440px; }
.bx-t.sk.wide .bx-v { left: 42%; bottom: 0 !important; top: 30px !important; }
.bx-t.sk.wide .bx-h { max-width: 38%; }
.bx-t.sk.wide .sx-rel .sw.mid { left: 12%; right: 6%; }
.sx-lb { flex: 1; min-width: 0; display: grid; gap: 7px; }
.sx-lb b { font-size: 14px; font-weight: 500; color: #e4e4e7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-lb i { display: block; height: 7px; border-radius: 4px; background: #232529; }
.sx-ctl em { font-style: normal; font-size: 15px; font-weight: 500; color: #f4f4f5; font-variant-numeric: tabular-nums; }
.sx-ask { display: flex; align-items: center; justify-content: center; }
.sc-score { font-size: 12.5px; }
/* split panel as bento */
.bx.sp .sp-vis { min-height: 560px; }
.sp-card { position: absolute; left: 30px; top: 70px; right: -2px; bottom: 150px; z-index: 2; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
.sp-card .pa { padding: 0 !important; display: block !important; }
.sp-card .pa-card { width: 100% !important; border-radius: 12px 0 0 0 !important; background: #0c0d0f !important; box-shadow: 0 0 0 1px #34363b, 0 30px 70px -30px rgba(0,0,0,.95) !important; }
.sp-paper { position: absolute !important; inset: 60px 0 150px 20px; min-height: 0 !important; background: transparent !important; box-shadow: none !important; z-index: 2; }
.sp-lede { margin: 0 !important; font-size: 16px; line-height: 1.6; color: var(--pp-body); max-width: 56ch; }
.bx.sp .sp-pts { justify-content: flex-start; padding-top: 76px; }
.bx.sp .sp-pts .ed-ledger { border-top: 1px solid var(--pp-line); }
@media (max-width: 1000px) { .bx-t.sk.wide .bx-v { left: 0; top: 62px !important; bottom: 176px !important; } .bx-t.sk.wide .bx-h { max-width: none; } .bx-t.sk.wide { min-height: 470px; } }
@media (max-width: 700px) { .bx.sp .sp-vis { min-height: 520px; } .sp-card { left: 16px; } }
.sw-blocks em { top: 10px; bottom: auto; }
.bx.sp .sp-pts { justify-content: flex-end; padding-top: 30px; }
.bx.sp .sp-pts .bx-h h3 { margin-bottom: 16px !important; }
.sx-tri .sx-ctl { width: 34%; }
@media (max-width: 700px) { .sx-tri .sx-ctl { width: 64% !important; left: 20px; } }
/* card → logo hub on the window edge */
.sx-tri { --cy: calc(40% + 32px); --wx: calc(30px + 46%); }
.sx-tri .sx-ctl { top: 40%; height: 64px; box-sizing: border-box; }
.sx-link { position: absolute; z-index: 1; top: var(--cy); left: calc(30px + 34%); width: calc(12% - 26px); height: 0; border-top: 2px dotted rgba(53,201,221,.8); transform: translateY(-1px); }
.sx-hub { position: absolute; z-index: 4; top: var(--cy); left: var(--wx); width: 56px; height: 56px; border-radius: 50%; transform: translate(-50%, -50%); display: grid; place-items: center;
  background: #050506; box-shadow: 0 0 0 1px #3a3b40, 0 0 0 6px rgba(53,201,221,.07), 0 16px 34px -12px rgba(0,0,0,.95); }
.sx-hub svg { width: 24px; height: 22px; color: #f4f4f5; }
@media (max-width: 700px) { .sx-link { display: none; } .sx-tri { --cy: 38%; --wx: 18%; } .sx-tri .sx-ctl { top: 8%; } }
@media (max-width: 700px) { .sx-hub { display: none; } .sx-tri .sx-ctl { top: 2%; } .sx-tri .sw.crop { top: 46% !important; } }
/* hub = a bump in the window's own border */
.sx-hub { z-index: 1 !important; width: 58px; height: 58px; background: #0c0d0f !important; box-shadow: 0 0 0 1px #34363b !important; }
.sx-hubl { position: absolute; z-index: 3; top: var(--cy); left: var(--wx); width: 58px; height: 58px; transform: translate(-50%, -50%); display: grid; place-items: center; }
.sx-hubl::before { content: ""; position: absolute; left: 50%; top: 1px; bottom: 1px; width: 4px; transform: translateX(-50%); background: #0c0d0f; }
.sx-hubl svg { position: relative; width: 24px; height: 22px; color: #f4f4f5; }
.sx-link { width: calc(12% - 29px); }
@media (max-width: 700px) { .sx-hubl { display: none; } }

/* ── Theme toggle ──────────────────────────────────────────────────── */
.pp-theme-btn { width: 38px; height: 38px; margin-right: 8px; border: 0; border-radius: 8px; display: inline-grid; place-items: center; cursor: pointer; background: transparent; color: var(--pp-ink); box-shadow: inset 0 0 0 1px var(--pp-line-2); transition: box-shadow .2s; }
.pp-theme-btn:hover { box-shadow: inset 0 0 0 1px var(--pp-muted); }
.pp-theme-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.pp-theme-btn .moon { display: none; }
html[data-theme="light"] .pp-theme-btn .sun { display: none; }
html[data-theme="light"] .pp-theme-btn .moon { display: block; }

/* ── Situations ────────────────────────────────────────────────────── */
a.bx-t.sit { text-decoration: none; color: inherit; transition: box-shadow .25s, transform .25s var(--ease-soft); }
a.bx-t.sit:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--pp-line-2), 0 30px 60px -40px rgba(0,0,0,.9); }
.sit-tag { position: absolute; z-index: 3; right: 26px; top: 26px; font: 500 11px/1 var(--pp-inter); letter-spacing: .16em; text-transform: uppercase; color: var(--pp-muted); padding: 7px 9px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--pp-line-2); }
.bx-t.sit .go { display: inline-flex; gap: 6px; align-items: center; margin-top: 16px; font: 500 14px/1 var(--pp-inter); color: var(--pp-ink); }
.bx-t.sit .go svg { width: 14px; height: 14px; transition: transform .25s; }
.bx-t.sit:hover .go svg { transform: translateX(3px); }
.bx-t.sit.w4 { min-height: 440px; }
.sx-rp .rp { left: 30px; top: 10px; width: 600px; transform: rotate(-1.4deg); }
.sx-rp { overflow: hidden; }
.sit-more { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: 22px; }
.sit-more a { display: inline-flex; gap: 8px; align-items: center; font-size: 15px; color: var(--pp-ink); text-decoration: none; }
.sit-more a svg { width: 14px; height: 14px; }
.sit-more a:last-child { color: var(--pp-muted); }
.ed-sub { margin: 56px 0 24px; max-width: 64ch; }
.ed-sub h3 { margin: 0 0 10px !important; font-size: clamp(24px, 2.4vw, 32px) !important; font-weight: 500 !important; letter-spacing: -.03em !important; color: var(--pp-ink); }
.ed-sub p { margin: 0 !important; font-size: 16.5px; line-height: 1.6; color: var(--pp-body); }
.ed-trust { margin-top: 56px; }
.nav_column[data-sit-col] .icon_dropdown-link svg { color: currentColor; }

/* ── Roles ─────────────────────────────────────────────────────────── */
.rl-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.rl-tab { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 0; border-radius: 999px; cursor: pointer; font: 500 14px var(--pp-inter); color: var(--pp-muted); background: transparent; box-shadow: inset 0 0 0 1px var(--pp-line-2); transition: color .2s, background .2s, box-shadow .2s; }
.rl-tab svg { width: 15px; height: 15px; }
.rl-tab:hover { color: var(--pp-ink); }
.rl-tab.on { color: var(--pp-on-ink); background: var(--pp-ink); box-shadow: none; }
.rl-panel, .rl-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 32px; min-height: 480px; border-radius: 12px; background: var(--pp-card); box-shadow: inset 0 0 0 1px var(--pp-line); overflow: hidden; }
.rl-row { min-height: 460px; padding: 0 !important; }
.rl-copy { position: relative; z-index: 2; padding: 40px 0 36px 36px; display: flex; flex-direction: column; }
.rl-row .rl-copy { padding-top: 76px; }
.rl-k { font: 500 11px/1 var(--pp-inter); letter-spacing: .18em; text-transform: uppercase; color: var(--pp-muted); }
.rl-t { margin: 14px 0 0 !important; font-size: clamp(24px, 2.4vw, 32px) !important; font-weight: 500 !important; letter-spacing: -.03em !important; line-height: 1.12 !important; color: var(--pp-ink); }
.rl-p { margin: 12px 0 0 !important; font-size: 16px; line-height: 1.6; color: var(--pp-body); max-width: 48ch; }
.rl-s { margin-top: 26px; font: 500 11px/1 var(--pp-inter); letter-spacing: .18em; text-transform: uppercase; color: var(--pp-muted); }
.rl-asks { list-style: none; margin: 12px 0 0 !important; padding: 0 !important; display: grid; gap: 8px; }
.rl-asks li { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 999px; font-size: 14px; color: var(--pp-ink-2); background: var(--pp-paper); box-shadow: inset 0 0 0 1px var(--pp-line); width: fit-content; max-width: 100%; }
.rl-asks .bx-spark svg { width: 13px; height: 13px; color: #35c9dd; display: block; }
html[data-theme="light"] .rl-asks .bx-spark svg { color: #027586; }
.rl-sits { margin-top: auto; padding-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; font-size: 14px; }
.rl-sits span { color: var(--pp-muted); }
.rl-sits a { display: inline-flex; gap: 6px; align-items: center; color: var(--pp-ink); text-decoration: none; font-weight: 500; }
.rl-sits a svg { width: 13px; height: 13px; }
.rl-vis { position: relative; min-height: 360px; }
.rl-vis > canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .8; }
.rl-vis .pa { position: absolute !important; left: 0; top: 48px; right: -2px; padding: 0 !important; display: block !important; z-index: 1; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
.rl-vis .pa-card { width: 100% !important; border-radius: 12px 0 0 0 !important; box-shadow: 0 0 0 1px #34363b, 0 30px 70px -30px rgba(0,0,0,.95) !important; }
.rl-panel[hidden] { display: none !important; }
@media (max-width: 900px) { .rl-panel, .rl-row { grid-template-columns: 1fr; gap: 0; } .rl-copy { padding: 28px 22px 8px; } .rl-row .rl-copy { padding-top: 64px; } .rl-vis { min-height: 300px; margin-left: 22px; } .rl-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; } .rl-tab { flex: none; } }
.ty .bx-t { min-height: 260px; } .ty-n { font: 500 13px var(--pp-inter); letter-spacing: .12em; color: var(--pp-muted); }

/* ── Tile borders drawn above cropped content ──────────────────────── */
.bx-t, .rl-panel, .rl-row, .pp-card, .br, .kg { position: relative; }
.bx-t::after, .rl-panel::after, .rl-row::after, .pp-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--pp-line); pointer-events: none; z-index: 8; }
.pp-card:hover::after, a.bx-t.sit:hover::after { box-shadow: inset 0 0 0 1px var(--pp-line-2); }
/* keep crops a hair inside so the corner radius stays clean */
.rl-vis .pa, .sp-card, .pp-card.bxc .pp-vis .pa, .sx-tri .sw.crop { right: 0 !important; }
.rl-vis .pa-card, .sp-card .pa-card, .pp-card.bxc .pp-vis .pa-card { border-top-right-radius: 0 !important; }

/* fades must not clip the 1px card hairline that sits just outside the box */
.rl-vis .pa, .sp-card { padding: 1px 0 0 1px !important; }
.rl-vis .pa, .sp-card, .sx-tri .sw.crop, .sx-rel .sw.mid, .pp-card.bxc .pp-vis { -webkit-mask-clip: no-clip; mask-clip: no-clip; }