/* ============================================================================
 * /why-us
 *
 * Loaded automatically by the landing-light theme because the filename matches
 * the CMS page URL (viewmodels/cms/cmspage_viewmodel.resolve_page_css), which
 * also guarantees it lands AFTER landing-cms-page-light-bulma.css. Several rules
 * here win on cascade order rather than specificity, so that ordering matters.
 *
 * Values come from b2b-tokens.css, linked immediately above this file by the
 * theme. This page is a founder's letter, so it is deliberately quieter than
 * /team-trial: no eyebrow, no saturated CTA above the fold, and the comparison
 * table's tinted column is the only real block of colour on the page.
 *
 * SCOPING
 * Unlike team-trial.css, this file scopes to .landing-cms rather than to a
 * page-specific class. That is because the prose here is markdown at the top
 * level of the CMS body, and markdown2 runs without the markdown-in-html extra,
 * so wrapping paragraphs in a <div class="why-us"> would pass them through
 * verbatim and leak [links](x) and **bold** as raw text. Scoping to
 * .landing-cms is safe by construction: resolve_page_css only ever serves this
 * file on /why-us, so these rules cannot reach another CMS landing page.
 * ========================================================================= */

.landing-cms {
    color: var(--tp-ink);
    font-family: var(--tp-font-sans);
    font-size: var(--tp-fs-body);
    line-height: var(--tp-lh-body);
}

/* -------------------------------------------------------------- THE FRAME */
/* .landing-cms is the white panel itself (landing-cms-page-light-bulma.css sets
   background-color: white on it), and html underneath is #000 via site-bulma's
   `html:has(body.has-gradient-background)`. So the container must stay full
   width: capping it here shrinks the white panel rather than the text column,
   and the page renders as a narrow white strip with black either side.
 *
 * The measure therefore goes on the children instead. Two things then opt out
 * and run wider: the comparison table, and nothing else. */

.landing-cms {
    padding: 3.5rem var(--tp-gutter) 4rem;
}

/* ------------------------------------------------------------- TYPOGRAPHY */

.landing-cms h1 {
    font-family: var(--tp-font-serif);
    font-size: var(--tp-fs-h1);
    font-weight: 700;
    line-height: var(--tp-lh-tight);
    letter-spacing: -0.02em;
    margin: 0 0 0.75rem;
    text-align: center;
}

.landing-cms h2 {
    font-family: var(--tp-font-serif);
    font-size: var(--tp-fs-h2);
    font-weight: 700;
    line-height: var(--tp-lh-tight);
    letter-spacing: -0.01em;
    color: var(--tp-ink);
    margin: 3.5rem 0 0.5rem;
    scroll-margin-top: 5rem; /* 50px fixed navbar plus air; matches team-trial.css */
}

.landing-cms p {
    margin: 0 0 1.15rem;
}

/* Mirrors the theme's own selector shape at (0,1,3) so the cool ink replaces its
   pure black on cascade order. The :not()s are load-bearing: a bare
   `.landing-cms strong` also paints the <strong> inside [**link**](x), which turned
   every markdown bold-link on this page into black text with a pale underline. */
.landing-cms strong:not(a):not(a *) {
    font-weight: 600;
    color: var(--tp-ink);
}

.landing-cms a strong {
    font-weight: 600;
    color: inherit;
}

/* Prose links carry an underline, not just colour. The link blue against body
   copy is about 1.8:1, and WCAG G183 wants 3:1 wherever colour is the only cue.
   Darkening the link makes that worse, not better, because it moves toward the
   body colour, so the second cue has to be non-chromatic. */
.landing-cms p a:not(.wu-btn),
.landing-cms li a:not(.wu-btn) {
    color: var(--tp-blue) !important; /* theme's .landing-cms a:not(.button):not(.btn) is (0,3,1) */
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    text-decoration-color: hsl(207, 56%, 72%);
}

.landing-cms p a:not(.wu-btn):hover,
.landing-cms li a:not(.wu-btn):hover {
    color: var(--tp-blue-darker) !important;
    text-decoration-color: currentColor;
}

/* ~73 characters at 17px. Must come AFTER the typography rules above: those use
   `margin: x 0 y` shorthands, which reset margin-left/right to 0 and would
   silently left-align everything while still honouring the max-width. */
