/* Use-case presentation only. Shared navigation and product styles stay in style.css. */
.uc-page .uc-hero {
    padding-top: 132px;
    padding-bottom: 72px;
    background: linear-gradient(145deg, #fff 0%, #f5f3ef 100%);
    border-bottom: 1px solid #e6e2ec;
}
.uc-page .uc-hero > div { max-width: 1160px; }
.uc-page .uc-hero h1 { color: #252044; font-size: clamp(2.2rem, 3.5vw, 3.3rem); line-height: 1.1; }
.uc-page .uc-hero img { display: block; width: 100%; height: auto; border: 1px solid #e6e2ec; box-shadow: 0 18px 54px #25204412; }
.uc-page .uc-context { display: flex; align-items: center; gap: 10px; margin: 0 0 24px; color: #5b556a; font-size: 14px; font-weight: 600; }
.uc-page .uc-context a, .uc-page .uc-text-link, .uc-page .uc-related a, .uc-page .uc-plan-note a { color: #4338ca; text-decoration: underline; text-underline-offset: 4px; }
.uc-page .uc-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; }
.uc-page .uc-text-link { font-size: 15px; font-weight: 600; padding: 12px 0; }
.uc-page #pros { padding-top: 64px; padding-bottom: 72px; }
.uc-page .pro-item { border-color: #e6e2ec; box-shadow: none; }
.uc-page .pro-item summary { color: #252044; }
.uc-page .uc-related { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 28px; margin-top: 24px; font-size: 15px; font-weight: 600; }
.uc-page .uc-plan-note { max-width: 600px; margin: 24px auto 0; color: #5b556a; font-size: 14px; text-align: left; line-height: 1.65; }
.uc-page .uc-plan-note summary { cursor: pointer; padding: 12px 0; font-weight: 600; }
.uc-page .uc-plan-note p { margin: 0 0 12px; }
.uc-page a:focus-visible, .uc-page summary:focus-visible { outline: 3px solid #4338ca; outline-offset: 5px; }
.uc-hub .uc-flagship-badge { position: static; margin: 0 0 20px; }
@media (max-width: 767px) {
    .uc-page .uc-hero { padding-top: 110px; padding-bottom: 44px; }
    .uc-page .uc-hero > div { gap: 36px; }
    .uc-page .uc-hero h1 { font-size: clamp(2rem, 7.8vw, 2.8rem); }
    .uc-page .uc-actions { gap: 10px 20px; }
    .uc-page #pros { padding: 40px 20px 52px; }
    .uc-page .pro-item { padding: 20px; }
    .uc-page .pro-item summary { font-size: 17px; }
    .uc-page .uc-related { gap: 12px 24px; }
}

/* Founding-cohort note under the closing CTA: an expandable, styled like the rest of the page rather
   than a bare browser disclosure. */
.uc-page .uc-plan-note summary { list-style: none; position: relative; padding-right: 28px; }
.uc-page .uc-plan-note summary::-webkit-details-marker { display: none; }
.uc-page .uc-plan-note summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 20px; font-weight: 500; color: #4338ca; }
.uc-page .uc-plan-note[open] summary::after { content: "\2212"; }

/* Comparison table on /uses/meetings/ (2026-09-11): row headers, the vendor's own sentence per cell,
   superscripts to a Sources list. Rows stack at phone width so three vendor sentences never sit side
   by side at 390px; each cell then carries its column name above it from data-col. */
.uc-page .uc-compare { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.uc-page .uc-compare th, .uc-page .uc-compare td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid #e6e2ec; }
.uc-page .uc-compare thead th { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #5b556a; padding-top: 0; }
.uc-page .uc-compare tbody th { color: #252044; font-weight: 600; width: 21%; }
.uc-page .uc-compare tbody td:first-of-type { color: #252044; font-weight: 600; }
.uc-page .uc-compare tbody tr:last-child th, .uc-page .uc-compare tbody tr:last-child td { border-bottom: 0; }
.uc-page .uc-compare sup { line-height: 0; }
.uc-page .uc-compare sup a { color: #4338ca; text-decoration: none; font-weight: 600; padding-left: 2px; }
.uc-page .uc-sources { list-style: decimal; margin: 28px 0 0; padding-left: 1.6em; color: #5b556a; font-size: 13px; line-height: 1.5; }
.uc-page .uc-sources li { margin: 0 0 8px; }
.uc-page .uc-sources a { color: #4338ca; word-break: break-all; }
.uc-page .uc-cta-note { margin: 12px 0 0; color: #5b556a; font-size: 14px; }
@media (max-width: 1023px) {
    .uc-page .uc-compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .uc-page .uc-compare tr { display: block; padding: 12px 0; border-bottom: 1px solid #e6e2ec; }
    .uc-page .uc-compare tbody tr:last-child { border-bottom: 0; }
    .uc-page .uc-compare th, .uc-page .uc-compare td { display: block; width: auto; border: 0; padding: 4px 0; }
    .uc-page .uc-compare tbody th { width: auto; padding-bottom: 6px; font-size: 16px; }
    .uc-page .uc-compare td::before { content: attr(data-col); display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #5b556a; margin-top: 6px; }
}

/* The hero frame on /uses/meetings/: a figure with the team's caption under the still. */
.uc-page .uc-hero .uc-hero-figure { margin: 0; }
.uc-page .uc-hero .uc-hero-figure figcaption { margin-top: 10px; font-size: 13px; line-height: 1.4; color: #5b556a; }

/* One visual journey across the chooser, the audience page and app entry. */
.uc-page #main-nav { position: sticky; top: 0; }
.uc-page #main-nav > div:first-child > div { flex-wrap: wrap; gap: 10px 20px; }
.uc-page #main-nav > div:first-child > div > a { min-width: 0; max-width: 100%; }
.uc-page #main-nav .space-x-8 { flex-wrap: wrap; gap: 8px 20px; margin-left: auto; }
.uc-page #main-nav .space-x-8 > * { margin-left: 0; }
.uc-page #main-nav .nav-brand-text { min-width: 0; }
.uc-page #main-nav .btn-primary { max-width: 100%; white-space: normal; }
.uc-page .uc-hero { padding-top: 46px; padding-bottom: 60px; background: #faf9f7; }
.uc-page .uc-hero h1 { font-weight: 650; letter-spacing: -.045em; }
.uc-page .uc-hero > div { gap: 56px; }
.uc-page .uc-hero img { border-radius: 16px; box-shadow: 0 14px 40px #2520440c; }
.uc-page .uc-context { margin-bottom: 20px; font-size: 13px; font-weight: 500; }
.uc-page .uc-actions { gap: 12px 22px; }
.uc-page .uc-actions .btn-primary { min-height: 52px; }
.uc-page .uc-text-link { font-size: 14px; line-height: 1.5; }
.uc-page .pro-item { border-radius: 12px; background: #fff; transition: border-color .15s ease; }
.uc-page .pro-item:hover { transform: none; border-color: #b9b0d4; box-shadow: none; }
.uc-page .pro-item[open] { border-color: #afa4d7; }
.uc-page .pro-item summary { font-weight: 600; line-height: 1.5; }
.uc-page .pro-item > div { line-height: 1.7; }
/* Keep vertical-page examples in their disclosure cards. The older desktop stage
   in style.css positions screenshots beside a narrow column; nested answers do
   not share that column, so its flyout math can put their media off the page. */
.uc-page #pros .pros-stage {
    display: block;
    width: 100%;
    max-width: 1040px;
    min-height: 0;
    margin-inline: auto;
}
.uc-page #pros .pros-stage > * { min-width: 0; }
.uc-page #pros .pros-stage > * + * { margin-top: 16px; }
.uc-page #pros .pro-item { padding: clamp(18px, 2.5vw, 28px); }
.uc-page #pros .pro-item > div { max-width: 880px; }
.uc-page #pros .pros-stage > div:has(> .pro-item) {
    width: 100%;
    max-width: none;
    padding-top: 40px;
}
.uc-page #pros .pros-stage > div > .pro-item + .pro-item { margin-top: 16px; }
.uc-page #pros .pros-stage .pro-fly {
    position: static;
    inset: auto;
    width: 100%;
    max-width: 900px;
    margin: 24px auto 0;
    padding: 16px;
    border: 1px solid #e6e2ec;
    border-radius: 14px;
    background: #faf9fc;
    box-shadow: none;
    transform: none;
    animation: none;
    z-index: auto;
}
.uc-page #pros .pros-stage .pro-fly img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 560px;
    margin-inline: auto;
    object-fit: contain;
    border: 1px solid #e6e2ec;
    border-radius: 8px;
}
.uc-page #pros .pros-stage .pro-fly figcaption {
    margin: 12px 0 0;
    padding: 0;
    color: #5b556a;
    font-size: .8125rem;
    line-height: 1.6;
    text-align: center;
}
@media (max-width: 767px) {
    .uc-page #pros .pros-stage > * + *,
    .uc-page #pros .pros-stage > div > .pro-item + .pro-item { margin-top: 12px; }
    .uc-page #pros .pro-item > div { padding-left: 0; }
    .uc-page #pros .pros-stage .pro-fly { margin-top: 20px; padding: 10px; border-radius: 10px; }
    .uc-page #pros .pros-stage .pro-fly figcaption { text-align: left; }
}
.uc-page #faq > div { max-width: 900px; }
.uc-page #cta .btn-primary, .uc-page #pros .btn-primary { min-height: 52px; }
.uc-hub .uc-hub-intro { padding-top: 54px; padding-bottom: 36px; }
.uc-hub .uc-hub-intro h1 { max-width: 820px; font-size: clamp(2.2rem, 4.1vw, 3.6rem); line-height: 1.08; font-weight: 650; letter-spacing: -.045em; }
.uc-hub .uc-hub-intro p { font-size: 1rem; line-height: 1.65; }
.uc-hub .uc-hub-intro .fade-up { opacity: 1; transform: none; }
.uc-hub .uc-hub-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.uc-hub .uc-hub-grid > .card { padding: 28px; border: 1px solid #e0dce9; border-radius: 16px; box-shadow: none; }
.uc-hub .uc-hub-grid > .card:hover { transform: none; border-color: #aa9fe0; background: #fdfcff; }
.uc-hub .uc-hub-grid .badge { background: #f0edf8; color: #53486f; font-weight: 550; }
.uc-hub .uc-hub-grid h2 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); font-weight: 600; line-height: 1.3; letter-spacing: -.025em; }
.uc-hub .uc-hub-grid p { color: #5b556a; font-size: .9375rem; line-height: 1.7; }
.uc-hub .uc-hub-featured { grid-column: 1 / -1; position: relative; }
.uc-hub .uc-hub-featured .uc-flagship-badge { margin-bottom: 14px; }
.uc-hub .uc-hub-featured .uc-flagship-badge .badge { color: #3730a3; background: #ebe7fa; font-size: 10px; }
.uc-hub .uc-hub-featured h2, .uc-hub .uc-hub-featured p { max-width: 780px; }
.uc-hub .uc-featured-link::after { content: ''; position: absolute; inset: 0; border-radius: 16px; }
.uc-hub .uc-hub-featured sup a { position: relative; z-index: 1; }
.uc-hub .uc-hub-featured:has(.uc-featured-link:focus-visible) { outline: 3px solid #4338ca; outline-offset: 4px; }
.uc-hub .uc-featured-link:focus-visible { outline: none; }
@media (max-width: 767px) {
    .uc-page #main-nav > div:first-child > div > a { flex: 1 1 8rem; }
    .uc-page #main-nav > div:first-child > div > div:last-child { margin-left: auto; flex-shrink: 0; }
    .uc-page .uc-hero { padding-top: 32px; padding-bottom: 40px; }
    .uc-page .uc-hero > div { gap: 30px; }
    .uc-page .uc-hero h1 { font-size: clamp(2rem, 7.5vw, 2.6rem); }
    .uc-page .uc-context { margin-bottom: 18px; }
    .uc-page .uc-hero img { border-radius: 12px; }
    .uc-page .uc-actions { align-items: flex-start; flex-direction: column; gap: 6px; }
    .uc-page .uc-actions .btn-primary { width: 100%; padding-left: 18px !important; padding-right: 18px !important; }
    .uc-page .uc-actions .uc-text-link { padding: 12px 0; }
    .uc-page .pro-item { padding: 18px; }
    .uc-page .pro-item summary { font-size: 1rem; }
    .uc-page #faq { padding: 40px 20px; }
    .uc-hub .uc-hub-intro { padding: 38px 20px 28px; }
    .uc-hub .uc-hub-intro h1 { font-size: clamp(2rem, 7.8vw, 2.8rem); }
    .uc-hub .uc-hub-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .uc-hub .uc-hub-grid > .card { padding: 24px; }
}
@media (prefers-reduced-motion: reduce) {
    .uc-page .pro-item { transition: none; }
}

/* Cross-event intelligence (2026-09-27, restored on the founder's word): each vertical's insight cards as a grid under the
   pros, plus an optional scene. One block for every vertical so the seven pages draw them the same way. */
.uc-page .uc-insights { padding: 34px 0 8px; }
.uc-page .uc-insights h2 { color: #252044; font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 650; letter-spacing: -.035em; line-height: 1.15; margin: 0 0 12px; text-wrap: balance; }
.uc-page .uc-insights .uc-insights-lead { color: #5b556a; font-size: 1rem; line-height: 1.65; max-width: 720px; margin: 0 0 26px; }
.uc-page .uc-insight-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.uc-page .uc-insight { padding: 24px 26px; border: 1px solid #e0dce9; border-radius: 16px; background: #fff; transition: border-color .15s ease; }
.uc-page .uc-insight:hover { border-color: #b9b0d4; }
.uc-page .uc-insight-n { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #4338ca; margin: 0 0 10px; }
.uc-page .uc-insight h3 { color: #252044; font-size: 1.125rem; font-weight: 600; line-height: 1.35; letter-spacing: -.02em; margin: 0 0 8px; }
.uc-page .uc-insight p { color: #5b556a; font-size: .9375rem; line-height: 1.7; margin: 0; }
.uc-page .uc-insight p.uc-insight-n { color: #4338ca; }
.uc-page .uc-scene { margin: 26px 0 0; padding: 22px 26px; border-left: 3px solid #4338ca; border-radius: 0 16px 16px 0; background: #f8f7ff; }
.uc-page .uc-scene .uc-scene-label { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #4338ca; margin: 0 0 8px; }
.uc-page .uc-scene p { color: #3f3a55; font-size: .9375rem; line-height: 1.7; margin: 0 0 10px; }
.uc-page .uc-scene p:last-child { margin-bottom: 0; }
@media (max-width: 767px) {
    .uc-page .uc-insights { padding-top: 24px; }
    .uc-page .uc-insight-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .uc-page .uc-insight { padding: 20px; }
    .uc-page .uc-scene { padding: 18px 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .uc-page .uc-insight { transition: none; }
}