/* Guided checkout (waves 1-2, owner decisions 28-30/09/2026).
 * The questions, the plan card, the editor, the confirmation and the payment step that sit
 * on top of the builder page (checkout_tools.html) while config.CHECKOUT_GUIDED_ENABLED or
 * ?flow=guided is on. Ported from the approved v6 prototype (design work ck2/kit/ck_base.css),
 * every rule scoped under .cg so the builder below keeps its own styles untouched. */

.cg {
    --cg-bg: #f6f9fc; --cg-surface: #fff;
    --cg-line: #e6ebf1; --cg-line-2: #d7e1ea; --cg-line-3: #b9c8d8; --cg-ring-rest: #7d8fa5;
    --cg-navy: #04143d; --cg-ink: #0f2447; --cg-muted: #526484; --cg-faint: #5d7089;
    --cg-blue: #046bfc; --cg-blue-ink: #0353c9; --cg-blue-tint: #eaf2ff;
    --cg-orange: #ff9900; --cg-orange-2: #eb8b00;
    --cg-green: #047857; --cg-green-tint: #e3f5ec;
    --cg-amber: #92400e; --cg-amber-tint: #fef3c7;
    --cg-red: #b91c1c;
    --cg-sh-sm: 0 1px 3px rgba(10,37,64,.09), 0 1px 2px rgba(10,37,64,.05);
    --cg-sh-md: 0 2px 5px rgba(50,50,93,.08), 0 7px 14px rgba(50,50,93,.08);
    --cg-sh-lg: 0 6px 12px rgba(50,50,93,.09), 0 15px 35px rgba(50,50,93,.1);
    color: var(--cg-ink); font-size: 15.5px; line-height: 1.55;
    max-width: 1120px; margin: 0 auto; padding: 30px 16px 120px;
}
.cg[hidden] { display: none !important; }
/* the builder stays in the page (it keeps the state, the quote and the payment dialog) but
   out of sight while the guided screens run; a failed guided script removes cg-on */
