/* =============================================================
   unQbd Partners landing page (/partners), built to the approved
   Claude Design mock "Partners Page.dc.html" (October 24, 2026).
   Scoped under the .ptr- prefix. Design-system tokens on .ptr-shell,
   desktop layout first, a <900px block for phones, and a dark-mode
   token remap on the site's html/body .dark-mode class.
   ============================================================= */

.ptr-shell {
    --ptr-blue: #00B4FF;
    --ptr-blue-deep: #0174B1;
    --ptr-blue-soft: #E6F6FF;
    --ptr-tint: #F6FBFF;
    --ptr-orange: #FFAA00;
    --ptr-ink: #222222;
    --ptr-ink-2: #475569;
    --ptr-muted: #64748B;
    --ptr-surface: #FFFFFF;
    --ptr-surface-alt: #F8FAFC;
    --ptr-border: #E5EAF0;
    --ptr-field-border: #D7E7F5;
    --ptr-navy: #0F1620;
    --ptr-danger: #E5484D;
    --ptr-success: #17B26A;
    --ptr-shadow-md: 0 8px 24px rgba(2, 6, 23, .08);
    --ptr-shadow-lg: 0 18px 45px rgba(2, 6, 23, .10);
    --ptr-maxw: 1048px;
    --ptr-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    background: var(--ptr-surface);
    color: var(--ptr-ink);
    font-family: var(--ptr-font);
    overflow-x: clip;
}

.ptr-wrap { max-width: var(--ptr-maxw); margin: 0 auto; padding: 0 24px; }
.ptr-section { padding: 88px 0; }
.ptr-tinted { background: var(--ptr-tint); border-top: 1px solid var(--ptr-border); }
.ptr-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }

.ptr-shell h1, .ptr-shell h2, .ptr-shell h3 { color: var(--ptr-ink); letter-spacing: -.02em; }
.ptr-shell h2 { font-size: 2rem; font-weight: 700; line-height: 1.2; margin: 0 0 28px; }
.ptr-shell h3 { font-size: 1.25rem; font-weight: 700; line-height: 1.3; margin: 0 0 10px; letter-spacing: -.01em; }
.ptr-shell p, .ptr-shell li { color: var(--ptr-ink-2); line-height: 1.6; }
.ptr-shell a { color: var(--ptr-blue-deep); }

.ptr-eyebrow { margin: 0 0 18px; font-size: .875rem; font-weight: 600; color: var(--ptr-blue-deep) !important; }
/* Also an h3 ("What you earn"), so it outranks .ptr-shell h3. */
.ptr-shell .ptr-kicker {
    margin: 0 0 14px; font-size: .75rem; font-weight: 600; line-height: 1.6; letter-spacing: .08em; text-transform: uppercase;
    color: var(--ptr-blue-deep) !important;
}

