/* =========================================================
   TRADEWA — Wireframe Design System
   Brand: industrial / construction / WA dirt-and-sun palette
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800;900&family=Archivo+Narrow:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
    /* Core brand */
    --tw-yellow: #FFC83D;
    --tw-yellow-bright: #FFD64A;
    --tw-yellow-dark: #E5A800;

    /* Surfaces */
    --tw-ink: #0F1115;          /* near-black, headlines */
    --tw-slate-900: #161A21;    /* primary dark surface */
    --tw-slate-800: #1E2330;
    --tw-slate-700: #2A3142;
    --tw-slate-600: #3A4256;

    /* Light surfaces */
    --tw-bone: #F5F2EC;          /* warm off-white, like cement bag */
    --tw-bone-2: #ECE7DC;
    --tw-line: #D9D4C7;

    /* Text */
    --tw-text: #1A1D24;
    --tw-text-mute: #5A6170;
    --tw-text-invert: #F5F2EC;
    --tw-text-invert-mute: #9AA1B0;

    /* Status */
    --tw-green: #5BC97A;
    --tw-red: #E84C4C;
    --tw-orange: #FF8A3D;

    /* Type */
    --font-display: 'Archivo', 'Archivo Narrow', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, sans-serif;

    /* Layout */
    --radius: 6px;
    --radius-lg: 14px;
    --maxw: 1240px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    font-family: var(--font-body);
    color: var(--tw-text);
    background: var(--tw-bone);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    line-height: 1.5;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ---------- Wireframe banner ---------- */
.wf-banner {
    background: repeating-linear-gradient(45deg, #1A1D24, #1A1D24 10px, #0F1115 10px, #0F1115 20px);
    color: var(--tw-yellow);
    text-align: center;
    padding: 6px 16px;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    border-bottom: 2px solid var(--tw-yellow);
}

/* ---------- Top nav ---------- */
.tw-nav {
    background: var(--tw-slate-900);
    color: var(--tw-text-invert);
    border-bottom: 1px solid var(--tw-slate-700);
    position: sticky; top: 0; z-index: 50;
}
.tw-nav-inner {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    gap: 32px;
}
.tw-logo {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 22px;
    letter-spacing: 0.02em;
    color: var(--tw-text-invert);
}
.tw-logo-mark {
    width: 32px; height: 32px;
    background: var(--tw-yellow);
    display: grid; place-items: center;
    border-radius: 4px;
    color: var(--tw-brand-ink);
    font-weight: 900;
    font-family: var(--font-display);
    transform: skewX(-6deg);
}
.tw-logo-mark span { transform: skewX(6deg); display: block; }
.tw-nav-links {
    display: flex; gap: 28px; list-style: none;
    font-size: 14px; font-weight: 500;
    color: var(--tw-text-invert-mute);
}
.tw-nav-links a:hover, .tw-nav-links a.active { color: var(--tw-yellow); }
.tw-nav-spacer { flex: 1; }
.tw-nav-actions { display: flex; gap: 10px; align-items: center; }

/* Mobile nav toggle (hamburger) — hidden on desktop, injected by js/nav.js */
.tw-nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px; height: 40px;
    padding: 9px 8px;
    background: transparent;
    border: 1px solid var(--tw-slate-700);
    border-radius: 6px;
    cursor: pointer;
}
.tw-nav-toggle span {
    display: block; height: 2px; width: 100%;
    background: var(--tw-yellow); border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
}
.tw-nav.nav-open .tw-nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.tw-nav.nav-open .tw-nav-toggle span:nth-child(2) { opacity: 0; }
.tw-nav.nav-open .tw-nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: var(--radius);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform 0.08s ease, background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
    background: var(--tw-yellow);
    color: var(--tw-brand-ink);
}
.btn-primary:hover { background: var(--tw-yellow-bright); }
.btn-ghost-dark {
    background: transparent;
    color: var(--tw-text-invert);
    border-color: var(--tw-slate-600);
}
.btn-ghost-dark:hover { border-color: var(--tw-yellow); color: var(--tw-yellow); }
.btn-ghost {
    background: transparent;
    color: var(--tw-text);
    border-color: var(--tw-text);
}
.btn-ghost:hover { background: var(--tw-text); color: var(--tw-bone); }
.btn-sm { padding: 8px 14px; font-size: 12px; }

