/* =============================================================
   Seller Info — the artist program pitch page (/seller-info).

   Built entirely on the tokens defined in home.css (--acc, --grn, --blu,
   --red, --bg, --panel, --line, --tx, --head, --body, --mark) — same rule
   as apply.css: no new colors or fonts, this has to read as a page of the
   same site. --acc (orange) carries the primary accent throughout, since
   this page is written to and for artists the same way the artist
   application is.
   ============================================================= */

.si-hero { padding: 148px 0 60px; border-bottom: 2px solid var(--line); position: relative; }
.si-hero .kick { margin-bottom: 10px; }
.si-hero h1 { font-size: clamp(2.6rem, 7vw, 5.6rem); }
/* Every heading's emphasized half — every single .si-head h2 across the
   page had one, none of them styled — was falling back to the browser's
   default <em>: italic, and the same off-white as the rest of the
   heading. Italic white text inside white text inside a dark page reads
   as nothing, not emphasis. One rule for every heading em on this page
   (hero included, for one consistent accent rather than orange in the
   hero and unstyled everywhere else) fixes all of it at once. */
.si-hero h1 em, .si-head h2 em, .si-close h2 em { font-style: normal; color: var(--grn); }
.si-hero p { color: var(--tx2); max-width: 620px; margin-top: 18px; font-size: 1.1rem; line-height: 1.75; }
.si-hero .hero-cta { margin-top: 30px; }

/* four-up stat strip */
.si-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
            background: var(--line); border: 2px solid var(--line); }
.si-stat { background: var(--bg); padding: 28px 20px; text-align: center; }
.si-stat b { font-family: var(--head); font-weight: 400; font-size: 2.6rem; line-height: 1; color: var(--acc); display: block; }
.si-stat span { font-family: var(--body); font-weight: 800; font-size: .72rem; letter-spacing: .1em;
                text-transform: uppercase; color: var(--tx3); display: block; margin-top: 8px; }

/* generic section rhythm */
.si-section { padding: 90px 0; border-bottom: 2px solid var(--line); }
.si-section.tight { padding: 70px 0; }
.si-head { max-width: 760px; margin-bottom: 44px; }
.si-head .kick { margin-bottom: 10px; }
.si-head h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); }
.si-head p { color: var(--tx2); font-size: 1.05rem; line-height: 1.75; margin-top: 14px; }

/* three-card guarantee row */
.si-guarantee-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
                      background: var(--line); border: 2px solid var(--line); margin-top: 20px; }
.si-guarantee-card { background: var(--bg); padding: 30px 26px; }
.si-guarantee-card .tag { font-family: var(--body); font-weight: 800; font-size: .68rem; letter-spacing: .14em;
                           text-transform: uppercase; color: var(--acc); margin-bottom: 10px; display: block; }
.si-guarantee-card h3 { font-size: 1.3rem; margin-bottom: 10px; }
.si-guarantee-card p { color: var(--tx2); font-size: .94rem; line-height: 1.65; }
.si-guarantee-note { margin-top: 26px; color: var(--tx2); font-size: .96rem; line-height: 1.7; max-width: 680px; }
.si-guarantee-note b { color: var(--tx); }

/* the split — two tier cards */
.si-tier-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--line);
                border: 2px solid var(--line); margin-top: 8px; }
.si-tier-card { background: var(--bg); padding: 36px 30px; }
.si-tier-card.founding { background: var(--panel); }
.si-tier-card .eyebrow { font-family: var(--body); font-weight: 800; font-size: .7rem; letter-spacing: .14em;
                          text-transform: uppercase; color: var(--tx3); margin-bottom: 6px; }
.si-tier-card h3 { font-size: 1.3rem; margin-bottom: 14px; }
.si-tier-card .split { font-family: var(--head); font-weight: 400; font-size: 3.6rem; line-height: 1; color: var(--acc); }
.si-tier-card .split-label { font-family: var(--body); font-weight: 800; font-size: .68rem; letter-spacing: .1em;
                              text-transform: uppercase; color: var(--tx3); margin: 6px 0 22px; }
.si-tier-card ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.si-tier-card li { color: var(--tx2); font-size: .92rem; line-height: 1.6; padding-left: 20px; position: relative; }
.si-tier-card li::before { content: '—'; position: absolute; left: 0; color: var(--acc); }
.si-profit-note { margin-top: 26px; color: var(--tx2); font-size: .95rem; line-height: 1.75; max-width: 760px; }
.si-profit-note b { color: var(--tx); }

