/* Violet Tender - buybrainlive.com | single sheet, sections numbered */
/* 1. TOKENS ------------------------------------------------------------ */
:root {
    --paper: #f0f2f7;
    --card: #ffffff;
    --ink: #191b2e;
    --muted: #4c5168;
    --violet: #5429c8;
    --violet-deep: #3b1d92;
    --violet-dark: #31187b;
    --tint: #ece7fb;
    --steel: #d3d8e6;
    --steel-soft: #e5e9f2;
    --green: #0d7a4a;
    --green-tint: #e2f3ea;
    --foot: #191b2e;
    --radius: 10px;
    --shell: 1080px;
    --font-ui: "Afacad", "Segoe UI", Arial, sans-serif;
    --font-num: "Sometype Mono", "Courier New", monospace;
}
/* 2. RESET + BASE ------------------------------------------------------ */
* { box-sizing: border-box; margin: 0; padding: 0; }
img { max-width: 100%; height: auto; display: block; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-ui);
    font-size: 17px;
    line-height: 1.6;
    color: var(--ink);
    background: var(--paper);
}
a { color: var(--violet); }
a:focus-visible, button:focus-visible, summary:focus-visible {
    outline: 3px solid var(--violet-deep);
    outline-offset: 2px;
}
.tnd-shell { max-width: var(--shell); margin: 0 auto; padding: 0 20px; }
.tnd-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--violet-deep);
    color: #fff;
    padding: 10px 16px;
    z-index: 60;
}
.tnd-skip:focus { left: 0; }
.tnd-num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
/* 3. HEADER ------------------------------------------------------------ */
.tnd-header { background: var(--card); border-bottom: 1px solid var(--steel); position: relative; z-index: 40; }
.tnd-header-row { display: flex; align-items: center; justify-content: space-between; min-height: 64px; }
.tnd-mark { text-decoration: none; color: var(--ink); display: flex; flex-direction: column; line-height: 1.05; }
.tnd-mark-name { font-weight: 700; font-size: 23px; letter-spacing: 0.2px; }
.tnd-mark-sub {
    font-family: var(--font-num);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 2.4px;
    color: var(--violet);
}
.tnd-nav { display: flex; align-items: center; gap: 26px; }
.tnd-nav a { text-decoration: none; color: var(--ink); font-weight: 500; font-size: 16.5px; }
.tnd-nav a:hover { color: var(--violet); }
.tnd-nav-cta {
    background: var(--violet);
    color: #fff !important;
    padding: 9px 18px;
    border-radius: var(--radius);
    font-weight: 600;
}
.tnd-nav-cta:hover { background: var(--violet-dark); }
.tnd-burger { display: none; background: none; border: 1px solid var(--steel); border-radius: 8px; width: 44px; height: 44px; cursor: pointer; }
.tnd-burger span { display: block; width: 20px; height: 2px; background: var(--ink); margin: 4px auto; transition: transform 0.2s; }
/* 4. STRIP (in-flux, no JS) ------------------------------------------- */
.tnd-strip { background: var(--violet-deep); color: #fff; }
.tnd-strip p {
    max-width: var(--shell);
    margin: 0 auto;
    padding: 9px 20px;
    font-family: var(--font-num);
    font-size: 13.5px;
}
.tnd-strip a { color: #fff; font-weight: 700; }
/* 5. HERO -------------------------------------------------------------- */
.tnd-hero { background: var(--card); border-bottom: 1px solid var(--steel); }
.tnd-hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 44px;
    align-items: center;
    padding-top: 52px;
    padding-bottom: 56px;
}
.tnd-kicker {
    font-family: var(--font-num);
    text-transform: uppercase;
    letter-spacing: 2.6px;
    font-size: 12px;
    color: var(--violet);
    margin-bottom: 12px;
}
h1 { font-size: clamp(30px, 4.6vw, 44px); line-height: 1.12; font-weight: 700; }
#tender-note {
    margin: 18px 0 20px;
    padding-left: 14px;
    border-left: 3px solid var(--violet);
    color: var(--muted);
    font-size: 17.5px;
}
.tnd-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.tnd-chips li {
    border: 1px solid var(--steel);
    background: var(--paper);
    border-radius: 999px;
    padding: 6px 14px 6px 26px;
    font-family: var(--font-num);
    font-size: 12.5px;
    position: relative;
}
.tnd-chips li::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 50%;
    width: 7px;
    height: 7px;
    transform: translateY(-50%);
    background: var(--green);
    border-radius: 2px;
}
.tnd-btn {
    display: inline-block;
    background: var(--violet);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 16.5px;
    padding: 14px 28px;
    border-radius: var(--radius);
    border: 1px solid var(--violet-dark);
}
.tnd-btn:hover { background: var(--violet-dark); }
.tnd-micro { font-size: 13px; color: var(--muted); margin-top: 12px; }
.tnd-hero-art img {
    background: var(--paper);
    border: 1px solid var(--steel);
    border-radius: var(--radius);
    padding: 18px;
}
/* 6. SECTIONS ---------------------------------------------------------- */
.tnd-section { padding: 60px 0; }
.tnd-alt { background: var(--card); border-top: 1px solid var(--steel); border-bottom: 1px solid var(--steel); }
h2 { font-size: clamp(24px, 3vw, 30px); line-height: 1.2; margin-bottom: 16px; }
.tnd-h2-gap { margin-top: 34px; }
.tnd-section > .tnd-shell > p { max-width: 820px; }
.tnd-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
/* 7. PACKAGE MATRIX ---------------------------------------------------- */
.tnd-matrix-wrap { overflow-x: auto; margin-top: 26px; -webkit-overflow-scrolling: touch; }
.tnd-matrix {
    width: 100%;
    min-width: 660px;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--card);
    border: 1px solid var(--steel);
    border-radius: var(--radius);
}
.tnd-matrix caption {
    caption-side: top;
    text-align: left;
    font-size: 13.5px;
    color: var(--muted);
    padding-bottom: 10px;
}
.tnd-matrix th, .tnd-matrix td {
    padding: 13px 16px;
    border-bottom: 1px solid var(--steel-soft);
    text-align: center;
    font-size: 16px;
    vertical-align: middle;
}
.tnd-matrix tbody th[scope="row"] {
    text-align: left;
    font-family: var(--font-num);
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--muted);
    width: 22%;
}
.tnd-matrix thead th { border-bottom: 2px solid var(--steel); padding-top: 18px; }
.tnd-matrix tr:last-child th, .tnd-matrix tr:last-child td { border-bottom: none; }
.tnd-colname { display: block; font-size: 21px; font-weight: 700; margin-top: 6px; }
.tnd-colhead, .tnd-badge {
    display: inline-block;
    font-family: var(--font-num);
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 1.6px;
}
.tnd-colhead { color: var(--muted); }
.tnd-badge { background: var(--green); color: #fff; border-radius: 999px; padding: 3px 12px; }
.tnd-matrix .hl { background: #f7f4ff; border-left: 2px solid var(--violet); border-right: 2px solid var(--violet); }
.tnd-matrix thead .hl { border-top: 2px solid var(--violet); border-radius: var(--radius) var(--radius) 0 0; }
.tnd-matrix tr:last-child .hl { border-bottom: 2px solid var(--violet); }
.tnd-total { font-size: 24px; font-weight: 700; }
.tnd-matrix s { color: var(--muted); }
.tnd-save {
    background: var(--green-tint);
    color: var(--green);
    font-family: var(--font-num);
    font-size: 12.5px;
    font-weight: 700;
    border-radius: 999px;
    padding: 4px 12px;
    white-space: nowrap;
}
.tnd-btn-row { padding: 11px 14px; font-size: 15px; white-space: nowrap; }
.tnd-under-table { font-size: 14px; color: var(--muted); margin-top: 14px; max-width: 820px; }
/* 7b. MOBILE PACKAGE CARDS (same data, stacked; table stays desktop-only) - */
.tnd-mobile-only { display: none; }
.tnd-pcard {
    background: var(--card);
    border: 1px solid var(--steel);
    border-radius: var(--radius);
    padding: 20px 18px;
    margin-top: 16px;
}
.tnd-pcard.is-best { border: 2px solid var(--violet); box-shadow: 0 2px 10px rgba(84, 41, 200, 0.12); }
.tnd-pcard-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.tnd-pcard-jars { font-size: 21px; font-weight: 700; }
.tnd-pcard-days {
    font-family: var(--font-num);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--muted);
    margin-left: auto;
}
.tnd-pcard-price { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 10px; }
.tnd-pcard-per { font-size: 34px; font-weight: 700; color: var(--violet-deep); }
.tnd-pcard-perlabel {
    font-family: var(--font-num);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--muted);
}
.tnd-pcard-lines { list-style: none; margin-bottom: 14px; }
.tnd-pcard-lines li {
    border-top: 1px solid var(--steel-soft);
    padding: 8px 0;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.tnd-pcard-lines s { color: var(--muted); }
.tnd-btn-block { display: block; width: 100%; text-align: center; }
/* 8. CALLOUT + SNAPSHOT ------------------------------------------------ */
.tnd-callout {
    margin-top: 22px;
    background: var(--tint);
    border-left: 4px solid var(--violet);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: 16px 20px;
    max-width: 820px;
}
.tnd-snapshot { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--steel); border-radius: var(--radius); }
.tnd-snapshot th, .tnd-snapshot td { padding: 11px 14px; border-bottom: 1px solid var(--steel-soft); text-align: left; font-size: 15.5px; }
.tnd-snapshot tr:last-child th, .tnd-snapshot tr:last-child td { border-bottom: none; }
.tnd-snapshot th {
    font-family: var(--font-num);
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--muted);
    width: 40%;
}
.tnd-snapshot tr:nth-child(even) { background: var(--paper); }
/* 9. STEPS ------------------------------------------------------------- */
.tnd-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 10px; }
.tnd-step { background: var(--paper); border: 1px solid var(--steel); border-radius: var(--radius); padding: 22px; }
.tnd-step-n { font-family: var(--font-num); font-size: 26px; font-weight: 700; color: var(--violet); display: block; margin-bottom: 10px; }
.tnd-step h3 { font-size: 18.5px; margin-bottom: 8px; }
.tnd-step p { font-size: 15.5px; color: var(--muted); }
/* 10. QUOTES ----------------------------------------------------------- */
.tnd-rating-line { font-size: 17px; margin-bottom: 20px; }
.tnd-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.tnd-quotes figure { background: var(--card); border: 1px solid var(--steel); border-radius: var(--radius); padding: 20px; }
.tnd-quotes blockquote { font-size: 15.5px; color: var(--ink); }
.tnd-quotes figcaption { margin-top: 12px; font-size: 13.5px; color: var(--muted); }
.tnd-quotes figcaption span {
    display: inline-block;
    margin-left: 8px;
    font-family: var(--font-num);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--green);
}
/* 11. TIMELINE --------------------------------------------------------- */
.tnd-timeline { list-style: none; margin: 8px 0 16px; border-left: 2px solid var(--steel); }
.tnd-timeline li { position: relative; padding: 0 0 14px 22px; font-size: 15.5px; }
.tnd-timeline li::before {
    content: "";
    position: absolute;
    left: -6px;
    top: 7px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--violet);
}
.tnd-tl-day { display: block; font-family: var(--font-num); font-size: 12px; text-transform: uppercase; letter-spacing: 1.4px; color: var(--violet); }
/* 12. QA + TAKE + REFS ------------------------------------------------- */
.tnd-qa { border-top: 1px solid var(--steel); padding: 18px 0; max-width: 820px; }
.tnd-qa h3 { font-size: 18.5px; margin-bottom: 8px; }
.tnd-qa p { color: var(--muted); font-size: 16px; }
.tnd-take { list-style: none; }
.tnd-take li { position: relative; padding: 0 0 10px 24px; font-size: 16px; }
.tnd-take li::before { content: ""; position: absolute; left: 4px; top: 9px; width: 8px; height: 8px; background: var(--violet); border-radius: 2px; }
.tnd-refs { padding-left: 20px; font-size: 13.5px; color: var(--muted); }
.tnd-refs li { margin-bottom: 8px; }
.tnd-mark a { text-decoration: none; font-size: 11px; }
/* 13. FINAL BAND ------------------------------------------------------- */
.tnd-final { background: var(--violet-deep); color: #fff; padding: 52px 0; }
.tnd-final-row { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 36px; align-items: center; }
.tnd-final-kick { font-family: var(--font-num); text-transform: uppercase; letter-spacing: 2.4px; font-size: 12px; color: #c9b8ff; margin-bottom: 10px; }
.tnd-final-line { font-size: clamp(19px, 2.6vw, 24px); font-weight: 600; line-height: 1.35; }
.tnd-final-act { text-align: center; }
.tnd-btn-invert { background: #fff; color: var(--violet-deep); border-color: #fff; font-size: 18px; padding: 16px 30px; }
.tnd-btn-invert:hover { background: var(--tint); color: var(--violet-dark); }
.tnd-micro-light { margin-top: 10px; font-size: 13.5px; color: #c9b8ff; }
.tnd-micro-light a { color: #fff; }
/* 14. SUBPAGES --------------------------------------------------------- */
.tnd-subhero { background: var(--card); border-bottom: 1px solid var(--steel); padding: 44px 0; }
.tnd-subhero h1 { font-size: clamp(27px, 3.6vw, 36px); }
.tnd-lede { margin-top: 10px; color: var(--muted); max-width: 760px; font-size: 17.5px; }
.tnd-prose h2 { margin-top: 34px; }
.tnd-prose p, .tnd-prose li { max-width: 800px; }
.tnd-prose ul, .tnd-prose ol { padding-left: 24px; margin: 10px 0 14px; }
.tnd-prose li { margin-bottom: 8px; }
.tnd-narrow p, .tnd-narrow li { max-width: 720px; }
.tnd-byline { font-family: var(--font-num); font-size: 13px; color: var(--muted); border-bottom: 1px solid var(--steel); padding-bottom: 14px; }
.tnd-crosslink { margin-top: 30px; border-top: 1px solid var(--steel); padding-top: 18px; font-weight: 500; }
/* 15. FAQ ACCORDIONS --------------------------------------------------- */
.tnd-acc { background: var(--card); border: 1px solid var(--steel); border-radius: var(--radius); margin-bottom: 10px; max-width: 820px; }
.tnd-acc summary { cursor: pointer; padding: 15px 18px; font-weight: 600; font-size: 16.5px; list-style: none; position: relative; padding-right: 40px; }
.tnd-acc summary::-webkit-details-marker { display: none; }
.tnd-acc summary::after {
    content: "+";
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-num);
    font-size: 20px;
    color: var(--violet);
}
.tnd-acc[open] summary::after { content: "-"; }
.tnd-acc[open] summary { border-bottom: 1px solid var(--steel-soft); }
.tnd-acc-body { padding: 14px 18px; color: var(--muted); }
/* 16. FOOTER ----------------------------------------------------------- */
.tnd-updated { font-family: var(--font-num); font-size: 12.5px; color: #8f96b3; padding-bottom: 18px; }
.tnd-footer { background: var(--foot); color: #c9cde0; padding: 46px 0 30px; margin-top: 0; font-size: 14.5px; }
.tnd-foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 34px; padding-bottom: 26px; border-bottom: 1px solid #2c3050; }
.tnd-foot-name { font-weight: 700; font-size: 19px; color: #fff; margin-bottom: 8px; }
.tnd-foot-brand p { margin-bottom: 10px; }
.tnd-foot-col { display: flex; flex-direction: column; gap: 8px; }
.tnd-foot-h { font-family: var(--font-num); font-size: 11px; text-transform: uppercase; letter-spacing: 2px; color: #8f96b3; margin-bottom: 4px; }
.tnd-footer a { color: #dfe3f2; text-decoration: none; }
.tnd-footer a:hover { color: #fff; text-decoration: underline; }
.tnd-foot-legal { padding-top: 20px; font-size: 12.5px; color: #9aa1bd; }
.tnd-foot-legal p { margin-bottom: 8px; max-width: 900px; }
/* 17. 404 -------------------------------------------------------------- */
.tnd-404 { padding: 90px 0; text-align: left; }
.tnd-404 p { margin: 14px 0; }
/* 18. RESPONSIVE ------------------------------------------------------- */
@media (max-width: 860px) {
    .tnd-hero-grid, .tnd-two-col, .tnd-final-row { grid-template-columns: 1fr; }
    .tnd-hero-art { order: -1; max-width: 340px; }
    .tnd-steps, .tnd-quotes { grid-template-columns: 1fr; }
    .tnd-foot-grid { grid-template-columns: 1fr 1fr; }
    .tnd-burger { display: block; }
    .tnd-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--card);
        border-bottom: 1px solid var(--steel);
        flex-direction: column;
        align-items: flex-start;
        padding: 16px 20px;
        gap: 14px;
        visibility: hidden;
        opacity: 0;
        transform: translateY(-6px);
        transition: opacity 0.2s, transform 0.2s, visibility 0s linear 0.2s;
    }
    .tnd-nav.is-open {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
        transition: opacity 0.2s, transform 0.2s;
    }
    .tnd-two-col > div + div { margin-top: 8px; }
}
@media (max-width: 720px) {
    .tnd-desk-only { display: none; }
    .tnd-mobile-only { display: block; }
}
@media (max-width: 560px) {
    .tnd-foot-grid { grid-template-columns: 1fr; }
    .tnd-section { padding: 44px 0; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .tnd-nav, .tnd-burger span { transition: none; }
}