/* ============================================================================
 * /team-trial landing page.
 *
 * Loaded automatically by the landing-light theme because the filename matches
 * the CMS page URL (see viewmodels/cms/cmspage_viewmodel._find_page_css), which
 * also guarantees it lands AFTER landing-cms-page-light-bulma.css. Several rules
 * below win on cascade order rather than specificity, so that ordering matters.
 *
 * Everything is scoped to .team-trial, which sits on each top-level <section>,
 * so nothing here can reach another CMS landing page.
 *
 * The blues are the site's existing is-info-blue family (site-bulma.css:314).
 * The yellow is the light theme's #f4e04d, used the only way it works on white:
 * as a fill behind black text. At 1.34:1 against white it can never be text, a
 * border that carries meaning, or an icon that carries meaning.
 * ========================================================================= */

/* ------------------------------------------------------------------ TOKENS */
/* The values live in _b2b-tokens.css, imported at the top of this file and
   shared with /why-us and /business. These are aliases, kept so the ~880 lines
   of rules below did not have to be rewritten when the tokens were extracted.
   Adding a token means adding it there and, only if this page needs it, here.
   New pages skip this layer and use --tp- directly. */

.team-trial {
    --tt-ink: var(--tp-ink);
    --tt-ink-2: var(--tp-ink-2);
    --tt-ink-3: var(--tp-ink-3);
    --tt-line: var(--tp-line);
    --tt-line-strong: var(--tp-line-strong);
    --tt-border-ui: var(--tp-border-ui);
    --tt-surface: var(--tp-surface);
    --tt-surface-2: var(--tp-surface-2);

    --tt-blue: var(--tp-blue);
    --tt-blue-dark: var(--tp-blue-dark);
    --tt-blue-darker: var(--tp-blue-darker);
    --tt-blue-tint: var(--tp-blue-tint);

    --tt-yellow: var(--tp-yellow);

    --tt-amber-bg: var(--tp-amber-bg);
    --tt-amber-line: var(--tp-amber-line);
    --tt-amber-ink: var(--tp-amber-ink);

    --tt-green-bg: var(--tp-green-bg);
    --tt-green-line: var(--tp-green-line);
    --tt-green-ink: var(--tp-green-ink);
    --tt-red-bg: var(--tp-red-bg);
    --tt-red-line: var(--tp-red-line);
    --tt-red-ink: var(--tp-red-ink);

    --tt-r: var(--tp-r);
    --tt-r-sm: var(--tp-r-sm);

    --tt-sh-sm: var(--tp-sh-sm);
    --tt-sh-md: var(--tp-sh-md);
    --tt-sh-lg: var(--tp-sh-lg);
    --tt-sh-cta: var(--tp-sh-cta);
    --tt-sh-cta-h: var(--tp-sh-cta-h);

    color: var(--tt-ink);
    font-family: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 17px;
    line-height: 1.65;
}

/* --------------------------------------- UNDO INHERITED CMS/BULMA DEFAULTS */

/* landing-cms-page-base-bulma.css caps every p/h/ul at 900px and auto-centres
   it, which silently misaligns any grid built inside .landing-cms. */
