/* ==========================================================================
   think.AGRI - How it works page styles
   UI/UX Pro Max Enhanced: Modern Agri-Tech SaaS Design System
   Loaded after style.min.css. Scoped to .hiw-page / .hiw- prefix.
   ========================================================================== */

.hiw-page {
    --ta-yellow: #fcdb5a;
    --ta-yellow-hover: #f5cf38;
    --ta-green: #2f3c20;
    --ta-green-light: #435b2e;
    --ta-green-dark: #113009;
    --ta-green-deep: #0c1e08;
    --ta-charcoal: #0f172a;
    --ta-slate-800: #1e293b;
    --ta-text: #475569;
    --ta-head: #0f172a;
    --app-accent: #22c55e;
    --app-accent-2: #86efac;
    --app-text: #d7e2d3;
    --app-muted: #9fb39a;
    --ph-navy: #1e293b;
    --ta-radius-sm: 8px;
    --ta-radius-md: 14px;
    --ta-radius-lg: 20px;
    --ta-ease: cubic-bezier(0.16, 1, 0.3, 1);
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: "lnum" 1;
    color: var(--ta-text);
}

/* The template sets #app { overflow: hidden }, which breaks sticky. */
.hiw-page #app { overflow: visible; overflow-x: clip; }

/* Global typography tuning for HIW page */
.hiw-page h1, .hiw-page h2, .hiw-page h3, .hiw-page h4 {
    font-family: Raleway, sans-serif;
    color: var(--ta-head);
    letter-spacing: -0.02em;
}

/* ---------- Hero Section ---------- */
.hiw-hero {
    position: relative;
    padding: 120px 0 100px;
    background-size: cover;
    background-position: center;
}
.hiw-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(12, 30, 8, 0.88) 0%, rgba(15, 23, 42, 0.75) 100%);
    pointer-events: none;
}
.hiw-hero .container {
    position: relative;
    z-index: 2;
}
.hiw-hero__panel {
    background: rgba(17, 48, 9, 0.78);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 36px 40px;
    border-radius: var(--ta-radius-lg);
    border: 1px solid rgba(252, 219, 90, 0.28);
    border-left: 6px solid var(--ta-yellow);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
}
.hiw-hero__panel .__title {
    color: #fff;
    font-size: clamp(3rem, 4.5vw, 4.8rem);
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 16px;
}
.hiw-hero__panel .__title span {
    color: var(--ta-yellow);
}
.hiw-hero__lead {
    color: rgba(255, 255, 255, 0.92);
    font-size: 1.85rem;
    line-height: 1.65;
    max-width: 660px;
    margin-bottom: 24px;
}
.hiw-hero__btns {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 24px;
}
.hiw-hero__btns .custom-btn {
    margin: 0;
}
.hiw-hero__telemetry {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.hiw-hero__telemetry span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 30px;
    padding: 6px 14px;
    font-size: 1.3rem;
    color: #f1f5f9;
    font-weight: 600;
}
.hiw-hero__telemetry .hiw-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ta-yellow);
    box-shadow: 0 0 8px var(--ta-yellow);
}

