/*
Theme Name: Truckers Child
Theme URI: https://thetruckersdomain.com
Description: Child theme for The Truckers Domain site
Author: Ryan DesChamps
Version: 1.25.0
Template: twentytwentyfive
Text Domain: truckers-child
*/

/* =============================================================================
   FONTS
   Self-hosted variable WOFF2 from @fontsource-variable. Single file per family
   with the full weight axis (no per-weight multi-request fan-out the way the
   Google Fonts CDN does it). font-display: swap so text never blocks paint.
   ========================================================================== */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('assets/fonts/inter-variable.woff2') format('woff2-variations'),
         url('assets/fonts/inter-variable.woff2') format('woff2');
}

@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('assets/fonts/playfair-variable.woff2') format('woff2-variations'),
         url('assets/fonts/playfair-variable.woff2') format('woff2');
}

/* =============================================================================
   0. RESET
   Universal box-sizing keeps padded inputs and cards inside their containers.
   ========================================================================== */

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

/* =============================================================================
   1. DESIGN TOKENS
   See BRAND.md for the 60-30-10 rule (white / steel / orange) and brand voice.
   ========================================================================== */

:root {
    /* Brand palette */
    --color-white: #FFFFFF;
    --color-white-soft: #F4F6F8;
    --color-steel: #3D5063;
    --color-steel-deep: #2C3D4F;
    --color-steel-soft: #5A7185;
    /* Orange revised 2026-05-09 for WCAG AA: --color-orange #C44F11 reaches 4.83:1 on white. */
    --color-orange: #C44F11;
    --color-orange-darker: #A03E08;
    --color-orange-bright: #E8631C; /* Non-text decoration only; contrast does not apply. */
    --color-orange-deep: #A03E08; /* Back-compat alias for --color-orange-darker. */

    /* Neutrals derived from the palette */
    --color-text: #1F2A36;
    --color-text-muted: #5A7185;
    --color-border: #D8DEE5;

    /* Type families (loaded in functions.php) */
    --font-display: 'Playfair Display', Georgia, serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Fluid type scale */
    --fs-h1: clamp(2.5rem, 1.6rem + 4vw, 4.5rem);
    --fs-h2: clamp(2rem, 1.4rem + 2.6vw, 3rem);
    --fs-h3: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
    --fs-h4: 1.375rem;
    --fs-h5: 1.125rem;
    --fs-h6: 0.875rem;
    --fs-body: 1.0625rem;
    --fs-small: 0.9375rem;

    /* Spacing scale (4px base) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;

    /* Layout */
    --container-max: 1200px;
    --container-narrow: 720px;
    --container-pad-mobile: 1.25rem;
    --container-pad: 2rem;

    /* Radii */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(45, 61, 79, 0.06);
    --shadow-md: 0 6px 18px rgba(45, 61, 79, 0.10);
    --shadow-lg: 0 20px 40px rgba(45, 61, 79, 0.14);

    /* Motion */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --speed: 180ms;
}

/* =============================================================================
   2. BASE
   ========================================================================== */

body {
    background-color: var(--color-white);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img,
svg,
video {
    max-width: 100%;
    height: auto;
}

hr {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: var(--space-7) 0;
}

/* =============================================================================
   3. TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.wp-block-heading {
    font-family: var(--font-display);
    color: var(--color-steel);
    line-height: 1.15;
    margin-top: 0;
    margin-bottom: var(--space-4);
    font-weight: 700;
    letter-spacing: -0.01em;
}

h1,
h1.wp-block-heading {
    font-size: var(--fs-h1);
    line-height: 1.05;
    letter-spacing: -0.02em;
}

h2,
h2.wp-block-heading {
    font-size: var(--fs-h2);
    line-height: 1.1;
}

h3,
h3.wp-block-heading {
    font-size: var(--fs-h3);
}

h4,
h4.wp-block-heading {
    font-size: var(--fs-h4);
}

h5,
h5.wp-block-heading {
    font-size: var(--fs-h5);
    font-family: var(--font-body);
    font-weight: 600;
}

h6,
h6.wp-block-heading {
    font-size: var(--fs-h6);
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

p {
    margin-top: 0;
    margin-bottom: var(--space-5);
}

p.has-large-font-size,
.lede {
    font-size: 1.25rem;
    line-height: 1.5;
    color: var(--color-text-muted);
}

strong, b {
    font-weight: 600;
}

ul, ol {
    margin-top: 0;
    margin-bottom: var(--space-5);
    padding-left: 1.25rem;
}

li {
    margin-bottom: var(--space-2);
}

/* =============================================================================
   4. LINKS
   ========================================================================== */

a {
    color: var(--color-steel);
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;
    transition: color var(--speed) var(--ease),
                text-decoration-thickness var(--speed) var(--ease);
}

a:hover,
a:focus-visible {
    color: var(--color-orange);
    text-decoration-thickness: 2px;
}

/* =============================================================================
   5. BUTTONS
   Default = primary CTA (orange + steel text). Variants below.
   Targets raw <button> and Gutenberg's .wp-block-button__link.
   ========================================================================== */

.button,
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.wp-block-button__link,
.wp-element-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    padding: 0.95rem 1.75rem;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color var(--speed) var(--ease),
                color var(--speed) var(--ease),
                transform var(--speed) var(--ease),
                box-shadow var(--speed) var(--ease);
    background-color: var(--color-orange);
    color: var(--color-white);
}

