/* ---------------------------------------------------------------------------
   TestPod product page.

   Everything is scoped to .tp-product so the rest of the site is untouched and
   the theme's global rules for h1/h2/ul cannot leak in — they are reset here.

   The look is a workshop test bench: paper ground, navy instrument panels, one
   red accent, hairline rules, and the production figures set as readouts rather
   than decoration. Display face is Oswald, which the site already self-hosts
   (themes/public/default/css/fonts.css) — no extra font request.
   --------------------------------------------------------------------------- */

.tp-product {
    --tp-paper: #f6f5f1;
    --tp-paper-2: #efeee9;
    --tp-ink: #14171c;
    --tp-muted: #5f6772;
    --tp-line: #dddcd5;
    --tp-red: #df1f32;
    --tp-red-dark: #a91425;
    --tp-navy: #0d1928;
    --tp-panel: #101f33;
    --tp-cell: #16293f;
    --tp-green: #1f9e6a;

    --tp-display: 'Oswald', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
    --tp-font: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    --tp-mono: 'SF Mono', 'Menlo', 'Consolas', monospace;

    background: var(--tp-paper);
    color: var(--tp-ink);
    font-family: var(--tp-font);
    font-size: 16px;
    line-height: 1.65;
    display: block;
    margin-top: -16px;
    overflow-x: hidden;
}

.tp-product *,
.tp-product *::before,
.tp-product *::after { box-sizing: border-box; }

.tp-product h1,
.tp-product h2,
.tp-product h3 {
    font-family: var(--tp-display);
    font-weight: 600;
    color: var(--tp-ink);
    letter-spacing: -.005em;
    margin: 0;
    text-transform: none;
}

.tp-product p { margin: 0 0 14px; }
.tp-product p:last-child { margin-bottom: 0; }
.tp-product ul, .tp-product ol { margin: 0; padding: 0; list-style: none; }
.tp-product img { max-width: 100%; height: auto; display: block; }
.tp-product a { color: var(--tp-red-dark); text-decoration: none; }
.tp-product a:hover { text-decoration: underline; }

.tp-wrap {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
}

/* ------------------------------------------------------------ shared bits */

