/* Current inner pages only. Load after styles.css and homepage.css.
   Approved colours, buttons, focus, navigation and footer come from homepage.css.
   Historical pages do not opt into this scope. No JavaScript is required. */
.site-page {
    --radius-xl: 24px;
    --radius-lg: 18px;
    --radius-md: 12px;
    --shadow: 0 8px 28px -20px rgba(23, 60, 59, 0.22);
    --surface: #fff;
    --surface-strong: #edf4f0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-page.theme-tripometer { --app-accent: #875a28; --app-tint: #faf3e9; }
.site-page.theme-cashbookly { --app-accent: #087278; --app-tint: #ecf7f6; }
.site-page.theme-bandwidth { --app-accent: #356791; --app-tint: #eef4fa; }
.site-page.theme-trovetrace { --app-accent: #556738; --app-tint: #f0f4e9; }
.site-page.theme-guides { --app-accent: #6c5793; --app-tint: #f3f0fa; }

.site-page main { flex: 1; min-width: 0; }
.site-page :where(section, article, aside, figure, .product-copy, .form-field) { min-width: 0; }
.site-page :where(h1, h2, h3, p, li, dt, dd, a) { overflow-wrap: anywhere; }
.site-page :where(h1, h2, h3, [id]) { scroll-margin-top: 7rem; }
.site-page :where(h1, h2, h3) { max-width: none; }
.site-page h1 { font-size: clamp(2.4rem, 4.5vw, 4.1rem); line-height: 1.1; }
.site-page h2 { font-size: clamp(1.7rem, 2.6vw, 2.4rem); line-height: 1.25; }
.site-page h3 { font-size: 1.2rem; line-height: 1.4; }
.site-page .eyebrow { color: var(--app-accent); }

/* One primary navigation on every current inner page. Native details keeps
   all five apps reachable by keyboard and touch without a script. */
.site-page .product-header-inner {
    flex-direction: row;
    justify-content: space-between;
    padding-block: 0.7rem;
}

.site-page .header-logo-link {
    flex-shrink: 0;
    width: 160px;
    padding: 0.55rem 0.75rem;
    border: 1px solid #294f52;
    border-radius: 12px;
    background: #173c3b;
}

.site-page .header-logo { width: 100%; height: auto; }
.site-page .product-header-inner .site-nav { flex-direction: row; flex-wrap: nowrap; gap: 0.4rem; }
.site-page .site-nav a[aria-current="page"],
.site-page .apps-menu[open] > summary { background: #e5eee7; }
.site-page .apps-menu { position: relative; }
.site-page .apps-menu > summary {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 44px;
    padding: 0.4rem 1rem;
    border-radius: 10px;
    cursor: pointer;
    list-style: none;
}
.site-page .apps-menu > summary::-webkit-details-marker { display: none; }
.site-page .apps-menu > summary::after {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
}
.site-page .apps-menu[open] > summary::after { transform: translateY(2px) rotate(225deg); }
.site-page .apps-menu > summary:hover { background: #e5eee7; }
.site-page summary:focus-visible {
    outline: 3px solid #28776b;
    outline-offset: 4px;
    border-radius: 10px;
}
.site-page .apps-menu-list {
    position: absolute;
    z-index: 30;
    inset: calc(100% + 0.6rem) 0 auto auto;
    width: 260px;
    max-height: 65vh;
    overflow-y: auto;
    padding: 0.6rem;
    border: 1px solid #b9c9be;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 14px 32px -16px rgba(23, 60, 59, 0.3);
}
.site-page .apps-menu-list a { display: flex; width: 100%; font-size: 0.9rem; }

/* Page-specific links stay outside the sticky header, so long menus do not
   obscure content on phones. Existing destinations and labels are retained. */
.site-page .page-navigation { border-bottom: 1px solid var(--line); }
.site-page .page-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.8rem;
    padding-block: 0.55rem;
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 700;
}
.site-page .page-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.4rem 0.65rem;
    border-radius: 8px;
}
.site-page .page-nav a:hover { color: var(--text); background: #e5eee7; }
.site-page .page-nav a[aria-current="page"] { color: var(--text); }

.site-page .back-link {
    min-height: 44px;
    align-items: center;
    margin-bottom: 1rem;
    color: var(--brand);
    font-size: 0.9rem;
}
.site-page .back-link:hover,
.site-page .back-link:focus-visible { color: var(--text); text-decoration: underline; }
.site-page main :where(p, li, dd) a:not(.button),
.site-page .legal-list a {
    color: var(--brand);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.site-page main :where(p, li, dd) a:hover { text-decoration-thickness: 2px; }

/* Products retain their existing sections and media arrangements. */
.site-page .product-page { padding-bottom: 4rem; }
.site-page .product-hero { padding: 3rem 0 1rem; }
.site-page .product-hero-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}
.site-page .product-subtitle { color: var(--text); max-width: 40rem; line-height: 1.55; }
.site-page .hero-blurb { max-width: 65ch; font-size: 1rem; margin-top: 1.1rem; }
.site-page .product-highlights { max-width: 62ch; }
.site-page .product-highlights li::marker,
.site-page .legal-list li::marker { color: var(--app-accent); }
.site-page .product-section { padding-top: 3.5rem; }
.site-page .section-heading { max-width: 58rem; margin-bottom: 1.75rem; }
.site-page .section-heading h2 { max-width: 30ch; font-size: clamp(1.8rem, 2.7vw, 2.5rem); }
.site-page .section-intro { max-width: 68ch; }

.site-page .product-app-card,
.site-page .feature-card,
.site-page .screenshot-card,
.site-page .step-card,
.site-page .faq-card,
.site-page .cta-card,
.site-page .contact-card {
    padding: clamp(1.25rem, 2.8vw, 2rem);
    border: 1px solid var(--line);
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--shadow);
}
.site-page .product-app-card { border-top: 4px solid var(--app-accent); }
.site-page .product-app-card .app-description { margin-top: 1.4rem; }
.site-page .product-app-card h2 { font-size: clamp(1.5rem, 2.2vw, 2rem); }
.site-page .product-app-card .app-card-header { align-items: center; }
.site-page .product-app-card .app-icon-placeholder { background: var(--app-tint); color: var(--app-accent); }
.site-page .spec-row { border-color: var(--line); gap: 1rem; }
.site-page .spec-row dt { color: var(--app-accent); }
.site-page .status-pill { background: var(--app-tint); color: var(--app-accent); border-color: var(--line); }
.site-page .feature-card h3,
.site-page .faq-card h3 { color: var(--text); }
.site-page .step-number { background: var(--app-tint); color: var(--app-accent); }
.site-page .steps-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.site-page .step-card { align-content: start; }
.site-page .faq-disclosure summary { line-height: 1.55; padding: 0.2rem 0; min-height: 44px; }
.site-page .faq-disclosure[open] { border-color: #9daf9f; }

.site-page .screenshot-card { margin: 0; align-content: start; }
.site-page .screenshot-card figcaption { color: var(--muted); line-height: 1.65; }
.site-page .screenshot-card picture { max-width: 100%; }
.site-page .phone-hero-picture,
.site-page .trovetrace-hero-picture {
    width: min(100%, 340px);
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: var(--app-tint);
}
.site-page .phone-hero-image,
.site-page .trovetrace-hero-image,
.site-page .phone-screenshot-image,
.site-page .trovetrace-screenshot-image,
.site-page .bandwidth-screenshot-image {
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 8px 24px -14px rgba(18, 40, 33, 0.35);
}
.site-page .phone-media-card,
.site-page .trovetrace-media-card,
.site-page .bandwidth-screenshot-card { background: var(--app-tint); }
.site-page .phone-media-card picture,
.site-page .trovetrace-media-card picture { width: min(75%, 288px); }
.site-page.theme-tripometer .screenshots-section .screenshot-card img {
    width: min(80%, 290px);
    height: auto;
    margin-inline: auto;
    border-radius: 14px;
}
.site-page.theme-tripometer .screenshots-section .screenshot-card { justify-items: center; }
.site-page.theme-tripometer .screenshots-section .screenshot-card figcaption { width: 100%; max-width: 46ch; text-align: center; }
.site-page .top-download-card-image { border-radius: 14px; }

.site-page .philosophy-panel {
    width: 100%;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--app-tint);
}
.site-page .philosophy-panel .about-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.site-page .philosophy-panel h2 { font-size: clamp(1.6rem, 2.5vw, 2.2rem); line-height: 1.25; }
.site-page .about-points { grid-template-columns: 1fr; }
.site-page .about-points p { background: #fff; border: 1px solid var(--line); font-size: 0.9rem; }
.site-page .about-points a { display: flex; justify-content: center; align-items: center; min-height: 44px; }
.site-page .cta-section { padding-bottom: 0; }
.site-page .cta-card { background: var(--app-tint); align-items: center; }
.site-page .cta-card .section-heading { margin-bottom: 0; }

/* General and document pages share a comfortable reading measure. */
.site-page .contact-hero { padding: 3rem 0 1rem; }
.site-page .contact-shell { max-width: 960px; gap: 2rem; }
.site-page .contact-card .section-heading { margin-bottom: 0; }
.site-page .contact-card .hero-blurb { margin: 0; }
.site-page .thankyou-card { margin-inline: auto; }
.site-page .thankyou-card h1 { font-size: clamp(2.1rem, 4vw, 3.3rem); }
.site-page .thankyou-card .button { min-width: 100px; }

.legal-page .contact-shell {
    max-width: 900px;
    padding: clamp(1.25rem, 4vw, 3rem);
    gap: 0;
    border: 1px solid var(--line);
    border-top: 4px solid var(--app-accent);
    border-radius: 24px;
    background: #fff;
}
.legal-page .product-copy { padding-bottom: 2rem; }
.legal-page .contact-card {
    padding: 2rem 0;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    gap: 1rem;
    box-shadow: none;
}
.legal-page .contact-card:last-child { padding-bottom: 0; }
.legal-page .section-heading { gap: 0.55rem; }
.legal-page .section-heading h2 { font-size: clamp(1.45rem, 2.3vw, 1.8rem); max-width: none; }
.legal-page .privacy-subtitle { font-size: 1.1rem; }
.legal-page :where(.section-intro, .hero-blurb, .legal-list) { color: #344c48; max-width: none; font-size: 1rem; }
.legal-page .app-note { text-align: left; }
.legal-page .contact-card .eyebrow { font-size: 0.7rem; }

/* Instructions keep every paragraph and screenshot, with sequential headings. */
.instructions-page .instructions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.instructions-page .instruction-card { height: auto; gap: 1rem; }
.instructions-page .instruction-card h2 { font-size: 1.35rem; line-height: 1.35; }
.instructions-page .instruction-card p { margin: 0; }
.instructions-page .screenshot-placeholder {
    min-height: 0;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--app-tint);
}
.instructions-page .screenshot-placeholder img { width: min(80%, 270px); height: auto; border-radius: 12px; }

/* Form markup, scripts and endpoint stay intact. These rules replace the
   contact page's embedded visual styles, including its original small-screen
   Turnstile scaling. No captcha attributes or submission behaviour changes. */
.contact-page .page-shell { padding: 3rem 0 4rem; }
.contact-page .contact-layout { max-width: 960px; display: grid; gap: 2rem; }
.contact-page .contact-card { padding: clamp(0.75rem, 3vw, 2rem); }
.contact-page .form-field label { color: var(--text); }
.contact-page .form-field input,
.contact-page .form-field textarea {
    border: 1px solid #7a9085;
    border-radius: 12px;
    background: #fff;
    color: var(--text);
    padding: 0.85rem 1rem;
    font: inherit;
    box-shadow: none;
}
.contact-page .form-field input:focus,
.contact-page .form-field textarea:focus {
    outline: 3px solid #28776b;
    outline-offset: 2px;
    border-color: #28776b;
    box-shadow: none;
}
.contact-page .form-field input::placeholder,
.contact-page .form-field textarea::placeholder { color: var(--muted); }
.contact-page .form-actions button {
    min-height: 48px;
    padding: 0.75rem 1.4rem;
    border: 1px solid var(--brand);
    border-radius: 12px;
    color: #fff;
    background: var(--brand);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.contact-page .form-actions button:hover { background: #17473f; }
.contact-page .form-actions button:focus-visible { outline: 3px solid #28776b; outline-offset: 5px; }
.contact-page .cf-turnstile { margin: 0.5rem 0 0; }

@media (max-width: 1000px) {
    .site-page .steps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .site-page .philosophy-panel .about-grid { grid-template-columns: 1fr; }
    .site-page .about-points { max-width: none; }
}

@media (max-width: 900px) {
    .site-page .product-hero-grid,
    .site-page .cta-card { grid-template-columns: minmax(0, 1fr); }
    .site-page .product-showcase { width: min(100%, 620px); margin-inline: auto; }
    .site-page .feature-card-grid,
    .site-page .screenshot-grid,
    .site-page .phone-media-grid,
    .site-page .trovetrace-media-grid,
    .site-page .faq-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .site-page .product-highlights { max-width: none; }
}

@media (max-width: 640px) {
    .site-page .product-header-inner { flex-direction: column; gap: 0.5rem; padding-block: 0.6rem; }
    .site-page .header-logo-link { width: 112px; padding: 0.4rem 0.6rem; border-radius: 10px; }
    .site-page .product-header-inner .site-nav { gap: 0; flex-wrap: nowrap; font-size: 0.87rem; }
    .site-page .site-nav > a,
    .site-page .apps-menu > summary { padding-inline: 0.7rem; }
    .site-page .apps-menu-list { left: -3.8rem; right: auto; width: 260px; }
    .site-page :where(h1, h2, h3, [id]) { scroll-margin-top: 9rem; }
    .site-page .page-nav { gap: 0.1rem 0.25rem; font-size: 0.8rem; }
    .site-page .page-nav a { padding-inline: 0.5rem; }
    .site-page h1 { font-size: clamp(2.1rem, 8.5vw, 3rem); }
    .site-page .product-hero,
    .site-page .contact-hero { padding-top: 1.75rem; }
    .site-page .product-section { padding-top: 2.5rem; }
    .site-page .section-heading h2 { font-size: 1.8rem; }
    .site-page .product-app-card .app-card-header { align-items: flex-start; }
    .site-page .feature-card-grid,
    .site-page .steps-grid,
    .site-page .screenshot-grid,
    .site-page .phone-media-grid,
    .site-page .trovetrace-media-grid,
    .site-page .faq-list,
    .site-page .instructions-grid { grid-template-columns: minmax(0, 1fr); }
    .site-page .phone-media-card picture,
    .site-page .trovetrace-media-card picture { width: min(90%, 288px); }
    .site-page .philosophy-panel { padding: 1.25rem; }
    .site-page .product-page { padding-bottom: 2.5rem; }
    .legal-page .contact-shell { padding: 1.25rem; border-radius: 18px; }
    .legal-page .section-heading h2 { font-size: 1.45rem; }
    .legal-page .contact-card { padding-block: 1.5rem; }
    .contact-page .page-shell { padding-top: 1.75rem; }
    .contact-page .form-actions button { width: 100%; }
}

@media (max-width: 360px) {
    .contact-page .cf-turnstile {
        width: 255px !important;
        max-width: 100%;
        min-height: 55px;
        height: 55px;
        overflow: hidden !important;
    }
    .contact-page .cf-turnstile iframe { transform: scale(0.85); transform-origin: top left; }
}