/* ==========================================================================
   TributePoint Design System  (tributepoint-brand.css)
   --------------------------------------------------------------------------
   The single source of truth for the TributePoint brand language, extracted
   from the homepage (index.html). Hosting portal, the website-ordering flow,
   and the portal login all consume this file so every page shares one visual
   language: deep navy authority, sparing gold dignity, cream calm surfaces,
   Playfair for emotional headings, Inter for everything practical.

   PRESENTATION ONLY. No page logic depends on this file.

   How it works
   ------------
   1. Canonical tokens live under the --tp-* namespace.
   2. Legacy variable names already used across the hosting pages
      (--navy, --gold, --line, --light-gray, --border-color, --muted-text ...)
      are aliased to the canonical tokens, so existing markup and inline
      styles inherit the new palette with zero page edits.
   3. Component classes are authored to the SAME class names the pages
      already use (.btn, .card, .badge, .alert, .table, inputs, nav ...),
      and this file is loaded LAST in each layout so it wins the cascade.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
    /* Brand core (verbatim from homepage index.html) */
    --tp-navy:      #1a1146;
    --tp-navy-2:    #2a1f6e;
    --tp-navy-3:    #3b2f80;
    --tp-navy-deep: #120c33;
    --tp-gold:      #c9a84c;
    --tp-gold-l:    #e2c97d;
    --tp-gold-d:    #b2913b;
    --tp-gold-bg:   rgba(201,168,76,.06);
    --tp-gold-line: rgba(201,168,76,.15);
    --tp-cream:     #faf8f4;
    --tp-surface:   #f7f8fc;
    --tp-surface-2: #eef1f7;
    --tp-text:      #1e1e2f;
    --tp-muted:     #6b6b7b;
    --tp-border:    rgba(201,168,76,.15);
    --tp-border-2:  #ece6da;
    --tp-white:     #ffffff;

    /* Semantic status (calm, not flat-UI rainbow) */
    --tp-success:    #2e7d5b;
    --tp-success-bg: #eaf5ef;
    --tp-warning:    #9a7322;
    --tp-warning-bg: #fdf6e7;
    --tp-danger:     #a83b3b;
    --tp-danger-bg:  #fbeeee;
    --tp-info:       #3b2f80;
    --tp-info-bg:    #eef0fb;

    /* Radius */
    --tp-radius-sm: 10px;
    --tp-radius:    16px;
    --tp-radius-lg: 24px;
    --tp-radius-pill: 999px;

    /* Shadows (soft, neutral — never coloured) */
    --tp-shadow-sm: 0 1px 2px rgba(26,17,70,.05);
    --tp-shadow-md: 0 10px 30px rgba(26,17,70,.07);
    --tp-shadow-lg: 0 22px 55px rgba(26,17,70,.10);
    --tp-shadow-gold: 0 10px 24px rgba(201,168,76,.28);

    /* Motion */
    --tp-ease: cubic-bezier(.22,.61,.36,1);
    --tp-dur:  .25s;
    --tp-dur-slow: .45s;

    /* Type */
    --tp-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --tp-font-head: 'Playfair Display', Georgia, 'Times New Roman', serif;

    /* ----- Legacy aliases (so existing pages inherit the new palette) ----- */
    --navy:         var(--tp-navy);
    --navy-2:       var(--tp-navy-2);
    --navy-dark:    var(--tp-navy-deep);
    --navy-light:   var(--tp-navy-3);
    --gold:         var(--tp-gold);
    --gold-l:       var(--tp-gold-l);
    --cream:        var(--tp-cream);
    --soft:         var(--tp-gold-bg);
    --surface:      var(--tp-surface);
    --white:        var(--tp-white);
    --ink:          var(--tp-text);
    --dark-text:    var(--tp-text);
    --muted:        var(--tp-muted);
    --muted-text:   var(--tp-muted);
    --line:         var(--tp-border);
    --border-color: var(--tp-border);
    --light-gray:   var(--tp-surface);
    --medium-gray:  var(--tp-surface-2);
    --shadow-sm:    var(--tp-shadow-sm);
    --shadow-md:    var(--tp-shadow-md);
    --shadow-lg:    var(--tp-shadow-lg);
    --radius:       var(--tp-radius);
    --radius-lg:    var(--tp-radius-lg);
    --green:        var(--tp-success);
    --red:          var(--tp-danger);
    --danger:       var(--tp-danger);
    --blue:         var(--tp-navy-3);
    --alert-bg:     var(--tp-warning-bg);
    --alert-text:   var(--tp-warning);
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
body {
    font-family: var(--tp-font-body);
    color: var(--tp-text);
    background: var(--tp-cream);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
a { color: var(--tp-navy); transition: color var(--tp-dur) var(--tp-ease); }
a:hover { color: var(--tp-gold-d); }

h1, h2, h3, h4 {
    font-family: var(--tp-font-head);
    color: var(--tp-navy);
    font-weight: 600;
    letter-spacing: .1px;
    line-height: 1.2;
}
h1 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
h2 { font-size: clamp(1.45rem, 2.4vw, 1.9rem); }
h3 { font-size: 1.18rem; }
h4 { font-size: 1rem; }
p  { line-height: 1.7; }
.muted, .text-muted { color: var(--tp-muted); }

/* --------------------------------------------------------------------------
   3. TYPOGRAPHIC ACCENTS  (gold label -> Playfair title -> gold divider)
   -------------------------------------------------------------------------- */
.eyebrow, .section-label, .kicker {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--tp-font-body);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 700;
    font-size: .74rem;
    color: var(--tp-gold-d);
}
.eyebrow i, .section-label i { color: var(--tp-gold); }
.section-title { font-family: var(--tp-font-head); color: var(--tp-navy); }
.section-sub { color: var(--tp-muted); }
.gold-divider, hr.gold-divider {
    border: 0; height: 2px; width: 64px; margin: 18px auto;
    background: linear-gradient(90deg, transparent, var(--tp-gold), transparent);
}