/* calculator */
.si-calc { margin-top: 8px; }
.si-calc-controls { display: grid; gap: 22px; margin-bottom: 30px; }
.si-calc-field label { display: block; font-family: var(--body); font-weight: 800; font-size: .7rem; letter-spacing: .12em;
                        text-transform: uppercase; color: var(--tx2); margin-bottom: 10px; }
/* Each button carries its own border rather than the container supplying a
   shared background as a gap-filler between them — that trick only reads
   right when every row is fully packed edge to edge. Once buttons wrap onto
   an uneven last row (any narrow viewport with 5 options), the container's
   own width no longer matches any one row's content width, and the
   "gap" background shows through as a stray block past the last button
   instead of a hairline between buttons. */
.si-seg { display: flex; flex-wrap: wrap; gap: 8px; }
.si-seg button { background: var(--bg); border: 2px solid var(--line2); color: var(--tx2); font-family: var(--body);
                 font-weight: 800; font-size: .78rem; letter-spacing: .04em; padding: 10px 16px; cursor: pointer; transition: all .15s; }
.si-seg button:hover { color: var(--tx); border-color: var(--tx3); }
.si-seg button.active { background: var(--acc); border-color: var(--acc); color: #0A0A0A; }
.si-calc-slider-row { display: flex; align-items: center; gap: 16px; }
.si-calc-slider-row input[type=range] { flex: 1; accent-color: var(--acc); height: 4px; }
.si-calc-price { font-family: var(--head); font-weight: 400; font-size: 1.6rem; color: var(--tx); min-width: 76px; text-align: right; }
.si-calc-hint { color: var(--tx3); font-size: .82rem; margin-top: 8px; }

.si-receipt { background: var(--panel); border: 2px solid var(--line); padding: 32px 30px; max-width: 480px; }
.si-receipt-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.si-receipt-head h3 { font-size: 1.15rem; }
.si-receipt-head span { font-family: var(--body); font-weight: 800; font-size: .68rem; letter-spacing: .1em;
                         text-transform: uppercase; color: var(--tx3); }
.si-receipt-sub { color: var(--tx3); font-size: .78rem; margin-bottom: 20px; }
.si-receipt-line { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.si-receipt-line span:first-child { color: var(--tx2); }
.si-receipt-line span:last-child { color: var(--tx); font-family: var(--head); font-weight: 400; }
.si-receipt-line.neg span:last-child { color: var(--tx3); }
.si-receipt-line.profit span:last-child { color: var(--grn); }
.si-receipt-payout { margin-top: 18px; padding-top: 18px; border-top: 2px solid var(--line); display: flex; justify-content: space-between; align-items: baseline; }
.si-receipt-payout span:first-child { font-family: var(--body); font-weight: 800; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--tx2); }
.si-receipt-payout b { font-family: var(--head); font-weight: 400; font-size: 2.2rem; color: var(--acc); }
.si-receipt-keep { display: flex; justify-content: space-between; margin-top: 6px; font-size: .82rem; color: var(--tx3); }
.si-receipt-monthly { margin-top: 18px; color: var(--tx2); font-size: .9rem; line-height: 1.6; }
.si-receipt-monthly b { color: var(--tx); }
.si-calc-figure-note { color: var(--tx3); font-size: .78rem; margin-top: 14px; }

/* price sheet table */
.si-table-wrap { overflow-x: auto; margin-top: 8px; border: 2px solid var(--line); }
.si-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.si-table th { text-align: left; font-family: var(--body); font-weight: 800; font-size: .68rem; letter-spacing: .1em;
               text-transform: uppercase; color: var(--tx3); padding: 14px 16px; border-bottom: 2px solid var(--line); background: var(--panel); }
.si-table td { padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: .92rem; color: var(--tx2); vertical-align: top; }
.si-table td:first-child { color: var(--tx); font-weight: 700; }
.si-table td small { display: block; color: var(--tx3); font-weight: 400; font-size: .78rem; margin-top: 2px; }
.si-table td.num { text-align: right; font-family: var(--head); font-weight: 400; color: var(--tx); }
.si-table td.acc { color: var(--acc); }
.si-table tbody tr:last-child td { border-bottom: none; }
.si-table-note { margin-top: 22px; color: var(--tx2); font-size: .95rem; line-height: 1.75; max-width: 760px; }
.si-table-note b { color: var(--tx); }

/* content-eligibility table shares .si-table but needs Yes/No colouring */
.si-table td.yes { color: var(--grn); font-weight: 800; }
.si-table td.no { color: var(--red); font-weight: 800; }
.si-table td.ask { color: var(--acc); font-weight: 800; }

/* your page mockup */
/* ---------------- the partner page spread ----------------
   Real partner pages, fanned out like a hand of cards. Each one wears its
   own two colours (--main/--accent come off the element, from
   App\Services\PartnerTheme), tilts by its index, and straightens when you
   point at it. On a phone it becomes one scroll-snapping row instead. */
.si-spread { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px 0; margin: 12px auto 0;
             padding: 18px 0 34px; max-width: 920px; }
.si-snap { --tilt: calc((var(--i) - 3.5) * 1.6deg);
           position: relative; width: 300px; margin: 0 -14px; flex: none;
           background: var(--panel); border: 2px solid var(--line);
           border-radius: 14px; overflow: hidden; text-align: left;
           transform: rotate(var(--tilt)) translateY(calc(var(--i) * 0px));
           transition: transform .4s cubic-bezier(.2, .9, .25, 1.1), box-shadow .4s ease, border-color .3s ease;
           box-shadow: 0 22px 44px -28px #000; }
.si-snap:hover, .si-snap:focus-visible { transform: rotate(0deg) translateY(-12px) scale(1.04); z-index: 3;
           border-color: var(--main, var(--acc)); box-shadow: 0 34px 60px -30px var(--main, var(--acc)); outline: none; }
.si-snap-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px;
               background: linear-gradient(180deg, #151513, #0f0f0e); border-bottom: 1px solid var(--line); }
.si-snap-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--line2); flex: none; }
.si-snap-bar i:first-child { background: var(--main, var(--acc)); }
.si-snap-url { margin-left: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
               font-family: var(--body); font-weight: 800; font-size: .68rem; letter-spacing: .02em; color: var(--tx3); }
.si-snap-url b { color: var(--main, var(--acc)); }
.si-snap-face { display: block; position: relative; aspect-ratio: 5 / 4; overflow: hidden;
                background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--main) 38%, transparent), #0d0d0c 72%); }