.landing-cms > h1,
.landing-cms > h2,
.landing-cms > h3,
.landing-cms > p,
.landing-cms > ul,
.landing-cms > ol,
.landing-cms > blockquote,
.landing-cms > nav,
.landing-cms > .wu-teams {
    max-width: 42rem;
    margin-inline: auto;
}

/* The title is display type, not prose, so it is not bound by the reading
   measure. At 42rem it broke "Why choose Talk Python Training?" across two lines
   for no reason; the clamp still shrinks it on narrow screens. */
.landing-cms > h1 {
    max-width: 56rem;
}

/* ------------------------------------------------------ BYLINE + JUMP BAR */
/* A letter is long, and comparison-intent readers arrive wanting one section.
   This lets them get there without the opening losing its shape. */

.landing-cms .wu-jump {
    display: block;
    margin: 0 auto 2.5rem;
    padding-bottom: 1.75rem;
    border-bottom: 1px solid var(--tp-line);
    text-align: center;
}

/* Was #777 at 0.8em, about 4.5:1 at 13.6px, which fails AA. */
.landing-cms .wu-byline {
    display: block;
    margin-bottom: 1.25rem;
    /* Centred to sit under the h1. It used to inherit this from .wu-jump, and lost
       it when the byline moved out of the <nav> so screen readers stop hearing it
       announced as part of the navigation landmark. */
    text-align: center;
    font-size: var(--tp-fs-fine);
    color: var(--tp-ink-3);
}

.landing-cms .wu-jump-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.75rem;
}

.landing-cms .wu-jump-links a {
    font-size: var(--tp-fs-small);
    font-weight: 600;
    color: var(--tp-blue);
    text-decoration: none;
}