/* ---------- Sections ---------- */
.section {
    padding: 80px 24px;
}
.section-dark { background: var(--tw-slate-900); color: var(--tw-text-invert); }
.section-ink { background: var(--tw-ink); color: var(--tw-text-invert); }
.section-yellow { background: var(--tw-yellow); color: var(--tw-brand-ink); }
.section-bone { background: var(--tw-bone); }
.container { max-width: var(--maxw); margin: 0 auto; }

.eyebrow {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.2em;
    font-size: 11px;
    text-transform: uppercase;
    color: var(--tw-yellow-dark);
    margin-bottom: 14px;
    display: inline-block;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--tw-yellow);
}
.section-dark .eyebrow { color: var(--tw-yellow); }

h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.05; letter-spacing: -0.01em; }
h1 { font-size: clamp(40px, 6vw, 76px); font-weight: 900; }
h2 { font-size: clamp(28px, 4vw, 48px); font-weight: 800; }
h3 { font-size: 22px; font-weight: 700; }
h4 { font-size: 16px; font-weight: 700; }

/* ---------- HERO ---------- */
.hero {
    background: var(--tw-ink);
    color: var(--tw-text-invert);
    position: relative;
    overflow: hidden;
    padding: 100px 24px 120px;
}
.hero::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(800px 400px at 80% 20%, rgba(255, 200, 61, 0.12), transparent 70%),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 80px);
    pointer-events: none;
}
.hero-inner {
    max-width: var(--maxw);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 1;
}
.hero h1 .accent { color: var(--tw-yellow); }
.hero p.lead {
    font-size: 18px;
    color: var(--tw-text-invert-mute);
    margin: 28px 0 36px;
    max-width: 520px;
}
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-stats {
    display: flex; gap: 36px; margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--tw-slate-700);
}
.hero-stat .num {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 32px;
    color: var(--tw-yellow);
    display: block;
    line-height: 1;
}
.hero-stat .lbl {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--tw-text-invert-mute);
    margin-top: 6px;
    display: block;
}

/* Hero phone mockup */
.hero-phone-wrap {
    position: relative;
    display: grid;
    place-items: center;
}
.phone {
    width: 280px;
    background: #0a0c10;
    border-radius: 38px;
    padding: 12px;
    border: 2px solid #2A2F3A;
    box-shadow: 0 30px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,200,61,0.08);
    position: relative;
}
.phone::before {
    content: '';
    position: absolute;
    top: 18px; left: 50%; transform: translateX(-50%);
    width: 70px; height: 5px;
    background: #2A2F3A;
    border-radius: 3px;
}
.phone-screen {
    background: var(--tw-slate-900);
    border-radius: 28px;
    overflow: hidden;
    color: var(--tw-text-invert);
    min-height: 540px;
    padding-top: 38px;
}

/* ---------- Feature rows ---------- */
.features {
    margin-top: 60px;
    display: grid;
    gap: 30px;
}
.feature-row {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 18px;
    align-items: start;
}
.feature-icon {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--tw-yellow);
    color: var(--tw-ink);
    display: grid; place-items: center;
    font-size: 22px;
}
.feature-row h4 {
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--tw-yellow);
    margin-bottom: 4px;
}
.feature-row p { font-size: 14px; color: var(--tw-text-invert-mute); }

/* ---------- How it works ---------- */
.how-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 32px; margin-top: 48px;
}
.how-step {
    text-align: center;
    position: relative;
}
.how-step .ic {
    width: 70px; height: 70px;
    border-radius: 50%;
    background: var(--tw-bone-2);
    border: 2px solid var(--tw-text);
    display: grid; place-items: center;
    margin: 0 auto 18px;
    font-size: 28px;
}
.how-step .num {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 12px;
    letter-spacing: 0.2em;
    margin-bottom: 6px;
    color: var(--tw-text-mute);
}
.how-step h4 {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: 16px;
    margin-bottom: 6px;
}
.how-step p { font-size: 14px; color: var(--tw-text-mute); }

