/* TEKRAM | Gravity Projex Proprietary License
   Copyright (c) 2026 Gravity Projex. All Rights Reserved. | gravityprojex.com.au */

/* ==========================================================================
   TEKRAM design layer, v30.0.0
   --------------------------------------------------------------------------
   Idea: TEKRAM allocates numbered spaces on real ground. The site borrows
   from that world: bitumen, painted bay lines, a site plan, site numbers.
   One signal colour (the logo pink) for actions; amber and green appear
   only as booking states, the way they do in the portal.

   Loads after tekram-styles-v2.css, style.css and the per-page <style>
   blocks' selectors are matched with an extra "html body" where needed so
   this layer wins without !important.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
    --tk-bitumen:   #16202a;   /* dark ground, primary text */
    --tk-bitumen-2: #1e2a36;   /* raised surface on dark */
    --tk-concrete:  #eef1f0;   /* page ground */
    --tk-slab:      #e2e7e6;   /* alternate band */
    --tk-paper:     #ffffff;   /* cards, forms */
    --tk-line:      #cfd6d8;   /* bay lines, borders */
    --tk-ink-2:     #4d5b66;   /* body text on light */
    --tk-ink-3:     #6b7882;   /* captions on light */
    --tk-on-dark:   #c9d2d8;   /* body text on dark */
    --tk-signal:    #d92c68;   /* logo pink: actions, links, focus */
    --tk-signal-hi: #f0568c;   /* signal on dark ground */
    --tk-signal-lo: #b51f55;   /* hover */
    --tk-held:      #e2a10b;   /* state: permanent, held */
    --tk-paid:      #1f8f61;   /* state: paid */

    --tk-display: 'Archivo', 'Inter', system-ui, sans-serif;
    --tk-radius-s: 4px;
    --tk-radius-m: 8px;
    --tk-bay: 48px;            /* grid module used on dark grounds */

    /* Remap the old palette so every per-page style follows the new one. */
    --violet-400: var(--tk-signal-hi);
    --violet-500: var(--tk-signal);
    --violet-600: var(--tk-signal);
    --violet-700: var(--tk-signal-lo);
    --fuchsia-400: var(--tk-signal-hi);
    --fuchsia-500: var(--tk-signal);
    --fuchsia-600: var(--tk-signal-lo);
    --cyan-400: #9fb3c0;
    --cyan-500: #5f7a8b;
    --cyan-600: #4a6474;
    --indigo-500: #4a6474;
    --purple-500: var(--tk-signal);
    --pink-500: var(--tk-signal);
    --sky-500: #4a6474;

    --slate-900: var(--tk-bitumen);
    --slate-950: var(--tk-bitumen);
    --stone-900: var(--tk-bitumen);
    --stone-500: var(--tk-ink-2);

    --body-bg: var(--tk-concrete);
    --section-alt-bg: var(--tk-slab);
    --card-bg: var(--tk-paper);
    --card-border: var(--tk-line);
}

/* ---------- 2. Base type ------------------------------------------------- */
html body {
    background: var(--tk-concrete);
    color: var(--tk-bitumen);
    font-feature-settings: 'cv11', 'ss01';
}
html body h1, html body h2, html body h3,
html body .hero-title, html body .section-title, html body .cta-title,
html body .pricing-name, html body .price-value {
    font-family: var(--tk-display);
    font-stretch: 88%;
    letter-spacing: -0.012em;
}
html body h1, html body .hero-title { font-weight: 760; line-height: 1.02; }
html body h2, html body .section-title { font-weight: 720; line-height: 1.08; }
html body h3, html body h4 { font-weight: 650; }

html body a:focus-visible,
html body button:focus-visible,
html body input:focus-visible,
html body select:focus-visible,
html body textarea:focus-visible {
    outline: 2px solid var(--tk-signal);
    outline-offset: 2px;
}

/* Gradient text becomes plain, confident type. */
html body .gradient-text,
html body .gradient-text-dark {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: currentColor;
    color: inherit;
}

/* Decorative blobs, glows, pulse dots and floating patterns are retired. */
html body .hero-orb, html body .hero-grid, html body .preview-glow-1, html body .preview-glow-2,
html body .how-it-works-orb, html body .cta-orb, html body .cta-pattern, html body .faq-orb,
html body .features-bg, html body .pricing-bg, html body .faq-bg, html body .cta-bg,
html body .hero-badge .pulse-dot,
html body .welcome-hero::before, html body .welcome-hero::after,
html body .contact-hero::before, html body .contact-hero::after,
html body .legal-hero::before, html body .legal-hero::after,
html body .clients::before {
    display: none;
}

