/* ejellytide.com | Press Violet | letterpress-brutalist light | single sheet */
@layer reset, tokens, base, layout, components, sections, utilities;

@layer reset {
    *, *::before, *::after { box-sizing: border-box; }
    body, dd, dl, figure, h1, h2, h3, h4, p, ul, ol { margin: 0; padding: 0; }
    ul, ol { list-style: none; }
    img { display: block; height: auto; max-width: 100%; }
    a { color: inherit; }
    button { font: inherit; }
    table { border-collapse: collapse; width: 100%; }
}

@layer tokens {
    :root {
        --bone: #f6f4ee;
        --paper: #ffffff;
        --ink: #111015;
        --ink-soft: #56545f;
        --violet: #4c19bd;
        --violet-deep: #2e0c72;
        --violet-mist: #ece5ff;
        --lemon: #ffe11a;
        --scarlet: #e11d38;
        --moss: #0f7a4a;
        --rule: 2px solid var(--ink);
        --rule-hair: 1px solid #d6d2c6;
        --pop: 5px 5px 0 var(--ink);
        --pop-sm: 3px 3px 0 var(--ink);
        --shell: 1180px;
        --display: "Archivo Black", "Arial Black", system-ui, sans-serif;
        --text: "Host Grotesk", "Segoe UI", system-ui, sans-serif;
    }
}

@layer base {
    body {
        background: var(--bone);
        color: var(--ink);
        font-family: var(--text);
        font-size: 17px;
        line-height: 1.66;
        -webkit-font-smoothing: antialiased;
    }
    body.has-sticky { padding-bottom: 74px; }
    strong { font-weight: 700; }
    s { color: var(--ink-soft); text-decoration-thickness: 2px; }
    em { font-style: italic; }
    a:focus-visible, button:focus-visible, summary:focus-visible {
        outline: 3px solid var(--violet);
        outline-offset: 3px;
    }
    p + p { margin-top: 1.05em; }
}

