@import url("https://fonts.googleapis.com/css2?family=Public+Sans:wght@300..700&display=swap");

:root {
    color-scheme: light;
    --ink: #0d234e;
    --ink-soft: #3c4658;
    --ink-muted: #606876;
    --paper: #ffffff;
    --paper-soft: #f7f7f8;
    --paper-warm: #fbf6ee;
    --line: #e5ebf4;
    --blue: #2563eb;
    --blue-dark: #1d4ed8;
    --teal: #12a89d;
    --amber: #e4a11b;
    --coral: #df6b57;
    --green: #23865d;
    --ranx-listen: #2563eb;
    --ranx-rank: #16a34a;
    --ranx-drivers: #f6c700;
    --ranx-act: #dc2626;
    --ranx-lift: #f97316;
    /* Category slots in rank order, as the app colours them (its chart colour slots). */
    --slot-1: #3d63df;
    --slot-2: #18a957;
    --slot-3: #f7cf2d;
    --slot-3-ink: #1a2742;
    --slot-4: #e32931;
    --shadow: 0 8px 20px rgba(13, 35, 78, 0.05);
    --radius: 8px;
    --max: 1180px;
    font-family: "Public Sans", "Segoe UI", Arial, sans-serif;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--paper);
    color: var(--ink);
    font-family: "Public Sans", "Segoe UI", Arial, sans-serif;
    margin: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

/* A link inside running text is marked by color alone, as in the FAQ and legal pages, so a reader sees it without
   hovering. :where() keeps this at the base rule's weight: any section that styles its own links still wins, and
   classed links (buttons, chips, cards) are untouched. */
:where(main) :where(p, dd, small, strong, figcaption, blockquote) a:where(:not([class])) {
    color: var(--blue);
    font-weight: 700;
}

:where(main) :where(p, dd, small, strong, figcaption, blockquote) a:where(:not([class])):hover {
    color: var(--blue-dark);
}

button,
input {
    font: inherit;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1 {
    font-size: 3.8rem;
    font-weight: 740;
    letter-spacing: 0;
    line-height: 1.02;
    margin-bottom: 1.1rem;
}

h2 {
    font-size: 2.1rem;
    font-weight: 720;
    letter-spacing: 0;
    line-height: 1.1;
    margin-bottom: 1rem;
}

h3 {
    font-size: 1.1rem;
    margin-bottom: 0.55rem;
}

p {
    color: var(--ink-soft);
    line-height: 1.65;
}

.site-shell {
    min-height: 100vh;
    overflow-x: hidden;
    /* Clip, not hidden: hidden makes the shell a scroll container, which switches off every sticky element. */
    overflow-x: clip;
}

/* In-page links land below the sticky header. */
[id] {
    scroll-margin-top: 5.5rem;
}

.site-header {
    align-items: center;
    /* Solid, so page text scrolling under the sticky header doesn't show through behind the nav. */
    background: #fff;
    border-bottom: 1px solid rgba(223, 230, 239, 0.78);
    display: grid;
    gap: 1rem;
    grid-template-columns: auto 1fr auto;
    left: 0;
    margin: 0 auto;
    padding: 0.85rem clamp(1rem, 3vw, 2rem);
    position: sticky;
    right: 0;
    top: 0;
    z-index: 10;
}

.brand-mark {
    align-items: center;
    display: inline-flex;
    gap: 0.7rem;
    min-width: 0;
}

.brand-logo-image {
    border-radius: 8px;
    display: block;
    height: 2.35rem;
    object-fit: contain;
    width: 2.35rem;
}

.brand-logo-wide {
    display: block;
    height: 2.7rem;
    object-fit: contain;
    width: auto;
}

.brand-symbol {
    align-items: center;
    background: var(--ink);
    border-radius: 8px;
    color: #fff;
    display: inline-flex;
    font-weight: 760;
    height: 2.35rem;
    justify-content: center;
    width: 2.35rem;
}

.brand-copy {
    display: grid;
    line-height: 1.05;
}

.brand-name {
    font-size: 1.05rem;
    font-weight: 760;
}

.brand-note {
    color: var(--ink-muted);
    font-size: 0.78rem;
    margin-top: 0.2rem;
}

.site-nav {
    align-items: center;
    display: flex;
    gap: clamp(0.85rem, 2vw, 1.6rem);
    justify-content: center;
}

/* Phones and tablets fold the nav and Sign in into a menu (MainLayout's details element). */
.site-menu {
    display: none;
}

.site-menu summary {
    align-items: center;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--ink);
    cursor: pointer;
    display: inline-flex;
    font-size: 0.92rem;
    font-weight: 720;
    gap: 0.55rem;
    list-style: none;
    min-height: 2.5rem;
    padding: 0.45rem 0.75rem;
}

.site-menu summary::-webkit-details-marker {
    display: none;
}

.site-menu[open] summary {
    background: #f4f7fb;
    border-color: #cbd5e1;
}

.site-menu-icon,
.site-menu-icon::before,
.site-menu-icon::after {
    background: currentColor;
    border-radius: 2px;
    display: block;
    height: 2px;
    width: 1.05rem;
}

.site-menu-icon {
    position: relative;
}

.site-menu-icon::before,
.site-menu-icon::after {
    content: "";
    left: 0;
    position: absolute;
}

.site-menu-icon::before {
    top: -6px;
}

.site-menu-icon::after {
    top: 6px;
}

.site-menu[open] .site-menu-icon {
    background: transparent;
}

.site-menu[open] .site-menu-icon::before {
    top: 0;
    transform: rotate(45deg);
}

.site-menu[open] .site-menu-icon::after {
    top: 0;
    transform: rotate(-45deg);
}

.site-menu-panel {
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 32px rgba(13, 35, 78, 0.12);
    display: grid;
    left: 0;
    padding: 0.35rem clamp(1rem, 3vw, 2rem) 0.9rem;
    position: absolute;
    right: 0;
    top: 100%;
}

.site-menu-panel a {
    border-bottom: 1px solid #edf1f7;
    color: var(--ink);
    font-size: 1rem;
    font-weight: 680;
    padding: 0.85rem 0.15rem;
}

.site-menu-panel a:hover {
    color: var(--blue);
}

.site-menu-panel .site-menu-sign-in {
    border-bottom: 0;
    color: var(--blue);
}

/* The narrowest phones keep the icon; the summary's aria-label still says Menu. */
@media (max-width: 400px) {
    .site-menu-label {
        display: none;
    }
}

.site-nav a,
.link-action {
    color: var(--ink-soft);
    font-size: 0.95rem;
    font-weight: 640;
}

.site-nav a:hover,
.link-action:hover {
    color: var(--blue);
}

.site-actions,
.hero-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.primary-action,
.secondary-action {
    align-items: center;
    border: 1px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    display: inline-flex;
    font-weight: 720;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0.78rem 1rem;
    text-align: center;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.primary-action {
    background: var(--blue);
    color: #fff;
}

.primary-action:hover {
    background: var(--blue-dark);
    color: #fff;
}

.primary-action-large {
    min-height: 3.05rem;
    padding-inline: 1.25rem;
}

.primary-action-light {
    background: #fff;
    color: var(--ink);
}

.secondary-action {
    background: #fff;
    border-color: var(--line);
    color: var(--ink);
}

.secondary-action:hover {
    border-color: var(--blue);
    color: var(--blue);
}

.hero-section {
    align-items: center;
    display: grid;
    gap: clamp(2rem, 4vw, 3.5rem);
    grid-template-columns: minmax(0, 0.85fr) minmax(420px, 1.15fr);
    margin: 0 auto;
    max-width: var(--max);
    min-height: calc(100vh - 4.3rem);
    padding: clamp(3rem, 7vw, 6rem) clamp(1rem, 3vw, 2rem);
}

.ranx-hero {
    align-items: center;
    background: #fff;
    display: grid;
    gap: clamp(2rem, 5vw, 5rem);
    grid-template-columns: minmax(0, 0.86fr) minmax(460px, 1.14fr);
    margin: 0 auto;
    max-width: 1440px;
    min-height: 560px;
    padding: clamp(3rem, 5vw, 4.75rem) clamp(1rem, 5vw, 4rem);
}

.hero-copy {
    min-width: 0;
}

.ranx-hero h1 {
    font-size: 3.8rem;
    line-height: 1.06;
    max-width: 680px;
}

.hero-lede {
    font-size: 1.18rem;
    max-width: 42rem;
}

.ranx-hero .hero-lede {
    color: #394762;
    font-size: 1.2rem;
    max-width: 630px;
}

.trial-cues {
    color: var(--ink-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    margin-top: 1.15rem;
}

.trial-cues span {
    align-items: center;
    display: inline-flex;
    font-size: 0.9rem;
    font-weight: 660;
    gap: 0.4rem;
}

.trial-cues span::before {
    background: var(--teal);
    border-radius: 999px;
    content: "";
    height: 0.45rem;
    width: 0.45rem;
}

.hero-product {
    min-width: 0;
}

.product-window {
    background: #fff;
    border: 1px solid #dfe6ef;
    border-radius: 8px;
    box-shadow: var(--shadow);
    padding: 1rem;
}

.window-bar {
    align-items: center;
    background: #fff;
    border: 1px solid #e5ebf4;
    border-radius: 8px;
    display: grid;
    gap: 0.8rem;
    grid-template-columns: auto 1fr auto;
    margin-bottom: 1rem;
    padding: 0.72rem 0.85rem;
}

.window-logo {
    align-items: center;
    background: #f7f9fc;
    border: 1px solid var(--line);
    border-radius: 8px;
    display: inline-flex;
    height: 2rem;
    justify-content: center;
    width: 2rem;
}

.window-logo img {
    height: 1.5rem;
    width: 1.5rem;
}

.window-bar em {
    color: var(--ink-muted);
    font-size: 0.85rem;
    font-style: normal;
    font-weight: 680;
}

.product-preview-layout {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
}

.survey-card,
.rank-card {
    background: #fff;
    border: 1px solid #e5ebf4;
    border-radius: 8px;
    min-height: 420px;
    padding: clamp(1rem, 2vw, 1.5rem);
}

.survey-card h2 {
    font-size: 2.35rem;
    line-height: 1.03;
}

.rank-card {
    display: grid;
    gap: 0.85rem;
}

.rank-card .rank-row {
    background: #f5f8fc;
    padding: 1rem;
}

.lift-tile {
    align-items: center;
    background: var(--ink);
    border-radius: 8px;
    color: #fff;
    display: flex;
    justify-content: space-between;
    margin-top: auto;
    padding: 1rem;
}

.lift-tile span {
    color: rgba(255, 255, 255, 0.72);
}

.lift-tile strong {
    font-size: 1.75rem;
}

.proof-strip {
    background: var(--ink);
    color: #fff;
    display: grid;
    gap: 1px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0 auto;
    max-width: 1440px;
}

.proof-strip div {
    background: rgba(255, 255, 255, 0.04);
    min-height: 132px;
    padding: clamp(1.2rem, 3vw, 2rem);
}

.proof-strip strong {
    display: block;
    font-size: 2.45rem;
    line-height: 1;
}

.proof-strip span {
    color: rgba(255, 255, 255, 0.72);
    display: block;
    margin-top: 0.45rem;
}

.eyebrow,
.surface-index {
    color: #526174;
    display: inline-flex;
    font-size: 0.76rem;
    font-weight: 680;
    letter-spacing: 0;
    margin-bottom: 0.8rem;
    text-transform: none;
}

.surface-index {
    text-transform: none;
}

.panel-kicker,
.playbook-type,
.plan-label {
    color: #526174;
    display: inline-flex;
    font-size: 0.76rem;
    font-weight: 680;
    letter-spacing: 0;
    margin-bottom: 0.8rem;
    text-transform: none;
}

.hero-proof {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 2rem 0 0;
}

.hero-proof div {
    border-left: 3px solid var(--line);
    padding-left: 0.9rem;
}

.hero-proof dt {
    font-size: 1.8rem;
    font-weight: 780;
}

.hero-proof dd {
    color: var(--ink-muted);
    font-size: 0.9rem;
    margin: 0.15rem 0 0;
}

.product-stage {
    background: #f7f9fc;
    border: 1px solid #e5ebf4;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1rem;
}

.stage-toolbar {
    align-items: center;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(223, 230, 239, 0.8);
    border-radius: var(--radius);
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding: 0.75rem 0.9rem;
}

.stage-toolbar span {
    color: var(--ink-muted);
    font-size: 0.86rem;
}

.stage-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}

.preview-panel,
.surface-item,
.playbook-card,
.demo-panel,
.pricing-card,
.research-lab,
.demo-sidebar {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.preview-panel {
    min-height: 360px;
    padding: 1.15rem;
}

.survey-panel h2 {
    font-size: 1.85rem;
}

.survey-progress,
.research-progress {
    background: #e6ecf5;
    border-radius: 999px;
    height: 0.55rem;
    margin-top: 1.25rem;
    overflow: hidden;
}

.survey-progress span,
.research-progress span {
    background: linear-gradient(90deg, var(--teal), var(--blue));
    display: block;
    height: 100%;
}

.rank-panel {
    display: grid;
    gap: 0.8rem;
}

.rank-row {
    align-items: center;
    background: var(--paper-soft);
    border: 1px solid #e9eef6;
    border-radius: var(--radius);
    display: grid;
    gap: 0.75rem;
    grid-template-columns: auto 1fr auto;
    padding: 0.85rem;
}

.rank-row > span,
.action-list span {
    align-items: center;
    background: var(--ink);
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    font-size: 0.78rem;
    font-weight: 760;
    height: 1.75rem;
    justify-content: center;
    width: 1.75rem;
}

.rank-row strong {
    display: block;
}

.rank-row em,
.rank-table-row em {
    color: var(--ink-muted);
    font-size: 0.84rem;
    font-style: normal;
}

.rank-row b {
    color: var(--green);
    font-size: 1.2rem;
}

.section-band,
.page-hero,
.demo-workbench,
.pricing-grid {
    margin: 0 auto;
    max-width: var(--max);
    padding: clamp(3rem, 6vw, 5rem) clamp(1rem, 3vw, 2rem);
}

.section-band-light {
    background: var(--paper-soft);
    max-width: none;
}

.section-band-light > * {
    margin-left: auto;
    margin-right: auto;
    max-width: var(--max);
}

.section-band-accent {
    background: var(--ink);
    color: #fff;
    max-width: none;
}

.section-band-accent p,
.section-band-accent .eyebrow {
    color: rgba(255, 255, 255, 0.78);
}

.section-heading {
    max-width: 760px;
}

.centered-heading {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.benefit-grid,
.feature-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 2rem;
}

.benefit-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    min-height: 285px;
    padding: 1.35rem;
}

.template-feature-icon {
    background-color: #fff1db;
    background-image: var(--feature-icon);
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 8px;
    height: 3rem;
    display: block;
    margin-bottom: 1.2rem;
    width: 3rem;
}

.benefit-card h3 {
    font-size: 1.22rem;
}

.workflow-shell,
.demo-slab,
.trust-strip {
    align-items: center;
    display: grid;
    gap: clamp(2rem, 5vw, 4rem);
    grid-template-columns: minmax(0, 0.76fr) minmax(420px, 1.24fr);
}

.workflow-copy p {
    max-width: 560px;
}

.workflow-steps {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.workflow-steps article {
    background: var(--paper-soft);
    border: 1px solid #e6edf6;
    border-radius: 8px;
    min-height: 230px;
    padding: 1.2rem;
}

.workflow-steps span {
    color: var(--ink-muted);
    display: block;
    font-size: 0.8rem;
    font-weight: 780;
    margin-bottom: 1.5rem;
}

.section-band-navy {
    background: #101a33;
    color: #fff;
    max-width: none;
}

.section-band-navy > * {
    margin-left: auto;
    margin-right: auto;
    max-width: var(--max);
}

.section-band-navy p,
.section-band-navy .eyebrow {
    color: rgba(255, 255, 255, 0.74);
}

.research-preview-card {
    background: #fff;
    border-radius: 8px;
    color: var(--ink);
    justify-self: end;
    max-width: 430px;
    padding: 1.25rem;
    width: 100%;
}

.research-preview-card h3 {
    font-size: 1.7rem;
    line-height: 1.1;
    margin-top: 1rem;
}

.research-mini-row {
    align-items: center;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    padding: 0.9rem 0;
}

.research-mini-row span {
    color: var(--ink-soft);
}

.research-mini-row strong {
    color: var(--green);
}

.integration-strip {
    align-items: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin: 2rem auto 0;
    max-width: var(--max);
    padding: 1.5rem;
}

.integration-strip span {
    align-items: center;
    background: #f9fafc;
    border: 1px solid #edf1f6;
    border-radius: 8px;
    display: flex;
    height: 5.25rem;
    justify-content: center;
    padding: 1rem;
}

.integration-strip img {
    display: block;
    max-height: 2rem;
    max-width: 100%;
    object-fit: contain;
}

.home-pricing-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 2rem;
}

.home-plan-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    min-height: 330px;
    padding: 1.25rem;
}

.home-plan-card strong {
    display: block;
    font-size: 2rem;
    margin-top: auto;
}

.featured-plan-card {
    background: #fff;
    border-color: rgba(37, 99, 235, 0.42);
    box-shadow: var(--shadow);
}

.featured-plan-card .primary-action {
    margin-top: 1rem;
}

.trust-strip {
    grid-template-columns: minmax(0, 0.85fr) minmax(360px, 1fr);
}

.trust-strip blockquote {
    background: #fff;
    border-left: 3px solid var(--amber);
    border-radius: 8px;
    color: var(--ink);
    font-size: 1.45rem;
    font-weight: 690;
    line-height: 1.35;
    margin: 0;
    padding: 1.35rem;
}

.testimonial-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 2rem auto 0;
    max-width: var(--max);
}

.testimonial-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    min-height: 360px;
    padding: 1.25rem;
}

.testimonial-head {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.4rem;
}

.testimonial-avatar,
.testimonial-initials {
    border-radius: 999px;
    height: 4.75rem;
    width: 4.75rem;
}

.testimonial-avatar {
    object-fit: cover;
}

.testimonial-initials {
    align-items: center;
    background: var(--ink);
    color: #fff;
    display: inline-flex;
    font-weight: 760;
    justify-content: center;
}

.quote-mark {
    height: 4.25rem;
    max-width: 5.5rem;
    object-fit: contain;
    opacity: 0.72;
}

.testimonial-card blockquote {
    color: var(--ink);
    font-size: 1.08rem;
    font-weight: 650;
    line-height: 1.55;
    margin: 0;
}

.testimonial-card p {
    color: var(--ink-muted);
    font-size: 0.9rem;
    margin: auto 0 0;
    padding-top: 1.5rem;
}

.newsletter-band {
    background: linear-gradient(180deg, var(--paper-soft) 0%, var(--paper-soft) 50%, #fff 50%, #fff 100%);
    padding: 0 clamp(1rem, 3vw, 2rem) clamp(3rem, 6vw, 5rem);
}

.newsletter-card {
    align-items: center;
    background: var(--blue);
    border-radius: 16px;
    color: #fff;
    display: grid;
    gap: 2rem;
    grid-template-columns: minmax(0, 1fr) auto;
    margin: 0 auto;
    max-width: 935px;
    padding: clamp(1.5rem, 5vw, 3.8rem);
}

.newsletter-card h2 {
    color: #fff;
}

.newsletter-card p,
.newsletter-card .eyebrow {
    color: rgba(255, 255, 255, 0.78);
}

.newsletter-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    justify-content: flex-end;
}

.secondary-action-dark {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.36);
    color: #fff;
}

.secondary-action-dark:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.66);
    color: #fff;
}

.surface-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 2rem;
}

.surface-item {
    min-height: 260px;
    padding: 1.2rem;
}

.surface-index {
    color: var(--ink-muted);
}

.split-layout,
.callout-strip {
    align-items: start;
    display: grid;
    gap: clamp(2rem, 5vw, 4rem);
    grid-template-columns: minmax(0, 0.82fr) minmax(360px, 1fr);
}

.callout-strip {
    align-items: center;
}

.journey-list,
.guardrail-list {
    display: grid;
    gap: 0.8rem;
}

.journey-step,
.guardrail-list div {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1rem;
}

.guardrail-list div {
    display: grid;
    gap: 0.35rem 0.7rem;
    grid-template-columns: auto 1fr;
}

.guardrail-list .module-icon-shell {
    grid-row: 1 / span 2;
    margin-top: 0.1rem;
}

.guardrail-list strong,
.guardrail-list div > span:not(.module-icon-shell) {
    grid-column: 2;
}

.journey-step span,
.guardrail-list div > span:not(.module-icon-shell) {
    color: var(--ink-muted);
    display: block;
    font-size: 0.86rem;
    margin-bottom: 0.25rem;
}

.page-hero {
    align-items: end;
    display: flex;
    gap: 1.5rem;
    justify-content: space-between;
}

.page-hero h1 {
    font-size: 3.35rem;
    line-height: 1.08;
    max-width: 860px;
}

.page-hero p {
    max-width: 760px;
}

.compact-hero {
    min-height: 360px;
}

.playbook-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.playbook-card,
.pricing-card {
    display: flex;
    flex-direction: column;
    min-height: 360px;
    padding: 1.2rem;
}

.featured-playbook {
    grid-column: span 2;
}

.playbook-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: auto 0 1rem;
}

.playbook-meta span,
.status-pill {
    background: rgba(18, 168, 157, 0.1);
    border: 1px solid rgba(18, 168, 157, 0.25);
    border-radius: 999px;
    color: #0f716a;
    font-size: 0.82rem;
    font-weight: 720;
    padding: 0.35rem 0.6rem;
}

.sample-question {
    background: var(--paper-warm);
    border: 1px solid #f0ddbf;
    border-radius: var(--radius);
    margin-bottom: 1rem;
    padding: 1rem;
}

.sample-question span {
    color: var(--ink-muted);
    display: block;
    font-size: 0.82rem;
    margin-bottom: 0.35rem;
}

.demo-workbench {
    align-items: start;
    display: grid;
    gap: 1rem;
    grid-template-columns: 290px minmax(0, 1fr);
    padding-top: 0;
}

.demo-sidebar {
    position: sticky;
    top: 5.5rem;
    padding: 1.2rem;
}

.demo-sidebar dl {
    display: grid;
    gap: 0.7rem;
    margin: 1.2rem 0;
}

.demo-sidebar div {
    border-top: 1px solid var(--line);
    padding-top: 0.7rem;
}

.demo-sidebar dt {
    color: var(--ink-muted);
    font-size: 0.82rem;
}

.demo-sidebar dd {
    font-weight: 760;
    margin: 0.15rem 0 0;
}

.demo-main {
    display: grid;
    gap: 1rem;
}

.demo-panel {
    padding: 1.2rem;
}

.panel-heading {
    margin-bottom: 1.2rem;
}

.panel-heading h2 {
    font-size: 1.85rem;
}

.rank-table {
    display: grid;
    gap: 0.45rem;
}

.rank-table-row {
    align-items: center;
    border-bottom: 1px solid var(--line);
    display: grid;
    gap: 1rem;
    grid-template-columns: 0.5fr 1.5fr 0.5fr 1fr;
    min-height: 3.25rem;
    padding: 0.4rem 0;
}

.rank-table-head {
    color: var(--ink-muted);
    font-size: 0.8rem;
    font-weight: 760;
}

.rank-table-row b {
    color: var(--green);
}

.driver-grid,
.lift-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.driver-grid article {
    background: var(--paper-soft);
    border: 1px solid #e9eef6;
    border-radius: var(--radius);
    padding: 1rem;
}

.meter {
    background: #e3eaf4;
    border-radius: 999px;
    display: block;
    height: 0.55rem;
    margin: 0.85rem 0;
    overflow: hidden;
}

.meter i {
    background: linear-gradient(90deg, var(--amber), var(--coral));
    display: block;
    height: 100%;
}

.action-list {
    display: grid;
    gap: 0.75rem;
}

.action-list div {
    align-items: start;
    background: var(--paper-soft);
    border: 1px solid #e9eef6;
    border-radius: var(--radius);
    display: grid;
    gap: 0.8rem;
    grid-template-columns: auto 1fr;
    padding: 0.9rem;
}

.action-list p {
    margin: 0;
}

.lift-grid div {
    background: var(--ink);
    border-radius: var(--radius);
    color: #fff;
    padding: 1rem;
}

.lift-grid strong {
    display: block;
    font-size: 2rem;
}

.lift-grid span {
    color: rgba(255, 255, 255, 0.72);
}

.research-lab {
    align-items: center;
    display: grid;
    gap: clamp(2rem, 5vw, 4rem);
    grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1fr);
    margin: 0 auto clamp(3rem, 6vw, 5rem);
    max-width: var(--max);
    padding: clamp(1.25rem, 4vw, 2.5rem);
}

.research-form {
    background: var(--paper-soft);
    border: 1px solid #e9eef6;
    border-radius: var(--radius);
    padding: 1.2rem;
}

.research-form fieldset {
    border: 0;
    display: grid;
    gap: 0.65rem;
    margin: 0 0 1rem;
    padding: 0;
}

.research-form legend {
    display: inline-flex;
    font-size: 1.1rem;
    font-weight: 760;
    margin-bottom: 0.85rem;
}

.research-module-kicker,
.research-rank-label {
    margin-bottom: 0.8rem;
}

.research-form label {
    align-items: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--ink-soft);
    display: flex;
    gap: 0.75rem;
    min-height: 3.2rem;
    padding: 0.8rem;
}

.research-survey ul {
    display: grid;
    gap: 0.65rem;
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
}

.research-survey li {
    align-items: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    display: flex;
    font-weight: 650;
    min-height: 3.2rem;
    padding: 0.8rem;
}

.research-survey .primary-action,
.research-survey .secondary-action {
    width: 100%;
}

.research-survey .primary-action + .secondary-action {
    margin-top: 0.6rem;
}

.research-note {
    color: var(--ink-muted);
    font-size: 0.92rem;
}

/* Pricing and Demo: the invitation into Ranx's own Clarity and Value Check. */
.clarity-invite {
    align-items: center;
    background: var(--paper-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem 1.5rem;
    justify-content: space-between;
    margin: 0 auto clamp(2rem, 4vw, 3rem);
    max-width: 1280px;
    padding: 1rem 1.25rem;
    width: calc(100% - 2rem);
}

.clarity-invite > div {
    display: grid;
    flex: 1 1 22rem;
    gap: 0.25rem;
}

.clarity-invite strong {
    font-size: 1.05rem;
}

.clarity-invite > div > span {
    color: var(--ink-soft);
    max-width: 46rem;
}

.pricing-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-top: 0;
}

.pricing-card ul {
    color: var(--ink-soft);
    display: grid;
    gap: 0.65rem;
    margin: auto 0 1.2rem;
    padding-left: 0;
}

.pricing-card li {
    align-items: start;
    display: grid;
    gap: 0.5rem;
    grid-template-columns: auto 1fr;
    list-style: none;
}

.pricing-card li .module-icon-shell {
    margin-top: -0.08rem;
}

.highlighted-plan {
    border-color: rgba(37, 99, 235, 0.55);
    box-shadow: var(--shadow);
}

.price {
    color: var(--ink);
    font-size: 2.35rem;
    font-weight: 780;
    line-height: 1;
}

.price span {
    color: var(--ink-muted);
    font-size: 1rem;
    font-weight: 640;
}

.site-footer {
    background: var(--ink);
    color: #fff;
    display: grid;
    gap: 2rem;
    grid-template-columns: minmax(0, 1fr) auto;
    margin-top: 2rem;
    padding: 2rem clamp(1rem, 3vw, 2rem);
}

.site-footer p,
.site-footer .brand-note {
    color: rgba(255, 255, 255, 0.72);
    max-width: 520px;
}

/* The founder's note under the footer tagline on every page but home, where it sits beside the case-study band's
   buttons (the band is dark too). */
.footer-founder {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius);
    display: grid;
    gap: 0.75rem;
    margin: 1.4rem 0 0;
    max-width: 540px;
    padding: 1rem 1.1rem;
}

.footer-founder blockquote {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.92rem;
    font-weight: 560;
    line-height: 1.55;
    margin: 0;
}

.founder-note-sign {
    align-items: center;
    display: flex;
    gap: 0.6rem;
}

.founder-note-sign img {
    border-radius: 50%;
    flex: none;
    height: 3rem;
    object-fit: cover;
    width: 3rem;
}

.founder-note-sign span {
    color: rgba(255, 255, 255, 0.68);
    display: grid;
    font-size: 0.78rem;
    line-height: 1.3;
}

.founder-note-sign b {
    color: #fff;
    font-size: 0.88rem;
}

.footer-founder > a {
    color: #fff;
    font-weight: 700;
    justify-self: start;
    text-decoration: none;
}

.footer-founder > a:hover {
    text-decoration: underline;
}

/* The ListeningOS loop along the bottom of the footer: one link to /listeningos. */
.footer-loop {
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    grid-column: 1 / -1;
    padding-top: 1.25rem;
    text-decoration: none;
}

.footer-loop-name {
    color: #fff;
    font-size: 0.78rem;
    font-weight: 780;
}

.footer-loop-modules,
.footer-loop-modules > span {
    align-items: center;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Each arrow follows its module, so a wrapped row on a phone ends with an arrow rather than starting with one. */
.footer-loop-modules > span::after {
    color: rgba(255, 255, 255, 0.45);
    content: "\2192";
    font-weight: 700;
}

.footer-loop-modules > span:last-child::after {
    content: "\21BB";
}

.footer-loop .ranx-module-badge {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius);
    padding: 0.3rem 0.65rem 0.3rem 0.35rem;
}

.footer-loop .ranx-module-badge-label {
    color: rgba(255, 255, 255, 0.9);
}

.footer-loop .module-icon-shell {
    border-radius: 5px;
    height: 1.45rem;
    width: 1.45rem;
}

.footer-loop .module-icon-shell svg {
    height: 0.92rem;
    width: 0.92rem;
}

.footer-loop:hover .ranx-module-badge {
    border-color: rgba(255, 255, 255, 0.32);
}

.footer-loop:hover .footer-loop-name {
    text-decoration: underline;
}

.brand-mark-footer .brand-symbol {
    background: #fff;
    color: var(--ink);
}

.footer-links {
    align-content: start;
    display: grid;
    gap: 0.55rem;
    min-width: 220px;
}

.footer-columns {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(2, minmax(180px, 1fr));
}

.footer-links h2 {
    color: #fff;
    font-size: 0.78rem;
    font-weight: 780;
    letter-spacing: 0;
    margin: 0 0 0.35rem;
}

.footer-links a,
.footer-link-button {
    color: rgba(255, 255, 255, 0.78);
}

.footer-links a:hover,
.footer-link-button:hover {
    color: #fff;
}

/* Footer action that looks like the footer links (Cookie settings reopens the HubSpot banner). */
.footer-link-button {
    background: none;
    border: 0;
    cursor: pointer;
    font: inherit;
    justify-self: start;
    padding: 0;
    text-align: left;
}

/* HubSpot's consent banner as a compact card in the bottom-right corner, not a 67em bar over the hero's buttons.
   HubSpot sets its sizes as custom properties on #hs-banner-parent, so the banner itself takes these instead;
   the extra html selector outranks HubSpot's own two-id rules, which load after this file. */
html #hs-banner-parent #hs-eu-cookie-confirmation {
    --hs-banner-width: 23rem;
    --hs-banner-padding: 1rem 1.15rem;
    --hs-banner-font-size: 13px;
    --hs-banner-inset: auto 1rem 1rem auto;
    max-width: calc(100% - 2rem);
}

html #hs-banner-parent #hs-eu-cookie-confirmation * {
    line-height: 1.5em;
}

html #hs-eu-cookie-confirmation #hs-eu-cookie-confirmation-inner {
    gap: 0.6em;
}

html #hs-eu-cookie-confirmation #hs-eu-confirmation-button,
html #hs-eu-cookie-confirmation #hs-eu-decline-button {
    height: 2.6em;
    min-width: 0;
}

@media (max-width: 640px) {
    html #hs-banner-parent #hs-eu-cookie-confirmation {
        --hs-banner-inset: auto 0.75rem 0.75rem 0.75rem;
        max-width: none;
        width: auto;
    }
}

.clean-hero {
    align-items: center;
    display: grid;
    gap: 2.75rem;
    grid-template-columns: minmax(0, 0.85fr) minmax(440px, 1fr);
    margin: 0 auto;
    max-width: 1280px;
    min-height: 520px;
    padding: 3rem 2rem 2.5rem;
}

.clean-hero h1 {
    font-size: 3.45rem;
    line-height: 1.06;
    margin-bottom: 1rem;
    max-width: 620px;
}

.clean-hero p {
    color: #34435d;
    font-size: 1.08rem;
    line-height: 1.55;
    max-width: 560px;
}

.clean-product-card {
    background: #fff;
    border: 1px solid #dfe6ef;
    border-radius: 8px;
    box-shadow: var(--shadow);
    padding: 1rem;
}

.preview-topline {
    align-items: center;
    border: 1px solid #e6edf6;
    border-radius: 8px;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: auto 1fr auto;
    margin-bottom: 1rem;
    min-height: 3.5rem;
    padding: 0.7rem 0.85rem;
}

.preview-topline img {
    height: 2rem;
    width: 2rem;
}

.preview-topline span {
    color: var(--ink-muted);
    font-size: 0.88rem;
    font-weight: 700;
}

.preview-context-row {
    display: grid;
    gap: 0.4rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: -0.25rem 0 0.9rem;
}

.preview-context-row span {
    background: #f7f9fc;
    border: 1px solid #e7edf5;
    border-radius: 8px;
    color: var(--ink-muted);
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.45rem 0.55rem;
    text-align: center;
}

.clean-preview-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
}

.clean-survey-panel,
.clean-rank-panel {
    border: 1px solid #e6edf6;
    border-radius: 8px;
    min-height: 360px;
    padding: 1.15rem;
}

.clean-survey-panel h2 {
    font-size: 2.1rem;
    line-height: 1.08;
    margin-bottom: 1.1rem;
}

.clean-rank-panel {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.compact-rank-row {
    background: #f5f8fc;
}

.lift-chip {
    align-items: center;
    background: var(--ink);
    border-radius: 8px;
    color: #fff;
    display: flex;
    justify-content: space-between;
    margin-top: auto;
    min-height: 4.25rem;
    padding: 1rem;
}

.lift-chip span {
    color: rgba(255, 255, 255, 0.72);
    font-weight: 650;
}

.lift-chip strong {
    font-size: 1.75rem;
}

.scan-strip {
    border-bottom: 1px solid var(--line);
    border-top: 1px solid var(--line);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0 auto;
    max-width: 1280px;
}

.scan-strip a {
    border-right: 1px solid var(--line);
    min-height: 116px;
    padding: 1.2rem;
}

.scan-strip a:last-child {
    border-right: 0;
}

.scan-strip strong {
    display: block;
    font-size: 1.05rem;
    margin-bottom: 0.35rem;
}

.scan-strip span {
    color: var(--ink-muted);
    display: block;
    line-height: 1.45;
}

.clean-section {
    margin: 0 auto;
    max-width: 1280px;
    padding: 3.6rem 2rem;
}

.clean-section-muted {
    background: #f7f9fc;
    max-width: none;
}

.clean-section-muted > * {
    margin-left: auto;
    margin-right: auto;
    max-width: 1280px;
}

.clean-section-heading {
    align-items: end;
    display: flex;
    gap: 1.5rem;
    justify-content: space-between;
    margin-bottom: 1.4rem;
}

.clean-section-heading h2 {
    font-size: 2.25rem;
    max-width: 620px;
}

.clean-card-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.clean-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    min-height: 260px;
    padding: 1.15rem;
}

.clean-card span,
.clean-flow span {
    color: var(--ink-muted);
    display: block;
    font-size: 0.82rem;
    font-weight: 780;
    margin-bottom: 1.4rem;
}

.clean-card h3,
.clean-flow h3 {
    font-size: 1.25rem;
}

.clean-card p,
.clean-flow p {
    color: var(--ink-muted);
    line-height: 1.55;
}

.clean-card a {
    color: var(--blue);
    display: inline-flex;
    font-weight: 760;
    margin-top: 0.5rem;
}

.research-surface {
    align-items: center;
    display: grid;
    gap: 3rem;
    grid-template-columns: minmax(0, 1fr) 320px;
}