.si-snap-face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%;
                    transition: transform .6s ease; }
.si-snap:hover .si-snap-face img { transform: scale(1.06); }
.si-snap-face::after { content: ''; position: absolute; inset: 0;
                       background: linear-gradient(180deg, transparent 45%, #0f0f0e 100%); }
.si-snap-body { display: block; padding: 16px 18px 18px; }
.si-snap-name { display: block; font-family: var(--head); font-weight: 400; font-size: 1.45rem; line-height: 1.1; color: var(--tx); }
.si-snap-tag { display: block; margin-top: 4px; color: var(--tx3); font-size: .82rem; line-height: 1.5; }
.si-snap-pieces { display: flex; gap: 6px; margin-top: 14px; }
.si-snap-pieces img { width: 46px; height: 46px; object-fit: cover; border-radius: 8px;
                      border: 1px solid var(--line2); background: var(--bg); }
.si-snap-cta { display: block; margin-top: 16px; font-family: var(--body); font-weight: 800;
               font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--main, var(--acc)); }

/* the empty seat at the end of the fan */
.si-snap--yours { background: var(--bg); border-style: dashed; border-color: var(--line2); }
.si-snap--yours:hover { border-color: var(--acc); box-shadow: 0 34px 60px -30px var(--acc); }
.si-snap-yours-in { display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
                    padding: 30px 20px 24px; min-height: 260px; justify-content: center; }
.si-snap-plus { font-family: var(--head); font-size: 2.6rem; line-height: 1; color: var(--acc); }
.si-snap--yours .si-snap-cta { color: var(--acc); }
.si-spread-note { text-align: center; color: var(--tx3); font-size: .92rem; line-height: 1.7; max-width: 640px; margin: 0 auto; }
.si-spread-note a { color: var(--acc); border-bottom: 1px solid var(--line2); }

/* what comes with it */
.si-gets { margin-top: 64px; }
.si-gets-title { font-family: var(--head); font-weight: 400; font-size: 1.5rem; margin-bottom: 18px; }
.si-gets-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2px;
                background: var(--line); border: 2px solid var(--line); }