@layer layout {
    .tp-shell {
        margin: 0 auto;
        max-width: var(--shell);
        padding: 0 22px;
        width: 100%;
    }
    .tp-row { display: flex; flex-wrap: wrap; gap: 22px; }
    .tp-grid-2 { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
    .tp-grid-3 { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
    .tp-grid-4 { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
    .tp-stack > * + * { margin-top: 18px; }
}

@layer components {
    .tp-skip {
        background: var(--lemon);
        border: var(--rule);
        font-weight: 700;
        left: 12px;
        padding: 10px 16px;
        position: absolute;
        top: -80px;
        transition: top .15s;
        z-index: 90;
    }
    .tp-skip:focus { top: 12px; }

    .tp-ribbon {
        background: var(--ink);
        color: var(--bone);
        font-size: 12.5px;
        letter-spacing: .07em;
        text-transform: uppercase;
    }
    .tp-ribbon-in {
        align-items: center;
        display: flex;
        gap: 10px;
        margin: 0 auto;
        max-width: var(--shell);
        padding: 9px 22px;
    }
    .tp-ribbon-dot {
        background: var(--lemon);
        display: inline-block;
        flex: 0 0 auto;
        height: 9px;
        width: 9px;
    }

    .tp-mast {
        background: var(--bone);
        border-bottom: var(--rule);
        position: sticky;
        top: 0;
        z-index: 60;
    }
    .tp-mast-in {
        align-items: center;
        display: flex;
        gap: 18px;
        margin: 0 auto;
        max-width: var(--shell);
        padding: 12px 22px;
        position: relative;
    }
    .tp-brand { align-items: center; display: flex; gap: 11px; text-decoration: none; }
    .tp-brand-mark {
        background: var(--violet);
        border: var(--rule);
        box-shadow: var(--pop-sm);
        color: var(--bone);
        display: grid;
        font-family: var(--display);
        font-size: 17px;
        height: 42px;
        place-items: center;
        width: 42px;
    }
    .tp-brand-txt {
        display: block;
        font-family: var(--display);
        font-size: 20px;
        letter-spacing: -.01em;
        line-height: 1.05;
        text-transform: uppercase;
    }
    .tp-brand-sub {
        color: var(--ink-soft);
        display: block;
        font-family: var(--text);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .09em;
        text-transform: uppercase;
    }
    .tp-nav { align-items: center; display: flex; gap: 20px; margin-left: auto; }
    .tp-nav-list { display: flex; flex-wrap: wrap; gap: 18px; }
    .tp-nav-a {
        font-size: 15px;
        font-weight: 600;
        padding: 4px 0;
        text-decoration: none;
    }
    .tp-nav-a:hover { box-shadow: inset 0 -3px 0 var(--lemon); }
    .tp-nav-a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--violet); }
    .tp-nav-cta {
        background: var(--lemon);
        border: var(--rule);
        box-shadow: var(--pop-sm);
        font-weight: 700;
        padding: 9px 15px;
        text-decoration: none;
        white-space: nowrap;
    }
    .tp-nav-cta:hover { box-shadow: none; transform: translate(3px, 3px); }
    .tp-burger {
        background: var(--paper);
        border: var(--rule);
        cursor: pointer;
        display: none;
        height: 42px;
        margin-left: auto;
        padding: 10px;
        width: 46px;
    }
    .tp-burger-bar { background: var(--ink); display: block; height: 3px; width: 100%; }
    .tp-burger-bar + .tp-burger-bar { margin-top: 4px; }

    .tp-crumb { background: var(--violet-mist); border-bottom: var(--rule-hair); font-size: 13.5px; }
    .tp-crumb-in { margin: 0 auto; max-width: var(--shell); padding: 10px 22px; }
    .tp-crumb-a { text-decoration: none; }
    .tp-crumb-a:hover { text-decoration: underline; }
    .tp-crumb-sep { color: var(--ink-soft); padding: 0 8px; }
    .tp-crumb-cur { font-weight: 700; }

    .tp-btn {
        background: var(--violet);
        border: var(--rule);
        box-shadow: var(--pop);
        color: var(--bone);
        display: inline-block;
        font-weight: 700;
        letter-spacing: .01em;
        min-height: 48px;
        padding: 13px 22px;
        text-align: center;
        text-decoration: none;
        transition: transform .12s, box-shadow .12s;
    }
    .tp-btn:hover { box-shadow: none; transform: translate(5px, 5px); }
    .tp-btn-lg { font-size: 19px; padding: 17px 30px; }
    .tp-btn-ghost {
        border: var(--rule);
        display: inline-block;
        font-weight: 700;
        min-height: 48px;
        padding: 13px 20px;
        text-decoration: none;
    }
    .tp-btn-ghost:hover { background: var(--lemon); }
    .tp-btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 22px; }

    .tp-card {
        background: var(--paper);
        border: var(--rule);
        box-shadow: var(--pop-sm);
        padding: 22px;
    }
    .tp-card-num {
        color: var(--violet);
        display: block;
        font-family: var(--display);
        font-size: 30px;
        line-height: 1;
    }
    .tp-card-h { font-family: var(--display); font-size: 19px; margin-top: 10px; text-transform: uppercase; }
    .tp-card-p { color: var(--ink-soft); margin-top: 8px; }

    .tp-pill {
        background: var(--lemon);
        border: var(--rule);
        display: inline-block;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .08em;
        padding: 4px 10px;
        text-transform: uppercase;
    }
    .tp-badge {
        border: var(--rule);
        display: inline-block;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .07em;
        padding: 6px 11px;
        text-transform: uppercase;
    }

    .tp-table-wrap { border: var(--rule); margin-top: 20px; overflow-x: auto; }
    .tp-vtable, .tp-table { background: var(--paper); font-size: 15.5px; min-width: 460px; }
    .tp-vcap {
        background: var(--ink);
        color: var(--bone);
        font-weight: 700;
        letter-spacing: .06em;
        padding: 10px 14px;
        text-align: left;
        text-transform: uppercase;
    }
    .tp-vtable th, .tp-table th, .tp-vtable td, .tp-table td {
        border-bottom: var(--rule-hair);
        padding: 11px 14px;
        text-align: left;
        vertical-align: top;
    }
    .tp-vtable th[scope="row"], .tp-table th[scope="row"] { font-weight: 700; width: 42%; }
    .tp-table thead th {
        background: var(--violet-mist);
        border-bottom: var(--rule);
        font-weight: 700;
    }
    .tp-vtable tr:last-child th, .tp-vtable tr:last-child td { border-bottom: 0; }

    .tp-byline {
        border-left: 5px solid var(--violet);
        color: var(--ink-soft);
        font-size: 14.5px;
        margin-top: 14px;
        padding-left: 14px;
    }
    .tp-note {
        background: var(--violet-mist);
        border: var(--rule);
        font-size: 15px;
        margin-top: 22px;
        padding: 16px 18px;
    }
    .tp-callout {
        background: var(--ink);
        color: var(--bone);
        margin-top: 24px;
        padding: 20px 22px;
    }
    .tp-callout a { color: var(--lemon); }
    .tp-hr { background: var(--ink); border: 0; height: 2px; margin: 34px 0; }
    .tp-ul { margin-top: 14px; }
    .tp-ul li { padding-left: 26px; position: relative; }
    .tp-ul li + li { margin-top: 9px; }
    .tp-ul li::before {
        content: "\2713";
        color: var(--violet);
        font-weight: 700;
        left: 0;
        position: absolute;
    }
    .tp-ol { counter-reset: tpo; margin-top: 14px; }
    .tp-ol li { counter-increment: tpo; padding-left: 34px; position: relative; }
    .tp-ol li + li { margin-top: 11px; }
    .tp-ol li::before {
        background: var(--violet);
        color: var(--bone);
        content: counter(tpo);
        display: grid;
        font-size: 13px;
        font-weight: 700;
        height: 23px;
        left: 0;
        place-items: center;
        position: absolute;
        top: 3px;
        width: 23px;
    }
    .tp-cite {
        color: var(--violet);
        font-size: 12px;
        font-weight: 700;
        text-decoration: none;
        vertical-align: super;
    }
    .tp-cite:hover { text-decoration: underline; }

    .tp-form { margin-top: 22px; max-width: 620px; }
    .tp-field + .tp-field { margin-top: 16px; }
    .tp-label { display: block; font-weight: 700; margin-bottom: 6px; }
    .tp-input, .tp-textarea {
        background: var(--paper);
        border: var(--rule);
        font-family: var(--text);
        font-size: 16px;
        padding: 12px 13px;
        width: 100%;
    }
    .tp-textarea { min-height: 150px; resize: vertical; }

    .tp-sticky {
        background: var(--ink);
        border-top: 3px solid var(--lemon);
        bottom: 0;
        left: 0;
        position: fixed;
        right: 0;
        z-index: 55;
    }
    .tp-sticky[hidden] { display: none; }
    .tp-sticky-in {
        align-items: center;
        display: flex;
        gap: 12px;
        margin: 0 auto;
        max-width: var(--shell);
        padding: 9px 18px;
    }
    .tp-sticky-link {
        align-items: center;
        color: var(--bone);
        display: flex;
        flex: 1 1 auto;
        flex-wrap: wrap;
        gap: 12px;
        text-decoration: none;
    }
    .tp-sticky-chip {
        animation: tp-beat 2.4s ease-in-out infinite;
        background: var(--scarlet);
        color: #fff;
        font-family: var(--display);
        font-size: 14px;
        letter-spacing: .02em;
        padding: 7px 11px;
        white-space: nowrap;
    }
    .tp-sticky-txt { font-size: 14.5px; }
    .tp-sticky-cta {
        background: var(--lemon);
        color: var(--ink);
        font-weight: 700;
        margin-left: auto;
        padding: 10px 17px;
        white-space: nowrap;
    }
    .tp-sticky-x {
        background: none;
        border: 1px solid #6b6875;
        color: var(--bone);
        cursor: pointer;
        flex: 0 0 auto;
        font-size: 17px;
        height: 32px;
        line-height: 1;
        width: 32px;
    }
    @keyframes tp-beat {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.06); }
    }
    @media (prefers-reduced-motion: reduce) {
        .tp-sticky-chip { animation: none; }
        .tp-btn { transition: none; }
    }
}

