/* Self-hosted fonts (SIL OFL), subset latin + latin-ext — replaces the Google Fonts stylesheet. */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500 700;font-display:swap;src:url(/assets/fonts/space-grotesk-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500 700;font-display:swap;src:url(/assets/fonts/space-grotesk-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/*
 * Truck & Bus Theory Ireland — marketing and legal pages
 *
 * Ported from cartheoryprep/css/cartheoryprep.css. Diverged: the blue ramp is replaced by this
 * app's brand ramp, taken verbatim from
 * Apps/TruckTheoryPrepIreland/Codebase/TruckTheoryPrepIreland/src/constants/colours.ts,
 * so the site and the app share one source of truth for brand colour. The accent is the
 * app's aqua (aqua[400] / aqua[300]), the colour of the emblem's headlights. It replaced the
 * family's amber on 2026-09-16 with the Truck & Bus artwork: App Store 4.3(a) rejected the
 * theory apps for looking like one template, so this app no longer shares that signature.
 */

:root {
    --ttp-night: #011B1D;
    --ttp-night-surface: #02292D;
    --ttp-night-raised: #023D42;
    --ttp-mint: #00C1D1;
    --ttp-accent: #66D1DD;
    --ttp-accent-soft: #91DCE4;
    --ttp-cream: #f7f4eb;
    --ttp-text: #F6FBFC;
    --ttp-text-secondary: #D3ECEF;
    --ttp-text-muted: #67C1CB;
    --ttp-border: rgba(102, 209, 221, 0.18);
    --ttp-panel-border: rgba(0, 193, 209, 0.18);
    --ttp-shadow: 0 24px 64px rgba(0, 8, 9, 0.42);

    --ttp-max-width: 1140px;
    --ttp-reading-width: 760px;
    --ttp-radius: 18px;

    color-scheme: dark;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background:
        radial-gradient(circle at top right, rgba(102, 209, 221, 0.10), transparent 24%),
        radial-gradient(circle at top left, rgba(0, 193, 209, 0.10), transparent 28%),
        linear-gradient(180deg, #011E20 0%, var(--ttp-night) 100%);
    color: var(--ttp-text);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 18px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@media (max-width: 720px) {
    body {
        font-size: 16px;
    }
}

a {
    color: var(--ttp-accent-soft);
    text-decoration: underline;
    text-underline-offset: 3px;
}

a:hover,
a:focus {
    color: var(--ttp-cream);
}

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

h1,
h2,
h3,
h4 {
    margin: 0 0 0.55em;
    color: var(--ttp-cream);
    font-family: "Space Grotesk", "Inter", sans-serif;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

h1 {
    font-size: clamp(38px, 6vw, 74px);
}

h2 {
    font-size: clamp(29px, 4vw, 46px);
    margin-top: 2em;
}

h3 {
    font-size: clamp(22px, 3vw, 30px);
    margin-top: 1.5em;
}

h4 {
    font-size: clamp(18px, 2vw, 22px);
    margin-top: 1.25em;
}

p {
    margin: 0 0 1em;
}

ul,
ol {
    margin: 0 0 1em;
    padding-left: 1.4em;
}

li {
    margin-bottom: 0.45em;
}

code,
pre {
    font-family: ui-monospace, "SF Mono", Consolas, "Liberation Mono", monospace;
    background: rgba(102, 209, 221, 0.08);
    border-radius: 6px;
    padding: 1px 6px;
    font-size: 0.9em;
}

hr {
    border: 0;
    border-top: 1px solid var(--ttp-border);
    margin: 2.25em 0;
}

.ttp-shell {
    max-width: var(--ttp-max-width);
    margin: 0 auto;
    padding: 0 24px;
}

@media (min-width: 720px) {
    .ttp-shell {
        padding: 0 48px;
    }
}

@media (min-width: 1024px) {
    .ttp-shell {
        padding: 0 80px;
    }
}

.ttp-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--ttp-accent);
    color: #011B1D;
    padding: 8px 12px;
    z-index: 1000;
}

.ttp-skip:focus {
    left: 8px;
    top: 8px;
}

.ttp-topbar {
    background: rgba(1, 27, 29, 0.88);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--ttp-border);
}

.ttp-topbar .ttp-shell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    padding-top: 16px;
    padding-bottom: 16px;
}

.ttp-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--ttp-cream);
    text-decoration: none;
    font-family: "Space Grotesk", sans-serif;
    font-size: 22px;
    font-weight: 700;
}

.ttp-brand:hover,
.ttp-brand:focus {
    color: var(--ttp-cream);
}

.ttp-brand-mark {
    width: 32px;
    height: 32px;
    border-radius: 8px;
}

.ttp-nav {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.ttp-nav a {
    color: var(--ttp-text-secondary);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
}

.ttp-nav a:hover,
.ttp-nav a:focus,
.ttp-nav a[aria-current="page"] {
    color: var(--ttp-cream);
}

.ttp-hero {
    padding: 84px 0 96px;
    position: relative;
    overflow: hidden;
}

.ttp-hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: center;
}

