/* Support page layout - first used by the Shipping Policy and FAQs (Oct 2026),
   for the other support pages to move onto in later phases.

   Tokens are docs/design-notes.md's, unchanged. Gold and rose are background
   colours only (2.12:1 as text on white), so gold appears as rules, pills and
   markers with ink on top, never as text. Everything is scoped under .sp so the
   shared header, nav and footer (support_V3.css) are untouched. */

.sp {
    --ink: #15140f;
    --ink-2: #3d3a32;
    --muted: #6e6b62;
    --faint: #94918a;
    --page: #ffffff;
    --line: #e4e2dc;
    --line-strong: #cecac1;
    --sunk: #f7f6f3;
    --gold: #d4ac64;
    --rose: #b76e79;
    --font-display: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', sans-serif;
    --radius: 4px;
    --radius-sm: 2px;

    background: var(--page);
    color: var(--ink-2);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.7;
    text-align: left;
    -webkit-font-smoothing: antialiased;
}

.sp *,
.sp *::before,
.sp *::after { box-sizing: border-box; }

.sp-wrap {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Hero band */
.sp-hero {
    background: var(--sunk);
    border-bottom: 1px solid var(--line);
    padding: 56px 0 44px;
}
.sp-eyebrow {
    display: inline-block;
    margin: 0 0 18px;
    padding: 3px 10px;
    background: var(--gold);
    color: var(--ink);
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    line-height: 1.6;
}
.sp h1 {
    margin: 0 0 14px;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: clamp(30px, 4.4vw, 44px);
    font-weight: 600;
    letter-spacing: -0.5px;
    line-height: 1.15;
}
.sp-lede {
    max-width: 680px;
    margin: 0 0 18px;
    color: var(--ink-2);
    font-size: 18px;
    line-height: 1.65;
}
.sp-meta {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
}

/* Two columns: contents rail + body */
.sp-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 64px;
    padding-top: 48px;
    padding-bottom: 96px;
}
.sp-body { max-width: 760px; min-width: 0; }
/* Short pages with no contents rail (About Us): one centred-left column. */
.sp-layout--single { grid-template-columns: minmax(0, 1fr); }

.sp-toc {
    position: sticky;
    top: 170px;
    align-self: start;
    font-size: 14px;
}
.sp-toc__title {
    margin: 0 0 12px;
    color: var(--muted);
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.sp-toc ol {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 1px solid var(--line);
}
.sp-toc li { margin: 0; }
.sp-toc a {
    display: block;
    margin-left: -1px;
    padding: 6px 0 6px 14px;
    border-left: 2px solid transparent;
    color: var(--ink-2);
    line-height: 1.45;
    text-decoration: none;
}
.sp-toc a:hover,
.sp-toc a:focus-visible {
    border-left-color: var(--gold);
    color: var(--ink);
    text-decoration: none;
}

/* Sections */
.sp-section {
    padding: 36px 0 8px;
    border-top: 1px solid var(--line);
    scroll-margin-top: 170px;
}
.sp-section:first-child { padding-top: 0; border-top: 0; }
.sp h2 {
    margin: 0 0 16px;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.2px;
    line-height: 1.3;
}
.sp h2::before {
    content: "";
    display: block;
    width: 28px;
    height: 3px;
    margin-bottom: 14px;
    background: var(--gold);
    border-radius: var(--radius-sm);
}
.sp p { margin: 0 0 16px; }
.sp ul.sp-list {
    margin: 0 0 18px;
    padding-left: 22px;
}
.sp ul.sp-list li { margin-bottom: 8px; padding-left: 4px; }
.sp ul.sp-list li::marker { color: var(--faint); }

.sp-body a {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--gold);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
.sp-body a:hover { text-decoration-color: var(--ink); }
.sp strong { color: var(--ink); font-weight: 600; }

/* Tables */
.sp-table-wrap {
    margin: 4px 0 20px;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.sp table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: 15px;
    line-height: 1.5;
}
.sp th,
.sp td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}
.sp tr:last-child th,
.sp tr:last-child td { border-bottom: 0; }
.sp thead th {
    background: var(--sunk);
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
}
.sp tbody th { color: var(--ink); font-weight: 600; }
.sp td.num,
.sp th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sp tr.is-total td,
.sp tr.is-total th { background: var(--sunk); color: var(--ink); font-weight: 600; }

/* A short aside inside a section */
.sp-note {
    margin: 0 0 20px;
    padding: 14px 18px;
    background: var(--sunk);
    border-left: 3px solid var(--gold);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-size: 15px;
}
.sp-note p:last-child { margin-bottom: 0; }

/* FAQ: question and answer stay together in one <details>; the answer is
   in the page source whether or not it is open. */
.sp-faq-tools {
    display: flex;
    justify-content: flex-end;
    margin: -8px 0 24px;
}
.sp-button {
    padding: 7px 14px;
    background: var(--page);
    color: var(--ink);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}
.sp-button:hover { border-color: var(--ink); }
.sp-button:focus-visible,
.sp-faq summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.sp-faq {
    border-bottom: 1px solid var(--line);
    scroll-margin-top: 170px;
}
.sp-section .sp-faq:first-of-type { border-top: 1px solid var(--line); }
.sp-faq summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 0;
    list-style: none;
    cursor: pointer;
}
.sp-faq summary::-webkit-details-marker { display: none; }
.sp-faq h3 {
    margin: 0;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.45;
}
.sp-faq__icon {
    position: relative;
    flex: 0 0 26px;
    height: 26px;
    margin-top: -1px;
    background: var(--sunk);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}
.sp-faq__icon::before,
.sp-faq__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 1.5px;
    margin: -0.75px 0 0 -5px;
    background: var(--ink);
    transition: transform .2s ease;
}
.sp-faq__icon::after { transform: rotate(90deg); }
.sp-faq[open] .sp-faq__icon { background: var(--gold); border-color: var(--gold); }
.sp-faq[open] .sp-faq__icon::after { transform: rotate(0deg); }
.sp-faq__a { padding: 0 46px 10px 0; }

.sp-figure { margin: 4px 0 20px; }
.sp-figure img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.sp-figure img + img { margin-top: 12px; }
.sp-table-note {
    margin: -12px 0 18px;
    color: var(--muted);
    font-size: 13px;
}
.sp-figure figcaption {
    margin-top: 8px;
    color: var(--muted);
    font-size: 14px;
}

/* Contact strip at the end of a page */
.sp-contact {
    margin-top: 40px;
    padding: 24px 26px;
    background: var(--sunk);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.sp-contact h2::before { display: none; }
.sp-contact h2 { font-size: 20px; margin-bottom: 8px; }
.sp-contact p:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
    .sp-layout { grid-template-columns: 1fr; gap: 32px; padding-top: 32px; }
    .sp-toc {
        position: static;
        padding: 16px 18px;
        background: var(--sunk);
        border: 1px solid var(--line);
        border-radius: var(--radius);
    }
    .sp-toc ol { border-left: 0; columns: 2; column-gap: 24px; }
    .sp-toc a { margin-left: 0; padding: 5px 0; border-left: 0; }
}

@media (max-width: 600px) {
    .sp-wrap { padding: 0 16px; }
    .sp-hero { padding: 36px 0 30px; }
    .sp-lede { font-size: 17px; }
    .sp h2 { font-size: 21px; }
    .sp-toc ol { columns: 1; }
    .sp th, .sp td { padding: 10px 12px; }
    .sp table { font-size: 14px; }
    .sp-faq__a { padding-right: 0; }
    .sp-faq h3 { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .sp-faq__icon::before, .sp-faq__icon::after { transition: none; }
}