@layer sections {
    .tp-hero { background: var(--violet-deep); border-bottom: var(--rule); color: var(--bone); }
    .tp-hero-in {
        align-items: center;
        display: grid;
        gap: 36px;
        grid-template-columns: 1.15fr .85fr;
        margin: 0 auto;
        max-width: var(--shell);
        padding: 46px 22px 40px;
    }
    .tp-eyebrow {
        color: var(--lemon);
        font-size: 12.5px;
        font-weight: 700;
        letter-spacing: .16em;
        text-transform: uppercase;
    }
    .tp-h1 {
        font-family: var(--display);
        font-size: clamp(34px, 5.1vw, 58px);
        letter-spacing: -.02em;
        line-height: 1.02;
        margin-top: 14px;
        text-transform: uppercase;
    }
    .tp-hl { background: var(--lemon); color: var(--ink); padding: 0 .12em; }
    .tp-hero-copy { min-width: 0; }
    .tp-lede { font-size: 18.5px; margin-top: 18px; max-width: 56ch; }
    .tp-hero-art { justify-self: center; }
    .tp-hero-badges { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
    .tp-hero-badges .tp-badge { background: rgba(255, 255, 255, .07); border-color: var(--bone); }
    .tp-portal {
        background: var(--ink);
        border-bottom: var(--rule);
        color: var(--bone);
        font-size: 15.5px;
    }
    .tp-portal p { margin: 0 auto; max-width: var(--shell); padding: 14px 22px; }

    .tp-sec { padding: 54px 0; }
    .tp-sec-alt { background: var(--violet-mist); border-block: var(--rule); }
    .tp-sec-ink { background: var(--ink); color: var(--bone); }
    .tp-sec-ink .tp-kicker { color: var(--lemon); }
    .tp-sec-ink a { color: var(--lemon); }
    .tp-kicker {
        color: var(--violet);
        font-size: 12.5px;
        font-weight: 700;
        letter-spacing: .15em;
        text-transform: uppercase;
    }
    .tp-h2 {
        font-family: var(--display);
        font-size: clamp(25px, 3.3vw, 37px);
        letter-spacing: -.015em;
        line-height: 1.1;
        margin-top: 10px;
        text-transform: uppercase;
    }
    .tp-h3 { font-family: var(--display); font-size: 20px; margin-top: 26px; }
    .tp-lead { font-size: 18px; margin-top: 14px; max-width: 74ch; }

    .tp-tldr {
        background: var(--lemon);
        border: var(--rule);
        box-shadow: var(--pop);
        padding: 22px 24px;
    }
    .tp-tldr-label {
        font-family: var(--display);
        font-size: 13px;
        letter-spacing: .14em;
        text-transform: uppercase;
    }
    .tp-tldr p { font-size: 17.5px; margin-top: 10px; }

    .tp-facts { background: var(--paper); border: var(--rule); box-shadow: var(--pop); padding: 0; }
    .tp-facts-head {
        background: var(--ink);
        color: var(--bone);
        font-family: var(--display);
        font-size: 14px;
        letter-spacing: .13em;
        padding: 12px 20px;
        text-transform: uppercase;
    }
    .tp-facts-dl { display: grid; grid-template-columns: 1fr; }
    .tp-facts-pair {
        border-bottom: var(--rule-hair);
        display: grid;
        gap: 4px 20px;
        grid-template-columns: minmax(0, 15em) minmax(0, 1fr);
        padding: 12px 20px;
    }
    .tp-facts-pair:last-child { border-bottom: 0; }
    .tp-facts-dt { font-weight: 700; }
    .tp-facts-dd { color: var(--ink-soft); overflow-wrap: anywhere; }

    .tp-pillar { background: var(--paper); border: var(--rule); box-shadow: var(--pop-sm); padding: 22px; }
    .tp-pillar-tag {
        background: var(--violet);
        color: var(--bone);
        display: inline-block;
        font-size: 11.5px;
        font-weight: 700;
        letter-spacing: .1em;
        padding: 4px 9px;
        text-transform: uppercase;
    }

    .tp-save-head { font-size: 19px; margin-bottom: 22px; }
    .tp-prices { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(275px, 1fr)); }
    .tp-pcard {
        background: var(--paper);
        border: var(--rule);
        box-shadow: var(--pop);
        display: flex;
        flex-direction: column;
        padding: 0 20px 22px;
        position: relative;
    }
    .tp-pcard-pop { background: var(--lemon); }
    .tp-pcard-flag {
        background: var(--scarlet);
        color: #fff;
        font-family: var(--display);
        font-size: 12.5px;
        left: -2px;
        letter-spacing: .1em;
        padding: 6px 12px;
        position: absolute;
        top: -2px;
    }
    .tp-pcard-top { border-bottom: var(--rule); margin: 0 -20px; padding: 26px 20px 14px; text-align: center; }
    .tp-pcard-name { font-family: var(--display); font-size: 19px; text-transform: uppercase; }
    .tp-pcard-sup { color: var(--ink-soft); font-size: 15px; margin-top: 4px; }
    .tp-pcard-img { height: 190px; margin: 16px auto; object-fit: contain; width: auto; }
    .tp-pcard-per { align-items: baseline; display: flex; gap: 4px; justify-content: center; }
    .tp-pcard-cur { font-family: var(--display); font-size: 22px; }
    .tp-pcard-num { font-family: var(--display); font-size: 46px; letter-spacing: -.03em; line-height: 1; }
    .tp-pcard-unit { color: var(--ink-soft); font-size: 14px; }
    .tp-pcard-tot { margin-top: 10px; text-align: center; }
    .tp-pcard-save {
        background: var(--moss);
        color: #fff;
        font-weight: 700;
        margin: 10px auto 0;
        padding: 5px 12px;
        width: fit-content;
    }
    .tp-pcard-list { font-size: 15px; margin-top: 16px; }
    .tp-pcard-list li { padding-left: 20px; position: relative; }
    .tp-pcard-list li + li { margin-top: 6px; }
    .tp-pcard-list li::before { content: "\2713"; color: var(--violet); left: 0; position: absolute; }
    .tp-pcard-cta { margin-top: auto; padding-top: 14px; }
    .tp-pcard .tp-pcard-cta { margin-top: 20px; padding: 14px 18px; }
    .tp-price-note { color: var(--ink-soft); font-size: 14.5px; margin-top: 20px; }

    .tp-qa { max-width: 92ch; }
    .tp-qa-item { border-top: var(--rule); margin-top: 24px; padding-top: 18px; }
    .tp-qa-q { font-family: var(--display); font-size: 21px; }
    .tp-qa-a { margin-top: 10px; }

    .tp-take { background: var(--ink); color: var(--bone); padding: 28px 26px; }
    .tp-take-label {
        color: var(--lemon);
        font-family: var(--display);
        font-size: 13px;
        letter-spacing: .14em;
        text-transform: uppercase;
    }
    .tp-take-list { margin-top: 16px; }
    .tp-take-list li { padding-left: 26px; position: relative; }
    .tp-take-list li + li { margin-top: 10px; }
    .tp-take-list li::before { background: var(--lemon); content: ""; height: 10px; left: 0; position: absolute; top: 9px; width: 10px; }

    .tp-cta-band {
        background: var(--violet-deep);
        border-block: var(--rule);
        color: var(--bone);
        margin-top: 54px;
        padding: 48px 22px;
        text-align: center;
    }
    .tp-cta-h { font-family: var(--display); font-size: clamp(24px, 3.4vw, 36px); text-transform: uppercase; }
    .tp-cta-p { margin: 14px auto 0; max-width: 62ch; }
    .tp-cta-band .tp-btn-row { justify-content: center; }
    .tp-cta-band .tp-btn-ghost { border-color: var(--bone); }
    .tp-cta-band .tp-btn-ghost:hover { color: var(--ink); }
    .tp-cta-note { font-size: 14.5px; margin-top: 18px; opacity: .82; }

    .tp-rate { align-items: center; display: flex; flex-wrap: wrap; gap: 26px; }
    .tp-rate-num { font-family: var(--display); font-size: 74px; line-height: .9; }
    .tp-rate-stars { color: var(--violet); font-size: 24px; letter-spacing: .1em; }
    .tp-rate-meta { color: var(--ink-soft); }
    .tp-quote { background: var(--paper); border: var(--rule); box-shadow: var(--pop-sm); padding: 20px; }
    .tp-quote-body { font-size: 16.5px; }
    .tp-quote-who { border-top: var(--rule-hair); font-weight: 700; margin-top: 14px; padding-top: 12px; }
    .tp-quote-badge {
        background: var(--moss);
        color: #fff;
        display: inline-block;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .07em;
        margin-left: 8px;
        padding: 2px 8px;
        text-transform: uppercase;
    }
    .tp-bars { margin-top: 20px; }
    .tp-bar { align-items: center; display: grid; gap: 14px; grid-template-columns: minmax(0, 15em) minmax(0, 1fr) 4.5em; }
    .tp-bar + .tp-bar { margin-top: 11px; }
    .tp-bar-label { font-weight: 600; }
    .tp-bar-track { background: var(--paper); border: var(--rule); height: 20px; }
    .tp-bar-fill { background: var(--violet); height: 100%; }
    .tp-bar-val { font-weight: 700; text-align: right; }
    .tp-stats { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); margin-top: 22px; }
    .tp-stat { background: var(--paper); border: var(--rule); box-shadow: var(--pop-sm); padding: 18px; }
    .tp-stat-n { display: block; font-family: var(--display); font-size: 33px; line-height: 1; }
    .tp-stat-l { color: var(--ink-soft); display: block; font-size: 14px; margin-top: 7px; }

    .tp-steps { margin-top: 24px; }
    .tp-step { background: var(--paper); border: var(--rule); box-shadow: var(--pop-sm); display: grid; gap: 16px; grid-template-columns: 54px minmax(0, 1fr); padding: 18px; }
    .tp-step + .tp-step { margin-top: 14px; }
    .tp-step-n { background: var(--violet); color: var(--bone); display: grid; font-family: var(--display); font-size: 21px; height: 46px; place-items: center; width: 46px; }
    .tp-step-b h3 { font-family: var(--display); font-size: 17.5px; }
    .tp-step-b p { margin-top: 6px; }

    .tp-gloss { margin-top: 20px; }
    .tp-gloss-t { border-top: var(--rule-hair); font-family: var(--display); font-size: 17px; padding-top: 14px; }
    .tp-gloss-d { color: var(--ink-soft); margin-top: 6px; }

    .tp-faq { border-bottom: var(--rule); max-width: 92ch; }
    .tp-faq-item { border-top: var(--rule); padding: 16px 0; }
    .tp-faq-q { cursor: pointer; font-family: var(--display); font-size: 18px; list-style: none; padding-right: 30px; position: relative; }
    .tp-faq-q::-webkit-details-marker { display: none; }
    .tp-faq-q::after { content: "+"; font-size: 24px; position: absolute; right: 0; top: -4px; }
    .tp-faq-item[open] .tp-faq-q::after { content: "\2212"; }
    .tp-faq-a { margin-top: 12px; }

    .tp-refs { border-top: var(--rule); margin-top: 44px; padding-top: 26px; }
    .tp-ref-list { counter-reset: none; margin-top: 18px; }
    .tp-ref-item { display: grid; font-size: 14.5px; gap: 12px; grid-template-columns: 30px minmax(0, 1fr); }
    .tp-ref-item + .tp-ref-item { margin-top: 12px; }
    .tp-ref-n { background: var(--ink); color: var(--bone); display: grid; font-size: 13px; font-weight: 700; height: 24px; place-items: center; width: 24px; }
    .tp-ref-body { overflow-wrap: anywhere; }
    .tp-ref-a { color: var(--violet); }

    .tp-foot { background: var(--ink); border-top: 4px solid var(--lemon); color: var(--bone); margin-top: 0; }
    .tp-foot-in {
        display: grid;
        gap: 32px;
        grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr));
        margin: 0 auto;
        max-width: var(--shell);
        padding: 46px 22px 34px;
    }
    .tp-foot-brand .tp-brand-mark { box-shadow: none; }
    .tp-foot-desc { color: #c9c6d2; font-size: 14.5px; margin-top: 14px; }
    .tp-foot-addr { color: #c9c6d2; font-size: 14px; font-style: normal; margin-top: 14px; }
    .tp-foot-col { min-width: 0; }
    .tp-foot-h { color: var(--lemon); font-family: var(--display); font-size: 13px; letter-spacing: .11em; text-transform: uppercase; }
    .tp-foot-list { margin-top: 14px; }
    .tp-foot-list li + li { margin-top: 9px; }
    .tp-foot-a { color: #e6e4ec; font-size: 14.5px; text-decoration: none; }
    .tp-foot-a:hover { color: var(--lemon); text-decoration: underline; }
    .tp-foot-bar { border-top: 1px solid #34323d; margin: 0 auto; max-width: var(--shell); padding: 22px; }
    .tp-foot-legal { color: #a7a4b2; font-size: 13px; }
    .tp-foot-bar .tp-disc { color: #8f8c9a; font-size: 12.5px; margin-top: 10px; }
    .tp-updated { color: var(--lemon); display: inline-block; font-weight: 700; margin-left: 6px; }
}

@layer utilities {
    .tp-center { text-align: center; }
    .tp-muted { color: var(--ink-soft); }
    .tp-mt { margin-top: 26px; }
    .tp-mt-lg { margin-top: 44px; }
    .tp-img { border: var(--rule); }
}

@media (max-width: 1000px) {
    .tp-foot-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tp-hero-in { grid-template-columns: 1fr; }
    .tp-hero-art { max-width: 420px; order: -1; }
}

@media (max-width: 780px) {
    body.has-sticky { padding-bottom: 112px; }
    .tp-burger { display: block; }
    .tp-nav {
        background: var(--bone);
        border-bottom: var(--rule);
        display: block;
        left: 0;
        opacity: 0;
        padding: 16px 22px 22px;
        position: absolute;
        right: 0;
        top: 100%;
        visibility: hidden;
    }
    .tp-nav.is-open { opacity: 1; visibility: visible; }
    .tp-nav-list { display: block; }
    .tp-nav-list li + li { margin-top: 12px; }
    .tp-nav-a { display: block; font-size: 17px; }
    .tp-nav-cta { display: block; margin-top: 16px; text-align: center; }
    .tp-sticky-in { gap: 8px; padding: 8px 12px; }
    .tp-sticky-link { align-items: center; gap: 8px; }
    .tp-sticky-chip { font-size: 12.5px; padding: 6px 9px; }
    .tp-sticky-txt { font-size: 12.5px; line-height: 1.32; order: -1; width: 100%; }
    .tp-sticky-cta { flex: 1 1 auto; margin-left: 0; padding: 10px 12px; text-align: center; }
    .tp-bar { grid-template-columns: minmax(0, 1fr); }
    .tp-bar-val { text-align: left; }
    .tp-facts-pair { grid-template-columns: minmax(0, 1fr); }
    .tp-rate-num { font-size: 58px; }
    .tp-sec { padding: 40px 0; }
}

@media (max-width: 480px) {
    .tp-foot-in { grid-template-columns: minmax(0, 1fr); }
    .tp-step { grid-template-columns: minmax(0, 1fr); }
}