.team-trial h1,
.team-trial h2,
.team-trial h3,
.team-trial h4,
.team-trial p,
.team-trial ul,
.team-trial ol {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

.team-trial p {
    font-size: 17px;
    line-height: 1.65;
    margin: 0 0 1rem;
}

.team-trial ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.team-trial li {
    margin: 0;
}

.team-trial h1,
.team-trial h2,
.team-trial h3 {
    font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    font-weight: 700;
    color: var(--tt-ink);
    letter-spacing: -0.01em;
    margin-bottom: 0;
}

/* site-bulma.css:397 gives every Font Awesome icon .85em and .5em of side
   margin, which breaks every badge and list row on this page. */
.team-trial i[class*='fa-'] {
    margin: 0;
    font-size: inherit;
    line-height: 1;
}

/* Several toggled elements are display:flex/grid, which beats [hidden]. */
.team-trial [hidden] {
    display: none !important;
}

/* ------------------------------------------------------------------ LAYOUT */

.team-trial.tt-section {
    padding: 5rem 0;
}

.team-trial.tt-section--tight {
    padding: 4rem 0;
}

.team-trial.tt-section--tint {
    background: var(--tt-surface);
}

.team-trial .tt-wrap {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 24px;
}

.team-trial .tt-head {
    max-width: 640px;
    margin: 0 0 3rem;
}

.team-trial .tt-head--center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.team-trial .tt-h2 {
    font-size: 1.875rem;
    line-height: 1.15;
    margin: 0 0 0.75rem;
}

/* The dashboard is the differentiator, so it gets the one oversized heading. */
.team-trial .tt-h2--lead {
    font-size: 2.25rem;
}

.team-trial .tt-lede {
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--tt-ink-2);
    max-width: 34em; /* 900px at 17px is ~110 characters. Cap the measure. */
    margin: 0;
}

/* -------------------------------------------------------------------- HERO */

.team-trial.tt-hero {
    padding: 3rem 0 4rem;
    text-align: center;
}

.team-trial .tt-hero-inner {
    max-width: 780px;
    margin: 0 auto;
    padding: 0 24px;
}

.team-trial .tt-eyebrow {
    display: inline-block;
    background: var(--tt-yellow);
    color: #000;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: var(--tt-r-sm);
    margin-bottom: 1.25rem;
}

.team-trial.tt-hero h1 {
    font-size: clamp(2.25rem, 5vw, 3rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    margin: 0 0 1rem;
    text-align: center;
}

.team-trial .tt-hero-sub {
    font-size: 1.25rem;
    line-height: 1.5;
    color: var(--tt-ink-2);
    max-width: 34em;
    margin: 0 auto 2rem;
}

/* Fact row. Equal-weight items in a row have no grouping cue other than a
   rule, which is the one place on this page a border is the right tool. */
.team-trial .tt-facts {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 0 2.5rem;
}

.team-trial .tt-fact {
    padding: 0 1.75rem;
    text-align: center;
}

.team-trial .tt-fact + .tt-fact {
    border-left: 1px solid var(--tt-line);
}

.team-trial .tt-fact-n {
    display: block;
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--tt-ink);
}

.team-trial .tt-fact-l {
    display: block;
    margin-top: 0.25rem;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--tt-ink-3);
}

.team-trial .tt-cta {
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

/* Bound tightly to the buttons, because it is a footnote ON them. */
.team-trial .tt-cta-note {
    margin: 0.75rem auto 0;
    max-width: var(--tp-measure);
    font-size: var(--tp-fs-fine);
    color: var(--tp-ink-3);
}

/* A different reader (already sold, wants a price) and a different destination,
   so deliberately not a second .tt-cta-note. Rendering them identically would
   tell the reader they are the same kind of thing, and this one would be read as
   line three of the fine print by the one person it is written for. One step
   larger, one step darker, and further from the note above it than that note is
   from the buttons, so it groups as its own row. */
.team-trial .tt-hero-alt {
    margin: 2.25rem auto 0;
    max-width: var(--tp-measure);
    font-size: var(--tp-fs-small);
    color: var(--tp-ink-2);
}

.team-trial .tt-hero-alt a {
    font-weight: 600;
}

/* Prose links carry an underline, not just colour. #337ab7 against --tp-ink-2
   body copy is 1.78:1, and WCAG G183 wants 3:1 where colour is the only cue.
   Darkening the link makes this worse rather than better, because it moves
   toward the body colour, so the second cue has to be non-chromatic. Scoped to
   prose: .tt-btn links live in divs, and course cards are grid children. */
.team-trial p a:not(.tt-btn) {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    text-decoration-color: hsl(207, 56%, 72%);
}

.team-trial p a:not(.tt-btn):hover {
    text-decoration-color: currentColor;
}

/* ----------------------------------------------------------------- BUTTONS */
/* Deliberately not Bulma's .button, which drags in site-bulma's dark colours,
   its own height, and `.button i { margin-left: .5em !important }`. */

.team-trial .tt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6em;
    font-family: inherit;
    text-decoration: none;
    border-radius: var(--tt-r);
    cursor: pointer;
    white-space: nowrap;
    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease,
        color 0.18s ease;
}