/* --------------------------------------------------------------------------
   4. BUTTONS  (gold pill primary, calm secondary)
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: var(--tp-font-body);
    font-weight: 600;
    font-size: .95rem;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1;
    padding: 13px 28px;
    border: 1px solid transparent;
    border-radius: var(--tp-radius-pill);
    cursor: pointer;
    text-decoration: none;
    transition: transform var(--tp-dur) var(--tp-ease),
                box-shadow var(--tp-dur) var(--tp-ease),
                background var(--tp-dur) var(--tp-ease),
                color var(--tp-dur) var(--tp-ease);
    background: linear-gradient(135deg, var(--tp-gold-l), var(--tp-gold));
    color: var(--tp-navy);
    box-shadow: var(--tp-shadow-gold);
}
.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(201,168,76,.34);
    color: var(--tp-navy);
    text-decoration: none;
}
.btn:active { transform: translateY(0); }
.btn.btn-primary { background: var(--tp-navy); color: #fff; box-shadow: var(--tp-shadow-md); }
.btn.btn-primary:hover { background: var(--tp-navy-2); color: #fff; }
.btn.btn-dark { background: var(--tp-navy); color: #fff; box-shadow: var(--tp-shadow-md); }
.btn.btn-secondary, .btn.btn-default {
    background: #fff; color: var(--tp-navy);
    border: 1px solid var(--tp-border-2); box-shadow: var(--tp-shadow-sm);
}
.btn.btn-secondary:hover, .btn.btn-default:hover {
    background: var(--tp-surface); color: var(--tp-navy); border-color: var(--tp-gold-line);
}
.btn.btn-success { background: var(--tp-success); color: #fff; box-shadow: var(--tp-shadow-md); }
.btn.btn-success:hover { background: #276b4d; color: #fff; }
.btn.btn-danger { background: var(--tp-danger); color: #fff; box-shadow: var(--tp-shadow-md); }
.btn.btn-danger:hover { background: #8f3030; color: #fff; }
.btn.btn-sm { padding: 9px 18px; font-size: .85rem; }
.btn:disabled, .btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

/* --------------------------------------------------------------------------
   5. CARDS
   -------------------------------------------------------------------------- */
.card {
    background: #fff;
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius);
    box-shadow: var(--tp-shadow-md);
    overflow: hidden;
    transition: transform var(--tp-dur) var(--tp-ease), box-shadow var(--tp-dur) var(--tp-ease);
}
.card:hover { box-shadow: var(--tp-shadow-lg); }
.card.selected, .card.review-card { border: 1px solid var(--tp-gold); }
.card.review-card { border-top: 3px solid var(--tp-gold); }
.card-header {
    background: var(--tp-surface);
    border-bottom: 1px solid var(--tp-border);
    padding: 18px 28px;
    border-radius: var(--tp-radius) var(--tp-radius) 0 0;
}
.card-header h2, .card-header h3 {
    margin: 0; font-family: var(--tp-font-head);
    text-transform: none; letter-spacing: .1px; color: var(--tp-navy);
}
.card-header h2 { font-size: 1.15rem; }
.card-header h2 i, .card-header h3 i { margin-right: 8px; color: var(--tp-gold); }
.card-body { padding: 28px; }
.card-footer {
    background: var(--tp-surface); border-top: 1px solid var(--tp-border);
    padding: 18px 28px; text-align: right;
}