.si-get { background: var(--bg); padding: 20px 22px; }
.si-get b { display: block; font-size: 1rem; color: var(--tx); margin-bottom: 5px; }
.si-get span { color: var(--tx2); font-size: .9rem; line-height: 1.65; }

@media (prefers-reduced-motion: reduce) {
  .si-snap, .si-snap-face img { transition: none; }
  .si-snap:hover { transform: none; }
}
@media (max-width: 900px) {
  .si-spread { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory;
               justify-content: flex-start; gap: 14px; padding: 12px 16px 24px; margin: 0 -16px;
               -webkit-overflow-scrolling: touch; }
  .si-snap { width: 78vw; max-width: 320px; margin: 0; scroll-snap-align: center; transform: none; }
  .si-snap:hover { transform: translateY(-6px); }
  .si-gets { margin-top: 44px; }
}

/* division of labor */
.si-labor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--line);
                 border: 2px solid var(--line); margin-top: 8px; }
.si-labor-col { background: var(--bg); padding: 30px 28px; }
.si-labor-col h3 { font-size: 1.2rem; margin-bottom: 4px; }
.si-labor-col .sub { color: var(--tx3); font-size: .82rem; margin-bottom: 18px; }
.si-labor-col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.si-labor-col li { color: var(--tx2); font-size: .92rem; line-height: 1.6; padding-left: 20px; position: relative; }
.si-labor-col li::before { content: '—'; position: absolute; left: 0; color: var(--acc); }
.si-labor-col.theirs li::before { color: var(--blu); }

/* payouts */
.si-payout-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 8px; }
.si-payout-block h3 { font-size: 1.05rem; margin-bottom: 8px; color: var(--acc); }
.si-payout-block p { color: var(--tx2); font-size: .94rem; line-height: 1.7; }
.si-method-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.si-method-pills span { border: 2px solid var(--line2); color: var(--tx2); font-size: .7rem; font-weight: 800;
                         letter-spacing: .08em; text-transform: uppercase; padding: 8px 14px; }
.si-method-pills span.planned { color: var(--tx3); border-style: dashed; }
.si-small-print { margin-top: 40px; background: var(--panel); border: 2px solid var(--line); padding: 24px 26px; }
.si-small-print h4 { font-family: var(--body); font-weight: 800; font-size: .74rem; letter-spacing: .1em;
                      text-transform: uppercase; color: var(--tx3); margin-bottom: 12px; }
.si-small-print p { color: var(--tx2); font-size: .92rem; line-height: 1.7; }
.si-small-print p + p { margin-top: 14px; }

/* who we're looking for */
.si-audience-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--line);
                     border: 2px solid var(--line); margin-top: 8px; }
.si-audience-card { background: var(--bg); padding: 28px 24px; }
.si-audience-card h3 { font-size: 1.1rem; margin-bottom: 10px; color: var(--acc); }
.si-audience-card p { color: var(--tx2); font-size: .92rem; line-height: 1.65; }

/* content guidelines — three columns, colour-coded */
.si-rules-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--line);
                 border: 2px solid var(--line); margin-top: 8px; }
.si-rules-col { background: var(--bg); padding: 26px 24px; }
.si-rules-col .tag { font-family: var(--body); font-weight: 800; font-size: .78rem; letter-spacing: .06em;
                      text-transform: uppercase; margin-bottom: 4px; display: block; }
.si-rules-col.go .tag { color: var(--grn); }
.si-rules-col.ask .tag { color: var(--acc); }
.si-rules-col.no .tag { color: var(--red); }
.si-rules-col .sub { color: var(--tx3); font-size: .76rem; margin-bottom: 16px; }
.si-rules-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.si-rules-col li { color: var(--tx2); font-size: .87rem; line-height: 1.55; padding-left: 18px; position: relative; }
.si-rules-col.go li::before { content: '✓'; position: absolute; left: 0; color: var(--grn); }
.si-rules-col.ask li::before { content: '?'; position: absolute; left: 0; color: var(--acc); font-weight: 800; }
.si-rules-col.no li::before { content: '✕'; position: absolute; left: 0; color: var(--red); }
.si-rules-explainer { margin-top: 26px; background: var(--panel); border: 2px solid var(--red); padding: 26px 28px; }
.si-rules-explainer h4 { color: var(--red); font-size: 1rem; margin-bottom: 12px; }
.si-rules-explainer p { color: var(--tx2); font-size: .92rem; line-height: 1.75; }
.si-rules-explainer p + p { margin-top: 14px; }
.si-rules-explainer b { color: var(--tx); }