/* ---------- Split (For Employers / For Tradies) ---------- */
.split {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 40px;
}
.split-card {
    background: var(--tw-bone);
    border: 1px solid var(--tw-line);
    border-radius: var(--radius-lg);
    padding: 36px;
}
.split-card h3 {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: 18px;
    margin-bottom: 20px;
    letter-spacing: 0.1em;
}
.split-card ul { list-style: none; }
.split-card li {
    padding: 10px 0;
    border-bottom: 1px dashed var(--tw-line);
    display: flex; gap: 10px; align-items: center;
    font-size: 15px;
}
.split-card li::before {
    content: '✓'; color: var(--tw-yellow-dark); font-weight: 900;
}

/* ---------- Pricing ---------- */
.pricing-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 30px; margin-top: 40px;
}
.price-card {
    background: var(--tw-ink);
    color: var(--tw-text-invert);
    padding: 36px;
    border-radius: var(--radius-lg);
    border: 2px solid var(--tw-slate-700);
    position: relative;
}
.price-card.featured { border-color: var(--tw-yellow); }
.price-card .role {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 0.15em;
    color: var(--tw-yellow);
    margin-bottom: 8px;
}
.price-card .sub { color: var(--tw-text-invert-mute); font-size: 13px; margin-bottom: 24px; }
.price-card .price {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 56px;
    line-height: 1;
}
.price-card .price-suffix { font-size: 16px; color: var(--tw-text-invert-mute); margin-left: 4px; }
.price-card ul { list-style: none; margin: 24px 0; }
.price-card li {
    padding: 8px 0;
    font-size: 14px;
    display: flex; gap: 10px; align-items: center;
    color: var(--tw-text-invert-mute);
}
.price-card li::before { content: '✓'; color: var(--tw-yellow); }

/* ---------- Built for industry icons ---------- */
.industry-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 24px; margin-top: 40px;
}
.ind-card {
    background: var(--tw-slate-800);
    color: var(--tw-text-invert);
    padding: 28px 20px;
    border-radius: var(--radius);
    text-align: center;
    border: 1px solid var(--tw-slate-700);
}
.ind-card .ic {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--tw-slate-700);
    color: var(--tw-yellow);
    display: grid; place-items: center;
    margin: 0 auto 14px;
    font-size: 22px;
}
.ind-card h4 { font-family: var(--font-display); font-size: 15px; }

/* ---------- Testimonials ---------- */
.testimonials {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 24px; margin-top: 40px;
}
.testimonial {
    background: var(--tw-bone);
    border: 1px solid var(--tw-line);
    border-radius: var(--radius-lg);
    padding: 28px;
    display: grid;
    grid-template-columns: 1fr 80px;
    gap: 18px;
    align-items: center;
}
.testimonial .stars { color: var(--tw-yellow-dark); font-size: 14px; margin-bottom: 8px; }
.testimonial blockquote { font-size: 15px; font-style: italic; margin-bottom: 10px; }
.testimonial .author {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
}
.testimonial .avatar {
    width: 80px; height: 80px;
    border-radius: 50%;
    background: var(--tw-slate-700);
    color: var(--tw-yellow);
    display: grid; place-items: center;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 22px;
}

/* ---------- Footer ---------- */
.tw-footer {
    background: var(--tw-yellow);
    color: var(--tw-brand-ink);
    padding: 24px;
}
.tw-footer-inner {
    max-width: var(--maxw);
    margin: 0 auto;
    display: flex; align-items: center; gap: 32px;
    flex-wrap: wrap;
}
.tw-footer .tw-logo { color: var(--tw-brand-ink); font-size: 16px; }
.tw-footer .tw-logo-mark { background: var(--tw-ink); color: var(--tw-yellow); }
.tw-footer-tag { font-weight: 600; font-size: 14px; }
.tw-footer-proud {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.1em;
    font-weight: 700;
}
.tw-footer-right { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: 14px; font-weight: 600; }
.store-btn {
    background: var(--tw-ink); color: var(--tw-yellow);
    padding: 8px 14px; border-radius: 6px;
    font-family: var(--font-display);
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
}

/* =========================================================
   APP-PAGE CHROME (Jobs feed, post job, detail, messages)
   ========================================================= */