.team-trial .tt-btn i {
    margin: 0 !important; /* beats .button i in site-bulma.css:277 */
    font-size: 1em;
}

.team-trial .tt-btn:focus-visible {
    outline: 3px solid var(--tt-blue);
    outline-offset: 3px;
}

/* PRIMARY. The PDF is the page's job, so this is the only saturated block of
   colour above the fold. */
.team-trial a.tt-btn-primary,
.team-trial button.tt-btn-primary {
    background: var(--tt-blue-dark);
    /* !important beats .landing-cms a:not(.button):not(.btn) { color: #337ab7 }
       at (0,3,1) in the light theme. */
    color: #fff !important;
    border: 2px solid var(--tt-blue-dark);
    font-size: 19px;
    font-weight: 700;
    padding: 0 2rem;
    min-height: 60px;
    box-shadow: var(--tt-sh-cta);
}

.team-trial a.tt-btn-primary:hover,
.team-trial button.tt-btn-primary:hover {
    background: var(--tt-blue-darker);
    border-color: var(--tt-blue-darker);
    transform: translateY(-1px);
    box-shadow: var(--tt-sh-cta-h);
}

.team-trial a.tt-btn-primary:active,
.team-trial button.tt-btn-primary:active {
    transform: translateY(0);
    box-shadow: var(--tt-sh-sm);
}

/* SECONDARY. Text contrast is left at full strength on purpose: lightening the
   label is exactly how disabled controls are drawn. It loses on fill and
   elevation instead, which is where most of the perceived weight lives. */
.team-trial a.tt-btn-secondary,
.team-trial button.tt-btn-secondary {
    background: #fff;
    color: var(--tt-ink) !important; /* same override target as above */
    border: 2px solid var(--tt-border-ui);
    font-size: 17px;
    font-weight: 600;
    padding: 0 1.5rem;
    min-height: 56px;
    box-shadow: none;
}

.team-trial a.tt-btn-secondary:hover,
.team-trial button.tt-btn-secondary:hover {
    background: var(--tt-blue-tint);
    border-color: var(--tt-blue);
    color: var(--tt-blue-darker) !important;
}

.team-trial .tt-btn-secondary i {
    color: var(--tt-ink-3);
}

.team-trial .tt-btn-secondary:hover i {
    color: var(--tt-blue-darker);
}

/* ------------------------------------------------------------------- STEPS */

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

.team-trial .tt-step {
    position: relative;
}

/* Numbers, not icons: an icon cannot express sequence, and Font Awesome is
   loaded async here so icons arrive late. */
.team-trial .tt-step-n {
    position: relative;
    z-index: 1;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tt-blue-tint);
    color: var(--tt-blue-darker);
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 1rem;
}

.team-trial .tt-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 21px;
    left: 52px;
    right: -2rem;
    height: 2px;
    background: var(--tt-line);
}

.team-trial .tt-step h3 {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0;
    margin: 0 0 0.375rem;
}

.team-trial .tt-step p {
    font-size: 16px;
    line-height: 1.6;
    color: var(--tt-ink-2);
    margin: 0;
}

/* --------------------------------------------------------------- DASHBOARD */

/* Stacked, not side by side. This started as a two-column grid with the screenshot
   in the left column, which squeezed a 1600px-wide report into roughly 560px: the
   column headings and the student rows stopped being readable, and a screenshot you
   cannot read is not evidence of anything. The image now runs the full width of the
   wrap and the list sits under it in two columns. */
.team-trial .tt-dash {
    display: block;
}

.team-trial .tt-dash-head {
    max-width: 640px;
    margin: 0 0 2rem;
}

.team-trial .tt-dash-head p {
    font-size: 1.0625rem;
    color: var(--tt-ink-2);
    max-width: 32em;
    margin: 0;
}