@media (min-width: 960px) {
    .ttp-hero-grid {
        grid-template-columns: 1.1fr 0.9fr;
    }
}

.ttp-eyebrow {
    margin: 0 0 14px;
    color: var(--ttp-accent);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 13px;
    font-weight: 700;
}

.ttp-lede {
    font-size: clamp(18px, 2.2vw, 22px);
    color: var(--ttp-text-secondary);
    max-width: 680px;
}

.ttp-tag-list {
    margin-top: 24px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.ttp-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(0, 104, 113, 0.16);
    border: 1px solid rgba(0, 193, 209, 0.18);
    color: var(--ttp-text-secondary);
    font-size: 14px;
    font-weight: 600;
}

.ttp-cta-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 32px;
}

.ttp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 14px 24px;
    border-radius: 999px;
    border: 0;
    background: var(--ttp-accent);
    color: #011B1D;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.12s ease, background 0.15s ease;
}

.ttp-btn:hover,
.ttp-btn:focus {
    background: var(--ttp-accent-soft);
    color: #011B1D;
}

.ttp-btn:active {
    transform: scale(0.98);
}

.ttp-btn--ghost {
    background: transparent;
    color: var(--ttp-cream);
    border: 1.5px solid var(--ttp-cream);
}

.ttp-btn--ghost:hover,
.ttp-btn--ghost:focus {
    background: var(--ttp-cream);
    color: #011B1D;
}

.ttp-hero-meta {
    margin-top: 18px;
    color: var(--ttp-text-muted);
    font-size: 15px;
}

.ttp-disclaimer {
    margin-top: 28px;
    padding: 18px 20px;
    border-radius: var(--ttp-radius);
    border: 1px solid var(--ttp-border);
    background: rgba(2, 41, 45, 0.72);
    color: var(--ttp-text-secondary);
}

.ttp-disclaimer strong {
    color: var(--ttp-accent-soft);
}

.ttp-hero-media {
    display: flex;
    justify-content: center;
}

.ttp-hero-art {
    width: 100%;
    max-width: 360px;
    border-radius: 34px;
    border: 1px solid var(--ttp-panel-border);
    box-shadow: var(--ttp-shadow);
}

.ttp-section {
    padding: 0 0 88px;
}

/* Section headings centre over their centred intro. Left-aligned, a heading sat at the shell's
   left edge while the 760px intro beneath it was centred, which read as misaligned on wide
   screens. The sources note under that intro is capped and centred to match. */
.ttp-section > .ttp-shell > h2 {
    text-align: center;
}