.app-shell {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: calc(100vh - 80px);
    background: var(--tw-bone);
}
.app-side {
    background: var(--tw-slate-900);
    color: var(--tw-text-invert);
    padding: 32px 0;
    border-right: 1px solid var(--tw-slate-700);
}
.app-side h5 {
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--tw-text-invert-mute);
    padding: 0 24px 12px;
    margin-top: 20px;
}
.app-side h5:first-child { margin-top: 0; }
.app-side a {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 24px;
    color: var(--tw-text-invert-mute);
    font-size: 14px; font-weight: 500;
    border-left: 3px solid transparent;
}
.app-side a:hover { background: var(--tw-slate-800); color: var(--tw-text-invert); }
.app-side a.active {
    background: var(--tw-slate-800);
    color: var(--tw-yellow);
    border-left-color: var(--tw-yellow);
}
.app-side .ic { width: 18px; text-align: center; }

.app-main { padding: 32px 40px; }
.app-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--tw-line);
}
.app-header h1 { font-size: 32px; font-weight: 800; }
.app-header p { color: var(--tw-text-mute); font-size: 14px; margin-top: 4px; }

/* Filter bar */
.filter-bar {
    display: flex; gap: 12px; flex-wrap: wrap;
    margin-bottom: 24px;
    padding: 16px;
    background: white;
    border: 1px solid var(--tw-line);
    border-radius: var(--radius);
}
.chip {
    padding: 8px 14px;
    border-radius: 100px;
    border: 1px solid var(--tw-line);
    background: white;
    font-size: 13px;
    cursor: pointer;
    font-weight: 500;
}
.chip.active { background: var(--tw-ink); color: var(--tw-bone); border-color: var(--tw-ink); }
.chip:hover { border-color: var(--tw-ink); }
.search-input {
    flex: 1; min-width: 220px;
    padding: 10px 14px;
    border: 1px solid var(--tw-line);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 14px;
}

/* Job cards */
.job-list { display: grid; gap: 14px; }
.job-card {
    background: white;
    border: 1px solid var(--tw-line);
    border-radius: var(--radius);
    padding: 20px 22px;
    display: grid;
    grid-template-columns: 48px 1fr auto;
    gap: 18px;
    align-items: center;
    transition: border-color 0.12s ease, transform 0.12s ease;
    cursor: pointer;
}
.job-card:hover { border-color: var(--tw-ink); transform: translateY(-1px); }
.job-card .ic {
    width: 48px; height: 48px;
    border-radius: 10px;
    background: var(--tw-yellow);
    color: var(--tw-ink);
    display: grid; place-items: center;
    font-size: 22px;
}
.job-card h3 {
    font-family: var(--font-display);
    font-size: 17px;
    margin-bottom: 4px;
    display: flex; align-items: center; gap: 10px;
}
.job-card .badge {
    background: var(--tw-red); color: white;
    font-size: 9px; padding: 3px 7px;
    border-radius: 3px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.job-card .badge.green { background: var(--tw-green); }
.job-card p { font-size: 13px; color: var(--tw-text-mute); margin-bottom: 6px; }
.job-card .meta {
    font-size: 12px;
    color: var(--tw-text-mute);
    display: flex; gap: 14px;
    font-weight: 500;
}
.job-card .price {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 22px;
    text-align: right;
}
.job-card .price-suffix {
    font-size: 11px;
    color: var(--tw-text-mute);
    display: block;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Post a job form */
.form-card {
    background: white;
    border: 1px solid var(--tw-line);
    border-radius: var(--radius-lg);
    padding: 40px;
    max-width: 720px;
}
.stepper {
    display: flex; gap: 0;
    margin-bottom: 36px;
    border-bottom: 1px solid var(--tw-line);
}
.step {
    flex: 1; padding: 14px 12px 18px;
    text-align: center;
    border-bottom: 3px solid transparent;
    position: relative;
    font-family: var(--font-display);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--tw-text-mute);
}
.step.active { border-bottom-color: var(--tw-yellow); color: var(--tw-ink); }
.step .step-num {
    display: inline-grid; place-items: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--tw-bone-2);
    margin-right: 8px;
    font-weight: 800;
}
.step.active .step-num { background: var(--tw-yellow); color: var(--tw-brand-ink); }