.button:hover,
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
.wp-block-button__link:hover,
.wp-element-button:hover {
    background-color: var(--color-orange-deep);
    color: var(--color-white);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.is-style-secondary .wp-block-button__link,
.button--secondary {
    background-color: var(--color-steel);
    color: var(--color-white);
}

.is-style-secondary .wp-block-button__link:hover,
.button--secondary:hover {
    background-color: var(--color-steel-deep);
    color: var(--color-white);
}

.is-style-outline .wp-block-button__link,
.button--outline {
    background-color: transparent;
    color: var(--color-steel);
    border: 2px solid var(--color-steel);
    padding: calc(0.95rem - 2px) calc(1.75rem - 2px);
}

.is-style-outline .wp-block-button__link:hover,
.button--outline:hover {
    background-color: var(--color-steel);
    color: var(--color-white);
}

.button--sm,
.is-style-small .wp-block-button__link {
    padding: 0.6rem 1.1rem;
    font-size: var(--fs-small);
}

/* =============================================================================
   6. LAYOUT / CONTAINERS
   ========================================================================== */

.alignfull,
.wp-block-group.alignfull {
    width: 100%;
    margin-inline: 0;
    max-width: none;
}

main {
    padding-block: var(--space-7);
}

/* =============================================================================
   7. HEADER (site nav bar)
   Targets twentytwentyfive's <header class="wp-block-template-part">.
   ========================================================================== */

header.wp-block-template-part,
.site-header {
    background-color: var(--color-steel);
    color: var(--color-white);
    padding-block: var(--space-4);
}

header.wp-block-template-part .wp-block-site-title a,
.site-header .wp-block-site-title a {
    color: var(--color-white);
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: -0.01em;
}

header.wp-block-template-part .wp-block-site-title a:hover,
.site-header .wp-block-site-title a:hover {
    color: var(--color-orange);
}

header.wp-block-template-part .wp-block-site-tagline,
.site-header .wp-block-site-tagline {
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--fs-small);
}

header.wp-block-template-part .wp-block-navigation,
.site-header .wp-block-navigation {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 500;
}

header.wp-block-template-part .wp-block-navigation a,
header.wp-block-template-part .wp-block-navigation .wp-block-navigation-item__content,
.site-header .wp-block-navigation a {
    color: var(--color-white);
    text-decoration: none;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    transition: color var(--speed) var(--ease),
                background-color var(--speed) var(--ease);
}

header.wp-block-template-part .wp-block-navigation a:hover,
header.wp-block-template-part .wp-block-navigation .wp-block-navigation-item__content:hover,
header.wp-block-template-part .wp-block-navigation .current-menu-item > a,
.site-header .wp-block-navigation a:hover {
    color: var(--color-orange);
    background-color: rgba(255, 255, 255, 0.06);
    text-decoration: none;
}

header.wp-block-template-part .wp-block-button .wp-block-button__link,
.site-header .wp-block-button .wp-block-button__link {
    background-color: var(--color-orange);
    color: var(--color-steel);
    padding: 0.65rem 1.25rem;
    font-size: var(--fs-small);
}

header.wp-block-template-part .wp-block-button .wp-block-button__link:hover,
.site-header .wp-block-button .wp-block-button__link:hover {
    background-color: var(--color-orange-deep);
}

/* =============================================================================
   8. FOOTER
   ========================================================================== */

footer.wp-block-template-part,
.site-footer {
    background-color: var(--color-steel);
    color: var(--color-white);
    padding-block: var(--space-8);
    border-top: 3px solid var(--color-orange);
}

footer.wp-block-template-part h1,
footer.wp-block-template-part h2,
footer.wp-block-template-part h3,
footer.wp-block-template-part h4,
footer.wp-block-template-part h5,
footer.wp-block-template-part h6,
.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5,
.site-footer h6 {
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--space-4);
}

footer.wp-block-template-part a,
.site-footer a {
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
}

footer.wp-block-template-part a:hover,
.site-footer a:hover {
    color: var(--color-orange);
    text-decoration: none;
}

footer.wp-block-template-part p,
.site-footer p {
    color: rgba(255, 255, 255, 0.78);
    font-size: var(--fs-small);
}

/* =============================================================================
   9. FORMS
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="password"],
textarea,
select {
    width: 100%;
    padding: 0.75rem 1rem;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-text);
    background-color: var(--color-white-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    transition: border-color var(--speed) var(--ease),
                box-shadow var(--speed) var(--ease);
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 0;
    border-color: var(--color-orange);
    box-shadow: 0 0 0 3px rgba(232, 99, 28, 0.25);
}

textarea {
    min-height: 9rem;
    resize: vertical;
}

label {
    display: block;
    font-weight: 600;
    font-size: var(--fs-small);
    margin-bottom: var(--space-2);
    color: var(--color-steel);
}

/* =============================================================================
   10. UTILITY CLASSES
   Apply via Gutenberg's "Additional CSS class(es)" panel.
   ========================================================================== */

.td-section {
    padding-block: var(--space-9);
}

.td-section--steel {
    background-color: var(--color-steel);
    color: var(--color-white);
}

.td-section--steel h1,
.td-section--steel h2,
.td-section--steel h3,
.td-section--steel h4 {
    color: var(--color-white);
}

.td-section--white-soft {
    background-color: var(--color-white-soft);
}

.td-section--orange {
    background-color: var(--color-orange);
    color: var(--color-steel);
}

