/* ============================================================================
   Page components. Loaded from the layout after site.css, so the tokens in
   :root are already defined.
   ========================================================================= */

/* ------------------------------------------------------------ empty thumb */

.empty-thumb {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
    color: var(--line-strong);
}

/* -------------------------------------------------------------- steps */

.steps {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5);
    counter-reset: step;
}
.step {
    position: relative;
    display: flex; flex-direction: column; height: 100%;
    padding: var(--s-5);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
}
/* the connecting line between steps */
.step:not(:last-child)::after {
    content: ""; position: absolute; top: 46px; right: calc(var(--s-5) * -1 - 1px);
    width: var(--s-5); height: 2px; background: var(--line-strong);
}
.step-no {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; margin-bottom: var(--s-4);
    border-radius: 50%;
    background: var(--brand-700); color: #fff;
    font-weight: 800; font-size: 1.02rem;
}
.step h3 { font-size: 1.04rem; margin-bottom: var(--s-2); }
.step p { color: var(--slate); font-size: .93rem; margin-bottom: 0; }

/* --------------------------------------------------------- problem cards */

.problem-card {
    position: relative;
    display: flex; flex-direction: column; height: 100%;
    padding: var(--s-5);
    background: linear-gradient(170deg, #FFFFFF 0%, #FFF8F7 100%);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease),
                border-color var(--t-med) var(--ease);
}
/* A thin gradient spine rather than a flat 4px bar - the same signal, less shouting. */
.problem-card::before {
    content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
    background: linear-gradient(180deg, var(--danger) 0%, #D98A7C 100%);
}
.problem-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--sh-2);
    border-color: #F0BDB8;
}

/* A big ghosted number, so six cards read as a sequence rather than six of the same thing. */
.problem-num {
    position: absolute; top: 6px; right: var(--s-4);
    font-size: 3.2rem; font-weight: 800; line-height: 1;
    color: rgba(179, 38, 30, .07);
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

.problem-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; margin-bottom: var(--s-4);
    border-radius: 13px;
    background: var(--danger-soft);
    color: var(--danger);
    transition: transform var(--t-med) var(--ease);
}
.problem-card:hover .problem-icon { transform: scale(1.06) rotate(-3deg); }

.problem-tag {
    align-self: flex-start;
    margin-bottom: 6px;
    color: var(--danger);
    font-size: .71rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.problem-card h3 { font-size: 1.12rem; margin-bottom: var(--s-2); letter-spacing: -.01em; }
.problem-card p { color: var(--slate); font-size: .94rem; margin-bottom: 0; }

/* ------------------------------------------------------------ quote card */

.quote-card {
    display: flex; flex-direction: column; height: 100%;
    margin: 0; padding: var(--s-5);
    background: var(--surface); border: 1px solid var(--line);
    border-left: 4px solid var(--brand-500);
    border-radius: var(--r-lg);
}
.quote-card p { color: var(--ink-soft); font-size: 1.02rem; font-style: italic; }
.quote-card footer { margin-top: auto; padding-top: var(--s-4); border-top: 1px solid var(--line); font-style: normal; }
.quote-card footer strong { display: block; color: var(--ink); }
.quote-card footer span { font-size: .88rem; color: var(--slate); }

/* ------------------------------------------------------------ stat row */

.stat-row {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4);
}
.stat {
    padding: var(--s-5);
    background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r-lg);
    text-align: center;
}
.stat strong {
    display: block; font-size: 1.7rem; color: var(--brand-800); line-height: 1.15;
    font-variant-numeric: tabular-nums;
}
.stat span { font-size: .88rem; color: var(--slate); }

/* --------------------------------------------------------- product page */

.product-top {
    display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    gap: var(--s-7); align-items: start;
}

.product-figure {
    display: flex; align-items: center; justify-content: center;
    margin: 0; padding: var(--s-6);
    min-height: 340px;
    background: linear-gradient(180deg, #F7FAFD 0%, #E9EFF5 100%);
    border: 1px solid var(--line); border-radius: var(--r-lg);
    color: var(--line-strong);
}
.product-figure img { max-height: 380px; width: auto; }

.product-buy .price-panel { margin-top: var(--s-4); }

/* ------------------------------------------------------- clients */

.install-card .card-body { gap: var(--s-3); }
.install-media { height: 190px; }
.install-media img { max-height: 100%; width: 100%; object-fit: cover; }
.install-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--s-3); }
.install-quote {
    margin: 0 0 var(--s-3); padding: var(--s-3) var(--s-4);
    background: var(--canvas); border-left: 3px solid var(--brand-500); border-radius: var(--r-sm);
    font-size: .94rem; font-style: italic; color: var(--ink-soft);
}
.install-quote footer { margin-top: var(--s-2); font-size: .85rem; font-style: normal; color: var(--slate); }
.install-date { margin-top: auto; padding-top: var(--s-3); font-size: .84rem; color: var(--slate-light); }