.team-trial .tt-dash-media {
    margin: 0 0 2.5rem;
}

/* Shared by the team-lead list and the student list. */
.team-trial .tt-checks {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.team-trial .tt-checks li {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    font-size: 17px;
    line-height: 1.55;
    color: var(--tt-ink-2);
}

.team-trial .tt-checks li i {
    flex: 0 0 20px;
    width: 20px;
    text-align: center;
    color: var(--tt-blue);
    font-size: 17px;
    margin-top: 3px;
}

/* Beats .landing-cms strong:not(a):not(a *) { color: black } at (0,3,1). */
.team-trial .tt-checks li strong {
    color: var(--tt-ink) !important;
    font-weight: 600;
}

/* A check list is a block of its own; prose that follows needs a gap or the two
   run together. Comes up on the /team-trial/oops page. */
.team-trial .tt-checks + p {
    margin-top: 1.5rem;
}

.team-trial .tt-shot {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: var(--tt-r);
    border: 1px solid var(--tt-line-strong);
    box-shadow: var(--tt-sh-lg);
    background: var(--tt-surface-2);
}

.team-trial .tt-shot-cap {
    margin: 0.875rem 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--tt-ink-3);
}

/* The .tt-shot-placeholder / .tt-ph-* rules that used to live here are gone: the real
   screenshot shipped, so they styled nothing. Recover them from git if a future
   revision needs a marked placeholder again. */

/* ---------------------------------------------- TWO-COLUMN CHECK LISTS      */
/* Both of these must come AFTER .tt-checks: same specificity, so display:grid
   only beats its display:flex on source order. */

.team-trial .tt-dash-list,
.team-trial .tt-perks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 3rem;
    row-gap: 1rem;
}

/* The dashboard list is deliberately not capped: it sits directly under the
   full-width screenshot and reads as one block with it. */
.team-trial .tt-perks {
    max-width: 880px;
}

/* ------------------------------------------------------------ COURSE CARDS */
/* Markup comes from templates/cms/partials/course-cards.pt via $COURSE_CARDS$. */

.team-trial .cms-course-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
}

/* No card chrome. The course images are already saturated and loud; wrapping
   them in bordered boxes would create competing rectangles. */
.team-trial a.cms-course-card {
    display: block;
    text-decoration: none;
    color: var(--tt-ink) !important; /* beats the CMS link-blue rule */
}

.team-trial .cms-course-card-image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--tt-r);
    box-shadow: var(--tt-sh-sm);
    background: var(--tt-surface-2);
    transition:
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.team-trial a.cms-course-card:hover .cms-course-card-image {
    box-shadow: var(--tt-sh-md);
    transform: translateY(-2px);
}

.team-trial .cms-course-card-title {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0;
    margin: 0.875rem 0 0.25rem;
    color: var(--tt-ink);
}