.td-section--orange h1,
.td-section--orange h2,
.td-section--orange h3,
.td-section--orange h4 {
    color: var(--color-steel);
}

.td-eyebrow {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-orange);
    margin-bottom: var(--space-3);
    display: block;
}

.td-narrow {
    max-width: var(--container-narrow);
    margin-inline: auto;
}

/* =============================================================================
   11. WORDPRESS BLOCK ADJUSTMENTS
   ========================================================================== */

.wp-block-quote,
blockquote {
    margin: var(--space-6) 0;
    padding: var(--space-4) var(--space-5);
    border-left: 4px solid var(--color-orange);
    font-family: var(--font-display);
    font-size: 1.375rem;
    line-height: 1.4;
    color: var(--color-steel);
    font-style: italic;
}

.wp-block-quote cite,
blockquote cite {
    display: block;
    margin-top: var(--space-3);
    font-family: var(--font-body);
    font-size: var(--fs-small);
    font-style: normal;
    color: var(--color-text-muted);
}

code, kbd, samp {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.92em;
    background-color: var(--color-white-soft);
    padding: 0.125em 0.375em;
    border-radius: var(--radius-sm);
}

pre {
    background-color: var(--color-steel);
    color: var(--color-white);
    padding: var(--space-5);
    border-radius: var(--radius-md);
    overflow-x: auto;
    line-height: 1.5;
}

pre code {
    background: transparent;
    color: inherit;
    padding: 0;
}

.wp-block-cover {
    min-height: 60vh;
}

.wp-block-cover .wp-block-cover__inner-container {
    max-width: var(--container-max);
}

.wp-block-post-content .wp-block-image img,
.entry-content .wp-block-image img {
    border-radius: var(--radius-md);
}

.wp-block-separator {
    border-color: var(--color-border);
    opacity: 1;
}

.wp-block-separator.is-style-wide {
    border-bottom-width: 2px;
}

/* =============================================================================
   12. HOMEPAGE
   Layouts and components for templates/front-page.html.
   ========================================================================== */

/* Constrained content wrapper used inside full-bleed sections */
.td-container {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad-mobile);
    width: 100%;
}

@media (min-width: 600px) {
    .td-container {
        padding-inline: var(--container-pad);
    }
}

/* Section heads */
.section-head {
    max-width: var(--container-narrow);
    margin: 0 auto var(--space-7) auto;
    text-align: center;
}

.section-title {
    font-size: var(--fs-h2);
    margin-bottom: var(--space-4);
}

.section-intro {
    font-size: 1.125rem;
    color: var(--color-text-muted);
    margin: 0 auto;
    max-width: 56ch;
}

/* Site header */
.site-header__inner {
    gap: var(--space-5);
    padding-block: var(--space-4);
}

/* White-text logo variant sits directly on the steel header. No plate. */
.site-header__brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    line-height: 0;
    transition: opacity var(--speed) var(--ease);
}

.site-header__brand:hover,
.site-header__brand:focus-visible {
    opacity: 0.85;
}

.site-header__brand img {
    display: block;
    height: 44px;
    width: auto;
    max-width: 100%;
}

@media (max-width: 720px) {
    .site-header__brand img {
        height: 36px;
    }
}

.site-nav__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-nav__list a {
    color: var(--color-white);
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 500;
    padding: 0.5rem 0;
    transition: color var(--speed) var(--ease);
}

.site-nav__list a:hover {
    color: var(--color-orange);
    text-decoration: none;
}

.site-header__ctas {
    gap: var(--space-4);
}

.site-header__free-tools {
    margin: 0;
    font-size: var(--fs-small);
}

.site-header__free-tools a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
}

.site-header__free-tools a:hover {
    color: var(--color-orange);
}

@media (max-width: 880px) {
    .site-header__inner {
        gap: var(--space-3);
    }
    .site-header__free-tools {
        display: none;
    }
}

.site-header__utility ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-header__utility a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: var(--fs-small);
    transition: color var(--speed) var(--ease);
}

.site-header__utility a:hover {
    color: var(--color-orange);
}

/* Home main has no top padding — hero handles its own */
.home {
    padding-block: 0;
}

/* Hero */
.hero {
    padding-block: var(--space-9) var(--space-8);
}

.hero__inner {
    display: grid;
    gap: var(--space-7);
    grid-template-columns: 1fr;
    align-items: center;
}

@media (min-width: 960px) {
    .hero__inner {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        gap: var(--space-9);
    }
}

.hero__title {
    font-family: var(--font-display);
    font-size: var(--fs-h1);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--color-steel);
    margin: 0 0 var(--space-4) 0;
}

.hero__lede {
    font-size: 1.25rem;
    line-height: 1.5;
    color: var(--color-text-muted);
    margin: 0 0 var(--space-6) 0;
    max-width: 56ch;
}

.hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.hero__trust {
    font-size: var(--fs-small);
    color: var(--color-text-muted);
    max-width: 56ch;
    margin: 0;
}

.hero__visual {
    display: grid;
    gap: var(--space-4);
    position: relative;
}

.hero__card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    box-shadow: var(--shadow-md);
}

.hero__card--checklist {
    background: var(--color-white-soft);
}

@media (min-width: 960px) {
    .hero__card--checklist {
        margin-left: var(--space-6);
    }
}

