/* ==========================================================================
   Comparison pages (/compare and /compare/*)
   --------------------------------------------------------------------------
   Everything is namespaced under .cmp so none of this can leak into the rest
   of the site. Colors come from the LumaBooth brand palette: Spicy Berry for
   accents and CTAs, Bayern Blue for headlines and dark sections, the pale
   fuchsias for light backgrounds. Typography deliberately inherits the site's
   Roboto stack rather than pulling in Outfit, so these pages do not read as
   bolted on to a Roboto site.
   ========================================================================== */

.cmp {
    --berry: #CE346B;
    --berry-800: #BC1E5E;
    --berry-100: #FFF3F8;
    --berry-200: #FFE6F6;
    --blue: #251A56;
    --blue-100: #E8E8F7;
    --ink: #3d3d4a;
    --muted: #7c7c8a;
    --line: #e7e7ee;
}

/* --- Hero ---------------------------------------------------------------- */

.cmp-hero {
    background: linear-gradient(135deg, #FFF3F8 0%, #FDEDF6 40%, #EFEAFB 100%);
    padding: 150px 0 70px;
    text-align: center;
}

.cmp-hero h1 {
    color: var(--blue);
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 18px;
}

/* The two-tone headline signature: blue line, one berry word. */
.cmp-hl { color: var(--berry); }

.cmp-hero .cmp-lede {
    color: var(--ink);
    font-size: 1.15rem;
    line-height: 1.65;
    max-width: 760px;
    margin: 0 auto;
}

.cmp-verified {
    display: inline-block;
    margin-top: 22px;
    padding: 7px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .75);
    color: var(--muted);
    font-size: .8rem;
    letter-spacing: .02em;
}

/* --- Sections ------------------------------------------------------------ */

.cmp-section { padding: 60px 0; }
.cmp-section--tint { background: var(--berry-100); }

.cmp-section h2 {
    color: var(--blue);
    font-weight: 700;
    margin-bottom: 10px;
}

.cmp-section h3 {
    color: var(--blue);
    font-weight: 600;
    font-size: 1.25rem;
    margin: 34px 0 12px;
}

.cmp-section p {
    color: var(--ink);
    font-size: 1.02rem;
    line-height: 1.7;
}

.cmp-sub {
    color: var(--muted);
    font-size: 1rem;
    margin-bottom: 26px;
}

/* --- Comparison tables ---------------------------------------------------
   Wrapped in .cmp-table-wrap so a wide table scrolls inside its own box on a
   phone instead of pushing the page sideways. Most operators read these
   between events, on a phone.
   ------------------------------------------------------------------------- */

.cmp-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 16px;
    border: 1px solid var(--line);
    background: #fff;
    margin: 22px 0;
}

.cmp-table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    font-size: .95rem;
}

.cmp-table th,
.cmp-table td {
    padding: 14px 18px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--line);
    line-height: 1.5;
}

.cmp-table thead th {
    background: var(--blue);
    color: #fff;
    font-weight: 600;
    font-size: .9rem;
    border-bottom: none;
}

.cmp-table thead th:first-child { border-top-left-radius: 15px; }
.cmp-table thead th:last-child  { border-top-right-radius: 15px; }

.cmp-table tbody tr:last-child td { border-bottom: none; }
.cmp-table tbody tr:nth-child(even) { background: #fafaff; }

/* First column is the feature label, second is always LumaBooth. */
.cmp-table td:first-child {
    color: var(--blue);
    font-weight: 600;
    width: 26%;
}

.cmp-table .cmp-us { background: rgba(206, 52, 107, .045); }
.cmp-table thead th.cmp-us { background: var(--berry); }

.cmp-scroll-hint {
    display: none;
    color: var(--muted);
    font-size: .82rem;
    margin: -12px 0 20px;
}

@media (max-width: 767px) {
    .cmp-scroll-hint { display: block; }
}

/* --- Community bar chart ------------------------------------------------- */

.cmp-chart { margin: 30px 0 10px; }

.cmp-bar-row {
    display: grid;
    grid-template-columns: 210px 1fr auto;
    align-items: center;
    gap: 16px;
    padding: 9px 0;
}

.cmp-bar-label {
    color: var(--blue);
    font-size: .92rem;
    font-weight: 500;
    line-height: 1.35;
}

.cmp-bar-track {
    background: var(--blue-100);
    border-radius: 999px;
    height: 26px;
    overflow: hidden;
}

.cmp-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: #b9b9dd;
}