.form-row {
    margin-bottom: 22px;
}
.form-row label {
    display: block;
    font-family: var(--font-display);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--tw-text);
    margin-bottom: 8px;
}
.form-row input, .form-row select, .form-row textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--tw-line);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 15px;
    background: var(--tw-bone);
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
    outline: none;
    border-color: var(--tw-ink);
    background: white;
}
.form-row textarea { min-height: 100px; resize: vertical; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* Job detail layout */
.detail-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 28px;
}
.detail-card {
    background: white;
    border: 1px solid var(--tw-line);
    border-radius: var(--radius-lg);
    padding: 32px;
}
.detail-card .price-block {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 36px;
    margin: 8px 0;
}
.detail-card .price-block .suffix {
    font-size: 14px;
    color: var(--tw-text-mute);
    font-weight: 500;
}
.must-have {
    list-style: none; margin-top: 12px;
}
.must-have li {
    padding: 8px 0;
    border-bottom: 1px dashed var(--tw-line);
    display: flex; gap: 10px; align-items: center;
    font-size: 14px;
}
.must-have li::before { content: '●'; color: var(--tw-yellow-dark); }

.applicant-row {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--tw-line);
}
.applicant-row:last-child { border-bottom: none; }
.applicant-row .avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--tw-slate-700);
    color: var(--tw-yellow);
    display: grid; place-items: center;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 14px;
}
.applicant-row .name { font-weight: 700; font-size: 14px; }
.applicant-row .info { font-size: 12px; color: var(--tw-text-mute); }
.rating-pill {
    background: var(--tw-green);
    color: white;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 800;
    margin-right: 10px;
}

/* Messages */
.messages-shell {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 0;
    background: white;
    border: 1px solid var(--tw-line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    height: 640px;
}
.conv-list { border-right: 1px solid var(--tw-line); overflow-y: auto; }
.conv-item {
    padding: 16px 20px;
    border-bottom: 1px solid var(--tw-line);
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 12px;
    cursor: pointer;
}
.conv-item:hover { background: var(--tw-bone); }
.conv-item.active { background: var(--tw-bone-2); border-left: 3px solid var(--tw-yellow); padding-left: 17px; }
.conv-item .avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--tw-slate-700);
    color: var(--tw-yellow);
    display: grid; place-items: center;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 14px;
}
.conv-item .name { font-weight: 700; font-size: 14px; }
.conv-item .preview { font-size: 12px; color: var(--tw-text-mute); margin-top: 2px; }
.conv-item .time { font-size: 11px; color: var(--tw-text-mute); }

.chat-pane { display: flex; flex-direction: column; }
.chat-header {
    padding: 18px 24px;
    border-bottom: 1px solid var(--tw-line);
    display: flex; align-items: center; gap: 12px;
}
.chat-header .avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--tw-slate-700);
    color: var(--tw-yellow);
    display: grid; place-items: center;
    font-weight: 800;
}
.chat-header .name { font-weight: 700; }
.chat-header .status { font-size: 12px; color: var(--tw-green); font-weight: 600; }
.chat-body { flex: 1; overflow-y: auto; padding: 24px; background: var(--tw-bone); }
.bubble {
    max-width: 70%;
    padding: 12px 16px;
    border-radius: 14px;
    margin-bottom: 12px;
    font-size: 14px;
    line-height: 1.45;
}
.bubble.them { background: white; border: 1px solid var(--tw-line); }
.bubble.me { background: var(--tw-yellow); color: var(--tw-ink); margin-left: auto; }
.bubble .ts { display: block; font-size: 10px; opacity: 0.6; margin-top: 4px; }

.chat-input {
    padding: 16px 20px;
    border-top: 1px solid var(--tw-line);
    display: flex; gap: 12px;
}
.chat-input input {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid var(--tw-line);
    border-radius: 100px;
    font-family: inherit;
    font-size: 14px;
}

/* =========================================================
   ANALYSIS PAGE
   ========================================================= */
.analysis-hero {
    background: var(--tw-ink);
    color: var(--tw-text-invert);
    padding: 80px 24px 60px;
}
.analysis-hero .container { max-width: 960px; }
.analysis-hero h1 { font-size: clamp(36px, 5vw, 60px); margin-bottom: 18px; }
.analysis-hero h1 .accent { color: var(--tw-yellow); }
.analysis-hero p { font-size: 17px; color: var(--tw-text-invert-mute); max-width: 720px; }