.hero__card-tag {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    /* Darker orange to keep 4.5:1 against the white-soft background of
       .hero__card--checklist; the base --color-orange (#C44F11) lands at
       4.33 on #F4F6F8, just shy of WCAG AA. */
    color: var(--color-orange-darker);
    margin-bottom: var(--space-3);
}

.hero__card-title {
    font-family: var(--font-body);
    font-size: 1.0625rem;
    font-weight: 700;
    margin: 0 0 var(--space-4) 0;
    color: var(--color-steel);
    line-height: 1.3;
}

.hero__card-list {
    margin: 0 0 var(--space-4) 0;
    padding: 0;
}

.hero__card-list > div {
    display: flex;
    justify-content: space-between;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--fs-small);
}

.hero__card-list dt {
    color: var(--color-text-muted);
    margin: 0;
}

.hero__card-list dd {
    margin: 0;
    font-weight: 600;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

.hero__card-result {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: var(--space-3);
    border-top: 2px solid var(--color-steel);
}

.hero__card-result span {
    font-size: 0.6875rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}

.hero__card-result strong {
    font-family: var(--font-display);
    font-size: 1.875rem;
    color: var(--color-steel);
    font-variant-numeric: tabular-nums;
}

.hero__card-checks {
    margin: 0;
    padding: 0;
    list-style: none;
}

.hero__card-checks li {
    position: relative;
    padding: var(--space-2) 0 var(--space-2) 1.75rem;
    font-size: var(--fs-small);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
    margin: 0;
}

.hero__card-checks li:last-child {
    border-bottom: 0;
}

.hero__card-foot {
    margin: var(--space-3) 0 0 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    letter-spacing: 0.01em;
}

.hero__card-checks li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 1rem;
    height: 1rem;
    transform: translateY(-50%);
    border: 2px solid var(--color-orange);
    border-radius: 3px;
}

/* Card grid system */
.card-grid {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: 1fr;
}

@media (min-width: 600px) {
    .card-grid--2,
    .card-grid--3,
    .card-grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 960px) {
    .card-grid--3 {
        grid-template-columns: repeat(3, 1fr);
    }
    .card-grid--4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Card base. Cards may contain a single primary link rendered with .card__link;
   that link is promoted to a stretched-link via ::before so the entire card
   surface is the tap target (WCAG 2.2 AA target-size 44+, Fitts' law). */
.card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    position: relative;
    transition: transform var(--speed) var(--ease),
                box-shadow var(--speed) var(--ease),
                border-color var(--speed) var(--ease);
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-steel-soft);
}

/* Stretched-link: the .card__link inside a .card covers the whole card. */
.card:has(> .card__link) .card__link::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: 1;
}

/* Card has many child elements; the stretched ::before sits above them.
   Lift content above the overlay so text remains selectable and any
   nested interactive elements stay reachable. */
.card > * {
    position: relative;
    z-index: 2;
}

/* The visible card__link affordance: keep its hover treatment, drop its own
   bounding box from the layout (it's the entire card now). */
.card:has(> .card__link) .card__link {
    isolation: isolate;
}

/* Focus ring should outline the whole card, not the inline link text. */
.card:has(> .card__link) .card__link:focus-visible {
    outline: 0;
}

.card:has(> .card__link:focus-visible) {
    outline: 2px solid var(--color-orange);
    outline-offset: 2px;
}

.card h3 {
    font-family: var(--font-body);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
    color: var(--color-steel);
    letter-spacing: 0;
}

.card p {
    margin: 0;
    color: var(--color-text);
    font-size: var(--fs-small);
    line-height: 1.55;
}

/* Card link is the visible affordance text inside a card; the actual click
   target is the whole card via the stretched-link pattern. Steel keeps the
   color budget concentrated on real CTAs (orange buttons + focus rings + the
   wedge eyebrow chips). The card itself signals interactivity via hover lift. */
.card__link {
    margin-top: auto;
    padding-top: var(--space-2);
    font-weight: 600;
    font-size: var(--fs-small);
    color: var(--color-steel);
    text-decoration: none;
    align-self: flex-start;
    transition: color var(--speed) var(--ease);
}

.card:hover .card__link,
.card__link:hover {
    color: var(--color-orange);
    text-decoration: none;
}

.card__category {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-muted);
}

.card__usecase {
    color: var(--color-text-muted);
    font-size: var(--fs-small);
    margin-top: auto;
}

.card__usecase strong {
    color: var(--color-steel);
    font-weight: 700;
}

.card--value h3 {
    font-size: 1.1875rem;
}

.card--value p {
    font-size: 1rem;
}

/* Card media: full-bleed documentary image at the top of a card. Negative
   margins equal to the card's own padding pull the media out to the inner
   border edge so it spans the card edge to edge. .card__link stays a direct
   child of .card, so the stretched-link overlay and focus ring are
   unaffected. Scoped to the .card--category (Resources) and .card--tool
   (Calculators) variants so other .card instances site-wide keep their
   text-only layout. */
.card--category .card__media,
.card--tool .card__media {
    margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    /* Nest one px inside the card's 1px border so the radii sit concentric. */
    border-radius: calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px) 0 0;
    background: var(--color-white-soft);
}

.card--category .card__media-img,
.card--tool .card__media-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Source images are true monochrome; saturation guard mirrors the wedge
       column treatment so any residual cast stays restrained and orange
       never leaks in from the photography. */
    filter: saturate(0.85);
    transition: transform var(--speed) var(--ease);
}