/* Hero card — navy gradient, gold glow */
.hero-card {
    background: linear-gradient(135deg, var(--tp-navy), var(--tp-navy-3));
    color: #fff; border: 0; position: relative; overflow: hidden;
    padding: 44px 36px; border-radius: var(--tp-radius-lg);
}
.hero-card:before {
    content: ''; position: absolute; right: -120px; top: -120px;
    width: 340px; height: 340px;
    background: radial-gradient(circle, rgba(201,168,76,.16), transparent 70%);
    border-radius: 50%; pointer-events: none;
}
.hero-card h1, .hero-card h2 { color: #fff; }
.hero-card .muted { color: rgba(255,255,255,.85); }
.hero-card > * { position: relative; z-index: 1; }

/* Task / attention card */
.task-card { border: 1px solid var(--tp-gold-line); border-left: 4px solid var(--tp-gold); background: var(--tp-gold-bg); }
.task-card h2 { color: var(--tp-navy); }

/* Stat tiles */
.stat-box {
    background: #fff; border: 1px solid var(--tp-border); border-top: 3px solid var(--tp-gold);
    border-radius: var(--tp-radius); padding: 24px; text-align: center; box-shadow: var(--tp-shadow-md);
}
.stat-box-number, .stat { font-family: var(--tp-font-head); font-size: 1.9rem; font-weight: 600; color: var(--tp-navy); }
.stat-box-label { font-size: .72rem; color: var(--tp-muted); text-transform: uppercase; letter-spacing: .12em; font-weight: 700; }

/* --------------------------------------------------------------------------
   6. FORMS & INPUTS
   -------------------------------------------------------------------------- */
label, .form-group label {
    display: block; margin-bottom: 7px;
    font-family: var(--tp-font-body); font-weight: 600; font-size: .9rem;
    text-transform: none; letter-spacing: 0; color: var(--tp-navy);
}
input[type=text], input[type=email], input[type=tel], input[type=password],
input[type=number], input[type=date], input[type=url], input[type=search],
textarea, select, .form-control {
    width: 100%; padding: 13px 15px;
    border: 1px solid var(--tp-border-2); border-radius: var(--tp-radius-sm);
    font-family: var(--tp-font-body); font-size: .95rem; color: var(--tp-text);
    background: #fff; transition: border-color var(--tp-dur) var(--tp-ease), box-shadow var(--tp-dur) var(--tp-ease);
}
input:focus, textarea:focus, select:focus, .form-control:focus {
    outline: 0; border-color: var(--tp-gold);
    box-shadow: 0 0 0 3px rgba(201,168,76,.18);
}
::placeholder { color: #aeb0bd; }
textarea { min-height: 120px; }
.form-group { margin-bottom: 20px; }

/* --------------------------------------------------------------------------
   7. TABLES
   -------------------------------------------------------------------------- */
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .9rem; }
.table thead th {
    background: var(--tp-surface); border-bottom: 1px solid var(--tp-border);
    padding: 13px 14px; text-align: left;
    font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em;
    color: var(--tp-navy);
}
.table tbody td { border-bottom: 1px solid var(--tp-border-2); padding: 13px 14px; }
.table tbody tr:hover { background: var(--tp-surface); }

/* --------------------------------------------------------------------------
   8. BADGES
   -------------------------------------------------------------------------- */
.badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 12px; border-radius: var(--tp-radius-pill);
    font-family: var(--tp-font-body); font-size: .72rem; font-weight: 700;
    text-transform: none; letter-spacing: .02em;
    background: var(--tp-surface-2); color: var(--tp-navy); border: 1px solid var(--tp-border-2);
}
.badge.ok      { background: var(--tp-success-bg); color: var(--tp-success); border-color: rgba(46,125,91,.25); }
.badge.warn    { background: var(--tp-warning-bg); color: var(--tp-warning); border-color: rgba(154,115,34,.25); }
.badge.bad     { background: var(--tp-danger-bg);  color: var(--tp-danger);  border-color: rgba(168,59,59,.25); }
.badge.info    { background: var(--tp-info-bg);    color: var(--tp-info);    border-color: rgba(59,47,128,.22); }