.cmp-bar-value {
    color: var(--blue);
    font-weight: 700;
    font-size: .95rem;
    min-width: 68px;
    text-align: right;
}

.cmp-bar-row--us .cmp-bar-label,
.cmp-bar-row--us .cmp-bar-value { color: var(--berry); font-weight: 700; }
.cmp-bar-row--us .cmp-bar-fill  { background: linear-gradient(90deg, var(--berry) 0%, #E25A91 100%); }

@media (max-width: 640px) {
    .cmp-bar-row { grid-template-columns: 1fr auto; gap: 6px 12px; }
    .cmp-bar-track { grid-column: 1 / -1; height: 20px; }
}

/* --- Stat tiles ---------------------------------------------------------- */

.cmp-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 18px;
    margin: 30px 0;
}

.cmp-stat {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 26px 22px;
    text-align: center;
}

.cmp-stat-num {
    color: var(--berry);
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1.1;
    display: block;
}

.cmp-stat-label {
    color: var(--ink);
    font-size: .9rem;
    line-height: 1.45;
    margin-top: 8px;
    display: block;
}


/* --- Timeline ------------------------------------------------------------ */

.cmp-timeline {
    position: relative;
    margin: 34px 0 10px;
    padding-left: 26px;
}

.cmp-timeline::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: linear-gradient(180deg, var(--berry) 0%, var(--blue) 100%);
}

.cmp-milestone { position: relative; padding: 0 0 26px 18px; }

.cmp-milestone::before {
    content: "";
    position: absolute;
    left: -26px;
    top: 4px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--berry);
}

.cmp-milestone-year {
    color: var(--berry);
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .04em;
}

.cmp-milestone-body {
    color: var(--ink);
    font-size: .98rem;
    line-height: 1.6;
    margin-top: 3px;
}

/* --- Cards (hub index) --------------------------------------------------- */

.cmp-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 22px;
    margin-top: 34px;
}

.cmp-card {
    display: block;
    background: #fff;
    border: 1px solid var(--line);
    /* squircle, per the brand's photo-frame motif */
    border-radius: 24px;
    padding: 28px 26px;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.cmp-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(37, 26, 86, .1);
    border-color: rgba(206, 52, 107, .3);
    text-decoration: none;
}

.cmp-card h3 {
    color: var(--blue);
    font-size: 1.12rem;
    font-weight: 700;
    margin: 0 0 8px;
}

.cmp-card p {
    color: var(--ink);
    font-size: .93rem;
    line-height: 1.6;
    margin: 0;
}

.cmp-card-more {
    display: inline-block;
    margin-top: 14px;
    color: var(--berry);
    font-weight: 600;
    font-size: .9rem;
}

/* --- Callout ------------------------------------------------------------- */

.cmp-callout {
    background: var(--blue);
    border-radius: 24px;
    padding: 38px 34px;
    color: #fff;
    margin: 34px 0;
}

.cmp-callout h3 { color: #fff; margin: 0 0 10px; font-size: 1.3rem; font-weight: 700; }
.cmp-callout p  { color: rgba(255, 255, 255, .86); margin: 0; line-height: 1.7; }
.cmp-callout strong { color: #fff; }

/* --- Pick lists ---------------------------------------------------------- */

.cmp-picks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 22px;
    margin-top: 26px;
}

.cmp-pick {
    border-radius: 22px;
    padding: 28px 26px;
    border: 1px solid var(--line);
    background: #fff;
}

.cmp-pick--us { border-color: rgba(206, 52, 107, .35); background: var(--berry-100); }

.cmp-pick h3 { margin-top: 0; font-size: 1.08rem; }
.cmp-pick--us h3 { color: var(--berry); }

.cmp-pick ul { list-style: none; padding: 0; margin: 0; }

.cmp-pick li {
    position: relative;
    padding: 0 0 10px 24px;
    color: var(--ink);
    font-size: .95rem;
    line-height: 1.55;
}

.cmp-pick li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 9px;
    height: 9px;
    border-radius: 3px;
    background: #c8c8dd;
}

.cmp-pick--us li::before { background: var(--berry); }

/* --- FAQ ----------------------------------------------------------------- */

.cmp-faq { margin-top: 26px; }

.cmp-faq-item {
    border-bottom: 1px solid var(--line);
    padding: 20px 0;
}

.cmp-faq-item:last-child { border-bottom: none; }

.cmp-faq-q {
    color: var(--blue);
    font-weight: 700;
    font-size: 1.02rem;
    margin: 0 0 8px;
}

.cmp-faq-a { margin: 0; color: var(--ink); line-height: 1.7; }