.card--category:hover .card__media-img,
.card--tool:hover .card__media-img {
    transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
    .card--category:hover .card__media-img,
    .card--tool:hover .card__media-img {
        transform: none;
    }
}

/* Featured cards: the three wedge-anchored category cards in the lead row of
   the resource-categories grid. Promoted via larger padding, an orange left
   border, and a small "Wedge" chip. The non-featured cards in row 2-4 stay
   visually quieter so the wedge surface earns its prominence. */
.card-grid--featured {
    margin-bottom: var(--space-6);
}

.card--featured {
    padding: var(--space-6);
    border-left: 4px solid var(--color-orange);
    background: linear-gradient(180deg, var(--color-white) 0%, var(--color-white-soft) 100%);
}

.card--featured h3 {
    font-size: 1.25rem;
    line-height: 1.25;
}

.card__chip {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-orange);
    background: rgba(196, 79, 17, 0.08);
    border-radius: 999px;
    align-self: flex-start;
    margin-bottom: var(--space-2);
}

/* Grid heading: a small label above a card grid that names what the grid is.
   Used to differentiate "Specialty depth" (wedge) from "Universal new-carrier
   tools" in the resource-categories section. */
.card-grid__heading {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--color-text-muted);
    margin: 0 0 var(--space-4) 0;
}

.card-grid--featured + .card-grid__heading {
    margin-top: var(--space-7);
}

/* Badges */
.badge {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: 999px;
    align-self: flex-start;
}

.badge--free {
    background: var(--color-white-soft);
    color: var(--color-steel);
    border: 1px solid var(--color-border);
}

.badge--paid {
    background: var(--color-orange);
    color: var(--color-white);
}

/* Email capture */
.email-capture {
    color: var(--color-white);
}

.email-capture__inner {
    display: grid;
    gap: var(--space-7);
    align-items: center;
    grid-template-columns: 1fr;
}

@media (min-width: 880px) {
    .email-capture__inner {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-8);
    }
}

.email-capture__copy h2 {
    color: var(--color-white);
    margin: 0 0 var(--space-4) 0;
}

.email-capture__copy p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.125rem;
    margin: 0;
    max-width: 50ch;
    line-height: 1.5;
}

.email-capture__form {
    background: var(--color-white);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    box-shadow: var(--shadow-lg);
}

.email-capture__fields {
    display: grid;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.email-capture__form .button {
    width: 100%;
}

.email-capture__reassurance {
    margin: var(--space-3) 0 0 0;
    font-size: var(--fs-small);
    color: var(--color-text-muted);
    text-align: center;
}

/* Trust points */
.trust-section .section-title {
    margin-bottom: var(--space-7);
}

.trust-points {
    list-style: none;
    margin: 0 auto var(--space-7) auto;
    padding: 0;
    display: grid;
    gap: var(--space-5);
    grid-template-columns: 1fr;
    counter-reset: trust;
}

@media (min-width: 880px) {
    .trust-points {
        grid-template-columns: repeat(3, 1fr);
    }
}

.trust-point {
    counter-increment: trust;
    padding: var(--space-5);
    background: var(--color-white-soft);
    border-left: 3px solid var(--color-orange);
    border-radius: var(--radius-sm);
    margin: 0;
}

.trust-point::before {
    content: counter(trust, decimal-leading-zero);
    display: block;
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--color-orange);
    margin-bottom: var(--space-2);
    line-height: 1;
}

.trust-point h3 {
    font-family: var(--font-body);
    font-size: 1.0625rem;
    font-weight: 700;
    margin: 0 0 var(--space-3) 0;
    color: var(--color-steel);
}

.trust-point p {
    margin: 0;
    color: var(--color-text);
    font-size: var(--fs-small);
    line-height: 1.55;
}

.trust-section__statement {
    max-width: var(--container-narrow);
    margin: 0 auto;
    text-align: center;
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--color-text);
}

/* Wedge section — operational specialty depth callouts.
   Three columns; each is a thesis statement, not a marketing card.
   Lives between the value-prop section and the resource-categories section. */
.wedge {
    border-block: 1px solid var(--color-border);
    position: relative;
    overflow: hidden;
}

/* Faint steel-deck material texture behind the wedge section. The
   white-soft background plus three dark photo cards already carry the
   visual weight here, so the overlay sits very low (0.05) with multiply
   to read as tonal grain, not imagery. Mirrors the .email-capture and
   .free-tools pattern. */
.wedge::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('assets/images/texture-wedge-wide.jpg');
    background-size: cover;
    background-position: center;
    opacity: 0.05;
    z-index: 0;
    mix-blend-mode: multiply;
    pointer-events: none;
}

.wedge > .td-container,
.wedge .td-container {
    position: relative;
    z-index: 1;
}

.wedge__lede {
    max-width: 60ch;
    margin: 0 auto var(--space-7) auto;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 1.125rem;
    line-height: 1.55;
}

.wedge__grid {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: 1fr;
}

@media (min-width: 880px) {
    .wedge__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-7);
    }
}

.wedge__col {
    padding: 0;
    border-left: 3px solid var(--color-orange);
    background: var(--color-white-soft);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.wedge__col-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    /* Steel-blue duotone source images; subtle saturation guard so any
       residual color in the source stays restrained. */
    filter: saturate(0.85);
}

.wedge__col-body {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    flex: 1;
}

.wedge__chip {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-orange);
    margin: 0;
}