.tp-kicker {
    font-family: var(--tp-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--tp-red-dark);
    margin: 0 0 14px;
}
.tp-kicker-light { color: #ff8a94; }

.tp-section { padding: 84px 0; border-top: 1px solid var(--tp-line); }

.tp-section-head { max-width: 720px; margin-bottom: 44px; }
.tp-section-head h2 { font-size: 38px; line-height: 1.12; margin-bottom: 14px; }
.tp-section-head p { color: var(--tp-muted); font-size: 17px; }

.tp-btn {
    display: inline-block;
    font-family: var(--tp-display);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: .02em;
    padding: 14px 30px;
    border: 1px solid transparent;
    border-radius: 2px;
    transition: transform .15s ease, background .15s ease, color .15s ease;
}
.tp-btn:hover { text-decoration: none; transform: translateY(-2px); }
/* The theme sets link colours globally with !important, which swallowed the button
   labels — these have to win, so they are marked too. */
.tp-product .tp-btn-primary { background: var(--tp-red); color: #fff !important; }
.tp-product .tp-btn-primary:hover { background: var(--tp-red-dark); color: #fff !important; }
.tp-product .tp-btn-secondary { background: transparent; color: var(--tp-ink) !important; border-color: #c9c8c1; }
.tp-product .tp-btn-secondary:hover { border-color: var(--tp-ink); color: var(--tp-ink) !important; }
.tp-product .tp-btn-ghost { background: transparent; color: #fff !important; border-color: rgba(255,255,255,.45); white-space: nowrap; }
.tp-product .tp-btn-ghost:hover { background: #fff; color: var(--tp-navy) !important; }

.tp-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 14px; }
.tp-actions-center { justify-content: center; }

.tp-fineprint { color: var(--tp-muted); font-size: 14px; }
.tp-center { text-align: center; }

.tp-ticks li {
    position: relative;
    padding: 0 0 0 26px;
    margin-bottom: 11px;
    color: var(--tp-ink);
}
.tp-ticks li::before {
    content: '';
    position: absolute;
    left: 2px; top: 9px;
    width: 9px; height: 9px;
    background: var(--tp-green);
    border-radius: 1px;
}
.tp-ticks-hand li::before { background: var(--tp-red); }

/* ------------------------------------------------------------------- hero */

.tp-hero {
    background:
        radial-gradient(900px 380px at 88% -10%, rgba(223,31,50,.07), transparent 70%),
        var(--tp-paper);
    padding: 76px 0 68px;
    position: relative;
}
/* faint bench grid, so the ground is not a flat colour */
.tp-hero::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(20,23,28,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(20,23,28,.045) 1px, transparent 1px);
    background-size: 64px 64px;
    pointer-events: none;
}
.tp-hero > * { position: relative; }

.tp-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr);
    gap: 56px;
    align-items: start;
}

.tp-hero-copy h1 {
    font-size: 60px;
    line-height: 1.03;
    letter-spacing: -.015em;
    margin-bottom: 22px;
}
.tp-hero-copy h1 span {
    color: var(--tp-red);
    display: inline-block;
}
.tp-lede { font-size: 19px; line-height: 1.6; color: #333a44; max-width: 30em; }
.tp-lede strong { color: var(--tp-ink); font-weight: 700; }

/* readout panel */
.tp-readout {
    background: var(--tp-panel);
    color: #eaf0f7;
    border-radius: 3px;
    padding: 22px 24px 20px;
    box-shadow: 0 24px 50px -28px rgba(13,25,40,.7);
    position: relative;
    overflow: hidden;
}
.tp-readout::after {
    content: '';
    position: absolute; inset: 0;
    background: repeating-linear-gradient(180deg, rgba(255,255,255,.028) 0 1px, transparent 1px 3px);
    pointer-events: none;
}
.tp-readout-head {
    font-family: var(--tp-mono);
    font-size: 10.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #8fa3ba;
    padding-bottom: 14px;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(255,255,255,.11);
}
.tp-dot {
    display: inline-block;
    width: 7px; height: 7px;
    background: var(--tp-green);
    border-radius: 50%;
    margin-right: 7px;
    box-shadow: 0 0 0 3px rgba(31,158,106,.2);
}
.tp-readout ul { margin: 0; }
.tp-readout li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.tp-readout li b {
    font-family: var(--tp-display);
    font-size: 27px;
    font-weight: 500;
    letter-spacing: .01em;
    font-variant-numeric: tabular-nums;
    color: #fff;
    white-space: nowrap;
}
.tp-readout li span {
    font-size: 12.5px;
    color: #93a6bc;
    text-align: right;
    line-height: 1.35;
}
.tp-readout-link {
    display: inline-block;
    margin-top: 15px;
    font-family: var(--tp-mono);
    font-size: 11.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #ff8a94;
}
.tp-readout-link:hover { color: #fff; }

/* --------------------------------------------------------------- strip */

.tp-strip {
    background: var(--tp-navy);
    color: #cdd8e4;
    padding: 15px 0;
}
.tp-strip .tp-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 26px;
}
.tp-strip strong {
    font-family: var(--tp-mono);
    font-size: 10.5px;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: #7e93aa;
}
.tp-strip span {
    font-family: var(--tp-display);
    font-size: 15px;
    font-weight: 400;
    color: #e6edf5;
}

/* -------------------------------------------------------------- the frame */

.tp-frame-copy { max-width: 800px; margin-bottom: 46px; }
.tp-frame-copy h2 { font-size: 40px; line-height: 1.1; margin-bottom: 18px; }
.tp-frame-copy p { color: var(--tp-muted); font-size: 17.5px; max-width: 46em; }

.tp-frame-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.tp-col {
    background: #fff;
    border: 1px solid var(--tp-line);
    border-top: 3px solid var(--tp-green);
    border-radius: 3px;
    padding: 28px 28px 24px;
}
.tp-col-hand { border-top-color: var(--tp-red); }
.tp-col h3 {
    font-size: 19px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--tp-line);
}

/* ---------------------------------------------------------------- the line */

.tp-line-section { background: var(--tp-paper-2); }

/* A bench procedure read top to bottom: a rail down the left, a numbered icon
   chip per step, copy on the right. The artwork is small line icons, so it is
   sized as an icon — blowing it up into a half-width panel left the row empty. */
.tp-line { position: relative; max-width: 900px; }
.tp-line::before {
    content: '';
    position: absolute;
    left: 47px; top: 12px; bottom: 12px;
    width: 1px;
    background: var(--tp-line);
}

.tp-step {
    position: relative;
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 30px;
    align-items: start;
    padding: 22px 0;
}

.tp-step-media {
    position: relative;
    z-index: 1;
    width: 96px; height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--tp-line);
    border-radius: 50%;
    padding: 20px;
    box-shadow: 0 10px 26px -20px rgba(20,23,28,.6);
    transition: transform .2s ease, border-color .2s ease;
}
.tp-step:hover .tp-step-media { transform: translateY(-2px); border-color: var(--tp-red); }
.tp-step-media img { width: 100%; height: auto; }

.tp-step-body { position: relative; padding-top: 6px; }
.tp-num {
    display: block;
    font-family: var(--tp-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .22em;
    color: var(--tp-red);
    margin-bottom: 4px;
}
.tp-step-body h3 { font-size: 25px; margin-bottom: 8px; }
.tp-step-body p { color: var(--tp-muted); font-size: 16px; max-width: 46em; }

/* --------------------------------------------------------------- dark bits */

.tp-dark {
    background: var(--tp-navy);
    color: #dfe7f0;
    border-top: none;
    position: relative;
    overflow: hidden;
}
.tp-dark::before {
    content: '';
    position: absolute; inset: 0;
    background: repeating-linear-gradient(180deg, rgba(255,255,255,.02) 0 1px, transparent 1px 3px);
    pointer-events: none;
}
.tp-dark > * { position: relative; }
.tp-dark h2 { color: #fff; }
.tp-dark p { color: #b6c4d4; }

.tp-alert-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr);
    gap: 54px;
    align-items: center;
}
.tp-alert-grid h2 { font-size: 36px; line-height: 1.14; margin-bottom: 16px; }
.tp-alert-grid p { font-size: 17px; }

.tp-alert-badge {
    background: var(--tp-cell);
    border: 1px solid rgba(255,255,255,.1);
    border-left: 4px solid var(--tp-red);
    border-radius: 3px;
    padding: 26px 26px 24px;
    transform: rotate(-1.2deg);
}
.tp-alert-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    background: var(--tp-red);
    color: #fff;
    border-radius: 50%;
    font-family: var(--tp-display);
    font-size: 21px;
    font-weight: 600;
    margin-bottom: 14px;
}
.tp-alert-badge strong {
    display: block;
    font-family: var(--tp-display);
    font-size: 20px;
    font-weight: 500;
    color: #fff;
    margin-bottom: 5px;
}
.tp-alert-badge em {
    font-style: normal;
    font-family: var(--tp-mono);
    font-size: 11.5px;
    letter-spacing: .08em;
    color: #93a6bc;
}

/* ------------------------------------------------------------------- proof */

.tp-proof-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}
.tp-proof {
    border-top: 2px solid var(--tp-ink);
    padding-top: 18px;
}
.tp-proof h3 { font-size: 20px; margin-bottom: 9px; }
.tp-proof p { color: var(--tp-muted); font-size: 15px; }