body.cg-on .checkout-bg { display: none; }
body.cg-on { background: #f6f9fc; }
.cg *, .cg *::before, .cg *::after { box-sizing: border-box; }
/* :where keeps these at element weight, so .cg-link / .cg-btn-blue keep their colours */
:where(.cg) button, :where(.cg) input, :where(.cg) select { font: inherit; color: inherit; }
.cg :focus-visible { outline: 2px solid var(--cg-blue); outline-offset: 2px; }
.cg .num { font-variant-numeric: tabular-nums; }
.cg .cg-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cg [hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { .cg * { transition: none !important; animation: none !important; } }

/* ---- columns ---- */
.cg-col { max-width: 760px; margin: 0 auto; }
.cg-col.wide { max-width: 820px; }
.cg-desk { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; align-items: start; max-width: 1080px; margin: 0 auto; }
@media (max-width: 900px) { .cg-desk { grid-template-columns: minmax(0, 1fr); } }

/* ---- question heads ---- */
.cg-title { font-size: 1.9rem; line-height: 1.2; font-weight: 700; color: var(--cg-navy); margin: 0 0 8px; letter-spacing: -.02em; text-wrap: balance; }
.cg-title:focus { outline: none; }
.cg-title .cg-kk { display: block; font-size: 12px; line-height: 1.55; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--cg-faint); margin: 0 0 10px; }
.cg-help { color: var(--cg-muted); margin: 0 0 22px; max-width: 62ch; }
@media (max-width: 600px) { .cg-title { font-size: 1.5rem; } .cg { padding-top: 24px; } }

/* ---- answer tiles ---- */
.cg-tiles { border: 0; margin: 0; padding: 0; display: grid; gap: 12px; min-width: 0; }
.cg-tiles.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cg-tiles.two .span2 { grid-column: 1 / -1; }
@media (max-width: 600px) { .cg-tiles.two { grid-template-columns: minmax(0, 1fr); } }
.cg-tiles legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.cg-tile { position: relative; display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 12px 16px; background: var(--cg-surface); border: 1px solid var(--cg-line-2); border-radius: 10px; box-shadow: var(--cg-sh-sm); cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.cg-tile:hover { border-color: var(--cg-line-3); }
.cg-tile input { position: absolute; opacity: 0; pointer-events: none; }
.cg-tile .t-body { flex: 1; min-width: 0; }
.cg-tile .t-title { display: block; font-weight: 600; color: var(--cg-navy); font-size: 1rem; line-height: 1.35; }
.cg-tile .t-sub { display: block; font-size: .85rem; color: var(--cg-muted); margin-top: 2px; }
.cg-tile .radio { width: 19px; height: 19px; border-radius: 50%; border: 1.5px solid var(--cg-ring-rest); flex-shrink: 0; display: grid; place-items: center; background: #fff; }
.cg-tile .radio.box { border-radius: 5px; order: -1; }
.cg-tile .radio svg { width: 11px; height: 11px; opacity: 0; color: #fff; }
.cg-tile:has(input:checked) { border-color: var(--cg-blue); box-shadow: 0 0 0 1px var(--cg-blue), var(--cg-sh-md); background: #fbfdff; }
.cg-tile:has(input:checked) .radio { background: var(--cg-blue); border-color: var(--cg-blue); }
.cg-tile:has(input:checked) .radio svg { opacity: 1; }
.cg-tile:has(input:focus-visible) { outline: 2px solid var(--cg-blue); outline-offset: 2px; }
.cg-tile.off { cursor: default; box-shadow: none; background: #f7f9fc; border-style: dashed; }
.cg-tile.off:hover { border-color: var(--cg-line-2); }
.cg-tile.off .t-title { color: var(--cg-muted); }
.cg-soon { font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--cg-muted); background: #eef2f7; border-radius: 99px; padding: 3px 9px; flex-shrink: 0; }
.cg-agency-talk { margin: 10px 0 0 2px; font-size: .88rem; }
.cg-agency-talk a { color: var(--cg-blue-ink); }
.cg .smm9-tile { flex-shrink: 0; }

/* goals: tile + its info button + the explanation under it */
.cg-goal { position: relative; }
.cg-goal .cg-tile { padding-right: 52px; height: 100%; }
.cg-info { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; border: 0; background: none; color: var(--cg-faint); cursor: pointer; display: grid; place-items: center; }
.cg-info:hover, .cg-info[aria-expanded="true"] { color: var(--cg-blue-ink); background: var(--cg-blue-tint); }
.cg-info svg { width: 19px; height: 19px; }
.cg-info-row { grid-column: 1 / -1; background: #f7f9fc; border: 1px solid var(--cg-line-2); border-radius: 10px; padding: 12px 16px; font-size: .9rem; color: var(--cg-muted); }
.cg-info-row h2 { font-size: .95rem; margin: 0 0 6px; color: var(--cg-navy); }
.cg-info-row p { margin: 0 0 6px; } .cg-info-row p:last-child { margin: 0; }
.cg-info-row b { color: var(--cg-navy); display: block; font-size: .82rem; }

/* ---- footers and navigation ---- */
.cg-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin: 14px 0 0; font-size: .86rem; color: var(--cg-faint); }
.cg-nav { position: sticky; bottom: 0; z-index: 5; margin-top: 16px; padding: 18px 0 calc(14px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(to bottom, rgba(246,249,252,0), var(--cg-bg) 40%); }
.cg-nav-in { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.cg-go { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.cg-so-far { margin: 0; text-align: right; line-height: 1.3; }
.cg-so-far .sf-l { display: block; font-size: .8rem; color: var(--cg-muted); }
.cg-so-far .sf-v { font-size: .86rem; color: var(--cg-faint); white-space: nowrap; }
.cg-so-far .sf-v b { font-size: 1.1rem; font-weight: 700; color: var(--cg-navy); }
@media (max-width: 600px) {
    .cg-nav-in { flex-wrap: wrap; row-gap: 8px; }
    .cg-go { display: contents; }
    .cg-so-far { order: -1; flex-basis: 100%; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; text-align: left; padding-bottom: 8px; border-bottom: 1px solid var(--cg-line); }
}
.cg-err { color: var(--cg-red); font-size: .9rem; margin: 12px 0 0; }
.cg-link { background: none; border: 0; padding: 6px 2px; color: var(--cg-blue-ink); font-weight: 500; cursor: pointer; text-decoration: none; font-size: .95rem; text-align: left; }
.cg-link:hover { text-decoration: underline; }
.cg-link.sm { font-size: .86rem; padding: 4px 2px; }
.cg-btn-blue { background: var(--cg-blue); color: #fff; border: 0; border-radius: 8px; padding: 12px 22px; font-weight: 600; cursor: pointer; box-shadow: var(--cg-sh-sm); }
.cg-btn-blue:hover { background: var(--cg-blue-ink); }
.cg-btn-orange { display: flex; width: 100%; justify-content: center; align-items: center; gap: 8px; min-height: 52px; background: var(--cg-orange); color: var(--cg-navy); border: 0; border-radius: 8px; font-weight: 700; font-size: 1.02rem; cursor: pointer; box-shadow: 0 4px 10px -2px rgba(255,153,0,.4); text-decoration: none; }
.cg-btn-orange:hover { background: var(--cg-orange-2); }
.cg-btn-orange svg { width: 18px; height: 18px; }
.cg-btn-orange[aria-busy="true"] { opacity: .75; cursor: progress; }
.cg-btn-ghost { background: #fff; border: 1px solid var(--cg-line-2); border-radius: 8px; padding: 8px 14px; font-weight: 600; color: var(--cg-navy); cursor: pointer; font-size: .9rem; }
.cg-btn-ghost:hover { border-color: var(--cg-line-3); }
.cg-btn-ghost.rm { color: var(--cg-muted); font-weight: 500; }
.cg-reassure { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-top: 6px; font-size: .86rem; color: var(--cg-muted); }
.cg-reassure span { display: inline-flex; align-items: center; gap: 6px; }
.cg-reassure svg { width: 15px; height: 15px; color: var(--cg-green); flex-shrink: 0; }
.cg-reassure .rs-card svg { color: var(--cg-muted); }

/* ---- sizes (question 4 and the editor) ---- */
.cg-sizes { display: grid; gap: 10px; }
.cg-size { position: relative; display: flex; gap: 12px; background: #fff; border: 1px solid var(--cg-line); border-radius: 12px; box-shadow: var(--cg-sh-sm); padding: 14px 16px; }
.cg-size-main { flex: 1; min-width: 0; }
.cg-size-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.cg-size-price { position: absolute; top: 14px; right: 16px; font-weight: 600; color: var(--cg-navy); white-space: nowrap; }
.cg-size-main > .cg-cg:first-of-type legend { padding-right: 96px; }
.cg-size-price s { color: var(--cg-faint); font-weight: 400; margin-right: 4px; }
.cg-cg { border: 0; margin: 0 0 4px; padding: 0; min-width: 0; }
.cg-cg + .cg-cg { margin-top: 10px; }
.cg-cg legend { font-weight: 600; color: var(--cg-navy); padding: 0; }
.cg-cg legend.sub { font-weight: 500; font-size: .9rem; color: var(--cg-ink); }
.cg-cg legend .inline-help { display: block; font-weight: 400; font-size: .82rem; color: var(--cg-faint); }
.cg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cg-chip { position: relative; display: inline-flex; }
.cg-chip input { position: absolute; opacity: 0; pointer-events: none; }
.cg-chip span { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--cg-line-2); background: #fff; border-radius: 99px; padding: 6px 12px; font-size: .86rem; color: var(--cg-navy); cursor: pointer; }
.cg-chip span:hover { border-color: var(--cg-line-3); }
.cg-chip input:checked + span { background: var(--cg-blue-tint); border-color: var(--cg-blue); color: var(--cg-blue-ink); font-weight: 600; box-shadow: 0 0 0 1px var(--cg-blue); }
.cg-chip input:focus-visible + span { outline: 2px solid var(--cg-blue); outline-offset: 2px; }
.cg-chip input:disabled + span { opacity: .45; cursor: not-allowed; }
.cg-sel { appearance: none; -webkit-appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23526484' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 16px; border: 1px solid var(--cg-line-2); border-radius: 99px; padding: 6px 34px 6px 12px; font-size: .86rem; color: var(--cg-navy); max-width: 100%; cursor: pointer; }
.cg-sel.on { background-color: var(--cg-blue-tint); border-color: var(--cg-blue); color: var(--cg-blue-ink); font-weight: 600; }
.cg-sel.block { border-radius: 8px; padding: 9px 34px 9px 12px; font-size: .92rem; }
.cg-size-help { font-size: .82rem; color: var(--cg-faint); margin-top: 6px; }
.cg-size-warn { font-size: .82rem; color: var(--cg-amber); margin-top: 6px; }

/* ---- the plan card ---- */
.cg-rec { background: var(--cg-surface); border: 1px solid var(--cg-line); border-radius: 14px; box-shadow: var(--cg-sh-lg); padding: 28px; max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 24px 36px; }
.cg-rec-r { border-left: 1px solid var(--cg-line); padding-left: 32px; }
@media (max-width: 860px) { .cg-rec { grid-template-columns: minmax(0, 1fr); } .cg-rec-r { border-left: 0; padding-left: 0; border-top: 1px solid var(--cg-line); padding-top: 18px; } }
@media (max-width: 600px) { .cg-rec { padding: 22px 18px; } }
.cg-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--cg-blue-tint); color: var(--cg-blue-ink); font-size: .78rem; font-weight: 600; padding: 4px 10px; border-radius: 99px; }
.cg-rec-name { font-size: 1.45rem; font-weight: 700; color: var(--cg-navy); line-height: 1.25; margin: 14px 0 4px; letter-spacing: -.01em; }
.cg-rec-name:focus { outline: none; }
.cg-rec-price { font-size: 1.05rem; color: var(--cg-faint); margin: 2px 0; }
.cg-rec-price b { font-size: 1.85rem; font-weight: 700; color: var(--cg-navy); letter-spacing: -.02em; margin-right: 4px; }
.cg-meta { font-size: .88rem; color: var(--cg-muted); margin: 6px 0 0; }
.cg-cur { font-size: .82rem; color: var(--cg-faint); margin: 6px 0 0; }
.cg-cur button { background: none; border: 0; color: var(--cg-blue-ink); cursor: pointer; font-size: .82rem; padding: 0; text-decoration: underline; }
.cg-cur-pick { display: inline-flex; gap: 4px; margin-left: 6px; }
.cg-cur-pick button { text-decoration: none; border: 1px solid var(--cg-line-2); border-radius: 99px; padding: 1px 8px; }
.cg-cur-pick button[aria-pressed="true"] { background: var(--cg-blue-tint); border-color: var(--cg-blue); font-weight: 600; }
.cg-trial { color: var(--cg-green); font-weight: 500; font-size: .95rem; margin: 12px 0 0; }
.cg-trial.neutral { color: var(--cg-ink); }
.cg-rec .cg-btn-orange { margin-top: 16px; }
.cg-rec-sub { display: flex; justify-content: center; margin-top: 8px; }
.cg-follows { font-size: .88rem; color: var(--cg-muted); margin: 14px 0 0; display: flex; gap: 8px; align-items: flex-start; }
.cg-follows svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--cg-blue); }
.cg-doors { border-top: 1px solid var(--cg-line); margin-top: 20px; padding-top: 14px; display: grid; gap: 4px; font-size: .9rem; color: var(--cg-muted); }
.cg-doors p { margin: 0; }
/* owner 02/10/2026: the full Review Requester offered next to the included requests */
.cg-review-door .cg-review-add { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; width: 100%; padding: 4px 0; text-align: left; }
.cg-review-door .cg-review-price { color: var(--cg-ink); font-weight: 600; white-space: nowrap; }
.cg-review-door .cg-review-price s { color: var(--cg-muted); font-weight: 400; }
.cg-h2 { font-size: .74rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--cg-faint); margin: 0 0 6px; }
.cg-lines { list-style: none; margin: 0; padding: 0; }
.cg-line { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--cg-line); }
.cg-line .l-name { font-weight: 600; color: var(--cg-navy); display: block; }
.cg-line .l-sub { font-size: .84rem; color: var(--cg-faint); display: block; }
.cg-line .l-price { font-weight: 600; color: var(--cg-navy); white-space: nowrap; padding-top: 2px; }
.cg-line .l-price.incl { color: var(--cg-green); }
.cg-line .l-price.neg { color: var(--cg-green); }
.cg-line .pct { width: 28px; height: 28px; border-radius: 8px; background: var(--cg-green-tint); color: var(--cg-green); display: grid; place-items: center; font-weight: 700; font-size: .8rem; }
.cg-every { font-size: .86rem; color: var(--cg-muted); margin: 12px 0 0; }
.cg-why { background: #f7f9fc; border: 1px solid var(--cg-line); border-radius: 10px; padding: 12px 14px; margin: 14px 0 0; font-size: .92rem; }
.cg-answers { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.cg-answers button { display: inline-flex; align-items: center; gap: 6px; background: #f1f4f8; border: 1px solid var(--cg-line); border-radius: 99px; padding: 3px 10px; color: var(--cg-ink); font-size: .82rem; cursor: pointer; }
.cg-answers button:hover { border-color: var(--cg-line-3); }
.cg-later { margin: 12px 0 0; font-size: .84rem; color: var(--cg-faint); }
.cg-talk { max-width: 640px; margin: 0 auto; background: var(--cg-surface); border: 1px solid var(--cg-line); border-radius: 14px; box-shadow: var(--cg-sh-lg); padding: 28px; }
.cg-talk .cg-btn-orange { margin-top: 18px; }
/* wave 3: the entry cases and the orders hint */
.cg-blocked { text-align: center; }
.cg-btn-block { display: block; text-align: center; text-decoration: none; margin-top: 18px; }
/* wave 3 (W3a): the booking window's three Font Awesome icons, drawn here because the
   checkout loads no icon font (Manage billing keeps its Font Awesome) */
#billing-custom-plan-modal .fa-solid { display: inline-block; width: 1em; height: 1em; vertical-align: -.125em; background-color: currentColor; -webkit-mask: var(--cg-fa) center / contain no-repeat; mask: var(--cg-fa) center / contain no-repeat; }
#billing-custom-plan-modal .fa-xmark { --cg-fa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); }
#billing-custom-plan-modal .fa-arrow-right { --cg-fa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
#billing-custom-plan-modal .fa-check { --cg-fa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E"); }
.cg-hint { margin: -10px 0 18px; padding: 10px 12px; border-radius: 10px; background: var(--cg-blue-tint); color: var(--cg-blue-ink); font-size: .9rem; }

/* ---- confirmation ---- */
.cg-card { background: var(--cg-surface); border: 1px solid var(--cg-line); border-radius: 12px; box-shadow: var(--cg-sh-md); padding: 24px; }
.cg-card h1 { font-size: 1.45rem; margin: 0 0 4px; color: var(--cg-navy); line-height: 1.3; }
.cg-card h1:focus { outline: none; }
.cg-card h1 small { display: block; font-size: 1rem; font-weight: 500; color: var(--cg-muted); }
.cg-recap { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: #f7f9fc; border: 1px solid var(--cg-line); border-radius: 10px; padding: 12px 14px; font-size: .95rem; margin-top: 14px; }
.cg-recap b { color: var(--cg-navy); }
.cg-then { font-size: .86rem; color: var(--cg-muted); margin: 6px 0 0; }
.cg-sec { font-size: .74rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--cg-faint); margin: 22px 0 6px; }
.cg-choice { display: flex; align-items: flex-start; gap: 12px; border: 1px solid var(--cg-line-2); border-radius: 10px; padding: 12px 14px; margin-top: 10px; cursor: pointer; background: #fff; }
.cg-choice input { accent-color: var(--cg-blue); width: 18px; height: 18px; margin-top: 3px; flex-shrink: 0; }
.cg-choice:has(input:checked) { border-color: var(--cg-blue); box-shadow: 0 0 0 1px var(--cg-blue); background: #fbfdff; }
.cg-choice .c-t { flex: 1; font-weight: 600; color: var(--cg-navy); }
.cg-choice .c-t small { display: block; font-weight: 400; color: var(--cg-muted); font-size: .84rem; margin-top: 2px; }
.cg-choice .c-p { font-weight: 600; color: var(--cg-navy); white-space: nowrap; }
@media (max-width: 600px) {
    .cg-choice { flex-wrap: wrap; }
    .cg-choice .c-p { flex-basis: 100%; padding-left: 30px; white-space: normal; }
}
.cg-badge { background: var(--cg-green-tint); color: var(--cg-green); font-size: .75rem; font-weight: 600; padding: 2px 8px; border-radius: 99px; margin-left: 8px; white-space: nowrap; }
.cg-timeline { list-style: none; padding: 0; margin: 10px 0 0; }
.cg-timeline li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; padding: 0 0 14px; position: relative; font-size: .93rem; }
.cg-timeline li::before { content: ''; position: absolute; left: 10px; top: 20px; bottom: 0; width: 2px; background: var(--cg-line); }
.cg-timeline li:last-child::before { display: none; }
.cg-timeline .tdot { width: 22px; height: 22px; border-radius: 50%; background: var(--cg-green-tint); border: 2px solid var(--cg-green); }
.cg-timeline li.next .tdot, .cg-timeline li.then .tdot { background: #fff; border-color: var(--cg-line-3); }
.cg-timeline .tt b { color: var(--cg-navy); display: block; }
.cg-timeline .tt small { color: var(--cg-faint); font-size: .83rem; display: block; }
.cg-timeline .tv { font-weight: 600; color: var(--cg-navy); white-space: nowrap; }
.cg-vat { font-size: .82rem; color: var(--cg-faint); margin: 2px 0 0; }
.cg-consents .ft-consent { margin: 12px 0 0; }
.cg-next { font-size: .86rem; color: var(--cg-muted); margin: 16px 0 0; }
.cg-card .cg-btn-orange { margin-top: 12px; }
.cg-trust { text-align: center; font-size: .84rem; color: var(--cg-muted); margin: 12px 0 0; }
.cg-trust small { display: block; color: var(--cg-faint); margin-top: 4px; }
.cg-notice { background: var(--cg-amber-tint); color: var(--cg-amber); border-radius: 10px; padding: 10px 12px; font-size: .9rem; margin: 12px 0 0; }
.cg-faq { margin-top: 20px; }
.cg-faq details { border-top: 1px solid var(--cg-line); padding: 10px 0; font-size: .9rem; }
.cg-faq summary { cursor: pointer; font-weight: 600; color: var(--cg-navy); }
.cg-faq p { margin: 6px 0 0; color: var(--cg-muted); }

/* the plan summary next to the confirmation and the editor */
.cg-sum { background: var(--cg-surface); border: 1px solid var(--cg-line); border-radius: 12px; box-shadow: var(--cg-sh-md); padding: 20px; position: sticky; top: 84px; }
.cg-sum h2 { font-size: 1.05rem; margin: 0 0 8px; color: var(--cg-navy); display: flex; justify-content: space-between; align-items: baseline; }
.cg-sum-line { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: .92rem; }
.cg-sum-line .l small { display: block; color: var(--cg-faint); font-size: .8rem; }
.cg-sum-line .r { font-weight: 600; color: var(--cg-navy); white-space: nowrap; }
.cg-sum-line .r.incl, .cg-sum-line .r.neg { color: var(--cg-green); }
.cg-sum-total { border-top: 1px solid var(--cg-line); margin-top: 8px; padding-top: 12px; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.cg-sum-total .t { font-weight: 600; color: var(--cg-navy); }
.cg-sum-total .v { font-size: 1.5rem; font-weight: 700; color: var(--cg-navy); }
.cg-sum-foot { font-size: .8rem; color: var(--cg-faint); text-align: right; }
.cg-quote { display: flex; align-items: center; justify-content: flex-end; gap: 6px; font-size: .78rem; color: var(--cg-faint); margin-top: 6px; }
.cg-quote i { width: 7px; height: 7px; border-radius: 50%; background: var(--cg-green); display: inline-block; }
.cg-quote[data-state="loading"] i { background: var(--cg-blue); animation: cg-pulse 1s infinite; }
.cg-quote[data-state="error"] i, .cg-quote[data-state="refused"] i { background: var(--cg-red); }
@keyframes cg-pulse { 50% { opacity: .3; } }
@media (max-width: 900px) { .cg-sum { position: static; } }

/* ---- the editor (C1 B) ---- */
.cg-ed-head { margin-bottom: 14px; }
.cg-ed-head h1 { margin: 6px 0 0; font-size: 1.6rem; color: var(--cg-navy); letter-spacing: -.01em; }
.cg-ed-head h1:focus { outline: none; }
/* P2 (owner 02/10/2026): on the pricing page the screens' headings are h2 (the page keeps its h1) */
.cg-ed-head h2 { margin: 6px 0 0; font-size: 1.6rem; color: var(--cg-navy); letter-spacing: -.01em; }
.cg-ed-head h2:focus, .cg-title:focus, .cg-rec-name:focus { outline: none; }
.cg-public-hero { max-width: 820px; margin: 0 auto 28px; text-align: center; }
.cg-public-hero h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1.1; font-weight: 800; color: var(--cg-navy); letter-spacing: -.03em; margin: 0 0 8px; text-wrap: balance; }
.cg-public-sub { font-size: 1.05rem; color: var(--cg-muted); margin: 0 0 12px; }
.cg-public-trust { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; font-size: .9rem; color: var(--cg-ink); }
.cg-public-trust li { display: inline-flex; align-items: center; gap: 6px; }
.cg-public-trust li::before { content: ''; width: 14px; height: 14px; flex-shrink: 0; background: var(--cg-green);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat; }
.cg-row { background: var(--cg-surface); border: 1px solid var(--cg-line); border-radius: 12px; box-shadow: var(--cg-sh-sm); padding: 14px 16px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; margin-bottom: 10px; }
.cg-row.in { border-color: var(--cg-line-2); }
.cg-row-name { font-weight: 600; color: var(--cg-navy); display: block; }
.cg-row-desc { font-size: .86rem; color: var(--cg-muted); display: block; }
.cg-row-right { display: flex; align-items: center; gap: 10px; }
.cg-row-price { font-weight: 600; color: var(--cg-navy); white-space: nowrap; }
.cg-row-price s { color: var(--cg-faint); font-weight: 400; margin-right: 4px; }
.cg-row-ctrl { grid-column: 2 / 4; }
@media (max-width: 600px) { .cg-row { grid-template-columns: auto minmax(0, 1fr); } .cg-row-right { grid-column: 1 / 3; justify-content: space-between; } .cg-row-ctrl { grid-column: 1 / 3; } }
.cg-more { margin-top: 10px; }
.cg-more > summary { cursor: pointer; font-size: .74rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--cg-faint); margin: 12px 0 10px; }
.cg-redeem-slot .plans-redeem-card { margin: 16px 0 0; }

/* ---- payment in the page (the builder's dialog, opened without a backdrop) ---- */
.cg-pay-strip { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--cg-line); border-radius: 12px; box-shadow: var(--cg-sh-sm); padding: 12px 16px; margin: 0 auto 14px; max-width: 1080px; }
.cg-pay-strip b { color: var(--cg-navy); }
.cg-pay-host { max-width: 1080px; margin: 0 auto; }
.cg-pay-host .ct-checkout-dialog[data-inline] { position: static; inset: auto; width: 100%; max-width: none; max-height: none; margin: 0; box-shadow: var(--cg-sh-md); border: 1px solid var(--cg-line); border-radius: 12px; overflow: visible; }
.cg-pay-host .ct-checkout-dialog[data-inline] .ct-checkout-dialog-body { overflow: visible; }
.cg-pay-host .ct-checkout-dialog[data-inline] .ct-checkout-close { display: none; }
@media (max-width: 860px) {
    .cg-pay-host .ct-checkout-dialog[data-inline] { height: auto; border-radius: 12px; }
}