.analysis-body { max-width: 960px; margin: 0 auto; padding: 60px 24px; }
.analysis-body h2 { margin: 48px 0 16px; font-size: 32px; }
.analysis-body h2:first-child { margin-top: 0; }
.analysis-body h3 { margin: 28px 0 10px; font-size: 20px; }
.analysis-body p { font-size: 16px; margin-bottom: 14px; }
.analysis-body ul { margin: 8px 0 18px 22px; }
.analysis-body li { margin-bottom: 8px; }

.swot-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin: 30px 0;
}
.swot-card {
    padding: 28px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--tw-line);
    background: white;
}
.swot-card h3 {
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid;
}
.swot-card.s { border-top: 6px solid var(--tw-green); }
.swot-card.s h3 { color: var(--tw-green); border-color: var(--tw-green); }
.swot-card.w { border-top: 6px solid var(--tw-red); }
.swot-card.w h3 { color: var(--tw-red); border-color: var(--tw-red); }
.swot-card.o { border-top: 6px solid var(--tw-yellow-dark); }
.swot-card.o h3 { color: var(--tw-yellow-dark); border-color: var(--tw-yellow-dark); }
.swot-card.t { border-top: 6px solid var(--tw-orange); }
.swot-card.t h3 { color: var(--tw-orange); border-color: var(--tw-orange); }
.swot-card ul { margin: 0; list-style: none; }
.swot-card li {
    padding: 8px 0 8px 22px;
    font-size: 14px;
    border-bottom: 1px dashed var(--tw-line);
    position: relative;
}
.swot-card li:last-child { border-bottom: none; }
.swot-card li::before {
    content: '→';
    position: absolute;
    left: 0; top: 8px;
    font-weight: 800;
}

.verdict {
    background: var(--tw-yellow);
    padding: 32px;
    border-radius: var(--radius-lg);
    margin: 40px 0;
    border-left: 8px solid var(--tw-ink);
}
.verdict h3 {
    font-family: var(--font-display);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 12px;
}
.verdict p { font-size: 18px; font-weight: 500; margin-bottom: 0; }