/* Section labels: quiet sentence-case wayfinding, not shouting eyebrows. */
html body .section-label,
html body .hero-tagline {
    display: block;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--tk-signal);
    margin: 0 0 0.75rem;
    width: auto;
    text-align: left;
    background: none;
    padding: 0;
    border: 0;
}
html body .section-label svg { display: none; }

html body .section-title { color: var(--tk-bitumen); font-size: clamp(1.75rem, 3.6vw, 2.75rem); }
html body .section-subtitle { color: var(--tk-ink-2); font-size: 1.0625rem; line-height: 1.65; max-width: 40rem; }

/* Left-aligned section heads read like a document, not a poster. */
html body .section-header,
html body .section .section-header,
html body .section-header.centered {
    text-align: left;
    max-width: 46rem;
    margin-left: 0;
    margin-right: auto;
}
html body .section-header .section-title,
html body .section-header .section-subtitle,
html body .section .section-title,
html body .section .section-subtitle {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
}

/* Hero badges (pills above headings) become plain small text. */
html body .hero-badge {
    background: none;
    border: 0;
    padding: 0;
    border-radius: 0;
    color: var(--tk-signal-hi);
    font-weight: 600;
}
html body .hero-badge span { color: var(--tk-signal-hi); }
html body .hero-badge svg { color: var(--tk-signal-hi); }

/* No scroll-in fades: content is simply there. */
html body .animate-on-scroll,
html body .animate-on-scroll[data-delay] {
    opacity: 1;
    transform: none;
    transition: none;
}