/* ---------- buttons and links ---------- */
.ptr-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 48px; padding: 12px 22px; border-radius: 10px; border: 0;
    background: var(--ptr-blue-deep); color: #FFFFFF !important; font-weight: 700; font-size: 1rem;
    text-decoration: none; cursor: pointer; box-shadow: 0 10px 24px rgba(1, 116, 177, .28);
    transition: background-color .2s cubic-bezier(.22, 1, .36, 1), transform .12s ease;
}
.ptr-btn:hover { background: #015F91; }
.ptr-btn:active { transform: translateY(1px); }
.ptr-btn:focus-visible { outline: 3px solid var(--ptr-blue); outline-offset: 3px; }
.ptr-btn .bi { font-size: 1rem; }
.ptr-btn-bright { background: var(--ptr-blue); color: #0F1620 !important; box-shadow: 0 10px 28px rgba(0, 180, 255, .38); }
.ptr-btn-bright:hover { background: #33C3FF; }
.ptr-btn-bright:focus-visible { outline-color: #FFFFFF; }

.ptr-text-link { font-weight: 600; text-decoration: none; }
.ptr-text-link:hover, .ptr-text-link:focus-visible { text-decoration: underline; }

/* ---------- hero ---------- */
/* Top pad clears the global fixed top nav, the same offset /instructors uses. */
.ptr-hero {
    padding: calc(136px + var(--topnav-inset-top, 0px)) 0 96px;
    background:
        radial-gradient(900px 480px at 78% 30%, rgba(0, 180, 255, .10) 0%, rgba(0, 180, 255, 0) 70%),
        linear-gradient(180deg, var(--ptr-tint) 0%, var(--ptr-surface) 100%);
}
.ptr-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 64px; align-items: center; }

.ptr-hero h1 { font-size: clamp(2.4rem, 4.4vw, 3.35rem); font-weight: 800; line-height: 1.1; margin: 0 0 22px; max-width: 12.5em; }
.ptr-h1-line { display: block; }
.ptr-lede { font-size: 1.0625rem; max-width: 29em; margin: 0 0 30px; }

.ptr-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
.ptr-fine { margin: 26px 0 0; font-size: .8125rem; line-height: 1.5; color: var(--ptr-ink-2) !important; }
.ptr-fine-line { display: block; }
.ptr-fine a { font-weight: 700; text-decoration: none; }
.ptr-fine a:hover, .ptr-fine a:focus-visible { text-decoration: underline; }

.ptr-hero-visual { position: relative; padding: 22px 12px 0 0; }
.ptr-hero-visual::before {
    content: ""; position: absolute; top: 0; right: 0; width: 80%; height: 82%;
    border-radius: 20px; background: #D6F1FF; opacity: .7;
}
.ptr-hero-card {
    position: relative; background: var(--ptr-surface); border-radius: 20px;
    box-shadow: var(--ptr-shadow-lg); padding: 26px 24px 18px;
}
.ptr-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.ptr-card-head .bi { color: var(--ptr-blue-deep); font-size: 1.15rem; }
.ptr-card-label { margin: 0; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--ptr-ink-2) !important; }
.ptr-card-link {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin: 0 0 8px; padding: 14px 16px; border-radius: 10px;
    background: var(--ptr-tint); border: 1px solid var(--ptr-field-border);
    font-size: 1.15rem; font-weight: 700; color: var(--ptr-ink) !important;
}
.ptr-card-link > span { overflow-wrap: anywhere; }
.ptr-card-link em { font-style: normal; color: var(--ptr-blue-deep); }
.ptr-card-link .bi { color: var(--ptr-muted); font-size: 1rem; flex: none; }
.ptr-card-list { list-style: none; margin: 0; padding: 0; }
.ptr-card-list li {
    display: flex; align-items: center; gap: 10px; padding: 14px 0;
    color: var(--ptr-ink) !important; font-size: .9375rem;
}
.ptr-card-list li + li { border-top: 1px solid var(--ptr-border); }
.ptr-card-list .bi { color: var(--ptr-muted); font-size: 1.05rem; }
.ptr-card-list span { flex: 1 1 auto; }
.ptr-card-list strong { color: var(--ptr-ink); white-space: nowrap; }
.ptr-pill {
    display: inline-flex; align-items: center; padding: 2px 11px; border-radius: 999px;
    background: var(--ptr-orange); color: #1F1300 !important; font-weight: 800;
}

/* ---------- how it works ---------- */
.ptr-steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin: 0; padding: 0; }
.ptr-steps li {
    background: var(--ptr-surface); border: 1px solid var(--ptr-border); border-radius: 14px;
    padding: 24px; box-shadow: 0 1px 2px rgba(2, 6, 23, .04);
}
.ptr-step-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.ptr-icon-tile {
    display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
    border-radius: 10px; background: var(--ptr-blue-soft); color: var(--ptr-blue-deep); font-size: 1.1rem;
}
.ptr-step-num { font-size: .8125rem; font-weight: 600; color: var(--ptr-ink-2); }
.ptr-steps h3 { font-size: 1.25rem; }
.ptr-steps p { margin: 0; font-size: .9375rem; }

/* ---------- what you earn ---------- */
.ptr-earn {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: 72px;
    background: var(--ptr-surface); border: 1px solid var(--ptr-border); border-radius: 20px; overflow: hidden;
}
.ptr-earn-main { padding: 44px 44px 40px; }
.ptr-earn-amount {
    margin: 0 0 22px; font-size: clamp(3.5rem, 7vw, 5rem); font-weight: 800; line-height: 1; letter-spacing: -.03em;
    color: var(--ptr-blue-deep) !important;
}
.ptr-earn-line { margin: 0 0 16px; max-width: 18em; font-size: 1.3rem; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; color: var(--ptr-ink) !important; }
.ptr-earn-sub { margin: 0; max-width: 28em; font-size: .9375rem; }
.ptr-notes { list-style: none; margin: 0; padding: 38px 44px; background: var(--ptr-surface-alt); border-left: 1px solid var(--ptr-border); }
.ptr-notes li { display: flex; gap: 14px; padding: 16px 0; color: var(--ptr-ink) !important; font-size: .9375rem; line-height: 1.5; }
.ptr-notes li + li { border-top: 1px solid var(--ptr-border); }
.ptr-notes .bi { color: var(--ptr-blue-deep); font-size: 1.05rem; line-height: 1.4; }

/* ---------- who it's for ---------- */
.ptr-section-who { padding-top: 0; }
.ptr-section-who h2 { font-size: 2.25rem; margin-bottom: 20px; max-width: 12em; }
.ptr-who-text { margin: 0; font-size: 1.0625rem; max-width: 30em; }
.ptr-gets { background: var(--ptr-surface-alt); border: 1px solid var(--ptr-border); border-radius: 20px; padding: 28px; }
.ptr-gets h3 { font-size: 1.15rem; margin: 22px 0 8px; }
.ptr-gets p { margin: 0; font-size: .9375rem; }
.ptr-gets-books { display: flex; align-items: flex-end; gap: 16px; min-height: 118px; }
.ptr-paperback {
    flex: none; width: 78px; height: 118px; border-radius: 6px 10px 10px 6px;
    background: linear-gradient(160deg, #00B4FF 0%, #0174B1 100%);
    box-shadow: inset 6px 0 0 rgba(255, 255, 255, .18), 0 10px 24px rgba(1, 116, 177, .30);
}
.ptr-or { align-self: center; font-size: .8125rem; font-weight: 600; color: var(--ptr-ink-2); }
.ptr-starter-set { display: flex; align-items: flex-end; gap: 6px; min-width: 0; }
/* The five covers shrink to fit a narrow card rather than overflow it. */
.ptr-starter-set img { flex: 0 1 48px; min-width: 0; width: 48px; height: auto; max-height: 92px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(2, 6, 23, .14)); }

/* ---------- terms ---------- */
.ptr-terms { background: var(--ptr-surface); border-top: 1px solid var(--ptr-border); }
.ptr-terms .ptr-wrap { max-width: 908px; }
.ptr-terms-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.ptr-terms-head h2 { margin: 0; font-size: 1.75rem; }
.ptr-terms-version { margin: 0; max-width: 21em; text-align: right; font-size: .8125rem; line-height: 1.4; color: var(--ptr-ink-2) !important; }
.ptr-terms-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ptr-border); }
.ptr-terms-list > li {
    display: grid; grid-template-columns: 64px 218px minmax(0, 1fr); align-items: start;
    padding: 22px 0; border-bottom: 1px solid var(--ptr-border);
}
.ptr-term-num { padding-top: 3px; font-size: .8125rem; font-weight: 600; color: var(--ptr-blue-deep); }
.ptr-terms-list h3 { margin: 0; font-size: 1.0625rem; letter-spacing: -.005em; }
.ptr-term-body p { margin: 0; font-size: .9375rem; }
.ptr-rules { list-style: none; margin: 0; padding: 0; }
.ptr-rules li { display: flex; gap: 12px; margin: 0 0 10px; font-size: .9375rem; line-height: 1.5; }
.ptr-rules li:last-child { margin-bottom: 0; }
.ptr-rules .bi { line-height: 1.5; font-size: 1rem; }
.ptr-rules-no .bi { color: var(--ptr-danger); }
.ptr-rules-yes .bi { color: var(--ptr-success); }