.team-trial a.cms-course-card:hover .cms-course-card-title {
    color: var(--tt-blue-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.team-trial .cms-course-card-meta {
    margin: 0;
    font-size: 14px;
    color: var(--tt-ink-3);
    text-transform: capitalize;
}

.team-trial .cms-course-card-meta span + span::before {
    content: ' \00b7\00a0';
}

.team-trial .tt-courses-note {
    margin: 2.5rem 0 0;
    font-size: 17px;
    color: var(--tt-ink-2);
}

/* --------------------------------------------------------------------- FAQ */

.team-trial .tt-faq {
    max-width: 720px;
}

.team-trial .tt-faq-item {
    border-top: 1px solid var(--tt-line);
}

.team-trial .tt-faq-item:last-child {
    border-bottom: 1px solid var(--tt-line);
}

.team-trial .tt-faq-item > summary {
    list-style: none;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.25rem 0;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--tt-ink);
    cursor: pointer;
}

.team-trial .tt-faq-item > summary::-webkit-details-marker {
    display: none;
}

.team-trial .tt-faq-item > summary:hover,
.team-trial .tt-faq-item[open] > summary {
    color: var(--tt-blue-dark);
}

/* Browsers give <summary> almost no focus indication of their own. */
.team-trial .tt-faq-item > summary:focus-visible {
    outline: 3px solid var(--tt-blue);
    outline-offset: 2px;
    border-radius: var(--tt-r-sm);
}

/* Drawn in CSS so the FAQ does not depend on the async icon font. */
.team-trial .tt-faq-item > summary::after {
    content: '';
    flex: 0 0 10px;
    width: 10px;
    height: 10px;
    margin-top: 0.5em;
    border-right: 2px solid var(--tt-ink-3);
    border-bottom: 2px solid var(--tt-ink-3);
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

.team-trial .tt-faq-item[open] > summary::after {
    transform: rotate(-135deg);
    margin-top: 0.8em;
}

.team-trial .tt-faq-answer {
    padding: 0 0 1.5rem;
    max-width: 36em;
}

.team-trial .tt-faq-answer p {
    line-height: 1.7;
    color: var(--tt-ink-2);
    margin: 0 0 0.75rem;
}

.team-trial .tt-faq-answer p:last-child {
    margin-bottom: 0;
}

/* -------------------------------------------------------------------- FORM */

.team-trial.tt-form-band {
    background: var(--tt-surface-2);
    padding: 5rem 0;
}

/* On a white page a form with no container reads as debris. The tinted band
   plus a white card is the page's one surface-above-surface moment. */
.team-trial .tt-form-card {
    max-width: 620px;
    margin: 0 auto;
    padding: 2.5rem;
    background: #fff;
    border-radius: var(--tt-r);
    box-shadow: var(--tt-sh-lg);
    scroll-margin-top: 5rem; /* clears the fixed navbar on the #request jump */
}

/* 620px is a measure for a single-column form. The thanks and oops pages carry no
   form, just a short list of sentences, and at 620 the longest of them wrapped: a
   two-line item in a three-item list reads as an accident. Prose inside stays capped
   so the extra width goes to the list rather than to 90-character paragraphs. */
.team-trial .tt-form-card--wide {
    max-width: 720px;
}

/* The fine print is centred text, so capping its box would shift it off the card's
   centre line. Everything else is left-aligned prose and wants the cap. */
.team-trial .tt-form-card--wide > p:not(.tt-form-fine) {
    max-width: 36em;
}

.team-trial .tt-form-card h2 {
    font-size: 1.875rem;
    margin: 0 0 0.5rem;
}

.team-trial .tt-form-intro {
    font-size: 16px;
    color: var(--tt-ink-3);
    margin: 0 0 2rem;
}

.team-trial .tt-field {
    margin-bottom: 1.25rem;
}

/* site-bulma.css:584 sets .label to #eee, which is 1.16:1 on white and
   effectively invisible. This page uses .tt-label and never .label. */
.team-trial .tt-label {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--tt-ink);
}

/* Marking the one optional field beats marking the four required ones. */
.team-trial .tt-optional {
    margin-left: 0.5rem;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tt-ink-3);
}

.team-trial .tt-input {
    display: block;
    width: 100%;
    height: 48px;
    padding: 0 0.875rem;
    font-family: inherit;
    font-size: 16px; /* below 16px iOS zooms the viewport on focus */
    color: var(--tt-ink);
    background: #fff;
    border: 1px solid var(--tt-border-ui);
    border-radius: var(--tt-r-sm);
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.team-trial .tt-input::placeholder {
    color: hsl(212, 12%, 46%);
}

.team-trial .tt-input:focus {
    outline: none;
    border-color: var(--tt-blue);
    box-shadow: 0 0 0 3px hsl(207 57% 46% / 0.2);
}

.team-trial select.tt-input {
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.875rem center;
    background-size: 12px 8px;
}

/* The team lead email field. The note sits ABOVE the input, because help text
   under a field is read after it has already been filled in. Colour is never
   the only signal: there is an icon and a literal "Important:" too. */
.team-trial .tt-field-key {
    margin-bottom: 1.5rem;
    padding: 1rem 1rem 1.125rem;
    background: var(--tt-amber-bg);
    border-left: 4px solid var(--tt-amber-line);
    border-radius: 0 var(--tt-r-sm) var(--tt-r-sm) 0;
}

.team-trial .tt-field-key .tt-label {
    margin-bottom: 0.5rem;
}

.team-trial .tt-keynote {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 500;
    color: var(--tt-amber-ink);
}

.team-trial .tt-keynote i {
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--tt-amber-ink);
}