/* ------------------------------------------------------------ clients */

.filter-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3);
    margin-bottom: var(--s-5);
}
.filter-row .table-search { flex: 1 1 280px; max-width: 420px; }
.filter-row .select { min-width: 180px; }

.client-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: var(--s-4);
}

.client-card {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: var(--s-5) var(--s-4);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    height: 100%;
    transition: border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.client-card:hover { border-color: var(--brand-400); box-shadow: var(--sh-2); }

/* One fixed box for every logo, whatever shape it is - otherwise a wide logo and a
   square one make neighbouring cards different heights. */
.client-logo {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 76px; margin-bottom: var(--s-4);
}
.client-logo img { max-height: 100%; max-width: 100%; width: auto; object-fit: contain; }

.client-initial {
    display: flex; align-items: center; justify-content: center;
    width: 58px; height: 58px; border-radius: var(--r-md);
    background: var(--info-soft); color: var(--brand-700);
    font-size: 1.6rem; font-weight: 800;
}

.client-card h3 {
    font-size: .98rem; line-height: 1.3; margin-bottom: var(--s-2);
    /* Company names here are long; let them wrap rather than widen the track. */
    overflow-wrap: anywhere;
}
.client-where {
    display: flex; align-items: center; justify-content: center; gap: 5px;
    font-size: .84rem; color: var(--slate); margin: 0;
}
.client-where svg { flex: 0 0 auto; color: var(--slate-light); }
.client-detail {
    margin: var(--s-2) 0 0; font-size: .82rem; color: var(--slate-light);
    display: flex; flex-wrap: wrap; gap: 4px 10px; justify-content: center;
}

/* ---------------------------------------------------------------- faq */

.faq-group { margin-bottom: var(--s-7); }
.faq-group h2 { padding-bottom: var(--s-3); border-bottom: 2px solid var(--line); margin-bottom: var(--s-4); }

.faq-item {
    border: 1px solid var(--line); border-radius: var(--r-md);
    margin-bottom: var(--s-3); background: var(--surface);
    transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.faq-item:hover { border-color: var(--brand-400); }
.faq-item[open] { border-color: var(--brand-400); box-shadow: var(--sh-1); }

.faq-item summary {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
    padding: var(--s-4) var(--s-5);
    font-weight: 650; color: var(--ink); cursor: pointer;
    list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:focus-visible { outline: 3px solid var(--brand-400); outline-offset: -3px; }
.faq-chev { flex: 0 0 auto; color: var(--slate); transition: transform var(--t-med) var(--ease); }
.faq-item[open] .faq-chev { transform: rotate(180deg); }

.faq-answer { padding: 0 var(--s-5) var(--s-5); color: var(--slate); }
.faq-answer p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------- contact */

.contact-layout {
    display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
    gap: var(--s-7); align-items: start;
}
.contact-aside { display: flex; flex-direction: column; gap: var(--s-4); }
/* Every stacked block shares one width - nothing lopsided down the column. */
.contact-aside > * { width: 100%; }

.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list li {
    display: flex; align-items: center; gap: var(--s-3);
    padding: var(--s-3) 0; border-bottom: 1px solid var(--line);
}
.contact-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.contact-list svg { flex: 0 0 auto; color: var(--brand-700); }
.contact-list a { font-weight: 650; text-decoration: none; }
.contact-list a:hover { text-decoration: underline; }

/* --------------------------------------------------- thank-you / problem */

.thanks { text-align: center; max-width: 640px; margin-inline: auto; }
.thanks > * { margin-left: auto; margin-right: auto; }
.thanks .price-panel, .thanks .banner { text-align: left; margin-top: var(--s-5); }
.thanks-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 78px; height: 78px; margin-bottom: var(--s-4);
    border-radius: 50%; background: var(--accent-soft); color: var(--accent);
}
.thanks-icon.problem { background: var(--warn-soft); color: var(--warn); }

.problem-links { display: grid; gap: var(--s-2); }
.problem-links a {
    display: flex; align-items: center; gap: var(--s-2);
    padding: var(--s-2) 0; text-decoration: none; font-weight: 600;
}
.problem-links a:hover { text-decoration: underline; }

/* --------------------------------------------------------- table tools */

.table-tools {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3);
    margin-bottom: var(--s-4);
}
.table-search { position: relative; flex: 1 1 260px; max-width: 380px; }
.table-search svg {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--slate-light); pointer-events: none;
}
.table-search .input { padding-left: 40px; }
.table-count { font-size: .88rem; color: var(--slate); font-variant-numeric: tabular-nums; }