.wedge__col h3,
.wedge__col-body h3 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--color-steel);
    margin: 0;
    line-height: 1.25;
    letter-spacing: -0.005em;
}

.wedge__col p,
.wedge__col-body p {
    margin: 0;
    color: var(--color-text);
    font-size: var(--fs-small);
    line-height: 1.55;
}

.wedge__status {
    margin-top: auto;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    font-style: italic;
}

/* Founder / "who builds this" section — replaces the old generic trust block.
   Anchored on the operator build story plus the brand thesis. */
.founder {
    background: var(--color-white-soft);
}

.founder__inner {
    display: grid;
    gap: var(--space-7);
    grid-template-columns: 1fr;
    align-items: center;
    max-width: 980px;
    margin-inline: auto;
}

@media (min-width: 880px) {
    .founder__inner {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        gap: var(--space-8);
    }
}

.founder__avatar {
    aspect-ratio: 1 / 1;
    background: var(--color-steel);
    color: var(--color-white);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: clamp(3rem, 8vw, 5rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    box-shadow: var(--shadow-md);
    max-width: 280px;
    margin-inline: auto;
    width: 100%;
}

.founder__avatar span {
    display: block;
    line-height: 1;
}

.founder__avatar img {
    width: 78%;
    max-width: 220px;
    height: auto;
}

.founder__body h2 {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    color: var(--color-steel);
    margin: 0 0 var(--space-4) 0;
    line-height: 1.1;
}

.founder__name {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    /* Darker orange to keep 4.5:1 against .founder section's white-soft
       background; same fix as .hero__card-tag. */
    color: var(--color-orange-darker);
    margin: 0 0 var(--space-3) 0;
}

.founder__bio {
    color: var(--color-text);
    font-size: 1.0625rem;
    line-height: 1.6;
    margin: 0 0 var(--space-5) 0;
    max-width: 56ch;
}

.founder__quote {
    border-left: 4px solid var(--color-orange);
    padding: var(--space-3) var(--space-5);
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.25rem;
    line-height: 1.4;
    color: var(--color-steel);
    font-style: italic;
}

.founder__quote cite {
    display: block;
    margin-top: var(--space-2);
    font-family: var(--font-body);
    font-size: var(--fs-small);
    font-style: normal;
    color: var(--color-text-muted);
}

/* Final CTA */
.final-cta__title {
    max-width: 32ch;
    margin-inline: auto;
    margin-bottom: var(--space-6);
}

/* Site footer (overrides legacy 8. FOOTER block where needed) */
.site-footer {
    padding-block: var(--space-8) var(--space-6);
}

.site-footer__columns {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: 1fr;
    margin-bottom: var(--space-6);
}

@media (min-width: 720px) {
    .site-footer__columns {
        grid-template-columns: 1fr 1fr 1fr;
        gap: var(--space-7);
    }
}

.site-footer__brand-row {
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.site-footer__brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    line-height: 0;
    margin: 0 0 var(--space-3) 0;
    transition: opacity var(--speed) var(--ease);
}

.site-footer__brand:hover,
.site-footer__brand:focus-visible {
    opacity: 0.85;
}

.site-footer__brand img {
    display: block;
    height: 48px;
    width: auto;
    max-width: 100%;
}

.site-footer__description {
    color: rgba(255, 255, 255, 0.75);
    font-size: var(--fs-small);
    line-height: 1.55;
    margin: 0;
    max-width: 40ch;
}

.site-footer__col h3 {
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 var(--space-3) 0;
    line-height: 1;
}

.site-footer__col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.site-footer__col li {
    margin-bottom: var(--space-2);
}

.site-footer__col a {
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    font-size: var(--fs-small);
}

.site-footer__col a:hover {
    color: var(--color-orange);
}

.site-footer__divider {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    margin: var(--space-5) 0 var(--space-4) 0;
}

.site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-5);
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
}

.site-footer__copyright {
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--fs-small);
    margin: 0;
}

.site-footer__legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-footer__legal-links a {
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--fs-small);
    text-decoration: none;
}

.site-footer__legal-links a:hover {
    color: var(--color-orange);
}

.site-footer__disclaimer {
    font-size: 0.75rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
    max-width: 80ch;
}

/* Visually hidden helper */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =============================================================================
   13. ACCESSIBILITY
   ========================================================================== */

:focus-visible {
    outline: 2px solid var(--color-orange);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =============================================================================
   13b. PAGE TEMPLATES (about, contact, legal, calculators, etc.)
   ========================================================================== */

.page-header {
    background: var(--color-white-soft);
    padding-block: var(--space-8) var(--space-7);
    border-bottom: 1px solid var(--color-border);
}

.page-header .td-container {
    max-width: var(--container-max, 80rem);
    position: relative;
    z-index: 1;
}

.page-header__title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    color: var(--color-steel);
    margin: var(--space-2) 0 var(--space-3) 0;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.page-header__lede {
    font-size: 1.125rem;
    color: var(--color-text-muted);
    margin: 0;
    max-width: 60ch;
    line-height: 1.55;
}

/* Image-backed page header. Set --page-header-image inline on the section
   (or via a section-specific class) and the ::before lays a steel-toned
   image as a backdrop with a darkening gradient on top so eyebrow + title +
   lede stay readable. The --color-orange-bright variant is allowed here
   because eyebrow text sits on a dark gradient, not a soft surface. */
.page-header--image {
    background: var(--color-steel-deep);
    color: var(--color-white);
    position: relative;
    overflow: hidden;
    border-bottom: 0;
}

.page-header--image::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--page-header-image);
    background-size: cover;
    background-position: center;
    opacity: 0.45;
    z-index: 0;
}