.landing-cms .wu-jump-links a:hover {
    color: var(--tp-blue-darker);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ----------------------------------------------------------------- QUOTES */
/* Two on the page, down from seven. The second through fourth of any quote
   block get skimmed, and a wall of them sat between the reader and the
   comparison they came for. */

.landing-cms blockquote {
    margin: 1.75rem auto;
    padding: 0 0 0 1.25rem;
    border-left: 3px solid var(--tp-line-strong);
    background: none;
    font-family: var(--tp-font-serif);
    font-size: var(--tp-fs-body-lg);
    line-height: var(--tp-lh-relaxed);
    color: var(--tp-ink-2);
}

.landing-cms blockquote p {
    margin: 0;
    /* base-bulma sets font-family/size/line-height on `.landing-cms p`, which matches
       this paragraph directly and so beats inheritance from the blockquote. */
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

.landing-cms blockquote cite {
    display: block;
    margin-top: 0.5rem;
    font-family: var(--tp-font-sans);
    font-size: var(--tp-fs-fine);
    font-style: normal;
    color: var(--tp-ink-3);
}

/* ------------------------------------------------------- COMPARISON TABLE */
/* One table, not three. Our column used to be written out once per competitor,
   which is exactly why all three drifted to the same wrong figures at once.
 *
 * No red and no green in here. Colour never carries the argument: the words do,
 * and the single emphasised column is marked by tint and weight so it survives
 * greyscale, colour vision deficiency and printing. */

.landing-cms .wu-scroll {
    overflow-x: auto;
    margin: 2rem 0;
}

/* A five-column comparison is not prose and suffocates at reading width: every
   cell wraps and the rows stop scanning horizontally, which is the only thing a
   comparison table is for. Now that the container is full width this is just a
   wider max-width, with no negative margins or viewport arithmetic to get wrong
   at the sizes between the two. */
.landing-cms .wu-scroll {
    max-width: 60rem;
    margin-inline: auto;
}

/* Beats `.landing-cms table { width: 65% !important }` in the theme. Both are
   important author declarations, so specificity decides: (0,2,0) over (0,1,1).
   Do not "simplify" this to a bare .wu-table, which would lose. */
.landing-cms .wu-table {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    min-width: 44rem;
    border: 0 !important; /* theme adds a #ddd bottom rule, a different grey to --tp-line */
    border-collapse: separate !important; /* theme has collapse !important; sticky cells need separate */
    border-spacing: 0;
    table-layout: fixed; /* content-sized columns made our column widest, which reads as a thumb on the scale */
    font-size: var(--tp-fs-small);
}

.landing-cms .wu-table caption {
    caption-side: bottom;
    position: sticky;
    left: 0;
    /* The caption is a sentence of prose about the table, so it sits on the text
       column rather than the table's left edge, which is 144px further out. The
       min() keeps it inside the viewport once the table starts scrolling. */
    width: min(42rem, 100vw - 2 * var(--tp-gutter));
    margin-top: 0.75rem;
    margin-inline: auto;
    text-align: left;
    font-size: var(--tp-fs-fine);
    line-height: 1.5;
    color: var(--tp-ink-3);
}

.landing-cms .wu-table th,
.landing-cms .wu-table td {
    padding: 0.85rem 1rem;
    text-align: left;
    vertical-align: top;
    border: 0;
    border-bottom: 1px solid var(--tp-line);
    background: transparent;
}

/* The theme stripes rows and lights them on hover. Stripes fight the tinted
   column, and a hover state on a non-interactive row implies it is clickable.
 *
 * Deliberately (0,2,2) and NOT the obvious :nth-child(even)/:hover pair, which
 * lands at (0,3,2) and outranks this file's own .wu-ours (0,3,0) and
 * th[scope='row'] (0,3,1). That version striped the emphasised column with two
 * holes, one of them the catalog row, and hovering any row erased both the tint
 * and the sticky column's white backing. This ties the theme's rules and wins on
 * load order while still losing to the two rules that are meant to win. */
.landing-cms .wu-table tr th,
.landing-cms .wu-table tr td {
    background: transparent;
}

.landing-cms .wu-table thead th {
    font-weight: 600;
    color: var(--tp-ink);
    border-top: 3px solid transparent; /* reserved, so only .wu-ours colours it and baselines stay level */
    border-bottom: 2px solid var(--tp-line-strong);
}

.landing-cms .wu-table thead th:first-child {
    width: 11rem;
}

.landing-cms .wu-table thead th + th {
    width: calc((100% - 11rem) / 4);
}

/* Row labels stay put while the competitor columns scroll. The header corner
   pins with them: without it the competitor headings slide into the strip above
   the pinned labels with nothing behind them, which is the render-bug look the
   edge shadow exists to avoid. */
.landing-cms .wu-table th[scope='row'],
.landing-cms .wu-table thead th:first-child {
    position: sticky;
    left: 0;
    background: var(--tp-surface-0);
}

.landing-cms .wu-table thead th:first-child {
    z-index: 2;
}

.landing-cms .wu-table th[scope='row'] {
    z-index: 1;
    font-weight: 600;
    color: var(--tp-ink);
}

/* The one emphasised column. --tp-blue-fill, not --tp-blue-tint: at 1.10:1 the
   tint vanishes as a narrow strip beside white cells, and this strip is the
   most important signal in the table. */
.landing-cms .wu-table .wu-ours {
    background: var(--tp-blue-fill);
    color: var(--tp-ink);
    font-weight: 600;
}

.landing-cms .wu-table thead .wu-ours {
    border-top-color: var(--tp-blue-dark);
    border-bottom-color: var(--tp-blue-dark);
}

/* --tp-line measures 1.24:1 on white but 1.05:1 on --tp-blue-fill, so every row
   rule visibly broke across the one column the reader is meant to trust. */
.landing-cms .wu-table .wu-ours {
    border-bottom-color: hsl(207, 38%, 84%);
}

/* Close the bracket the 3px header rule opens, so the tint reads as a
   deliberate block rather than a fill that stops mid-air. */
.landing-cms .wu-table tbody tr:last-child .wu-ours {
    border-bottom: 3px solid var(--tp-blue-dark);
}

.landing-cms .wu-table .wu-note {
    display: block;
    margin-top: 0.3rem;
    font-size: var(--tp-fs-fine);
    font-weight: 400;
    line-height: 1.4;
    color: var(--tp-ink-3);
}

/* On the tint, ink-3 loses too much contrast. */
.landing-cms .wu-table .wu-ours .wu-note {
    color: var(--tp-ink-2);
}

/* Hidden visually, but the empty corner cell still needs an accessible name. */
.landing-cms .wu-vh {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* -------------------------------------------------------------- LISTS + H3 */
/* The theme's defaults are a 2em indent and a 1.5em bottom margin, and its h3 is
   28px serif. Neither belongs here. */

.landing-cms ul {
    /* auto, not 0: this shorthand runs after the measure rule and would otherwise
       reset margin-inline and drop the list out of the text column. */
    margin: 0 auto 1.15rem;
    padding-left: 1.25rem;
}

.landing-cms li {
    margin: 0 0 0.6rem;
}

.landing-cms li::marker {
    color: var(--tp-ink-3);
}

.landing-cms h3 {
    font-family: var(--tp-font-sans);
    font-size: var(--tp-fs-h3);
    font-weight: 600;
    line-height: var(--tp-lh-snug);
    margin: 2rem 0 0.5rem;
}

/* ------------------------------------------------------------ TEAMS PANEL */
/* The one section with a job to do gets the page's single surface-above-surface
   moment, which is also the only material language it shares with /team-trial's
   tinted bands. Written as raw HTML in the body because a block-level wrapper
   stops markdown2 processing what is inside it. */

.landing-cms .wu-teams {
    margin: 3.5rem auto 2rem;
    padding: 2rem 2rem 2.25rem;
    background: var(--tp-surface);
    border-radius: var(--tp-r);
}

.landing-cms .wu-teams h2 {
    margin-top: 0;
}

.landing-cms .wu-cta {
    margin: 1.5rem 0 0;
}

/* /team-trial's secondary button, so a reader arriving from there meets a
   control they have already used. Deliberately not the primary: this is a
   letter, and the saturated CTA belongs on the page that makes the offer. */
.landing-cms .wu-btn {
    display: inline-flex;
    align-items: center;
    min-height: 52px;
    padding: 0 1.5rem;
    background: var(--tp-surface-0);
    border: 2px solid var(--tp-border-ui);
    border-radius: var(--tp-r);
    color: var(--tp-ink) !important;
    font-size: var(--tp-fs-body);
    font-weight: 600;
    text-decoration: none;
    transition:
        background-color var(--tp-transition),
        border-color var(--tp-transition),
        color var(--tp-transition);
}

.landing-cms .wu-btn:hover {
    background: var(--tp-blue-tint);
    border-color: var(--tp-blue);
    color: var(--tp-blue-darker) !important;
}

/* ------------------------------------------------------------------ FOCUS */

.landing-cms .wu-jump-links a:focus-visible,
.landing-cms .wu-btn:focus-visible,
.landing-cms p a:focus-visible,
.landing-cms li a:focus-visible {
    outline: var(--tp-focus-ring);
    outline-offset: var(--tp-focus-offset);
    border-radius: var(--tp-r-sm);
}

/* --------------------------------------------------------------- SIGN-OFF */

.landing-cms .wu-sign {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--tp-line);
    font-size: var(--tp-fs-small);
    color: var(--tp-ink-2);
}

/* ----------------------------------------------------------------- MOBILE */

/* The edge shadow belongs only where the table actually scrolls. Painted at
   rest it is a permanent smudge across the left edge of the tinted column. */
@media screen and (max-width: 900px) {
    .landing-cms .wu-table th[scope='row'],
    .landing-cms .wu-table thead th:first-child {
        box-shadow: var(--tp-sh-edge);
    }
}

@media screen and (max-width: 720px) {
    .landing-cms {
        padding-top: 2.5rem;
    }

    .landing-cms h2 {
        margin-top: 2.5rem;
    }

    .landing-cms .wu-jump-links {
        gap: 0.5rem 1.25rem;
    }

    .landing-cms .wu-jump-links a {
        display: inline-block;
        padding: 0.3rem 0; /* ~25px tap targets were marginal against WCAG 2.5.8 */
    }
}

/* ------------------------------------------------------------------ PRINT */
/* B2B readers turn comparison pages into PDFs for procurement, so the scroller,
   the sticky cells and the min-width all have to stand down. */

@media print {
    .landing-cms {
        max-width: none;
        padding: 0;
    }

    .landing-cms .wu-jump {
        display: none;
    }

    .landing-cms .wu-scroll {
        width: auto;
        margin-inline: 0;
        overflow: visible;
    }

    .landing-cms .wu-table {
        min-width: 0;
        font-size: 10pt;
    }

    .landing-cms .wu-table th[scope='row'],
    .landing-cms .wu-table thead th:first-child {
        position: static;
        box-shadow: none;
    }

    .landing-cms .wu-table .wu-ours {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
}