/* =========================================================================
   Hark Tech — tracking page styling (May 2026 redesign).
   Extends the public style.css so the tracking page feels native.
   ========================================================================= */

.tracking-page {
    padding: 2rem 0 4rem;
    min-height: 60vh;
}

/* Centered header — tighter than before */
.tracking-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 1.5rem;
}

.tracking-eyebrow {
    display: inline-block;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--color-accent);
    margin-bottom: 0.4rem;
}

.tracking-header h1 {
    font-size: clamp(1.4rem, 1.4vw + 0.9rem, 1.8rem);
    margin: 0 0 0.4rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.tracking-ref {
    color: var(--color-muted);
    font-size: 0.88rem;
    margin: 0;
}

.tracking-ref code {
    background: var(--color-soft-bg);
    padding: 0.08rem 0.4rem;
    border-radius: 4px;
    font-size: 0.82rem;
    color: var(--color-text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* Card chrome — shared across status / timeline / notes / original.
   Uses --color-card so dark mode gets a panel that contrasts with the
   page background. */
.tracking-card {
    background: var(--color-card, var(--color-bg));
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.1rem 1.3rem;
    margin: 0 auto 1rem;
    max-width: 720px;
    box-shadow: var(--shadow);
}

.tracking-card h2 {
    font-size: 0.98rem;
    margin: 0 0 0.7rem;
    color: var(--color-text);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Status headline card — bigger than other cards so it dominates */
.tracking-status-card {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    border-left: 4px solid var(--color-accent);
    padding: 1.2rem 1.4rem;
}

.tracking-status-label {
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-muted);
    font-weight: 700;
}

.tracking-status-value {
    font-family: var(--font-heading);
    font-size: clamp(1.15rem, 0.9vw + 0.9rem, 1.5rem);
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.2;
    margin: 0.1rem 0;
}

.tracking-status-updated {
    font-size: 0.78rem;
    color: var(--color-muted);
}

/* Status colour stripe */
.tracking-status-card.status-new              { border-left-color: #6b7280; }
.tracking-status-card.status-in_progress      { border-left-color: #0066cc; }
.tracking-status-card.status-quoted           { border-left-color: #d97706; }
.tracking-status-card.status-awaiting_item    { border-left-color: #d97706; }
.tracking-status-card.status-in_repair        { border-left-color: #0066cc; }
.tracking-status-card.status-awaiting_payment { border-left-color: #d97706; }
.tracking-status-card.status-dispatched       { border-left-color: #16a34a; }
.tracking-status-card.status-closed           { border-left-color: #16a34a; }
.tracking-status-card.status-cancelled        { border-left-color: #b91c1c; }

/* Timeline */
.tracking-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 2px solid var(--color-border);
}

.tracking-timeline li {
    position: relative;
    padding: 0 0 0.7rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.tracking-timeline li::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 0.4rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-card, var(--color-bg));
}

.tracking-timeline li:last-child { padding-bottom: 0; }

.tracking-timeline-when {
    font-size: 0.75rem;
    color: var(--color-muted);
    font-variant-numeric: tabular-nums;
}

.tracking-timeline-what {
    font-size: 0.92rem;
    color: var(--color-text);
}

/* Customer-visible notes */
.tracking-notes {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tracking-notes li {
    padding: 0.7rem 0.9rem;
    background: var(--color-soft-bg);
    border-radius: 8px;
    margin-bottom: 0.5rem;
    border: 1px solid var(--color-border);
}

.tracking-note-when {
    display: block;
    font-size: 0.74rem;
    color: var(--color-muted);
    margin-bottom: 0.25rem;
    font-variant-numeric: tabular-nums;
}

.tracking-notes p {
    margin: 0;
    white-space: pre-wrap;
    font-size: 0.92rem;
    line-height: 1.5;
}

/* The customer's original description */
.tracking-original blockquote {
    margin: 0.4rem 0 0;
    padding: 0.7rem 1rem;
    background: var(--color-soft-bg);
    border-left: 3px solid var(--color-border);
    white-space: pre-wrap;
    font-size: 0.9rem;
    color: var(--color-text);
    border-radius: 0 8px 8px 0;
}

.tracking-original-meta {
    font-size: 0.78rem;
    margin: 0 0 0.4rem;
}

.tracking-footer-note {
    text-align: center;
    max-width: 640px;
    margin: 1.5rem auto 0;
    font-size: 0.88rem;
    color: var(--color-muted);
}

.tracking-footer-note p { margin: 0 0 0.4rem; }

.tracking-footer-note code {
    background: var(--color-soft-bg);
    padding: 0.08rem 0.4rem;
    border-radius: 4px;
    font-size: 0.8rem;
    color: var(--color-text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* --- Return shipping card --- */
.tracking-return-shipping {
    border-left: 4px solid #16a34a;
    background: var(--color-card, var(--color-bg));
}

.tracking-return-dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.3rem 0.9rem;
    margin: 0;
    font-size: 0.9rem;
}

.tracking-return-dl dt {
    color: var(--color-muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    align-self: center;
}

.tracking-return-dl dd {
    margin: 0;
    font-weight: 600;
}

.tracking-return-dl dd code {
    background: var(--color-soft-bg);
    padding: 0.12rem 0.45rem;
    border-radius: 4px;
    font-size: 0.85rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.tracking-return-btn {
    display: inline-block;
    padding: 0.5rem 0.95rem;
    background: #16a34a;
    color: #fff !important;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.88rem;
}
.tracking-return-btn:hover { background: #15803d; }

/* --- Photo thumbnails inside workshop notes --- */
.tracking-note-photos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.5rem;
}

.tracking-note-photos a {
    display: block;
    line-height: 0;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    width: 88px;
    height: 88px;
}

.tracking-note-photos img {
    width: 88px !important;
    height: 88px !important;
    object-fit: cover;
    transition: transform 0.15s ease;
    max-width: none;
}

.tracking-note-photos a:hover img { transform: scale(1.05); }

@media (max-width: 560px) {
    .tracking-card { padding: 1rem 1.05rem; }
    .tracking-header h1 { font-size: 1.35rem; }
    .tracking-note-photos a,
    .tracking-note-photos img { width: 72px !important; height: 72px !important; }
}

/* --- Lightbox overlay --- */
.tracking-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(5, 5, 16, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 2rem;
    cursor: zoom-out;
}
.tracking-lightbox[hidden] { display: none; }
.tracking-lightbox img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
    cursor: default;
}
.tracking-lightbox-close,
.tracking-lightbox-prev,
.tracking-lightbox-next {
    position: absolute;
    background: rgba(255,255,255,0.08);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.18);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}
.tracking-lightbox-close:hover,
.tracking-lightbox-prev:hover,
.tracking-lightbox-next:hover {
    background: rgba(255,255,255,0.18);
}
.tracking-lightbox-close { top: 1.2rem; right: 1.2rem; }
.tracking-lightbox-prev  { left:  1.2rem; top: 50%; transform: translateY(-50%); }
.tracking-lightbox-next  { right: 1.2rem; top: 50%; transform: translateY(-50%); }
.tracking-lightbox-counter {
    position: absolute;
    bottom: 1.2rem;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,0.75);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    background: rgba(0,0,0,0.4);
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
}
@media (max-width: 560px) {
    .tracking-lightbox { padding: 0.6rem; }
    .tracking-lightbox-prev,
    .tracking-lightbox-next { width: 38px; height: 38px; }
}

/* ---------- Order-history pills (2026-07-20) -------------------------------
   Every past order for the same email, as tappable cards. Colours are the
   ones this stylesheet already uses for status, so the strip reads as part
   of the page rather than bolted on. Note this page is LIGHT themed — an
   earlier pass used white-alpha borders from style.css and they vanished. */
.order-pills { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0; padding: 0; }
.order-pills > li { margin: 0; }
.order-pill {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 190px;
    padding: 0.7rem 0.95rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-card, var(--color-bg));
    text-decoration: none;
    color: inherit;
    transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.order-pill:hover, .order-pill:focus-visible {
    border-color: #0066cc;
    box-shadow: 0 2px 10px rgba(0, 102, 204, .12);
    transform: translateY(-1px);
}
.order-pill-ref   { font-weight: 700; font-size: .92rem; }
.order-pill-state { font-size: .82rem; font-weight: 600; color: #0066cc; }
.order-pill-file  { font-size: .8rem; color: #6b7280; word-break: break-word; }
.order-pill-date  { font-size: .75rem; color: #6b7280; }
/* Live states earn a colour; finished ones stay quiet so they do not shout. */
.order-pill.status-printing .order-pill-state { color: #d97706; }
.order-pill.status-shipped .order-pill-state,
.order-pill.status-delivered .order-pill-state { color: #15803d; }
.order-pill.status-refunded .order-pill-state { color: #b91c1c; }
@media (max-width: 520px) { .order-pill { min-width: 0; width: 100%; } }

/* =========================================================================
   Customer portal theme (August 2026)

   Tracking and email-preference screens are utility pages, but they should
   still feel like the same workshop as the public site. The dark ticket band,
   orange/cyan progress rail and paper cards deliberately reuse theme-v2's
   palette and type rather than introducing a second mini design system.
   ========================================================================= */

/* Detail pages: create a workshop-ticket band without changing the data-heavy
   template structure below it. */
.tracking-page {
    min-height: 68vh;
    padding: 0 0 clamp(3.5rem, 7vw, 6rem);
    /* Customer portal detail pages always use white/paper cards. Keep their
       content on the matching light palette even when a visitor has the
       legacy site-wide dark preference stored in their browser. */
    --color-text: var(--ht-ink);
    --color-muted: #5b6573;
    --color-card: #fff;
    --color-soft-bg: var(--ht-paper-deep);
    --color-border: var(--ht-line);
    background:
        linear-gradient(180deg, transparent 0 17.5rem, var(--ht-paper) 17.5rem),
        radial-gradient(circle at 80% 2rem, rgba(104, 217, 232, 0.12), transparent 19rem),
        linear-gradient(120deg, #080b10, #101722);
}

.tracking-page > .container {
    padding-top: clamp(2.6rem, 5vw, 4.2rem);
}

.tracking-header {
    position: relative;
    max-width: 760px;
    margin-bottom: 2rem;
    color: #fff;
}

.tracking-header::before {
    content: "";
    display: block;
    width: 78px;
    height: 2px;
    margin: 0 auto 1rem;
    background: linear-gradient(90deg, var(--ht-cyan) 0 46px, transparent 46px 52px, var(--ht-orange) 52px);
}

.tracking-header h1 {
    color: #fff;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    letter-spacing: -0.045em;
}

.tracking-eyebrow {
    color: var(--ht-cyan);
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 800;
}

.tracking-ref,
.tracking-header .tracking-ref code {
    color: #aeb9c7;
}

.tracking-header .tracking-ref code {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.tracking-card {
    max-width: 760px;
    padding: clamp(1.15rem, 2.5vw, 1.55rem);
    background: #fff;
    border-color: var(--ht-line);
    border-radius: 6px;
    box-shadow: 0 12px 34px rgba(11, 14, 20, 0.08);
}

.tracking-card h2 {
    color: var(--ht-ink);
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.13em;
}

/* The legacy theme preference script can set data-theme="dark" before the
   shared light customer portal loads. Keep headings readable on white cards. */
html[data-theme="dark"] .tracking-page .tracking-card h2,
html[data-theme="dark"] .tracking-lookup-card h2,
html[data-theme="dark"] .tracking-message-card h2,
html[data-theme="dark"] .unsub-card h1 {
    color: var(--ht-ink);
}

.tracking-status-card {
    position: relative;
    overflow: hidden;
    border-left: 0;
    padding-left: clamp(1.35rem, 3vw, 1.8rem);
}

.tracking-status-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: var(--ht-orange);
}

.tracking-status-card::after {
    content: "LIVE WORKSHOP UPDATE";
    position: absolute;
    top: 1.1rem;
    right: 1.25rem;
    color: #0d7888;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.tracking-status-card.status-new::before { background: #7c8796; }
.tracking-status-card.status-in_progress::before,
.tracking-status-card.status-in_repair::before { background: var(--ht-cyan); }
.tracking-status-card.status-quoted::before,
.tracking-status-card.status-awaiting_item::before,
.tracking-status-card.status-awaiting_payment::before,
.tracking-status-card.status-printing::before { background: var(--ht-orange); }
.tracking-status-card.status-dispatched::before,
.tracking-status-card.status-shipped::before,
.tracking-status-card.status-delivered::before,
.tracking-status-card.status-closed::before { background: #2f9e68; }
.tracking-status-card.status-cancelled::before,
.tracking-status-card.status-refunded::before { background: #c83d4d; }

.tracking-status-value {
    color: var(--ht-ink);
    font-size: clamp(1.35rem, 2.5vw, 1.8rem);
    font-weight: 750;
    letter-spacing: -0.035em;
}

.tracking-timeline {
    border-left-color: #ccd5de;
}

.tracking-timeline li::before {
    background: var(--ht-cyan);
    box-shadow: 0 0 0 3px #fff;
}

.tracking-return-btn {
    background: var(--ht-orange);
    border-color: var(--ht-orange);
    border-radius: 5px;
    color: var(--ht-night);
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 800;
}

.tracking-notes li,
.tracking-original blockquote {
    background: var(--ht-paper-deep);
    border-color: var(--ht-line);
    border-radius: 5px;
}

.tracking-footer-note {
    max-width: 760px;
}

.order-pill {
    background: #fff;
    border-color: var(--ht-line);
    border-radius: 5px;
}

.order-pill:hover,
.order-pill:focus-visible {
    border-color: var(--ht-orange-dark);
    box-shadow: 0 7px 18px rgba(196, 81, 0, 0.1);
}

/* Lookup / missing-link pages. */
.tracking-lookup-page {
    min-height: 68vh;
    background: var(--ht-paper);
}

.tracking-entry-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(3.2rem, 6vw, 5.2rem) 0 clamp(5.2rem, 8vw, 6.5rem);
    background:
        linear-gradient(rgba(104, 217, 232, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(104, 217, 232, 0.045) 1px, transparent 1px),
        radial-gradient(circle at 78% 18%, rgba(104, 217, 232, 0.14), transparent 27rem),
        linear-gradient(120deg, #080b10, #101722);
    background-size: 44px 44px, 44px 44px, auto, auto;
    color: #fff;
}

.tracking-entry-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--ht-cyan) 0 58%, var(--ht-orange) 58% 66%, transparent 66%);
}

.tracking-entry-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 0.7fr);
    gap: clamp(2.5rem, 7vw, 7rem);
    align-items: end;
}

.tracking-entry-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0 0 1rem;
    color: var(--ht-cyan);
    font-size: 0.73rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.tracking-entry-eyebrow::before {
    content: "";
    width: 36px;
    height: 2px;
    background: var(--ht-cyan);
}

.tracking-entry-hero h1 {
    max-width: 720px;
    margin: 0 0 1rem;
    color: #fff;
    font-size: clamp(2.6rem, 5vw, 4rem);
    line-height: 0.98;
    letter-spacing: -0.06em;
}

.tracking-entry-lead {
    max-width: 610px;
    margin: 0;
    color: #b9c3d0;
    font-size: clamp(1.02rem, 2vw, 1.22rem);
}

.tracking-route {
    position: relative;
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 1.25rem 1.35rem;
    list-style: none;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
}

.tracking-route::before {
    content: "";
    position: absolute;
    top: 1.9rem;
    bottom: 1.9rem;
    left: 1.7rem;
    width: 1px;
    background: linear-gradient(var(--ht-orange), var(--ht-cyan));
}

.tracking-route li {
    position: relative;
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 0.75rem;
    align-items: center;
    color: #c9d2dc;
    font-size: 0.86rem;
}

.tracking-route span {
    position: relative;
    z-index: 1;
    width: 10px;
    height: 10px;
    margin-left: 5px;
    border: 2px solid var(--ht-cyan);
    border-radius: 50%;
    background: var(--ht-night-soft);
    box-shadow: 0 0 0 4px var(--ht-night-soft);
}

.tracking-route li:first-child span { border-color: var(--ht-orange); }
.tracking-route strong { display: block; color: #fff; font-size: 0.9rem; }

.tracking-entry-body {
    position: relative;
    z-index: 2;
    margin-top: -3.5rem;
    padding-bottom: clamp(3.5rem, 7vw, 6rem);
}

.tracking-lookup-card,
.tracking-message-card {
    width: min(680px, calc(100% - 2rem));
    margin: 0 auto;
    padding: clamp(1.5rem, 4vw, 2.4rem);
    background: #fff;
    border: 1px solid var(--ht-line);
    border-radius: 7px;
    box-shadow: 0 24px 55px rgba(11, 14, 20, 0.13);
}

.tracking-lookup-card h2,
.tracking-message-card h2 {
    margin: 0 0 0.4rem;
    font-size: clamp(1.35rem, 3vw, 1.8rem);
}

.tracking-card-intro {
    margin: 0 0 1.55rem;
    color: var(--ht-muted);
}

.tracking-lookup-form {
    display: grid;
    gap: 1rem;
}

.tracking-field label {
    display: block;
    margin-bottom: 0.38rem;
    color: var(--ht-ink);
    font-size: 0.85rem;
    font-weight: 750;
}

.tracking-field input {
    width: 100%;
    min-height: 50px;
    padding: 0.8rem 0.9rem;
    background: #fff;
    border: 1px solid #cfc9be;
    border-radius: 5px;
    color: var(--ht-ink);
    font: inherit;
}

.tracking-submit {
    width: 100%;
    min-height: 50px;
    margin-top: 0.25rem;
}

.tracking-alert {
    margin: 0 0 1.25rem;
    padding: 0.85rem 1rem;
    background: #fff2f1;
    border: 1px solid #e6b8b3;
    border-left: 4px solid #b9382f;
    border-radius: 5px;
    color: #7f2b25;
}

.tracking-results {
    margin-top: 2rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--ht-line);
}

.tracking-results h2 { font-size: 1.1rem; }
.tracking-results-list { display: grid; gap: 0.65rem; margin: 0; padding: 0; list-style: none; }

.tracking-result-link {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.3rem 1rem;
    padding: 0.95rem 1rem;
    background: var(--ht-paper);
    border: 1px solid var(--ht-line);
    border-radius: 5px;
    color: var(--ht-ink);
    text-decoration: none;
}

.tracking-result-link:hover { border-color: var(--ht-orange-dark); }
.tracking-result-ref { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 800; }
.tracking-result-kind { color: var(--ht-muted); font-size: 0.83rem; }
.tracking-result-status { grid-column: 1 / -1; color: #0d7888; font-size: 0.87rem; font-weight: 750; }

.tracking-help-note {
    margin: 1.4rem 0 0;
    padding: 1rem 0 0;
    border-top: 1px solid var(--ht-line);
    color: var(--ht-muted);
    font-size: 0.88rem;
}

.tracking-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.2rem;
}

.tracking-message-card { text-align: center; }

.tracking-message-mark {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin: 0 auto 1.1rem;
    background: rgba(104, 217, 232, 0.1);
    border: 1px solid rgba(13, 120, 136, 0.28);
    border-radius: 50%;
    color: #0d7888;
    font-family: "IBM Plex Sans", system-ui, sans-serif;
    font-size: 1.4rem;
    font-weight: 800;
}

.tracking-message-card .tracking-card-actions { justify-content: center; }

/* Unsubscribe is intentionally distraction-free, but uses the same customer
   portal shell rather than a legacy blue modal. */
.customer-utility-page { min-height: 100vh; background: var(--ht-paper); }

.utility-brandbar {
    padding: 1rem 0;
    background: var(--ht-night);
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.utility-brandbar .container { display: flex; justify-content: space-between; align-items: center; }
.utility-brandbar .utility-context { color: #8793a2; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; }

.unsub-wrap {
    width: min(620px, calc(100% - 2rem));
    margin: clamp(3rem, 9vh, 7rem) auto;
}

.unsub-card {
    position: relative;
    overflow: hidden;
    padding: clamp(1.7rem, 5vw, 3rem);
    background: #fff;
    border: 1px solid var(--ht-line);
    border-radius: 7px;
    box-shadow: 0 18px 46px rgba(11, 14, 20, 0.1);
}

.unsub-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, var(--ht-cyan), var(--ht-orange));
}

.unsub-kicker {
    margin: 0 0 0.75rem;
    color: #0d7888;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.unsub-card h1 { margin: 0 0 0.8rem; font-size: clamp(1.7rem, 4vw, 2.35rem); }
.unsub-card p { margin: 0 0 1.35rem; color: var(--ht-muted); }
.unsub-card form { margin: 0; }
.unsub-card .btn-unsub { min-height: 48px; padding: 0.75rem 1.2rem; }
.unsub-card .home-link { display: inline-block; margin-top: 1.25rem; color: #174f91; font-size: 0.9rem; }
.utility-footer { padding: 0 1rem 2rem; color: var(--ht-muted); font-size: 0.78rem; text-align: center; }

@media (max-width: 820px) {
    .tracking-entry-grid { grid-template-columns: 1fr; }
    .tracking-route { max-width: 520px; }
}

@media (max-width: 560px) {
    .tracking-page {
        background:
            linear-gradient(180deg, transparent 0 16.5rem, var(--ht-paper) 16.5rem),
            linear-gradient(120deg, #080b10, #101722);
    }
    .tracking-page > .container { padding-top: 2.5rem; }
    .tracking-header { margin-bottom: 1.6rem; }
    .tracking-status-card::after { display: none; }
    .tracking-entry-hero { padding-block: 3.2rem 6rem; }
    .tracking-entry-hero h1 { font-size: clamp(2.35rem, 13vw, 3.4rem); }
    .tracking-route { display: none; }
    .tracking-entry-body { margin-top: -3rem; }
    .tracking-lookup-card,
    .tracking-message-card { width: calc(100% - 1.5rem); }
    .tracking-card-actions { flex-direction: column; }
    .tracking-card-actions .btn { width: 100%; text-align: center; }
    .utility-brandbar .utility-context { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .order-pill,
    .tracking-result-link { transition: none; }
}