/* --- CTA ----------------------------------------------------------------- */

.cmp-cta {
    text-align: center;
    background: linear-gradient(135deg, #FFF3F8 0%, #EFEAFB 100%);
    padding: 64px 0;
}

.cmp-cta h2 { color: var(--blue); font-weight: 700; margin-bottom: 12px; }
.cmp-cta p  { color: var(--ink); max-width: 620px; margin: 0 auto 26px; line-height: 1.7; }

/* Berry pill button. The brand puts Spicy Berry on CTAs 90% of the time. */
.cmp-btn {
    display: inline-block;
    background: var(--berry);
    color: #fff !important;
    border-radius: 999px;
    padding: 15px 38px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: background .16s ease, transform .16s ease;
}

.cmp-btn:hover {
    background: var(--berry-800);
    transform: translateY(-2px);
    text-decoration: none;
    color: #fff !important;
}

.cmp-btn--ghost {
    background: transparent;
    color: var(--berry) !important;
    border: 2px solid var(--berry);
    margin-left: 10px;
}

.cmp-btn--ghost:hover { background: var(--berry); color: #fff !important; }

@media (max-width: 575px) {
    .cmp-btn--ghost { margin-left: 0; margin-top: 12px; }
}

/* --- Sibling links and footnote ------------------------------------------ */

.cmp-siblings { padding: 54px 0; border-top: 1px solid var(--line); }

.cmp-siblings h2 { font-size: 1.3rem; margin-bottom: 18px; }

.cmp-sibling-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.cmp-sibling-list a {
    display: inline-block;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 10px 20px;
    color: var(--blue);
    font-size: .92rem;
    font-weight: 500;
    text-decoration: none;
    background: #fff;
    transition: border-color .16s ease, color .16s ease;
}

.cmp-sibling-list a:hover {
    border-color: var(--berry);
    color: var(--berry);
    text-decoration: none;
}

.cmp-footnote {
    padding: 30px 0 60px;
    color: var(--muted);
    font-size: .86rem;
    line-height: 1.7;
}

.cmp-footnote a { color: var(--berry); }

@media (max-width: 767px) {
    .cmp-hero { padding: 120px 0 50px; }
    .cmp-section { padding: 44px 0; }
    .cmp-callout, .cmp-pick, .cmp-card { padding: 24px 20px; }
}

/* --- Platform support matrix ---------------------------------------------
   Windows / Mac / iPad / iPhone / Android across every app on these pages.
   Rendered as a table so it stays readable to a screen reader and to a
   crawler that never executes CSS. Filled pip = supported.
   ------------------------------------------------------------------------- */

.cmp-matrix { width: 100%; min-width: 620px; border-collapse: collapse; }

.cmp-matrix th,
.cmp-matrix td {
    padding: 13px 10px;
    text-align: center;
    border-bottom: 1px solid var(--line);
    font-size: .9rem;
}

.cmp-matrix thead th {
    color: var(--blue);
    font-weight: 600;
    font-size: .82rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-bottom: 2px solid var(--line);
}

.cmp-matrix th[scope="row"] {
    text-align: left;
    color: var(--blue);
    font-weight: 600;
    width: 30%;
    padding-left: 18px;
}

.cmp-matrix tbody tr:last-child td,
.cmp-matrix tbody tr:last-child th { border-bottom: none; }

.cmp-matrix .cmp-row-us {
    background: linear-gradient(90deg, rgba(206, 52, 107, .09) 0%, rgba(206, 52, 107, .03) 100%);
}

.cmp-matrix .cmp-row-us th[scope="row"] { color: var(--berry); font-weight: 700; }

/* Pips. The text inside is for screen readers and for anything reading the
   raw HTML, which on these pages includes the crawlers we are writing for. */
.cmp-pip {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--blue-100);
    border: 2px solid #d3d3e6;
    vertical-align: middle;
}

.cmp-pip--yes { background: var(--berry); border-color: var(--berry); }
.cmp-row-us .cmp-pip--yes { box-shadow: 0 0 0 4px rgba(206, 52, 107, .16); }

.cmp-pip--part { background: #fff; border-color: var(--berry); border-style: dashed; }

.cmp-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.cmp-matrix-count {
    font-weight: 700;
    color: var(--blue);
    font-size: .9rem;
}

.cmp-row-us .cmp-matrix-count { color: var(--berry); }

.cmp-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 14px;
    color: var(--muted);
    font-size: .84rem;
    align-items: center;
}

.cmp-legend span { display: inline-flex; align-items: center; gap: 7px; }

/* --- Review cards ---------------------------------------------------------
   Verbatim App Store reviews from the cached review data in this repo. Quotes
   are reproduced exactly, including the reviewer's own punctuation, so anyone
   can search the App Store and find them.
   ------------------------------------------------------------------------- */

.cmp-reviews {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 20px;
    margin: 30px 0 10px;
}

.cmp-review {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 26px 24px;
    display: flex;
    flex-direction: column;
}

.cmp-review-stars {
    color: var(--berry);
    font-size: .95rem;
    letter-spacing: .12em;
    margin-bottom: 10px;
}

.cmp-review-title {
    color: var(--blue);
    font-weight: 700;
    font-size: 1rem;
    margin: 0 0 8px;
}

.cmp-review-body {
    color: var(--ink);
    font-size: .95rem;
    line-height: 1.6;
    margin: 0 0 16px;
    flex: 1 1 auto;
}

.cmp-review-meta {
    color: var(--muted);
    font-size: .82rem;
    margin: 0;
}

.cmp-rating-line {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 12px 24px;
    margin-bottom: 6px;
}

.cmp-rating-score { color: var(--berry); font-weight: 700; font-size: 1.5rem; line-height: 1; }
.cmp-rating-note  { color: var(--ink); font-size: .93rem; }

/* --- Inline links ---------------------------------------------------------
   The site's default anchor colour is a grey that reads as disabled text
   inside these sections. Links in body copy take Spicy Berry, which is the
   brand's accent and makes them obviously clickable.
   ------------------------------------------------------------------------- */

.cmp-section p a,
.cmp-section li a,
.cmp-footnote a,
.cmp-table a,
.cmp-callout a {
    color: var(--berry);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    font-weight: 500;
}

.cmp-section p a:hover,
.cmp-section li a:hover,
.cmp-footnote a:hover,
.cmp-table a:hover,
.cmp-callout a:hover {
    color: var(--berry-800);
    text-decoration: underline;
}

/* Inside the dark Bayern Blue callout a berry link is too low-contrast. */
.cmp-callout a { color: #FFA6D7; }
.cmp-callout a:hover { color: #fff; }

/* The pill CTAs are anchors too, so keep them free of the underline. */
.cmp-section p a.cmp-btn,
.cmp-section p a.cmp-btn:hover { text-decoration: none; font-weight: 600; }

/* --- Interactive device-count calculator ---------------------------------
   The table is server-rendered at the 2-device default so the prices are in
   crawlable HTML. The slider only rewrites numbers that are already there, so
   the page still works, and still gets indexed, with JavaScript switched off.
   ------------------------------------------------------------------------- */

.cmp-calc {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 28px 26px;
    margin: 30px 0;
}

.cmp-calc-controls {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.cmp-calc-label { color: var(--blue); font-weight: 600; font-size: .95rem; }

.cmp-calc-count {
    background: var(--berry);
    color: #fff;
    border-radius: 999px;
    padding: 6px 18px;
    font-weight: 700;
    font-size: 1rem;
    min-width: 92px;
    text-align: center;
}

.cmp-calc input[type="range"] {
    flex: 1 1 240px;
    accent-color: var(--berry);
    height: 26px;
}

.cmp-calc-row {
    display: grid;
    grid-template-columns: 190px 1fr 108px;
    align-items: center;
    gap: 14px;
    padding: 8px 0;
}

.cmp-calc-name { color: var(--blue); font-size: .92rem; font-weight: 500; line-height: 1.3; }
.cmp-calc-track { background: var(--blue-100); border-radius: 999px; height: 24px; overflow: hidden; }
.cmp-calc-fill {
    height: 100%;
    border-radius: 999px;
    background: #b9b9dd;
    transition: width .25s ease;
}
.cmp-calc-cost { color: var(--blue); font-weight: 700; font-size: .95rem; text-align: right; }

.cmp-calc-row--us .cmp-calc-name,
.cmp-calc-row--us .cmp-calc-cost { color: var(--berry); font-weight: 700; }
.cmp-calc-row--us .cmp-calc-fill { background: linear-gradient(90deg, var(--berry) 0%, #E25A91 100%); }

.cmp-calc-note { color: var(--muted); font-size: .84rem; margin: 16px 0 0; line-height: 1.6; }

@media (max-width: 640px) {
    .cmp-calc-row { grid-template-columns: 1fr 100px; }
    .cmp-calc-track { grid-column: 1 / -1; height: 18px; }
}

/* --- Entry-plan exclusions -------------------------------------------------
   What each competitor's advertised entry price does not include, taken from
   their own published pricing pages. Deliberately prominent: the advertised
   price is the number people compare, and it is the number that misleads.
   --------------------------------------------------------------------------- */

.cmp-gotchas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
    gap: 20px;
    margin: 28px 0 10px;
}

.cmp-gotcha {
    background: #fff;
    border: 1px solid var(--line);
    border-left: 4px solid var(--berry);
    border-radius: 18px;
    padding: 24px 22px;
}

.cmp-gotcha h4 {
    color: var(--blue);
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 2px;
}

.cmp-gotcha .cmp-gotcha-price {
    color: var(--muted);
    font-size: .86rem;
    margin: 0 0 14px;
}

.cmp-gotcha ul { list-style: none; padding: 0; margin: 0; }

.cmp-gotcha li {
    position: relative;
    padding: 0 0 9px 22px;
    color: var(--ink);
    font-size: .91rem;
    line-height: 1.5;
}

/* A small berry cross, so "not included" reads at a glance. */
.cmp-gotcha li::before {
    content: "\00d7";
    position: absolute;
    left: 2px;
    top: -1px;
    color: var(--berry);
    font-weight: 700;
    font-size: 1.05rem;
}

.cmp-gotcha--us { border-left-color: #7f79d3; background: var(--berry-100); }
.cmp-gotcha--us li::before { content: "\2713"; color: #2f9e5f; }

/* --- Direct answer summary ------------------------------------------------
   Sits directly under the hero. Written as short declarative sentences with
   the numbers inline, because this is the block that answer engines and
   language models lift when someone asks "which photo booth software is
   cheapest" or "does LumaBooth print without a print server".
   --------------------------------------------------------------------------- */

.cmp-answer {
    background: #fff;
    border: 1px solid var(--line);
    border-top: 4px solid var(--berry);
    border-radius: 22px;
    padding: 30px 28px;
    margin: -34px 0 0;
    position: relative;
    z-index: 2;
    box-shadow: 0 10px 30px rgba(37, 26, 86, .07);
}

.cmp-answer h2 {
    font-size: 1.05rem !important;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--muted) !important;
    margin: 0 0 14px !important;
    font-weight: 600 !important;
}

.cmp-answer ul { list-style: none; padding: 0; margin: 0; }

.cmp-answer li {
    position: relative;
    padding: 0 0 12px 26px;
    color: var(--ink);
    font-size: 1rem;
    line-height: 1.6;
}

.cmp-answer li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--berry);
}

.cmp-answer li strong { color: var(--blue); }

/* --- Methodology ---------------------------------------------------------- */

.cmp-method {
    background: var(--blue);
    border-radius: 24px;
    padding: 34px 32px;
    color: rgba(255, 255, 255, .87);
    margin: 30px 0;
}

.cmp-method h3 { color: #fff; margin: 0 0 14px; font-size: 1.2rem; font-weight: 700; }
.cmp-method p  { color: rgba(255, 255, 255, .87) !important; line-height: 1.7; margin: 0 0 12px; }
.cmp-method ol { margin: 0 0 12px; padding-left: 20px; }
.cmp-method li { color: rgba(255, 255, 255, .87); line-height: 1.65; padding-bottom: 9px; }
.cmp-method strong { color: #fff; }
.cmp-method a { color: #FFA6D7; }

/* --- Switching block ------------------------------------------------------
   The real objection is never price, it is the weekend lost to rebuilding
   templates. Numbered steps, so it reads as a job with an end.
   --------------------------------------------------------------------------- */

.cmp-switch { margin: 28px 0 10px; }

.cmp-switch-steps {
    counter-reset: cmpstep;
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
}

.cmp-switch-steps li {
    counter-increment: cmpstep;
    position: relative;
    padding: 0 0 18px 52px;
    color: var(--ink);
    font-size: .98rem;
    line-height: 1.6;
}

.cmp-switch-steps li::before {
    content: counter(cmpstep);
    position: absolute;
    left: 0;
    top: -2px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--berry-200);
    color: var(--berry-800);
    font-weight: 700;
    font-size: .95rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cmp-switch-steps li strong { color: var(--blue); }

.cmp-keep {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 6px 0 20px;
    list-style: none;
    padding: 0;
}

.cmp-keep li {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 8px 16px;
    font-size: .88rem;
    color: var(--blue);
    font-weight: 500;
}

.cmp-keep li::before { content: "\2713  "; color: #2f9e5f; font-weight: 700; }