.page-header--image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(44, 61, 79, 0.35) 0%,
        rgba(44, 61, 79, 0.85) 100%);
    z-index: 0;
}

.page-header--image .td-eyebrow {
    color: var(--color-orange-bright);
}

.page-header--image .page-header__title {
    color: var(--color-white);
}

.page-header--image .page-header__lede {
    color: rgba(255, 255, 255, 0.92);
}

/* Section divider: a narrow horizontal image strip that punctuates the
   homepage between content-dense grids. Decorative; aria-hidden in the
   markup. Lazy-loaded via background-image so it doesn't compete for
   above-the-fold paint. */
.section-divider {
    height: 200px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-block: 1px solid var(--color-border);
    /* Slight saturation pull so any color leaking through stays muted. */
    filter: saturate(0.9);
}

@media (min-width: 880px) {
    .section-divider {
        height: 280px;
    }
}

.section-divider--strap-tension {
    background-image: url('assets/images/divider-strap-tension.jpg');
}

.section-divider--binder-tabs {
    background-image: url('assets/images/divider-binder-tabs.jpg');
}

/* Email-capture section gets a faint paperwork texture behind the steel,
   reinforcing the "free tools and templates" promise without competing
   with the form. Mix-blend-mode keeps the overlay tonal, not chromatic. */
.email-capture {
    position: relative;
    overflow: hidden;
}

.email-capture::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('assets/images/texture-paperwork-wide.jpg');
    background-size: cover;
    background-position: center;
    opacity: 0.12;
    z-index: 0;
    mix-blend-mode: luminosity;
    pointer-events: none;
}

.email-capture > .td-container,
.email-capture .td-container {
    position: relative;
    z-index: 1;
}

/* Free-tools section gets a faint back-office paperwork texture. This
   section is light (white-soft), not steel, so the overlay uses multiply
   at a low opacity to read as a tonal watermark behind the white cards
   rather than washing them out. */
.free-tools {
    position: relative;
    overflow: hidden;
}

.free-tools::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('assets/images/texture-freetools-wide.jpg');
    background-size: cover;
    background-position: center;
    opacity: 0.07;
    z-index: 0;
    mix-blend-mode: multiply;
    pointer-events: none;
}

.free-tools > .td-container,
.free-tools .td-container {
    position: relative;
    z-index: 1;
}

/* Audience-stages section: same faint-texture treatment as the other
   white-soft sections. Only light text cards here, so it sits a touch
   higher than the wedge (0.06 vs 0.05). */
.stages {
    position: relative;
    overflow: hidden;
}

.stages::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('assets/images/texture-stages-wide.jpg');
    background-size: cover;
    background-position: center;
    opacity: 0.06;
    z-index: 0;
    mix-blend-mode: multiply;
    pointer-events: none;
}

.stages > .td-container,
.stages .td-container {
    position: relative;
    z-index: 1;
}

/* Long-form prose (legal pages, About, etc.) */
.td-prose {
    max-width: 70ch;
    margin-inline: auto;
    color: var(--color-text);
}

.td-prose--center {
    text-align: center;
    margin-inline: auto;
}

.td-prose h2 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--color-steel);
    margin-block: var(--space-6) var(--space-3);
}

.td-prose h2:first-child {
    margin-block-start: 0;
}

.td-prose h3 {
    font-size: 1.125rem;
    margin-block: var(--space-4) var(--space-2);
    color: var(--color-steel);
}

.td-prose p {
    margin-block: 0 var(--space-3);
    line-height: 1.65;
}

.td-prose ul,
.td-prose ol {
    margin-block: 0 var(--space-4);
    padding-inline-start: 1.5em;
    line-height: 1.65;
}

.td-prose li {
    margin-block-end: var(--space-2);
}

.td-prose a {
    color: var(--color-steel);
    text-decoration: underline;
    text-decoration-color: var(--color-orange);
    text-underline-offset: 3px;
}

.td-prose a:hover {
    color: var(--color-orange);
}

.td-prose em {
    color: var(--color-text-muted);
    font-style: italic;
}

/* Single article (templates/single.html). Layout reuses .page-header and the
   .td-prose 70ch column; only the byline and the featured-image framing need
   their own rules. Posts are imported as classic HTML (see scripts/wp-import),
   so the prose column constrains every element uniformly — that is what keeps
   headings aligned with body copy instead of breaking to full width. */
.article-byline {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2) var(--space-4);
    margin-top: var(--space-3);
    font-size: var(--fs-small);
    color: var(--color-text-muted);
}

.article-byline .wp-block-post-author-name {
    font-weight: 600;
    color: var(--color-steel);
}

.article-byline time {
    color: var(--color-text-muted);
}

.article-hero {
    margin: 0 0 var(--space-6) 0;
}

.article-hero img {
    display: block;
    width: 100%;
    border-radius: var(--radius-md);
}

/* Lead magnet (free-download landing) */
.lead-magnet {
    display: grid;
    gap: var(--space-7);
    grid-template-columns: 1fr;
    align-items: start;
}

@media (min-width: 880px) {
    .lead-magnet {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-8);
    }
}

.lead-magnet__form {
    background: var(--color-steel);
    color: var(--color-white);
    padding: var(--space-6);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    position: sticky;
    top: var(--space-5);
}