.ttp-section-intro + .ttp-note {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.ttp-section-intro {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 32px;
    color: var(--ttp-text-secondary);
}

.ttp-grid {
    display: grid;
    gap: 24px;
}

@media (min-width: 720px) {
    .ttp-grid--2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .ttp-grid--3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

.ttp-card {
    background: rgba(2, 41, 45, 0.86);
    border: 1px solid var(--ttp-panel-border);
    border-radius: var(--ttp-radius);
    padding: 24px;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
}

.ttp-card h3,
.ttp-card h4 {
    margin-top: 0;
}

.ttp-card-icon {
    display: block;
    margin-bottom: 12px;
    font-size: 30px;
    line-height: 1;
}

.ttp-card p:last-child,
.ttp-card ul:last-child {
    margin-bottom: 0;
}

.ttp-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

@media (min-width: 860px) {
    .ttp-split {
        grid-template-columns: repeat(2, 1fr);
    }
}

.ttp-outline-card {
    background: rgba(1, 27, 29, 0.78);
    border: 1px solid var(--ttp-border);
    border-radius: var(--ttp-radius);
    padding: 24px;
}

.ttp-outline-card h3 {
    margin-top: 0;
}

.ttp-outline-card ul {
    margin-bottom: 0;
}

.ttp-free-pill,
.ttp-premium-pill {
    display: inline-block;
    margin-bottom: 14px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/*
 * Opaque fills, not translucent ones. ADI Prep uses rgba() here, which means the
 * effective contrast depends on whatever the pill happens to sit on: the same pill
 * measures 5.51:1 on the page ground but 3.86:1 on `--ttp-night-raised`, i.e. it
 * silently drops below AA inside a raised card. Pinning the fill makes the pairing
 * ground-independent and measurable. Verified: 5.51:1 and 7.02:1.
 */
.ttp-free-pill {
    background: #023A3F;
    color: var(--ttp-mint);
}

.ttp-premium-pill {
    background: #2C2A26;
    color: var(--ttp-accent-soft);
}

.ttp-breakdown {
    display: grid;
    gap: 14px;
}

.ttp-breakdown-row {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) auto auto;
    gap: 14px;
    align-items: center;
    padding: 16px 18px;
    border-radius: 14px;
    background: rgba(2, 41, 45, 0.7);
    border: 1px solid rgba(0, 193, 209, 0.14);
}

.ttp-breakdown-row strong {
    color: var(--ttp-cream);
}

.ttp-breakdown-label {
    color: var(--ttp-text-secondary);
}

.ttp-breakdown-value {
    color: var(--ttp-accent-soft);
    font-weight: 700;
    white-space: nowrap;
}

.ttp-flow-step {
    display: grid;
    gap: 14px;
}

.ttp-step-number {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(102, 209, 221, 0.14);
    color: var(--ttp-accent-soft);
    font-family: "Space Grotesk", sans-serif;
    font-size: 20px;
    font-weight: 700;
}

.ttp-note {
    margin-top: 18px;
    color: var(--ttp-text-muted);
    font-size: 15px;
}

.ttp-pricing {
    padding: 56px 0;
    background: rgba(2, 41, 45, 0.92);
    border-top: 1px solid var(--ttp-border);
    border-bottom: 1px solid var(--ttp-border);
    text-align: center;
}

.ttp-pricing strong {
    color: var(--ttp-accent-soft);
}

.ttp-stores {
    margin-top: 24px;
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.ttp-store-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    min-width: 220px;
    border-radius: 14px;
    border: 1px solid var(--ttp-panel-border);
    background: rgba(2, 61, 66, 0.9);
    color: var(--ttp-cream);
    text-decoration: none;
    text-align: left;
    line-height: 1.2;
}

.ttp-store-badge:hover,
.ttp-store-badge:focus {
    color: var(--ttp-cream);
    border-color: var(--ttp-accent);
}

.ttp-store-badge small {
    display: block;
    font-size: 12px;
    color: var(--ttp-text-muted);
}

.ttp-store-badge strong {
    display: block;
    font-size: 17px;
    color: var(--ttp-cream);
}

.ttp-store-glyph {
    display: inline-flex;
    align-items: center;
    flex: none;
}

.ttp-store-glyph svg {
    display: block;
}

.ttp-store-badge--disabled {
    opacity: 0.72;
    cursor: default;
}

.ttp-store-badge--disabled:hover,
.ttp-store-badge--disabled:focus {
    border-color: var(--ttp-panel-border);
}

.ttp-pricing-disclaimer {
    max-width: 760px;
    margin: 18px auto 0;
    color: var(--ttp-text-muted);
    font-size: 15px;
}

.ttp-page-hero {
    padding: 64px 0 48px;
    background: linear-gradient(180deg, rgba(2, 41, 45, 0.95), rgba(1, 27, 29, 0.96));
    border-bottom: 1px solid var(--ttp-border);
}

.ttp-meta {
    color: var(--ttp-text-muted);
    font-size: 15px;
}

.ttp-prose {
    max-width: var(--ttp-reading-width);
    margin: 0 auto;
    padding: 48px 0 96px;
}

.ttp-toc {
    padding: 18px 20px;
    margin-bottom: 32px;
    border-radius: var(--ttp-radius);
    border: 1px solid var(--ttp-border);
    background: rgba(2, 41, 45, 0.78);
}

.ttp-toc strong {
    display: block;
    margin-bottom: 10px;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 700;
}

.ttp-toc ol {
    margin: 0;
    padding-left: 1.2em;
}

.ttp-footer {
    margin-top: 64px;
    padding: 56px 0 32px;
    background: rgba(1, 27, 29, 0.92);
    border-top: 1px solid var(--ttp-border);
    color: var(--ttp-text-secondary);
    font-size: 15px;
}

.ttp-pricing + .ttp-footer {
    margin-top: 0;
}

.ttp-footer a {
    color: var(--ttp-text-secondary);
    text-decoration: none;
}

.ttp-footer a:hover,
.ttp-footer a:focus {
    color: var(--ttp-cream);
    text-decoration: underline;
}

.ttp-footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}

@media (min-width: 720px) {
    .ttp-footer-grid {
        grid-template-columns: 2fr 1fr 1fr 1fr;
    }
}

.ttp-footer h4 {
    margin: 0 0 12px;
    color: var(--ttp-cream);
    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.ttp-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ttp-footer li {
    margin-bottom: 8px;
}

.ttp-footer-bottom {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--ttp-border);
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    color: var(--ttp-text-muted);
    font-size: 14px;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .ttp-btn {
        transition: none;
    }
}

@media print {
    body {
        background: white;
        color: black;
    }

    .ttp-topbar,
    .ttp-footer,
    .ttp-page-hero {
        background: white;
        color: black;
    }

    .ttp-prose {
        padding: 0;
    }
}

/* TritonApps social profiles in the footer bar. Colour is inherited from the
   footer text so each subsite theme styles these without its own palette. */

.ttp-footer-social {
    display: flex;
    gap: 10px;
    align-items: center;
}

.ttp-footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid currentColor;
    color: inherit;
    opacity: 0.6;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.ttp-footer-social a:hover,
.ttp-footer-social a:focus-visible {
    opacity: 1;
    transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
    .ttp-footer-social a {
        transition: none;
    }

    .ttp-footer-social a:hover,
    .ttp-footer-social a:focus-visible {
        transform: none;
    }
}