.team-trial .tt-keynote strong {
    color: var(--tt-amber-ink) !important; /* beats .landing-cms strong (0,3,1) */
    font-weight: 700;
}

.team-trial .tt-field-key .tt-input {
    border-color: hsl(38, 45%, 55%);
}

.team-trial .tt-field-key .tt-input:focus {
    border-color: var(--tt-amber-line);
    box-shadow: 0 0 0 3px hsl(38 92% 50% / 0.22);
}

.team-trial .tt-submit {
    width: 100%;
    min-height: 54px;
    margin-top: 0.5rem;
    font-size: 18px;
}

.team-trial .tt-submit:disabled {
    opacity: 0.7;
    cursor: progress;
}

.team-trial .tt-form-fine {
    margin: 1rem 0 0;
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
    color: var(--tt-ink-3);
}

/* Errors carry a border, an icon-free but explicit message and colour, so no
   single channel is load-bearing. */
.team-trial .tt-error {
    margin-bottom: 1.25rem;
    padding: 0.875rem 1rem;
    font-size: 15px;
    line-height: 1.5;
    background: var(--tt-red-bg);
    border-left: 4px solid var(--tt-red-line);
    border-radius: 0 var(--tt-r-sm) var(--tt-r-sm) 0;
    color: var(--tt-red-ink);
}

.team-trial .tt-input.is-invalid {
    border-color: var(--tt-red-line);
}

.team-trial .tt-input.is-invalid:focus {
    box-shadow: 0 0 0 3px hsl(0 65% 45% / 0.18);
}

/* ----------------------------------------------------------- SUCCESS STATE */

.team-trial .tt-success {
    text-align: center;
    padding: 0.5rem 0 0;
}

/* A medallion, not a full-width green banner: a banner at this size reads as a
   system alert, a medallion reads as a receipt. */
.team-trial .tt-success-mark {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    background: var(--tt-green-bg);
    color: var(--tt-green-ink);
}

.team-trial .tt-success h2 {
    font-size: 1.875rem;
    margin: 0 0 0.75rem;
}

.team-trial .tt-success h2:focus {
    outline: none;
}

.team-trial .tt-success h2:focus-visible {
    outline: 3px solid var(--tt-blue);
    outline-offset: 4px;
    border-radius: var(--tt-r-sm);
}

.team-trial .tt-success p {
    color: var(--tt-ink-2);
    max-width: 34em;
    margin: 0 auto 1rem;
}

/* Fills the card rather than sitting in a narrower well. At 26rem the longest of
   these three lines wrapped, and a two-line item in a three-item list reads as an
   accident. The panel now shares the card's measure with the prose around it. */
.team-trial .tt-success-next {
    margin: 1.5rem 0;
    padding: 1.25rem 1.5rem;
    text-align: left;
    background: var(--tt-surface);
    border-radius: var(--tt-r-sm);
}

.team-trial .tt-success-next li {
    display: flex;
    gap: 0.75rem;
    font-size: 15px;
    line-height: 1.5;
    color: var(--tt-ink-2);
}

.team-trial .tt-success-next li + li {
    margin-top: 0.625rem;
}

.team-trial .tt-success-next li i {
    flex: 0 0 16px;
    margin-top: 3px;
    color: var(--tt-green-line);
}

/* The person who just submitted is the likeliest to forward the one-pager. */
.team-trial .tt-success .tt-btn {
    width: 100%;
    margin-top: 0.5rem;
}

/* ============================================================================
 * BREAKPOINTS. A large share of this traffic arrives from a podcast episode
 * on a phone, so the small end is the important end.
 * ========================================================================= */