/* ----------------------------------------------------------------- support */

.tp-support { background: var(--tp-navy); color: #dfe7f0; border-top: none; }
.tp-support h2 { color: #fff; font-size: 34px; line-height: 1.15; margin-bottom: 14px; }
.tp-support p { color: #b6c4d4; font-size: 17px; max-width: 40em; }
.tp-support-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 44px;
}

/* ----------------------------------------------------------------- pricing */

.tp-price-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
    max-width: 860px;
}
.tp-price {
    position: relative;
    background: #fff;
    border: 1px solid var(--tp-line);
    border-radius: 3px;
    padding: 30px 30px 28px;
}
.tp-price-best { border-color: var(--tp-ink); box-shadow: 0 20px 44px -30px rgba(20,23,28,.6); }
.tp-tag {
    position: absolute;
    top: -11px; right: 22px;
    background: var(--tp-red);
    color: #fff;
    font-family: var(--tp-mono);
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 2px;
}
.tp-price h3 { font-size: 18px; color: var(--tp-muted); font-weight: 500; }
.tp-price-figure {
    font-family: var(--tp-display);
    font-size: 50px;
    font-weight: 600;
    line-height: 1;
    margin: 6px 0 20px;
    font-variant-numeric: tabular-nums;
}
.tp-price-figure span { font-size: 17px; font-weight: 400; color: var(--tp-muted); }

/* --------------------------------------------------------------- final CTA */

.tp-final {
    background: var(--tp-ink);
    color: #fff;
    padding: 78px 0;
    text-align: center;
}
.tp-final h2 { color: #fff; font-size: 40px; line-height: 1.1; margin-bottom: 12px; }
.tp-final p { color: #b9bec6; font-size: 17.5px; max-width: 34em; margin: 0 auto; }
/* The secondary button is dark-on-light by default, which disappears on this
   black band — flip it here. */
.tp-product .tp-final .tp-btn-secondary { color: #fff !important; border-color: rgba(255,255,255,.42); }
.tp-product .tp-final .tp-btn-secondary:hover { background: #fff; color: var(--tp-ink) !important; border-color: #fff; }

/* ------------------------------------------------------- notes and related */

.tp-richtext { color: var(--tp-muted); }
.tp-richtext img { margin: 12px 0; }

.tp-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.tp-related-card {
    display: block;
    background: #fff;
    border: 1px solid var(--tp-line);
    border-radius: 3px;
    padding: 18px;
    color: var(--tp-ink);
    transition: transform .18s ease, border-color .18s ease;
}
.tp-related-card:hover { transform: translateY(-3px); border-color: var(--tp-ink); text-decoration: none; }
.tp-related-card img { margin-bottom: 12px; }
.tp-related-card strong { font-family: var(--tp-display); font-size: 17px; font-weight: 500; }

/* ------------------------------------------------------------------ motion */

@media (prefers-reduced-motion: no-preference) {
    .tp-hero-copy > *,
    .tp-readout {
        animation: tp-rise .6s cubic-bezier(.2, .7, .3, 1) both;
    }
    .tp-hero-copy .tp-kicker { animation-delay: .02s; }
    .tp-hero-copy h1 { animation-delay: .08s; }
    .tp-hero-copy .tp-lede { animation-delay: .16s; }
    .tp-hero-copy .tp-actions { animation-delay: .24s; }
    .tp-hero-copy .tp-fineprint { animation-delay: .3s; }
    .tp-readout { animation-delay: .34s; }
}
@keyframes tp-rise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

/* -------------------------------------------------------------- responsive */

@media (max-width: 1024px) {
    .tp-hero-grid { grid-template-columns: 1fr; gap: 40px; }
    .tp-hero-copy h1 { font-size: 48px; }
    .tp-proof-grid { grid-template-columns: 1fr 1fr; }
    .tp-alert-grid { grid-template-columns: 1fr; gap: 32px; }
    .tp-related-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 767px) {
    .tp-product { font-size: 15.5px; }
    .tp-section { padding: 56px 0; }
    .tp-hero { padding: 52px 0 46px; }
    .tp-hero-copy h1 { font-size: 36px; }
    .tp-hero-copy h1 br { display: none; }
    .tp-lede { font-size: 17px; }
    .tp-section-head h2,
    .tp-frame-copy h2,
    .tp-alert-grid h2,
    .tp-final h2 { font-size: 29px; }
    .tp-frame-cols,
    .tp-price-grid,
    .tp-proof-grid,
    .tp-related-grid { grid-template-columns: 1fr; }
    .tp-line::before { left: 33px; }
    .tp-step { grid-template-columns: 68px minmax(0, 1fr); gap: 18px; padding: 18px 0; }
    .tp-step-media { width: 68px; height: 68px; padding: 14px; }
    .tp-step-body h3 { font-size: 21px; }
    .tp-support-grid { flex-direction: column; align-items: flex-start; gap: 22px; }
    .tp-readout li b { font-size: 23px; }
    .tp-btn { padding: 13px 24px; }
    .tp-actions .tp-btn { flex: 1 1 auto; text-align: center; }
}

/* The date the production figures were taken. The panel above reads as an
   instrument, so it has to say when it was last read rather than let the live
   dot imply "now". Small and quiet: it is a footnote, not a claim. */
.tp-readout-asof{margin:10px 0 0;font-size:11px;line-height:1.4;letter-spacing:.02em;
  color:rgba(255,255,255,.45)}