/* --------------------------------------------------------------------------
   9. ALERTS & NOTICES
   -------------------------------------------------------------------------- */
.alert {
    display: flex; align-items: flex-start; gap: 11px;
    padding: 15px 18px; margin-bottom: 20px;
    border-radius: var(--tp-radius-sm); border: 1px solid var(--tp-border-2);
    border-left: 4px solid var(--tp-gold); background: #fff; color: var(--tp-text);
    font-size: .9rem; line-height: 1.55;
}
.alert i { margin-top: 2px; flex-shrink: 0; }
.alert-success { background: var(--tp-success-bg); border-left-color: var(--tp-success); color: #235c43; }
.alert-danger  { background: var(--tp-danger-bg);  border-left-color: var(--tp-danger);  color: #7e2c2c; }
.alert-warning { background: var(--tp-warning-bg); border-left-color: var(--tp-gold);    color: var(--tp-warning); }
.alert-info    { background: var(--tp-info-bg);    border-left-color: var(--tp-navy-3);   color: var(--tp-info); }
.notice {
    padding: 15px 18px; margin-bottom: 20px; border-radius: var(--tp-radius-sm);
    border-left: 4px solid var(--tp-gold); background: var(--tp-gold-bg);
    color: var(--tp-text); font-size: .9rem; line-height: 1.55;
}

/* --------------------------------------------------------------------------
   10. EMPTY STATES  (new shared component)
   -------------------------------------------------------------------------- */
.empty-state {
    text-align: center; padding: 56px 28px; color: var(--tp-muted);
    background: var(--tp-surface); border: 1px dashed var(--tp-border-2); border-radius: var(--tp-radius);
}
.empty-state i { font-size: 44px; color: var(--tp-gold); opacity: .8; display: block; margin-bottom: 14px; }
.empty-state h3 { color: var(--tp-navy); margin: 0 0 8px; }
.empty-state p { margin: 0 auto; max-width: 420px; }

/* --------------------------------------------------------------------------
   11. INFO LISTS / DNS / PILLS / TRACKERS / STEPPERS
   -------------------------------------------------------------------------- */
.info-list { display: grid; gap: 18px; margin-top: 18px; }
.info-list > div, .info-list-item { border-left: 3px solid var(--tp-gold); padding-left: 16px; }
.info-list span:first-child, .info-list-label {
    display: block; font-size: .68rem; color: var(--tp-muted);
    text-transform: uppercase; letter-spacing: .1em; font-weight: 700; margin-bottom: 5px;
}
.info-list strong, .info-list-value { display: block; font-size: 1rem; color: var(--tp-navy); font-weight: 600; }
/* A status badge inside an info-list value must stay a pill, not inherit the
   uppercase full-width label styling from `.info-list span:first-child`. */
.info-list strong .badge { display: inline-flex; width: auto; font-size: .72rem; text-transform: none; letter-spacing: .02em; margin: 0; }

.dns-record { background: var(--tp-surface); border: 1px solid var(--tp-border); border-radius: var(--tp-radius-sm); padding: 16px; font-size: .85rem; }
.dns-record span { display: block; font-weight: 600; margin-bottom: 9px; color: var(--tp-navy); }
.dns-record code {
    display: block; background: var(--tp-navy); color: var(--tp-gold-l);
    padding: 7px 11px; margin-bottom: 6px; border-radius: 7px;
    font-family: 'Courier New', monospace; word-break: break-all; font-size: .8rem;
}

.pill {
    display: inline-flex; width: max-content; align-items: center;
    border: 1px solid var(--tp-gold-line); border-radius: var(--tp-radius-pill);
    padding: 6px 12px; background: var(--tp-gold-bg); color: var(--tp-gold-d);
    font-size: .78rem; font-weight: 700;
}

.tracker, .track-item { }
.track-item {
    display: flex; gap: 12px; align-items: flex-start;
    background: #fff; border: 1px solid var(--tp-border); border-radius: var(--tp-radius-sm); padding: 16px;
}
.track-dot { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--tp-surface-2); color: var(--tp-muted); flex: 0 0 auto; }
.track-item.done .track-dot { background: var(--tp-success); color: #fff; }
.track-item.current .track-dot { background: var(--tp-gold); color: var(--tp-navy); }

.progress-step, .step {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    border: 1px solid var(--tp-border-2); border-radius: var(--tp-radius-pill);
    padding: 9px 12px; color: var(--tp-muted); font-weight: 600; font-size: .8rem; white-space: nowrap;
}
.progress-step span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--tp-surface-2); color: var(--tp-muted); font-size: .72rem; }
.progress-step.done, .step.done { background: var(--tp-success-bg); border-color: rgba(46,125,91,.3); color: var(--tp-success); }
.progress-step.done span { background: var(--tp-success); color: #fff; }
.progress-step.current, .step.current { background: var(--tp-gold-bg); border-color: var(--tp-gold); color: var(--tp-gold-d); }
.progress-step.current span { background: var(--tp-gold); color: var(--tp-navy); }

/* --------------------------------------------------------------------------
   12. NAVIGATION  (visual only — structure left to the layout engines)
   -------------------------------------------------------------------------- */
.top { background: linear-gradient(135deg, var(--tp-navy), var(--tp-navy-deep)); color: #fff; }
.brand { font-family: var(--tp-font-head); font-weight: 600; letter-spacing: .2px; }
.brand span { color: var(--tp-gold); }
.nav a { color: rgba(255,255,255,.82); font-weight: 600; border-radius: var(--tp-radius-pill); transition: background var(--tp-dur) var(--tp-ease), color var(--tp-dur) var(--tp-ease); }
.nav a.active, .nav a:hover { background: rgba(201,168,76,.18); color: #fff; text-decoration: none; }

/* Portal sidebar (keeps its existing grid; only the look changes) */
.side { background: #fff; border: 1px solid var(--tp-border); border-radius: var(--tp-radius); box-shadow: var(--tp-shadow-md); }
.side a { color: var(--tp-muted); border-left: 3px solid transparent; font-weight: 500; transition: background var(--tp-dur) var(--tp-ease), color var(--tp-dur) var(--tp-ease); }
.side a i { color: var(--tp-gold); }
.side a:hover { background: var(--tp-surface); color: var(--tp-navy); text-decoration: none; }
.side a.active { background: var(--tp-gold-bg); border-left-color: var(--tp-gold); color: var(--tp-navy); font-weight: 600; }
.logout { color: #fff; background: rgba(255,255,255,.12); border-radius: var(--tp-radius-pill); transition: background var(--tp-dur) var(--tp-ease); }
.logout:hover { background: rgba(255,255,255,.22); color: #fff; text-decoration: none; }

/* --------------------------------------------------------------------------
   12b. PORTAL SHELL  (homepage-style top-nav portal — replaces sidebar admin)
        Markup emitted by hp_layout_start()/hp_layout_end().
   -------------------------------------------------------------------------- */
.hp-nav {
    position: sticky; top: 0; z-index: 900;
    background: linear-gradient(135deg, var(--tp-navy), var(--tp-navy-deep));
    color: #fff; box-shadow: 0 6px 26px rgba(26,17,70,.20);
}
.hp-nav-inner { display: flex; align-items: center; gap: 22px; min-height: 74px; padding-top: 12px; padding-bottom: 12px; }
.hp-brand { display: flex; align-items: center; gap: 11px; flex-shrink: 0; text-decoration: none; }
.hp-brand:hover { text-decoration: none; }
.hp-brand img { width: 42px; height: 42px; border-radius: 10px; box-shadow: 0 4px 14px rgba(0,0,0,.22); }
.hp-brand-text { line-height: 1.05; }
.hp-brand-name { font-family: var(--tp-font-head); font-weight: 600; font-size: 1.25rem; color: #fff; }
.hp-brand-name span { color: var(--tp-gold); }
.hp-brand small { display: block; font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.6); font-weight: 700; margin-top: 2px; }

.hp-nav-links { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.hp-nav-links a {
    display: inline-flex; align-items: center; gap: 7px;
    color: rgba(255,255,255,.78); font-weight: 600; font-size: .92rem;
    padding: 9px 15px; border-radius: var(--tp-radius-pill); text-decoration: none;
    transition: background var(--tp-dur) var(--tp-ease), color var(--tp-dur) var(--tp-ease);
}
.hp-nav-links a i { font-size: 17px; color: var(--tp-gold); opacity: .85; }
.hp-nav-links a:hover { background: rgba(255,255,255,.09); color: #fff; text-decoration: none; }
.hp-nav-links a.active { background: rgba(201,168,76,.20); color: #fff; }
.hp-nav-links a.active i { opacity: 1; }

.hp-nav-right { margin-left: auto; display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.hp-company { display: inline-flex; align-items: center; gap: 7px; font-size: .82rem; color: rgba(255,255,255,.82); font-weight: 500; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-company i { color: var(--tp-gold); flex-shrink: 0; }
.hp-logout {
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.20);
    padding: 9px 16px; border-radius: var(--tp-radius-pill); font-weight: 600; font-size: .85rem;
    text-decoration: none; transition: background var(--tp-dur) var(--tp-ease);
}
.hp-logout:hover { background: rgba(255,255,255,.22); color: #fff; text-decoration: none; }

/* Mobile menu (CSS-only checkbox toggle — no JS) */
.hp-nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.hp-nav-burger { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.20); color: #fff; font-size: 24px; cursor: pointer; flex-shrink: 0; }
.hp-nav-burger:hover { background: rgba(255,255,255,.18); }

/* Page header band */
.hp-pagehead { background: var(--tp-cream); border-bottom: 1px solid var(--tp-border); }
.hp-pagehead .wrap { padding-top: 30px; padding-bottom: 24px; }
.hp-breadcrumb { display: inline-flex; align-items: center; gap: 8px; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tp-gold-d); }
.hp-breadcrumb i { font-size: 15px; color: var(--tp-gold); }
.hp-pagehead h1 { margin: 9px 0 0; font-family: var(--tp-font-head); color: var(--tp-navy); font-size: clamp(1.55rem, 2.6vw, 2.1rem); }

/* Quick-link tiles (dashboard shortcuts) */
.quick-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.quick-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center;
    padding: 22px 14px; background: #fff; border: 1px solid var(--tp-border); border-radius: var(--tp-radius);
    color: var(--tp-navy); font-weight: 600; text-decoration: none; box-shadow: var(--tp-shadow-sm);
    transition: transform var(--tp-dur) var(--tp-ease), box-shadow var(--tp-dur) var(--tp-ease), border-color var(--tp-dur) var(--tp-ease);
}
.quick-tile i { font-size: 26px; color: var(--tp-gold); }
.quick-tile:hover { transform: translateY(-3px); box-shadow: var(--tp-shadow-md); border-color: var(--tp-gold-line); color: var(--tp-navy); text-decoration: none; }
@media (max-width: 768px) { .quick-tiles { grid-template-columns: repeat(2, 1fr); } }

/* Content area */
.hp-main { background: var(--tp-cream); min-height: 58vh; padding: 34px 0 60px; }

/* Footer */
.hp-footer { background: var(--tp-navy-deep); color: rgba(255,255,255,.7); padding: 26px 0; font-size: .85rem; }
.hp-footer .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.hp-footer a { color: var(--tp-gold-l); }
.hp-footer a:hover { color: var(--tp-gold); }

@media (max-width: 880px) {
    .hp-nav-inner { flex-wrap: wrap; gap: 12px; min-height: 60px; }
    .hp-nav-burger { display: inline-flex; order: 2; margin-left: auto; }
    /* Collapsed bar shows only brand + burger; links AND Sign Out live in the menu */
    .hp-nav-links { order: 3; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 2px; display: none; padding: 6px 0 4px; }
    .hp-nav-toggle:checked ~ .hp-nav-links { display: flex; }
    .hp-nav-links a { padding: 13px 14px; border-radius: 12px; font-size: 1rem; }
    .hp-nav-links a i { font-size: 19px; }
    .hp-nav-right { order: 4; flex-basis: 100%; gap: 10px; display: none; padding-top: 12px; margin-top: 4px; border-top: 1px solid rgba(255,255,255,.12); }
    .hp-nav-toggle:checked ~ .hp-nav-right { display: flex; }
    .hp-company { display: none; }
    .hp-logout { flex: 1; justify-content: center; padding: 13px 16px; }
    .hp-pagehead .wrap { padding-top: 24px; padding-bottom: 20px; }
    .hp-main { padding: 24px 0 44px; }
    /* Pre-payment status banner stacks so its action never overflows */
    .hp-status-banner-row { flex-direction: column; align-items: stretch !important; gap: 12px !important; }
    .hp-status-banner-row .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   13. FOCUS STATES  (accessibility)
   -------------------------------------------------------------------------- */
a:focus-visible, .btn:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
.side a:focus-visible, .nav a:focus-visible {
    outline: 2px solid var(--tp-gold);
    outline-offset: 2px;
    border-radius: 6px;
}

/* --------------------------------------------------------------------------
   14. MOTION  (gentle, respectful — honours reduced-motion)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
    .btn:hover, .card:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   15. MOBILE SPACING
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .card-body { padding: 22px; }
    .hero-card { padding: 30px 22px; }
    .btn { padding: 12px 22px; }
}