@media screen and (max-width: 960px) {
    .team-trial .tt-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2.5rem 2rem;
    }

    .team-trial .tt-step:not(:last-child)::after {
        display: none;
    }
}

@media screen and (max-width: 760px) {
    /* Never two columns with three cards: that leaves an orphan. */
    .team-trial .cms-course-cards {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .team-trial a.cms-course-card {
        display: grid;
        grid-template-columns: 140px minmax(0, 1fr);
        column-gap: 1rem;
        align-items: center;
    }

    .team-trial .cms-course-card-title {
        margin: 0 0 0.25rem;
    }
}

@media screen and (max-width: 720px) {
    .team-trial.tt-section,
    .team-trial.tt-form-band {
        padding: 3.5rem 0;
    }

    .team-trial.tt-section--tight {
        padding: 3rem 0;
    }

    .team-trial.tt-hero {
        padding: 1.5rem 0 3rem;
    }

    .team-trial .tt-wrap,
    .team-trial .tt-hero-inner {
        padding: 0 20px;
    }

    .team-trial .tt-head {
        margin-bottom: 2rem;
    }

    .team-trial .tt-h2 {
        font-size: 1.5rem;
    }

    .team-trial .tt-h2--lead {
        font-size: 1.75rem;
    }

    .team-trial .tt-lede {
        font-size: 1.0625rem;
    }

    .team-trial .tt-perks,
    .team-trial .tt-dash-list {
        grid-template-columns: 1fr;
    }

    /* Full-bleed on a phone: the screenshot is the point, and 20px of gutter on each
       side is 10% of the width it has to work with. The negative margin goes on the
       image alone, so the caption keeps its gutter. */
    .team-trial .tt-shot {
        margin-left: -20px;
        width: calc(100% + 40px);
        max-width: none;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    .team-trial .tt-form-card {
        padding: 1.75rem 1.25rem;
    }

    .team-trial .tt-form-card h2,
    .team-trial .tt-success h2 {
        font-size: 1.5rem;
    }

    .team-trial .tt-faq-item > summary {
        font-size: 1.0625rem;
        padding: 1.125rem 0;
    }
}

@media screen and (max-width: 560px) {
    .team-trial.tt-hero h1 {
        font-size: 2.125rem;
        line-height: 1.12;
    }

    .team-trial .tt-hero-sub {
        font-size: 1.0625rem;
        margin-bottom: 1.75rem;
    }

    .team-trial .tt-facts {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.25rem 0;
        margin-bottom: 2rem;
    }

    .team-trial .tt-fact {
        padding: 0 0.5rem;
    }

    .team-trial .tt-fact + .tt-fact {
        border-left: none;
    }

    .team-trial .tt-fact:nth-child(even) {
        border-left: 1px solid var(--tt-line);
    }

    .team-trial .tt-fact-n {
        font-size: 1.5rem;
    }

    /* Stacked and full width, but the size delta survives the stack. */
    .team-trial .tt-cta {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .team-trial .tt-btn {
        width: 100%;
    }

    .team-trial a.tt-btn-primary {
        min-height: 58px;
        font-size: 18px;
        padding: 0 1rem;
        white-space: normal;
    }

    .team-trial a.tt-btn-secondary {
        min-height: 50px;
        padding: 0 1rem;
    }

    /* Badge left, text right: halves the vertical run on a phone. */
    .team-trial .tt-steps {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .team-trial .tt-step {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr);
        column-gap: 1rem;
        align-items: start;
    }

    .team-trial .tt-step-n {
        margin-bottom: 0;
    }

    .team-trial .tt-step h3,
    .team-trial .tt-step p {
        grid-column: 2;
    }

    .team-trial .tt-step h3 {
        margin-top: 0.5rem;
    }

    .team-trial a.cms-course-card {
        grid-template-columns: 110px minmax(0, 1fr);
    }

    .team-trial .cms-course-card-title {
        font-size: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .team-trial *,
    .team-trial *::before,
    .team-trial *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }

    .team-trial .tt-btn:hover,
    .team-trial a.cms-course-card:hover .cms-course-card-image {
        transform: none;
    }
}