.stat-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 30px 0;
}
.stat-box {
    background: var(--tw-bone-2);
    padding: 24px 20px;
    border-radius: var(--radius);
    text-align: center;
    border-left: 4px solid var(--tw-yellow);
}
.stat-box .n {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 32px;
    line-height: 1;
    color: var(--tw-ink);
}
.stat-box .l {
    font-size: 12px;
    color: var(--tw-text-mute);
    margin-top: 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

table.comp {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0 30px;
    font-size: 14px;
    background: white;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 1px 0 var(--tw-line);
}
table.comp th, table.comp td {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid var(--tw-line);
}
table.comp th {
    background: var(--tw-ink);
    color: var(--tw-yellow);
    font-family: var(--font-display);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
table.comp tr:last-child td { border-bottom: none; }
table.comp td:first-child { font-weight: 700; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 900px) {
    .hero-inner, .split, .pricing-grid, .testimonials, .swot-grid, .detail-grid { grid-template-columns: 1fr; }
    .how-grid, .industry-grid { grid-template-columns: 1fr 1fr; }
    .stat-row { grid-template-columns: 1fr 1fr; }
    .app-shell { grid-template-columns: 1fr; }
    .app-side { display: none; }
    .messages-shell { grid-template-columns: 1fr; height: auto; }
    .conv-list { max-height: 240px; }

    /* --- Mobile nav: collapse links + actions behind the hamburger --- */
    .tw-nav-inner { flex-wrap: wrap; gap: 16px; }
    .tw-logo { margin-right: auto; }
    .tw-nav-spacer { display: none; }
    .tw-nav-toggle { display: flex; }
    .tw-nav-links, .tw-nav-actions { display: none; flex-basis: 100%; }
    .tw-nav.nav-open .tw-nav-links {
        display: flex; flex-direction: column; gap: 0; order: 3;
    }
    .tw-nav.nav-open .tw-nav-links a {
        display: block; padding: 13px 2px; font-size: 16px;
        border-top: 1px solid var(--tw-slate-700);
    }
    .tw-nav.nav-open .tw-nav-actions {
        display: flex; order: 4; padding-top: 12px;
        border-top: 1px solid var(--tw-slate-700);
    }
    .tw-nav.nav-open .tw-nav-actions .btn { flex: 1; }
}

/* Horizontal-scroll wrapper for wide tables on small screens */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- Phone breakpoint ---------- */
@media (max-width: 560px) {
    .tw-nav-inner { padding: 12px 16px; }

    /* Hero */
    .hero { padding: 56px 16px 64px; }
    .hero-inner { gap: 36px; }
    h1 { font-size: clamp(32px, 9vw, 44px); }
    .hero p.lead { font-size: 16px; margin: 20px 0 28px; }
    .hero-cta { flex-direction: column; }
    .hero-cta .btn { width: 100%; }
    .hero-stats { gap: 24px; margin-top: 32px; padding-top: 24px; flex-wrap: wrap; }
    .hero-stat .num { font-size: 26px; }
    .phone { width: 240px; }

    /* Generic section breathing room */
    .section, section { padding-left: 0; padding-right: 0; }
    .how-grid, .industry-grid, .stat-row { grid-template-columns: 1fr; }

    /* App pages */
    .app-main { padding: 24px 16px; }
    .app-header { flex-wrap: wrap; gap: 12px; }
    .app-header h1 { font-size: 26px; }

    /* Job cards — stack price below as a footer row */
    .job-card { grid-template-columns: 44px 1fr; padding: 16px; gap: 14px; }
    .job-card .meta { flex-wrap: wrap; gap: 6px 14px; }
    .job-card .price {
        grid-column: 1 / -1; text-align: left;
        padding-top: 12px; margin-top: 2px;
        border-top: 1px solid var(--tw-line);
    }
    .job-card .price-suffix { display: inline; }

    /* Forms */
    .form-card { padding: 24px 18px; }
    .step { font-size: 10px; padding: 12px 4px 14px; }
    .step .step-num { margin-right: 6px; }

    /* Messages */
    .bubble { max-width: 88%; }

    /* Analysis */
    .analysis-body { padding: 40px 16px; }

    /* Footer stacks left-aligned */
    .tw-footer-right { margin-left: 0; }
}

/* =========================================================
   TRADEAU — National parent brand layer
   - Surfaces stay near-black/bone (the industrial CORE).
   - The whole BRAND colour (--tw-yellow*) swings per selected state.
   - --tw-brand-ink = legible text colour that sits ON the brand fill.
   - --tw-au-* is a fixed national (green & gold) accent.
   Per-state colours are brightened so they read both on near-black
   surfaces (accent text) and as button fills.
   NOTE: keep the [data-state] hexes in sync with STATES in js/nav.js
   ========================================================= */
:root {
    /* National accent (green & gold) */
    --tw-au-green: #00843D;
    --tw-au-gold: #FFCD00;
    /* Text that sits on the brand fill (buttons, logo, footer). WA = dark. */
    --tw-brand-ink: var(--tw-ink);
    /* State accent mirrors the live brand colour. */
    --tw-state: var(--tw-yellow);
    --tw-state-ink: var(--tw-brand-ink);
}
/* Whole-site retheme: remap the primary brand + on-brand ink per state. */
[data-state="nsw"] { --tw-yellow:#4FC3F7; --tw-yellow-bright:#6FD0FA; --tw-yellow-dark:#1FA7E8; --tw-brand-ink:#0F1115; }
[data-state="vic"] { --tw-yellow:#3B6FD6; --tw-yellow-bright:#5384E0; --tw-yellow-dark:#2C57AE; --tw-brand-ink:#FFFFFF; }
[data-state="qld"] { --tw-yellow:#B5324F; --tw-yellow-bright:#C8485F; --tw-yellow-dark:#94203B; --tw-brand-ink:#FFFFFF; }
[data-state="sa"]  { --tw-yellow:#E4263F; --tw-yellow-bright:#F0455B; --tw-yellow-dark:#BE1530; --tw-brand-ink:#FFFFFF; }
[data-state="tas"] { --tw-yellow:#15A06A; --tw-yellow-bright:#1FB97C; --tw-yellow-dark:#0E7E53; --tw-brand-ink:#FFFFFF; }
[data-state="nt"]  { --tw-yellow:#E89A3C; --tw-yellow-bright:#F2AB54; --tw-yellow-dark:#C97E22; --tw-brand-ink:#0F1115; }
[data-state="act"] { --tw-yellow:#1E84D6; --tw-yellow-bright:#3A97E2; --tw-yellow-dark:#1568AE; --tw-brand-ink:#FFFFFF; }

/* Subtle per-state accent strip under the nav (regional wayfinding cue) */
.tw-nav { box-shadow: inset 0 -3px 0 0 var(--tw-state); }

/* State switcher pill (injected into the nav by js/nav.js) */
.tw-state-pill {
    position: relative;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 12px;
    border: none; border-radius: 100px;
    background: var(--tw-state); color: var(--tw-state-ink);
    font-family: var(--font-display); font-weight: 800;
    font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
    cursor: pointer;
}
.tw-state-pill .caret { font-size: 9px; opacity: 0.8; }
.tw-state-menu {
    position: absolute; top: calc(100% + 10px); right: 0;
    min-width: 240px;
    background: var(--tw-slate-900);
    border: 1px solid var(--tw-slate-700);
    border-radius: 12px; padding: 6px;
    box-shadow: 0 18px 44px rgba(0,0,0,0.45);
    display: none; z-index: 60;
}
.tw-state-pill.open .tw-state-menu { display: block; }
.tw-state-menu .hd {
    font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--tw-text-invert-mute); padding: 8px 10px 6px;
    font-family: var(--font-display); font-weight: 700;
}
.tw-state-menu button {
    display: flex; align-items: center; gap: 11px; width: 100%;
    padding: 9px 10px; border: none; border-radius: 8px;
    background: transparent; cursor: pointer; text-align: left;
    color: var(--tw-text-invert);
    font-family: var(--font-body); font-size: 13px; font-weight: 500;
}
.tw-state-menu button:hover { background: var(--tw-slate-800); }
.tw-state-menu button[aria-current="true"] { background: var(--tw-slate-800); }
.tw-state-menu .dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.tw-state-menu .tag {
    margin-left: auto; font-size: 9px; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase;
    padding: 2px 7px; border-radius: 100px;
}
.tw-state-menu .tag.live { background: rgba(91,201,122,0.18); color: var(--tw-green); }
.tw-state-menu .tag.soon { color: var(--tw-text-invert-mute); border: 1px solid var(--tw-slate-600); }

/* State badge used inline in the Live Jobs header */
.state-tag {
    display: inline-block;
    background: var(--tw-state); color: var(--tw-state-ink);
    padding: 2px 12px; border-radius: 100px;
    font-size: 0.62em; font-weight: 800; letter-spacing: 0.04em;
    vertical-align: middle;
}

/* "Coming soon" banner shown on the jobs feed for not-yet-live states */
.state-soon-note {
    display: none;
    margin-bottom: 20px; padding: 12px 16px;
    background: #fff; border: 1px solid var(--tw-line);
    border-left: 4px solid var(--tw-state);
    border-radius: var(--radius);
    font-size: 13px; color: var(--tw-text-mute);
}
.state-soon-note strong { color: var(--tw-text); }

/* National accent: green & gold cue on the footer (without touching hi-vis) */
.tw-footer {
    border-top: 4px solid;
    border-image: linear-gradient(90deg, var(--tw-au-green) 0 50%, var(--tw-au-gold) 50% 100%) 1;
}
.tw-footer-proud {
    display: inline-flex; align-items: center; gap: 8px;
}
.tw-footer-proud::before {
    content: ''; width: 22px; height: 12px; border-radius: 2px; flex: none;
    background: linear-gradient(90deg, var(--tw-au-green) 0 50%, var(--tw-au-gold) 50% 100%);
}

/* Job map view (Leaflet) */
.job-map {
    display: none;
    height: 540px;
    border: 1px solid var(--tw-line);
    border-radius: var(--radius);
    overflow: hidden;
}
.job-map.show { display: block; }
.job-list.hide { display: none; }
.leaflet-popup-content { font-family: var(--font-body); }
.map-pop-title { font-family: var(--font-display); font-weight: 800; font-size: 14px; margin-bottom: 2px; }
.map-pop-meta { color: var(--tw-text-mute); font-size: 12px; }
.map-pop-rate { font-family: var(--font-display); font-weight: 800; color: var(--tw-text); margin-top: 4px; }
@media (max-width: 560px) { .job-map { height: 420px; } }