.si-legend { display: flex; flex-wrap: wrap; gap: 18px; margin: 18px 0 8px; font-size: .82rem; color: var(--tx3); }
.si-legend span { display: inline-flex; align-items: center; gap: 6px; }
.si-legend .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.si-legend .dot.yes { background: var(--grn); }
.si-legend .dot.ask { background: var(--acc); }
.si-legend .dot.no { background: var(--red); }

/* rights */
.si-rights-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--line);
                  border: 2px solid var(--line); margin-top: 8px; }
.si-rights-col { background: var(--bg); padding: 30px 28px; }
.si-rights-col h3 { font-size: 1.2rem; margin-bottom: 18px; }
.si-rights-col ul { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.si-rights-col li { color: var(--tx2); font-size: .93rem; line-height: 1.65; padding-left: 20px; position: relative; }
.si-rights-col li::before { content: '—'; position: absolute; left: 0; color: var(--acc); }
.si-rights-col.keep li::before { color: var(--grn); }

/* getting started */
.si-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: var(--line);
            border: 2px solid var(--line); margin-top: 8px; }
.si-step { background: var(--bg); padding: 30px 24px; }
.si-step b { font-family: var(--head); font-weight: 400; font-size: 3rem; line-height: 1; color: var(--acc); display: block; margin-bottom: 14px; }
.si-step h3 { font-size: 1.05rem; margin-bottom: 10px; }
.si-step p { color: var(--tx2); font-size: .88rem; line-height: 1.6; }

.si-apply-callout { margin-top: 30px; background: var(--panel); border: 2px solid var(--acc); padding: 28px 30px;
                     display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; }
.si-apply-callout p { color: var(--tx2); font-size: .96rem; line-height: 1.6; max-width: 480px; }
.si-apply-callout p b { color: var(--tx); }

/* FAQ — native <details>, no JS */
.si-faq-list { display: flex; flex-direction: column; gap: 2px; background: var(--line); border: 2px solid var(--line); margin-top: 8px; }
.si-faq-item { background: var(--bg); }
.si-faq-item summary { padding: 20px 24px; cursor: pointer; font-family: var(--body); font-weight: 800; font-size: .98rem;
                        color: var(--tx); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.si-faq-item summary::-webkit-details-marker { display: none; }
.si-faq-item summary::after { content: '+'; font-family: var(--head); font-size: 1.4rem; color: var(--acc); flex: none; transition: transform .2s; }
.si-faq-item[open] summary::after { transform: rotate(45deg); }
.si-faq-item summary:hover { color: var(--acc); }
.si-faq-item .a { padding: 0 24px 22px; color: var(--tx2); font-size: .92rem; line-height: 1.7; max-width: 780px; }

/* closing */
.si-close { padding: 100px 0; text-align: center; }
.si-close .kick { display: flex; justify-content: center; margin-bottom: 14px; }
.si-close h2 { font-size: clamp(2.2rem, 6vw, 4.4rem); max-width: 800px; margin: 0 auto; }
.si-close p { color: var(--tx2); font-size: 1.05rem; line-height: 1.75; max-width: 620px; margin: 18px auto 0; }
.si-close .hero-cta { justify-content: center; margin-top: 30px; }
.si-close .contact { margin-top: 22px; color: var(--tx3); font-size: .92rem; }
.si-close .contact a { color: var(--tx2); border-bottom: 1px solid var(--line2); }
.si-founder-note { margin-top: 60px; padding-top: 40px; border-top: 2px solid var(--line); color: var(--tx3);
                    font-size: .88rem; line-height: 1.7; max-width: 520px; margin-left: auto; margin-right: auto; }
.si-founder-note b { color: var(--tx2); }

@media (max-width: 860px) {
  .si-stats, .si-guarantee-grid, .si-tier-grid, .si-labor-grid, .si-audience-grid, .si-rules-grid,
  .si-rights-grid, .si-steps { grid-template-columns: 1fr; }
  .si-payout-grid { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 640px) {
  .si-section { padding: 64px 0; }
  .si-stats { grid-template-columns: 1fr 1fr; }
}

/* Inline links inside body copy (the Partner Agreement link under the
   no-lock-in cards, the print-studio link in the audience cards, the
   agreement link in the getting-started steps) read as links, in the
   same accent-and-underline style the rest of the site uses. */
.si-guarantee-note a,
.si-audience-card a,
.si-step a {
  color: var(--acc);
  border-bottom: 1px solid var(--line2);
  transition: border-color .2s;
}
.si-guarantee-note a:hover,
.si-audience-card a:hover,
.si-step a:hover { border-color: var(--acc); }

/* Shipping on our own shop isn't a deduction — the shopper pays the printer's
   rate at cost — so the receipt says so rather than showing a zero. These rows
   swap by channel, and the flex display has to yield to [hidden]. */
.si-receipt-line.pass span:last-child { color: var(--tx3); font-style: italic; }
.si-receipt-line[hidden] { display: none; }

/* ---------------- the Starter offer ----------------
   Three rates, only one open: the middle card is the offer and is meant to
   win the eye, the closed one is muted, and the 50/50 one is deliberately
   plain — it is what happens if you do nothing. */
.si-flag { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 14px;
           padding: 8px 15px; border: 2px solid var(--acc); border-radius: 999px;
           font-family: var(--body); font-weight: 800; font-size: .74rem; letter-spacing: .12em;
           text-transform: uppercase; color: var(--acc); background: rgba(255, 107, 53, .08); }
.si-flag-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--acc);
               box-shadow: 0 0 0 0 rgba(255, 107, 53, .6); animation: si-pulse 2.4s ease-out infinite; }