/* ---------- 1. One Database Orbit ---------- */
.hiw-hub {
    background: #ffffff;
    padding: 90px 0;
}
.hiw-hub .section-heading h2 {
    font-size: 3.4rem;
    font-weight: 800;
}
.hiw-hub .section-heading h2 span {
    color: var(--ta-green-light);
    border-bottom: 3px solid var(--ta-yellow);
}
.hiw-hub .section-heading p {
    font-size: 1.65rem;
    line-height: 1.7;
    color: var(--ta-text);
}
.hiw-orbit {
    position: relative;
    width: 100%;
    max-width: 580px;
    margin: 20px auto 0;
    aspect-ratio: 1 / 1;
}
.hiw-orbit__lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.hiw-orbit__lines line {
    stroke: var(--ta-green);
    stroke-opacity: 0.25;
    stroke-width: 2;
    stroke-dasharray: 4 6;
}
.hiw-orbit__ring {
    fill: none;
    stroke: var(--ta-green);
    stroke-opacity: 0.18;
    stroke-width: 2;
    stroke-dasharray: 6 8;
}
.hiw-orbit__pulse {
    fill: var(--ta-yellow);
    filter: drop-shadow(0 0 6px rgba(252, 219, 90, 0.8));
}
.hiw-orbit__core {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 32%;
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #3f5a2a, var(--ta-green-deep));
    border: 3px solid rgba(252, 219, 90, 0.4);
    box-shadow: 0 0 0 12px rgba(252, 219, 90, 0.18), 0 20px 45px rgba(12, 30, 8, 0.4);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 3;
}
.hiw-orbit__core b {
    font-size: clamp(1.3rem, 1.8vw, 1.7rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.hiw-orbit__core small {
    color: var(--ta-yellow);
    font-size: 1.25rem;
    font-weight: 700;
    margin-top: 4px;
    letter-spacing: 0.05em;
}
.hiw-orbit__db {
    width: 26%;
    height: auto;
    margin-bottom: 8px;
    overflow: visible;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35));
}
.hiw-orbit__db .db-body { fill: var(--ta-yellow); }
.hiw-orbit__db .db-top { fill: #fde68a; stroke: #e8c43c; stroke-width: 1.2; }
.hiw-orbit__db .db-line { fill: none; stroke: #2a3a16; stroke-opacity: 0.45; stroke-width: 2; }
.hiw-orbit__db .db-led { fill: #22c55e; animation: hiwDbLed 2.4s ease-in-out infinite; }
.hiw-orbit__db .db-led:nth-of-type(2) { animation-delay: .4s; }
.hiw-orbit__db .db-led:nth-of-type(3) { animation-delay: .8s; }
@keyframes hiwDbLed { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.hiw-orbit__node {
    position: absolute;
    left: var(--x);
    top: var(--y);
    transform: translate(-50%, -50%);
    width: 32%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 2px solid rgba(252, 219, 90, 0.6);
    border-radius: var(--ta-radius-md);
    padding: 12px 14px 12px 48px;
    font-weight: 700;
    font-size: 1.35rem;
    line-height: 1.25;
    color: var(--ta-head);
    box-shadow: 0 12px 28px rgba(12, 30, 8, 0.08);
    transition: transform 0.28s var(--ta-ease), box-shadow 0.28s var(--ta-ease), border-color 0.28s ease, background 0.28s ease;
    text-decoration: none;
    z-index: 2;
}
.hiw-orbit__node:hover, .hiw-orbit__node:focus {
    transform: translate(-50%, -50%) scale(1.07);
    background: #ffffff;
    border-color: var(--ta-yellow);
    box-shadow: 0 16px 36px rgba(12, 30, 8, 0.16), 0 0 20px rgba(252, 219, 90, 0.35);
    color: var(--ta-head);
    text-decoration: none;
}
.hiw-orbit__node i {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ta-green);
    color: var(--ta-yellow);
    font-style: normal;
    font-size: 1.3rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.hiw-orbit__core, .hiw-orbit__node { font-family: Raleway, sans-serif; }
/* orbit: ring turns slowly, hovered module lights its line and explains itself in the centre */
.hiw-orbit__ring { transform-origin: 300px 300px; animation: hiwSpin 60s linear infinite; }
@keyframes hiwSpin { to { transform: rotate(360deg); } }
.hiw-orbit__lines line { transition: stroke .25s ease, stroke-opacity .25s ease, stroke-width .25s ease; }
.hiw-orbit__lines line.is-hot { stroke: #d9b92d; stroke-opacity: 1; stroke-width: 4; stroke-dasharray: none; }
.hiw-orbit__core b, .hiw-orbit__core small { transition: opacity .2s ease; }
.hiw-orbit__core.is-swapping b, .hiw-orbit__core.is-swapping small { opacity: 0; }
.hiw-orbit__core small { max-width: 80%; line-height: 1.3; }
.hiw-orbit__core.is-detail .hiw-orbit__db { display: none; }
.hiw-orbit__core.is-detail b { font-size: clamp(10px, 1.1vw, 13px); line-height: 1.2; max-width: 84%; }
.hiw-orbit__core.is-detail small { font-size: clamp(9px, .9vw, 11px); color: #e9eedf; margin-top: 6px; max-width: 82%; }
.hiw-orbit.is-hover .hiw-orbit__node:not(.is-hot) { opacity: .55; }
.hiw-orbit__node.is-hot { background: var(--ta-yellow); border-color: var(--ta-yellow); transform: translate(-50%, -50%) scale(1.06); box-shadow: 0 16px 30px rgba(0, 0, 0, .14); }
@media (max-width: 1199.98px) {
    .hiw-orbit__node { font-size: 1.25rem; padding: 10px 10px 10px 42px; }
}
@media (max-width: 575.98px) {
    .hiw-orbit__node { width: 36%; font-size: 1.1rem; padding: 8px 6px 8px 32px; border-radius: 10px; }
    .hiw-orbit__node i { width: 22px; height: 22px; left: 6px; font-size: 1.1rem; }
    .hiw-orbit__core small { display: none; }
}

/* ---------- 2b. Step-by-step tour of the real screens ---------- */
.hiw-tour {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    padding: 90px 0;
}
.hiw-tour .section-heading h2 {
    font-size: 3.4rem;
    font-weight: 800;
}
.hiw-tour .section-heading h2 span {
    color: var(--ta-green-light);
    border-bottom: 3px solid var(--ta-yellow);
}
.hiw-tour__tabs {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    margin-bottom: 38px;
}
.hiw-tab {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 16px 18px 20px;
    background: #ffffff;
    border: 2px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--ta-radius-md);
    text-align: left;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
    transition: border-color 0.25s ease, transform 0.25s var(--ta-ease), box-shadow 0.25s ease;
}
.hiw-tab:hover {
    transform: translateY(-3px);
    border-color: rgba(252, 219, 90, 0.5);
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.1);
}
.hiw-tab:focus-visible {
    outline: 3px solid var(--ta-green);
    outline-offset: 2px;
}
.hiw-tab.is-on {
    border-color: var(--ta-yellow);
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(252, 219, 90, 0.25);
}
.hiw-tab__n {
    font-weight: 800;
    font-size: 20px;
    line-height: 1;
    color: #94a3b8;
    transition: color 0.25s ease;
}
.hiw-tab.is-on .hiw-tab__n {
    color: var(--ta-green-light);
}
.hiw-tab__t {
    font-weight: 700;
    font-size: 13.5px;
    line-height: 1.3;
    color: var(--ta-head);
}
.hiw-tab__bar {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 4px;
    width: 0;
    background: linear-gradient(90deg, var(--ta-yellow), var(--ta-accent-gold));
}
.hiw-tab.is-on .hiw-tab__bar {
    width: var(--p, 0%);
}

.hiw-tour__body {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 2fr);
    gap: 48px;
    align-items: center;
}
.hiw-tour__text {
    position: relative;
}
.hiw-copy {
    display: none;
}
.hiw-copy.is-on {
    display: block;
    animation: hiwIn 0.45s var(--ta-ease) both;
}
@keyframes hiwIn {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}
.hiw-copy__n {
    font-weight: 800;
    font-size: 52px;
    line-height: 1;
    color: var(--ta-yellow);
    display: inline-block;
    margin-bottom: 8px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.hiw-copy h3 {
    font-size: 28px;
    font-weight: 800;
    color: var(--ta-head);
    margin: 4px 0 16px;
    line-height: 1.25;
}
.hiw-copy p {
    color: var(--ta-text);
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 14px;
}
.hiw-tour__nav {
    display: flex;
    gap: 12px;
    margin-top: 26px;
}
.hiw-arrow, .hiw-play {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid var(--ta-yellow);
    background: #ffffff;
    color: var(--ta-head);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.hiw-arrow:hover, .hiw-play:hover {
    background: var(--ta-yellow);
    transform: scale(1.06);
    box-shadow: 0 8px 20px rgba(252, 219, 90, 0.35);
}
.hiw-arrow:active, .hiw-play:active {
    transform: scale(0.96);
}
.hiw-play span {
    width: 12px;
    height: 14px;
    border-left: 4px solid var(--ta-head);
    border-right: 4px solid var(--ta-head);
}
.hiw-play.is-paused span {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 0 8px 13px;
    border-color: transparent transparent transparent var(--ta-head);
    margin-left: 4px;
}

/* Device Mockup Frame */
.hiw-device {
    background: #0f172a;
    border-radius: 20px;
    padding: 0 12px 12px;
    box-shadow: 0 35px 70px rgba(15, 23, 42, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.hiw-device__bar {
    height: 38px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 600;
}
.hiw-device__bar i {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #ef4444;
}
.hiw-device__bar i:nth-child(2) { background: #f59e0b; }
.hiw-device__bar i:nth-child(3) { background: #10b981; }
.hiw-device__bar span {
    margin-left: 14px;
    background: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 4px 14px;
    border-radius: 12px;
    color: #cbd5e1;
}
.hiw-device__screen {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 1;
    overflow: hidden;
    border-radius: 10px;
    background: #090d16;
    container-type: size;
}
.hiw-stage__caption {
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    color: #64748b;
    margin: 14px 0 0;
}

.hiw-shot {
    position: absolute;
    inset: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.97);
    transition: opacity 0.5s ease, transform 0.6s var(--ta-ease), visibility 0s linear 0.5s;
}
.hiw-shot.is-on {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.5s ease, transform 0.6s var(--ta-ease), visibility 0s;
}
.hiw-shot__box {
    position: relative;
    aspect-ratio: var(--ar);
    width: min(100cqw, calc(100cqh * var(--ar)));
}
.hiw-shot__box img {
    display: block;
    width: 100%;
    height: 100%;
}
.hiw-shot.is-on .hiw-shot__box img {
    animation: hiwZoom 8s ease-out both;
}
@keyframes hiwZoom {
    from { transform: scale(1.03); }
    to { transform: scale(1); }
}

/* Hotspots */
.hiw-spot {
    position: absolute;
    left: var(--x);
    top: var(--y);
    z-index: 2;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.hiw-spot.show {
    opacity: 1;
    transform: none;
}
.hiw-spot i {
    position: absolute;
    left: -12px;
    top: -12px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 3px solid var(--ta-yellow);
    background: rgba(252, 219, 90, 0.35);
    animation: hiwRing 2s infinite;
}
@keyframes hiwRing {
    0% { box-shadow: 0 0 0 0 rgba(252, 219, 90, 0.7); }
    70% { box-shadow: 0 0 0 18px rgba(252, 219, 90, 0); }
    100% { box-shadow: 0 0 0 0 rgba(252, 219, 90, 0); }
}
.hiw-spot b {
    position: absolute;
    top: -16px;
    left: 22px;
    white-space: nowrap;
    background: #0f172a;
    border: 1px solid var(--ta-yellow);
    color: #ffffff;
    font-weight: 700;
    font-size: 13px;
    padding: 6px 14px;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}
.hiw-spot--l b {
    left: auto;
    right: 22px;
}

/* Notification Toast */
.hiw-toast {
    position: absolute;
    left: 16px;
    bottom: 16px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: calc(100% - 32px);
    padding: 10px 18px 10px 14px;
    background: rgba(15, 23, 42, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--app-accent);
    border-radius: var(--ta-radius-md);
    color: #e2e8f0;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.45s var(--ta-ease);
}
.hiw-toast::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--app-accent);
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.3);
    flex: 0 0 auto;
}
.hiw-toast.show {
    opacity: 1;
    transform: none;
}

.hiw-phone--float {
    position: absolute;
    right: 3%;
    bottom: 5%;
    z-index: 4;
    width: 18%;
    aspect-ratio: 720 / 1449;
    border-radius: 18px;
    padding: 5px;
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.65);
    opacity: 0;
    visibility: hidden;
    transform: translateY(40px) rotate(6deg);
    transition: opacity 0.5s ease, transform 0.7s var(--ta-ease), visibility 0s linear 0.5s;
}
.hiw-phone--float img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    border-radius: 14px;
    display: block;
}
.hiw-phone--float.show {
    opacity: 1;
    visibility: visible;
    transform: rotate(-3deg);
    transition: opacity 0.5s ease, transform 0.7s var(--ta-ease), visibility 0s;
}

/* ---------- 3. Profitability Map (HUD Telemetry) ---------- */
.hiw-profit {
    background: radial-gradient(circle at 80% 20%, #15370d, #081205 90%);
    color: #e2e8f0;
    padding: 95px 0;
}
.hiw-profit .section-heading h2 {
    color: #fff;
    font-size: 3.4rem;
    font-weight: 800;
}
.hiw-profit .section-heading h2 span {
    color: var(--ta-yellow);
}
.hiw-profit .section-heading p {
    color: #cbd5e1;
    font-size: 1.65rem;
}
.hiw-map {
    background: #ffffff;
    border-radius: var(--ta-radius-lg);
    padding: 14px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
    height: 100%;
    display: flex;
    flex-direction: column;
}
.hiw-map__hud {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 6px 12px;
    font-size: 1.25rem;
    font-weight: 700;
    color: #475569;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.hiw-hud__pulse {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 10px #22c55e;
    margin-right: 6px;
    animation: taPulse 2s infinite;
}
.hiw-map__hud-hint {
    color: #94a3b8;
    font-size: 1.15rem;
    text-transform: none;
    letter-spacing: normal;
}
.hiw-map svg {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
}
.hiw-map__bg { fill: #f3eedf; }
.hiw-map__river { fill: none; stroke: #7bb5e3; stroke-width: 12; stroke-linecap: round; }
.hiw-map__road { stroke: #ffffff; stroke-width: 8; stroke-dasharray: none; }
.hiw-land { cursor: pointer; outline: none; }
.hiw-land circle {
    stroke-width: 3;
    transition: stroke-width 0.2s ease, filter 0.25s ease, transform 0.25s var(--ta-ease);
    transform-box: fill-box;
    transform-origin: center;
}
.hiw-land text {
    font-family: Raleway, sans-serif;
    font-weight: 800;
    font-size: 13px;
    fill: #0f172a;
    text-anchor: middle;
    dominant-baseline: middle;
    pointer-events: none;
}
.hiw-land:hover circle, .hiw-land:focus circle {
    transform: scale(1.08);
}
.hiw-land.is-sel circle {
    stroke: #0f172a;
    stroke-width: 5;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.4));
}
/* map colours = crop type */
.l-carrots { fill: #fdba74; stroke: #ea580c; background: #fdba74; }
.l-wheat { fill: #fde68a; stroke: #ca8a04; background: #fde68a; }
.l-barley { fill: #d6bc8f; stroke: #8a6a2f; background: #d6bc8f; }
.l-cabbage { fill: #86efac; stroke: #16a34a; background: #86efac; }

.hiw-map__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    padding: 14px 6px 2px;
    font-size: 1.35rem;
    color: #475569;
    font-weight: 600;
}
.hiw-map__legend i {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: -2px;
}

/* Costing Telemetry Card */
.hiw-costcard {
    background: #ffffff;
    color: var(--ta-head);
    border-radius: var(--ta-radius-lg);
    padding: 28px 28px 22px;
    height: 100%;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
}
.hiw-costcard__head {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--ta-yellow);
}
.hiw-costcard small {
    display: block;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
    font-weight: 700;
}
.hiw-costcard__head b {
    font-size: 2.3rem;
    font-weight: 800;
    color: var(--ta-head);
}
.hiw-costcard__lines {
    list-style: none;
    margin: 18px 0;
    padding: 0;
    flex-grow: 1;
}
.hiw-costcard__lines li {
    display: grid;
    grid-template-columns: 130px 1fr 100px;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    font-size: 1.45rem;
    font-weight: 600;
}
.hiw-costcard__lines li span:last-child {
    text-align: right;
    font-weight: 700;
    color: var(--ta-head);
    font-variant-numeric: tabular-nums;
}
.hiw-costcard__bar {
    height: 10px;
    border-radius: 6px;
    background: #f1f5f9;
    overflow: hidden;
}
.hiw-costcard__bar i {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 6px;
    background: linear-gradient(90deg, #15803d, #22c55e);
    transition: width 0.7s var(--ta-ease);
}
.hiw-costcard__tot {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: var(--ta-radius-md);
    padding: 14px 16px;
}
.hiw-costcard__tot b {
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--ta-head);
    font-variant-numeric: tabular-nums;
}
.hiw-costcard__tot div:last-child b {
    color: #15803d;
}
.hiw-costcard__tot div:last-child b.over {
    color: #dc2626;
}
.hiw-costcard__note {
    font-size: 1.25rem;
    color: #94a3b8;
    margin: 14px 0 0;
    font-weight: 500;
}

/* ---------- 4. Mobile App Section ---------- */
.hiw-mobile {
    padding: 95px 0;
    background: #ffffff;
}
.hiw-mobile .section-heading h2 {
    font-size: 3.4rem;
    font-weight: 800;
}
.hiw-mobile .section-heading h2 span {
    color: var(--ta-green-light);
    border-bottom: 3px solid var(--ta-yellow);
}
.hiw-ticks {
    list-style: none;
    padding: 0;
    margin: 0 0 30px;
}
.hiw-ticks li {
    position: relative;
    padding-left: 36px;
    margin-bottom: 14px;
    color: var(--ta-text);
    font-size: 1.55rem;
    line-height: 1.6;
}
.hiw-ticks li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 2px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--ta-yellow);
    color: var(--ta-green-deep);
    font-size: 13px;
    font-weight: 800;
    text-align: center;
    line-height: 24px;
    box-shadow: 0 2px 6px rgba(252, 219, 90, 0.4);
}
.hiw-ticks b {
    color: var(--ta-head);
    font-weight: 700;
}
.hiw-phone-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.hiw-phone-tabs button {
    border: 2px solid var(--ta-yellow);
    background: #ffffff;
    color: var(--ta-head);
    border-radius: 30px;
    padding: 9px 22px;
    font-weight: 700;
    font-size: 1.4rem;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: background 0.2s ease, transform 0.2s ease;
}
.hiw-phone-tabs button:hover {
    background: rgba(252, 219, 90, 0.35);
    transform: translateY(-2px);
}
.hiw-phone-tabs button.is-on {
    background: var(--ta-yellow);
    box-shadow: 0 6px 18px rgba(252, 219, 90, 0.35);
}

.hiw-phone-wrap {
    position: relative;
    width: 310px;
    max-width: 100%;
    margin: 0 auto 40px;
}
.hiw-phone--big {
    position: relative;
    width: 100%;
    aspect-ratio: 720 / 1560;
    border-radius: 46px;
    padding: 12px;
    background: #0f172a;
    border: 2px solid #334155;
    box-shadow: 0 35px 80px rgba(15, 23, 42, 0.35), inset 0 0 0 2px rgba(255, 255, 255, 0.1);
}
.hiw-phone--big img {
    position: absolute;
    top: 12px;
    left: 12px;
    width: calc(100% - 24px);
    height: calc(100% - 24px);
    object-fit: cover;
    object-position: 50% 0%;
    border-radius: 36px;
    opacity: 0;
    transform: scale(0.97);
    transition: opacity 0.5s ease, transform 0.6s ease;
}
.hiw-phone--big img.is-on {
    opacity: 1;
    transform: none;
    animation: hiwScroll 9s ease-in-out 1.2s infinite alternate;
}
@keyframes hiwScroll {
    from { object-position: 50% 0%; }
    to { object-position: 50% 100%; }
}
/* make the screen inside the phone exactly the app's shape (720 x 1560), so full-width screens are never cropped */
.hiw-phone--big { box-sizing: content-box; width: calc(100% - 28px); } /* 12px padding + 2px border each side */

.hiw-chip {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--ta-head);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 30px;
    padding: 8px 16px 8px 10px;
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.14);
    animation: hiwFloat 5s ease-in-out infinite;
}
.hiw-chip--1 { top: 16%; left: -22%; }
.hiw-chip--2 { top: 48%; right: -24%; animation-delay: -1.6s; }
.hiw-chip--3 { bottom: 12%; left: -18%; animation-delay: -3.2s; }
@keyframes hiwFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
.hiw-chip__ico {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-style: normal;
    font-size: 13px;
    color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.hiw-chip__ico--sync { background: #64748b; transition: background 0.4s ease; }
.hiw-chip__ico--sync::before { content: "\2601"; }
.hiw-chip.is-synced .hiw-chip__ico--sync { background: #16a34a; }
.hiw-chip.is-synced .hiw-chip__ico--sync::before { content: "\2713"; font-weight: 800; }
.hiw-chip__ico--cam { background: #1e293b; }
.hiw-chip__ico--cam::before { content: "\25C9"; }
.hiw-chip__ico--and { background: #10b981; color: #064e3b; }
.hiw-chip__ico--and::before { content: "\25B2"; font-size: 10px; }

/* ---------- 5. Compliance / Agronomy ---------- */
.hiw-comply {
    background: #f8fafc;
    padding: 95px 0;
}
.hiw-comply .section-heading h2 {
    font-size: 3.4rem;
    font-weight: 800;
}
.hiw-comply .section-heading h2 span {
    color: var(--ta-green-light);
    border-bottom: 3px solid var(--ta-yellow);
}
.hiw-card-col { margin-bottom: 28px; }
.hiw-card {
    background: #ffffff;
    border-radius: var(--ta-radius-lg);
    border: 1px solid rgba(0, 0, 0, 0.06);
    padding: 36px;
    height: 100%;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
    transition: transform 0.28s var(--ta-ease), box-shadow 0.28s var(--ta-ease);
}
.hiw-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 50px rgba(15, 23, 42, 0.1);
}
.hiw-card__tag {
    display: inline-block;
    background: var(--ta-green);
    color: var(--ta-yellow);
    border-radius: 20px;
    padding: 4px 16px;
    font-size: 1.25rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.hiw-card h3 {
    font-size: 2.3rem;
    font-weight: 800;
    color: var(--ta-head);
    margin: 16px 0 12px;
}
.hiw-card p {
    color: var(--ta-text);
    font-size: 1.55rem;
    line-height: 1.7;
}
.hiw-card__small {
    font-size: 1.35rem;
    color: #64748b !important;
    margin-top: 14px;
    margin-bottom: 0;
    font-style: italic;
}
.hiw-chain {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 24px;
    margin: 22px 0;
}
.hiw-chain span {
    position: relative;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--ta-green);
}
.hiw-chain span:not(:last-child)::after {
    content: "\2192";
    position: absolute;
    right: -19px;
    color: #ca8a04;
    font-weight: 800;
}
.hiw-chain span:last-child {
    background: var(--ta-yellow);
    border-color: var(--ta-yellow);
    color: #0f172a;
}

/* ---------- 6. Multicat ERP (Bento Grid) ---------- */
.hiw-multicat {
    background: linear-gradient(160deg, #0f172a 0%, #112211 60%, #081406 100%);
    color: #cbd5e1;
    padding: 100px 0;
}
.hiw-multicat .section-heading h2 {
    color: #ffffff;
    font-size: 3.4rem;
    font-weight: 800;
}
.hiw-multicat .section-heading h2 span {
    color: var(--ta-yellow);
}
.hiw-multicat .section-heading p {
    color: #94a3b8;
    font-size: 1.65rem;
}
.hiw-multicat__brand {
    display: inline-flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: var(--ta-radius-md);
    padding: 14px 24px 16px;
    margin-bottom: 30px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}
.hiw-multicat__powered {
    font-size: 1.15rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #64748b;
    margin-bottom: 4px;
}
.hiw-multicat__brand img { max-width: 220px; }
.hiw-fin-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.hiw-fin-grid > div {
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--ta-radius-md);
    padding: 20px;
    transition: transform 0.28s var(--ta-ease), border-color 0.28s ease, background 0.28s ease;
}
.hiw-fin-grid > div:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--ta-yellow);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}
.hiw-fin-grid b {
    display: block;
    color: #ffffff;
    font-size: 1.65rem;
    font-weight: 800;
    margin: 12px 0 6px;
}
.hiw-fin-grid span {
    font-size: 1.35rem;
    color: #94a3b8;
    line-height: 1.55;
}
.fi {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--ta-yellow);
    color: var(--ta-green-deep);
    font-style: normal;
    font-weight: 900;
    font-size: 1.35rem;
    box-shadow: 0 4px 10px rgba(252, 219, 90, 0.3);
}
.fi-inv::before { content: "R"; font-size: 1.6rem; }
.fi-po::before { content: "PO"; }
.fi-stk::before { content: "|||"; letter-spacing: -1px; }
.fi-bank::before { content: "\21C4"; font-size: 1.8rem; }
.fi-vat::before { content: "%"; font-size: 1.6rem; }
.fi-gl::before { content: "\03A3"; font-size: 1.8rem; }

/* ---------- 7. CTA Section ---------- */
.hiw-cta {
    background: #ffffff;
    padding: 90px 0;
}
.hiw-cta__card {
    background: linear-gradient(135deg, #15370d 0%, #0f172a 100%);
    border-radius: 28px;
    padding: 60px 40px;
    color: #ffffff;
    box-shadow: 0 30px 70px rgba(15, 23, 42, 0.25);
    border: 1px solid rgba(252, 219, 90, 0.25);
}
.hiw-cta__card .__title {
    color: #ffffff;
    font-size: clamp(2.8rem, 4vw, 4.2rem);
    font-weight: 800;
    margin-bottom: 16px;
}
.hiw-cta__card .__title span {
    color: var(--ta-yellow);
}
.hiw-cta__lead {
    font-size: 1.8rem;
    line-height: 1.6;
    color: #cbd5e1;
    max-width: 650px;
    margin: 0 auto 30px;
}
.hiw-cta__trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px 26px;
    margin-bottom: 34px;
}
.hiw-cta__trust span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 1.35rem;
    color: #f1f5f9;
    font-weight: 600;
}
.hiw-cta__trust svg {
    color: var(--ta-yellow);
    flex-shrink: 0;
}
.hiw-cta__btns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 1199.98px) {
    .hiw-fin-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 991.98px) {
    .hiw-hero { padding: 90px 0 70px; }
    .hiw-tour__tabs {
        display: flex;
        overflow-x: auto;
        gap: 10px;
        margin: 0 -15px 28px;
        padding: 4px 15px 10px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
    .hiw-tour__tabs::-webkit-scrollbar { display: none; }
    .hiw-tab { flex: 0 0 auto; width: 160px; scroll-snap-align: start; }
    .hiw-tour__body { grid-template-columns: 1fr; gap: 30px; }
    .hiw-tour__text { order: 2; }
    .hiw-tour__stage { order: 1; }
    .hiw-device { border-radius: 14px; padding: 0 8px 8px; }
    .hiw-device__bar { height: 28px; font-size: 10px; }
    .hiw-device__bar span { display: none; }
    .hiw-copy h3 { font-size: 24px; }
    .hiw-copy__n { font-size: 40px; }
    .hiw-multicat .col-lg-5 { margin-bottom: 34px; }
    .hiw-profit .col-lg-7 { margin-bottom: 30px; }
    .hiw-cta__card { padding: 40px 24px; }
}
@media (max-width: 575.98px) {
    .hiw-hero__panel { padding: 22px 18px; }
    .hiw-hero__lead { font-size: 1.55rem; }
    .hiw-fin-grid { grid-template-columns: 1fr; gap: 12px; }
    .hiw-costcard { padding: 20px 16px 16px; }
    .hiw-costcard__lines li { grid-template-columns: 100px 1fr 80px; font-size: 1.3rem; }
    .hiw-costcard__head b { font-size: 1.8rem; }
    .hiw-costcard__tot b { font-size: 1.6rem; }
    .hiw-phone-wrap { width: 250px; }
    .hiw-chip { font-size: 11px; padding: 6px 12px 6px 8px; }
    .hiw-chip__ico { width: 22px; height: 22px; font-size: 10px; }
    .hiw-chip--1 { left: -16%; }
    .hiw-chip--2 { right: -16%; }
    .hiw-chip--3 { left: -10%; }
    .hiw-spot b { font-size: 11px; padding: 4px 10px; top: -12px; left: 16px; }
    .hiw-spot--l b { left: auto; right: 16px; }
    .hiw-spot i { width: 18px; height: 18px; left: -9px; top: -9px; border-width: 2px; }
    .hiw-toast { font-size: 12px; padding: 8px 12px 8px 10px; left: 10px; bottom: 10px; }
    .hiw-card { padding: 24px 18px; }
}


/* ==========================================================================
   2a. From plan to payment: live integration dashboard (sits above the
       step-by-step screenshot tour in section 2b).
   ========================================================================== */
.hiw-live { background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%); padding: 90px 0 60px; }
.hiw-live .section-heading h2 { font-size: 3.4rem; font-weight: 800; }
.hiw-live .section-heading h2 span { color: var(--ta-green-light); border-bottom: 3px solid var(--ta-yellow); }
.hiw-tour { background: #ffffff; padding: 70px 0 90px; }
.hiw-page .hiw-live { --lv-dark: #34461c; --lv-dark-2: #2a3a16; --lv-lime: #a7d060; --lv-ink: #1f2a18; --lv-muted: #5b6450; --lv-line: #e4e2d6; --lv-orange: #e0892a; --lv-red: #d0462c; --lv-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace; }

/* band */
.lv-band { background: radial-gradient(ellipse 80% 120% at 85% 0%, #43591f, var(--lv-dark) 55%, var(--lv-dark-2)); border-radius: 22px; padding: 22px 24px 18px; color: #e9f2da; box-shadow: 0 24px 50px rgba(30, 45, 12, .25); }
.lv-band__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 18px; }
.lv-band__title { font-family: Raleway, sans-serif; font-weight: 800; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; color: #fff; }
.lv-band__meta { display: flex; gap: 14px; margin-left: auto; font-family: var(--lv-mono); font-size: 12px; color: #d9e6c4; }
.lv-band__meta span + span::before { content: "|"; margin-right: 14px; color: #7f9555; }
.lv-pill { display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px; border: 1px solid var(--lv-lime); border-radius: 20px; font-family: var(--lv-mono); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--lv-lime); }
.lv-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--lv-lime); animation: lvBlink 1.4s ease-in-out infinite; }
@keyframes lvBlink { 50% { opacity: .25; } }
.lv-band__foot { margin: 16px 0 0; text-align: center; font-family: var(--lv-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #d4e2bd; }
.lv-band__foot::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--lv-lime); margin-right: 10px; vertical-align: 1px; }

/* pipeline */
.lv-pipe { display: flex; align-items: stretch; }
.lv-stage {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 16px 12px 14px; margin: 0;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(214, 235, 176, .22); border-radius: 14px;
    color: #fff; text-align: center; cursor: pointer;
    transition: background .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.lv-stage:hover { background: rgba(255, 255, 255, .09); transform: translateY(-2px); }
.lv-stage.is-on { background: rgba(167, 208, 96, .14); border-color: var(--lv-lime); box-shadow: 0 0 0 3px rgba(167, 208, 96, .18); }
.lv-stage.is-pulse { animation: lvPulse .9s ease-out; }
@keyframes lvPulse { 0% { box-shadow: 0 0 0 0 rgba(252, 219, 90, .75); } 100% { box-shadow: 0 0 0 16px rgba(252, 219, 90, 0); } }
.lv-stage b { font-family: Raleway, sans-serif; font-weight: 800; font-size: 15px; margin-top: 8px; }
.lv-stage small { font-family: var(--lv-mono); font-size: 11px; color: #cfdfb5; line-height: 1.35; }
.lv-link { flex: 0 0 26px; position: relative; align-self: center; height: 2px; background: rgba(214, 235, 176, .35); }
.lv-link::before, .lv-link::after { content: ""; position: absolute; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--lv-lime); }
.lv-link::before { left: -4px; } .lv-link::after { right: -4px; }
.lv-link i { position: absolute; top: -4px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--ta-yellow); box-shadow: 0 0 10px var(--ta-yellow); opacity: 0; }
.lv-link.is-flow i { animation: lvFlow .55s linear; }
@keyframes lvFlow { 0% { left: -5px; opacity: 1; } 100% { left: calc(100% - 5px); opacity: 1; } }

/* mini visualisations inside the stages */
.lv-viz { width: 100%; height: 64px; display: flex; flex-direction: column; justify-content: center; gap: 6px; font-family: var(--lv-mono); font-size: 10.5px; color: #d9e6c4; text-align: left; }
.lv-viz--bars span { display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 6px; }
.lv-viz--bars em { font-style: normal; }
.lv-viz--bars i { display: block; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--lv-lime) var(--w), rgba(255, 255, 255, .14) var(--w)); transition: background .6s ease; }
.lv-viz--checks span { display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-viz--checks span::before { content: ""; flex: 0 0 11px; height: 11px; border-radius: 3px; border: 1.5px solid #cfe3ad; }
.lv-viz--checks span.ok::before { background: var(--lv-lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334461c' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 9px no-repeat; border-color: var(--lv-lime); }
.lv-viz--cols { flex-direction: row; align-items: flex-end; justify-content: center; gap: 12px; padding-bottom: 12px; position: relative; }
.lv-viz--cols::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 12px; border-top: 1px dashed rgba(214, 235, 176, .4); }
.lv-viz--cols span { position: relative; width: 16px; height: var(--h); max-height: 44px; min-height: 6px; border-radius: 4px 4px 0 0; background: var(--lv-lime); transition: height .6s ease; }
.lv-viz--cols span.low { background: var(--lv-orange); }
.lv-viz--cols em { position: absolute; top: calc(100% + 2px); left: 50%; transform: translateX(-50%); font-style: normal; font-size: 9px; text-transform: uppercase; }
.lv-viz--cost { align-items: center; }
.lv-viz--cost strong { font-size: 17px; color: var(--lv-lime); font-weight: 700; }
.lv-viz--cost small { margin-top: -6px; }
.lv-split { display: flex; width: 100%; height: 7px; border-radius: 4px; overflow: hidden; gap: 2px; }
.lv-split i { width: var(--w); background: var(--lv-lime); }
.lv-split i:nth-child(2) { background: #cfe3ad; } .lv-split i:nth-child(3) { background: var(--ta-yellow); } .lv-split i:nth-child(4) { background: #7f9555; }
.lv-viz--spark { gap: 2px; }
.lv-viz--spark strong { font-size: 15px; color: var(--lv-lime); font-weight: 700; }
.lv-viz--spark svg { width: 100%; height: 26px; }
.lv-viz--spark polyline { fill: none; stroke: var(--lv-lime); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.lv-flash { animation: lvFlash .8s ease; }
@keyframes lvFlash { 0% { color: var(--ta-yellow); text-shadow: 0 0 12px rgba(252, 219, 90, .8); } 100% { text-shadow: none; } }

/* detail panels */
.lv-detail { margin-top: 26px; }
.lv-panel { display: none; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 34px; align-items: start; }
.lv-panel.is-on { display: grid; animation: hiwIn .45s ease both; }
@keyframes hiwIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.lv-card { background: #fff; border-radius: 18px; padding: 20px 22px; box-shadow: 0 14px 36px rgba(47, 60, 32, .09); color: var(--lv-ink); }
.lv-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.lv-card__head h3 { margin: 0; font-family: Raleway, sans-serif; font-weight: 800; font-size: 19px; color: var(--lv-ink); text-transform: none; }
.lv-tag { display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px; border-radius: 16px; background: #eef5e0; color: #3d5a14; font-family: var(--lv-mono); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.lv-tag--live i { width: 7px; height: 7px; border-radius: 50%; background: #5d9a1e; animation: lvBlink 1.4s ease-in-out infinite; }
.lv-prog { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 10px 14px; margin-bottom: 8px; background: #f5f4ec; border-radius: 12px; }
.lv-prog b { font-family: Raleway, sans-serif; font-size: 15px; }
.lv-prog small, .lv-sub small { font-family: var(--lv-mono); font-size: 11px; color: var(--lv-muted); }
.lv-sub { display: flex; justify-content: space-between; align-items: baseline; margin: 14px 0 6px; font-size: 14px; }
.lv-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.lv-table th { font-family: var(--lv-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--lv-muted); text-align: left; padding: 8px 8px; border-bottom: 1px solid var(--lv-line); }
.lv-table td { padding: 9px 8px; border-bottom: 1px solid #efeee6; vertical-align: middle; }
.lv-table td small { display: block; font-family: var(--lv-mono); font-size: 10.5px; color: var(--lv-muted); }
.lv-table .r { text-align: right; font-variant-numeric: tabular-nums; }
.lv-table tfoot td { font-weight: 700; border-bottom: 0; border-top: 2px solid var(--lv-ink); }
.lv-table--sched td:nth-child(2) { font-family: var(--lv-mono); font-size: 11.5px; color: var(--lv-muted); }
.lv-table--sched td:last-child { width: 44%; }
.lv-stack { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: #efeee6; }
.lv-stack i { width: 0; transition: width 1s cubic-bezier(.2, .8, .2, 1); }
.lv-panel.is-on .lv-stack i { width: var(--w); }
.lv-stack .d { background: #3d5a14; } .lv-stack .c { background: var(--lv-orange); } .lv-stack .o { background: var(--lv-red); }
.lv-nums { display: block; margin-top: 3px; font-family: var(--lv-mono); font-size: 10.5px; color: var(--lv-muted); }
.lv-legend { display: flex; gap: 16px; margin: 12px 0 0; font-family: var(--lv-mono); font-size: 11px; color: var(--lv-muted); text-transform: uppercase; }
.lv-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.lv-legend .d::before { background: #3d5a14; } .lv-legend .c::before { background: var(--lv-orange); } .lv-legend .o::before { background: var(--lv-red); }

.lv-job { display: grid; grid-template-columns: 44px 1fr auto; gap: 4px 12px; align-items: center; padding: 14px; margin-bottom: 12px; border: 1px solid var(--lv-line); border-radius: 14px; }
.lv-job--live { border-color: #cfe3ad; background: linear-gradient(180deg, #fbfdf6, #fff); }
.lv-av { width: 40px; height: 40px; border-radius: 50%; background: #34461c; color: var(--lv-lime); display: flex; align-items: center; justify-content: center; font-family: Raleway, sans-serif; font-weight: 800; font-size: 13px; }
.lv-av--b { background: #3a86d8; color: #fff; }
.lv-job__main b { display: block; font-family: Raleway, sans-serif; font-size: 15px; }
.lv-job__main small { font-family: var(--lv-mono); font-size: 11px; color: var(--lv-muted); }
.lv-status { font-family: var(--lv-mono); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 4px 10px; border-radius: 12px; }
.lv-status--done { background: #3d5a14; color: #fff; }
.lv-status--prog { background: #eef5e0; color: #3d5a14; }
.lv-job .lv-progress { grid-column: 1 / -1; }
.lv-kv { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 8px 0 0; }
.lv-kv dt { font-family: var(--lv-mono); font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--lv-muted); }
.lv-kv dd { margin: 0; font-family: var(--lv-mono); font-size: 13px; font-weight: 700; color: var(--lv-ink); font-variant-numeric: tabular-nums; }
.lv-progress { display: block; height: 7px; border-radius: 4px; background: #efeee6; overflow: hidden; }
.lv-progress i { display: block; height: 100%; width: var(--w); border-radius: 4px; background: #6d9b2a; transition: width .8s ease; }
.lv-counts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.lv-counts span { background: #f5f4ec; border-radius: 12px; padding: 10px; text-align: center; font-family: var(--lv-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--lv-muted); }
.lv-counts b { display: block; font-family: Raleway, sans-serif; font-size: 22px; color: #3d5a14; letter-spacing: 0; }
.lv-chip { display: inline-block; padding: 2px 9px; border-radius: 10px; font-family: var(--lv-mono); font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.lv-chip--o { background: #fdecd6; color: #8a4b05; }
.lv-chip--g { background: #e4f1cf; color: #3d5a14; }
.lv-pos { list-style: none; margin: 0; padding: 0; }
.lv-pos li { display: grid; grid-template-columns: 120px 1fr 1.2fr 56px; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid #efeee6; font-size: 13.5px; }
.lv-pos li:last-child { border-bottom: 0; }
.lv-pos b { display: block; font-family: var(--lv-mono); font-size: 12.5px; color: #3d5a14; }
.lv-pos small { font-family: var(--lv-mono); font-size: 10px; color: var(--lv-muted); }
.lv-pos em { font-style: normal; font-family: var(--lv-mono); font-weight: 700; text-align: right; font-size: 12.5px; }
.lv-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.lv-card .lv-kpis:last-child { margin: 14px 0 0; }
.lv-kpi { background: #f5f4ec; border-radius: 14px; padding: 12px 14px; }
.lv-kpi small { display: block; font-family: var(--lv-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--lv-muted); }
.lv-kpi b { font-family: Raleway, sans-serif; font-size: 24px; font-weight: 800; color: var(--lv-ink); font-variant-numeric: tabular-nums; }
.lv-kpi--dark { background: var(--lv-dark); }
.lv-kpi--dark small { color: #cfdfb5; }
.lv-kpi--dark b { color: #fff; }
.lv-costs { list-style: none; margin: 0; padding: 0; }
.lv-costs li { display: grid; grid-template-columns: 150px 1fr 90px; gap: 12px; align-items: center; padding: 8px 0; font-size: 14px; }
.lv-costs b { text-align: right; font-variant-numeric: tabular-nums; }
.lv-note { margin: 10px 0 0; font-size: 13px; color: var(--lv-muted); }
.lv-post { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding: 12px 14px; margin-bottom: 10px; border: 1px solid var(--lv-line); border-radius: 12px; }
.lv-post b { display: block; font-family: Raleway, sans-serif; font-size: 15px; }
.lv-post small { font-family: var(--lv-mono); font-size: 10.5px; color: var(--lv-muted); }
.lv-post__tot { text-align: right; }
.lv-post__tot b { font-size: 20px; }
.lv-table--gl tbody tr.is-new td { animation: lvRow 1.4s ease; }
@keyframes lvRow { 0% { background: #fff3c4; } 100% { background: transparent; } }

.lv-copy__n::before { content: attr(data-n); }
.lv-copy__n { display: block; font-family: Raleway, sans-serif; font-weight: 900; font-size: 44px; line-height: 1; color: var(--ta-yellow); -webkit-text-stroke: 1px #d9b92d; }
.lv-copy h3 { font-family: Raleway, sans-serif; font-weight: 800; font-size: 26px; color: var(--ta-head); margin: 8px 0 12px; }
.lv-copy p { color: var(--ta-text); font-size: 16px; line-height: 1.7; margin-bottom: 12px; }
/* real screens: thumbnails under each stage */
.lv-shots { margin-top: 14px; }
.lv-shots__label { margin: 0 0 8px !important; font-size: 11px !important; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--lv-muted) !important; }
.lv-shots__row { display: flex; flex-wrap: wrap; gap: 10px; }
.lv-shot {
    position: relative; display: flex; flex-direction: column; gap: 6px;
    width: 132px; margin: 0; padding: 6px 6px 8px;
    background: #fff; border: 1px solid var(--lv-line); border-radius: 12px;
    text-align: left; cursor: zoom-in;
    box-shadow: 0 6px 16px rgba(47, 60, 32, .08);
    transition: transform .25s var(--ta-ease), box-shadow .25s ease, border-color .25s ease;
}
.lv-shot img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: left top; border-radius: 7px; background: #0f1a0c; }
.lv-shot span { padding: 0 2px; font-family: Raleway, sans-serif; font-size: 12.5px; font-weight: 800; line-height: 1.25; color: var(--lv-ink); }
.lv-shot::after {
    content: ""; position: absolute; top: 12px; right: 12px; width: 26px; height: 26px; border-radius: 50%;
    background: var(--ta-yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3M11 8v6M8 11h6'/%3E%3C/svg%3E") center / 15px no-repeat;
    opacity: 0; transform: scale(.7); transition: opacity .2s ease, transform .2s ease;
}
.lv-shot:hover, .lv-shot:focus-visible { transform: translateY(-3px); border-color: var(--ta-yellow); box-shadow: 0 12px 26px rgba(47, 60, 32, .16); }
.lv-shot:hover::after, .lv-shot:focus-visible::after { opacity: 1; transform: none; }

.lv-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 20px; }
.lv-controls__hint { font-size: 13px; color: var(--lv-muted); margin-left: 6px; }
/* real screenshot viewer */
.lv-lightbox { position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(12, 20, 8, .82); }
.lv-lightbox[hidden] { display: none; }
.lv-lightbox__inner { position: relative; max-width: 1200px; width: 100%; background: #1d221f; border-radius: 16px; padding: 14px; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); animation: hiwIn .3s ease both; }
.lv-lightbox__inner { max-width: 1400px; }
.lv-lightbox__stage { position: relative; }
.lv-lightbox__stage img { display: block; width: 100%; height: auto; max-height: 76vh; object-fit: contain; border-radius: 8px; background: #0f1a0c; }
.lv-lightbox__nav {
    position: absolute; top: 50%; width: 46px; height: 46px; margin-top: -23px; border-radius: 50%; border: 0;
    background: rgba(15, 23, 42, .78); color: #fff; font-size: 20px; line-height: 1; cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .4); transition: background .2s ease, transform .2s ease;
}
.lv-lightbox__nav:hover { background: var(--ta-yellow); color: #0f172a; transform: scale(1.06); }
.lv-lightbox__nav--prev { left: 12px; }
.lv-lightbox__nav--next { right: 12px; }
.lv-lightbox__nav[hidden] { display: none; }
.lv-lightbox__cap { display: flex; justify-content: space-between; gap: 12px; margin: 12px 4px 0; color: #fff; font-size: 15px; }
.lv-lightbox__cap span { color: #94a3b8; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lv-lightbox__note { margin: 4px 4px 0; color: #94a3b8; font-size: 12px; }
.lv-lightbox__close { position: absolute; top: -16px; right: -16px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--ta-yellow); color: var(--ta-head); font-size: 26px; line-height: 1; cursor: pointer; }





/* ---------- 6. A full ERP behind every field (Multicat + Financial Management, combined) ---------- */
.erp-layout {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas: "intro detail" "tiles tiles";
    gap: 34px 48px;
    align-items: center;
}
.erp-intro { grid-area: intro; }
.erp-tiles { grid-area: tiles; }
.erp-detail { grid-area: detail; }
.erp-anchor { display: block; position: relative; top: -90px; }
.erp-brand { margin-bottom: 22px; }
.erp-brand__powered { display: block; margin-bottom: 6px; color: #94a3b8; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.erp-brand img { display: block; width: 240px; max-width: 70%; height: auto; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .35)); }

/* prominent "Discover Multicat ERP" button */
.erp-discover {
    position: relative;
    display: inline-flex; align-items: center; gap: 12px;
    margin-top: 24px; padding: 16px 30px;
    background: var(--ta-yellow); color: #0f172a;
    border-radius: 999px;
    font-family: Raleway, sans-serif; font-size: 16px; font-weight: 800; letter-spacing: .02em;
    text-decoration: none;
    box-shadow: 0 12px 30px rgba(252, 219, 90, .3);
    animation: erpGlow 2.8s ease-out infinite;
    transition: transform .25s var(--ta-ease), background .25s ease;
}
.erp-discover svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ta-ease); }
.erp-discover:hover, .erp-discover:focus { background: #ffe57a; color: #0f172a; text-decoration: none; transform: translateY(-2px); }
.erp-discover:hover svg, .erp-discover:focus svg { transform: translateX(5px); }
@keyframes erpGlow { 0% { box-shadow: 0 12px 30px rgba(252, 219, 90, .3), 0 0 0 0 rgba(252, 219, 90, .55); } 70%, 100% { box-shadow: 0 12px 30px rgba(252, 219, 90, .3), 0 0 0 16px rgba(252, 219, 90, 0); } }
.erp .section-heading { margin-bottom: 18px; }

.erp-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.erp-facts li {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px; border-radius: 30px;
    background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14);
    color: #e2e8f0; font-size: 13px; font-weight: 600;
}
.erp-facts li::before { content: "\2713"; color: var(--ta-yellow); font-weight: 800; }

.erp-hint { margin: 0 0 14px; color: #94a3b8; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.erp-grid { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 12px; }
.erp-tile {
    position: relative;
    display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
    min-height: 124px; margin: 0; padding: 16px 14px 14px;
    text-align: left; color: #fff; cursor: pointer;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .1); border-radius: 16px;
    transition: transform .28s var(--ta-ease), border-color .28s ease, background .28s ease, box-shadow .28s ease;
}
.erp-tile:hover { transform: translateY(-4px); background: rgba(255, 255, 255, .07); border-color: rgba(252, 219, 90, .5); }
.erp-tile:focus-visible { outline: 3px solid var(--ta-yellow); outline-offset: 3px; }
.erp-tile.is-on {
    background: linear-gradient(160deg, rgba(252, 219, 90, .18), rgba(255, 255, 255, .04) 70%);
    border-color: var(--ta-yellow);
    box-shadow: 0 0 0 1px var(--ta-yellow), 0 16px 36px rgba(0, 0, 0, .35);
}
.erp-tile.is-on::after {
    content: ""; position: absolute; left: 16px; bottom: -1px; width: 36px; height: 3px; border-radius: 3px;
    background: var(--ta-yellow); box-shadow: 0 0 12px var(--ta-yellow);
}
.erp-tile b { font-family: Raleway, sans-serif; font-size: 14px; font-weight: 800; line-height: 1.25; }
.erp-tile .fi { transition: transform .28s var(--ta-ease); }
.erp-tile:hover .fi, .erp-tile.is-on .fi { transform: scale(1.08) rotate(-4deg); }
.erp-tile--ops .fi { background: #86efac; color: #064e3b; box-shadow: 0 4px 10px rgba(134, 239, 172, .3); }
.erp-tile--ops.is-on { border-color: #86efac; box-shadow: 0 0 0 1px #86efac, 0 16px 36px rgba(0, 0, 0, .35); background: linear-gradient(160deg, rgba(134, 239, 172, .16), rgba(255, 255, 255, .04) 70%); }
.erp-tile--ops.is-on::after { background: #86efac; box-shadow: 0 0 12px #86efac; }
.erp-tile--ops:hover { border-color: rgba(134, 239, 172, .55); }
.erp-key { display: inline-flex; align-items: center; gap: 6px; margin-left: 14px; letter-spacing: .06em; }
.erp-key::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--ta-yellow); }
.erp-key--ops::before { background: #86efac; }

.erp-detail {
    position: relative;
    padding: 24px 26px 22px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .12); border-top: 3px solid var(--ta-yellow);
    border-radius: 18px;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 24px 50px rgba(0, 0, 0, .3);
}
.erp-panel.is-on { animation: hiwIn .4s var(--ta-ease) both; }
.erp-panel__kicker { display: block; color: #94a3b8; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.erp-panel h3 { margin: 4px 0 6px; color: #fff; font-family: Raleway, sans-serif; font-size: 24px; font-weight: 800; }
.erp-panel__lead { margin: 0 0 14px; color: #cbd5e1; font-size: 15px; line-height: 1.55; }
.erp-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; }
.erp-list li { position: relative; padding-left: 24px; color: #e2e8f0; font-size: 14px; line-height: 1.45; }
.erp-list li::before {
    content: "\2713"; position: absolute; left: 0; top: 1px;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--ta-yellow); color: var(--ta-green-deep);
    font-size: 10px; font-weight: 800; line-height: 16px; text-align: center;
}
.erp-farm {
    margin: 16px 0 0; padding: 12px 14px; border-radius: 12px;
    background: rgba(34, 197, 94, .1); border: 1px solid rgba(34, 197, 94, .3);
    color: #d1fae5; font-size: 14px; line-height: 1.5;
}
.erp-farm b { display: block; margin-bottom: 2px; color: #86efac; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }

@media (max-width: 1199.98px) {
    .erp-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
    .erp-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "tiles" "detail"; gap: 24px; }
    .erp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .erp-tile { min-height: 110px; }
}
@media (max-width: 575.98px) {
    .erp-grid { gap: 8px; }
    .erp-tile { min-height: 0; padding: 12px 10px; gap: 8px; border-radius: 12px; }
    .erp-tile b { font-size: 12.5px; }
    .erp-tile .fi { width: 32px; height: 32px; border-radius: 8px; }
    .erp-tile .fi .hiw-ico { width: 18px; height: 18px; }
    .erp-detail { padding: 18px 16px; }
    .erp-list { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 2a. live dashboard: Daniel's tour effects on every stage ---------- */
/* progress bar on the active stage while autoplay runs */
.lv-stage { position: relative; overflow: hidden; }
.lv-stage__bar { position: absolute; left: 0; bottom: 0; height: 4px; width: 0; background: linear-gradient(90deg, var(--ta-yellow), var(--ta-accent-gold, #eab308)); }
.lv-stage.is-on .lv-stage__bar { width: var(--p, 0%); }
/* callouts pop up one at a time over the card, then the toast slides in */
.lv-card { position: relative; padding-bottom: 66px; }
.lv-card .hiw-spot { z-index: 4; pointer-events: none; }
.lv-card .hiw-spot b { font-size: 12.5px; }
.lv-card .hiw-toast { margin: 0; }
@media (max-width: 575.98px) {
    .lv-card { padding-bottom: 60px; }
    .lv-card .hiw-spot b { white-space: normal; width: max-content; max-width: 180px; }
}

/* ---------- shared UI polish ---------- */
.hiw-ico { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; }
.fi .hiw-ico { width: 22px; height: 22px; }

/* skip link: hidden until focused */
.hiw-skip {
    position: absolute; left: 12px; top: -60px; z-index: 10000;
    background: var(--ta-green); color: #fff; padding: 10px 16px; border-radius: 8px;
    font-weight: 700; text-decoration: none; transition: top .2s ease;
}
.hiw-skip:focus { top: 12px; color: #fff; }
#main-content:focus { outline: none; }

/* visible keyboard focus on map pivots */
.hiw-land:focus-visible { outline: none; }
.hiw-land:focus-visible circle { stroke: #0f172a; stroke-width: 5; stroke-dasharray: 7 4; }

/* compliance chains: each step lights up in turn */
.hiw-chain span { transition: background .3s ease, border-color .3s ease, color .3s ease, transform .3s ease; }
.hiw-chain span.is-lit { background: var(--ta-green); border-color: var(--ta-green); color: var(--ta-yellow); transform: translateY(-2px); }
.hiw-chain span:last-child.is-lit { background: var(--ta-green); color: var(--ta-yellow); }

/* cost card numbers settle in */
.hiw-costcard__tot b, .hiw-costcard__lines li span:last-child { transition: color .3s ease; }
.hiw-costcard.is-updating .hiw-costcard__tot b { color: #8a9a45; }
@media (max-width: 1199.98px) {
    .lv-panel { grid-template-columns: 1fr; gap: 20px; }
    .lv-copy { order: -1; }
}
@media (max-width: 991.98px) {
    .lv-band { padding: 18px 14px 14px; border-radius: 18px; }
    .lv-band__meta { margin-left: 0; order: 3; width: 100%; }
    .lv-pipe { overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 8px; scrollbar-width: none; }
    .lv-pipe::-webkit-scrollbar { display: none; }
    .lv-stage { flex: 0 0 170px; scroll-snap-align: start; }
    .lv-link { flex-basis: 18px; }
}
@media (max-width: 575.98px) {
    .lv-card { padding: 16px 14px; }
    .lv-kv { grid-template-columns: repeat(2, 1fr); }
    .lv-pos li { grid-template-columns: 1fr 56px; }
    .lv-pos li > span:nth-child(2) { grid-column: 1; font-size: 12.5px; }
    .lv-pos li .lv-progress { grid-column: 1 / -1; }
    .lv-costs li { grid-template-columns: 110px 1fr 76px; font-size: 13px; }
    .lv-table { font-size: 12.5px; }
    .lv-table--sched td:nth-child(2), .lv-table--sched th:nth-child(2) { display: none; }
    .lv-table--gl td:nth-child(3), .lv-table--gl th:nth-child(3) { display: none; }
    .lv-copy h3 { font-size: 22px; }
    .lv-lightbox__close { top: -12px; right: -6px; }
}

/* ==========================================================================
   Mobile friendliness (Home / How it works sections)
   ========================================================================== */
.hiw-phone-tabs button { min-height: 44px; }
@media (max-width: 575.98px) {
    /* One database stays a circle on phones, with short labels (full names show in the centre on tap) */
    .hiw-orbit__full { display: none; }
    .hiw-orbit__short { display: inline; }
    .hiw-orbit__node { width: 33%; min-height: 40px; display: flex; align-items: center; padding: 6px 8px 6px 34px; font-size: 12.5px; line-height: 1.2; border-radius: 12px; }
    .hiw-orbit__node i { width: 22px; height: 22px; left: 7px; font-size: 11.5px; }
    .hiw-orbit__core { width: 28%; }
    .hiw-orbit__core b { font-size: 12px; line-height: 1.15; }

    /* live dashboard: nothing smaller than 12px */
    .lv-viz, .lv-viz--checks span, .lv-viz--bars em, .lv-stage small, .lv-tag, .lv-table th, .lv-table td small,
    .lv-nums, .lv-legend, .lv-prog small, .lv-sub small, .lv-job__main small, .lv-status, .lv-kv dt, .lv-counts span,
    .lv-chip, .lv-pos small, .lv-kpi small, .lv-post small, .lv-shots__label, .lv-band__meta, .lv-band__foot { font-size: 12px !important; }
    .lv-viz--cols em { font-size: 12px; }
    .lv-viz--cols { gap: 18px; }

    /* small labels elsewhere */
    .hiw-map__hud-hint { font-size: 12px; }
    .hiw-chip { font-size: 12px; }
    .erp-brand__powered, .erp-panel__kicker, .erp-farm b { font-size: 12px; }
}
/* larger invisible tap area around each pivot on the farm map */
.hiw-land .hiw-land__hit { fill: transparent; stroke: none !important; filter: none !important; transform: none !important; }
/* tablets are touch devices too: same 12px minimum for the small labels */
@media (max-width: 991.98px) {
    .lv-viz, .lv-viz--checks span, .lv-viz--bars em, .lv-stage small, .lv-tag, .lv-table th, .lv-table td, .lv-table td small,
    .lv-nums, .lv-legend, .lv-prog small, .lv-sub small, .lv-job__main small, .lv-status, .lv-kv dt, .lv-counts span,
    .lv-chip, .lv-pos small, .lv-kpi small, .lv-post small, .lv-shots__label, .lv-band__meta, .lv-band__foot,
    .lv-viz--cols em, .hiw-map__hud-hint, .hiw-chip, .erp-brand__powered, .erp-panel__kicker, .erp-farm b { font-size: 12px !important; }
    .lv-viz--cols { gap: 18px; }
    .hiw-orbit__node { min-height: 44px; }
}
/* orbit labels: full names normally, short names on phones */
.hiw-orbit__short { display: none; }
@media (max-width: 575.98px) {
    .hiw-orbit__full { display: none; }
    .hiw-orbit__short { display: inline; }
}
/* dots under the app phone (also swipeable on touch screens) */
.hiw-phone--big { touch-action: pan-y; }
.hiw-phone-dots { display: flex; justify-content: center; gap: 4px; margin-top: 14px; }
.hiw-phone-dots button {
    width: 32px; height: 40px; padding: 0; border: 0; background: transparent; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.hiw-phone-dots button::before { content: ""; width: 9px; height: 9px; border-radius: 9px; background: #cbd5e1; transition: width .25s ease, background .25s ease; }
.hiw-phone-dots button.is-on::before { width: 24px; background: #fcdb5a; }