.research-surface h2 {
    font-size: 2.35rem;
}

.research-surface p {
    max-width: 620px;
}

.qr-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 18px 46px rgba(13, 35, 78, 0.1);
    padding: 1.3rem;
    text-align: center;
}

.qr-mark {
    background: #f4f7fb;
    border: 1px solid #e2e9f3;
    display: grid;
    gap: 0.35rem;
    grid-template-columns: repeat(4, 1fr);
    margin: 0 auto 1rem;
    padding: 0.85rem;
    width: 180px;
}

.qr-mark span {
    aspect-ratio: 1;
    background: #fff;
    border-radius: 2px;
}

.qr-mark span:nth-child(1),
.qr-mark span:nth-child(2),
.qr-mark span:nth-child(4),
.qr-mark span:nth-child(5),
.qr-mark span:nth-child(7),
.qr-mark span:nth-child(8),
.qr-mark span:nth-child(10),
.qr-mark span:nth-child(11),
.qr-mark span:nth-child(13),
.qr-mark span:nth-child(15),
.qr-mark span:nth-child(16) {
    background: var(--ink);
}

.qr-card strong {
    display: block;
}

.qr-card em {
    color: var(--ink-muted);
    display: block;
    font-style: normal;
    margin-top: 0.25rem;
}

.clean-flow {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.clean-flow article {
    background: #fff;
    border-left: 3px solid var(--line);
    min-height: 190px;
    padding: 0 1.15rem;
}

.story-hero {
    align-items: center;
    display: grid;
    gap: 2.4rem;
    grid-template-columns: minmax(0, 0.82fr) minmax(460px, 1.18fr);
    margin: 0 auto;
    max-width: 1280px;
    min-height: 520px;
    padding: 3rem 2rem 2.5rem;
}

.story-hero h1 {
    font-size: 3.55rem;
    line-height: 1.06;
    margin-bottom: 1rem;
    max-width: 620px;
}

.story-hero p {
    color: #34435d;
    font-size: 1.08rem;
    line-height: 1.56;
    max-width: 580px;
}

.module-path {
    display: grid;
    gap: 0.45rem;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-bottom: 0.8rem;
}

.module-path .ranx-module-badge {
    align-items: center;
    background: #fff;
    border: 1px solid #e7edf5;
    border-top: 3px solid var(--module-color, var(--line));
    border-radius: 8px;
    color: var(--ink);
    flex-direction: row;
    font-size: 0.82rem;
    font-weight: 760;
    justify-content: flex-start;
    min-height: 2.35rem;
    padding: 0.38rem 0.58rem 0.42rem;
    text-align: left;
}

.module-path.module-path-compact {
    display: flex;
    flex-wrap: wrap;
}

.module-path.module-path-compact .ranx-module-badge {
    flex-direction: row;
    min-height: 0;
    padding: 0.38rem 0.58rem 0.42rem;
}

.proof-grid {
    display: grid;
    gap: 0.8rem;
    /* The ranking step needs the room: category names stay on one or two lines. */
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}

/* Home hero headline: "a score" struck through in Act red; a screen reader hears the plain sentence (Home.razor). */
.story-hero h1 s {
    color: #8a94a6;
    text-decoration-color: var(--ranx-act);
    text-decoration-thickness: 0.09em;
}

/* It sits beside the walkthrough, so it is set smaller than the other heroes' headlines, and its closing phrase stays
   on one line so "fix." never stands alone. */
.story-hero .story-hero-copy h1 {
    font-size: clamp(2.2rem, 3.7vw, 3.4rem);
}

.story-hero h1 .hero-keep {
    white-space: nowrap;
}

.visually-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* Home hero walkthrough (RanxHeroLoop.razor, js/hero-loop.js): the five modules as a rail, one scene per module, and
   the controls. Scenes share one grid cell, so the stage is as tall as its tallest scene and nothing jumps. Every
   element rests in its finished state and its animation only says where it starts (fill "both"), so .is-static, a
   scene picked while paused, shows it finished. */
.hero-loop {
    --hl-pitch: 3.05rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 10px 26px rgba(13, 35, 78, 0.055);
    color: var(--ink);
    display: grid;
    gap: 1rem;
    min-width: 0;
    padding: 1.25rem;
}

.hero-loop .ranx-icon {
    border-radius: 0;
    height: auto;
    width: auto;
}

.hl-rail {
    display: grid;
    gap: 0.45rem;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

.hl-step {
    align-items: center;
    appearance: none;
    background: #fff;
    border: 1px solid #e7edf5;
    border-radius: 0.375rem;
    border-top: 3px solid var(--module-color);
    color: var(--ink);
    cursor: pointer;
    display: grid;
    font: inherit;
    gap: 0 0.45rem;
    grid-template-columns: auto minmax(0, 1fr);
    overflow: hidden;
    padding: 0.4rem 0.5rem 0.5rem;
    position: relative;
    text-align: left;
    width: 100%;
}

.hl-step:hover {
    border-color: color-mix(in srgb, var(--module-color) 40%, #e7edf5);
    border-top-color: var(--module-color);
}

.hl-step:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

/* The current step stays white, as the demo's rail does: a navy frame, a lift and a bolder name mark it, and the other
   steps' names step back. */
.hl-step[aria-current="step"] {
    border-color: var(--ink);
    border-top-color: var(--module-color);
    box-shadow: 0 6px 16px rgba(13, 35, 78, 0.1);
}

.hl-step:not([aria-current="step"]) strong {
    color: var(--ink-soft);
    font-weight: 650;
}

.hl-step .module-icon-shell {
    border-radius: 5px;
    grid-row: span 2;
    height: 1.6rem;
    width: 1.6rem;
}

.hl-step .module-icon-shell svg {
    height: 1rem;
    width: 1rem;
}

.hl-step strong {
    font-size: 0.94rem;
    font-weight: 760;
    line-height: 1.15;
}

.hl-step small {
    color: var(--ink-muted);
    font-size: 0.81rem;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hl-progress {
    background: var(--module-color);
    bottom: 0;
    height: 3px;
    left: 0;
    position: absolute;
    width: 0;
}

.hl-step[aria-current="step"] .hl-progress {
    animation: hl-fill var(--ms, 7s) linear forwards;
}

@keyframes hl-fill {
    to {
        width: 100%;
    }
}

.hl-stage {
    display: grid;
    min-width: 0;
}

/* The scene leaving fades out before the next one fades in, so their text never overlaps. */
.hl-scene {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    grid-area: 1 / 1;
    min-width: 0;
    opacity: 0;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
    visibility: hidden;
}

.hl-scene.is-on {
    opacity: 1;
    transition: opacity 0.3s ease 0.2s, visibility 0s linear 0.2s;
    visibility: visible;
}

.hl-body {
    align-content: center;
    display: grid;
    flex: 1;
    gap: 0.9rem 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
}

.hl-kicker {
    color: #526174;
    display: block;
    font-size: 0.83rem;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 0.45rem;
}

.hl-note {
    color: var(--ink-muted);
    display: block;
    font-size: 0.87rem;
    line-height: 1.4;
}

.hl-caption {
    align-items: baseline;
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 1rem;
    justify-content: space-between;
    padding-top: 0.65rem;
}

.hl-caption strong {
    font-size: 1.12rem;
    line-height: 1.3;
}

.hl-caption a {
    color: var(--blue);
    font-size: 0.94rem;
    font-weight: 700;
    white-space: nowrap;
}

/* Listen: people, the playbook, the channels, then the demo's access and response rate donuts. */
.hl-listen {
    align-items: center;
    gap: 1rem 0.6rem;
    grid-template-columns: minmax(0, 0.85fr) auto minmax(0, 1.25fr) auto minmax(0, 0.95fr);
}

.hl-people {
    color: var(--ranx-listen);
    display: grid;
    gap: 0.3rem 0.22rem;
    grid-template-columns: repeat(6, 1rem);
    margin-bottom: 0.55rem;
}

.hl-people i {
    display: block;
    height: 1rem;
    width: 1rem;
}

.hl-people svg {
    display: block;
    fill: currentColor;
    height: 100%;
    width: 100%;
}

.hl-arrow {
    color: #9aa8bd;
    display: inline-flex;
}

.hl-arrow svg {
    height: 1.15rem;
    width: 1.15rem;
}

.hl-playbook {
    border: 1px solid var(--ranx-listen);
    border-radius: 0.375rem;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ranx-listen) 16%, transparent);
    display: grid;
    gap: 0.35rem;
    padding: 0.7rem 0.75rem;
}

.hl-playbook .hl-kicker {
    margin-bottom: 0;
}

.hl-playbook-name {
    align-items: center;
    display: flex;
    gap: 0.5rem;
}

.hl-playbook-name strong {
    font-size: 1.01rem;
    line-height: 1.2;
}

.hl-playbook .audience-chip {
    box-shadow: none;
    flex: none;
    font-size: 0.74rem;
    height: 1.5rem;
    width: 1.5rem;
}

.hl-picked {
    align-items: center;
    background: var(--ranx-listen);
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    font-size: 0.78rem;
    font-weight: 760;
    gap: 0.25rem;
    justify-self: start;
    padding: 0.12rem 0.5rem 0.12rem 0.35rem;
}

.hl-picked svg {
    height: 0.8rem;
    width: 0.8rem;
}

.hl-channels {
    display: grid;
    gap: 0.4rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.hl-channels li {
    align-items: center;
    border: 1px solid #e2e8f0;
    border-radius: 0.375rem;
    display: flex;
    font-size: 0.92rem;
    font-weight: 650;
    gap: 0.45rem;
    padding: 0.35rem 0.55rem;
    white-space: nowrap;
}

.hl-channels svg {
    color: var(--ranx-listen);
    height: 1rem;
    width: 1rem;
}

.hl-rates {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem 2rem;
    grid-column: 1 / -1;
}

.hl-rate {
    align-items: center;
    display: flex;
    gap: 0.65rem;
}

.hl-rate b,
.hl-rate small {
    display: block;
}

.hl-rate b {
    font-size: 0.96rem;
}

.hl-rate small {
    color: var(--ink-muted);
    font-size: 0.85rem;
}

/* The demo's donut: a ring filled to --v of 100. Registering --hl-v lets a ring fill from --from (an earlier result). */
@property --hl-v {
    syntax: "<number>";
    inherits: false;
    initial-value: 0;
}

.hl-donut {
    --hl-v: var(--v);
    align-items: center;
    background:
        radial-gradient(circle closest-side, #fff 72%, transparent 73% 100%),
        conic-gradient(var(--c) calc(var(--hl-v) * 1%), #e7edf6 0);
    border-radius: 50%;
    display: inline-flex;
    flex: none;
    height: 3.9rem;
    justify-content: center;
    width: 3.9rem;
}

.hl-donut strong {
    font-size: 0.84rem;
    font-weight: 800;
}

.hl-fix i,
.hl-round i {
    background: #edf1f7;
    border-radius: 999px;
    display: block;
    overflow: hidden;
}

/* Rank: one person's category cards (color follows position), then everyone's shares and the fix-first list. */
.hl-prompt {
    font-size: 1.03rem;
    font-weight: 760;
    line-height: 1.25;
    margin-bottom: 0.6rem;
}

.hl-cards {
    display: grid;
    gap: calc(var(--hl-pitch) - 2.55rem);
    list-style: none;
    margin: 0;
    padding: 0;
}

.hl-cards .roc-card {
    box-shadow: 0 0.2rem 0.6rem rgba(15, 23, 42, 0.06);
    gap: 0.55rem;
    grid-template-columns: auto minmax(0, 1fr);
    height: 2.55rem;
    min-height: 0;
    padding: 0 0.6rem;
    position: relative;
}

.hl-cards .roc-card:first-child {
    z-index: 1;
}

.hl-cards .roc-badge,
.hl-fix .roc-badge,
.hl-priority .roc-badge {
    font-size: 0.83rem;
    height: 1.4rem;
    position: relative;
    width: 1.4rem;
}

.hl-was {
    display: grid;
    inset: 0;
    opacity: 0;
    place-items: center;
    position: absolute;
}

.hl-cards .roc-card-name strong {
    display: block;
    font-size: 0.92rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hl-share {
    border-radius: 0.3rem;
    display: flex;
    height: 1.7rem;
    margin-bottom: 0.9rem;
    overflow: hidden;
}

.hl-share span {
    background: var(--c);
    color: var(--seg-ink);
    display: grid;
    flex: none;
    font-size: 0.78rem;
    font-weight: 760;
    place-items: center;
    width: var(--w);
}

.hl-fix {
    display: grid;
    gap: 0.45rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.hl-fix li {
    align-items: center;
    border: 1px solid #e2e8f0;
    border-radius: 0.375rem;
    display: grid;
    gap: 0.35rem 0.55rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 0.45rem 0.6rem 0.5rem;
}

.hl-fix strong {
    font-size: 0.92rem;
    line-height: 1.2;
}

.hl-fix b {
    font-size: 1.12rem;
    font-weight: 800;
}

.hl-fix i {
    grid-column: 1 / -1;
    height: 0.3rem;
}

.hl-fix i span {
    background: var(--cat);
    display: block;
    height: 100%;
    width: var(--w);
}

/* Drivers: the two priorities' bands to the five outcomes; each column's rows split the height evenly, so every band
   runs between row middles. A dashed band is a link the data cannot confirm yet, as on the demo's sankey. */
.hl-drivers {
    grid-template-columns: minmax(0, 1fr);
}

.hl-finding {
    font-size: 1.1rem;
    font-weight: 760;
    line-height: 1.3;
}

/* The questions and the outcomes take a third of the width each, so the scene is balanced; the outcomes never less
   than their longest name, and the bands between them take the rest. */
.hl-links {
    display: grid;
    grid-template-columns: 33.333% minmax(2.5rem, 1fr) minmax(max-content, 33.333%);
    min-height: 13.5rem;
}

.hl-priorities {
    display: grid;
    grid-template-rows: repeat(2, minmax(0, 1fr));
}

.hl-priority {
    align-self: center;
    border: 1px solid #e2e8f0;
    border-left: 4px solid var(--cat);
    border-radius: 0.375rem;
    padding: 0.55rem 0.7rem;
}

.hl-priority .hl-kicker {
    margin-bottom: 0.15rem;
}

/* Each question wears its Rank category's badge, so the scene reads on from Rank's order. */
.hl-category {
    align-items: center;
    display: flex;
    gap: 0.4rem;
}

.hl-priority strong {
    display: block;
    font-size: 1.06rem;
    line-height: 1.2;
}

.hl-priority small {
    color: var(--ink-muted);
    display: block;
    font-size: 0.83rem;
    line-height: 1.3;
    margin-top: 0.15rem;
}

.hl-bands {
    height: 100%;
    overflow: visible;
    width: 100%;
}

.hl-bands path {
    fill: none;
    stroke: var(--cat);
    stroke-opacity: 0.4;
}

.hl-bands path.is-uncertain {
    stroke-dasharray: 5 4;
    stroke-opacity: 0.3;
}

.hl-outcomes {
    display: grid;
    grid-template-rows: repeat(5, minmax(0, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

.hl-outcomes li {
    align-items: center;
    border: 1px solid #e2e8f0;
    border-left: 3px solid #c3cddb;
    border-radius: 0.375rem;
    display: flex;
    font-size: 0.9rem;
    font-weight: 650;
    line-height: 1.2;
    margin: 0.17rem 0;
    padding: 0.25rem 0.55rem;
}

.hl-ai {
    align-items: center;
    color: var(--ink-soft);
    display: flex;
    font-size: 0.92rem;
    gap: 0.4rem;
    line-height: 1.35;
}

.hl-ai svg {
    color: var(--blue);
    flex: none;
    height: 1rem;
    width: 1rem;
}

.hl-drivers-foot {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.2rem;
    justify-content: space-between;
}

.hl-legends {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.3rem 1rem;
}

.hl-legend {
    align-items: center;
    color: var(--ink-muted);
    display: inline-flex;
    font-size: 0.83rem;
    gap: 0.4rem;
}

.hl-legend i {
    border-top: 2px dashed #9aa8bd;
    display: block;
    width: 1.4rem;
}

/* Rank's first category is three of the outcomes: their marks take its color. */
.hl-outcomes li.is-first {
    border-left-color: var(--slot-1);
}

.hl-legend i.is-first {
    border: 1px solid #e2e8f0;
    border-left: 3px solid var(--slot-1);
    border-radius: 0.2rem;
    height: 0.85rem;
    width: 1.1rem;
}

/* Act: John Doe's initiative and its pack on the left, its dated steps and the first round's record on the right. */
.hl-act {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}

.hl-act-plan {
    display: grid;
    gap: 0.6rem;
}

.hl-ini {
    border: 1px solid #e2e8f0;
    border-left: 4px solid var(--ranx-rank);
    border-radius: 0.375rem;
    display: grid;
    gap: 0.25rem;
    padding: 0.55rem 0.7rem;
}

.hl-ini .hl-kicker {
    margin-bottom: 0;
}

.hl-ini strong {
    font-size: 1.01rem;
    line-height: 1.25;
}

.hl-owner {
    align-items: center;
    color: var(--ink-soft);
    display: flex;
    font-size: 0.85rem;
    gap: 0.4rem;
}

.hl-owner i {
    background: var(--ranx-rank);
    border-radius: 50%;
    color: #fff;
    display: inline-grid;
    flex: none;
    font-size: 0.67rem;
    font-style: normal;
    font-weight: 800;
    height: 1.35rem;
    place-items: center;
    width: 1.35rem;
}

.hl-presenter {
    align-items: end;
    display: grid;
    gap: 0.6rem;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    margin: 0;
}

.hl-presenter svg {
    display: block;
    height: auto;
    width: 100%;
}

.hl-presenter figcaption {
    display: grid;
    gap: 0.35rem;
}

.hl-presenter figcaption .hl-kicker {
    margin: 0;
}

.hl-presenter small {
    color: var(--ink-muted);
    font-size: 0.81rem;
}

.hl-pack {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.hl-act-steps {
    display: flex;
    flex-direction: column;
}

.hl-steps {
    display: grid;
    gap: 0.2rem;
    list-style: none;
    margin: 0 0 0.7rem;
    padding: 0;
}

.hl-steps li {
    align-items: center;
    border-bottom: 1px solid #edf1f7;
    display: grid;
    font-size: 0.9rem;
    gap: 0.5rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 0.2rem 0 0.3rem;
}

.hl-steps b {
    border: 1.5px solid var(--ranx-rank);
    border-radius: 50%;
    color: #17734a;
    display: inline-grid;
    font-size: 0.74rem;
    height: 1.25rem;
    place-items: center;
    width: 1.25rem;
}

.hl-steps span {
    font-weight: 650;
}

.hl-steps em {
    color: var(--ink-muted);
    font-size: 0.83rem;
    font-style: normal;
}

.hl-round {
    background: #f4faf6;
    border-radius: 0.375rem;
    color: var(--ink-soft);
    display: grid;
    font-size: 0.87rem;
    gap: 0.3rem;
    margin-top: auto;
    padding: 0.5rem 0.6rem;
}

.hl-round i {
    background: #dcefe3;
    height: 0.4rem;
}

.hl-round b {
    background: var(--ranx-rank);
    display: block;
    height: 100%;
    width: 100%;
}

.hl-round strong {
    align-items: center;
    color: #17734a;
    display: flex;
    font-size: 0.92rem;
    gap: 0.3rem;
}

.hl-round svg {
    height: 0.9rem;
    width: 0.9rem;
}

/* Lift: the app's Lift chart for this survey (Net Ranx in the Net Ranx donut's blue on the left axis, eNPS in green on
   the right, initiative work under it), then the last two results as the demo's donuts. */
.hl-lift {
    align-items: start;
    gap: 0.8rem 1.4rem;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
}

.hl-trend {
    min-width: 0;
}

.hl-trend header {
    align-items: baseline;
    display: flex;
    gap: 0.6rem;
    justify-content: space-between;
    margin-bottom: 0.35rem;
}

.hl-trend header .hl-kicker {
    color: var(--ink);
    font-size: 0.96rem;
    margin: 0;
}

.hl-plot {
    height: 10.5rem;
    position: relative;
}

.hl-plot svg {
    display: block;
    height: 100%;
    inset: 0;
    overflow: visible;
    position: absolute;
    width: 100%;
}

.hl-grid {
    stroke: #e3e9f2;
    stroke-width: 1;
}

.hl-tick {
    color: var(--blue);
    font-size: 0.69rem;
    font-weight: 600;
    left: 0;
    line-height: 1;
    position: absolute;
    transform: translateY(-50%);
}

.hl-tick.is-enps {
    color: #17734a;
    left: auto;
    right: 0;
}

.hl-line {
    fill: none;
    stroke: var(--blue);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.4;
}

.hl-line.is-enps {
    stroke: #2fb87f;
}

.hl-mark {
    position: absolute;
    transform: translate(-50%, -50%);
}

.hl-mark i {
    background: var(--blue);
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
    display: block;
    height: 10px;
    width: 10px;
}

.hl-mark b {
    bottom: calc(100% + 4px);
    color: #2747b8;
    font-size: 0.83rem;
    font-weight: 700;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    white-space: nowrap;
}

/* eNPS marks are diamonds, as in the app; each number sits on the side away from the other line. */
.hl-mark.is-enps i {
    background: #2fb87f;
    border-radius: 2px;
    height: 9px;
    transform: rotate(45deg);
    width: 9px;
}

.hl-mark.is-enps b {
    color: #17734a;
}

.hl-mark.is-below b {
    bottom: auto;
    top: calc(100% + 4px);
}

.hl-work {
    height: 0.55rem;
    margin-top: 0.45rem;
    position: relative;
}

.hl-work i {
    background: var(--ranx-act);
    border-radius: 999px;
    display: block;
    height: 100%;
    min-width: 0.55rem;
    position: absolute;
}

.hl-axis {
    height: 1.1rem;
    margin-top: 0.3rem;
    position: relative;
}

.hl-axis span {
    color: var(--ink-muted);
    font-size: 0.76rem;
    position: absolute;
    transform: translateX(-50%);
    white-space: nowrap;
}

.hl-key {
    color: var(--ink-muted);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.81rem;
    gap: 0.3rem 1rem;
    margin-top: 0.3rem;
}

.hl-key span {
    align-items: center;
    display: inline-flex;
    gap: 0.35rem;
}

.hl-key i {
    border-radius: 999px;
    display: block;
    width: 1.1rem;
}

.hl-key .is-net {
    background: var(--blue);
    height: 0.18rem;
}

.hl-key .is-enps {
    background: #2fb87f;
    height: 0.18rem;
}

.hl-key .is-work {
    background: var(--ranx-act);
    height: 0.5rem;
}

/* Centered in their column, clear of the plot's eNPS axis: each title, its rings and the eNPS key share one center line,
   so the key, wider than the rings, never pulls them off it. */
.hl-pairs {
    display: grid;
    gap: 1rem;
    justify-items: center;
    text-align: center;
}

.hl-pair .hl-kicker {
    color: var(--ink);
    font-size: 0.94rem;
    margin-bottom: 0.4rem;
}

.hl-pair .hl-kicker small {
    color: var(--ink-muted);
    font-size: 0.78rem;
    font-weight: 600;
}

.hl-pair-row {
    align-items: center;
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

/* Lift's rings are a step larger than Listen's: the scene's one-line note leaves them the room. */
.hl-pair .hl-donut {
    height: 4.4rem;
    width: 4.4rem;
}

.hl-pair .hl-arrow {
    display: grid;
    justify-items: center;
}

.hl-pair .hl-arrow b {
    color: #17734a;
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1;
}

/* eNPS rings split as the app's: promoters green, passives yellow, detractors red, each its share of the answers. */
.hl-donut.is-nps {
    background:
        radial-gradient(circle closest-side, #fff 72%, transparent 73% 100%),
        conic-gradient(#35c778 0 calc(var(--p) * var(--hl-v) * 0.01%), #f8dc4b 0 calc((var(--p) + var(--pa)) * var(--hl-v) * 0.01%),
            #ef565c 0 calc(var(--hl-v) * 1%), #e7edf6 0);
}

.hl-nps-key {
    color: var(--ink-muted);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.76rem;
    gap: 0.2rem 0.7rem;
    grid-column: 1 / -1;
    justify-content: center;
    margin-top: -0.5rem;
}

.hl-nps-key span {
    align-items: center;
    display: inline-flex;
    gap: 0.3rem;
}

.hl-nps-key i {
    border-radius: 50%;
    display: block;
    height: 0.55rem;
    width: 0.55rem;
}

.hl-nps-key .is-promoters {
    background: #35c778;
}

.hl-nps-key .is-passives {
    background: #f8dc4b;
}

.hl-nps-key .is-detractors {
    background: #ef565c;
}

.hl-ring {
    display: grid;
    gap: 0.2rem;
    justify-items: center;
}

.hl-ring small {
    color: var(--ink-muted);
    font-size: 0.76rem;
}

.hl-lift-note {
    grid-column: 1 / -1;
}

.hl-foot {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

/* The sample's name card, as the old hero's card showed it: the Ranx mark, the survey and what the data is. */
.hl-foot {
    background: #f7f9fc;
    border: 1px solid #e6edf6;
    border-radius: 0.375rem;
    padding: 0.55rem 0.7rem;
}

.hl-source {
    align-items: center;
    display: flex;
    gap: 0.65rem;
    min-width: 0;
}

.hl-source img {
    flex: none;
    height: 1.9rem;
    width: 1.9rem;
}

.hl-source strong,
.hl-source small {
    display: block;
}

.hl-source strong {
    font-size: 0.96rem;
    line-height: 1.25;
}

.hl-source small {
    color: var(--ink-muted);
    font-size: 0.83rem;
}

.hl-controls {
    display: flex;
    gap: 0.35rem;
}

.hl-controls button {
    align-items: center;
    appearance: none;
    background: #fff;
    border: 1px solid #dfe6ef;
    border-radius: 999px;
    color: var(--ink);
    cursor: pointer;
    display: inline-flex;
    height: 2rem;
    justify-content: center;
    padding: 0;
    width: 2rem;
}

.hl-controls button:hover {
    border-color: var(--blue);
    color: var(--blue);
}

.hl-controls button:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

.hl-controls svg {
    height: 0.95rem;
    width: 0.95rem;
}

.hl-controls .is-play,
.hero-loop.is-held .hl-controls .is-pause {
    display: none;
}

.hero-loop.is-held .hl-controls .is-play {
    display: inline-flex;
}

/* The scenes' motion, keyed to .is-on so showing a scene again replays it. */
.hl-scene.is-on .hl-in {
    animation: hl-in 0.45s ease var(--d, 0s) both;
}

.hl-scene.is-on .hl-people i {
    animation: hl-pop 0.3s ease calc(0.15s + var(--i) * 0.04s) both;
}

.hl-scene.is-on .hl-playbook {
    animation: hl-in 0.45s ease 1.1s both, hl-choose 0.35s ease 1.8s both;
}

.hl-scene.is-on .hl-picked {
    animation: hl-pop 0.3s ease 1.9s both;
}

.hl-scene.is-on .hl-channels li {
    animation: hl-send 0.4s ease var(--d) both;
}

.hl-scene.is-on .hl-donut {
    animation: hl-ring 1.1s ease var(--d) both;
}

.hl-scene.is-on .hl-fix li {
    animation: hl-in 0.45s ease var(--d) both;
}

.hl-scene.is-on .hl-fix i span {
    animation: hl-grow-x 0.8s ease calc(var(--d) + 0.2s) both;
}

.hl-scene.is-on .hl-cards .roc-card {
    animation: hl-climb 0.75s cubic-bezier(0.3, 0.7, 0.3, 1) 1.1s both;
}

.hl-scene.is-on .hl-cards .roc-badge {
    animation: hl-recolor 0.75s ease 1.1s both;
}

.hl-scene.is-on .hl-was {
    animation: hl-was 0.4s ease 1.3s both;
}

.hl-scene.is-on .hl-now {
    animation: hl-now 0.4s ease 1.3s both;
}

.hl-scene.is-on .hl-share {
    animation: hl-wipe 0.9s ease 2.4s both;
}

.hl-scene.is-on .hl-bands {
    animation: hl-wipe 1s ease 0.7s both;
}

.hl-scene.is-on .hl-outcomes li {
    animation: hl-in 0.4s ease var(--d) both;
}

.hl-scene.is-on .hl-bar {
    animation: hl-rise 0.5s ease var(--d) both;
    transform-box: fill-box;
    transform-origin: bottom;
}

.hl-scene.is-on .hl-arm {
    animation: hl-point 0.8s ease-in-out 1s 2 alternate both;
    transform-origin: 68px 58px;
}

.hl-scene.is-on .hl-pack .demo-file-chip {
    animation: hl-pop 0.3s ease var(--d) both;
}

.hl-scene.is-on .hl-steps li {
    animation: hl-in 0.4s ease var(--d) both;
}

.hl-scene.is-on .hl-round b {
    animation: hl-grow-x 1.3s ease 3.7s both;
}

.hl-scene.is-on .hl-round strong {
    animation: hl-pop 0.35s ease 5s both;
}

.hl-scene.is-on .hl-line-art {
    animation: hl-wipe 1.8s linear 0.3s both;
}

.hl-scene.is-on .hl-work i {
    animation: hl-now 0.35s ease var(--d) both;
}

.hl-scene.is-on .hl-mark {
    animation: hl-mark 0.35s ease var(--d) both;
}

.hero-loop.is-paused .hl-progress,
.hero-loop.is-paused .hl-scene,
.hero-loop.is-paused .hl-scene * {
    animation-play-state: paused !important;
}

.hl-scene.is-static,
.hl-scene.is-static * {
    animation: none !important;
}

@keyframes hl-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
}

@keyframes hl-pop {
    from {
        opacity: 0;
        transform: scale(0.3);
    }
}

@keyframes hl-send {
    from {
        opacity: 0;
        transform: translateX(-0.9rem);
    }
}

@keyframes hl-choose {
    from {
        border-color: #e2e8f0;
        box-shadow: none;
    }
}

@keyframes hl-grow-x {
    from {
        width: 0;
    }
}

@keyframes hl-climb {
    from {
        border-left-color: var(--from);
        transform: translateY(var(--o));
    }
}

@keyframes hl-recolor {
    from {
        background: var(--from);
        color: var(--from-ink);
    }
}

@keyframes hl-was {
    from {
        opacity: 1;
    }
}

@keyframes hl-now {
    from {
        opacity: 0;
    }
}

@keyframes hl-wipe {
    from {
        clip-path: inset(0 100% 0 0);
    }
}

@keyframes hl-rise {
    from {
        transform: scaleY(0);
    }
}

@keyframes hl-point {
    to {
        transform: rotate(-9deg);
    }
}

@keyframes hl-mark {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.4);
    }
}

@keyframes hl-ring {
    from {
        --hl-v: var(--from);
    }
}

/* Reduced motion: the loop still advances (pause is there), the moves that carry the content stay (the card climbing,
   lines and bars drawing), and the decorative rises become fades. */
@media (prefers-reduced-motion: reduce) {
    @keyframes hl-in {
        from {
            opacity: 0;
        }
    }

    @keyframes hl-pop {
        from {
            opacity: 0;
        }
    }

    @keyframes hl-send {
        from {
            opacity: 0;
        }
    }
}

/* Beside the headline on a small desktop the rail steps are too narrow for the verbs; the module names carry it. */
@media (min-width: 981px) and (max-width: 1200px) {
    .hl-step small {
        display: none;
    }
}

@media (max-width: 640px) {
    .hero-loop {
        --hl-pitch: 2.6rem;
        padding: 0.75rem;
    }

    .hl-rail {
        gap: 0.3rem;
    }

    .hl-step {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        padding: 0.35rem 0.15rem 0.45rem;
        row-gap: 0.2rem;
        text-align: center;
    }

    .hl-step .module-icon-shell {
        grid-row: auto;
    }

    .hl-step strong {
        font-size: 0.68rem;
    }

    .hl-step small {
        display: none;
    }

    .hl-body,
    .hl-act,
    .hl-listen,
    .hl-lift {
        grid-template-columns: minmax(0, 1fr);
    }

    .hl-pairs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hl-donut {
        height: 3rem;
        width: 3rem;
    }

    /* Two rings and the change between them, twice across: as large as a phone's half width allows. */
    .hl-pair .hl-donut {
        height: 3.2rem;
        width: 3.2rem;
    }

    /* Listen: your people beside the playbook, then the channels and the rates across, without the arrows. */
    .hero-loop .hl-listen {
        align-items: start;
        gap: 0.75rem;
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    }

    .hl-listen .hl-arrow {
        display: none;
    }

    .hl-sent,
    .hl-rates {
        grid-column: 1 / -1;
    }

    .hl-rates {
        display: grid;
        gap: 0.75rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hl-rate {
        flex-direction: column;
        gap: 0.35rem;
        text-align: center;
    }

    .hl-foot {
        flex-wrap: wrap;
        row-gap: 0.5rem;
    }

    .hl-source {
        flex: 1 1 100%;
    }

    .hl-source strong {
        font-size: 0.86rem;
    }

    .hl-source small {
        font-size: 0.72rem;
    }

    .hl-controls {
        margin-left: auto;
    }

    .hl-channels {
        grid-auto-flow: column;
    }

    .hl-cards .roc-card {
        height: 2.25rem;
    }

    .hl-cards {
        gap: calc(var(--hl-pitch) - 2.25rem);
    }

    /* The questions share the width with the outcomes, so each card's category name fits beside its badge. */
    .hl-links {
        grid-template-columns: minmax(0, 1fr) minmax(1.25rem, 0.3fr) minmax(0, 1fr);
        min-height: 11.5rem;
    }

    .hl-priority {
        padding: 0.5rem 0.55rem;
    }

    .hl-priority .hl-category {
        font-size: 0.76rem;
    }

    /* Act is the tallest scene once it stacks, so the six steps read down two columns, each date under its step. */
    .hl-steps {
        column-gap: 0.75rem;
        grid-auto-flow: column;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(3, auto);
    }

    .hl-steps li {
        column-gap: 0.4rem;
        font-size: 0.76rem;
        grid-template-columns: auto minmax(0, 1fr);
        row-gap: 0;
    }

    .hl-steps b {
        grid-row: span 2;
    }

    .hl-steps em {
        font-size: 0.7rem;
    }

    .hl-caption strong {
        font-size: 0.92rem;
    }

}

.home-programs-section,
.buyer-path-section,
.home-proof {
    margin: 0 auto;
    max-width: 1320px;
    padding: 3.6rem 2rem;
}

.module-card-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    margin-top: 1.6rem;
}

.module-card-grid article {
    background: #fff;
    border: 1px solid var(--line);
    border-top: 3px solid var(--module-color, var(--line));
    border-radius: 8px;
    min-height: 190px;
    padding: 1.1rem;
}

.module-card-grid h3 {
    font-size: 1.12rem;
    line-height: 1.25;
}

.module-card-grid p {
    font-size: 0.92rem;
    line-height: 1.55;
}

.module-card-grid .module-card-kicker {
    margin-bottom: 0.9rem;
}

.ranx-loop-artifact {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 10px 28px rgba(13, 35, 78, 0.055);
    display: grid;
    gap: clamp(1.1rem, 3vw, 2rem);
    grid-template-columns: minmax(15rem, 0.38fr) minmax(25rem, 0.62fr);
    align-items: center;
    margin-top: 1.6rem;
    padding: clamp(1rem, 2.4vw, 1.35rem);
}

.ranx-loop-artifact__explain {
    align-content: center;
    align-self: center;
    background: var(--ink);
    border-radius: var(--radius);
    box-shadow: 0 10px 24px rgba(13, 35, 78, 0.12);
    color: #fff;
    display: grid;
    gap: 0.7rem;
    max-width: 30rem;
    padding: clamp(1rem, 2vw, 1.35rem);
}

.ranx-loop-artifact__explain > span {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.78rem;
    font-weight: 720;
}

.ranx-loop-artifact__explain h3 {
    color: #fff;
    font-size: clamp(1.35rem, 2vw, 1.7rem);
    line-height: 1.25;
    margin: 0;
}

.ranx-loop-artifact__explain p {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.92rem;
    line-height: 1.5;
    margin: 0;
}

.ranx-loop-artifact__sequence {
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    color: #fff !important;
    font-size: 0.9rem !important;
    font-weight: 760;
    line-height: 1.25 !important;
    padding: 0.55rem 0.72rem;
}

.ranx-loop-artifact__orbit {
    aspect-ratio: 1;
    justify-self: center;
    max-width: 31rem;
    position: relative;
    width: min(100%, 31rem);
}

.ranx-loop-artifact__ring {
    background:
        radial-gradient(circle at center, #fff 0 50%, transparent 51%),
        conic-gradient(from -90deg, rgba(43, 99, 226, 0.12), rgba(24, 165, 104, 0.1), rgba(241, 184, 27, 0.1), rgba(242, 85, 96, 0.09), rgba(255, 111, 46, 0.1), rgba(43, 99, 226, 0.12));
    border: 1px solid #d7e1ee;
    border-radius: 999px;
    inset: 17%;
    position: absolute;
}

.ranx-loop-artifact__ring::before {
    border: 1px solid rgba(13, 35, 78, 0.08);
    border-radius: inherit;
    content: "";
    inset: -0.7rem;
    position: absolute;
}

.ranx-loop-artifact__ring::after {
    background: var(--blue);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    content: "";
    height: 0.78rem;
    left: 50%;
    position: absolute;
    top: -0.42rem;
    transform: translateX(-50%);
    width: 0.9rem;
}

.ranx-loop-artifact__core {
    align-items: center;
    background: #fff;
    border: 1px solid #dfe7f2;
    border-radius: 999px;
    box-shadow: 0 8px 20px rgba(13, 35, 78, 0.07);
    color: var(--blue);
    display: flex;
    inset: 41%;
    justify-content: center;
    position: absolute;
}

.ranx-loop-artifact__core::before {
    content: "↻";
    font-size: 1.55rem;
    font-weight: 760;
    line-height: 1;
}

.ranx-loop-node {
    background: #fff;
    border: 1px solid #dfe7f2;
    border-left: 3px solid var(--module-color, var(--line));
    border-radius: var(--radius);
    box-shadow: 0 12px 26px rgba(13, 35, 78, 0.065);
    display: grid;
    gap: 0.55rem;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    min-height: 3.8rem;
    padding: 0.62rem 0.78rem;
    position: absolute;
    transform: translate(-50%, -50%);
    width: clamp(8rem, 29%, 9.2rem);
    z-index: 2;
}

.ranx-loop-node-start {
    left: 50%;
    top: 10%;
}

.ranx-loop-node-rank {
    left: 84%;
    top: 32%;
}

.ranx-loop-node-drivers {
    left: 72%;
    top: 78%;
}

.ranx-loop-node-act {
    left: 28%;
    top: 78%;
}

.ranx-loop-node-lift {
    left: 16%;
    top: 32%;
}

.ranx-loop-node h3 {
    font-size: 0.96rem;
    line-height: 1.2;
    margin: 0;
}

.ranx-loop-node .module-icon-tiny {
    background: color-mix(in srgb, var(--module-color, var(--blue)) 10%, #fff);
    border-color: color-mix(in srgb, var(--module-color, var(--blue)) 26%, #e5ebf4);
    flex-shrink: 0;
}

.ranx-loop-artifact-compact {
    box-shadow: none;
    gap: 0.85rem;
    grid-template-columns: 1fr;
    margin-top: 0.8rem;
    padding: 0.8rem;
}

.ranx-loop-artifact-compact .ranx-loop-artifact__explain {
    background: #f7f9fc;
    border: 1px solid #e5ebf4;
    box-shadow: none;
    color: var(--ink);
    min-height: 0;
    padding: 0.75rem;
}

.ranx-loop-artifact-compact .ranx-loop-artifact__explain > span,
.ranx-loop-artifact-compact .ranx-loop-artifact__explain p,
.ranx-loop-artifact-compact .ranx-loop-artifact__explain h3 {
    color: var(--ink);
}

.ranx-loop-artifact-compact .ranx-loop-artifact__explain > p:not(.ranx-loop-artifact__sequence) {
    display: none;
}

.ranx-loop-artifact-compact .ranx-loop-artifact__sequence {
    background: #fff;
    border-color: #dfe7f2;
    color: var(--ink) !important;
    white-space: normal;
}

.ranx-loop-artifact-compact .ranx-loop-artifact__orbit {
    max-width: 19rem;
    width: min(100%, 19rem);
}

.ranx-loop-artifact-compact .ranx-loop-node {
    gap: 0.35rem;
    grid-template-columns: auto minmax(0, 1fr);
    min-height: 2.85rem;
    padding: 0.45rem 0.55rem;
    width: 6.8rem;
}

.ranx-loop-artifact-compact .ranx-loop-node h3 {
    font-size: 0.82rem;
}

.ranx-loop-artifact-compact .ranx-loop-node .module-icon-tiny {
    height: 1.1rem;
    width: 1.1rem;
}

.ranx-loop-artifact-compact .ranx-loop-node .module-icon-tiny svg {
    height: 0.72rem;
    width: 0.72rem;
}

.home-programs-section {
    background: #f7f9fc;
    max-width: none;
    padding-left: max(2rem, calc((100vw - 1320px) / 2 + 2rem));
    padding-right: max(2rem, calc((100vw - 1320px) / 2 + 2rem));
}

.home-program-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 1.6rem;
}

.home-program-grid a {
    align-content: start;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    display: grid;
    gap: 0.75rem;
    min-height: 225px;
    padding: 1.1rem;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.home-program-grid a:hover {
    border-color: rgba(34, 90, 200, 0.45);
}

.home-program-grid strong {
    display: block;
    font-size: 1.18rem;
    line-height: 1.2;
}

.home-program-grid em {
    color: var(--ink-muted);
    display: block;
    font-style: normal;
    line-height: 1.55;
}

.programs-cta-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.2rem;
}

/* The chip's key, at the right end of the button's row. */
.programs-legend {
    align-items: center;
    color: var(--ink-soft);
    display: flex;
    font-size: 0.92rem;
    font-weight: 650;
    gap: 0.55rem;
    margin: 0 0 0 auto;
}

.programs-legend .audience-chip {
    box-shadow: none;
    font-size: 0.7rem;
    height: 1.6rem;
    width: 1.6rem;
}

.demo-proof-band {
    align-items: center;
    background: #101a33;
    color: #fff;
    display: grid;
    gap: 2rem;
    grid-template-columns: minmax(0, 0.9fr) minmax(320px, 0.55fr);
    margin: 0 auto;
    max-width: none;
    padding: 3.6rem max(2rem, calc((100vw - 1320px) / 2 + 2rem));
}

.demo-proof-band h2 {
    color: #fff;
}

.demo-proof-band p,
.demo-proof-band .eyebrow {
    color: rgba(255, 255, 255, 0.76);
}

.receipt-card {
    background: #fff;
    border-radius: 8px;
    color: var(--ink);
    padding: 1.2rem;
}

.receipt-card p {
    color: var(--ink-soft);
    font-size: 0.96rem;
    line-height: 1.55;
}

/* A bare inline pill paints its padding outside the line box, so it sat on the heading. */
.receipt-card .status-pill {
    display: inline-flex;
    margin-bottom: 0.75rem;
}

.buyer-path-section {
    align-items: end;
    display: grid;
    gap: 2rem;
    grid-template-columns: minmax(0, 0.72fr) minmax(430px, 1fr);
}

.buyer-path-copy p {
    max-width: 650px;
}

/* Eyebrows outside a section heading take the headings' 1rem, as the rest of the home page's do. */
.buyer-path-copy .eyebrow,
.founding-band .eyebrow {
    font-size: 1rem;
}

.buyer-path-grid {
    display: grid;
    gap: 0.8rem;
}

.buyer-path-grid a {
    align-items: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    display: grid;
    gap: 0.4rem;
    min-height: 5.4rem;
    padding: 1rem;
}

.buyer-path-grid a:hover {
    border-color: var(--blue);
}

.buyer-path-grid strong {
    display: block;
}

.buyer-path-grid span {
    color: var(--ink-muted);
}

/* Home: for a buyer who already runs an annual survey. What stays, what Ranx adds, what leaders get. */
.annual-fit-section {
    align-items: center;
}

.annual-fit-grid {
    display: grid;
    gap: 0.8rem;
    margin: 0;
}

.annual-fit-grid div {
    background: #fff;
    border: 1px solid var(--line);
    border-left: 4px solid var(--blue);
    border-radius: 0.375rem;
    padding: 0.9rem 1rem;
}

.annual-fit-grid div:first-child {
    border-left-color: #8a96a8;
}

.annual-fit-grid dt {
    font-weight: 800;
    margin-bottom: 0.2rem;
}

.annual-fit-grid dd {
    color: var(--ink-soft);
    line-height: 1.55;
    margin: 0;
}

/* Home: the founding-customer offer on the dark band, in place of logos Ranx doesn't have yet. The terms card is
   wider than the band's usual card; under 980px the band stacks, as every dark band does. */
@media (min-width: 981px) {
    .demo-proof-band.founding-band {
        align-items: start;
        grid-template-columns: minmax(0, 0.85fr) minmax(360px, 0.8fr);
    }
}

.founding-band .hero-actions {
    margin-top: 1.4rem;
}

.founding-card h3 {
    font-size: 1.05rem;
    margin: 0.2rem 0 0.4rem;
}

.founding-card ul {
    display: grid;
    gap: 0.35rem;
    margin: 0 0 1rem;
    padding-left: 1.1rem;
}

.founding-card li {
    color: var(--ink-soft);
    line-height: 1.5;
}

.founding-card small {
    border-top: 1px solid var(--line);
    color: var(--ink-muted);
    display: block;
    font-size: 0.84rem;
    line-height: 1.5;
    padding-top: 0.75rem;
}

/* Why a buyer can trust what Ranx shows: one row on white between the grey playbooks and the dark case-study offer. */
.home-proof {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pricing-hero {
    align-items: end;
    display: grid;
    gap: 2rem;
    grid-template-columns: minmax(0, 1fr) auto;
    margin: 0 auto;
    max-width: 1280px;
    padding: 3rem 2rem 2.5rem;
}

.pricing-hero h1 {
    font-size: 3.25rem;
    line-height: 1.08;
    max-width: 760px;
}

.pricing-hero p {
    font-size: 1.12rem;
    max-width: 760px;
}

.pricing-grid-wide {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: 1280px;
}

.pricing-grid-wide .pricing-card {
    min-height: 430px;
}

.listening-brand-hero {
    align-items: center;
    display: grid;
    gap: 2rem;
    grid-template-columns: minmax(0, 0.92fr) minmax(360px, 0.72fr);
    margin: 0 auto;
    max-width: 1240px;
    min-height: 300px;
    padding: 2.75rem 2rem 2rem;
}

.listening-brand-hero h1 {
    font-size: 2.55rem;
    line-height: 1.12;
    max-width: 590px;
}

.listening-brand-hero p {
    color: #34435d;
    font-size: 1rem;
    line-height: 1.62;
    max-width: 620px;
}

.listening-hero {
    align-items: center;
    display: grid;
    gap: 2.4rem;
    grid-template-columns: minmax(0, 0.95fr) minmax(420px, 0.9fr);
    margin: 0 auto;
    max-width: 1320px;
    min-height: 500px;
    padding: 3rem 2rem 2.5rem;
}

.listening-hero-copy {
    min-width: 0;
}

.listening-hero h1 {
    font-size: 3.4rem;
    line-height: 1.06;
    max-width: 680px;
    overflow-wrap: break-word;
}

.listening-hero p {
    color: #34435d;
    font-size: 1.05rem;
    line-height: 1.58;
    max-width: 650px;
}

.listening-proof-panel {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
    display: grid;
    gap: 1rem;
    padding: 1rem;
}

.listening-proof-header {
    align-items: center;
    border: 1px solid #e6edf6;
    border-radius: 8px;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: auto 1fr;
    padding: 0.85rem;
}

.listening-proof-header img {
    height: 2.2rem;
    width: 2.2rem;
}

.listening-proof-header strong,
.os-answer strong {
    display: block;
}

.listening-proof-header div > span {
    color: var(--ink-muted);
    display: block;
    font-size: 0.86rem;
    margin-top: 0.15rem;
}

.os-flow {
    display: grid;
    gap: 0.45rem;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.os-module {
    --module-color: var(--blue);
    align-items: center;
    background: #fff;
    border: 1px solid #e7edf5;
    border-top: 2px solid var(--module-color, var(--line));
    border-radius: 8px;
    color: var(--ink);
    display: flex;
    gap: 0.45rem;
    justify-content: flex-start;
    font-size: 0.82rem;
    font-weight: 700;
    min-height: 2.35rem;
    padding: 0.38rem 0.58rem 0.42rem;
    text-align: left;
}

.os-flow .ranx-module-badge {
    align-items: center;
    background: #fff;
    border: 1px solid #e7edf5;
    border-top: 3px solid var(--module-color, var(--line));
    border-radius: 8px;
    display: inline-flex;
    gap: 0.45rem;
    justify-content: flex-start;
    min-height: 2.35rem;
    padding: 0.38rem 0.58rem 0.42rem;
    text-align: left;
}

.ranx-module-listen,
.os-module-listen,
.loop-listen,
.module-card-listen {
    --module-color: var(--ranx-listen);
}

.ranx-module-rank,
.os-module-rank,
.loop-rank,
.module-card-rank {
    --module-color: var(--ranx-rank);
}

.ranx-module-drivers,
.os-module-drivers,
.loop-drivers,
.module-card-drivers {
    --module-color: var(--ranx-drivers);
}

.ranx-module-act,
.os-module-act,
.loop-act,
.module-card-act {
    --module-color: var(--ranx-act);
}

.ranx-module-lift,
.os-module-lift,
.loop-lift,
.module-card-lift {
    --module-color: var(--ranx-lift);
}

.ranx-module-badge {
    align-items: center;
    color: var(--ink);
    display: inline-flex;
    font-size: 0.82rem;
    font-weight: 700;
    gap: 0.45rem;
    letter-spacing: 0;
    line-height: 1.15;
    text-transform: none;
}

.ranx-module-badge-label {
    color: var(--ink);
}

.ranx-module-badge.panel-kicker,
.module-card-kicker {
    color: var(--ink);
}

.ranx-module-badge.module-card-kicker {
    display: inline-flex;
}

.module-kicker .module-icon-shell,
.module-card-kicker .module-icon-shell,
.demo-step-kicker .module-icon-shell,
.module-path-compact .module-icon-shell {
    border-radius: 5px;
    height: 1.45rem;
    width: 1.45rem;
}

.module-kicker .module-icon-shell svg,
.module-card-kicker .module-icon-shell svg,
.demo-step-kicker .module-icon-shell svg,
.module-path-compact .module-icon-shell svg {
    height: 0.92rem;
    width: 0.92rem;
}

.module-icon-tiny {
    border-radius: 5px;
    height: 1.35rem;
    width: 1.35rem;
}

.module-icon-tiny svg {
    height: 0.86rem;
    width: 0.86rem;
}

.module-icon-shell {
    align-items: center;
    background: #fff;
    border: 1px solid #dfe6ef;
    border-radius: 6px;
    color: var(--module-color, var(--blue));
    display: inline-flex;
    height: 2rem;
    justify-content: center;
    width: 2rem;
}

.module-icon-shell svg {
    fill: currentColor;
    height: 1.15rem;
    stroke: none;
    width: 1.15rem;
}

.os-answer {
    background: #f7f9fc;
    border: 1px solid #e5ebf4;
    border-radius: 8px;
    padding: 1.1rem;
}

.os-answer > span,
.listening-loop-grid .module-label,
.compare-grid article > span {
    color: #526174;
    display: block;
    font-size: 0.78rem;
    font-weight: 680;
    margin-bottom: 0.55rem;
    text-transform: none;
}

.os-answer strong {
    font-size: 1.35rem;
}

.os-answer em {
    color: var(--ink-muted);
    display: block;
    font-style: normal;
    margin-top: 0.3rem;
}

.os-metrics {
    display: grid;
    gap: 0.7rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.os-metrics div {
    border-left: 2px solid var(--line);
    min-height: 4.4rem;
    padding: 0.5rem 0.75rem;
}

.os-metrics div:first-child {
    border-left-color: var(--blue);
}

.os-metrics div:nth-child(2) {
    border-left-color: var(--teal);
}

.os-metrics div:nth-child(3) {
    border-left-color: var(--green);
}

.os-metrics strong {
    display: block;
    font-size: 1.55rem;
    line-height: 1;
}

.os-metrics span {
    color: var(--ink-muted);
    display: block;
    font-size: 0.86rem;
    margin-top: 0.25rem;
}

.listening-compare-band,
.listening-loop-section,
.category-cta-band {
    margin: 0 auto;
    max-width: 1320px;
    padding: 3.75rem 2rem;
}

.listening-compare-band {
    border-top: 1px solid var(--line);
}

.compare-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 1.6rem;
}

.compare-grid article,
.listening-loop-grid article,
.enterprise-proof-grid article {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 1.05rem;
}

.compare-grid article {
    min-height: 180px;
}

.compare-grid article:nth-child(2) {
    border-color: rgba(34, 90, 200, 0.36);
}

.compare-grid article:nth-child(3) {
    border-color: rgba(35, 134, 93, 0.32);
}

.compare-grid h3,
.listening-loop-grid h3 {
    font-size: 1.2rem;
    line-height: 1.24;
}

.compare-grid p,
.listening-loop-grid p {
    font-size: 0.96rem;
    line-height: 1.58;
    margin-bottom: 0;
}

.listening-loop-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    margin-top: 1.6rem;
}

.listening-loop-grid article {
    background: #fff;
    border: 1px solid var(--line);
    border-top: 3px solid var(--module-color, var(--line));
    border-radius: 8px;
    min-height: 190px;
    padding: 1.1rem;
}

.listening-loop-grid .module-card-kicker {
    margin-bottom: 0.8rem;
}

.listening-loop-grid .module-icon-shell {
    margin-bottom: 0;
}

.listening-loop-grid .module-label,
.listening-loop-grid .module-card-kicker {
    color: var(--ink);
}

.listening-loop-grid article:hover {
    border-color: #c9d7ea;
    border-top-color: var(--module-color, var(--line));
}

.compare-grid article:nth-child(2) span {
    color: var(--ink-muted);
}

.compare-grid article:nth-child(3) span {
    color: var(--ink-muted);
}

.listening-enterprise-band {
    align-items: center;
    background: #101a33;
    color: #fff;
    display: grid;
    gap: 2rem;
    grid-template-columns: minmax(0, 0.7fr) minmax(520px, 1fr);
    margin: 0 auto;
    max-width: none;
    padding: 3.6rem max(2rem, calc((100vw - 1320px) / 2 + 2rem));
}

.listening-enterprise-band h2 {
    color: #fff;
}

.listening-enterprise-band p,
.listening-enterprise-band .eyebrow {
    color: rgba(255, 255, 255, 0.76);
}

.enterprise-proof-grid {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.enterprise-proof-grid article {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.16);
    min-height: 145px;
}

.enterprise-proof-grid strong {
    color: #fff;
    display: block;
    margin-bottom: 0.45rem;
}

.enterprise-proof-grid span {
    color: rgba(255, 255, 255, 0.74);
    display: block;
    line-height: 1.52;
}

.category-cta-band {
    align-items: center;
    background: #f7f9fc;
    display: grid;
    gap: 1.4rem;
    grid-template-columns: minmax(0, 1fr) auto;
    max-width: none;
    padding-bottom: 3rem;
    padding-left: max(2rem, calc((100vw - 1320px) / 2 + 2rem));
    padding-right: max(2rem, calc((100vw - 1320px) / 2 + 2rem));
    padding-top: 3rem;
}

.category-cta-band p {
    max-width: 680px;
}

.trademark-note {
    border-top: 1px solid var(--line);
    color: var(--ink-muted);
    margin: 0 auto;
    max-width: 1320px;
    padding: 1.1rem 2rem 0;
}

.trademark-note p {
    color: var(--ink-muted);
    font-size: 0.84rem;
    line-height: 1.5;
    margin: 0;
}

.tm-mark-small {
    transform: translateY(-5.75px);
}

.listening-proof-panel {
    gap: 0.85rem;
    justify-self: end;
    max-width: 560px;
    padding: 1rem;
    width: 100%;
}

.listening-proof-header strong {
    align-items: baseline;
    display: flex;
    gap: 0.05rem;
}

.os-answer {
    background: linear-gradient(135deg, #f7faff 0%, #eefcf7 100%);
    border-color: #d9e7f2;
}

.os-answer p {
    color: var(--ink-soft);
    margin: 0.2rem 0 0;
}

.os-proof-row {
    display: grid;
    gap: 0.7rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.os-proof-row div {
    border-left: 2px solid var(--line);
    min-height: 4rem;
    padding: 0.45rem 0.75rem;
}

.os-proof-row div:first-child {
    border-left-color: var(--blue);
}

.os-proof-row div:nth-child(2) {
    border-left-color: var(--teal);
}

.os-proof-row div:nth-child(3) {
    border-left-color: var(--green);
}

.os-proof-row strong {
    display: block;
    font-size: 1.55rem;
    line-height: 1;
}

.os-proof-row span {
    color: var(--ink-muted);
    display: block;
    font-size: 0.86rem;
    margin-top: 0.25rem;
}

.integrations-hero {
    align-items: center;
    display: grid;
    gap: 2.4rem;
    grid-template-columns: minmax(0, 0.95fr) minmax(420px, 0.8fr);
    margin: 0 auto;
    max-width: 1320px;
    min-height: 500px;
    padding: 3rem 2rem 2.5rem;
}

.integrations-hero h1 {
    font-size: 3.35rem;
    line-height: 1.08;
    max-width: 680px;
}

.integrations-hero p {
    color: #34435d;
    font-size: 1.05rem;
    line-height: 1.58;
    max-width: 670px;
}

.integration-proof-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
    display: grid;
    gap: 1rem;
    padding: 1rem;
}

.integration-proof-head {
    align-items: center;
    border: 1px solid #e6edf6;
    border-radius: 8px;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: auto 1fr;
    padding: 0.85rem;
}

.integration-proof-head img {
    height: 2.25rem;
    width: 2.25rem;
}

.integration-proof-head strong,
.integration-proof-head span {
    display: block;
}

.integration-proof-head span {
    color: var(--ink-muted);
    font-size: 0.88rem;
    margin-top: 0.15rem;
}

.integration-stat-grid {
    display: grid;
    gap: 0.7rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.integration-stat-grid div {
    background: #f7f9fc;
    border: 1px solid #e5ebf4;
    border-radius: 8px;
    min-height: 6rem;
    padding: 0.9rem;
}

.integration-stat-grid strong {
    display: block;
    font-size: 2rem;
    line-height: 1;
}

.integration-stat-grid span {
    color: var(--ink-muted);
    display: block;
    font-size: 0.88rem;
    margin-top: 0.4rem;
}

.integration-module-path {
    margin-bottom: 0;
}

.integration-source-section,
.integration-loop-section {
    margin: 0 auto;
    max-width: 1320px;
    padding: 3.6rem 2rem;
}

.integration-source-section {
    background: #f7f9fc;
    max-width: none;
    padding-left: max(2rem, calc((100vw - 1320px) / 2 + 2rem));
    padding-right: max(2rem, calc((100vw - 1320px) / 2 + 2rem));
}

.integration-examples-section {
    margin: 0 auto;
    max-width: 1320px;
    padding: 3.6rem 2rem;
}

.integration-example-board {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 1.5rem;
}

.integration-example-card {
    background: #fff;
    border: 1px solid var(--line);
    border-top: 2px solid var(--module-color, var(--line));
    border-radius: 8px;
    display: grid;
    gap: 1.15rem;
    padding: 1.2rem;
}

.integration-example-head {
    align-items: center;
    display: grid;
    gap: 0.85rem;
    grid-template-columns: auto 1fr;
}

.integration-example-head span:not(.module-icon-shell) {
    color: var(--ink-muted);
    display: block;
    font-size: 0.88rem;
    font-weight: 680;
    text-transform: none;
}

.integration-example-head h3 {
    font-size: 1.35rem;
    margin: 0.15rem 0 0;
}

.integration-system-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.integration-system-cloud span {
    background: #f7f9fc;
    border: 1px solid #dfe7f2;
    border-radius: 8px;
    color: #22314c;
    display: inline-flex;
    font-size: 0.9rem;
    font-weight: 720;
    line-height: 1;
    padding: 0.58rem 0.72rem;
}

.integration-logo-grid {
    display: grid;
    gap: 0.65rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.integration-provider-card {
    align-items: center;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    display: grid;
    gap: 0 0.7rem;
    grid-template-columns: auto minmax(0, 1fr);
    min-height: 4.8rem;
    padding: 0.72rem;
}

.integration-provider-card img {
    border-radius: 8px;
    grid-row: 1 / span 2;
    height: 2.55rem;
    width: 2.55rem;
}

.integration-provider-card strong {
    color: var(--ink);
    display: block;
    font-size: 0.96rem;
    line-height: 1.18;
}

.integration-provider-card span {
    color: var(--ink-muted);
    display: block;
    font-size: 0.78rem;
    line-height: 1.2;
    margin-top: 0.15rem;
}

.integration-example-note {
    border-top: 1px solid var(--line);
    color: var(--ink-muted);
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 1.4rem 0 0;
    padding-top: 1rem;
}

.integration-source-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 1.5rem;
}

.integration-source-grid article {
    align-content: start;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    display: grid;
    gap: 0.75rem;
    min-height: 235px;
    padding: 1.15rem;
}

/* The module icon is a span too; it keeps its own centred inline-flex box. */
.integration-source-grid article > span:not(.module-icon-shell) {
    color: var(--ink-muted);
    display: block;
    font-size: 0.88rem;
    font-weight: 680;
    text-transform: none;
}

.integration-source-grid h3 {
    font-size: 1.25rem;
    margin-bottom: 0;
}

.integration-source-grid p {
    color: var(--ink-muted);
    font-size: 0.95rem;
    line-height: 1.58;
    margin-bottom: 0;
}

.integration-loop-section {
    align-items: start;
    display: grid;
    gap: 2rem;
    grid-template-columns: minmax(0, 0.75fr) minmax(560px, 1fr);
}

.integration-loop-section > div:first-child p {
    max-width: 620px;
}

.integration-loop-list {
    display: grid;
    gap: 0.75rem;
}

.integration-loop-list article {
    align-items: center;
    background: #fff;
    border: 1px solid var(--line);
    border-left: 3px solid var(--module-color, var(--line));
    border-radius: 8px;
    display: grid;
    gap: 0.35rem 0.85rem;
    grid-template-columns: 8.5rem 1fr;
    min-height: 5.7rem;
    padding: 0.85rem 1rem;
}

.integration-loop-list .ranx-module-badge {
    grid-row: 1 / span 2;
}

.integration-loop-list strong {
    display: block;
    font-size: 1rem;
}

.integration-loop-list article > span:not(.ranx-module-badge):not(.module-icon-shell):not(.ranx-module-badge-label) {
    color: var(--ink-muted);
    display: block;
    line-height: 1.45;
}

.integration-trust-band {
    align-items: center;
    background: #101a33;
    color: #fff;
    display: grid;
    gap: 2rem;
    grid-template-columns: minmax(0, 0.72fr) minmax(500px, 1fr);
    margin: 0 auto;
    max-width: none;
    padding: 3.6rem max(2rem, calc((100vw - 1320px) / 2 + 2rem));
}

.integration-trust-band h2 {
    color: #fff;
}

.integration-trust-band p,
.integration-trust-band .eyebrow {
    color: rgba(255, 255, 255, 0.76);
}

.integration-trust-grid {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.integration-trust-grid article {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    min-height: 160px;
    padding: 1rem;
}

.integration-trust-grid strong {
    color: #fff;
    display: block;
    margin-bottom: 0.55rem;
}

.integration-trust-grid span {
    color: rgba(255, 255, 255, 0.74);
    display: block;
    line-height: 1.52;
}

.legal-shell {
    margin: 0 auto;
    max-width: 1180px;
    padding: 3.5rem 2rem 5rem;
}

.legal-header {
    border-bottom: 1px solid var(--line);
    margin-bottom: 2rem;
    max-width: 860px;
    padding-bottom: 1.5rem;
}

.legal-header h1 {
    font-size: 3.7rem;
    line-height: 1;
    margin-bottom: 0.8rem;
}

.legal-header p {
    font-size: 1.05rem;
    max-width: 760px;
}

.legal-effective {
    color: var(--ink);
    font-size: 0.95rem !important;
    font-weight: 760;
    margin-bottom: 1.25rem;
}

/* /security: what a reviewer can ask for, above the page's sections. */
.security-pack {
    align-items: center;
    background: #f4f7fd;
    border: 1px solid rgba(34, 90, 200, 0.22);
    border-radius: 0.375rem;
    display: grid;
    gap: 1.25rem 2rem;
    grid-template-columns: minmax(0, 1fr) auto;
    margin-bottom: 2.25rem;
    max-width: 1040px;
    padding: 1.25rem 1.4rem;
}

.security-pack h2 {
    font-size: 1.25rem;
    margin-bottom: 0.35rem;
}

.security-pack p {
    margin-bottom: 0.5rem;
}

.security-pack ul {
    display: grid;
    gap: 0.3rem;
    margin: 0;
    padding-left: 1.1rem;
}

@media (max-width: 760px) {
    .security-pack {
        grid-template-columns: minmax(0, 1fr);
    }

    .security-pack .primary-action {
        justify-self: start;
    }
}

.legal-layout {
    align-items: start;
    display: grid;
    gap: 3rem;
    grid-template-columns: 260px minmax(0, 1fr);
}

.legal-toc {
    border: 1px solid var(--line);
    border-radius: 8px;
    display: grid;
    gap: 0.1rem;
    padding: 0.75rem;
    position: sticky;
    top: 5.5rem;
}

.legal-toc a {
    border-radius: 6px;
    color: var(--ink-soft);
    font-size: 0.92rem;
    font-weight: 660;
    padding: 0.55rem 0.65rem;
}

.legal-toc a:hover {
    background: #f4f7fb;
    color: var(--blue);
}

.legal-content {
    max-width: 820px;
}

.legal-content-single {
    max-width: 100%;
}

.legal-content section {
    border-bottom: 1px solid var(--line);
    padding: 0 0 1.6rem;
    margin-bottom: 1.6rem;
}

.legal-content section:last-child {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

.legal-content h2 {
    font-size: 1.45rem;
    line-height: 1.2;
    margin-bottom: 0.75rem;
}

.legal-content p,
.legal-content li {
    color: var(--ink-soft);
    font-size: 1rem;
    line-height: 1.7;
}

.legal-content ul {
    display: grid;
    gap: 0.55rem;
    margin: 0.75rem 0 0;
    padding-left: 1.2rem;
}

.security-module-path {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0.7rem 0 1rem;
}

.security-module-path .ranx-module-badge {
    background: #fff;
    border: 1px solid #e7edf5;
    border-left: 3px solid var(--module-color, var(--line));
    border-radius: 8px;
    font-size: 0.72rem;
    padding: 0.3rem 0.55rem 0.3rem 0.32rem;
}

.legal-content a {
    color: var(--blue);
    font-weight: 700;
}

/* SMS Terms: the sample consent forms (paper and online) that carriers check against each campaign's message flow. */
.sms-consent-sample {
    margin: 0.75rem 0 1.1rem;
    max-width: 640px;
}

.sms-consent-sample img {
    border: 1px solid var(--line);
    border-radius: 0.375rem;
    display: block;
    height: auto;
    width: 100%;
}

.sms-consent-sample figcaption {
    color: var(--ink-muted);
    font-size: 0.85rem;
    margin-top: 0.5rem;
}

.legal-content .sms-consent-wording {
    border-left: 3px solid var(--line);
    color: var(--ink);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0.5rem 0 1.1rem;
    max-width: 640px;
    overflow-wrap: anywhere;
    padding: 0.2rem 0 0.2rem 1rem;
}

.legal-table-wrap {
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow-x: auto;
}

.legal-table {
    border-collapse: collapse;
    min-width: 760px;
    width: 100%;
}

.legal-table th,
.legal-table td {
    border-bottom: 1px solid var(--line);
    padding: 0.85rem;
    text-align: left;
    vertical-align: top;
}

.legal-table th {
    background: #f7f9fc;
    color: var(--ink);
    font-size: 0.82rem;
    font-weight: 780;
}

.legal-table td {
    color: var(--ink-soft);
    line-height: 1.55;
}

.legal-table tr:last-child td {
    border-bottom: 0;
}

.faq-shell {
    margin: 0 auto;
    max-width: 1180px;
    padding: 3.5rem 2rem 5rem;
}

.faq-header {
    border-bottom: 1px solid var(--line);
    margin-bottom: 2rem;
    max-width: 840px;
    padding-bottom: 1.5rem;
}

.faq-header h1 {
    font-size: 3.8rem;
    line-height: 1;
    margin-bottom: 0.9rem;
}

.faq-header p {
    font-size: 1.08rem;
    max-width: 700px;
}

.faq-layout {
    align-items: start;
    display: grid;
    gap: 3rem;
    grid-template-columns: 240px minmax(0, 1fr);
}

.faq-toc {
    border: 1px solid var(--line);
    border-radius: 8px;
    display: grid;
    gap: 0.1rem;
    padding: 0.75rem;
    position: sticky;
    top: 5.5rem;
}

.faq-toc a {
    border-radius: 6px;
    color: var(--ink-soft);
    font-size: 0.92rem;
    font-weight: 700;
    padding: 0.55rem 0.65rem;
}

.faq-toc a:hover {
    background: #f4f7fb;
    color: var(--blue);
}

.faq-list {
    display: grid;
    gap: 2rem;
}

.faq-group {
    display: grid;
    gap: 0.75rem;
}

.faq-group h2 {
    font-size: 1.6rem;
    margin-bottom: 0.25rem;
}

.faq-group details {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    padding: 0.95rem 1rem;
}

/* The caret is drawn inside the question so it sits a padding's width from the border, and long questions wrap in
   line with their own text. */
.faq-group summary {
    align-items: baseline;
    color: var(--ink);
    cursor: pointer;
    display: flex;
    font-weight: 760;
    gap: 0.6rem;
    list-style: none;
}

.faq-group summary::-webkit-details-marker {
    display: none;
}

.faq-group summary::before {
    color: var(--blue);
    content: "\25B8";
    flex: none;
    font-size: 0.9em;
    transition: transform 0.15s ease;
}

.faq-group details[open] summary {
    margin-bottom: 0.65rem;
}

.faq-group details[open] summary::before {
    transform: rotate(90deg);
}

.faq-group p {
    color: var(--ink-soft);
    line-height: 1.65;
    margin-bottom: 0;
}

.faq-group a {
    color: var(--blue);
    font-weight: 700;
}

.decivium-hero,
.public-playbooks-hero {
    align-items: end;
    display: grid;
    gap: 2rem;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
    margin: 0 auto;
    max-width: 1280px;
    padding: 3rem 2rem 2.35rem;
}

.decivium-hero h1,
.public-playbooks-hero h1 {
    font-size: 3.2rem;
    line-height: 1.08;
    margin-bottom: 1rem;
    max-width: 760px;
}

.decivium-hero p,
.public-playbooks-hero p {
    font-size: 1.12rem;
    max-width: 700px;
}

.demo-disclosure {
    background: #f7f9fc;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink-soft);
    font-size: 0.94rem;
    font-weight: 680;
    margin: 1.3rem 0;
    padding: 0.8rem 0.9rem;
}

.demo-cycle-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(13, 35, 78, 0.055);
    padding: 1.2rem;
}

.demo-cycle-card-top {
    align-items: center;
    display: flex;
    gap: 0.65rem;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.demo-cycle-card h2 {
    font-size: 1.55rem;
    line-height: 1.12;
}

.demo-cycle-metrics {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 1rem 0;
}

.demo-cycle-metrics div {
    border-top: 1px solid var(--line);
    padding-top: 0.75rem;
}

.demo-cycle-metrics dt {
    color: var(--ink-muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.demo-cycle-metrics dd {
    color: var(--ink);
    font-size: 1.2rem;
    font-weight: 780;
    margin: 0.15rem 0 0;
}

.cycle-id {
    color: var(--ink-muted);
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.72rem !important;
    line-height: 1.4;
    margin: 1rem 0 0;
    overflow-wrap: anywhere;
}

.demo-surface-grid {
    align-items: start;
    display: grid;
    gap: 1rem;
    grid-template-columns: 220px minmax(0, 1fr);
    margin: 0 auto;
    max-width: 1280px;
    padding: 0 2rem 4.5rem;
}

.demo-nav-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    display: grid;
    gap: 0.2rem;
    padding: 0.9rem;
    position: sticky;
    top: 5.5rem;
}

.demo-nav-card a {
    border-radius: 6px;
    color: var(--ink-soft);
    font-size: 0.92rem;
    font-weight: 700;
    padding: 0.55rem 0.65rem;
}

.demo-nav-card a:hover {
    background: #f4f7fb;
    color: var(--blue);
}

.demo-surface-stack {
    display: grid;
    gap: 1rem;
}

.demo-product-slab {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 1.35rem;
}

.demo-survey-preview-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 0.9fr) minmax(280px, 1fr);
}

.survey-response-card,
.demo-preview-notes {
    background: #f7f9fc;
    border: 1px solid #e7edf5;
    border-radius: 8px;
    padding: 1rem;
}

.survey-response-card > span {
    color: var(--ink-muted);
    display: block;
    font-size: 0.78rem;
    font-weight: 780;
    margin-bottom: 0.7rem;
    text-transform: none;
}

.survey-response-card h3 {
    font-size: 1.55rem;
    line-height: 1.15;
}

.demo-preview-notes h3 {
    font-size: 1.15rem;
}

.demo-preview-notes ul {
    color: var(--ink-soft);
    display: grid;
    gap: 0.65rem;
    line-height: 1.6;
    margin: 0;
    padding-left: 1.1rem;
}

.rank-surface-table {
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
}

.rank-surface-row {
    align-items: center;
    border-bottom: 1px solid var(--line);
    display: grid;
    gap: 1rem;
    grid-template-columns: 0.45fr 1.35fr 0.45fr 0.95fr 1fr;
    min-height: 3.5rem;
    padding: 0.75rem 1rem;
}

.rank-surface-row:last-child {
    border-bottom: 0;
}

.rank-surface-head {
    background: #f7f9fc;
    color: var(--ink-muted);
    font-size: 0.78rem;
    font-weight: 780;
}

.rank-surface-row b {
    color: var(--green);
}

.rank-surface-row em {
    color: var(--ink-muted);
    font-style: normal;
}

.driver-signal-grid,
.demo-action-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.driver-signal-grid article,
.demo-action-grid article {
    background: #f7f9fc;
    border: 1px solid #e7edf5;
    border-radius: 8px;
    padding: 1rem;
}

.driver-signal-grid article > div {
    display: grid;
    gap: 0.2rem;
}

.driver-signal-grid article > div span {
    color: var(--ink-muted);
    font-size: 0.84rem;
    font-weight: 680;
}

.driver-signal-grid p,
.demo-action-grid p {
    font-size: 0.94rem;
    line-height: 1.55;
    margin-bottom: 0;
}

.demo-action-grid article > span {
    align-items: center;
    background: var(--ink);
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    font-size: 0.78rem;
    font-weight: 760;
    height: 1.8rem;
    justify-content: center;
    margin-bottom: 1rem;
    width: 1.8rem;
}

.demo-action-grid h3 {
    font-size: 1.12rem;
}

.lift-product-slab {
    background: #101a33;
    border-color: #101a33;
    color: #fff;
}

.lift-product-slab p,
.lift-product-slab .panel-kicker {
    color: rgba(255, 255, 255, 0.72);
}

.decivium-hero-proof {
    align-items: center;
}

.demo-cycle-card-rich p:not(.cycle-id) {
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 0.6rem;
}

.demo-answer-strip,
.demo-story-band {
    margin: 0 auto;
    max-width: 1280px;
    padding-left: 2rem;
    padding-right: 2rem;
}

.demo-answer-strip {
    display: grid;
    gap: 0.8rem;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding-bottom: 1.2rem;
}

.demo-kpi-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 14px 34px rgba(13, 35, 78, 0.07);
    display: grid;
    gap: 0.65rem;
    min-height: 180px;
    padding: 1rem;
    place-items: center;
    text-align: center;
}

.demo-kpi-card > span,
.demo-start-head > span {
    color: #8b98ad;
    font-size: 0.78rem;
    font-weight: 780;
}

.demo-start-head .demo-start-kicker {
    margin-bottom: 0;
}

.demo-kpi-card p {
    color: var(--ink);
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 0;
}

.demo-donut {
    align-items: center;
    background:
        radial-gradient(circle closest-side, #fff 71%, transparent 72% 100%),
        conic-gradient(var(--donut-color) calc(var(--value) * 1%), #e7edf6 0);
    border-radius: 999px;
    display: inline-flex;
    height: 6.25rem;
    justify-content: center;
    width: 6.25rem;
}

.demo-donut strong {
    color: var(--ink);
    font-size: 1.25rem;
    font-weight: 780;
}

.demo-donut-blue {
    --donut-color: var(--blue);
}

.demo-donut-green {
    --donut-color: #2fb87f;
}

.demo-donut-amber {
    --donut-color: #f4b83d;
}

.demo-donut-nps {
    background:
        radial-gradient(circle closest-side, #fff 71%, transparent 72% 100%),
        conic-gradient(#35c778 0 15%, #f8dc4b 15% 70%, #ef565c 70% 100%);
}

.demo-start-card {
    align-items: stretch;
    border-color: #dfe6ef;
    border-top: 3px solid var(--ranx-act);
    place-items: stretch;
    text-align: left;
}

.demo-start-head {
    align-items: center;
    display: flex;
    gap: 0.6rem;
    justify-content: space-between;
}

.demo-start-head em {
    background: rgba(18, 168, 157, 0.12);
    border-radius: 999px;
    color: #0f716a;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 780;
    padding: 0.28rem 0.5rem;
}

.demo-start-card h2 {
    font-size: 1rem;
    line-height: 1.3;
    margin: 0;
}

.demo-start-card p {
    color: var(--ink-soft);
}

.demo-story-band {
    border-top: 1px solid var(--line);
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding-bottom: 2.2rem;
    padding-top: 1.2rem;
}

.demo-story-band a {
    border-right: 1px solid var(--line);
    display: grid;
    gap: 0.35rem;
    min-height: 96px;
    padding: 0.8rem 1rem;
}

.demo-story-band a:last-child {
    border-right: 0;
}

.demo-story-band span {
    color: var(--ink-muted);
    font-size: 0.8rem;
    font-weight: 780;
}

.demo-story-band strong {
    color: var(--ink);
    font-size: 1rem;
    line-height: 1.35;
}

.demo-story-band a:hover strong {
    color: var(--blue);
}

.demo-surface-grid-wide {
    padding-top: 0;
}

.survey-response-card-large h3 {
    max-width: 620px;
}

.demo-stack-panel {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    display: grid;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 1rem;
}

.demo-stack-row {
    align-items: center;
    display: grid;
    gap: 1rem;
    grid-template-columns: 190px minmax(0, 1fr);
}

.demo-stack-label strong {
    display: block;
    font-size: 0.9rem;
}

.demo-stack-label span {
    color: var(--ink-muted);
    display: block;
    font-size: 0.82rem;
    font-weight: 680;
    margin-top: 0.15rem;
}

.demo-stacked-track {
    background: #edf2f8;
    border: 1px solid #e3eaf3;
    border-radius: 8px;
    display: flex;
    min-height: 2.75rem;
    overflow: hidden;
}

.demo-score-track {
    /* True 0-100 scale: segments sum to the Net Ranx score and the remainder stays empty. */
    max-width: none;
}

.demo-stack-segment {
    align-items: center;
    color: #fff;
    display: inline-flex;
    font-size: 0.82rem;
    font-weight: 780;
    justify-content: center;
    min-width: 2.5rem;
}

.demo-blue {
    background: var(--slot-1);
}

.demo-green {
    background: var(--slot-2);
}

.demo-amber {
    background: var(--slot-3);
    color: var(--slot-3-ink);
}

.demo-red {
    background: var(--slot-4);
}

.demo-category-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
}

.demo-category-legend span {
    align-items: center;
    color: var(--ink-soft);
    display: inline-flex;
    font-size: 0.86rem;
    gap: 0.42rem;
}

.demo-category-legend i {
    border-radius: 999px;
    display: inline-flex;
    height: 0.65rem;
    width: 0.65rem;
}

.rank-surface-table-spaced {
    margin-top: 1rem;
}

.demo-receipts-slab {
    background: #f7f9fc;
}

.demo-receipt-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Drivers: the cards under the quadrant and evidence panels keep the grid's own gap from them. */
.demo-driver-layout + .demo-receipt-grid {
    margin-top: 1rem;
}

.demo-receipt-grid article {
    background: #fff;
    border: 1px solid #e7edf5;
    border-radius: 8px;
    padding: 1rem;
}

.demo-receipt-grid strong {
    display: block;
    margin-bottom: 0.4rem;
}

.demo-receipt-grid p {
    font-size: 0.94rem;
    line-height: 1.55;
    margin-bottom: 0;
}

.demo-final-actions {
    margin-top: 1.25rem;
}

.public-playbooks-hero {
    min-height: 430px;
}

.playbooks-hero-proof {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
    display: grid;
    gap: 0.7rem;
    padding: 1.1rem;
}

.playbooks-hero-proof strong {
    display: block;
    font-size: 1.2rem;
    line-height: 1.25;
}

.playbooks-hero-proof p {
    font-size: 0.94rem;
    line-height: 1.5;
    margin-bottom: 0.2rem;
}

.public-playbook-workbench {
    background: #f7f9fc;
    margin: 0 auto;
    padding: 3.5rem 2rem 4.5rem;
}

.public-playbook-workbench > * {
    margin-left: auto;
    margin-right: auto;
    max-width: 1280px;
}

.playbook-advisor-head {
    align-items: end;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.playbook-advisor-head h2 {
    font-size: 2rem;
    margin-bottom: 0;
}

.audience-filter-grid {
    display: grid;
    gap: 0.8rem;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    margin-bottom: 1rem;
}

.audience-filter-others {
    align-content: start;
    display: grid;
    gap: 0.45rem;
}

.audience-filter-others-label {
    color: var(--ink-muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.audience-filter-others > div {
    display: grid;
    gap: 0.6rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/*
 * Audience chips carry the Ranx app's listening-context palette and order (EX, CX, PX, RX, ED):
 * the app's RanxAdvisorVisuals resolves CFG_AudienceDomains display order against the first slot
 * of each CFG_ChartColorSlots family. Same variable names as the app's .ranx-lifecycle-domain-chip.
 */
[data-audience] {
    --ranx-audience-color: #2563eb;
    --ranx-audience-rgb: 37, 99, 235;
    --ranx-audience-on-color: #ffffff;
}

[data-audience="CX"] {
    --ranx-audience-color: #16a34a;
    --ranx-audience-rgb: 22, 163, 74;
}

[data-audience="PX"] {
    --ranx-audience-color: #f6c700;
    --ranx-audience-rgb: 246, 199, 0;
    --ranx-audience-on-color: #0f172a;
}

[data-audience="RX"] {
    --ranx-audience-color: #dc2626;
    --ranx-audience-rgb: 220, 38, 38;
}

[data-audience="ED"] {
    --ranx-audience-color: #f97316;
    --ranx-audience-rgb: 249, 115, 22;
}

.audience-chip {
    align-items: center;
    background: var(--ranx-audience-color);
    border: 0;
    border-radius: 0.34rem;
    box-shadow: 0 8px 16px rgba(var(--ranx-audience-rgb), 0.15);
    color: var(--ranx-audience-on-color);
    display: inline-flex;
    flex: none;
    font-size: 0.78rem;
    font-weight: 700;
    height: 2rem;
    justify-content: center;
    justify-self: start;
    letter-spacing: 0;
    line-height: 1;
    text-transform: uppercase;
    width: 2rem;
}

.audience-filter-card {
    --audience-color: var(--ranx-audience-color, var(--blue));
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    cursor: pointer;
    display: grid;
    gap: 0.35rem;
    min-height: 168px;
    padding: 1rem;
    text-align: left;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.audience-filter-card:hover,
.audience-filter-card.is-active {
    border-color: color-mix(in srgb, var(--audience-color) 55%, #ffffff);
    box-shadow: none;
}

.audience-filter-card.is-unavailable {
    cursor: default;
    opacity: 0.68;
}

.audience-filter-card.is-unavailable:hover {
    border-color: var(--line);
    box-shadow: none;
    transform: none;
}

.audience-filter-card.is-active {
    background: #fff;
    box-shadow: inset 0 2px 0 var(--audience-color);
}

.audience-filter-card strong {
    display: block;
    font-size: 1.02rem;
}

.audience-filter-card span:not(.audience-chip) {
    color: var(--ink-muted);
    font-size: 0.88rem;
    line-height: 1.45;
}

.audience-filter-card em {
    color: var(--ink-muted);
    font-size: 0.82rem;
    font-style: normal;
    font-weight: 740;
    margin-top: auto;
}

.audience-filter-card.is-compact {
    align-items: center;
    column-gap: 0.65rem;
    grid-template-columns: auto minmax(0, 1fr);
    min-height: 0;
    padding: 0.6rem 0.75rem;
    row-gap: 0.05rem;
}

.audience-filter-card.is-compact .audience-chip {
    grid-row: span 2;
}

.audience-filter-card.is-compact strong {
    font-size: 0.92rem;
    line-height: 1.25;
}

.audience-filter-card.is-compact em {
    font-size: 0.78rem;
    margin-top: 0;
}

.objective-strip {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-bottom: 1.2rem;
}

.objective-chip {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink-soft);
    cursor: pointer;
    font-weight: 720;
    min-height: 2.35rem;
    padding: 0.55rem 0.75rem;
}

.objective-chip:hover,
.objective-chip.is-active {
    border-color: color-mix(in srgb, var(--blue) 42%, var(--line));
    color: var(--ink);
}

.objective-chip.is-active {
    background: #fff;
    box-shadow: inset 0 -2px 0 var(--blue);
}

.public-playbook-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.public-playbook-card {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    min-height: 390px;
    padding: 1rem;
}

.public-playbook-card-top {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: space-between;
}

.public-playbook-card h2 {
    font-size: 1.55rem;
    margin-bottom: 0;
}

.public-playbook-card p {
    font-size: 0.96rem;
    line-height: 1.55;
    margin-bottom: 0;
}

.public-playbook-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.public-playbook-tags span {
    background: #f7f9fc;
    border: 1px solid #e7edf5;
    border-radius: 8px;
    color: var(--ink-soft);
    font-size: 0.82rem;
    font-weight: 700;
    padding: 0.35rem 0.58rem;
}

#blazor-error-ui {
    background: #fff3cd;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

h1:focus {
    outline: none;
}

@media (max-width: 980px) {
    .site-header {
        gap: 0.75rem;
        grid-template-columns: auto 1fr;
        padding-bottom: 0.65rem;
        padding-top: 0.65rem;
    }

    .site-nav,
    .site-sign-in {
        display: none;
    }

    .site-actions {
        flex-wrap: nowrap;
        gap: 0.5rem;
        justify-self: end;
    }

    .site-actions .primary-action {
        font-size: 0.9rem;
        min-height: 2.5rem;
        padding: 0.45rem 0.85rem;
    }

    .site-menu {
        display: block;
    }

    .hero-section,
    .ranx-hero,
    .story-hero,
    .decivium-hero,
    .public-playbooks-hero,
    .pricing-hero,
    .listening-brand-hero,
    .listening-hero,
    .listening-enterprise-band,
    .category-cta-band,
    .integrations-hero,
    .integration-loop-section,
    .integration-trust-band,
    .demo-proof-band,
    .buyer-path-section,
    .clean-hero,
    .clean-preview-grid,
    .research-surface,
    .product-preview-layout,
    .stage-grid,
    .split-layout,
    .callout-strip,
    .demo-workbench,
    .research-lab,
    .workflow-shell,
    .demo-slab,
    .trust-strip {
        grid-template-columns: 1fr;
    }

    .hero-section,
    .ranx-hero,
    .story-hero {
        min-height: auto;
    }

    .surface-grid,
    .scan-strip,
    .proof-strip,
    .benefit-grid,
    .feature-grid,
    .home-pricing-grid,
    .clean-card-grid,
    .clean-flow,
    .integration-strip,
    .testimonial-grid,
    .module-card-grid,
    .home-program-grid,
    .compare-grid,
    .listening-loop-grid,
    .enterprise-proof-grid,
    .integration-source-grid,
    .integration-example-board,
    .integration-trust-grid,
    .audience-filter-grid,
    .demo-surface-grid,
    .demo-survey-preview-grid,
    .driver-grid,
    .lift-grid,
    .pricing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .demo-surface-grid {
        grid-template-columns: 1fr;
    }

    .demo-nav-card {
        position: static;
    }

    .driver-signal-grid,
    .demo-action-grid,
    .demo-answer-strip,
    .demo-story-band,
    .demo-receipt-grid {
        grid-template-columns: 1fr;
    }

    .demo-answer-strip,
    .demo-story-band {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .demo-story-band a {
        border-right: 0;
        border-bottom: 1px solid var(--line);
        min-height: auto;
    }

    .demo-story-band a:last-child {
        border-bottom: 0;
    }

    .demo-stack-row {
        align-items: start;
        grid-template-columns: 1fr;
    }

    .demo-score-track {
        max-width: none;
    }

    .playbook-grid {
        grid-template-columns: 1fr;
    }

    .featured-playbook {
        grid-column: auto;
    }

    .demo-sidebar {
        position: static;
    }

    .research-preview-card {
        justify-self: stretch;
        max-width: none;
    }

    .newsletter-card {
        grid-template-columns: 1fr;
    }

    .footer-columns,
    .legal-layout,
    .faq-layout {
        grid-template-columns: 1fr;
    }

    .legal-toc,
    .faq-toc {
        position: static;
    }

    .clean-hero {
        min-height: auto;
        padding: 3.5rem 1rem 2rem;
    }

    .clean-hero h1 {
        font-size: 3.4rem;
    }

    .story-hero h1,
    .pricing-hero h1,
    .listening-brand-hero h1,
    .listening-hero h1,
    .integrations-hero h1 {
        font-size: 3.05rem;
    }

    .decivium-hero h1,
    .public-playbooks-hero h1 {
        font-size: 3.05rem;
    }

    .newsletter-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {
    h1 {
        font-size: 3.2rem;
    }

    .page-hero {
        align-items: stretch;
        flex-direction: column;
    }

    .hero-actions .primary-action,
    .hero-actions .secondary-action,
    .page-hero .primary-action {
        width: 100%;
    }

    .hero-proof,
    .proof-grid,
    .module-path,
    .scan-strip,
    .proof-strip,
    .benefit-grid,
    .feature-grid,
    .workflow-steps,
    .home-pricing-grid,
    .clean-card-grid,
    .clean-flow,
    .integration-strip,
    .testimonial-grid,
    .surface-grid,
    .module-card-grid,
    .home-program-grid,
    .compare-grid,
    .listening-loop-grid,
    .enterprise-proof-grid,
    .integration-source-grid,
    .integration-example-board,
    .integration-logo-grid,
    .integration-stat-grid,
    .integration-trust-grid,
    .os-flow,
    .os-metrics,
    .audience-filter-grid,
    .demo-surface-grid,
    .demo-survey-preview-grid,
    .driver-signal-grid,
    .demo-action-grid,
    .demo-answer-strip,
    .demo-story-band,
    .demo-receipt-grid,
    .driver-grid,
    .lift-grid,
    .pricing-grid {
        grid-template-columns: 1fr;
    }

    .brand-logo-wide {
        height: 2.25rem;
    }

    .clean-hero h1 {
        font-size: 2.8rem;
    }

    .story-hero h1,
    .pricing-hero h1,
    .listening-brand-hero h1,
    .listening-hero h1,
    .integrations-hero h1 {
        font-size: 2.45rem;
    }

    .story-hero,
    .pricing-hero,
    .listening-brand-hero,
    .listening-hero,
    .listening-compare-band,
    .listening-loop-section,
    .listening-enterprise-band,
    .category-cta-band,
    .integrations-hero,
    .integration-source-section,
    .integration-examples-section,
    .integration-loop-section,
    .integration-trust-band,
    .demo-proof-band,
    .home-programs-section,
    .buyer-path-section,
    .home-proof {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .decivium-hero,
    .public-playbooks-hero,
    .demo-surface-grid,
    .public-playbook-workbench,
    .demo-answer-strip,
    .demo-story-band {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .decivium-hero h1,
    .public-playbooks-hero h1 {
        font-size: 2.4rem;
    }

    .module-path {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ranx-loop-artifact {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .ranx-loop-artifact__explain {
        min-height: 0;
    }

    .ranx-loop-artifact__orbit {
        max-width: 22rem;
        width: min(100%, 22rem);
    }

    .ranx-loop-node {
        gap: 0.35rem;
        grid-template-columns: auto minmax(0, 1fr);
        min-height: 2.9rem;
        padding: 0.48rem 0.56rem;
        width: clamp(6.1rem, 31vw, 7.1rem);
    }

    .ranx-loop-node h3 {
        font-size: 0.86rem;
    }

    .ranx-loop-node .module-icon-tiny {
        height: 1.1rem;
        width: 1.1rem;
    }

    .ranx-loop-node .module-icon-tiny svg {
        height: 0.72rem;
        width: 0.72rem;
    }

    .integration-loop-list article {
        align-items: start;
        grid-template-columns: 1fr;
    }

    .integration-loop-list .ranx-module-badge {
        grid-row: auto;
    }

    .clean-hero p {
        font-size: 1.05rem;
    }

    .clean-section,
    .clean-section-muted > * {
        padding: 3rem 1rem;
    }

    .clean-section-heading {
        align-items: start;
        flex-direction: column;
    }

    .scan-strip a {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .scan-strip a:last-child {
        border-bottom: 0;
    }

    .rank-table-row {
        grid-template-columns: 0.35fr 1fr;
    }

    .rank-surface-row {
        grid-template-columns: 0.35fr 1fr;
    }

    .rank-surface-head {
        display: none;
    }

    .rank-table-row span:nth-child(3),
    .rank-table-row span:nth-child(4),
    .rank-table-row b,
    .rank-table-row em,
    .rank-surface-row b,
    .rank-surface-row em,
    .rank-surface-row span:last-child {
        justify-self: start;
    }

    .rank-table-head {
        display: none;
    }

    .site-footer {
        grid-template-columns: 1fr;
    }

    .footer-columns {
        grid-template-columns: 1fr;
    }

    .legal-shell,
    .faq-shell {
        padding: 2.5rem 1rem 4rem;
    }
}

.demo-tooltip-host {
    outline: none;
    position: relative;
}

.demo-tooltip-host:focus-visible {
    box-shadow: 0 0 0 3px rgba(34, 90, 200, 0.22);
}

.demo-info-dot {
    align-items: center;
    background: #fff;
    border: 1px solid #cfd9e8;
    border-radius: 999px;
    color: var(--ink-muted);
    display: inline-flex;
    font-size: 0.68rem;
    font-style: normal;
    font-weight: 780;
    height: 1.05rem;
    justify-content: center;
    margin-left: 0.25rem;
    text-transform: none;
    vertical-align: middle;
    width: 1.05rem;
}

.demo-rich-tooltip {
    background: #101a33;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    box-shadow: 0 14px 34px rgba(13, 35, 78, 0.18);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 650;
    left: 50%;
    line-height: 1.45;
    max-width: min(280px, calc(100vw - 2rem));
    opacity: 0;
    padding: 0.75rem 0.85rem;
    pointer-events: none;
    position: absolute;
    text-align: left;
    top: 2.25rem;
    transform: translate(-50%, -0.4rem);
    transition: opacity 0.16s ease, transform 0.16s ease;
    visibility: hidden;
    width: max-content;
    z-index: 20;
}

.demo-rich-tooltip-wide {
    left: 12rem;
    max-width: 440px;
    top: 1rem;
    transform: translateY(-0.4rem);
}

.demo-tooltip-host:hover .demo-rich-tooltip,
.demo-tooltip-host:focus .demo-rich-tooltip,
.demo-tooltip-host:focus-within .demo-rich-tooltip {
    opacity: 1;
    transform: translate(-50%, 0);
    visibility: visible;
}

.demo-tooltip-host:hover .demo-rich-tooltip-wide,
.demo-tooltip-host:focus .demo-rich-tooltip-wide,
.demo-tooltip-host:focus-within .demo-rich-tooltip-wide {
    transform: translateY(0);
}

.demo-guided-workbench {
    margin: 0 auto;
    max-width: 1280px;
    padding: 1.25rem 2rem 4.5rem;
}

.demo-workbench-heading {
    align-items: end;
    border-top: 1px solid var(--line);
    display: grid;
    gap: 1.5rem;
    grid-template-columns: minmax(0, 0.72fr) minmax(300px, 0.55fr);
    padding-top: 2rem;
}

.demo-workbench-heading h2 {
    font-size: 2rem;
    margin-bottom: 0;
}

.demo-workbench-heading p:last-child {
    color: var(--ink-muted);
    font-size: 0.96rem;
    margin-bottom: 0.15rem;
}

.demo-tab-shell {
    display: grid;
    gap: 1rem;
    grid-template-columns: 260px minmax(0, 1fr);
    margin-top: 1.25rem;
}

.demo-tab-rail {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    display: grid;
    gap: 0.55rem;
    padding: 0.75rem;
    position: sticky;
    top: 5.5rem;
}

.demo-tab-button {
    background: #fff;
    border: 1px solid #e5ebf4;
    border-left: 3px solid transparent;
    border-radius: 8px;
    color: var(--ink);
    cursor: pointer;
    display: grid;
    gap: 0.28rem;
    align-content: start;
    height: 4.2rem;
    padding: 0.75rem;
    text-align: left;
    transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.demo-tab-button:has(.ranx-module-listen) {
    --module-color: var(--ranx-listen);
}

.demo-tab-button:has(.ranx-module-rank) {
    --module-color: var(--ranx-rank);
}

.demo-tab-button:has(.ranx-module-drivers) {
    --module-color: var(--ranx-drivers);
}

.demo-tab-button:has(.ranx-module-act) {
    --module-color: var(--ranx-act);
}

.demo-tab-button:has(.ranx-module-lift) {
    --module-color: var(--ranx-lift);
}

.demo-tab-button:hover,
.demo-tab-button.active {
    border-color: #d6e0ef;
    border-left-color: var(--module-color, var(--blue));
    box-shadow: none;
}

.demo-tab-button.active {
    background: #fff;
}

.demo-tab-button .demo-step-kicker {
    color: var(--ink);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: none;
}

.demo-tab-button .module-icon-shell {
    border-radius: 5px;
    height: 1.35rem;
    width: 1.35rem;
}

.demo-tab-button .module-icon-shell svg {
    height: 0.84rem;
    width: 0.84rem;
}

.demo-tab-button strong {
    color: var(--ink);
    font-size: 0.98rem;
    line-height: 1.3;
}

.demo-tab-panel {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: none;
    min-height: 520px;
    padding: 1.15rem;
}

.demo-panel-grid {
    display: grid;
    gap: 1rem;
}

.demo-panel-grid-listen {
    grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.85fr);
}

.demo-panel-grid-listen .panel-heading {
    align-self: start;
}

.demo-capability-grid {
    display: grid;
    gap: 0.8rem;
}

.demo-capability-grid article {
    background: #f7f9fc;
    border: 1px solid #e7edf5;
    border-radius: 8px;
    padding: 0.9rem;
}

.demo-capability-grid span {
    color: #526174;
    display: block;
    font-size: 0.78rem;
    font-weight: 680;
    margin-bottom: 0.45rem;
    text-transform: none;
}

.demo-capability-grid strong {
    display: block;
    line-height: 1.3;
    margin-bottom: 0.3rem;
}

.demo-capability-grid p {
    font-size: 0.9rem;
    line-height: 1.55;
    margin-bottom: 0;
}

.demo-panel-grid-listen .survey-response-card-large {
    grid-column: 1 / -1;
}

.demo-lift-receipts {
    margin-top: 1rem;
}

.demo-final-cta {
    align-items: center;
    background: #101a33;
    color: #fff;
    display: grid;
    gap: 2rem;
    grid-template-columns: minmax(0, 1fr) auto;
    margin: 0 auto 2rem;
    max-width: none;
    padding: 3.5rem max(2rem, calc((100vw - 1280px) / 2 + 2rem));
}

.demo-final-cta h2 {
    color: #fff;
    max-width: 740px;
}

.demo-final-cta p,
.demo-final-cta .eyebrow {
    color: rgba(255, 255, 255, 0.76);
}

.demo-final-cta p:last-child {
    margin-bottom: 0;
    max-width: 720px;
}

.demo-modal-backdrop {
    align-items: center;
    background: rgba(13, 35, 78, 0.58);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 1rem;
    position: fixed;
    z-index: 100;
}

.demo-modal {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 24px 70px rgba(13, 35, 78, 0.24);
    max-height: calc(100vh - 2rem);
    max-width: 980px;
    overflow: auto;
    width: 100%;
}

.demo-modal-header,
.demo-modal-footer {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 1rem 1.25rem;
}

.demo-modal-header {
    border-bottom: 1px solid var(--line);
}

.demo-modal-header h2 {
    font-size: 1.55rem;
    margin-bottom: 0;
}

.demo-modal-close {
    align-items: center;
    background: #f7f9fc;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    cursor: pointer;
    display: inline-flex;
    font-size: 1.35rem;
    font-weight: 760;
    height: 2.25rem;
    justify-content: center;
    width: 2.25rem;
}

.demo-modal-body {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    padding: 1.25rem;
}

.demo-modal-footer {
    border-top: 1px solid var(--line);
    justify-content: flex-end;
}

.demo-preview-frame {
    background: #f7f9fc;
    border: 1px solid #e7edf5;
    border-radius: 8px;
    padding: 1rem;
}

.demo-preview-frame > span {
    color: var(--ink-muted);
    display: block;
    font-size: 0.78rem;
    font-weight: 780;
    margin-bottom: 0.7rem;
    text-transform: none;
}

.demo-preview-frame h3 {
    font-size: 1.45rem;
    line-height: 1.16;
}

.demo-scale-row {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    display: grid;
    gap: 0.45rem;
    grid-template-columns: 1fr;
    margin-bottom: 1rem;
    padding: 0.8rem;
}

.demo-scale-row b {
    margin-bottom: 0.2rem;
}

.demo-scale-row span {
    background: #f7f9fc;
    border: 1px solid #e7edf5;
    border-radius: 6px;
    color: var(--ink-soft);
    font-size: 0.86rem;
    font-weight: 650;
    padding: 0.5rem;
}

@media (max-width: 980px) {
    .demo-workbench-heading,
    .demo-tab-shell,
    .demo-panel-grid-listen,
    .demo-final-cta,
    .demo-modal-body {
        grid-template-columns: 1fr;
    }

    .demo-tab-rail {
        grid-template-columns: repeat(5, minmax(130px, 1fr));
        overflow-x: auto;
        position: static;
    }

    .demo-tab-button {
        min-height: 5.4rem;
    }

    .demo-tab-panel {
        min-height: auto;
    }

    .demo-rich-tooltip,
    .demo-rich-tooltip-wide {
        left: 1rem;
        right: 1rem;
        top: 2.3rem;
        transform: translateY(-0.4rem);
        width: auto;
    }

    .demo-tooltip-host:hover .demo-rich-tooltip,
    .demo-tooltip-host:focus .demo-rich-tooltip,
    .demo-tooltip-host:focus-within .demo-rich-tooltip {
        transform: translateY(0);
    }
}

@media (max-width: 640px) {
    .demo-guided-workbench,
    .demo-final-cta {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .demo-tab-rail {
        grid-template-columns: 1fr;
        overflow-x: visible;
    }

    .demo-tab-panel,
    .demo-modal-body,
    .demo-modal-header,
    .demo-modal-footer {
        padding: 1rem;
    }
}

.demo-tab-shell {
    align-items: start;
}

.demo-tab-rail {
    align-content: start;
    align-self: start;
    grid-auto-rows: auto;
}

.demo-tab-button {
    align-content: start;
    height: 4.2rem;
    min-height: 0;
}

.demo-rank-pane {
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
}

.demo-rank-tabs {
    background: #f7f9fc;
    border-bottom: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.65rem;
}

.demo-rank-tabs button {
    background: #fff;
    border: 1px solid #e2e9f3;
    border-radius: 8px;
    color: var(--ink-soft);
    cursor: pointer;
    font-weight: 760;
    min-height: 2.55rem;
    padding: 0.55rem 0.9rem;
}

.demo-rank-tabs button:hover,
.demo-rank-tabs button.active {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
}

.demo-rank-pane-body {
    padding: 1rem;
}

.demo-rank-overview {
    align-items: start;
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.demo-rank-summary-column {
    align-self: start;
    display: grid;
    gap: 1rem;
}

.demo-rank-overview .demo-stack-panel {
    align-self: start;
    margin-bottom: 0;
}

.demo-rank-summary-column .demo-stack-row {
    gap: 0.7rem;
    grid-template-columns: 1fr;
}

.demo-rank-summary-column .demo-stacked-track {
    min-height: 2.2rem;
}

.demo-rank-summary-column .demo-score-track {
    max-width: 100%;
}

.demo-rank-answer-card {
    background: #101a33;
    border-radius: 8px;
    color: #fff;
    padding: 1rem;
}

.demo-rank-answer-card h3 {
    color: #fff;
    font-size: 1.35rem;
    line-height: 1.12;
}

.demo-rank-answer-card p,
.demo-rank-answer-card .panel-kicker {
    color: rgba(255, 255, 255, 0.76);
}

.demo-rank-answer-card dl {
    display: grid;
    gap: 0.55rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 1rem 0 0;
}

.demo-rank-answer-card div {
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    padding-top: 0.65rem;
}

.demo-rank-answer-card dt {
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.72rem;
    font-weight: 760;
}

.demo-rank-answer-card dd {
    color: #fff;
    font-size: 1.15rem;
    font-weight: 780;
    margin: 0.2rem 0 0;
}

.demo-evidence-card,
.demo-distribution-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 1rem;
}

.demo-distribution-card .panel-kicker {
    text-transform: none;
}

.demo-evidence-head {
    align-items: start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 0.85rem;
}

.demo-evidence-head h3 {
    font-size: 1.12rem;
    margin-bottom: 0;
}

.demo-evidence-head a {
    color: var(--blue);
    font-size: 0.82rem;
    font-weight: 760;
    white-space: nowrap;
}

.demo-evidence-plot {
    background:
        linear-gradient(90deg, transparent calc(50% - 1px), #d9e2ee calc(50% - 1px), #d9e2ee calc(50% + 1px), transparent calc(50% + 1px)),
        linear-gradient(0deg, transparent calc(50% - 1px), #d9e2ee calc(50% - 1px), #d9e2ee calc(50% + 1px), transparent calc(50% + 1px)),
        linear-gradient(90deg, rgba(34, 90, 200, 0.06), rgba(18, 168, 157, 0.08)),
        #f7f9fc;
    border: 1px solid #dfe6ef;
    border-radius: 8px;
    height: 250px;
    overflow: hidden;
    position: relative;
}

.plot-label {
    color: #8090a8;
    font-size: 0.7rem;
    font-weight: 780;
    position: absolute;
    text-transform: none;
}

.plot-monitor {
    left: 0.75rem;
    top: 0.75rem;
}

.plot-ready {
    right: 0.75rem;
    top: 0.75rem;
}

.plot-low {
    bottom: 0.75rem;
    left: 0.75rem;
}

.plot-proof {
    bottom: 0.75rem;
    right: 0.75rem;
}

.plot-point {
    align-items: center;
    border-radius: 999px;
    box-shadow: 0 6px 16px rgba(13, 35, 78, 0.18);
    color: #fff;
    display: inline-flex;
    font-size: 0.8rem;
    font-weight: 780;
    height: 2rem;
    justify-content: center;
    left: calc(var(--x) + var(--nudge-x, 0px));
    position: absolute;
    top: calc(100% - var(--y) + var(--nudge-y, 0px));
    transform: translate(-50%, -50%);
    width: 2rem;
}

.point-1::after {
    border: 0.9rem solid rgba(18, 168, 87, 0.14);
    border-radius: 999px;
    content: "";
    height: 2.6rem;
    inset: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    width: 2.6rem;
    z-index: -1;
}

.demo-evidence-list {
    display: grid;
    gap: 0.45rem;
    margin-top: 0.85rem;
}

.demo-evidence-list span {
    align-items: center;
    color: var(--ink-soft);
    display: grid;
    gap: 0.55rem;
    grid-template-columns: auto 1fr auto;
    line-height: 1.3;
}

.demo-evidence-list b {
    align-items: center;
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    font-size: 0.72rem;
    height: 1.5rem;
    justify-content: center;
    width: 1.5rem;
}

.demo-evidence-list em {
    background: #f7f9fc;
    border: 1px solid #e7edf5;
    border-radius: 999px;
    color: var(--ink-muted);
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 760;
    padding: 0.26rem 0.55rem;
    white-space: nowrap;
}

.demo-priority-list {
    display: grid;
    gap: 0.75rem;
}

.demo-priority-row {
    background: #f7f9fc;
    border: 1px solid #e5ebf4;
    border-radius: 8px;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: minmax(260px, 0.75fr) minmax(280px, 1fr) auto;
    padding: 0.9rem;
}

.demo-priority-row.active {
    background: #f0fbf6;
    border-color: rgba(24, 169, 87, 0.24);
}

.demo-priority-row div:first-child {
    display: grid;
    gap: 0.22rem;
    grid-template-columns: auto 1fr;
}

.demo-priority-row div:first-child span {
    align-items: center;
    background: var(--ink);
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    font-size: 0.75rem;
    font-weight: 780;
    height: 1.6rem;
    justify-content: center;
    width: 1.6rem;
}

.demo-priority-row div:first-child strong,
.demo-priority-row div:first-child em {
    grid-column: 2;
}

.demo-priority-row div:first-child em,
.demo-priority-row small {
    color: #8a98af;
    font-size: 0.8rem;
    font-style: normal;
    font-weight: 700;
}

.demo-priority-row > strong {
    align-self: center;
    color: var(--ink);
    font-size: 1.1rem;
}

.demo-priority-row small {
    grid-column: 2 / 4;
}

.demo-priority-bar {
    align-self: center;
    background: #fff;
    border: 1px solid #d6e0ee;
    border-radius: 999px;
    height: 1rem;
    overflow: hidden;
    position: relative;
}

.demo-priority-bar i {
    display: block;
    height: 100%;
}

.demo-priority-bar b {
    background: #fff;
    height: 1.45rem;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
}

.demo-details-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}

.demo-histogram {
    align-items: end;
    background: #f7f9fc;
    border: 1px solid #e5ebf4;
    border-radius: 8px;
    display: grid;
    gap: 0.45rem;
    grid-template-columns: repeat(11, minmax(0, 1fr));
    height: 180px;
    margin-top: 1rem;
    padding: 1rem 0.85rem 1.65rem;
}

.demo-histogram span {
    background: #4a70e8;
    border-radius: 4px 4px 0 0;
    height: var(--h);
    min-height: 0.25rem;
    position: relative;
}

.demo-histogram span:nth-child(-n+7) {
    background: #ef565c;
}

.demo-histogram span:nth-child(n+8):nth-child(-n+9) {
    background: #f8dc4b;
}

.demo-histogram span:nth-child(n+10) {
    background: #35c778;
}

.demo-histogram span::after {
    bottom: -1.3rem;
    color: #8190a8;
    content: attr(data-score);
    font-size: 0.68rem;
    font-weight: 760;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
}

.demo-boxplot-row {
    align-items: center;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: minmax(160px, 0.55fr) minmax(220px, 1fr) 2.6rem;
    margin-top: 1rem;
}

/* Box plots as the app's Details tab draws them: whiskers over the observed range, the middle 50% as a box in the
   rank's color, a median line and a mean dot, on 0-100 gridlines. */
.demo-boxplot-row > span {
    background: linear-gradient(90deg, transparent calc(25% - 0.5px), #e3e9f2 calc(25% - 0.5px), #e3e9f2 calc(25% + 0.5px), transparent calc(25% + 0.5px)),
        linear-gradient(90deg, transparent calc(50% - 0.5px), #e3e9f2 calc(50% - 0.5px), #e3e9f2 calc(50% + 0.5px), transparent calc(50% + 0.5px)),
        linear-gradient(90deg, transparent calc(75% - 0.5px), #e3e9f2 calc(75% - 0.5px), #e3e9f2 calc(75% + 0.5px), transparent calc(75% + 0.5px));
    display: block;
    height: 1.6rem;
    position: relative;
}

.demo-box-range {
    background: var(--box);
    height: 2px;
    left: var(--min);
    position: absolute;
    top: calc(50% - 1px);
    width: calc(var(--max) - var(--min));
}

.demo-box-range::before,
.demo-box-range::after {
    background: var(--box);
    content: "";
    height: 0.8rem;
    position: absolute;
    top: calc(50% - 0.4rem);
    width: 2px;
}

.demo-box-range::before {
    left: 0;
}

.demo-box-range::after {
    right: 0;
}

.demo-box-iqr {
    background: color-mix(in srgb, var(--box) 30%, #fff);
    border: 2px solid var(--box);
    border-radius: 0.25rem;
    height: 1.15rem;
    left: var(--q1);
    position: absolute;
    top: calc(50% - 0.575rem);
    width: calc(var(--q3) - var(--q1));
}

.demo-box-median {
    background: var(--ink);
    height: 1.4rem;
    left: var(--median);
    position: absolute;
    top: calc(50% - 0.7rem);
    transform: translateX(-50%);
    width: 2px;
}

.demo-box-mean {
    background: #fff;
    border: 2px solid var(--ink);
    border-radius: 50%;
    height: 0.6rem;
    left: var(--mean);
    position: absolute;
    top: calc(50% - 0.3rem);
    transform: translateX(-50%);
    width: 0.6rem;
}

/* The 0-100 scale under the last row, on the same columns. */
.demo-boxplot-axis {
    margin-top: 0.2rem;
}

.demo-boxplot-axis > span {
    background: none;
    height: 1rem;
}

.demo-boxplot-axis i {
    color: var(--ink-muted);
    font-size: 0.68rem;
    font-style: normal;
    font-weight: 700;
    position: absolute;
    transform: translateX(-50%);
}

.demo-boxplot-key {
    color: var(--ink-muted);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.74rem;
    font-weight: 700;
    gap: 0.4rem 1rem;
    margin: 0.9rem 0 0;
}

.demo-boxplot-key span {
    align-items: center;
    display: inline-flex;
    gap: 0.35rem;
}

.demo-boxplot-key i {
    display: inline-block;
    flex: none;
}

.demo-boxplot-key .key-range {
    border-left: 2px solid var(--ink-muted);
    border-right: 2px solid var(--ink-muted);
    height: 0.6rem;
    position: relative;
    width: 1.1rem;
}

.demo-boxplot-key .key-range::before {
    background: var(--ink-muted);
    content: "";
    height: 2px;
    left: 0;
    position: absolute;
    right: 0;
    top: calc(50% - 1px);
}

.demo-boxplot-key .key-iqr {
    background: #e9eef6;
    border: 2px solid var(--ink-muted);
    border-radius: 0.2rem;
    height: 0.7rem;
    width: 1.1rem;
}

.demo-boxplot-key .key-median {
    background: var(--ink);
    height: 0.8rem;
    width: 2px;
}

.demo-boxplot-key .key-mean {
    border: 2px solid var(--ink);
    border-radius: 50%;
    height: 0.6rem;
    width: 0.6rem;
}

.demo-boxplot-row em {
    color: var(--ink);
    font-style: normal;
    font-weight: 780;
    text-align: right;
}

.demo-org-map-wrap .panel-heading {
    margin-bottom: 0.9rem;
}

/* Org map: mirrors the app's org map (rings per group, continuous decline and lift paths). Nodes sit on a 964 x 712
   canvas in percentages; below 905px of canvas the same nodes stack as an indented tree. */
.demo-orgmap-paths {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 0.75rem;
}

.demo-orgmap-paths article {
    align-items: baseline;
    background: #fff;
    border: 1px solid var(--line);
    border-left: 4px solid var(--path-color);
    border-radius: 6px;
    display: grid;
    gap: 0.1rem 0.5rem;
    grid-template-columns: auto 1fr;
    padding: 0.6rem 0.8rem;
}

.demo-orgmap-paths .is-decline {
    --path-color: #e32931;
    --path-ink: #b6232a;
}

.demo-orgmap-paths .is-lift {
    --path-color: #18a957;
    --path-ink: #128546;
}

.demo-orgmap-paths small {
    color: var(--path-ink);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.demo-orgmap-paths b {
    color: var(--path-ink);
    font-size: 1.02rem;
}

.demo-orgmap-paths span {
    color: var(--ink-soft);
    font-size: 0.82rem;
    grid-column: 1 / -1;
}

.demo-orgmap-legend {
    color: var(--ink-muted);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.76rem;
    font-weight: 700;
    gap: 0.4rem 1.1rem;
    margin-bottom: 0.6rem;
}

.demo-orgmap-legend span {
    align-items: center;
    display: inline-flex;
    gap: 0.35rem;
}

.demo-orgmap-legend i {
    border: 3px solid var(--legend-color);
    border-radius: 50%;
    height: 0.75rem;
    width: 0.75rem;
}

.demo-orgmap-legend .is-met {
    --legend-color: #18a957;
}

.demo-orgmap-legend .is-building {
    --legend-color: #e4a11b;
}

.demo-orgmap-frame {
    background: #fbfcfe;
    border: 1px solid #e5ebf4;
    border-radius: 8px;
    container-type: inline-size;
    margin-bottom: 0.9rem;
    padding: 0.5rem;
}

.demo-orgmap {
    aspect-ratio: 964 / 712;
    position: relative;
}

.demo-orgmap svg {
    height: 100%;
    inset: 0;
    position: absolute;
    width: 100%;
}

.demo-orgmap path {
    fill: none;
    stroke: #c9d4e3;
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

.demo-orgmap path.is-decline {
    stroke: rgba(227, 41, 49, 0.72);
    stroke-width: 6;
}

.demo-orgmap path.is-lift {
    stroke: rgba(24, 169, 87, 0.7);
    stroke-width: 6;
}

.demo-orgmap path.is-more {
    stroke-dasharray: 5 6;
}

.demo-orgmap-node,
.demo-orgmap-more {
    left: var(--x);
    position: absolute;
    top: var(--y);
    width: var(--w);
    z-index: 1;
}

.demo-orgmap-node {
    background: #fff;
    border: 1px solid #dfe6f1;
    border-radius: 8px;
    box-shadow: 0 6px 16px rgba(13, 35, 78, 0.06);
    min-height: 118px;
    padding: 0.45rem 0.45rem 0.4rem;
}

.demo-orgmap-node.is-hidden {
    background: #f8fafc;
}

.demo-orgmap-top {
    align-items: center;
    display: flex;
    gap: 0.3rem;
    justify-content: space-between;
}

.demo-orgmap-top small {
    color: var(--ink-muted);
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}

.demo-orgmap-top em {
    border-radius: 999px;
    font-size: 0.58rem;
    font-style: normal;
    font-weight: 800;
    padding: 0.05rem 0.32rem;
    white-space: nowrap;
}

.demo-orgmap-top .is-attention {
    background: #fde8e8;
    color: #b6232a;
}

.demo-orgmap-top .is-response-gap {
    background: #fdf3dc;
    color: #9a6200;
}

.demo-orgmap-top .is-above {
    background: #e7f6ec;
    color: #128546;
}

.demo-orgmap-top .is-inline {
    background: #eef0f4;
    color: #475569;
}

.demo-orgmap-top .is-reference {
    background: #eef3fe;
    color: #1d4ed8;
}

.demo-orgmap-node > strong {
    display: block;
    font-size: 0.84rem;
    margin: 0.15rem 0 0.3rem;
}

.demo-orgmap-rings {
    display: flex;
    justify-content: space-between;
}

.demo-orgmap-rings span {
    align-items: center;
    color: var(--ink-muted);
    display: flex;
    flex-direction: column;
    font-size: 0.52rem;
    font-weight: 800;
    gap: 0.1rem;
    text-transform: uppercase;
}

.demo-orgmap-rings i {
    background: conic-gradient(var(--c) calc(var(--p) * 1%), #e8edf5 0);
    border-radius: 50%;
    display: grid;
    font-style: normal;
    height: 38px;
    place-items: center;
    position: relative;
    width: 38px;
}

.demo-orgmap-rings i::before {
    background: #fff;
    border-radius: 50%;
    content: "";
    inset: 5px;
    position: absolute;
}

.demo-orgmap-rings b {
    color: var(--ink);
    font-size: 0.62rem;
    font-weight: 800;
    position: relative;
    text-transform: none;
}

.demo-orgmap-foot {
    color: var(--ink-muted);
    display: flex;
    font-size: 0.6rem;
    justify-content: space-between;
    margin-top: 0.3rem;
}

.demo-orgmap-hidden {
    color: var(--ink-muted);
    font-size: 0.74rem;
    margin: 0.5rem 0 0;
}

.demo-orgmap-more {
    background: #fbfcfe;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    color: var(--ink-muted);
    font-size: 0.72rem;
    font-weight: 650;
    line-height: 1.4;
    margin: 0;
    padding: 0.55rem 0.6rem;
}

@container (max-width: 905px) {
    .demo-orgmap {
        aspect-ratio: auto;
        display: grid;
        gap: 0.5rem;
    }

    .demo-orgmap svg {
        display: none;
    }

    .demo-orgmap-node,
    .demo-orgmap-more {
        margin-left: calc(var(--depth) * 0.85rem);
        min-height: 0;
        position: static;
        width: auto;
    }

    .demo-orgmap-node.is-decline {
        border-left: 4px solid #e32931;
    }

    .demo-orgmap-node.is-lift {
        border-left: 4px solid #18a957;
    }

    .demo-orgmap-rings {
        gap: 1.4rem;
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {
    .demo-orgmap-paths {
        grid-template-columns: 1fr;
    }
}

.org-insight-strip {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid #e1e8f2;
    border-radius: 8px;
    display: grid;
    gap: 0.65rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 0.75rem;
    position: relative;
    z-index: 1;
}

.org-insight-strip span {
    align-items: center;
    color: var(--ink-soft);
    display: inline-flex;
    font-size: 0.84rem;
    font-weight: 700;
    gap: 0.45rem;
}

.org-insight-strip b {
    background: var(--blue);
    border-radius: 999px;
    display: inline-flex;
    height: 0.5rem;
    width: 0.5rem;
}

.org-insight-strip span:first-child b {
    background: #b6232a;
}

.org-insight-strip span:last-child b {
    background: #128546;
}

@media (max-width: 980px) {
    .demo-tab-button {
        height: auto;
        min-height: 5.4rem;
    }

    .demo-rank-overview,
    .demo-details-grid,
    .org-insight-strip {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .demo-rank-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .demo-priority-row,
    .demo-boxplot-row {
        grid-template-columns: 1fr;
    }

    .demo-priority-row small {
        grid-column: 1;
    }

    .demo-evidence-head {
        display: grid;
    }

    .demo-rank-answer-card dl {
        grid-template-columns: 1fr;
    }
}

/* Public enterprise alignment
   Keeps www.ranx.app visually anchored to the in-app product language. */

body {
    color: var(--ink);
}

h1 {
    font-size: clamp(2.25rem, 4vw, 3.2rem);
    line-height: 1.08;
    max-width: 780px;
}

h2 {
    font-size: clamp(1.55rem, 2.6vw, 2.1rem);
    line-height: 1.12;
}

h3 {
    line-height: 1.22;
}

p {
    line-height: 1.58;
}

.story-hero,
.clean-hero,
.listening-brand-hero,
.listening-hero,
.integrations-hero,
.decivium-hero,
.public-playbooks-hero,
.pricing-hero {
    align-items: center;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    margin: 0 auto;
    max-width: 1280px;
    min-height: auto;
    padding: clamp(2rem, 4vw, 3.25rem) clamp(1rem, 3vw, 2rem);
}

.story-hero h1,
.clean-hero h1,
.listening-brand-hero h1,
.listening-hero h1,
.integrations-hero h1,
    .decivium-hero h1,
    .public-playbooks-hero h1,
    .pricing-hero h1 {
        font-size: clamp(2.35rem, 4.45vw, 4rem);
        line-height: 1.08;
        max-width: 760px;
        overflow-wrap: normal;
    }

.story-hero p,
.clean-hero p,
.listening-brand-hero p,
.listening-hero p,
.integrations-hero p,
.decivium-hero p,
.public-playbooks-hero p,
.pricing-hero p,
.section-heading p {
    color: var(--ink-soft);
    font-size: 1rem;
    max-width: 680px;
}

.clean-section,
.home-programs-section,
.demo-proof-band,
.buyer-path-section,
.home-proof,
.listening-compare-band,
.listening-loop-section,
.listening-enterprise-band,
.category-cta-band,
.integration-source-section,
.integration-examples-section,
.integration-loop-section,
.integration-trust-band,
.public-playbook-workbench,
.demo-guided-workbench,
.demo-answer-strip,
.demo-story-band {
    padding-bottom: clamp(2.5rem, 5vw, 4rem);
    padding-top: clamp(2.5rem, 5vw, 4rem);
}

.listening-proof-panel,
.demo-cycle-card,
.integration-proof-card,
.demo-tab-panel,
.demo-rank-pane,
.demo-evidence-card,
.demo-distribution-card,
.public-playbook-card,
.audience-filter-card,
.integration-provider-card,
.module-card-grid article,
.loop-card,
.compare-grid article,
.enterprise-proof-grid article,
.integration-source-grid article,
.integration-loop-list article,
.demo-capability-grid article,
.home-program-grid a {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 6px 16px rgba(13, 35, 78, 0.045);
}

.module-card-grid article,
.loop-card,
.home-program-grid a,
.integration-loop-list article,
.demo-tab-button,
.os-flow .ranx-module-badge {
    border-top-color: var(--module-color, var(--line));
}

.module-card-grid article,
.loop-card,
.integration-loop-list article {
    border-top-width: 3px;
}

.ranx-module-badge,
.ranx-module-badge-label,
.module-card-kicker,
.panel-kicker,
.demo-step-kicker,
.module-label,
.os-answer > span,
.compare-grid article > span,
.demo-capability-grid span,
.integration-source-grid article > span,
.demo-kpi-card > span,
.demo-start-head > span {
    color: var(--ink);
    letter-spacing: 0;
}

.panel-kicker,
.module-card-kicker,
.demo-step-kicker,
.module-label,
.os-answer > span,
.compare-grid article > span,
.demo-capability-grid span,
.integration-source-grid article > span,
.demo-kpi-card > span,
.demo-start-head > span {
    font-size: 0.82rem;
    font-weight: 760;
}

.module-icon-shell,
.module-icon-tiny {
    background: color-mix(in srgb, var(--module-color, var(--blue)) 10%, #fff);
    border-color: color-mix(in srgb, var(--module-color, var(--blue)) 26%, #e5ebf4);
    border-radius: 6px;
    color: var(--module-color, var(--blue));
}

.os-flow {
    gap: 0.5rem;
}

.os-flow .ranx-module-badge {
    min-height: 2.6rem;
    padding: 0.45rem 0.65rem;
}

.os-answer {
    background: #f7f9fc;
}

.os-answer > span,
.demo-capability-grid span,
.integration-source-grid article > span,
.demo-kpi-card > span,
.demo-start-head > span {
    color: var(--ink-muted);
}

.trademark-note {
    margin: 0 auto;
    max-width: 1280px;
    padding: 0 clamp(1rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2rem);
}

.trademark-note p {
    color: var(--ink-muted);
    font-size: 0.84rem;
}

.demo-guided-workbench {
    max-width: 1280px;
    padding-left: clamp(1rem, 3vw, 2rem);
    padding-right: clamp(1rem, 3vw, 2rem);
}

.demo-workbench-heading {
    align-items: end;
    gap: 1rem;
    grid-template-columns: minmax(0, 0.8fr) minmax(280px, 0.5fr);
    padding-top: 1.75rem;
}

.demo-workbench-heading h2 {
    font-size: clamp(1.65rem, 2.7vw, 2.1rem);
}

.demo-tab-shell {
    align-items: start;
    gap: 0.9rem;
    grid-template-columns: 158px minmax(0, 1fr);
}

.demo-tab-rail {
    align-content: start;
    align-self: start;
    gap: 0.8rem;
    grid-auto-rows: 3.15rem;
    padding: 0.65rem;
}

/* Module name + icon only -- the summary line moved out, so the button is one row. */
.demo-tab-button {
    align-content: center;
    border-left: 0;
    border-top: 3px solid transparent;
    display: grid;
    gap: 0;
    height: 3.15rem;
    min-height: 0;
    padding: 0.65rem 0.6rem;
}

.demo-tab-button .demo-step-kicker {
    font-size: 18px;
}

.demo-tab-button .module-icon-shell {
    height: 1.6rem;
    width: 1.6rem;
}

.demo-tab-button .module-icon-shell svg {
    height: 1rem;
    width: 1rem;
}

.demo-tab-button:hover,
.demo-tab-button.active {
    background: #f7f9fc;
    border-color: #dbe5f2;
    border-top-color: var(--module-color, var(--blue));
}

.demo-tab-button strong {
    font-size: 0.9rem;
}

.demo-tab-panel {
    min-height: 480px;
    padding: 1rem;
}

.demo-rank-tabs {
    background: #f7f9fc;
    gap: 0.35rem;
    padding: 0.55rem;
}

.demo-rank-tabs button {
    border-radius: 8px;
    min-height: 2.35rem;
    padding: 0.48rem 0.75rem;
}

.demo-rank-tabs button:hover,
.demo-rank-tabs button.active {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
}

.demo-rank-pane-body {
    padding: 0.9rem;
}

.demo-rank-overview {
    gap: 0.85rem;
    grid-template-columns: minmax(0, 0.92fr) minmax(320px, 1fr);
}

.demo-evidence-plot {
    height: 230px;
}

.demo-priority-row {
    gap: 0.65rem;
    padding: 0.75rem;
}

.integration-provider-card {
    align-items: center;
    background: #fff;
    display: grid;
    gap: 0.65rem;
    grid-template-columns: auto 1fr;
    min-height: 4rem;
    padding: 0.75rem;
}

.integration-provider-card img {
    height: 2.1rem;
    width: 2.1rem;
}

.integration-provider-card span {
    color: var(--ink);
    font-weight: 760;
}

.integration-logo-cloud {
    gap: 0.65rem;
}

.pricing-hero {
    align-items: end;
    gap: 1.5rem;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.42fr);
    padding-bottom: 1rem;
    padding-top: clamp(1.5rem, 3vw, 2.4rem);
}

.pricing-hero h1 {
    font-size: clamp(2.05rem, 3vw, 3rem);
    letter-spacing: 0;
    margin-bottom: 0.8rem;
    max-width: 720px;
}

.pricing-hero p {
    color: var(--ink-soft);
    font-size: 1rem;
    max-width: 720px;
}

.pricing-controls {
    align-self: end;
    background: #f8fafc;
    border: 1px solid #dfe7f2;
    border-radius: var(--radius);
    display: grid;
    gap: 0.65rem;
    padding: 0.85rem;
}

.pricing-controls > span {
    color: var(--ink-muted);
    font-size: 0.78rem;
    font-weight: 720;
}

.pricing-controls p {
    color: var(--ink-muted);
    font-size: 0.82rem;
    line-height: 1.35;
    margin-bottom: 0;
}

.pricing-billing-toggle {
    background: #fff;
    border: 1px solid #dfe7f2;
    border-radius: var(--radius);
    display: grid;
    gap: 0.3rem;
    grid-template-columns: 1fr 1fr;
    padding: 0.3rem;
}

.pricing-billing-toggle button {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--ink-soft);
    cursor: pointer;
    display: grid;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 720;
    gap: 0.1rem;
    min-height: 2.7rem;
    padding: 0.45rem 0.55rem;
}

.pricing-billing-toggle button.active {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}

.pricing-billing-toggle small {
    color: inherit;
    font-size: 0.68rem;
    font-weight: 680;
    opacity: 0.74;
}

.pricing-pilot-banner {
    align-items: center;
    background: #fff;
    border: 1px solid #dfe7f2;
    border-left: 4px solid var(--blue);
    border-radius: var(--radius);
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(270px, 0.55fr) minmax(0, 1fr) auto;
    margin: 0 auto;
    max-width: 1280px;
    padding: 0.9rem 1rem;
    width: calc(100% - 2rem);
}

.pricing-pilot-banner span {
    color: var(--ink-muted);
    display: block;
    font-size: 0.78rem;
    font-weight: 720;
    margin-bottom: 0.2rem;
}

.pricing-pilot-banner strong {
    color: var(--ink);
    font-size: 1.05rem;
}

.pricing-pilot-banner p {
    color: var(--ink-soft);
    font-size: 0.92rem;
    line-height: 1.45;
    margin-bottom: 0;
}

.pricing-grid-wide {
    gap: 1rem;
    max-width: 1280px;
    padding-bottom: 1.2rem;
    padding-top: 1.1rem;
}

.pricing-grid-wide .pricing-card {
    border-color: #dfe7f2;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 1rem;
}

.pricing-grid-wide .highlighted-plan {
    border-color: rgba(37, 99, 235, 0.58);
    border-top: 4px solid var(--blue);
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.08);
}

.pricing-plan-topline {
    align-items: center;
    display: flex;
    gap: 0.6rem;
    justify-content: space-between;
    margin-bottom: 0.55rem;
}

.pricing-plan-badge {
    background: #edf4ff;
    border: 1px solid #cadcf7;
    border-radius: 999px;
    color: var(--blue-dark);
    font-size: 0.72rem;
    font-weight: 720;
    padding: 0.18rem 0.5rem;
}

.pricing-card h2 {
    font-size: 1.12rem;
    margin-bottom: 0.35rem;
}

.pricing-card .price {
    font-size: 2.04rem;
    margin-bottom: 0.3rem;
}

.pricing-card .price span {
    color: var(--ink-muted);
    font-size: 0.88rem;
    font-weight: 680;
}

.pricing-price-note {
    color: var(--ink-muted);
    font-size: 0.8rem;
    line-height: 1.3;
    margin-bottom: 0.8rem;
    min-height: 1.1rem;
}

.pricing-pilot-line {
    background: #f8fafc;
    border: 1px solid #e2e9f3;
    border-radius: var(--radius);
    display: grid;
    gap: 0.15rem;
    margin-bottom: 0.85rem;
    padding: 0.65rem;
}

.pricing-pilot-line span {
    color: var(--ink-muted);
    font-size: 0.72rem;
    font-weight: 720;
}

.pricing-pilot-line strong {
    color: var(--ink);
    font-size: 1rem;
}

.pricing-pilot-line em {
    color: var(--ink-muted);
    font-size: 0.8rem;
    font-style: normal;
    line-height: 1.35;
}

.pricing-plan-fit {
    color: var(--ink-soft);
    font-size: 0.88rem;
    line-height: 1.42;
    margin-bottom: 0.85rem;
    min-height: 3.75rem;
}

.pricing-grid-wide .pricing-card ul {
    gap: 0.5rem;
    margin: 0 0 1rem;
}

.pricing-card li {
    gap: 0.45rem;
}

.pricing-card li span:last-child {
    color: var(--ink-soft);
    font-size: 0.86rem;
    line-height: 1.35;
}

.pricing-card .primary-action,
.pricing-card .secondary-action {
    font-size: 0.9rem;
    margin-top: auto;
    min-height: 2.5rem;
    width: 100%;
}

.pricing-plan-metrics {
    background: #fff;
    border: 1px solid #e2e9f3;
    border-radius: var(--radius);
    display: grid;
    margin: 0 0 0.85rem;
    overflow: hidden;
}

.pricing-plan-metrics span {
    align-items: baseline;
    border-top: 1px solid #e2e9f3;
    color: var(--ink-muted);
    display: grid;
    font-size: 0.78rem;
    gap: 0.5rem;
    grid-template-columns: 3.7rem minmax(0, 1fr);
    line-height: 1.25;
    padding: 0.46rem 0.62rem;
}

.pricing-plan-metrics span:first-child {
    border-top: 0;
}

.pricing-plan-metrics strong {
    color: var(--ink);
    font-size: 0.96rem;
    font-weight: 780;
}

.pricing-feature-marker {
    align-items: center;
    border: 1px solid #b9c7da;
    border-radius: 999px;
    display: inline-flex;
    height: 0.82rem;
    justify-content: center;
    margin-top: 0.12rem;
    width: 0.82rem;
}

.pricing-feature-marker::after {
    border: solid var(--ink);
    border-width: 0 1.4px 1.4px 0;
    content: "";
    height: 0.34rem;
    margin-top: -0.08rem;
    transform: rotate(45deg);
    width: 0.17rem;
}

.pricing-price-from {
    color: var(--ink-soft);
    font-size: 0.95rem;
    font-style: normal;
    font-weight: 640;
    letter-spacing: 0.01em;
    margin-right: 0.28rem;
}

/* Plan picker: the plan cards choose the plan the builder below shows. */
.pricing-card button {
    font: inherit;
}

.pricing-plan-picker .pricing-card.is-selected {
    border-color: var(--blue);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.16), 0 10px 24px rgba(37, 99, 235, 0.08);
}

.pricing-plan-plus {
    color: var(--ink);
    font-size: 0.8rem;
    font-weight: 720;
    margin: 0 0 0.45rem;
}

/* Each card buys its plan, or hands it to the builder below. */
.pricing-card-actions {
    display: grid;
    gap: 0.35rem;
    margin-top: auto;
}

.pricing-card-actions .primary-action,
.pricing-card-actions .secondary-action {
    margin-top: 0;
}

.pricing-customize {
    border-radius: 6px;
    color: var(--blue);
    font-size: 0.86rem;
    font-weight: 720;
    padding: 0.45rem 0.25rem;
    text-align: center;
}

.pricing-customize:hover {
    background: #f4f7fb;
}

.pricing-customize[aria-current="true"] {
    color: var(--ink-muted);
}

/* The plan cards share one set of rows, so each section lines up across plans whatever its length: price, pilot,
   fit, limits, features, and actions. A card without a pilot line (Enterprise, or annual billing) lets its fit text
   take that row too, so the text stays under its price and the limits still line up. */
.pricing-plan-picker .pricing-card {
    display: grid;
    grid-row: span 10;
    grid-template-rows: subgrid;
    min-height: 0;
    row-gap: 0;
}

.pricing-plan-picker .pricing-plan-topline {
    grid-row: 1;
}

.pricing-plan-picker .pricing-card h2 {
    grid-row: 2;
}

.pricing-plan-picker .pricing-card .price {
    grid-row: 3;
}

.pricing-plan-picker .pricing-price-note {
    grid-row: 4;
}

.pricing-plan-picker .pricing-pilot-line {
    align-self: start;
    grid-row: 5;
}

.pricing-plan-picker .pricing-plan-fit {
    grid-row: 6;
    min-height: 0;
}

.pricing-plan-picker .pricing-card:not(:has(.pricing-pilot-line)) .pricing-plan-fit {
    grid-row: 5 / 7;
}

.pricing-plan-picker .pricing-plan-metrics {
    align-self: start;
    grid-row: 7;
}

.pricing-plan-picker .pricing-plan-plus {
    align-self: end;
    grid-row: 8;
}

.pricing-plan-picker .pricing-plan-list {
    align-self: start;
    grid-row: 9;
}

.pricing-plan-picker .pricing-card ul {
    align-content: start;
}

.pricing-plan-picker .pricing-card-actions {
    align-content: end;
    grid-row: 10;
    margin-top: 0;
}

/* The builder's own plan switch, so the plan changes where its effect shows. */
.pricing-plan-switch {
    background: #fff;
    border: 1px solid #dfe7f2;
    border-radius: var(--radius);
    display: inline-grid;
    gap: 0.3rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 0.85rem;
    max-width: 100%;
    padding: 0.3rem;
    width: 30rem;
}

.pricing-plan-switch button {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--ink-soft);
    cursor: pointer;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 720;
    min-height: 2.5rem;
    padding: 0.4rem 0.5rem;
}

.pricing-plan-switch button.active {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}

/* Build your plan: the capability map lights up what the plan and its add-ons include. */
.pricing-builder,
.pricing-terms,
.pricing-faq {
    margin: 0 auto;
    max-width: 1280px;
    padding: clamp(1.75rem, 4vw, 2.75rem) 0 0;
    width: calc(100% - 2rem);
}

.pricing-builder-head,
.pricing-section-head {
    margin-bottom: 1.1rem;
    max-width: 760px;
}

.pricing-builder-head h2,
.pricing-section-head h2 {
    font-size: clamp(1.45rem, 2.35vw, 1.9rem);
    margin-bottom: 0.45rem;
}

.pricing-builder-head p:last-child {
    color: var(--ink-soft);
    margin-bottom: 0;
}

.pricing-builder-layout {
    align-items: start;
    display: grid;
    gap: 1.25rem;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
}

.pricing-map {
    display: grid;
    gap: 0.85rem;
}

.pricing-map-module {
    background: #fff;
    border: 1px solid #dfe7f2;
    border-radius: var(--radius);
    overflow: hidden;
}

.pricing-map-title {
    align-items: center;
    background: #f8fafc;
    border-bottom: 1px solid #e2e9f3;
    display: flex;
    font-size: 0.9rem;
    margin: 0;
    padding: 0.6rem 0.85rem;
}

.pricing-map-label {
    color: var(--ink);
    font-size: 0.82rem;
    font-weight: 720;
}

.pricing-map ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pricing-map-listen { --module: var(--ranx-listen); }
.pricing-map-rank { --module: var(--ranx-rank); }
.pricing-map-drivers { --module: var(--ranx-drivers); }
.pricing-map-act { --module: var(--ranx-act); }
.pricing-map-lift { --module: var(--ranx-lift); }
.pricing-map-platform,
.pricing-map-capacity,
.pricing-map-usage { --module: var(--ink); }

.pricing-map-item {
    align-items: center;
    border-top: 1px solid #edf1f7;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 0.7rem 0.85rem;
    transition: background 0.18s ease;
}

.pricing-map-item:first-child {
    border-top: 0;
}

.pricing-capacity-item,
.pricing-usage-item {
    grid-template-columns: minmax(0, 1fr) auto;
}

.pricing-map-light {
    background: #fff;
    border: 2px solid #cbd5e1;
    border-radius: 999px;
    height: 0.85rem;
    transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    width: 0.85rem;
}

.pricing-map-item.is-on .pricing-map-light {
    background: var(--module);
    border-color: var(--module);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--module) 22%, transparent);
}

.pricing-map-text strong {
    color: var(--ink);
    display: block;
    font-size: 0.92rem;
    line-height: 1.3;
}

.pricing-map-text small {
    color: var(--ink-muted);
    display: block;
    font-size: 0.8rem;
    line-height: 1.35;
    margin-top: 0.12rem;
}

/* Under the employee stepper: the plan to move to, with a button that switches the build to it. */
.pricing-capacity-advice {
    color: var(--ink);
    font-size: 0.8rem;
    line-height: 1.4;
    margin: 0.35rem 0 0;
}

.pricing-capacity-advice button {
    background: none;
    border: 0;
    color: var(--blue);
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    padding: 0;
}

.pricing-capacity-advice button:hover {
    color: var(--blue-dark);
}

.pricing-map-item.is-off .pricing-map-text strong {
    color: var(--ink-muted);
    font-weight: 640;
}

.pricing-map-item.is-off .pricing-map-text small {
    color: #8a94a6;
}

.pricing-map-action {
    justify-self: end;
}

.pricing-map-state {
    color: var(--ink-muted);
    font-size: 0.78rem;
    font-weight: 720;
}

.pricing-map-upgrade {
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink-soft);
    cursor: pointer;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 720;
    padding: 0.3rem 0.7rem;
    white-space: nowrap;
}

.pricing-map-upgrade:hover {
    border-color: var(--blue);
    color: var(--blue);
}

.pricing-map-note {
    color: var(--ink-soft);
    font-size: 0.88rem;
    margin: 0;
    padding: 0.75rem 0.85rem;
}

.pricing-switch {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--ink-soft);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    gap: 0.55rem;
    padding: 0.2rem 0;
    text-align: left;
}

.pricing-switch-track {
    background: #cbd5e1;
    border-radius: 999px;
    flex: none;
    height: 1.25rem;
    position: relative;
    transition: background 0.18s ease;
    width: 2.2rem;
}

.pricing-switch-track span {
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(13, 35, 78, 0.25);
    height: 0.95rem;
    left: 0.15rem;
    position: absolute;
    top: 0.15rem;
    transition: transform 0.18s ease;
    width: 0.95rem;
}

.pricing-switch.is-on .pricing-switch-track {
    background: var(--module, var(--blue));
}

.pricing-switch.is-on .pricing-switch-track span {
    transform: translateX(0.95rem);
}

.pricing-switch:focus-visible {
    border-radius: 6px;
    outline: 2px solid var(--blue);
    outline-offset: 3px;
}

.pricing-switch-text {
    font-size: 0.8rem;
    font-weight: 720;
    line-height: 1.25;
}

.pricing-switch-text em {
    color: var(--ink-muted);
    display: block;
    font-style: normal;
    font-weight: 640;
}

.pricing-stepper {
    align-items: center;
    border: 1px solid #dfe7f2;
    border-radius: var(--radius);
    display: inline-grid;
    grid-template-columns: 2.25rem 2.25rem 2.25rem;
    overflow: hidden;
}

.pricing-stepper button {
    background: #f8fafc;
    border: 0;
    color: var(--ink);
    cursor: pointer;
    font: inherit;
    font-size: 1.05rem;
    font-weight: 720;
    height: 2.25rem;
}

.pricing-stepper button:disabled {
    color: #b6c0cf;
    cursor: default;
}

.pricing-stepper output {
    color: var(--ink);
    font-weight: 720;
    text-align: center;
}

.pricing-usage-input {
    display: grid;
    gap: 0.2rem;
    justify-items: end;
}

.pricing-usage-input span {
    color: var(--ink-muted);
    font-size: 0.72rem;
    font-weight: 720;
}

.pricing-usage-input input {
    border: 1px solid #dfe7f2;
    border-radius: var(--radius);
    color: var(--ink);
    font: inherit;
    font-size: 0.92rem;
    padding: 0.4rem 0.55rem;
    text-align: right;
    width: 7.5rem;
}

/* The total: sticky beside the map on wide screens, a compact bar pinned to the bottom on phones. */
.pricing-summary {
    background: #fff;
    border: 1px solid rgba(37, 99, 235, 0.45);
    border-radius: var(--radius);
    border-top: 4px solid var(--blue);
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.08);
    display: grid;
    gap: 0.7rem;
    padding: 1rem;
    position: sticky;
    top: 5.5rem;
}

.pricing-summary p {
    margin: 0;
}

.pricing-summary .pricing-summary-cadence {
    grid-template-columns: 1fr 1fr;
}

.pricing-summary-cadence button {
    font-size: 0.86rem;
    min-height: 2.35rem;
    padding: 0.35rem 0.5rem;
}

.pricing-summary-cadence small {
    font-size: 0.64rem;
}

.pricing-summary-label {
    color: var(--ink-muted);
    font-size: 0.78rem;
    font-weight: 720;
}

.pricing-summary-total {
    color: var(--ink);
    font-size: 2.1rem;
    font-weight: 780;
    line-height: 1.1;
}

.pricing-summary-total span {
    color: var(--ink-muted);
    font-size: 0.9rem;
    font-weight: 680;
}

.pricing-summary-total em {
    color: var(--ink-soft);
    font-size: 0.95rem;
    font-style: normal;
    font-weight: 640;
    margin-right: 0.28rem;
}

.pricing-summary-pilot-short {
    display: none;
}

.pricing-summary-after {
    background: #f8fafc;
    border: 1px solid #e2e9f3;
    border-radius: var(--radius);
    color: var(--ink-soft);
    font-size: 0.8rem;
    line-height: 1.45;
    padding: 0.55rem 0.65rem;
}

.pricing-summary-note,
.pricing-summary-tax,
.pricing-summary-usage {
    color: var(--ink-muted);
    font-size: 0.82rem;
    line-height: 1.4;
}

.pricing-summary-lines {
    border-top: 1px solid #e2e9f3;
    display: grid;
    gap: 0.4rem;
    list-style: none;
    margin: 0;
    padding: 0.7rem 0 0;
}

.pricing-summary-lines li {
    display: flex;
    font-size: 0.86rem;
    gap: 0.75rem;
    justify-content: space-between;
}

.pricing-summary-lines span {
    color: var(--ink-soft);
}

.pricing-summary-lines strong {
    color: var(--ink);
    white-space: nowrap;
}

.pricing-summary-pilot {
    margin: 0;
}

.pricing-summary .primary-action {
    width: 100%;
}

.pricing-summary-secondary {
    font-size: 0.86rem;
    justify-self: center;
}

/* What counts, and the pricing questions. */
.pricing-terms-grid {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin: 0;
}

.pricing-terms-grid div {
    background: #fff;
    border: 1px solid #dfe7f2;
    border-radius: var(--radius);
    padding: 0.85rem 0.95rem;
}

.pricing-terms-grid dt {
    color: var(--ink);
    font-size: 0.92rem;
    font-weight: 720;
    margin-bottom: 0.3rem;
}

.pricing-terms-grid dd {
    color: var(--ink-soft);
    font-size: 0.86rem;
    line-height: 1.45;
    margin: 0;
}

.pricing-faq {
    padding-bottom: clamp(2.25rem, 4vw, 3rem);
}

/* Under a plan card's list: how a plan without Act and Lift gets them. */
.pricing-plan-loop {
    border-top: 1px dashed #dfe7f2;
    color: var(--ink-soft);
    font-size: 0.84rem;
    line-height: 1.42;
    margin: 0.75rem 0 0;
    padding-top: 0.65rem;
}

/* The 1,000-person sizing example: one row per step up, need, plan, price. */
.pricing-example {
    margin: 0 auto;
    max-width: 1280px;
    padding: clamp(1.75rem, 4vw, 2.75rem) 0 0;
    width: calc(100% - 2rem);
}

.pricing-example-rows {
    border: 1px solid #dfe7f2;
    border-radius: var(--radius);
    list-style: none;
    margin: 0;
    max-width: 960px;
    overflow: hidden;
    padding: 0;
}

.pricing-example-rows li {
    align-items: baseline;
    background: #fff;
    display: grid;
    gap: 0.35rem 1.25rem;
    grid-template-columns: minmax(0, 1fr) minmax(0, 15rem) 11rem;
    padding: 0.8rem 1rem;
}

.pricing-example-rows li + li {
    border-top: 1px solid #dfe7f2;
}

.pricing-example-rows span {
    color: var(--ink-soft);
}

.pricing-example-rows b {
    text-align: right;
}

.pricing-example-more {
    color: var(--ink-soft);
    margin: 0.8rem 0 0;
}

@media (max-width: 760px) {
    .pricing-example-rows li {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .pricing-example-rows span {
        grid-column: 1 / -1;
    }
}

.pricing-faq-list {
    background: #fff;
    border: 1px solid #dfe7f2;
    border-radius: var(--radius);
    max-width: 860px;
}

.pricing-faq-list details {
    border-top: 1px solid #e2e9f3;
}

.pricing-faq-list details:first-child {
    border-top: 0;
}

.pricing-faq-list summary {
    color: var(--ink);
    cursor: pointer;
    font-weight: 700;
    padding: 0.85rem 1rem;
}

.pricing-faq-list details p {
    color: var(--ink-soft);
    font-size: 0.92rem;
    line-height: 1.5;
    margin: 0;
    padding: 0 1rem 0.95rem;
}

@media (max-width: 980px) {
    /* Block, not grid: a sticky grid item can only move inside its own row. */
    .pricing-builder-layout {
        display: block;
    }

    .pricing-map {
        margin-bottom: 0.85rem;
    }

    /* On narrower screens the total rides along the bottom while the map is in view. */
    .pricing-summary {
        border-top-width: 1px;
        bottom: 0;
        box-shadow: 0 -8px 24px rgba(13, 35, 78, 0.12);
        gap: 0.5rem;
        grid-template-columns: minmax(0, 1fr) auto;
        padding: 0.7rem 0.85rem calc(0.7rem + env(safe-area-inset-bottom));
        top: auto;
        z-index: 5;
    }

    .pricing-summary-top {
        min-width: 0;
    }

    /* The billing switch keeps a short row of its own across the bar. */
    .pricing-summary .pricing-summary-cadence {
        grid-column: 1 / -1;
        padding: 0.2rem;
    }

    .pricing-summary-cadence button {
        align-items: baseline;
        display: flex;
        gap: 0.35rem;
        justify-content: center;
        min-height: 2rem;
        padding: 0.25rem 0.4rem;
    }

    .pricing-summary-total {
        font-size: 1.45rem;
    }

    .pricing-summary-prefix {
        display: none;
    }

    .pricing-summary-pilot-short {
        color: var(--ink-soft);
        display: block;
        font-size: 0.78rem;
    }

    .pricing-summary-note,
    .pricing-summary-lines,
    .pricing-summary-pilot,
    .pricing-summary-usage,
    .pricing-summary-after,
    .pricing-summary-tax,
    .pricing-summary-secondary {
        display: none;
    }

    .pricing-summary .primary-action {
        align-self: center;
        font-size: 0.88rem;
        padding: 0.6rem 0.85rem;
        width: auto;
    }
}

@media (max-width: 720px) {
    /* Plans scroll sideways on a phone so all four fit in about one screen. Ten explicit rows keep each card in
       its own column (and its sections lined up with its neighbours') as the cards flow sideways. */
    .pricing-plan-picker.pricing-grid-wide {
        display: grid;
        grid-auto-columns: 84%;
        grid-auto-flow: column;
        grid-template-columns: none;
        grid-template-rows: repeat(10, auto);
        overflow-x: auto;
        overscroll-behavior-x: contain;
        padding-bottom: 0.75rem;
        scroll-padding-inline: 1rem;
        scroll-snap-type: x mandatory;
    }

    .pricing-plan-picker .pricing-card {
        scroll-snap-align: start;
    }

    .pricing-map-item {
        gap: 0.6rem;
        padding: 0.6rem 0.75rem;
    }

    /* Add-on switches drop under the name; "Included" and plan hints stay on the same line. */
    .pricing-map-item:has(.pricing-switch) .pricing-map-action {
        grid-column: 2 / -1;
        justify-self: start;
    }

    .pricing-map-module:not(.pricing-map-capacity):not(.pricing-map-usage) .pricing-map-text small {
        display: none;
    }

    .pricing-capacity-item,
    .pricing-usage-item {
        grid-template-columns: minmax(0, 1fr);
    }

    .pricing-capacity-item .pricing-stepper,
    .pricing-usage-input {
        justify-self: start;
        justify-items: start;
    }

    .pricing-usage-input input {
        text-align: left;
    }
}

.pricing-addons-table-wrap {
    background: #fff;
    border: 1px solid #dfe7f2;
    border-radius: var(--radius);
    overflow-x: auto;
}

.listening-enterprise-band {
    background: #101a33;
}

.listening-enterprise-band h2,
.listening-enterprise-band strong {
    color: #fff;
}

.listening-enterprise-band p,
.listening-enterprise-band span,
.listening-enterprise-band .eyebrow {
    color: rgba(255, 255, 255, 0.76);
}

.listening-enterprise-band article {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.14);
}

@media (max-width: 980px) {
    .story-hero,
    .clean-hero,
    .listening-brand-hero,
    .listening-hero,
    .integrations-hero,
    .decivium-hero,
    .public-playbooks-hero,
    .pricing-hero,
    .category-cta-band,
    .listening-enterprise-band,
    .integration-loop-section,
    .integration-trust-band {
        grid-template-columns: 1fr;
    }

    .demo-workbench-heading,
    .demo-tab-shell,
    .demo-rank-overview,
    .demo-panel-grid-listen {
        grid-template-columns: 1fr;
    }

    .pricing-grid-wide {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pricing-controls {
        max-width: 440px;
    }

    .pricing-pilot-banner {
        grid-template-columns: 1fr;
    }

    .demo-tab-rail {
        grid-auto-rows: 3.75rem;
        grid-template-columns: repeat(5, minmax(130px, 1fr));
        overflow-x: auto;
        position: static;
    }

    .demo-tab-button {
        height: 3.75rem;
        min-height: 0;
    }

    .demo-tab-panel {
        min-height: auto;
    }
}

@media (max-width: 640px) {
    h1,
    .story-hero h1,
    .clean-hero h1,
    .listening-brand-hero h1,
    .listening-hero h1,
    .integrations-hero h1,
    .decivium-hero h1,
    .public-playbooks-hero h1,
    .pricing-hero h1 {
        font-size: 2.2rem;
        line-height: 1.1;
    }

    .demo-tab-rail {
        grid-auto-rows: auto;
        grid-template-columns: 1fr;
        overflow-x: visible;
    }

    .demo-tab-button {
        height: auto;
        min-height: 3.75rem;
    }

    .pricing-grid-wide {
        grid-template-columns: 1fr;
    }

    .pricing-controls {
        max-width: none;
    }

    .pricing-billing-toggle {
        grid-template-columns: 1fr;
    }

    .pricing-plan-fit {
        min-height: 0;
    }
}

/* ------------------------------------------------------------------
   Front door: start page, partner pages, and lead forms (HubSpot)
   ------------------------------------------------------------------ */
.lead-hero {
    min-height: 0;
    padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.referral-chip {
    background: var(--paper-soft);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink-soft);
    display: inline-flex;
    font-size: 0.92rem;
    gap: 0.35rem;
    margin-top: 0.5rem;
    padding: 0.35rem 0.85rem;
}

.lead-layout {
    align-items: start;
    display: grid;
    gap: clamp(2rem, 5vw, 4rem);
    grid-template-columns: minmax(0, 0.8fr) minmax(360px, 1fr);
    margin: 0 auto clamp(3rem, 6vw, 5rem);
    max-width: var(--max);
    padding: 0 clamp(1rem, 3vw, 2rem);
}

.lead-layout-wide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 0;
    padding: 0;
}

.lead-copy h2 {
    font-size: 1.45rem;
    margin-bottom: 1rem;
}

.lead-steps {
    counter-reset: lead-step;
    display: grid;
    gap: 0.8rem;
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
}

.lead-steps li {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    counter-increment: lead-step;
    display: grid;
    gap: 0.2rem 0.8rem;
    grid-template-columns: auto 1fr;
    padding: 0.95rem 1rem;
}

.lead-steps li::before {
    align-items: center;
    background: var(--blue);
    border-radius: 999px;
    color: #fff;
    content: counter(lead-step);
    display: inline-flex;
    font-size: 0.82rem;
    font-weight: 760;
    grid-row: 1 / span 2;
    height: 1.6rem;
    justify-content: center;
    width: 1.6rem;
}

.lead-steps strong,
.lead-steps span {
    grid-column: 2;
}

.lead-steps span {
    color: var(--ink-muted);
    font-size: 0.94rem;
}

.lead-aside {
    color: var(--ink-muted);
    font-size: 0.95rem;
}

.partner-loop {
    color: var(--ink-soft);
    display: grid;
    gap: 0.6rem;
    margin: 0;
    padding-left: 1.1rem;
}

.lead-form {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    display: grid;
    gap: 1rem;
    padding: clamp(1.15rem, 3vw, 1.6rem);
}

.lead-result h2 {
    font-size: 1.4rem;
    margin-bottom: 0.25rem;
}

.lead-result p {
    color: var(--ink-soft);
    margin-bottom: 0.25rem;
}

.form-row {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-field {
    border: 0;
    display: grid;
    gap: 0.35rem;
    margin: 0;
    min-width: 0;
    padding: 0;
}

.form-field label,
.form-field legend,
.form-section-label {
    color: var(--ink);
    font-size: 0.92rem;
    font-weight: 700;
    padding: 0;
}

.form-section-label {
    border-bottom: 1px solid var(--line);
    color: var(--ink-muted);
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    margin: 0.25rem 0 -0.25rem;
    padding-bottom: 0.35rem;
    text-transform: uppercase;
}

.form-field .optional {
    color: var(--ink-muted);
    font-size: 0.82rem;
    font-weight: 500;
    margin-left: 0.35rem;
}

.form-field input:not([type="radio"]):not([type="checkbox"]),
.form-field select,
.form-field textarea {
    background: #fff;
    border: 1px solid #cdd6e4;
    border-radius: var(--radius);
    color: var(--ink);
    font: inherit;
    min-height: 2.75rem;
    padding: 0.6rem 0.75rem;
    width: 100%;
}

.form-field textarea {
    min-height: 6.5rem;
    resize: vertical;
}

.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
    border-color: var(--blue);
    outline: 3px solid rgba(37, 99, 235, 0.22);
    outline-offset: 0;
}

.form-field input.invalid,
.form-field select.invalid,
.form-field textarea.invalid {
    border-color: #b42318;
}

.form-field .validation-message {
    color: #b42318;
    font-size: 0.86rem;
}

.choice-list {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.15rem;
}

/* Scoped under .choice-list so the generic ".form-field label" rule (padding: 0) can't flatten it. */
.choice-list .choice {
    align-items: center;
    background: var(--paper-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--ink-soft);
    cursor: pointer;
    display: flex;
    font-weight: 600;
    gap: 0.7rem;
    min-height: 2.9rem;
    padding: 0.6rem 0.95rem;
}

.choice:has(input:checked) {
    background: #eef4ff;
    border-color: var(--blue);
    color: var(--ink);
}

.choice input {
    accent-color: var(--blue);
    flex: none;
    height: 1.05rem;
    margin: 0;
    width: 1.05rem;
}

/* Submit button while a lead form posts (set by js/lead-forms.js). */
.primary-action[aria-busy="true"] {
    cursor: progress;
    opacity: 0.85;
}

.primary-action[aria-busy="true"]::before {
    animation: lead-submit-spin 0.8s linear infinite;
    border: 2px solid currentColor;
    border-radius: 50%;
    border-right-color: transparent;
    content: "";
    flex: none;
    height: 0.95em;
    margin-right: 0.55rem;
    width: 0.95em;
}

@keyframes lead-submit-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .primary-action[aria-busy="true"]::before {
        animation: none;
    }
}

.form-alert {
    background: #fef3f2;
    border: 1px solid #fecdca;
    border-radius: var(--radius);
    color: #b42318;
    margin: 0;
    padding: 0.75rem 0.9rem;
}

.form-legal {
    color: var(--ink-muted);
    font-size: 0.84rem;
    margin: 0;
}

.lead-form .primary-action-large {
    justify-self: start;
}

/* Spam trap: present for bots, invisible and unreachable for people. */
.hp-field {
    height: 1px;
    left: -10000px;
    overflow: hidden;
    position: absolute;
    top: auto;
    width: 1px;
}

@media (max-width: 980px) {
    .lead-layout,
    .lead-layout-wide {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .form-row {
        grid-template-columns: 1fr;
    }

    .lead-form .primary-action-large {
        justify-self: stretch;
    }
}

/*
 * Playbook library: cards, the drawer (/playbooks/{audience}/{slug}) and the respondent walk overlay
 * (/playbooks/{audience}/{slug}/take). Content comes from the published catalog in the Ranx app.
 */
body:has(.playbook-drawer-layer),
body:has(.playbook-walk-overlay) {
    overflow: hidden;
}

.playbook-library-note {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--ink-soft);
    font-size: 0.94rem;
    line-height: 1.5;
    margin: 0 0 1rem;
    padding: 0.75rem 1rem;
}

.playbook-public-note {
    border-left: 3px solid #f6c700;
}

a.audience-filter-card {
    align-content: start;
}

a.objective-chip {
    align-items: center;
    display: inline-flex;
}

.playbook-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}

.playbook-card {
    gap: 0.75rem;
    min-height: 0;
    position: relative;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.playbook-card:hover {
    border-color: color-mix(in srgb, var(--blue) 40%, var(--line));
}

.playbook-card-badges {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: flex-end;
}

.playbook-badge {
    background: #f7f9fc;
    border: 1px solid #e7edf5;
    border-radius: 999px;
    color: var(--ink-soft);
    display: inline-flex;
    font-size: 0.76rem;
    font-weight: 720;
    line-height: 1.2;
    padding: 0.28rem 0.6rem;
}

.playbook-badge-public {
    background: rgba(37, 99, 235, 0.07);
    border-color: rgba(37, 99, 235, 0.22);
    color: var(--blue-dark);
}

.playbook-badge-muted {
    background: #fff;
    color: var(--ink-muted);
    font-weight: 640;
}

.playbook-card-title {
    font-size: 1.2rem;
    line-height: 1.25;
    margin: 0;
}

/* The title link covers the card; the walk link sits above it. */
.playbook-card-title a::after {
    content: "";
    inset: 0;
    position: absolute;
}

.playbook-card-title a:focus-visible {
    outline: none;
}

.playbook-card:has(.playbook-card-title a:focus-visible) {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

.playbook-card > p {
    color: var(--ink-soft);
    font-size: 0.94rem;
    line-height: 1.5;
    margin: 0;
}

.public-playbook-tags .playbook-tag-ranking {
    background: rgba(37, 99, 235, 0.07);
    border-color: rgba(37, 99, 235, 0.22);
    color: var(--blue-dark);
}

.playbook-card-actions {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 0.25rem;
}

.playbook-card-cadence {
    color: var(--ink-muted);
    font-size: 0.82rem;
    font-weight: 640;
}

.playbook-card-take {
    color: var(--blue);
    flex: none;
    font-weight: 760;
    position: relative;
    z-index: 1;
}

.playbook-card-take::after {
    content: " \2192";
}

.playbook-card-take:hover {
    color: var(--blue-dark);
}

.playbook-card-blank {
    background: #fbfcfe;
    border-style: dashed;
}

/* Drawer */
.playbook-drawer-layer {
    inset: 0;
    position: fixed;
    z-index: 200;
}

.playbook-drawer-backdrop {
    background: rgba(13, 35, 78, 0.38);
    inset: 0;
    position: absolute;
}

.playbook-drawer {
    background: #fff;
    box-shadow: -18px 0 48px rgba(13, 35, 78, 0.16);
    display: flex;
    flex-direction: column;
    height: 100dvh;
    max-width: 100vw;
    position: absolute;
    right: 0;
    top: 0;
    width: min(580px, 100vw);
}

.playbook-drawer-header {
    border-bottom: 1px solid var(--line);
    padding: 1.25rem 3.5rem 1rem 1.5rem;
    position: relative;
}

.playbook-drawer-badges {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.playbook-drawer-header h2 {
    font-size: 1.6rem;
    margin-bottom: 0.35rem;
}

.playbook-drawer-header h2:focus {
    outline: none;
}

.playbook-drawer-header p {
    color: var(--ink-soft);
    margin: 0;
}

.playbook-drawer-close {
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink-soft);
    display: inline-flex;
    font-size: 1.35rem;
    height: 2.25rem;
    justify-content: center;
    line-height: 1;
    position: absolute;
    right: 1rem;
    top: 1rem;
    width: 2.25rem;
}

.playbook-drawer-close:hover {
    border-color: var(--blue);
    color: var(--blue);
}

.playbook-drawer-body {
    display: grid;
    flex: 1;
    gap: 1.25rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1.25rem 1.5rem 1.5rem;
}

.playbook-drawer-take {
    background: #f7f9fc;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    display: grid;
    gap: 0.75rem;
    justify-items: start;
    padding: 1rem;
}

.playbook-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.playbook-facts li {
    background: #fff;
    border: 1px solid #e7edf5;
    border-radius: 8px;
    color: var(--ink-soft);
    font-size: 0.82rem;
    font-weight: 720;
    padding: 0.32rem 0.58rem;
}

.playbook-ranking-line {
    border-left: 3px solid var(--blue);
    color: var(--ink);
    font-size: 0.94rem;
    font-weight: 620;
    line-height: 1.45;
    margin: 0;
    padding-left: 0.65rem;
}

.playbook-take-note {
    color: var(--ink-muted);
    font-size: 0.82rem;
    margin: 0;
}

.playbook-drawer-section h3,
.playbook-fit h3,
.playbook-why h3 {
    color: var(--ink-muted);
    font-size: 0.78rem;
    font-weight: 760;
    letter-spacing: 0.04em;
    margin-bottom: 0.45rem;
    text-transform: uppercase;
}

.playbook-drawer-section p,
.playbook-fit p,
.playbook-why p {
    color: var(--ink-soft);
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0;
}

.playbook-fit-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.playbook-fit {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0.85rem;
}

.playbook-fit-best {
    border-top: 3px solid var(--green);
}

.playbook-needs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.playbook-steps {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding-left: 1.2rem;
}

.playbook-steps li {
    color: var(--ink-soft);
    font-size: 0.92rem;
}

.playbook-steps li strong {
    color: var(--ink);
    margin-right: 0.35rem;
}

.playbook-step-trigger {
    color: var(--ink-muted);
    display: block;
    font-size: 0.84rem;
}

.playbook-outline {
    display: grid;
    gap: 0.6rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.playbook-outline-section {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0.75rem 0.85rem;
}

.playbook-outline-section[data-kind="recommendation"],
.playbook-outline-section[data-kind="open-text"] {
    background: #fbfcfe;
}

.playbook-outline-head {
    align-items: baseline;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    margin-bottom: 0.4rem;
}

.playbook-outline-head strong {
    font-size: 0.95rem;
}

.playbook-outline-head span {
    color: var(--ink-muted);
    flex: none;
    font-size: 0.78rem;
    font-weight: 720;
}

.playbook-outline-section ul {
    color: var(--ink-soft);
    display: grid;
    font-size: 0.88rem;
    gap: 0.3rem;
    line-height: 1.45;
    margin: 0;
    padding-left: 1.1rem;
}

.playbook-outline-lede {
    margin-bottom: 0.5rem;
}

.playbook-option-list {
    color: var(--ink-soft);
    columns: 2;
    font-size: 0.9rem;
    gap: 1.5rem;
    margin: 0;
    padding-left: 1.3rem;
}

.playbook-option-list li {
    break-inside: avoid;
    margin-bottom: 0.3rem;
}

.playbook-why {
    background: var(--paper-warm);
    border: 1px solid #f0ddbf;
    border-radius: var(--radius);
    padding: 0.85rem 1rem;
}

.playbook-drawer-footer {
    align-items: center;
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: space-between;
    padding: 0.85rem 1.5rem;
}

.playbook-drawer-steppers {
    display: flex;
    gap: 1rem;
}

.playbook-drawer-steppers a {
    color: var(--ink-soft);
    font-size: 0.88rem;
    font-weight: 700;
}

.playbook-drawer-steppers a:hover {
    color: var(--blue);
}

.playbook-drawer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-left: auto;
}

/* Respondent walk: the real respondent experience from the app, full screen over the drawer. */
.playbook-walk-overlay {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: 0 0 0 100vmax rgba(13, 35, 78, 0.55), 0 24px 60px rgba(13, 35, 78, 0.28);
    display: flex;
    flex-direction: column;
    inset: clamp(0rem, 2.5vw, 2.25rem);
    overflow: hidden;
    position: fixed;
    z-index: 210;
}

.playbook-walk-bar {
    align-items: center;
    border-bottom: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: space-between;
    padding: 0.7rem 1rem;
}

.playbook-walk-title {
    align-items: center;
    display: flex;
    gap: 0.65rem;
    min-width: 0;
}

.playbook-walk-title strong {
    display: block;
    font-size: 1.02rem;
}

.playbook-walk-title strong:focus {
    outline: none;
}

.playbook-walk-title span:not(.audience-chip) {
    color: var(--ink-muted);
    display: block;
    font-size: 0.82rem;
}

.playbook-walk-actions {
    align-items: center;
    display: flex;
    gap: 0.75rem;
}

.playbook-walk-newtab {
    color: var(--blue);
    font-size: 0.88rem;
    font-weight: 700;
}

.playbook-walk-actions .secondary-action {
    min-height: 2.35rem;
    padding: 0.5rem 0.9rem;
}

.playbook-walk-frame {
    background: #f7f9fc;
    flex: 1;
    position: relative;
}

.playbook-walk-loading {
    color: var(--ink-muted);
    font-weight: 700;
    left: 50%;
    position: absolute;
    top: 40%;
    transform: translate(-50%, -50%);
}

.playbook-walk-frame iframe {
    border: 0;
    height: 100%;
    inset: 0;
    position: absolute;
    width: 100%;
}

@media (max-width: 640px) {
    .playbook-drawer-header {
        padding: 1rem 3.25rem 0.85rem 1rem;
    }

    .playbook-drawer-body {
        padding: 1rem;
    }

    .playbook-drawer-footer {
        padding: 0.75rem 1rem;
    }

    .playbook-drawer-actions {
        margin-left: 0;
        width: 100%;
    }

    .playbook-drawer-actions a {
        flex: 1;
    }

    .playbook-fit-grid {
        grid-template-columns: 1fr;
    }

    .playbook-option-list {
        columns: 1;
    }

    .playbook-walk-overlay {
        border-radius: 0;
        inset: 0;
    }

    .playbook-walk-newtab {
        display: none;
    }
}

/* Phones: long lists swipe sideways instead of stacking into screens of scrolling, the hero keeps one full-width
   button, and the demo stats sit two by two. */
@media (max-width: 720px) {
    .home-program-grid,
    .audience-filter-grid,
    .playbook-grid {
        grid-auto-columns: 84%;
        grid-auto-flow: column;
        grid-template-columns: none;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        padding-bottom: 0.75rem;
        scroll-snap-type: x mandatory;
    }

    .audience-filter-grid {
        grid-auto-columns: 66%;
    }

    .home-program-grid > *,
    .audience-filter-grid > *,
    .playbook-grid > * {
        scroll-snap-align: start;
    }

    .objective-strip {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 0.4rem;
    }

    .objective-strip > * {
        flex: none;
    }

    .hero-actions .secondary-action {
        background: transparent;
        border-color: transparent;
        color: var(--blue);
        min-height: 2.5rem;
    }
}

/* --- Plan features explained (/features) --- */
.feature-jump {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

.feature-jump a {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink);
    font-size: 0.86rem;
    font-weight: 700;
    padding: 0.35rem 0.85rem;
    text-decoration: none;
}

.feature-jump a:hover {
    border-color: var(--blue);
    color: var(--blue-dark);
}

.feature-section {
    border-top: 1px solid var(--line);
    margin: 0 auto;
    max-width: var(--max);
    padding: clamp(2.5rem, 5vw, 3.75rem) clamp(1rem, 3vw, 2rem);
    scroll-margin-top: 5.5rem;
}

.feature-head {
    margin-bottom: 1.25rem;
    max-width: 820px;
}

.feature-head h2 {
    font-size: clamp(1.6rem, 2.6vw, 2.2rem);
    line-height: 1.15;
    margin-bottom: 0.6rem;
}

.feature-availability {
    color: var(--blue-dark);
    font-size: 0.92rem;
    font-weight: 700;
    margin: 0;
}

.feature-grid,
.feature-compare {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.feature-grid article,
.feature-compare article {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.1rem;
}

.feature-grid strong {
    color: var(--ink);
    display: block;
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.feature-grid p,
.feature-grid li,
.feature-compare p,
.feature-compare li {
    color: var(--ink-soft);
    font-size: 0.92rem;
    line-height: 1.55;
}

.feature-grid p {
    margin: 0 0 0.6rem;
}

.feature-grid article > a {
    color: var(--blue);
    font-size: 0.9rem;
    font-weight: 750;
}

.feature-grid article > a:hover {
    color: var(--blue-dark);
}

.feature-grid ul,
.feature-compare ul {
    margin: 0;
    padding-left: 1.1rem;
}

.feature-grid li + li,
.feature-compare li + li {
    margin-top: 0.3rem;
}

.feature-compare span {
    color: var(--ink-muted);
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
}

.feature-compare h3 {
    font-size: 1.15rem;
    margin: 0.3rem 0 0.6rem;
}

.feature-compare small {
    color: var(--ink);
    display: block;
    font-size: 0.84rem;
    font-weight: 650;
    margin-top: 0.75rem;
}

.feature-compare article.is-featured {
    border-color: var(--blue);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.08);
}

.feature-without {
    background: #f7f9fc;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--ink-soft);
    font-size: 0.92rem;
    margin: 1rem 0 0;
    padding: 0.75rem 1rem;
}

.feature-more {
    font-weight: 700;
    margin: 0.85rem 0 0;
}

.feature-table-wrap {
    overflow-x: auto;
}

.feature-table {
    background: #fff;
    border: 1px solid var(--line);
    border-collapse: separate;
    border-radius: var(--radius);
    border-spacing: 0;
    min-width: 640px;
    width: 100%;
}

.feature-table th,
.feature-table td {
    border-bottom: 1px solid var(--line);
    font-size: 0.92rem;
    line-height: 1.5;
    padding: 0.75rem 1rem;
    text-align: left;
    vertical-align: top;
}

.feature-table tr:last-child th,
.feature-table tr:last-child td {
    border-bottom: 0;
}

.feature-table thead th {
    background: #f7f9fc;
    color: var(--ink);
    font-size: 0.95rem;
}

.feature-table tbody th {
    color: var(--ink);
    width: 22%;
}

.feature-table td {
    color: var(--ink-soft);
}

/* White-label before/after (features page and demo). */
.branding-compare {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0 0 1rem;
}

.branding-frame {
    background: #f7f9fc;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin: 0;
    padding: 0.9rem;
}

.branding-frame.is-branded {
    border-color: var(--blue);
}

.branding-frame figcaption {
    color: var(--ink);
    font-size: 0.86rem;
    font-weight: 750;
    margin-bottom: 0.6rem;
}

.branding-app-header {
    align-items: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
    display: flex;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem;
}

.branding-app-header img {
    height: 1.4rem;
    width: 1.4rem;
}

.branding-app-label {
    color: var(--ink-muted);
    font-size: 0.72rem;
    font-weight: 650;
    margin-left: auto;
}

.branding-your-logo {
    align-items: center;
    border: 1.5px dashed var(--blue);
    border-radius: 5px;
    color: var(--blue-dark);
    display: inline-flex;
    font-size: 0.72rem;
    font-weight: 800;
    height: 1.4rem;
    padding: 0 0.5rem;
}

.branding-your-logo.is-large {
    font-size: 0.85rem;
    height: 2rem;
    padding: 0 0.9rem;
}

.branding-survey {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
    display: grid;
    gap: 0.45rem;
    margin-top: 0.6rem;
    padding: 0.8rem;
}

.branding-survey-top {
    align-items: center;
    border-bottom: 1px solid var(--line);
    display: flex;
    min-height: 2.3rem;
    padding-bottom: 0.5rem;
}

.branding-survey-top img {
    height: 1.9rem;
    width: auto;
}

.branding-survey strong {
    color: var(--ink);
    font-size: 0.92rem;
}

.branding-survey-lines {
    display: grid;
    gap: 0.3rem;
}

.branding-survey-lines i {
    background: #e7edf6;
    border-radius: 4px;
    display: block;
    height: 0.55rem;
}

.branding-survey-lines i:nth-child(2) {
    width: 80%;
}

.branding-survey-lines i:nth-child(3) {
    width: 60%;
}

.branding-survey small {
    color: var(--ink-muted);
    font-size: 0.72rem;
    text-align: center;
}

.branding-compare.is-compact {
    max-width: 760px;
}

/* Pricing plan builder: link from a paid feature to its explanation. */
.pricing-map-more {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    margin-top: 0.2rem;
}

/* Demo: around the cycle (connect, brand, data out). */
.demo-around {
    margin: 0 auto;
    max-width: 1280px;
    padding: 0 clamp(1rem, 3vw, 2rem) 4rem;
}

.demo-around .demo-rank-pane-body {
    padding: 1rem;
}

.demo-around-flow {
    counter-reset: none;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

.demo-around-flow li {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    display: grid;
    gap: 0.35rem;
    padding: 0.9rem;
}

.demo-around-flow b {
    align-items: center;
    background: var(--blue);
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    font-size: 0.78rem;
    height: 1.6rem;
    justify-content: center;
    width: 1.6rem;
}

.demo-around-flow strong {
    color: var(--ink);
    font-size: 0.95rem;
}

.demo-around-flow span {
    color: var(--ink-soft);
    font-size: 0.86rem;
    line-height: 1.5;
}

.demo-around-data {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.demo-around-data article {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1rem;
}

.demo-around-data span {
    color: var(--ink-muted);
    font-size: 0.8rem;
    font-weight: 700;
}

.demo-around-data h3 {
    font-size: 1.05rem;
    margin: 0.3rem 0 0.5rem;
}

.demo-around-data ul {
    color: var(--ink-soft);
    font-size: 0.88rem;
    line-height: 1.55;
    margin: 0;
    padding-left: 1.1rem;
}

@media (max-width: 980px) {
    .feature-grid,
    .feature-compare,
    .demo-around-flow {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .feature-grid,
    .feature-compare,
    .branding-compare,
    .demo-around-flow,
    .demo-around-data {
        grid-template-columns: 1fr;
    }
}

/* Power BI pack screenshots (demo Data out and /features). */
.powerbi-shots {
    margin: 1rem 0 0;
}

.powerbi-shots-row {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.powerbi-shots-row a {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--ink);
    display: grid;
    gap: 0.4rem;
    padding: 0.5rem;
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.powerbi-shots-row a:hover,
.powerbi-shots-row a:focus-visible {
    border-color: var(--blue);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.1);
}

.powerbi-shots-row img {
    border-radius: 4px;
    display: block;
    height: auto;
    width: 100%;
}

.powerbi-shots-row span {
    font-size: 0.84rem;
    font-weight: 700;
}

.powerbi-shots figcaption {
    color: var(--ink-muted);
    font-size: 0.78rem;
    margin-top: 0.5rem;
}

@media (max-width: 640px) {
    .powerbi-shots-row {
        grid-template-columns: 1fr;
    }
}

/* --- /start: choose how to start (plan cards, plan finder, talk first) --- */
.start-plans,
.start-finder {
    margin: 0 auto;
    max-width: var(--max);
    padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 3vw, 2rem);
}

.start-plan-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 1.25rem;
}

.start-plan-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.15rem;
}

.start-plan-card.is-highlight {
    border-color: var(--blue);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.08);
}

.start-plan-card .plan-label {
    color: var(--ink);
    font-size: 1.15rem;
    font-weight: 800;
}

.start-plan-card small {
    color: var(--ink-muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.start-plan-card > p:not(.start-plan-price) {
    color: var(--ink-soft);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}

.start-plan-card .primary-action {
    margin-top: auto;
    text-align: center;
}

.start-plan-price {
    display: grid;
    gap: 0.15rem;
    margin: 0.25rem 0;
}

.start-plan-price strong {
    color: var(--ink);
    font-size: 1.45rem;
    font-variant-numeric: tabular-nums;
}

.start-plan-price span {
    color: var(--ink-muted);
    font-size: 0.82rem;
}

.start-plans-more {
    color: var(--ink-soft);
    font-size: 0.9rem;
    margin: 1rem 0 0;
}

.plan-finder {
    background: #f7f9fc;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: clamp(1rem, 2.5vw, 1.75rem);
}

.plan-finder-grid {
    align-items: start;
    display: grid;
    gap: 1.25rem;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr);
    margin-top: 1rem;
}

.plan-finder-questions {
    display: grid;
    gap: 1.1rem;
}

/* Numbered steps joined by a line; a step's number becomes a check once it's answered. */
.plan-finder-question {
    border: 0;
    margin: 0;
    min-width: 0;
    padding: 0 0 0 2.85rem;
    position: relative;
}

.plan-finder-question:not(:last-child)::before {
    background: var(--line);
    bottom: -1.1rem;
    content: "";
    left: 0.95rem;
    position: absolute;
    top: 2.1rem;
    width: 2px;
}

.plan-finder-question.is-answered:not(:last-child)::before {
    background: #bcd0f5;
}

.plan-finder-question legend {
    color: var(--ink);
    font-size: 0.95rem;
    font-weight: 750;
    margin-bottom: 0.45rem;
    padding: 0.35rem 0 0;
}

.plan-finder-step {
    align-items: center;
    background: #fff;
    border: 2px solid #bcd0f5;
    border-radius: 999px;
    color: var(--blue-dark);
    display: inline-flex;
    font-size: 0.86rem;
    font-weight: 800;
    height: 1.9rem;
    justify-content: center;
    left: 0;
    position: absolute;
    top: 0;
    width: 1.9rem;
}

.plan-finder-question.is-answered .plan-finder-step {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
}

.plan-finder-step svg {
    height: 0.95rem;
    width: 0.95rem;
}

.plan-finder .visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.plan-finder-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.plan-finder-options button {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink);
    cursor: pointer;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 650;
    padding: 0.4rem 0.85rem;
}

.plan-finder-number {
    align-items: center;
    color: var(--ink-muted);
    display: inline-flex;
    font-size: 0.86rem;
    font-weight: 650;
    gap: 0.5rem;
}

.plan-finder-number input {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--ink);
    font: inherit;
    font-size: 0.92rem;
    padding: 0.4rem 0.6rem;
    width: 8rem;
}

.plan-finder-number input:focus {
    border-color: var(--blue);
    outline: 2px solid color-mix(in srgb, var(--blue) 25%, transparent);
}

.plan-finder-options button:hover {
    border-color: var(--blue);
}

.plan-finder-options button.is-selected {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
}

.plan-finder-result {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.15rem;
    position: sticky;
    top: 6rem;
}

.plan-finder-result .plan-label {
    color: var(--ink-muted);
    font-size: 0.8rem;
    font-weight: 700;
}

.plan-finder-result h3 {
    font-size: 1.5rem;
    margin: 0;
}

.plan-finder-waiting {
    color: var(--ink-soft);
    margin: 0;
}

.plan-finder-result small {
    color: var(--ink-muted);
    font-size: 0.8rem;
}

.plan-finder-lines,
.plan-finder-why {
    font-size: 0.86rem;
    margin: 0;
    padding: 0;
}

.plan-finder-lines {
    border-bottom: 1px solid var(--line);
    border-top: 1px solid var(--line);
    list-style: none;
    padding: 0.5rem 0;
}

.plan-finder-lines li {
    display: flex;
    justify-content: space-between;
    padding: 0.15rem 0;
}

.plan-finder-lines b {
    font-variant-numeric: tabular-nums;
}

.plan-finder-why {
    color: var(--ink-soft);
    line-height: 1.5;
    padding-left: 1.1rem;
}

.plan-finder-result .primary-action {
    text-align: center;
}

.plan-finder-secondary {
    font-size: 0.86rem;
    font-weight: 700;
}

.plan-finder-enterprise,
.plan-finder-overage {
    background: #f7f9fc;
    border-radius: 6px;
    color: var(--ink-soft);
    font-size: 0.84rem;
    margin: 0;
    padding: 0.6rem 0.75rem;
}

#talk {
    scroll-margin-top: 5.5rem;
}

@media (max-width: 980px) {
    .start-plan-grid,
    .plan-finder-grid {
        grid-template-columns: 1fr;
    }

    .plan-finder-result {
        position: static;
    }
}

/* /start: book a call before (or instead of) the form. */
.lead-booking {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
    margin: 0.75rem 0 1.25rem;
}

.lead-booking span {
    color: var(--ink-soft);
    flex: 1 1 14rem;
    font-size: 0.9rem;
    line-height: 1.45;
}

/* Home: why it matters, on the tinted band under the hero. The year of resignations (js/turnover-cost.js) leads, in
   coral for money leaving and blue for Ranx with the kept people in green; then three sourced cost cards with their
   icons, which rise in on scroll; then why Ranx. Content icons sit in tinted chips like the module icons. */
.why-section {
    background: #f7f9fc;
    padding: 3.6rem max(2rem, calc((100vw - 1320px) / 2 + 2rem));
}

.ranx-icon {
    align-items: center;
    border-radius: 10px;
    display: inline-flex;
    flex: none;
    height: 2.5rem;
    justify-content: center;
    width: 2.5rem;
}

.ranx-icon svg {
    height: 1.3rem;
    width: 1.3rem;
}

.why-sim,
.why-chain {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 6px 16px rgba(13, 35, 78, 0.045);
}

.why-sim {
    --why-readout-width: 14rem;
    --why-body-gap: 1.25rem;
    margin-top: 1.6rem;
    padding: 1.25rem 1.25rem 1rem;
}

.why-sim-kicker {
    color: var(--coral);
    font-size: 0.82rem;
    font-weight: 750;
}

.why-sim-head h3 {
    font-size: 1.3rem;
    margin: 0.2rem 0 0;
}

/* The two numbers the visitor owns, above the chart they drive. The Employees box matches the site's form fields.
   Beside the readouts, the slider stops where they start, so it spans the chart and no further. */
.why-sim-inputs {
    align-items: end;
    display: grid;
    gap: 0.75rem 1.75rem;
    grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
    margin-top: 1rem;
    padding-right: calc(var(--why-readout-width) + var(--why-body-gap));
}

.why-sim-inputs label {
    display: grid;
    gap: 0.35rem;
}

.why-sim-inputs span {
    color: var(--ink-soft);
    display: flex;
    font-size: 0.82rem;
    font-weight: 700;
    justify-content: space-between;
}

.why-sim-inputs output {
    color: var(--blue);
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
}

.why-sim-inputs input[type="text"] {
    background: #fff;
    border: 1px solid #cdd6e4;
    border-radius: var(--radius);
    color: var(--ink);
    font: inherit;
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
    font-weight: 750;
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem;
    width: 100%;
}

.why-sim-inputs input[type="text"]:focus-visible {
    border-color: var(--blue);
    outline: 3px solid rgba(37, 99, 235, 0.22);
    outline-offset: 0;
}

.why-sim-inputs input[type="range"] {
    accent-color: var(--blue);
    margin: 0 0 0.8rem;
    width: 100%;
}

/* The chart is drawn as tall as the readouts beside it, so both start together. */
.why-sim-body {
    align-items: start;
    display: grid;
    gap: var(--why-body-gap);
    grid-template-columns: minmax(0, 1fr) var(--why-readout-width);
    margin-top: 1.1rem;
}

.why-sim-plot,
.why-sim-chart {
    min-width: 0;
}

.why-sim-chart {
    min-height: 200px;
}

.why-sim-chart svg {
    display: block;
    overflow: visible;
}

.why-sim-grid {
    stroke: var(--line);
    stroke-width: 1;
}

.why-sim-axis {
    fill: var(--ink-muted);
    font-size: 11px;
    font-weight: 600;
}

/* You in brand blue; professional services green at its low end and coral at its high end; government and the U.S.
   average in grey for context. Each bar carries the people who leave as a texture. */
.why-sim-bar.is-you {
    fill: var(--blue);
}

.why-sim-bar.is-low {
    fill: var(--green);
}

.why-sim-bar.is-context {
    fill: #8a96a8;
}

.why-sim-bar.is-high {
    fill: var(--coral);
}

.why-sim-person {
    fill: #fff;
    fill-opacity: 0.32;
}

.why-sim-value {
    fill: var(--ink);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
}

.why-sim-value.is-you {
    fill: var(--blue);
}

.why-sim-value.is-inside {
    fill: #fff;
}

/* Phones draw one row per bar: name and rate above it, role and people below. */
.why-sim-row-name {
    fill: var(--ink);
    font-size: 12.5px;
    font-weight: 800;
}

.why-sim-row-name.is-long {
    font-size: 11px;
}

.why-sim-row-rate {
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
}

.why-sim-row-name.is-you,
.why-sim-row-rate.is-you {
    fill: var(--blue);
}

.why-sim-row-rate.is-low {
    fill: var(--green);
}

.why-sim-row-rate.is-context {
    fill: var(--ink-soft);
}

.why-sim-row-rate.is-high {
    fill: var(--coral);
}

.why-sim-row-note {
    fill: var(--ink-muted);
    font-size: 11px;
    font-weight: 600;
}

.why-sim-you-line {
    stroke: var(--blue);
    stroke-dasharray: 4 4;
    stroke-opacity: 0.75;
    stroke-width: 1.5;
}

/* Role, name, rate and people line up across the columns however their names wrap. */
.why-sim-columns {
    display: grid;
    grid-template-rows: repeat(4, auto);
    margin-top: 0.55rem;
    row-gap: 0.1rem;
    text-align: center;
}

.why-sim-columns[hidden] {
    display: none;
}

.why-sim-columns div {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    min-width: 0;
    padding: 0 0.2rem;
}

.why-sim-columns em,
.why-sim-columns b {
    align-self: end;
}

.why-sim-columns em {
    color: var(--ink-muted);
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 700;
}

.why-sim-columns b {
    color: var(--ink);
    font-size: 0.84rem;
    line-height: 1.25;
}

.why-sim-columns span {
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
}

.why-sim-columns small {
    color: var(--ink-muted);
    font-size: 0.74rem;
}

.why-sim-columns .is-you b,
.why-sim-columns .is-you span {
    color: var(--blue);
}

.why-sim-columns .is-low span {
    color: var(--green);
}

.why-sim-columns .is-context span {
    color: var(--ink-soft);
}

.why-sim-columns .is-high span {
    color: var(--coral);
}

.why-sim-readout {
    display: grid;
    gap: 0.75rem;
    margin: 0;
}

.why-sim-readout div {
    border-left: 3px solid #8a96a8;
    padding: 0.2rem 0 0.2rem 0.8rem;
}

.why-sim-readout dt {
    color: var(--ink-muted);
    font-size: 0.8rem;
    font-weight: 700;
}

.why-sim-readout dd {
    color: var(--ink);
    font-size: 1.6rem;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    line-height: 1.2;
    margin: 0;
    overflow-wrap: anywhere;
}

.why-sim-readout small {
    color: var(--ink-muted);
    font-size: 0.78rem;
}

.why-sim-readout .is-you {
    border-left-color: var(--blue);
}

.why-sim-readout .is-you dd {
    color: var(--blue);
}

.why-sim-readout .is-gap {
    border-left-color: var(--coral);
}

.why-sim-readout .is-gap dd {
    color: var(--coral);
}

/* Under the chart: its assumptions and sources, then the replay. */
.why-sim-note {
    border-top: 1px solid var(--line);
    color: var(--ink-muted);
    font-size: 0.8rem;
    line-height: 1.5;
    margin: 1rem 0 0;
    padding-top: 0.85rem;
}

.why-sim-replay {
    background: none;
    border: 0;
    color: var(--blue);
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    padding: 0 0 0 0.35rem;
}

/* What Ranx is worth at the visitor's numbers, inside the calculator: turnover 1, 2 and 3 points lower, each as the
   dollars kept (green, as the chart colors the low end) and a multiple of the plan price. */
.why-sim-save {
    border-top: 1px solid var(--line);
    margin-top: 1rem;
    padding-top: 1rem;
}

.why-sim-save-head h4 {
    color: var(--ink);
    font-size: 1.2rem;
    margin: 0;
}

.why-sim-save-head p {
    color: var(--ink-soft);
    line-height: 1.5;
    margin: 0.2rem 0 0;
}

.why-sim-save-steps {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
}

.why-sim-save-steps li {
    background: rgba(35, 134, 93, 0.06);
    border: 1px solid rgba(35, 134, 93, 0.24);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    padding: 1rem 1.1rem;
}

.why-sim-save-steps li[hidden],
.why-sim-save-steps em[hidden] {
    display: none;
}

.why-sim-save-down {
    color: var(--ink);
    font-weight: 750;
}

.why-sim-save-steps small {
    color: var(--ink-muted);
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}

.why-sim-save-steps strong {
    color: var(--green);
    font-size: 1.6rem;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    line-height: 1.2;
    margin-top: 0.45rem;
    overflow-wrap: anywhere;
}

.why-sim-save-steps [data-out="save-people"] {
    color: var(--ink-soft);
    font-size: 0.88rem;
}

.why-sim-save-steps em {
    border-top: 1px solid rgba(35, 134, 93, 0.2);
    color: var(--ink);
    display: block;
    font-size: 0.88rem;
    font-style: normal;
    font-weight: 750;
    margin-top: auto;
    padding-top: 0.5rem;
}

.why-sim-save-steps [data-out="save-people"] + em {
    margin-top: 0.55rem;
}

/* The band's first selling block: the plan suggested at the visitor's size, its price, and the next steps. */
.why-sim-save-plan {
    align-items: center;
    background: #eef3fe;
    border: 1px solid rgba(37, 99, 235, 0.3);
    border-left: 4px solid var(--blue);
    border-radius: var(--radius);
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem 1.5rem;
    margin: 1.25rem 0 0;
    padding: 1rem 1.15rem;
}

.why-sim-save-plan-text {
    flex: 1 1 24rem;
}

.why-sim-save-plan-label {
    color: var(--blue);
    display: block;
    font-size: 0.82rem;
    font-weight: 750;
}

.why-sim-save-plan p {
    color: var(--ink-soft);
    font-size: 1.02rem;
    line-height: 1.5;
    margin: 0.2rem 0 0;
}

.why-sim-save-plan b,
.why-sim-save-plan strong {
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    font-weight: 800;
}

/* What the pilot costs at the suggested plan, under its price; a contract plan has none. */
.why-sim-save-plan .why-sim-save-pilot {
    font-size: 0.92rem;
    margin-top: 0.35rem;
}

.why-sim-save-plan .why-sim-save-pilot b {
    font-weight: 750;
}

.why-sim-save-pilot[hidden],
.why-sim-actions a[hidden] {
    display: none;
}

.why-sim-save-more {
    border-left: 3px solid var(--green);
    color: var(--ink-soft);
    line-height: 1.55;
    margin: 1.25rem 0 0;
    padding: 0.1rem 0 0.1rem 0.85rem;
}

.why-sim-save-more b,
.why-sim-save-more [data-out] {
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    font-weight: 750;
}

.why-sim-save-note {
    color: var(--ink-muted);
    font-size: 0.8rem;
    line-height: 1.5;
    margin: 1rem 0 0;
}

.why-sim-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

/* The three costs of a resignation, one line each under the heading, before the calculator prices the first. */
.why-cost-grid {
    display: grid;
    gap: 0.9rem 1.5rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    list-style: none;
    margin: 1.3rem 0 0;
    padding: 0;
}

.why-cost-grid li {
    align-items: start;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: auto minmax(0, 1fr);
}

.why-cost-grid .why-cost-icon {
    background: rgba(223, 107, 87, 0.12);
    color: var(--coral);
}

/* The label above each cost line; the icon chip is a span too, so this names the label's place. */
.why-cost-grid li > div > span {
    color: var(--ink-muted);
    display: block;
    font-size: 0.8rem;
    font-weight: 750;
}

.why-cost-grid strong {
    color: var(--ink);
    display: block;
    font-size: 1.02rem;
    line-height: 1.4;
    margin: 0.1rem 0 0.15rem;
}

.why-cost-grid strong b {
    color: var(--coral);
    font-variant-numeric: tabular-nums;
}

.why-cost-grid small {
    font-size: 0.78rem;
}

/* Only when the script runs and motion is welcome: the lines wait below and rise in, one after another. */
.why-animate .why-cost-grid li {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.55s ease, transform 0.55s ease;
    transition-delay: calc(var(--i, 0) * 140ms);
}

.why-animate.is-visible .why-cost-grid li {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .why-animate .why-cost-grid li {
        transform: none;
    }
}

/* How Ranx moves it: the fixable reasons (amber, as /research colors common problems), then each outcome Ranx tracks
   (blue) beside what it is worth (green). */
.why-chain {
    margin-top: 1rem;
    padding: 1.25rem;
}

.why-chain-head {
    align-items: start;
    display: grid;
    gap: 1rem;
    grid-template-columns: auto minmax(0, 1fr);
}

.why-chain-icon {
    background: rgba(37, 99, 235, 0.1);
    color: var(--blue);
}

.why-chain-kicker {
    color: var(--blue);
    font-size: 0.82rem;
    font-weight: 750;
}

.why-chain-head h3 {
    color: var(--ink);
    font-size: 1.35rem;
    line-height: 1.3;
    margin: 0.2rem 0 0.4rem;
}

.why-chain-head p {
    color: var(--ink-soft);
    line-height: 1.58;
    margin: 0;
    max-width: 60rem;
}

.why-chain-body {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr);
    margin-top: 1.1rem;
}

.why-chain-reasons,
.why-chain-outcomes {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    padding: 1rem 1.1rem;
}

.why-chain-reasons {
    background: var(--paper-warm);
}

.why-chain-outcomes {
    background: rgba(37, 99, 235, 0.035);
}

.why-chain h4 {
    color: var(--ink-muted);
    font-size: 0.82rem;
    font-weight: 750;
    margin: 0 0 0.8rem;
}

.why-chain ul,
.why-chain ol {
    display: grid;
    list-style: none;
    margin: 0;
    padding: 0;
}

.why-chain-reasons ul {
    gap: 0.9rem;
}

.why-chain-reasons li {
    align-items: start;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 4.1rem minmax(0, 1fr);
}

.why-chain-reasons li > strong {
    color: #b7790a;
    font-size: 1.65rem;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    line-height: 1.05;
}

.why-chain b {
    color: var(--ink);
    display: block;
}

.why-chain p {
    color: var(--ink-soft);
    font-size: 0.94rem;
    line-height: 1.5;
    margin: 0.15rem 0 0;
}

.why-chain small {
    font-size: 0.8rem;
    line-height: 1.45;
}

.why-chain-reasons .why-chain-pay {
    border-top: 1px solid rgba(228, 161, 27, 0.28);
    margin-top: 0.95rem;
    padding-top: 0.75rem;
}

.why-chain-reasons > small {
    margin-top: auto;
    padding-top: 0.75rem;
}

.why-chain-outcomes ol {
    gap: 0.6rem;
}

.why-chain-outcomes li {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    overflow: hidden;
}

.why-chain-outcome {
    border-left: 3px solid var(--blue);
    padding: 0.75rem 1.1rem 0.75rem 0.9rem;
}

.why-chain-outcome p {
    margin-bottom: 0.25rem;
}

.why-chain-worth {
    background: rgba(35, 134, 93, 0.07);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0.75rem 0.9rem 0.75rem 1.25rem;
    position: relative;
}

.why-chain-worth::before {
    align-items: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--green);
    content: "\2192";
    display: flex;
    font-size: 0.8rem;
    font-weight: 800;
    height: 1.4rem;
    justify-content: center;
    left: -0.7rem;
    position: absolute;
    top: calc(50% - 0.7rem);
    width: 1.4rem;
}

.why-chain-worth b {
    color: var(--green);
}

.why-chain-worth span {
    color: var(--ink-soft);
    font-size: 0.9rem;
    line-height: 1.4;
}

.why-chain-research {
    align-self: flex-start;
    font-weight: 700;
    margin-top: 0.85rem;
}

@media (max-width: 900px) {
    .why-sim-body {
        grid-template-columns: 1fr;
    }

    /* The readouts sit under the chart here, so the slider takes the full width. */
    .why-sim-inputs {
        padding-right: 0;
    }

    .why-sim-readout {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .why-chain-body {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .why-section {
        padding: 2.5rem 1rem;
    }

    .why-sim {
        padding: 1rem 0.85rem 0.85rem;
    }

    /* One figure per row, so a large company's dollars never wrap. */
    .why-sim-readout {
        grid-template-columns: 1fr;
    }

    .why-sim-readout dd {
        font-size: 1.3rem;
    }

    .why-sim-inputs,
    .why-cost-grid,
    .why-sim-save-steps {
        grid-template-columns: 1fr;
    }

    .why-chain {
        padding: 1rem 0.85rem;
    }

    .why-chain-head {
        gap: 0.7rem;
        grid-template-columns: 1fr;
    }

    .why-chain-head h3 {
        font-size: 1.2rem;
    }

    .why-chain-reasons,
    .why-chain-outcomes {
        padding: 0.9rem 0.85rem;
    }

    /* Each outcome above what it is worth, the arrow pointing down. */
    .why-chain-outcomes li {
        grid-template-columns: 1fr;
    }

    .why-chain-worth {
        padding: 0.85rem 0.9rem 0.75rem;
    }

    .why-chain-worth::before {
        content: "\2193";
        left: 0.9rem;
        top: -0.7rem;
    }

    .why-sim-actions {
        width: 100%;
    }

    .why-sim-actions a {
        flex: 1 1 auto;
        text-align: center;
    }

}

/* Research: the evidence for what Ranx addresses. Sections share the page hero's column with full-width tinted
   bands; cards carry an icon chip by kind (coral for cost, blue for the outcomes Ranx tracks, amber for common
   problems), the finding, and its linked source. */
.research-jump {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.4rem;
}

.research-jump a {
    background: #eef2f8;
    border-radius: 999px;
    color: var(--ink);
    font-size: 0.86rem;
    font-weight: 700;
    padding: 0.4rem 0.85rem;
}

.research-jump a:hover,
.research-jump a:focus-visible {
    background: rgba(37, 99, 235, 0.12);
    color: var(--blue-dark);
}

.research-section {
    padding: clamp(2.5rem, 5vw, 4rem) max(clamp(1rem, 3vw, 2rem), calc((100% - var(--max)) / 2 + 2rem));
    scroll-margin-top: 4.5rem;
}

.research-section-tinted {
    background: #f7f9fc;
}

.research-grid {
    display: grid;
    gap: 1rem;
    margin-top: 1.6rem;
}

.research-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.research-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.research-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 6px 16px rgba(13, 35, 78, 0.045);
    display: flex;
    flex-direction: column;
    padding: 1.2rem;
}

.research-card-label {
    align-items: center;
    display: flex;
    gap: 0.7rem;
}

.research-card-label span {
    color: var(--ink);
    font-weight: 780;
}

.research-card > .research-icon {
    margin-bottom: 0.8rem;
}

.research-icon.is-cost {
    background: rgba(223, 107, 87, 0.12);
    color: var(--coral);
}

.research-icon.is-outcome {
    background: rgba(37, 99, 235, 0.1);
    color: var(--blue);
}

.research-icon.is-problem {
    background: rgba(228, 161, 27, 0.14);
    color: #b7790a;
}

.research-card h3 {
    font-size: 1.2rem;
    line-height: 1.3;
    margin: 0.75rem 0 0.45rem;
}

.research-card > .research-icon + h3 {
    margin-top: 0;
}

.research-card p {
    color: var(--ink-soft);
    line-height: 1.58;
    margin: 0;
}

.research-card small,
.research-ranking small {
    font-size: 0.8rem;
    line-height: 1.5;
    margin-top: auto;
    padding-top: 0.8rem;
}

.research-playbook {
    align-items: center;
    border-top: 1px solid var(--line);
    color: var(--ink);
    display: flex;
    font-size: 0.88rem;
    font-weight: 750;
    gap: 0.5rem;
    margin-top: 0.85rem;
    padding-top: 0.85rem;
}

.research-playbook:hover,
.research-playbook:focus-visible {
    color: var(--blue-dark);
}

.research-next {
    margin: 1.2rem 0 0;
}

.research-ranking {
    align-items: center;
    display: grid;
    gap: clamp(1.5rem, 4vw, 3rem);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
}

.research-ranking > div > p {
    color: var(--ink-soft);
    max-width: 560px;
}

.research-ranking small {
    display: block;
}

.research-compare {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 6px 16px rgba(13, 35, 78, 0.045);
    display: grid;
    gap: 1.25rem;
    margin: 0;
    padding: 1.2rem;
}

.research-compare h3 {
    color: var(--ink-muted);
    font-size: 0.82rem;
    margin: 0 0 0.6rem;
}

.research-bar {
    align-items: center;
    display: grid;
    gap: 0.25rem 0.75rem;
    grid-template-columns: minmax(0, 1fr) auto;
    margin-bottom: 0.55rem;
}

.research-bar span {
    color: var(--ink);
    font-size: 0.85rem;
    font-weight: 650;
}

.research-bar b {
    color: var(--ink);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    grid-column: 2;
    grid-row: 1;
}

.research-bar i {
    background: #c9d3e2;
    border-radius: 999px;
    display: block;
    grid-column: 1 / -1;
    height: 0.55rem;
}

.research-bar.is-ranked i {
    background: var(--slot);
}

.research-compare figcaption {
    border-top: 1px solid var(--line);
    color: var(--ink-muted);
    font-size: 0.8rem;
    line-height: 1.5;
    padding-top: 0.85rem;
}

.research-try .research-lab {
    margin: 1.6rem 0 0;
    max-width: none;
}

@media (max-width: 900px) {
    .research-grid-3,
    .research-ranking {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .research-grid-2 {
        grid-template-columns: 1fr;
    }
}

/* Home: your first year in the real product (RanxFirstYear). Real demo screens in quarter cards, a Net Ranx donut
   thread with Quarter 1 marked as the 90-day pilot, and the pilot as the section's one ask. */
.first-year-section {
    margin: 0 auto;
    max-width: 1320px;
    padding: 3.6rem 2rem;
}

.first-year-thread {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 2.2rem;
    padding-bottom: 2.6rem;
    position: relative;
}

.first-year-thread::before {
    background: linear-gradient(90deg, #bfd0f7, var(--blue));
    border-radius: 3px;
    content: "";
    height: 3px;
    left: 12.5%;
    position: absolute;
    right: 12.5%;
    top: 44px;
}

.first-year-node {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    position: relative;
}

.first-year-node .demo-donut {
    background-color: #fff;
    box-shadow: 0 0 0 6px #fff;
}

.first-year-node > span:last-child {
    color: #526174;
    font-size: 0.76rem;
    font-weight: 700;
}

.first-year-pilot-bracket {
    border: 2px solid var(--blue);
    border-radius: 0 0 6px 6px;
    border-top: 0;
    height: 9px;
    left: 3%;
    position: absolute;
    top: 126px;
    width: 19%;
}

.first-year-pilot-label {
    background: #eef3fe;
    border-radius: 999px;
    color: var(--blue-dark);
    font-size: 0.76rem;
    font-weight: 800;
    left: 12.5%;
    padding: 0.15rem 0.7rem;
    position: absolute;
    top: 142px;
    transform: translateX(-50%);
    white-space: nowrap;
}

.first-year-note {
    color: var(--ink-muted);
    font-size: 0.8rem;
    margin: 0.6rem 0 0;
    text-align: center;
}

.first-year-note b {
    color: var(--ink);
}

.first-year-loop {
    color: var(--ink-soft);
    font-size: 0.86rem;
    margin: 0.35rem 0 0;
    text-align: center;
}

.first-year-loop a {
    color: var(--blue);
    font-weight: 750;
    white-space: nowrap;
}

/* The trust row's cards (container rules sit with the other home sections). */
.home-proof-card {
    background: #fff;
    border: 1px solid #e1e8f2;
    border-radius: var(--ranx-block-radius, 0.375rem);
    border-top: 3px solid var(--proof);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.95rem 1rem;
}

.home-proof-kicker {
    color: var(--ink-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.home-proof-card > strong {
    color: var(--ink);
    font-size: 1.02rem;
    line-height: 1.3;
}

.home-proof-card p {
    color: var(--ink-soft);
    font-size: 0.86rem;
    line-height: 1.5;
    margin: 0;
}

.home-proof-card > a {
    color: var(--blue);
    font-size: 0.86rem;
    font-weight: 750;
    margin-top: auto;
    padding-top: 0.3rem;
    text-decoration: none;
}

@media (max-width: 900px) {
    .home-proof {
        grid-template-columns: 1fr;
    }
}

.first-year-cards {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    list-style: none;
    margin: 1.4rem 0 0;
    padding: 0;
}

.first-year-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    padding: 1rem 1rem 1.05rem;
    position: relative;
}

.first-year-card-pilot {
    border: 2px solid var(--blue);
    box-shadow: 0 10px 26px rgba(37, 99, 235, 0.16);
}

.first-year-ribbon {
    background: var(--blue);
    border-radius: 999px;
    color: #fff;
    font-size: 0.74rem;
    font-weight: 800;
    left: 1rem;
    padding: 0.2rem 0.7rem;
    position: absolute;
    top: -12px;
}

.first-year-card-head {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.first-year-q {
    color: #526174;
    font-size: 0.76rem;
    font-weight: 700;
}

.first-year-inline-donut {
    display: none !important;
}

.first-year-card > strong {
    color: var(--ink);
    font-size: 1.08rem;
    line-height: 1.3;
    margin: 0.3rem 0 0.7rem;
}

.first-year-shot {
    align-items: center;
    background: #f4f6fa;
    border: 1px solid #e5ebf4;
    border-radius: 8px;
    display: flex;
    height: 200px;
    justify-content: center;
    overflow: hidden;
    padding: 0.45rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.first-year-shot:hover {
    border-color: var(--blue);
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.15);
}

.first-year-shot img {
    border-radius: 6px;
    display: block;
    height: auto;
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    width: auto;
}

.first-year-card p {
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0.75rem 0 0.6rem;
}

.first-year-days {
    background: #f5f8ff;
    border: 1px solid #dbe6fd;
    border-radius: 8px;
    display: grid;
    gap: 0.35rem 0.5rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0.55rem 0.6rem;
}

.first-year-days li {
    color: var(--ink-soft);
    display: flex;
    flex-direction: column;
    font-size: 0.78rem;
    font-weight: 650;
    line-height: 1.25;
}

.first-year-days b {
    color: var(--blue-dark);
    font-size: 0.7rem;
    font-weight: 800;
}

.first-year-link {
    color: var(--blue);
    font-size: 0.86rem;
    font-weight: 750;
    margin-top: auto;
}

.first-year-cta {
    justify-content: center;
    margin-top: 1.6rem;
}

.first-year-cta-note {
    color: var(--ink);
    font-size: 0.9rem;
    font-weight: 650;
    margin: 0.75rem 0 0;
    text-align: center;
}

.first-year-footnote {
    color: var(--ink-muted);
    font-size: 0.78rem;
    margin: 0.4rem 0 0;
    text-align: center;
}

/* Narrow tablets and phones: no thread; each card carries its own donut. */
@media (max-width: 980px) {
    .first-year-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .first-year-thread {
        display: none;
    }

    .first-year-inline-donut {
        display: inline-flex !important;
    }

    .first-year-note {
        text-align: left;
    }
}

@media (max-width: 640px) {
    .first-year-section {
        padding: 2.6rem 1rem;
    }

    .first-year-cards {
        grid-template-columns: 1fr;
    }

    .first-year-shot {
        height: auto;
        min-height: 150px;
    }
}

/* Loop block: one plain line per step inside the dark card, which then matches the orbit's height. */
.ranx-loop-artifact__steps {
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    display: grid;
    gap: 0.65rem;
    list-style: none;
    margin: 0.35rem 0 0;
    padding: 0.85rem 0 0;
}

.ranx-loop-artifact__steps li {
    align-items: start;
    display: grid;
    gap: 0.7rem;
    grid-template-columns: auto minmax(0, 1fr);
}

.ranx-loop-artifact__steps strong {
    color: #fff;
    display: block;
    font-size: 0.92rem;
}

.ranx-loop-artifact__steps span:not(.module-icon-shell):not(.module-icon-tiny) {
    color: rgba(255, 255, 255, 0.76);
    display: block;
    font-size: 0.86rem;
    line-height: 1.45;
}

.ranx-loop-artifact-compact .ranx-loop-artifact__steps {
    display: none;
}

/* Full loop block: two equal halves. The card keeps its natural height and the orbit is capped to about the
   same height, so the two sides balance. The compact and stacked variants keep their own rules. */
.ranx-loop-artifact:not(.ranx-loop-artifact-compact) {
    align-items: center;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.ranx-loop-artifact:not(.ranx-loop-artifact-compact) .ranx-loop-artifact__explain {
    align-content: start;
    max-width: none;
}

.ranx-loop-artifact:not(.ranx-loop-artifact-compact) .ranx-loop-artifact__orbit {
    max-width: 29rem;
    width: 100%;
}

@media (max-width: 860px) {
    .ranx-loop-artifact:not(.ranx-loop-artifact-compact) {
        grid-template-columns: 1fr;
    }

    .ranx-loop-artifact:not(.ranx-loop-artifact-compact) .ranx-loop-artifact__orbit {
        max-width: 22rem;
    }
}

/* --- Pilot plan (/pilot-plan) --- */
.pilot-plan-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
}

.pilot-plan-facts li {
    align-items: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink);
    display: inline-flex;
    font-size: 0.86rem;
    font-weight: 700;
    gap: 0.4rem;
    padding: 0.3rem 0.8rem;
}

.pilot-plan-actions {
    margin-top: 1.25rem;
}

.pilot-plan-actions button {
    cursor: pointer;
    font: inherit;
}

.pilot-plan-before {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}

.pilot-plan-setup ul {
    display: grid;
    gap: 0.45rem;
    margin: 0;
    padding-left: 1.1rem;
}

.pilot-plan-steps {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

.pilot-plan-steps li {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    display: grid;
    align-content: start;
    gap: 0.35rem;
    padding: 1rem 1.1rem;
}

.pilot-plan-when {
    color: var(--blue-dark);
    font-size: 0.82rem;
    font-weight: 800;
}

.pilot-plan-steps strong {
    color: var(--ink);
    display: block;
    font-size: 1rem;
}

.pilot-plan-steps p {
    color: var(--ink-soft);
    font-size: 0.92rem;
    line-height: 1.55;
    margin: 0.2rem 0 0;
}

/* Our estimate of the program owner's own time on a step. */
.pilot-plan-time {
    color: var(--ink-muted);
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    margin-top: 0.45rem;
}

/* Quarterly list surveys: how to get Lift's first read before the day-91 decision. */
.pilot-plan-early-lift {
    align-items: start;
    background: #f4f7fd;
    border: 1px solid rgba(34, 90, 200, 0.22);
    border-radius: 0.375rem;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: auto minmax(0, 1fr);
    margin-top: 1rem;
    max-width: 920px;
    padding: 0.9rem 1rem;
}

.pilot-plan-early-lift p {
    color: var(--ink-soft);
    line-height: 1.55;
    margin: 0;
}

.pilot-plan-early-lift strong {
    color: var(--ink);
}

.pilot-plan-more {
    font-size: 0.92rem;
    margin: 1.25rem 0 0;
}

.pilot-plan-picker {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
}

.pilot-plan-picker-group {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.1rem;
}

.pilot-plan-picker-group h2 {
    align-items: center;
    display: flex;
    font-size: 1.1rem;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
}

.pilot-plan-picker-group ul {
    display: grid;
    gap: 0.45rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pilot-plan-pick {
    align-items: center;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    padding: 0.55rem 0.75rem;
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.pilot-plan-pick strong {
    color: var(--blue-dark);
    display: block;
    font-size: 0.95rem;
}

.pilot-plan-pick small {
    color: var(--ink-soft);
    display: block;
    font-size: 0.82rem;
    line-height: 1.4;
}

.pilot-plan-pick-arrow {
    color: var(--blue);
    flex: none;
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1;
}

.pilot-plan-pick:hover,
.pilot-plan-pick:focus-visible {
    background: #f4f8ff;
    border-color: var(--blue);
}

@media (max-width: 1024px) {
    .pilot-plan-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .pilot-plan-before {
        grid-template-columns: 1fr;
    }

    .pilot-plan-steps {
        grid-template-columns: 1fr;
    }
}

@media print {
    .site-header,
    .site-footer,
    .pilot-plan-actions,
    .pilot-plan-more {
        display: none !important;
    }

    .pilot-plan-steps li,
    .feature-grid article {
        break-inside: avoid;
        box-shadow: none;
    }

    .feature-section {
        padding: 1rem 0;
    }
}

.playbook-pilot-plan {
    display: inline-block;
    font-size: 0.92rem;
    font-weight: 700;
    margin: 0.75rem 0 0;
}

.start-hero-actions {
    margin-top: 1.1rem;
}

/* Pilot plan icons: line icons in the same 2rem tile as the module icons. */
.plan-icon-shell {
    align-items: center;
    background: #e8f0ff;
    border: 1px solid #cfdcf8;
    border-radius: 8px;
    color: var(--blue);
    display: inline-flex;
    flex: none;
    height: 2.6rem;
    justify-content: center;
    width: 2.6rem;
}

.plan-icon-shell svg {
    height: 1.4rem;
    width: 1.4rem;
}

/* Module steps (Listen, Rank, Act, Lift) use the module tile at the same size. */
.pilot-plan-step-head .module-icon-shell {
    border-radius: 8px;
    flex: none;
    height: 2.6rem;
    width: 2.6rem;
}

.pilot-plan-step-head .module-icon-shell svg {
    height: 1.4rem;
    width: 1.4rem;
}

.pilot-plan-card-head {
    align-items: center;
    display: flex !important;
    font-size: 1.05rem !important;
    gap: 0.7rem;
    margin-bottom: 0.75rem !important;
}

.pilot-plan-step-head {
    align-items: center;
    display: flex;
    gap: 0.7rem;
    margin-bottom: 0.4rem;
}

/* Home "proven program in a box": four tiles in two columns on wider screens, so they match the copy's height. */
@media (min-width: 981px) {
    .buyer-path-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* /compare: Ranx beside Culture Amp, Lattice, Quantum Workplace and Qualtrics. One motif carries the argument: a hatched
   fill marks the work that usually leaves the platform, in the lanes, the table's gap rows, and the cost bars. */
.cmp-page {
    --cmp-soft: #f7f9fc;
    --cmp-line-strong: #cdd7e6;
    --cmp-blue-tint: #eef3fe;
    --cmp-blue-wash: #f6f9ff;
    --cmp-gap-bg: #fff7f0;
    --cmp-gap-hatch: #fbe1cb;
    --cmp-gap-edge: #e3a272;
    --cmp-gap-ink: #8a3412;
    --cmp-platform: #8c9bb5;
    --cmp-hatch: repeating-linear-gradient(135deg, var(--cmp-gap-bg) 0 7px, var(--cmp-gap-hatch) 7px 9px);
    --cmp-hatch-soft: repeating-linear-gradient(135deg, #fffaf5 0 9px, #fdeee0 9px 11px);
}

.cmp-sr {
    clip: rect(0 0 0 0);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.cmp-hero {
    min-height: 0;
    padding-bottom: 1rem;
}

.cmp-hero-note {
    color: var(--ink-muted);
    font-size: 0.86rem;
    margin-top: 1rem;
}

.cmp-section {
    margin: 0 auto;
    max-width: var(--max);
    padding: clamp(2.5rem, 5vw, 4rem) clamp(1rem, 3vw, 2rem);
}

.cmp-band-soft {
    background: var(--cmp-soft);
    border-block: 1px solid var(--line);
}

.cmp-lede {
    color: var(--ink-soft);
    font-size: 1.08rem;
    max-width: 68ch;
}

.cmp-lanes-section {
    padding-top: 0;
}

/* Where the work happens: two lanes on one grid, so the typical platform's "inside" and "outside" frames line up with
   the Ranx frame's chips. Frames are grid items drawn behind the chips that share their tracks. */
.cmp-lanes {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin: 0;
    padding: 1.4rem;
}

.cmp-lanes figcaption {
    font-weight: 720;
    margin-bottom: 1rem;
}

.cmp-lanes-grid {
    column-gap: 0.5rem;
    display: grid;
    grid-template-columns: 9.5rem repeat(6, minmax(0, 1fr));
}

.cmp-lane-label {
    align-self: center;
    font-size: 0.92rem;
    font-weight: 720;
    line-height: 1.25;
    padding-right: 0.5rem;
}

.cmp-lane-label small {
    color: var(--ink-muted);
    display: block;
    font-size: 0.8rem;
    font-weight: 560;
    margin-top: 0.15rem;
}

.cmp-frame {
    border-radius: 10px;
}

.cmp-frame-in {
    background: var(--cmp-soft);
    border: 1.5px solid var(--cmp-line-strong);
    grid-column: 2 / 6;
    grid-row: 2;
}

.cmp-frame-out {
    background: var(--cmp-hatch);
    border: 1.5px dashed var(--cmp-gap-edge);
    grid-column: 6 / 8;
    grid-row: 2;
}

.cmp-frame-ranx {
    background: var(--cmp-blue-tint);
    border: 2px solid var(--blue);
    grid-column: 2 / 8;
    grid-row: 4;
}

.cmp-annot {
    align-self: end;
    color: var(--ink-muted);
    font-size: 0.78rem;
    font-weight: 720;
    grid-row: 1;
    padding: 0 0.2rem 0.4rem;
}

.cmp-annot-in {
    grid-column: 2 / 6;
}

.cmp-annot-out {
    color: var(--cmp-gap-ink);
    grid-column: 6 / 8;
}

.cmp-lane-cap {
    color: var(--ink-soft);
    font-size: 0.82rem;
    padding: 0.45rem 0.2rem 1.1rem;
}

.cmp-cap-out {
    color: var(--cmp-gap-ink);
    font-weight: 600;
    grid-column: 6 / 8;
    grid-row: 3;
}

.cmp-cap-ranx {
    grid-column: 2 / 8;
    grid-row: 5;
    padding-bottom: 0;
}

.cmp-chip {
    align-items: flex-start;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 0.375rem;
    display: flex;
    font-size: 0.8rem;
    font-weight: 640;
    gap: 0.4rem;
    line-height: 1.3;
    margin: 0.6rem 0.35rem;
    min-width: 0;
    padding: 0.5rem 0.55rem;
    position: relative;
    z-index: 1;
}

.cmp-chip-out {
    border-color: #f1cfb3;
}

.cmp-chip i {
    background: var(--m);
    border-radius: 50%;
    flex: none;
    height: 0.6rem;
    margin-top: 0.27rem;
    width: 0.6rem;
}

.cmp-chip b {
    font-weight: 760;
}

.cmp-l1 { grid-row: 2; }
.cmp-l2 { grid-row: 4; }
.cmp-c1 { grid-column: 2; }
.cmp-c2 { grid-column: 3; }
.cmp-c3 { grid-column: 4; }
.cmp-c4 { grid-column: 5; }
.cmp-c5 { grid-column: 6; }
.cmp-c6 { grid-column: 7; }
.cmp-lane-label.cmp-l1 { grid-column: 1; grid-row: 2; }
.cmp-lane-label.cmp-l2 { grid-column: 1; grid-row: 4; }

@media (max-width: 860px) {
    .cmp-lanes {
        padding: 1rem;
    }

    .cmp-lanes-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .cmp-lanes-grid > * {
        grid-column: 1 !important;
    }

    .cmp-chip { margin: 0.3rem 0.6rem; }
    .cmp-lane-label.cmp-l1 { grid-row: 1; padding-bottom: 0.5rem; }
    .cmp-annot-in { grid-row: 2; }
    .cmp-frame-in { grid-row: 3 / 7; }
    .cmp-l1.cmp-c1 { grid-row: 3; margin-top: 0.6rem; }
    .cmp-l1.cmp-c2 { grid-row: 4; }
    .cmp-l1.cmp-c3 { grid-row: 5; }
    .cmp-l1.cmp-c4 { grid-row: 6; margin-bottom: 0.6rem; }
    .cmp-annot-out { grid-row: 7; padding-top: 0.8rem; }
    .cmp-frame-out { grid-row: 8 / 10; }
    .cmp-l1.cmp-c5 { grid-row: 8; margin-top: 0.6rem; }
    .cmp-l1.cmp-c6 { grid-row: 9; margin-bottom: 0.6rem; }
    .cmp-cap-out { grid-row: 10; }
    .cmp-lane-label.cmp-l2 { grid-row: 11; padding-bottom: 0.5rem; }
    .cmp-frame-ranx { grid-row: 12 / 18; }
    .cmp-l2.cmp-c1 { grid-row: 12; margin-top: 0.6rem; }
    .cmp-l2.cmp-c2 { grid-row: 13; }
    .cmp-l2.cmp-c3 { grid-row: 14; }
    .cmp-l2.cmp-c4 { grid-row: 15; }
    .cmp-l2.cmp-c5 { grid-row: 16; }
    .cmp-l2.cmp-c6 { grid-row: 17; margin-bottom: 0.6rem; }
    .cmp-cap-ranx { grid-row: 18; }
}

/* The side-by-side table: Ranx plans, then the other platforms, with the gap rows hatched in the competitor columns. */
.cmp-legend {
    align-items: center;
    color: var(--ink-soft);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.84rem;
    gap: 0.5rem 1.2rem;
    margin: 1.4rem 0 1rem;
}

.cmp-legend-gap {
    align-items: center;
    display: inline-flex;
    gap: 0.4rem;
}

.cmp-legend-gap i {
    background: var(--cmp-hatch);
    border: 1px dashed var(--cmp-gap-edge);
    border-radius: 3px;
    height: 1rem;
    width: 1.6rem;
}

.cmp-source-toggle {
    align-items: center;
    color: var(--blue);
    cursor: pointer;
    display: inline-flex;
    font-weight: 680;
    gap: 0.4rem;
}

.cmp-source-toggle input {
    accent-color: var(--blue);
    margin: 0;
}

/* Positioned, so the cells' visually hidden labels stay inside the scroll area instead of widening the page. */
.cmp-table-scroll {
    overflow-x: auto;
    position: relative;
}

.cmp-matrix-scroll {
    background: var(--paper);
    border: 1px solid var(--cmp-line-strong);
    border-radius: var(--radius);
}

/* All eight columns fit the page's content width on a desktop (1,116px at the widest), so nothing scrolls there;
   only a window narrower than the minimum scrolls, with the capability column held in place. */
.cmp-matrix {
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.86rem;
    line-height: 1.4;
    min-width: 960px;
    width: 100%;
}

.cmp-matrix th,
.cmp-matrix td {
    border-bottom: 1px solid var(--line);
    padding: 0.7rem 0.6rem;
    text-align: left;
    vertical-align: top;
}

.cmp-matrix thead th {
    background: var(--paper);
    vertical-align: bottom;
}

.cmp-super th {
    border-bottom: 0;
    color: var(--ink-muted);
    font-size: 0.74rem;
    font-weight: 720;
    padding-block: 0.6rem 0.2rem;
}

.cmp-super .cmp-sup-ranx {
    color: var(--blue);
}

.cmp-colhead th {
    font-size: 0.95rem;
    font-weight: 740;
}

.cmp-colhead th small,
.cmp-rowhead small {
    color: var(--ink-muted);
    display: block;
    font-size: 0.78rem;
    font-weight: 500;
    margin-top: 0.12rem;
}

.cmp-tag {
    background: var(--blue);
    border-radius: 999px;
    color: #fff;
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 720;
    margin-top: 0.35rem;
    padding: 0.1rem 0.5rem;
}

.cmp-matrix .cmp-rowhead {
    background: var(--paper);
    border-right: 1px solid var(--cmp-line-strong);
    font-weight: 680;
    left: 0;
    min-width: 13rem;
    position: sticky;
    width: 13rem;
    z-index: 2;
}

.cmp-matrix .cmp-ranx-edge {
    border-left: 1px solid var(--cmp-line-strong);
}

.cmp-matrix .cmp-comp-edge {
    border-left: 2px solid var(--cmp-line-strong);
}

.cmp-matrix .cmp-best {
    background: var(--cmp-blue-wash);
}

.cmp-group th {
    background: var(--cmp-soft);
    border-bottom: 1px solid var(--cmp-line-strong);
    color: var(--ink-soft);
    font-size: 0.8rem;
    font-weight: 720;
    padding-block: 0.5rem;
}

.cmp-group-label {
    align-items: center;
    display: inline-flex;
    gap: 0.5rem;
    left: 0.75rem;
    position: sticky;
}

.cmp-module {
    align-items: center;
    color: var(--ink);
    display: inline-flex;
    font-weight: 760;
    gap: 0.35rem;
}

.cmp-module::before {
    background: var(--m);
    border-radius: 50%;
    content: "";
    height: 0.62rem;
    width: 0.62rem;
}

.cmp-gap .cmp-group th {
    background: var(--cmp-hatch);
    border-block: 1.5px dashed var(--cmp-gap-edge);
    color: var(--cmp-gap-ink);
    font-size: 0.86rem;
}

.cmp-gap td.cmp-comp-edge,
.cmp-gap td.cmp-comp-edge ~ td {
    background: var(--cmp-hatch-soft);
}

.cmp-gap .cmp-rowhead {
    box-shadow: inset 3px 0 0 var(--cmp-gap-edge);
}

.cmp-matrix tfoot th,
.cmp-matrix tfoot td {
    border-bottom: 0;
    border-top: 1.5px solid var(--cmp-line-strong);
    font-weight: 680;
}

.cmp-matrix tfoot td.cmp-best {
    background: var(--cmp-blue-tint);
}

.cmp-mark {
    align-items: flex-start;
    display: flex;
    gap: 0.45rem;
}

.cmp-legend .cmp-mark {
    align-items: center;
    display: inline-flex;
}

.cmp-mark > i {
    background-repeat: no-repeat;
    background-size: contain;
    flex: none;
    height: 1.05rem;
    margin-top: 0.06rem;
    width: 1.05rem;
}

.cmp-legend .cmp-mark > i {
    margin-top: 0;
}

.cmp-mark-included > i {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%230d234e'/%3E%3Cpath d='M5.6 10.3l2.9 2.9 5.9-6.3' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.cmp-mark-addOn > i {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='%23fff' stroke='%232563eb' stroke-width='2'/%3E%3Cpath d='M10 5.8v8.4M5.8 10h8.4' stroke='%232563eb' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.cmp-mark-partly > i {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='%23fff' stroke='%230d234e' stroke-width='2'/%3E%3Cpath d='M10 1a9 9 0 0 0 0 18z' fill='%230d234e'/%3E%3C/svg%3E");
}

.cmp-mark-notFound > i {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8.6' fill='none' stroke='%235d6676' stroke-width='1.8' stroke-dasharray='3 2.4'/%3E%3C/svg%3E");
}

.cmp-mark-none {
    color: var(--ink-muted);
}

.cmp-mark-none > i {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10h10' stroke='%23a3acba' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.cmp-mark-services {
    flex-wrap: wrap;
}

.cmp-pill {
    background: #fde7d3;
    border: 1px solid #f0c39d;
    border-radius: 999px;
    color: var(--cmp-gap-ink);
    flex: none;
    font-size: 0.7rem;
    font-weight: 760;
    padding: 0.05rem 0.45rem;
}

.cmp-mark b {
    font-weight: 720;
}

.cmp-src {
    display: none;
    font-size: 0.72rem;
    font-weight: 640;
    margin-top: 0.35rem;
    overflow-wrap: anywhere;
}

.cmp-page:has(#cmpShowSources:checked) .cmp-src {
    display: block;
}

.cmp-footnote {
    color: var(--ink-muted);
    font-size: 0.84rem;
    margin-top: 0.9rem;
    max-width: 80ch;
}

.cmp-gap-callout {
    align-items: start;
    background: var(--cmp-gap-bg);
    border: 1.5px dashed var(--cmp-gap-edge);
    border-radius: var(--radius);
    display: grid;
    gap: 1rem;
    grid-template-columns: 2.6rem minmax(0, 1fr);
    margin-top: 1.4rem;
    padding: 1.1rem 1.2rem;
}

.cmp-gap-swatch {
    background: var(--cmp-hatch);
    border: 1px solid #f0c39d;
    border-radius: 0.375rem;
    height: 2.6rem;
    width: 2.6rem;
}

.cmp-gap-callout h3 {
    color: var(--cmp-gap-ink);
}

.cmp-gap-callout p {
    color: var(--ink-soft);
    margin: 0;
    max-width: 78ch;
}

/* Under the lanes: where Ranx differs before the action plan, pointing to /method. The mark is a ranking's weights,
   colored by place. */
.cmp-method-callout {
    align-items: start;
    background: var(--cmp-blue-wash);
    border: 1px solid var(--cmp-line-strong);
    border-radius: var(--radius);
    display: grid;
    gap: 1rem;
    grid-template-columns: 2.6rem minmax(0, 1fr);
    margin-top: 1.4rem;
    padding: 1.1rem 1.2rem;
}

/* The ranking weights for four items (100/52/28/12), right-aligned as in the Ranx logo's four rails. */
.cmp-method-mark {
    display: grid;
    gap: 0.22rem;
    justify-items: end;
    padding-top: 0.2rem;
}

.cmp-method-mark i {
    background: var(--slot-1);
    border-radius: 999px;
    display: block;
    height: 0.45rem;
    width: 100%;
}

.cmp-method-mark i:nth-child(2) {
    background: var(--slot-2);
    width: 52%;
}

.cmp-method-mark i:nth-child(3) {
    background: var(--slot-3);
    width: 28%;
}

.cmp-method-mark i:nth-child(4) {
    background: var(--slot-4);
    width: 12%;
}

.cmp-method-callout h3 {
    margin: 0 0 0.35rem;
}

/* Two sentences: they run the box's full width, so the line ends near its edge, not two-thirds across. */
.cmp-method-callout p {
    color: var(--ink-soft);
    margin: 0;
}

@media (max-width: 640px) {
    .cmp-matrix .cmp-rowhead {
        min-width: 10.5rem;
        width: 10.5rem;
    }
}

/* Price the gap: the calculator island (RanxGapCalculator). */
.cmp-calc {
    align-items: start;
    display: grid;
    gap: 1.5rem;
    grid-template-columns: minmax(0, 23rem) minmax(0, 1fr);
    margin-top: 1.6rem;
}

@media (max-width: 960px) {
    .cmp-calc {
        grid-template-columns: minmax(0, 1fr);
    }
}

.cmp-panel {
    background: var(--paper);
    border: 1px solid var(--cmp-line-strong);
    border-radius: var(--radius);
    margin: 0;
    padding: 1.2rem;
}

.cmp-field {
    display: grid;
    gap: 0.4rem;
    margin-bottom: 1.15rem;
}

.cmp-field > label,
.cmp-who legend {
    font-size: 0.92rem;
    font-weight: 720;
}

.cmp-field-row {
    display: grid;
    gap: 0.8rem;
    grid-template-columns: 1fr 1fr;
}

.cmp-hint {
    color: var(--ink-muted);
    font-size: 0.8rem;
    line-height: 1.45;
    margin: 0.8rem 0 0;
}

.cmp-field .cmp-hint {
    margin: 0;
}

.cmp-who {
    border: 0;
    display: grid;
    gap: 0.45rem;
    margin: 0 0 1.15rem;
    padding: 0;
}

.cmp-who legend {
    margin-bottom: 0.45rem;
    padding: 0;
}

.cmp-who label {
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 0.375rem;
    cursor: pointer;
    display: grid;
    font-size: 0.88rem;
    gap: 0.55rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 0.55rem 0.7rem;
}

.cmp-who label.is-selected {
    background: var(--cmp-blue-wash);
    border-color: var(--blue);
    box-shadow: inset 0 0 0 1px var(--blue);
}

.cmp-who label b {
    display: block;
    font-weight: 700;
}

.cmp-who label small {
    color: var(--ink-muted);
    font-size: 0.76rem;
}

.cmp-who input {
    accent-color: var(--blue);
    margin: 0;
}

.cmp-rate {
    font-variant-numeric: tabular-nums;
    font-weight: 720;
    white-space: nowrap;
}

.cmp-input {
    background: var(--paper);
    border: 1px solid var(--cmp-line-strong);
    border-radius: 0.375rem;
    color: var(--ink);
    font: inherit;
    font-variant-numeric: tabular-nums;
    min-height: 2.5rem;
    padding: 0.45rem 0.6rem;
    width: 100%;
}

.cmp-range {
    align-items: center;
    display: grid;
    gap: 0.6rem;
    grid-template-columns: minmax(0, 1fr) 2.2rem;
}

.cmp-range input {
    accent-color: var(--blue);
    width: 100%;
}

.cmp-range output {
    font-variant-numeric: tabular-nums;
    font-weight: 740;
    text-align: right;
}

.cmp-assume {
    border-top: 1px solid var(--line);
    padding-top: 0.9rem;
}

.cmp-assume summary {
    color: var(--blue);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 720;
}

.cmp-assume-grid {
    display: grid;
    gap: 0.55rem;
    margin-top: 0.8rem;
}

.cmp-assume-grid label {
    align-items: center;
    display: grid;
    font-size: 0.84rem;
    gap: 0.6rem;
    grid-template-columns: minmax(0, 1fr) 4.6rem;
}

.cmp-assume-grid small {
    color: var(--ink-muted);
    display: block;
    font-size: 0.74rem;
}

.cmp-outcomes,
.cmp-stats {
    display: grid;
    gap: 0.8rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 1.3rem;
}

.cmp-outcomes {
    margin-bottom: 0.8rem;
}

@media (max-width: 560px) {
    .cmp-outcomes,
    .cmp-stats {
        grid-template-columns: minmax(0, 1fr);
    }
}

.cmp-outcome {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 0.375rem;
    color: var(--ink);
    cursor: pointer;
    display: block;
    font: inherit;
    padding: 0.75rem 0.85rem;
    text-align: left;
}

.cmp-outcome:hover {
    border-color: var(--blue);
}

.cmp-outcome:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

.cmp-outcome.is-selected {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
    cursor: default;
}

.cmp-outcome > span {
    color: var(--ink-muted);
    display: block;
    font-size: 0.78rem;
    font-weight: 680;
}

.cmp-outcome > span small {
    display: block;
    font-weight: 500;
}

.cmp-outcome strong {
    display: block;
    font-size: 1.55rem;
    font-variant-numeric: tabular-nums;
    font-weight: 760;
    line-height: 1.2;
    margin-top: 0.15rem;
}

.cmp-outcome > small {
    color: var(--ink-soft);
    display: block;
    font-size: 0.78rem;
    margin-top: 0.15rem;
}

.cmp-outcome.is-selected > span,
.cmp-outcome.is-selected > small {
    color: #c9d4ea;
}

.cmp-stat {
    border: 1px solid var(--line);
    border-radius: 0.375rem;
    padding: 0.75rem 0.85rem;
}

.cmp-stat span {
    color: var(--ink-muted);
    display: block;
    font-size: 0.78rem;
    font-weight: 680;
}

.cmp-stat strong {
    display: block;
    font-size: 1.55rem;
    font-variant-numeric: tabular-nums;
    font-weight: 760;
    line-height: 1.2;
    margin-top: 0.15rem;
}

.cmp-stat small {
    color: var(--ink-soft);
    display: block;
    font-size: 0.78rem;
    margin-top: 0.15rem;
}

.cmp-bars {
    display: grid;
    gap: 0.9rem;
    margin-bottom: 1.2rem;
}

.cmp-bar-row {
    display: grid;
    gap: 0.35rem;
}

.cmp-bar-label {
    display: flex;
    font-size: 0.86rem;
    font-weight: 700;
    gap: 1rem;
    justify-content: space-between;
}

.cmp-bar-label span:last-child {
    font-variant-numeric: tabular-nums;
    font-weight: 760;
}

.cmp-bar {
    background: var(--cmp-soft);
    border-radius: 0.375rem;
    display: flex;
    height: 2.1rem;
    overflow: hidden;
}

.cmp-seg {
    height: 100%;
    min-width: 0;
    transition: width 0.25s ease;
}

.cmp-seg-platform { background: var(--cmp-platform); }
.cmp-seg-outside { background: var(--cmp-hatch); box-shadow: inset 0 0 0 1px var(--cmp-gap-edge); }
.cmp-seg-ranx { background: var(--blue); }
.cmp-seg-review { background: #9db8f5; }

@media (prefers-reduced-motion: reduce) {
    .cmp-seg {
        transition: none;
    }
}

.cmp-bar-key {
    color: var(--ink-soft);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.76rem;
    gap: 0.3rem 1rem;
}

.cmp-bar-key span {
    align-items: center;
    display: inline-flex;
    gap: 0.35rem;
}

.cmp-bar-key i {
    border-radius: 2px;
    display: inline-block;
    height: 0.85rem;
    width: 0.85rem;
}

.cmp-tasks {
    border-collapse: collapse;
    font-size: 0.84rem;
    width: 100%;
}

.cmp-tasks th,
.cmp-tasks td {
    border-bottom: 1px solid var(--line);
    padding: 0.5rem 0.4rem;
    text-align: left;
    vertical-align: top;
}

.cmp-tasks th {
    color: var(--ink-muted);
    font-size: 0.74rem;
    font-weight: 720;
}

.cmp-tasks .cmp-num {
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.cmp-tag-in,
.cmp-tag-out {
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 720;
    padding: 0.08rem 0.5rem;
    white-space: nowrap;
}

.cmp-tag-in {
    background: var(--cmp-blue-tint);
    color: var(--blue-dark);
}

.cmp-tag-out {
    background: #fde7d3;
    color: var(--cmp-gap-ink);
}

/* Price as you grow: js/compare.js draws the SVG at the chart's own width. */
.cmp-chart-panel {
    margin: 1.6rem 0 1rem;
}

.cmp-chart-title {
    font-size: 0.92rem;
    font-weight: 720;
    margin-bottom: 0.6rem;
    text-align: left;
}

.cmp-chart-legend {
    color: var(--ink-soft);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.82rem;
    gap: 0.35rem 1.1rem;
    margin-bottom: 0.4rem;
}

.cmp-chart-legend span {
    align-items: center;
    display: inline-flex;
    gap: 0.4rem;
}

.cmp-chart-legend i {
    border-radius: 2px;
    height: 3px;
    width: 1.1rem;
}

.cmp-chart {
    min-height: 260px;
    position: relative;
}

.cmp-chart svg {
    display: block;
    height: auto;
    overflow: visible;
    touch-action: pan-y;
    width: 100%;
}

.cmp-chart-axis text {
    fill: var(--ink-muted);
    font-family: "Public Sans", "Segoe UI", Arial, sans-serif;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.cmp-chart-grid line {
    stroke: var(--line);
    stroke-width: 1;
}

.cmp-chart-base {
    stroke: var(--cmp-line-strong);
    stroke-width: 1;
}

.cmp-chart-line {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.cmp-chart-label {
    fill: var(--ink);
    font-family: "Public Sans", "Segoe UI", Arial, sans-serif;
    font-size: 12.5px;
    font-weight: 680;
    paint-order: stroke;
    stroke: var(--paper);
    stroke-width: 4px;
}

.cmp-chart-sub {
    fill: var(--ink-soft);
    font-weight: 520;
}

.cmp-chart-cross {
    stroke: var(--ink-muted);
    stroke-dasharray: 3 3;
    stroke-width: 1;
}

.cmp-chart-mark {
    stroke: var(--paper);
    stroke-width: 2;
}

.cmp-chart-tip {
    background: var(--paper);
    border: 1px solid var(--cmp-line-strong);
    border-radius: 0.375rem;
    box-shadow: 0 6px 18px rgba(13, 35, 78, 0.12);
    font-size: 0.8rem;
    min-width: 12rem;
    padding: 0.55rem 0.7rem;
    pointer-events: none;
    position: absolute;
    z-index: 3;
}

.cmp-chart-tip b {
    display: block;
    margin-bottom: 0.25rem;
}

.cmp-chart-tip div {
    align-items: center;
    display: grid;
    gap: 0.45rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.cmp-chart-tip i {
    border-radius: 50%;
    height: 0.6rem;
    width: 0.6rem;
}

.cmp-chart-tip span:last-child {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.cmp-growth-table caption {
    caption-side: top;
}

/* Other ways teams do this today. */
.cmp-ways {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
    margin-top: 1.4rem;
}

.cmp-way {
    align-content: start;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    display: grid;
    gap: 0.55rem;
    padding: 1.1rem;
}

.cmp-way h3 {
    margin: 0;
}

.cmp-way p {
    color: var(--ink-soft);
    font-size: 0.92rem;
    margin: 0;
}

.cmp-kicker {
    color: var(--ink-muted);
    font-size: 0.76rem;
    font-weight: 720;
}

.cmp-price {
    font-size: 0.84rem;
    font-variant-numeric: tabular-nums;
    font-weight: 680;
}

.cmp-way .cmp-after {
    border-top: 1px dashed var(--cmp-gap-edge);
    font-size: 0.86rem;
    padding-top: 0.55rem;
}

.cmp-after b {
    color: var(--cmp-gap-ink);
    font-weight: 720;
}

.cmp-sources {
    display: grid;
    gap: 1.4rem 2rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
    margin-top: 1.4rem;
}

.cmp-sources h3 {
    font-size: 0.95rem;
}

.cmp-sources ul {
    color: var(--ink-soft);
    font-size: 0.84rem;
    margin: 0;
    padding-left: 1.1rem;
}

.cmp-sources li {
    margin-bottom: 0.3rem;
    overflow-wrap: anywhere;
}

/* Playbook audiences on phones: the Employee card, then the other audiences two by two, stacked rather than swiped. */
@media (max-width: 720px) {
    .audience-filter-grid {
        grid-auto-flow: row;
        grid-template-columns: minmax(0, 1fr);
        overflow-x: visible;
        padding-bottom: 0;
        scroll-snap-type: none;
    }
}

/* The Ranx method (/method): two ways to find what matters, how a ranking becomes weights, and the math. The weight
   bars and the two-person illustration take their color from the place (--slot), as the app does. */
.method-page {
    --method-soft: #f7f9fc;
    --method-line-strong: #cdd7e6;
    --method-blue-tint: #eef3fe;
}

.method-hero {
    min-height: 0;
    padding-bottom: 1rem;
}

.method-section {
    margin: 0 auto;
    max-width: var(--max);
    padding: clamp(2.5rem, 5vw, 4rem) clamp(1rem, 3vw, 2rem);
}

.method-band-soft {
    background: var(--method-soft);
    border-block: 1px solid var(--line);
}

.method-lede {
    color: var(--ink-soft);
    font-size: 1.08rem;
    max-width: 68ch;
}

.method-ways,
.method-weights {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 1.4rem;
}

.method-way,
.method-panel,
.method-reasons article {
    align-content: start;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    display: grid;
    gap: 0.6rem;
    margin: 0;
    padding: 1.2rem;
}

.method-way-ranx {
    background: var(--method-blue-tint);
    border-color: var(--method-line-strong);
}

.method-kicker {
    color: var(--ink-muted);
    font-size: 0.78rem;
    font-weight: 720;
}

.method-way-ranx .method-kicker {
    color: var(--blue);
}

.method-way h3,
.method-reasons h3 {
    font-size: 1.08rem;
    margin: 0;
}

.method-way ol {
    color: var(--ink-soft);
    display: grid;
    gap: 0.45rem;
    margin: 0;
    padding-left: 1.2rem;
}

.method-way-note,
.method-hint {
    color: var(--ink-muted);
    font-size: 0.86rem;
    margin: 0;
}

.method-way-note {
    border-top: 1px dashed var(--method-line-strong);
    padding-top: 0.6rem;
}

.method-panel figcaption {
    font-size: 0.95rem;
    font-weight: 720;
}

.method-weight-list {
    display: grid;
    gap: 0.55rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.method-weight-list li {
    align-items: center;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 2.6rem minmax(0, 1fr) 3.4rem;
}

.method-place {
    background: var(--slot);
    border-radius: 999px;
    color: var(--slot-ink);
    font-size: 0.8rem;
    font-weight: 760;
    padding: 0.15rem 0;
    text-align: center;
}

.method-bar {
    background: var(--paper-soft);
    border-radius: 999px;
    display: block;
    height: 0.7rem;
    overflow: hidden;
}

.method-bar i {
    background: var(--slot);
    border-radius: 999px;
    display: block;
    height: 100%;
}

.method-weight-list strong,
.method-person strong {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.method-people {
    display: grid;
    gap: 1rem;
}

.method-person {
    align-items: center;
    border-left: 4px solid var(--slot);
    display: grid;
    gap: 0.35rem 0.75rem;
    grid-template-columns: minmax(0, 1fr) 3.4rem;
    padding-left: 0.8rem;
}

.method-person-name,
.method-person-math {
    grid-column: 1 / -1;
}

.method-person-name {
    font-weight: 650;
}

.method-person-math {
    color: var(--ink-soft);
    font-size: 0.88rem;
}

.method-reasons {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 1.4rem;
}

.method-reasons p {
    color: var(--ink-soft);
    font-size: 0.94rem;
    margin: 0;
}

.method-availability {
    color: var(--ink-muted);
    display: block;
    font-size: 0.88rem;
    margin-top: 0.4rem;
}

.method-math {
    display: grid;
    gap: 0;
    margin: 1.4rem 0 1rem;
    max-width: 52rem;
}

.method-math div {
    border-top: 1px solid var(--line);
    display: grid;
    gap: 1rem;
    grid-template-columns: 7rem minmax(0, 1fr);
    padding: 0.9rem 0;
}

.method-math dt {
    font-weight: 760;
}

.method-math dd {
    color: var(--ink-soft);
    margin: 0;
}

@media (max-width: 1060px) {
    .method-reasons {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .method-ways,
    .method-weights,
    .method-reasons {
        grid-template-columns: minmax(0, 1fr);
    }

    .method-math div {
        gap: 0.3rem;
        grid-template-columns: minmax(0, 1fr);
    }
}