/* ---------- closing ---------- */
.ptr-closing { padding: 72px 0; background: var(--ptr-tint); border-top: 1px solid var(--ptr-border); }
.ptr-closing-card {
    display: flex; align-items: center; justify-content: space-between; gap: 32px;
    padding: 56px; border-radius: 28px; background: var(--ptr-navy);
}
.ptr-shell .ptr-closing-card h2 { margin: 0 0 10px; font-size: 2.25rem; color: #FFFFFF; }
.ptr-closing-card p { margin: 0; font-size: 1.0625rem; color: #C3CED8 !important; }
.ptr-closing-card .ptr-btn { flex: none; }

/* ---------- phones ---------- */
@media (max-width: 899.98px) {
    .ptr-section { padding: 60px 0; }
    .ptr-hero { padding: calc(112px + var(--topnav-inset-top, 0px)) 0 56px; }
    .ptr-hero-grid, .ptr-two { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .ptr-hero h1 { font-size: clamp(2rem, 8.5vw, 2.6rem); }
    .ptr-actions { flex-direction: column; align-items: stretch; gap: 16px; }
    .ptr-actions .ptr-btn { width: 100%; }
    .ptr-actions .ptr-text-link { align-self: center; }
    .ptr-fine { text-align: center; }
    .ptr-hero-visual { padding: 0; }
    .ptr-hero-visual::before { display: none; }
    .ptr-hero-card { padding: 20px 18px 10px; box-shadow: var(--ptr-shadow-md); }
    .ptr-card-link { font-size: 1rem; }
    .ptr-card-list li { font-size: .875rem; }
    .ptr-card-list .bi { display: none; }
    .ptr-steps { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .ptr-earn { grid-template-columns: minmax(0, 1fr); margin-top: 48px; }
    .ptr-earn-main { padding: 28px 22px; }
    .ptr-notes { padding: 14px 22px; border-left: 0; border-top: 1px solid var(--ptr-border); }
    .ptr-section-who h2 { font-size: 1.85rem; }
    .ptr-terms-head { flex-direction: column; align-items: flex-start; gap: 6px; }
    .ptr-terms-version { text-align: left; }
    .ptr-terms-list > li { grid-template-columns: 34px minmax(0, 1fr); row-gap: 8px; }
    .ptr-term-body { grid-column: 2; }
    .ptr-closing { padding: 48px 0; }
    .ptr-closing-card { flex-direction: column; align-items: stretch; text-align: center; padding: 36px 24px; border-radius: 20px; }
    .ptr-shell .ptr-closing-card h2 { font-size: 1.75rem; }
    .ptr-closing-card .ptr-btn { width: 100%; }
}

@media (max-width: 420px) {
    .ptr-wrap { padding: 0 16px; }
    .ptr-gets { padding: 20px; }
    .ptr-gets-books { gap: 10px; }
    .ptr-paperback { width: 60px; height: 92px; }
    .ptr-starter-set img { flex-basis: 34px; width: 34px; max-height: 72px; }
}

/* ---------- dark mode: tokens only, on the site's single dark-mode signal ---------- */
html.dark-mode .ptr-shell,
body.dark-mode .ptr-shell {
    --ptr-blue-deep: #7FD3FF;
    --ptr-blue-soft: #10293A;
    --ptr-tint: #0E1822;
    --ptr-ink: #EEF4F9;
    --ptr-ink-2: #C3CED8;
    --ptr-muted: #93A0AC;
    --ptr-surface: #0B141D;
    --ptr-surface-alt: #111C27;
    --ptr-border: #253545;
    --ptr-field-border: #2A4258;
    --ptr-navy: #060B10;
    --ptr-shadow-md: 0 8px 24px rgba(0, 0, 0, .35);
    --ptr-shadow-lg: 0 18px 45px rgba(0, 0, 0, .45);
}
html.dark-mode .ptr-hero,
body.dark-mode .ptr-hero {
    background:
        radial-gradient(900px 480px at 78% 30%, rgba(0, 180, 255, .12) 0%, rgba(0, 180, 255, 0) 70%),
        linear-gradient(180deg, var(--ptr-tint) 0%, var(--ptr-surface) 100%);
}
html.dark-mode .ptr-hero-visual::before,
body.dark-mode .ptr-hero-visual::before { background: #10293A; }
html.dark-mode .ptr-btn:not(.ptr-btn-bright),
body.dark-mode .ptr-btn:not(.ptr-btn-bright) { background: #0174B1; }
html.dark-mode .ptr-closing-card,
body.dark-mode .ptr-closing-card { border: 1px solid var(--ptr-border); }