.lead-magnet__form h3 {
    color: var(--color-white);
    font-family: var(--font-display);
    margin: 0 0 var(--space-4) 0;
    font-size: 1.5rem;
}

.lead-magnet__form .button {
    width: 100%;
}

.lead-magnet__form .email-capture__reassurance {
    color: rgba(255, 255, 255, 0.75);
}

.lead-magnet__form-lede {
    color: rgba(255, 255, 255, 0.82);
    font-size: var(--fs-small);
    margin: 0 0 var(--space-4) 0;
}

.lead-magnet__form .button + .button {
    margin-top: var(--space-3);
}

/* Outline button that reads on the steel lead-magnet panel. The default
   .button--outline uses steel-on-transparent and disappears here. */
.lead-magnet__form .button--ghost {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.55);
    color: var(--color-white);
}

.lead-magnet__form .button--ghost:hover {
    background: rgba(255, 255, 255, 0.10);
    color: var(--color-white);
}

/* Account page: register and sign-in side by side */
.account-grid {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: 1fr;
}

@media (min-width: 760px) {
    .account-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-7);
    }
}

.ttd-form-error {
    background: #FBE9E7;
    border-left: 4px solid var(--color-orange);
    color: #7A2E0E;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-5);
}

/* Contact page */
.contact-grid {
    display: grid;
    gap: var(--space-7);
    grid-template-columns: 1fr;
    align-items: start;
}

@media (min-width: 880px) {
    .contact-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-8);
    }
}

.contact-form {
    background: var(--color-white-soft);
    padding: var(--space-5);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}

.contact-form h3 {
    margin: 0 0 var(--space-2) 0;
    color: var(--color-steel);
    font-family: var(--font-display);
}

.contact-form__note {
    margin: 0 0 var(--space-4) 0;
    font-size: var(--fs-small);
    color: var(--color-text-muted);
}

.contact-form__field {
    margin-block-end: var(--space-3);
}

.contact-form__field label {
    display: block;
    font-weight: 600;
    font-size: var(--fs-small);
    margin-block-end: var(--space-1);
    color: var(--color-steel);
}

.contact-form .button {
    width: 100%;
}

/* Cost Per Mile calculator */
.cpm {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: 1fr;
    align-items: start;
}

@media (min-width: 880px) {
    .cpm {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-7);
    }
}

.cpm__form {
    display: grid;
    gap: var(--space-5);
}

.cpm__field {
    display: grid;
    gap: var(--space-1);
}

.cpm__field label {
    font-weight: 600;
    color: var(--color-steel);
}

.cpm__hint {
    font-size: var(--fs-small);
    color: var(--color-text-muted);
    line-height: 1.45;
    margin-block-end: var(--space-2);
}

.cpm__input-wrap {
    display: flex;
    align-items: center;
    background: var(--color-white-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    transition: border-color var(--speed) var(--ease),
                box-shadow var(--speed) var(--ease);
}

.cpm__input-wrap:focus-within {
    border-color: var(--color-orange);
    box-shadow: 0 0 0 3px rgba(232, 99, 28, 0.25);
}

.cpm__input-wrap input {
    background: transparent;
    border: 0;
    flex: 1;
    padding: 0.75rem 1rem;
    width: 100%;
}

.cpm__input-wrap input:focus,
.cpm__input-wrap input:focus-visible {
    box-shadow: none;
    border: 0;
    outline: 0;
}

.cpm__prefix {
    padding-inline-start: 1rem;
    color: var(--color-text-muted);
    font-weight: 600;
}

.cpm__result {
    background: var(--color-steel);
    color: var(--color-white);
    padding: var(--space-6);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    position: sticky;
    top: var(--space-5);
    text-align: center;
}

.cpm__result-label {
    display: block;
    font-size: var(--fs-small);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.75);
    margin-block-end: var(--space-2);
}

.cpm__result-value {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(3rem, 6vw, 4.5rem);
    font-weight: 700;
    color: var(--color-orange);
    line-height: 1;
    margin-block-end: var(--space-3);
}

.cpm__note {
    font-size: var(--fs-small);
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.5;
    margin: 0;
}

.cpm__result-sub {
    display: block;
    font-size: var(--fs-small);
    color: rgba(255, 255, 255, 0.75);
    margin-block-end: var(--space-3);
}

.cpm__rig {
    display: grid;
    gap: var(--space-1);
    border: 0;
    padding: 0;
    margin: 0;
}

.cpm__rig legend {
    font-weight: 600;
    color: var(--color-steel);
    padding: 0;
}

.cpm__rig-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-block-start: var(--space-2);
}

.cpm__rig-options label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 600;
    color: var(--color-steel);
    cursor: pointer;
}

.cpm__prefix--suffix {
    padding-inline: 1rem 1rem;
    padding-inline-start: 0;
}

/* Card status indicator (for placeholders) */
.card__status {
    display: inline-block;
    margin-top: auto;
    padding-top: var(--space-2);
    font-size: var(--fs-small);
    color: var(--color-text-muted);
    font-style: italic;
}

/* =============================================================================
   14. PRINT
   ========================================================================== */

@media print {
    body {
        background: white;
        color: black;
    }
    header.wp-block-template-part,
    footer.wp-block-template-part,
    .site-header,
    .site-footer,
    .wp-block-navigation {
        display: none;
    }
    a {
        color: black;
        text-decoration: underline;
    }
}