/* ---------- 3. Buttons --------------------------------------------------- */
html body .btn,
html body .tekram-header .hdr-btn,
html body .hero-nav a,
html body .client-btn,
html body .contact-submit-btn {
    border-radius: var(--tk-radius-s);
    font-weight: 600;
    letter-spacing: 0;
    box-shadow: none;
    transform: none;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
html body .btn:hover, html body .hdr-btn:hover, html body .hero-nav a:hover { transform: none; box-shadow: none; }
html body .btn:hover svg.arrow-right { transform: none; }

html body .btn-primary,
html body .btn-primary-grad,
html body .tekram-header .hdr-btn-primary,
html body .contact-submit-btn {
    background: var(--tk-signal);
    border: 1px solid var(--tk-signal);
    color: #fff;
}
html body .btn-primary:hover,
html body .btn-primary-grad:hover,
html body .tekram-header .hdr-btn-primary:hover,
html body .contact-submit-btn:hover {
    background: var(--tk-signal-lo);
    border-color: var(--tk-signal-lo);
    color: #fff;
}
html body .btn-outline-light,
html body .btn-outline,
html body .tekram-header .hdr-btn-outline-light {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
}
html body .btn-outline-light:hover,
html body .btn-outline:hover,
html body .tekram-header .hdr-btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: #fff;
}
html body .btn-ghost,
html body .tekram-header .hdr-btn-ghost {
    background: transparent;
    border: 1px solid transparent;
    color: var(--tk-bitumen);
}
html body .btn-ghost:hover { text-decoration: underline; text-underline-offset: 3px; background: transparent; }
html body .btn-white { background: #fff; color: var(--tk-bitumen); border: 1px solid #fff; }
html body .btn-dark { background: var(--tk-bitumen); color: #fff; }

/* ---------- 4. Header ---------------------------------------------------- */
html body .tekram-header .navbar,
html body .tekram-header .navbar.scrolled {
    background: var(--tk-bitumen);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: none;
}
html body .tekram-header .logo-text {
    font-family: var(--tk-display);
    font-stretch: 112%;
    font-weight: 800;
    letter-spacing: 0.04em;
    background: none;
    -webkit-text-fill-color: #fff;
    color: #fff;
}
html body .tekram-header .nav-link { color: var(--tk-on-dark); font-weight: 500; }
html body .tekram-header .nav-link:hover,
html body .tekram-header .nav-link[aria-current="page"],
html body .tekram-header .current-menu-item > .nav-link { color: #fff; }
html body .tekram-header .hdr-btn-ghost { color: #fff; }
html body .tekram-header .hdr-btn-ghost:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; background: transparent; }
html body .tekram-header .mobile-menu { background: var(--tk-bitumen); }

/* ---------- 5. Dark grounds: painted bay lines --------------------------- */
html body .hero,
html body .welcome-hero,
html body .contact-hero,
html body .legal-hero,
html body .how-it-works,
html body .cta,
html body .contact-section,
html body .tk-auto {
    background-color: var(--tk-bitumen);
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: var(--tk-bay) var(--tk-bay);
    background-position: -1px -1px;
}
html body .hero-bg, html body .how-it-works-bg { display: none; }

html body .welcome-hero,
html body .contact-hero,
html body .legal-hero { text-align: left; padding-top: 4.5rem; padding-bottom: 4.5rem; }
html body .welcome-hero h1,
html body .contact-hero h1,
html body .legal-hero h1 {
    color: #fff;
    font-size: clamp(2.25rem, 5vw, 3.75rem);
    max-width: 18ch;
    margin-left: 0;
}
html body .welcome-hero p.subtitle,
html body .welcome-hero .hero-subtitle,
html body .contact-hero p,
html body .legal-hero p {
    color: var(--tk-on-dark);
    margin-left: 0;
    text-align: left;
}
html body .welcome-hero .hero-content,
html body .welcome-hero .container > * { text-align: left; margin-left: 0; }
html body .hero-nav,
html body .welcome-hero .hero-cta,
html body .welcome-hero .hero-buttons { justify-content: flex-start; }
html body .hero-nav a { border: 1px solid rgba(255, 255, 255, 0.25); color: #fff; }
html body .hero-nav a:hover { background: rgba(255, 255, 255, 0.08); }

/* ---------- 6. Home hero with site plan ---------------------------------- */
html body .hero.hero--plan {
    min-height: 0;
    padding: 9.5rem 0 6rem;
    text-align: left;
    display: block;
}
.hero--plan .hero-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}
@media (min-width: 1024px) {
    .hero--plan .hero-split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 4rem; }
}
.hero--plan .hero-tagline { color: var(--tk-signal-hi); }
html body .hero--plan .hero-title {
    color: #fff;
    font-size: clamp(2.75rem, 5.6vw, 4.5rem);
    font-stretch: 78%;
    margin: 0 0 1.5rem;
    text-align: left;
}
html body .hero--plan .hero-subtitle {
    color: var(--tk-on-dark);
    font-size: 1.125rem;
    line-height: 1.65;
    max-width: 34rem;
    margin: 0 0 2rem;
    text-align: left;
}
html body .hero--plan .hero-cta { justify-content: flex-start; margin: 0 0 2rem; flex-wrap: wrap; }
.hero-facts {
    list-style: none;
    margin: 0;
    padding: 1.25rem 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.75rem;
    color: var(--tk-on-dark);
    font-size: 0.9375rem;
}
.hero-facts li { position: relative; padding-left: 1rem; }
.hero-facts li::before {
    content: '';
    position: absolute;
    left: 0; top: 0.55em;
    width: 6px; height: 6px;
    background: var(--tk-paid);
    border-radius: 1px;
}

.site-plan {
    margin: 0;
    background: var(--tk-concrete);
    color: var(--tk-bitumen);
    border-radius: var(--tk-radius-m);
    padding: 1.25rem 1.25rem 1rem;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 30px 60px -30px rgba(0, 0, 0, 0.6);
}
.site-plan-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 1rem;
    font-size: 0.9375rem;
}
.site-plan-event { font-family: var(--tk-display); font-stretch: 88%; font-weight: 700; font-size: 1.125rem; }
.site-plan-date { color: var(--tk-ink-3); }
.site-plan-ground {
    background: #dfe4e3;
    border-radius: var(--tk-radius-s);
    padding: 0.75rem;
}
.bay-row {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 4px;
}
.bay {
    position: relative;
    aspect-ratio: 1 / 1;
    border: 2px solid #fff;
    border-radius: 2px;
    background: transparent;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 4px 5px;
    animation: tk-bay-in 0.45s ease both;
    animation-delay: calc(var(--i, 0) * 55ms + 250ms);
}
.bay--wide { grid-column: span 2; aspect-ratio: auto; }
.bay-no {
    font-family: var(--tk-display);
    font-stretch: 80%;
    font-weight: 700;
    font-size: clamp(0.6875rem, 1.1vw, 0.875rem);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.bay--paid { background: var(--tk-paid); border-color: var(--tk-paid); color: #fff; }
.bay--held { background: var(--tk-held); border-color: var(--tk-held); color: var(--tk-bitumen); }
.bay--due  { background: #fff; border-color: var(--tk-signal); color: var(--tk-signal); }
.bay--open { background: transparent; border-style: dashed; border-color: #9aa7ad; color: var(--tk-ink-3); }
@keyframes tk-bay-in {
    from { background-color: transparent; border-color: #fff; color: var(--tk-ink-3); }
}
.site-plan-aisle {
    margin: 0.5rem 0;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(to right, #fff 50%, transparent 50%);
    background-size: 22px 2px;
    background-repeat: repeat-x;
    background-position: center;
}
.site-plan-aisle span {
    background: #dfe4e3;
    padding: 0 0.625rem;
    font-size: 0.75rem;
    color: var(--tk-ink-3);
}
.site-plan-key {
    list-style: none;
    margin: 0.875rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem 1.25rem;
    font-size: 0.8125rem;
    color: var(--tk-ink-2);
}
.site-plan-key li { display: inline-flex; align-items: center; gap: 0.4rem; }
.key { width: 12px; height: 12px; border-radius: 2px; display: inline-block; }
.key--paid { background: var(--tk-paid); }
.key--held { background: var(--tk-held); }
.key--due  { background: #fff; box-shadow: inset 0 0 0 2px var(--tk-signal); }
.key--open { box-shadow: inset 0 0 0 1.5px #9aa7ad; }
.site-plan-cap { margin-top: 0.625rem; font-size: 0.8125rem; color: var(--tk-ink-3); line-height: 1.5; }

@media (prefers-reduced-motion: reduce) {
    .bay { animation: none; }
}

/* ---------- 7. Light sections and cards ---------------------------------- */
html body .features,
html body .industry-doors,
html body .section,
html body .pricing,
html body .faq,
html body .vert-section,
html body .hiw-section,
html body .ind-shared,
html body .clients { background: var(--tk-concrete); }
html body .section-alt { background: var(--tk-slab); }

/* One card language: white slab, hairline border, small radius, no lift. */
html body .feature-card,
html body .door,
html body .step-card,
html body .pricing-card,
html body .faq-item,
html body .client-card,
html body .legal-card,
html body .contact-form-card,
html body .detail-card,
html body .testimonial-card,
html body .cta-card {
    background: var(--tk-paper);
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-radius-m);
    box-shadow: none;
    transform: none;
    transition: border-color 0.15s ease;
}
html body .feature-card:hover,
html body .door:hover,
html body .step-card:hover,
html body .pricing-card:hover,
html body .client-card:hover,
html body .detail-card:hover {
    transform: none;
    box-shadow: none;
    border-color: #9aa7ad;
}
html body .feature-card:hover .feature-icon,
html body .door:hover .door-icon { transform: none; }

/* Icons: a line icon in signal pink, no coloured tile. */
html body .feature-icon,
html body .step-icon,
html body .door-icon,
html body .door-icon[class] {
    background: none;
    box-shadow: none;
    width: auto;
    height: auto;
    border-radius: 0;
    justify-content: flex-start;
    color: var(--tk-signal);
    margin-bottom: 0.875rem;
}
html body .feature-icon svg,
html body .step-icon svg,
html body .door-icon svg { width: 1.5rem; height: 1.5rem; color: var(--tk-signal); stroke-width: 1.75; }

html body .feature-title,
html body .step-title,
html body .door-label { color: var(--tk-bitumen); font-family: var(--tk-display); font-stretch: 92%; font-weight: 680; font-size: 1.1875rem; }
html body .feature-description,
html body .step-description,
html body .door-hook { color: var(--tk-ink-2); line-height: 1.65; }

/* Home "industry doors": a ruled index instead of nine floating cards. */
html body .door-grid { gap: 0; border-top: 1px solid var(--tk-line); }
html body .door {
    border: 0;
    border-bottom: 1px solid var(--tk-line);
    border-radius: 0;
    background: transparent;
    padding: 1.5rem 1.5rem 1.5rem 0;
}
@media (min-width: 640px) {
    html body .door:nth-child(odd) { border-right: 1px solid var(--tk-line); }
    html body .door { padding-left: 1.5rem; }
}
@media (min-width: 1024px) {
    html body .door:nth-child(odd) { border-right: 0; }
    html body .door:not(:nth-child(3n)) { border-right: 1px solid var(--tk-line); }
}
html body .door:hover { background: var(--tk-paper); }
html body .door:hover .door-label { color: var(--tk-signal); }

/* Steps are a real sequence, so numbers stay: shown as site numbers. */
html body .step-number,
html body .how-it-works .step-number {
    position: static;
    width: auto;
    height: auto;
    background: none;
    border: 0;
    box-shadow: none;
    margin-bottom: 1rem;
}
html body .step-number span,
html body .how-it-works .step-number span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    height: 2.75rem;
    padding: 0 0.5rem;
    border: 2px solid currentColor;
    border-radius: 2px;
    font-family: var(--tk-display);
    font-stretch: 80%;
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--tk-signal);
    background: transparent;
    -webkit-text-fill-color: currentColor;
}
html body .step-connector { display: none; }
html body .steps-grid { padding-top: 0; }

/* Home "how it works" band sits on bitumen. */
html body .how-it-works .section-title { color: #fff; }
html body .how-it-works .section-label { color: var(--tk-signal-hi); }
html body .how-it-works .step-card {
    background: var(--tk-bitumen-2);
    border-color: rgba(255, 255, 255, 0.1);
}
html body .how-it-works .step-title { color: #fff; }
html body .how-it-works .step-description { color: var(--tk-on-dark); }
html body .how-it-works .step-number span { color: var(--tk-signal-hi); }
html body .how-it-works .step-icon { display: none; }

/* ---------- 8. Pricing --------------------------------------------------- */
html body .pricing-card.highlighted {
    background: var(--tk-bitumen);
    border: 2px solid var(--tk-signal);
    transform: none;
    box-shadow: none;
}
html body .pricing-card.highlighted .pricing-name,
html body .pricing-card.highlighted .price-value { color: #fff; -webkit-text-fill-color: #fff; background: none; }
html body .pricing-card.highlighted .pricing-description,
html body .pricing-card.highlighted .pricing-feature span,
html body .pricing-card.highlighted .price-period,
html body .pricing-card.highlighted .price-annual { color: var(--tk-on-dark); }
html body .pricing-card.highlighted .pricing-feature svg { color: var(--tk-signal-hi); }
html body .pricing-card:not(.highlighted) .pricing-feature svg { color: var(--tk-paid); }
html body .pricing-badge {
    background: var(--tk-signal);
    color: #fff;
    border-radius: var(--tk-radius-s);
    box-shadow: none;
}
html body .price-value { font-stretch: 84%; font-weight: 760; font-variant-numeric: tabular-nums; }
html body .pricing-toggle { border-radius: var(--tk-radius-s); }
html body .pricing-toggle button,
html body .pricing-toggle .active { border-radius: 3px; }

/* ---------- 9. FAQ ------------------------------------------------------- */
html body .faq-item { border-radius: var(--tk-radius-s); }
html body .faq-item.active { border-color: var(--tk-bitumen); }
html body .faq-question { font-weight: 600; color: var(--tk-bitumen); }
html body .faq-question svg { color: var(--tk-signal); }

/* ---------- 10. Closing call to action ----------------------------------- */
html body .cta { text-align: left; }
html body .cta-card,
html body .cta-content {
    background: transparent;
    border: 0;
    text-align: left;
    padding-left: 0;
    padding-right: 0;
}
html body .cta-title { color: #fff; font-size: clamp(2rem, 4.5vw, 3.25rem); text-align: left; }
html body .cta-subtitle,
html body .cta-note { color: var(--tk-on-dark); text-align: left; margin-left: 0; }
html body .cta-buttons { justify-content: flex-start; flex-wrap: wrap; }

/* Live demo links (30.1.3) */
html body .hero--plan .hero-demo {
    margin: -1.25rem 0 2rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
}
html body .hero--plan .hero-demo a {
    color: #fff;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}
html body .hero--plan .hero-demo a:hover,
html body .hero--plan .hero-demo a:focus-visible { color: var(--tk-signal, #e5317a); }
html body .cip-topic--link { text-decoration: none; color: inherit; border-radius: 10px; padding: 0.5rem; margin: -0.5rem; transition: background 0.15s ease; }
html body .cip-topic--link:hover,
html body .cip-topic--link:focus-visible { background: rgba(255, 255, 255, 0.06); }
html body .cip-topic--link .cip-topic-title { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 11. Screenshots ---------------------------------------------- */
html body .tk-shot,
html body .tk-shot-frame {
    border-radius: var(--tk-radius-m);
    box-shadow: 0 1px 0 rgba(22, 32, 42, 0.04), 0 18px 40px -24px rgba(22, 32, 42, 0.35);
    border: 1px solid var(--tk-line);
}
html body .tk-shot-chrome { background: var(--tk-slab); }
html body .tk-shot-chrome span { background: #b8c2c6; }
html body .tk-shot-caption { color: var(--tk-ink-3); }

/* ---------- 12. Footer --------------------------------------------------- */
html body .tekram-footer .footer,
html body .tekram-footer {
    background: var(--tk-bitumen);
}
html body .tekram-footer .footer-column h4 {
    font-family: var(--tk-display);
    font-stretch: 92%;
    text-transform: none;
    letter-spacing: 0;
    color: #fff;
}
html body .tekram-footer .footer-links a,
html body .tekram-footer .footer-tagline,
html body .tekram-footer .footer-contact-item { color: var(--tk-on-dark); }
html body .tekram-footer .footer-links a:hover { color: #fff; }
html body .tekram-footer .footer-social-link { border-radius: var(--tk-radius-s); }

/* ---------- 13. Forms ---------------------------------------------------- */
html body input[type="text"], html body input[type="email"], html body input[type="tel"],
html body input[type="url"], html body input[type="number"], html body select, html body textarea {
    border-radius: var(--tk-radius-s);
}

/* Section heads sit flush left inside the container. */
html body .section-header { display: block; }
html body .door-footer { text-align: left; }

/* ---------- 14. Feature lists: ruled items, not a card kit -------------- */
html body .feature-card {
    background: transparent;
    border: 0;
    border-top: 2px solid var(--tk-bitumen);
    border-radius: 0;
    padding: 1.25rem 0 0;
}
html body .feature-card:hover { border-color: var(--tk-signal); }
html body .features-grid { column-gap: 2.5rem; row-gap: 3rem; }
html body .feature-icon[class],
html body .step-icon[class],
html body .door-icon[class] {
    display: inline-flex;
    width: auto;
    height: auto;
    padding: 0;
    background: none;
    box-shadow: none;
}

/* Steps read left to right, left aligned. */
html body .step-card { text-align: left; border-radius: var(--tk-radius-m); }
html body .step-card .step-number,
html body .step-card .step-icon { justify-content: flex-start; margin-left: 0; margin-right: 0; }

/* Footer social buttons sit quietly on bitumen. */
html body .tekram-footer .footer-social-link {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
}
html body .tekram-footer .footer-social-link svg { color: #fff; stroke: #fff; }
html body .tekram-footer .footer-social-link:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); }

/* Buttons say what they do; no trailing arrows. */
html body .btn .arrow-right,
html body .btn svg.lucide-arrow-right { display: none; }

/* ---------- 15. Sub-page sections (features, how it works, industries) -- */
html body .section .section-header,
html body .section .section-label,
html body .section .section-title,
html body .section .section-subtitle,
html body .section-header.centered .section-subtitle {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
}
html body .detail-card { padding: 1.5rem; }
html body .detail-card-icon[class] {
    background: none;
    width: auto;
    height: auto;
    border-radius: 0;
    box-shadow: none;
    justify-content: flex-start;
    margin-bottom: 0.75rem;
}
html body .detail-card-icon[class] svg { color: var(--tk-signal); width: 1.5rem; height: 1.5rem; stroke-width: 1.75; }
html body .detail-card h4 { font-family: var(--tk-display); font-stretch: 92%; font-weight: 680; font-size: 1.125rem; color: var(--tk-bitumen); }
html body .detail-card p { color: var(--tk-ink-2); }

/* Callouts: a white note with a coloured edge, like a sticker on a clipboard. */
html body .callout,
html body .callout-violet,
html body .callout-emerald,
html body .tk-translate {
    background: var(--tk-paper);
    border: 1px solid var(--tk-line);
    border-left: 4px solid var(--tk-signal);
    border-radius: var(--tk-radius-s);
    text-align: left;
}
html body .callout-emerald { border-left-color: var(--tk-paid); }
html body .callout-violet p,
html body .callout-emerald p { color: var(--tk-bitumen); }
html body .callout-violet svg { color: var(--tk-signal); }
html body .callout-emerald svg { color: var(--tk-paid); }

/* Jump index: plain tabs on a ruled strip. */
html body .tk-index-link {
    background: var(--tk-paper);
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-radius-s);
    transform: none;
}
html body .tk-index-link:hover { border-color: var(--tk-bitumen); background: var(--tk-paper); transform: none; }
html body .tk-index-link i, html body .tk-index-link svg { color: var(--tk-signal); }

/* "The admin that does itself" band. */
html body .tk-auto-bg, html body .tk-auto-orb { display: none; }
html body .tk-auto-item {
    background: var(--tk-bitumen-2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--tk-radius-m);
    box-shadow: none;
}
html body .tk-auto-icon[class] { background: none; box-shadow: none; width: auto; height: auto; }
html body .tk-auto-icon[class] svg { color: var(--tk-signal-hi); }
html body .tk-auto .section-title { color: #fff; }
html body .tk-auto .section-subtitle { color: var(--tk-on-dark); }

/* ---------- 16. Odds and ends found in review ---------------------------- */
html body .cta-card::before, html body .cta-card::after { display: none; }
html body .cta-card { border-radius: 0; overflow: visible; }

/* How it works: timeline and narrow columns line up with the section heads. */
html body .hiw-track,
html body .container-narrow,
html body .ind-bounds,
html body .vert-table-wrap,
html body .vert-recog,
html body .faq-container { margin-left: 0; }
html body .hiw-track::before { background: var(--tk-line); }
html body .hiw-dot { border-radius: var(--tk-radius-s); }
html body .hiw-when {
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.8125rem;
    background: none;
    border: 0;
    padding: 0;
    color: var(--tk-signal);
}
html body .hiw-phase .hiw-body,
html body .hiw-card { border-radius: var(--tk-radius-m); box-shadow: none; }
html body .hiw-auto,
html body .hiw-next { margin-left: 0; }
html body .hiw-body,
html body .hiw-auto,
html body .hiw-next-card { border-radius: var(--tk-radius-m); box-shadow: none; border-color: var(--tk-line); }
html body .hiw-next-card:hover { transform: none; box-shadow: none; border-color: #9aa7ad; }

/* One left edge: narrow blocks inside light sections sit under their heads. */
html body main section:not(.hero):not(.welcome-hero) .container > :not(.section-header),
html body .hiw-section .container > *,
html body .vert-section .container > *,
html body .ind-shared .container > *,
html body .section .container > *,
html body .faq .container > * {
    margin-left: 0;
}
html body .vert-section .container p,
html body .ind-shared .container p,
html body .section .container > p,
html body .welcome-hero .container p,
html body .faq-categories,
html body .faq-filter { text-align: left; justify-content: flex-start; }

html body .contact-hero { padding-top: 9rem; }
html body .contact-hero .section-label { color: var(--tk-signal-hi); }
html body .ind-shared-inner { text-align: left; margin-left: 0; }
html body .ind-hero-note { text-align: left; color: var(--tk-on-dark); }
html body .faq-cats { justify-content: flex-start; }
html body .faq-cat { border-radius: var(--tk-radius-s); }
html body .faq-cat.active { background: var(--tk-bitumen); border-color: var(--tk-bitumen); color: #fff; }
html body .pricing-gst-note { text-align: left; }
html body .pricing-card.highlighted .pricing-setup span { color: var(--tk-on-dark); }
html body .pricing-setup { color: var(--tk-signal); }
html body .pricing-card.highlighted .pricing-setup { color: var(--tk-signal-hi); }
html body .contact-hero .section-label { text-transform: none; letter-spacing: 0; }
html body .hero-nav { align-items: flex-start; }
@media (max-width: 640px) { html body .hero-nav { flex-direction: column; } }
html body .step-card { padding-top: 1.75rem; }

/* ---------- 17. Pricing notes -------------------------------------------- */
html body .pricing-industry-note {
    max-width: 46rem;
    margin: 3rem 0 0;
    text-align: left;
    background: var(--tk-paper);
    border: 1px solid var(--tk-line);
    border-left: 4px solid var(--tk-signal);
    border-radius: var(--tk-radius-s);
}
.pricing-notes {
    max-width: 46rem;
    margin: 2.5rem 0 0;
    padding-top: 2rem;
    border-top: 1px solid var(--tk-line);
}
.pricing-notes-title {
    font-size: 1.25rem;
    margin: 0 0 0.75rem;
    color: var(--tk-bitumen);
}
.pricing-notes-lead {
    color: var(--tk-bitumen);
    font-size: 1rem;
    line-height: 1.65;
    margin: 0 0 1rem;
}
.pricing-notes-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.pricing-notes-list li {
    position: relative;
    padding: 0.625rem 0 0.625rem 1.5rem;
    color: var(--tk-ink-2);
    font-size: 0.9375rem;
    line-height: 1.6;
    border-bottom: 1px solid var(--tk-line);
}
.pricing-notes-list li:last-child { border-bottom: 0; }
.pricing-notes-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1.15rem;
    width: 8px;
    height: 8px;
    border-radius: 1px;
    background: var(--tk-signal);
}

/* ---------- 18. FAQ topic filter: readable at rest, on hover and active -- */
html body .faq-cat {
    background: var(--tk-paper);
    border: 1px solid var(--tk-line);
    color: var(--tk-ink-2);
    font-weight: 500;
}
html body .faq-cat:hover,
html body .faq-cat:focus-visible {
    background: var(--tk-paper);
    border-color: var(--tk-bitumen);
    color: var(--tk-bitumen);
}
html body .faq-cat.active,
html body .faq-cat.active:hover {
    background: var(--tk-bitumen);
    border-color: var(--tk-bitumen);
    color: #fff;
}

/* ---------- 19. Mascot ---------------------------------------------------- */
.tk-mascot { display: block; height: auto; max-width: 100%; pointer-events: none; user-select: none; }
.has-mascot { position: relative; }

/* Footer: the robot stands above the tagline. */
html body .tekram-footer .footer-logo .footer-mascot { width: 88px; height: auto; margin-bottom: 0.75rem; }

/* Home "how it works" band: points up at the heading from the right. */
.band-mascot {
    position: absolute;
    right: 1.5rem;
    top: -1rem;
    width: 220px;
}
/* FAQ hero: peeks up from the bottom edge. Contact hero: looks at the copy. */
.hero-mascot { position: absolute; right: 1.5rem; z-index: 1; }
.hero-mascot--peek { bottom: -5rem; width: 300px; }
html body .welcome-hero:has(.hero-mascot--peek) { padding-bottom: 5rem; }
.tk-mascot--look-left.hero-mascot { top: -2.5rem; width: 150px; }
html body .contact-hero { overflow: hidden; }

@media (max-width: 899px) {
    .band-mascot, .hero-mascot { display: none; }
}

/* Onboarding header mark. */
html body .header-brand .tk-mascot { height: 3rem; width: auto; }

/* Home steps: left aligned, numbers only (no second icon). */
html body .how-it-works .steps-grid .step-card[class] { text-align: left; position: relative; z-index: 2; }
html body .how-it-works .steps-grid .step-icon[class] { display: none; }
html body .how-it-works .step-card .step-number { display: flex; justify-content: flex-start; }
.band-mascot { z-index: 1; }
html body .how-it-works .step-card .step-title[class],
html body .how-it-works .step-card .step-description[class] { text-align: left; }
html body .how-it-works .step-connector[class],
html body .how-it-works .steps-grid::before,
html body .how-it-works .steps-grid::after { display: none; }

/* ---------- 20. Legal pages: a dark document, readable text (v30.1.2) ---- */
/* The privacy and terms pages are built for a dark ground; section 7 turned
   their cards white, which left light text on a light card. */
:root {
    --violet-300: #f58fb3;
    --cyan-300:   #bcd0dc;
}
html body .legal-cards .legal-card,
html body .legal-body .legal-card {
    background: var(--tk-bitumen-2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--tk-radius-m);
    box-shadow: none;
}
html body .legal-cards .legal-card h2 { color: #fff; font-family: var(--tk-display); font-stretch: 90%; }
html body .legal-cards .legal-card p,
html body .legal-cards .legal-card li { color: #d3dbe0; }
html body .legal-cards .legal-card strong { color: #fff; }
html body .legal-cards .legal-card a { color: #bcd0dc; text-decoration: underline; text-underline-offset: 3px; }
html body .legal-cards .legal-card a:hover { color: #fff; }
html body .legal-card h2 .lc-part {
    background: transparent;
    border: 1px solid rgba(240, 86, 140, 0.5);
    border-radius: 2px;
    color: var(--tk-signal-hi);
}
html body .legal-toc {
    background: var(--tk-bitumen-2);
    border-color: rgba(255, 255, 255, 0.1);
    border-radius: var(--tk-radius-s);
}
html body .legal-toc-title { text-transform: none; letter-spacing: 0; color: #fff; font-size: 0.875rem; }
html body .legal-toc a { color: #b4c0c8; }
html body .legal-toc a.toc-h2 { color: #d3dbe0; }
html body .legal-toc a:hover { color: #fff; border-left-color: var(--tk-signal); }
html body .legal-nav a { border-radius: var(--tk-radius-s); color: #d3dbe0; }
html body .legal-nav a.active { background: var(--tk-signal); border-color: var(--tk-signal); color: #fff; }
html body .effective-date {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--tk-radius-s);
    color: #d3dbe0;
}
html body .legal-hero-sub { color: var(--tk-on-dark); }
html body.page-template-page-tekram-privacy-policy,
html body.page-template-page-tekram-terms,
html body:has(.legal-body) {
    background-color: var(--tk-bitumen);
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: var(--tk-bay) var(--tk-bay);
}
html body .legal-hero { padding-top: 8.5rem; }

/* ---------- 21. Onboarding form: readable labels on the dark page ------- */
html body .onboarding-page .form-label,
html body .onboarding-page label { color: #d3dbe0; }
html body .onboarding-page .form-hint,
html body .onboarding-page .section-description,
html body .onboarding-page .header-subtitle { color: #a9b6bd; }
html body .onboarding-page .form-hint strong { color: var(--tk-signal-hi); }
html body .onboarding-page .industry-note {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-left: 4px solid var(--tk-signal);
    border-radius: var(--tk-radius-s);
}
html body .onboarding-page .industry-note p { color: #d3dbe0; }