@keyframes si-pulse { 70% { box-shadow: 0 0 0 10px rgba(255, 107, 53, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 107, 53, 0); } }
.perf-lite .si-flag-dot, .si-flag-dot:where(.reduced) { animation: none; }
@media (prefers-reduced-motion: reduce) { .si-flag-dot { animation: none; } }
.si-hero-note { margin-top: 16px; color: var(--tx3); font-size: .9rem; font-weight: 700; }
.si-stat.is-hot { background: linear-gradient(160deg, rgba(255, 107, 53, .16), var(--bg) 70%); box-shadow: inset 0 0 0 2px var(--acc); }

.si-tier-grid--three { grid-template-columns: 1fr 1.15fr 1fr; }
.si-tier-card.is-closed { background: var(--panel); opacity: .74; }
.si-tier-card.is-closed .split { color: var(--tx3); }
.si-tier-card.is-later { background: var(--panel); }
.si-tier-card.is-later .split { color: var(--tx2); }
.si-tier-card.is-open { background: linear-gradient(170deg, rgba(255, 107, 53, .14), var(--bg) 62%);
                        box-shadow: inset 0 0 0 2px var(--acc); position: relative; }
.si-tier-card.is-open h3 { color: var(--tx); }
.si-tier-card .eyebrow-hot { color: var(--acc); }
.si-tier-cta { margin-top: 20px; display: inline-block; }
.si-seg--rate button.active { background: var(--acc); color: #10100f; }
.si-table .num.dim { color: var(--tx3); }
@media (max-width: 900px) {
  .si-tier-grid--three { grid-template-columns: 1fr; }
  .si-tier-card.is-open { order: -1; }
}

/* The explainer follows the tier cards directly, and without this the two
   collide: the grid has no bottom margin and .sx-title no top one. */
.si-tier-grid + .sx { margin-top: 64px; }
.si-tier-grid + .sx .sx-title { margin-top: 0; }
.si-section .sx + .si-profit-note { margin-top: 44px; }
.si-section .sx-receipt { margin: 24px 0; }
.si-section .sx-rules { margin: 26px 0; }
@media (max-width: 900px) {
  .si-tier-grid + .sx { margin-top: 44px; }
  .si-section .sx + .si-profit-note { margin-top: 32px; }
}
.si-tax-hint { color: var(--tx3); font-weight: 700; font-size: .78em; }