th.sortable { cursor: pointer; user-select: none; padding-right: 26px !important; position: relative; }
th.sortable::after {
    content: ""; position: absolute; right: 10px; top: 50%;
    width: 0; height: 0; margin-top: -2px;
    border-left: 4px solid transparent; border-right: 4px solid transparent;
    border-top: 5px solid rgba(255, 255, 255, .45);
}
th.sortable[data-dir="asc"]::after {
    border-top: 0; border-bottom: 5px solid #fff; margin-top: -3px;
}
th.sortable[data-dir="desc"]::after { border-top-color: #fff; }
th.sortable:hover { background: #1E2E3D; }

table.compare th.compare-model {
    background: var(--surface); font-weight: 700;
    border-top: 1px solid var(--line); text-align: left; padding: 11px 14px;
    vertical-align: top;
}
table.compare th.compare-model a { text-decoration: none; }
table.compare th.compare-model a:hover { text-decoration: underline; }
table.compare th.compare-model span {
    display: block; font-weight: 500; font-size: .84rem; color: var(--slate);
    max-width: 22ch; white-space: normal;
}

/* -------------------------------------------------------------- responsive */

@media (max-width: 1040px) {
    .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .step:nth-child(2)::after { display: none; }
    .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    /* minmax(0, 1fr), never a bare 1fr: a bare fr track has an automatic minimum of the
       item's own content, so one wide product photo drags the whole grid past the screen
       edge and the page scrolls sideways. */
    .product-top { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
    .product-figure { min-height: 0; }
    .product-figure img { max-height: 280px; max-width: 100%; }
    .contact-layout { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
}

@media (max-width: 640px) {
    .steps { grid-template-columns: minmax(0, 1fr); }
    .step::after { display: none !important; }
    .stat-row { grid-template-columns: minmax(0, 1fr); }
    .faq-item summary { padding: var(--s-3) var(--s-4); }
    .faq-answer { padding: 0 var(--s-4) var(--s-4); }
}

/* ------------------------------------------------- contact links block */

/* Every number and the sales address, wherever contact details appear. */
.contact-links {
    display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3);
    margin-top: var(--s-3);
}
.contact-links a {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px;
    border: 1px solid var(--line-strong); border-radius: var(--r-pill);
    background: var(--surface);
    color: var(--ink); font-size: .88rem; font-weight: 650; text-decoration: none;
    white-space: nowrap;
    transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
                color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.contact-links a svg { flex: 0 0 auto; color: var(--brand-600); }
.contact-links a:hover {
    background: var(--info-soft); border-color: var(--brand-500);
    color: var(--brand-800); transform: translateY(-1px);
}

.contact-links.on-dark a {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .3);
    color: #fff;
}
.contact-links.on-dark a svg { color: #BEDBF2; }
.contact-links.on-dark a:hover { background: rgba(255, 255, 255, .22); border-color: #fff; color: #fff; }

/* -------------------------------------------------------- header contact */

.header-contact {
    display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
    line-height: 1.25;
}
.header-phones { display: flex; gap: var(--s-2); }
.header-phones a {
    color: var(--ink); font-weight: 700; font-size: .86rem; text-decoration: none;
    font-variant-numeric: tabular-nums;
    transition: color var(--t-fast) var(--ease);
}
.header-phones a:hover { color: var(--brand-700); }
.header-phones a + a { border-left: 1px solid var(--line-strong); padding-left: var(--s-2); }
.header-email {
    color: var(--slate); font-size: .78rem; text-decoration: none;
    transition: color var(--t-fast) var(--ease);
}
.header-email:hover { color: var(--brand-700); }

/* ------------------------------------------------------------ cta strip */

.cta-actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); }
.cta-or { font-size: .84rem; color: #C3DCF0; margin-top: var(--s-2); }
.cta-actions .contact-links { margin-top: 0; }

@media (max-width: 900px) {
    .cta-actions { align-items: stretch; }
}

/* ------------------------------------------------------ problem/fix ledger */

/* A two-column ledger, not a card grid: the complaint on the left, what replaces it on the
   right. Deliberately a different shape from every other section on the page. */
.fix-list {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--surface);
    box-shadow: var(--sh-1);
}

.fix-head, .fix-row {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr) 52px minmax(0, 1.15fr);
    align-items: center;
}

.fix-head {
    background: var(--ink);
    padding: 11px 0;
    font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.fix-head-bad { color: #E9A9A2; }
.fix-head-good { color: #7BD3AC; }

.fix-row {
    border-top: 1px solid var(--line);
    transition: background var(--t-fast) var(--ease);
}
.fix-row:nth-child(even) { background: #FBFCFD; }
.fix-row:hover { background: var(--info-soft); }

.fix-num {
    align-self: stretch;
    display: flex; align-items: center; justify-content: center;
    font-size: .9rem; font-weight: 800; color: var(--slate-light);
    font-variant-numeric: tabular-nums;
    background: var(--canvas);
    border-right: 1px solid var(--line);
}

.fix-bad { padding: var(--s-4) var(--s-4) var(--s-4) var(--s-5); }
.fix-tag {
    display: block; margin-bottom: 3px;
    color: var(--danger);
    font-size: .69rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase;
}
/* Struck through, because the whole point is that it stops. */
.fix-bad p {
    margin: 0; font-size: 1.02rem; font-weight: 650; color: var(--slate);
    text-decoration: line-through;
    text-decoration-color: rgba(179, 38, 30, .45);
    text-decoration-thickness: 2px;
}

.fix-arrow { display: flex; justify-content: center; color: var(--line-strong); }

.fix-good {
    display: flex; align-items: flex-start; gap: var(--s-3);
    padding: var(--s-4) var(--s-5) var(--s-4) var(--s-4);
    border-left: 1px solid var(--line);
    align-self: stretch;
}
.fix-check {
    flex: 0 0 auto; margin-top: 2px;
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--accent); color: #fff;
}
.fix-good p { margin: 0; font-size: .97rem; color: var(--ink-soft); }

@media (max-width: 820px) {
    /* Stacked on a phone: number and complaint, then the answer underneath with the arrow
       turned to point down. */
    .fix-head { display: none; }
    .fix-row { grid-template-columns: 52px minmax(0, 1fr); }
    .fix-num { border-right: 1px solid var(--line); }
    .fix-bad { padding: var(--s-4) var(--s-4) var(--s-2); }
    .fix-arrow {
        grid-column: 2; justify-content: flex-start;
        padding: 0 var(--s-4) var(--s-2);
        transform: rotate(90deg); transform-origin: left center;
    }
    .fix-good { grid-column: 2; border-left: 0; padding: 0 var(--s-4) var(--s-4); }
}

/* ------------------------------------------------------------- dark band */

/* Breaks the run of white sections. The four columns are divided by hairlines rather than
   being cards, so this section does not read like the others. */
.band-dark {
    background:
        radial-gradient(900px 420px at 15% 0%, rgba(91, 175, 239, .16), transparent 60%),
        radial-gradient(700px 380px at 90% 110%, rgba(23, 131, 90, .16), transparent 60%),
        linear-gradient(160deg, #14202B 0%, #0A3355 100%);
    color: #C9D4DE;
}
.band-dark h2 { color: #fff; }
.band-dark .eyebrow { color: var(--brand-300); }
.band-dark .section-head p { color: #A9C2D8; }

.why-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.why-item { padding: 0 var(--s-5); }
.why-item + .why-item { border-left: 1px solid rgba(255, 255, 255, .13); }
.why-item h3 { color: #fff; font-size: 1.06rem; margin-bottom: var(--s-2); }
.why-item p { color: #A9C2D8; font-size: .93rem; margin-bottom: 0; }

/* The four colours again, this time as a glow behind a plain glyph. */
.why-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 54px; height: 54px; margin-bottom: var(--s-4);
    border-radius: 15px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    transition: transform var(--t-med) var(--ease), background var(--t-med) var(--ease);
}
.why-item:nth-child(1) .why-icon { color: #7EC2F5; box-shadow: 0 0 26px rgba(91, 175, 239, .35); }
.why-item:nth-child(2) .why-icon { color: #6FD3A6; box-shadow: 0 0 26px rgba(23, 131, 90, .40); }
.why-item:nth-child(3) .why-icon { color: #EEBE6A; box-shadow: 0 0 26px rgba(232, 169, 63, .35); }
.why-item:nth-child(4) .why-icon { color: #B6A4F0; box-shadow: 0 0 26px rgba(146, 127, 224, .35); }
.why-item:hover .why-icon { transform: translateY(-3px); background: rgba(255, 255, 255, .14); }

@media (max-width: 1040px) {
    .why-row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-6); }
    .why-item:nth-child(3) { border-left: 0; }
}
@media (max-width: 640px) {
    .why-row { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-6); }
    .why-item { padding: 0; border-left: 0 !important; }
}

/* -------------------------------------------------------- industry list */

/* Hairline rows in two columns - a directory, not another card grid. */
.industry-list {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--s-7);
}
.industry-row {
    display: grid; grid-template-columns: 44px minmax(0, 1fr) 24px;
    align-items: center; gap: var(--s-3);
    padding: var(--s-4) 0;
    border-bottom: 1px solid var(--line);
    text-decoration: none; color: inherit;
    transition: border-color var(--t-fast) var(--ease);
}
.industry-row:hover { border-bottom-color: var(--brand-500); }
.industry-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: var(--r-md);
    background: var(--info-soft); color: var(--brand-700);
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.industry-row:hover .industry-icon { background: var(--brand-700); color: #fff; }
.industry-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.industry-text strong { color: var(--ink); font-size: 1rem; }
.industry-text span { color: var(--slate); font-size: .89rem; }
.industry-go { color: var(--line-strong); transition: transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.industry-row:hover .industry-go { color: var(--brand-600); transform: translateX(4px); }

@media (max-width: 760px) {
    .industry-list { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------- three ways to buy */
/* A tier strip: three columns divided by hairlines with a coloured rule on top, no card
   shadows - deliberately not another grid of cards. Buttons level to one baseline. */
.ways {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--surface);
}
.way {
    display: flex; flex-direction: column;
    padding: var(--s-6) var(--s-5) var(--s-5);
    border-top: 4px solid var(--brand-500);
}
.way + .way { border-left: 1px solid var(--line); }
.way:nth-child(1) { border-top-color: #0E8F9B; }
.way:nth-child(2) { border-top-color: #C9821A; }
.way:nth-child(3) { border-top-color: #1B78C6; }
.way-icon {
    width: 44px; height: 44px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: var(--s-4); color: #fff;
}
.way:nth-child(1) .way-icon { background: linear-gradient(135deg, #0E8F9B, #14B3C2); }
.way:nth-child(2) .way-icon { background: linear-gradient(135deg, #C9821A, #E8A93F); }
.way:nth-child(3) .way-icon { background: linear-gradient(135deg, #1B78C6, #3D9BE9); }
.way-kicker {
    font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--slate); margin-bottom: var(--s-1);
}
.way h3 { font-size: 1.22rem; margin-bottom: var(--s-2); }
.way-price { font-size: 1.5rem; font-weight: 800; color: var(--ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.way-price small { display: block; font-size: .84rem; font-weight: 500; color: var(--slate); letter-spacing: 0; margin-top: 2px; }
.way-for { margin: var(--s-4) 0 var(--s-3); padding: var(--s-3) var(--s-4); background: var(--canvas); border-radius: var(--r-md); font-size: .92rem; color: var(--ink-soft); }
.way-for strong { color: var(--ink); }
.way .ticks { margin: 0 0 var(--s-5); font-size: .93rem; }
.way .btn { margin-top: auto; align-self: flex-start; }
.way-site { font-size: .82rem; color: var(--slate-light); margin-top: var(--s-3); }
.way-site a { color: var(--slate); }

@media (max-width: 900px) {
    .ways { grid-template-columns: 1fr; }
    .way + .way { border-left: 0; border-top-width: 4px; }
}

/* A small family tag on product cards and pages, so the three lines are told apart at a glance. */
.family-tag {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    padding: 3px 10px; border-radius: var(--r-pill); margin-bottom: var(--s-2);
}
.family-tag.smart-sale-plus { background: #E3F6F8; color: #0B6B75; }
.family-tag.popuppos { background: #FBEFD9; color: #8A5A0E; }
.family-tag.business-type { background: var(--info-soft); color: var(--brand-800); }