/* Visual guide pages (build/guides_v2.py, 15 Oct). Site colours: ink #0E1614, orange #FF6B18,
   cream #FAF6EF / #F5F2EC, soft orange #FFF1E8, green #16A34A. Mobile first. */
.g-page { --ink: #0E1614; --or: #FF6B18; --soft: #FFF1E8; --cream: #F5F2EC; --green: #16A34A; --red: #E11D2E; --muted: #5B6461; --line: rgba(14, 22, 20, .1);
  font-family: Roboto, system-ui, sans-serif; color: var(--ink); text-align: left; font-size: 17px; line-height: 1.55; }
.fdc-guide .g-page p, .fdc-guide .g-page ul, .fdc-guide .g-page ol { margin: 0; }
.g-page .fdc-g-crumbs { margin: 0 0 18px; }
.g-h1 { margin: 6px 0 12px; font-size: clamp(32px, 6vw, 48px); line-height: 1.08; font-weight: 700; letter-spacing: -.02em; }
.g-h2 { margin: 0 0 18px; font-size: clamp(23px, 3.4vw, 30px); line-height: 1.2; font-weight: 700; letter-spacing: -.01em; }
.g-eyebrow { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--or); }
.g-block { margin: 56px 0 0; }
.g-text p { font-size: 18px; max-width: 46em; }
.g-page a:not(.g-btn):not(.g-rel):not(.g-hubcard) { color: var(--ink); text-decoration: underline; text-decoration-color: var(--or); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* hero */
.g-hero { display: grid; gap: 18px; align-items: center; }
.g-answer { margin: 0 0 22px !important; font-size: 20px; line-height: 1.45; color: #2A2D30; }
.g-btn { display: inline-block; padding: 17px 28px; border-radius: 8px; background: #FF6B18; color: #F5F5F5 !important; text-decoration: none !important; font-weight: 700; font-size: 17px; line-height: 1; box-shadow: inset 0 0 1px rgba(0, 0, 0, .5); }
.g-mini { margin: 14px 0 0 !important; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); }
.g-mini span { opacity: .5; }
.g-mini__ic { width: 18px; height: 18px; color: var(--green); }
.g-hero__art { display: flex; justify-content: center; }
.g-hero__svg { width: 100%; max-width: 360px; height: auto; }
@media (min-width: 760px) { .g-hero { grid-template-columns: 1.15fr .85fr; gap: 28px; } }

/* three facts */
.g-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 34px 0 0; }
.g-fact { padding: 18px 14px; background: #fff; border: 1px solid var(--line); border-radius: 16px; text-align: center; }
.g-fact b { display: block; font-size: clamp(22px, 4.2vw, 34px); line-height: 1.1; color: var(--or); letter-spacing: -.01em; }
.g-fact span { display: block; margin-top: 6px; font-size: 13.5px; line-height: 1.35; color: var(--muted); }

/* steps */
.g-steps { list-style: none; padding: 0; display: grid; gap: 12px; counter-reset: st; }
.g-steps li { counter-increment: st; position: relative; padding: 20px 18px 18px; background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.g-steps li::after { content: counter(st); position: absolute; top: 14px; right: 16px; font-size: 13px; font-weight: 700; color: var(--muted); opacity: .6; }
.g-step__ic { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: 14px; background: var(--soft); color: var(--or); margin-bottom: 12px; }
.g-step__ic .g-ic { width: 26px; height: 26px; }
.g-steps b { display: block; font-size: 17px; margin-bottom: 4px; }
.g-steps span:not(.g-step__ic) { display: block; font-size: 15px; color: var(--muted); line-height: 1.45; }
@media (min-width: 760px) { .g-steps--3 { grid-template-columns: repeat(3, 1fr); } .g-steps--4 { grid-template-columns: repeat(4, 1fr); } .g-steps--5 { grid-template-columns: repeat(5, 1fr); } .g-steps--5 li { padding: 18px 14px; } }

/* checklist */
.g-check { list-style: none; padding: 0; display: grid; gap: 10px; }
.g-check li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-radius: 14px; font-size: 16.5px; line-height: 1.4; }
.g-ck { flex: none; width: 26px; height: 26px; }
.g-check .is-ok .g-ck { color: #fff; fill: var(--green); stroke: #fff; }
.g-check .is-no .g-ck { color: #fff; fill: var(--red); stroke: #fff; }
@media (min-width: 760px) { .g-check { grid-template-columns: 1fr 1fr; } }

/* cards */
.g-cards { display: grid; gap: 12px; }
.g-card { padding: 22px 20px; background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.g-card__ic { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: 14px; background: var(--soft); color: var(--or); margin-bottom: 12px; }
.g-card__ic .g-ic { width: 26px; height: 26px; }
.g-card__logo { display: block; height: 52px; width: auto; margin-bottom: 12px; }
.g-card b { display: block; font-size: 18px; margin-bottom: 6px; }
.g-card span:not(.g-card__ic) { display: block; font-size: 15.5px; color: var(--muted); line-height: 1.45; }
@media (min-width: 760px) { .g-cards--2 { grid-template-columns: 1fr 1fr; } .g-cards--3 { grid-template-columns: repeat(3, 1fr); } .g-cards--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .g-cards--4 { grid-template-columns: repeat(4, 1fr); } }

/* timeline */
.g-tl { list-style: none; padding: 0 0 0 6px; position: relative; display: grid; gap: 18px; }
.g-tl::before { content: ""; position: absolute; left: 15px; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--line); }
.g-tl li { position: relative; padding-left: 40px; }
.g-tl__dot { position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 4px solid var(--muted); }
.g-tl .is-good .g-tl__dot { border-color: var(--green); }
.g-tl .is-warn .g-tl__dot { border-color: var(--or); }
.g-tl .is-bad .g-tl__dot { border-color: var(--red); background: var(--red); }
.g-tl b { display: block; font-size: 17px; }
.g-tl span:not(.g-tl__dot) { display: block; font-size: 15.5px; color: var(--muted); }
@media (min-width: 860px) {
  .g-tl { grid-auto-flow: column; grid-auto-columns: 1fr; padding: 0; gap: 14px; }
  .g-tl::before { left: 10px; right: 10px; top: 10px; bottom: auto; width: auto; height: 3px; }
  .g-tl li { padding: 36px 6px 0 0; }
  .g-tl__dot { top: 0; }
}

/* chart */
.g-chart { padding: 22px 18px 16px; background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow-x: auto; }
.g-chart svg { display: block; width: 100%; min-width: 520px; height: auto; }
.g-legend { display: flex; flex-wrap: wrap; gap: 18px; margin: 12px 0 0 !important; font-size: 14px; color: var(--muted); }
.g-legend i { display: inline-block; width: 14px; height: 14px; border-radius: 4px; margin-right: 6px; vertical-align: -2px; }
.g-note { margin: 10px 0 0 !important; font-size: 14px; color: var(--muted); }

/* callout */
.g-callout { display: flex; gap: 14px; align-items: flex-start; margin: 40px 0 0; padding: 20px 20px; border-radius: 16px; background: #EFF6FF; border: 1px solid #BFDBFE; }
.g-callout__ic { flex: none; width: 30px; height: 30px; color: #2563EB; }
.g-callout b { display: block; font-size: 18px; margin-bottom: 4px; }
.g-callout span { display: block; font-size: 16px; color: #2A2D30; }
.g-callout--good { background: #E9F8EF; border-color: #BBE7CB; }
.g-callout--good .g-callout__ic { color: var(--green); }
.g-callout--warn { background: var(--soft); border-color: #FFD3B8; }
.g-callout--warn .g-callout__ic { color: var(--or); }

/* image */
.g-media { display: grid; gap: 22px; align-items: center; }
.g-media figure { margin: 0; }
.g-media img { display: block; width: 100%; height: auto; border-radius: 18px; border: 1px solid var(--line); background: #fff; }
.g-media--photo img { aspect-ratio: 4 / 3; object-fit: cover; }
.g-media--phone img, .g-media--doc img { max-height: 460px; width: auto; max-width: 100%; margin: 0 auto; object-fit: contain; padding: 10px; }
.g-media figcaption { margin-top: 8px; font-size: 13.5px; color: var(--muted); text-align: center; }
.g-media__copy p { font-size: 18px; }
@media (min-width: 760px) { .g-media:not(.g-media--solo) { grid-template-columns: 1fr 1fr; } .g-media--solo figure { max-width: 620px; margin: 0 auto; } }

/* split */
.g-split { display: grid; gap: 12px; }
.g-split__col { padding: 22px 20px; border-radius: 16px; background: #fff; border: 1px solid var(--line); }
.g-split__col b { display: block; font-size: 18px; margin-bottom: 10px; }
.g-split__col ul { list-style: none; padding: 0; display: grid; gap: 8px; }
.g-split__col li { position: relative; padding-left: 22px; font-size: 16px; line-height: 1.4; }
.g-split__col li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.g-split__col.is-right { background: var(--soft); border-color: #FFD3B8; }
.g-split__col.is-right li::before { background: var(--or); }
@media (min-width: 760px) { .g-split { grid-template-columns: 1fr 1fr; } }

/* you do 60 seconds, we do the rest */
.g-nb { margin: 64px 0 0; padding: 30px 22px 28px; border-radius: 22px; background: var(--ink); color: #fff; text-align: center; }
.g-nb .g-h2 { color: #fff; }
.g-nb__grid { display: grid; gap: 12px; text-align: left; }
.g-nb__col { padding: 18px 18px 8px; border-radius: 16px; background: rgba(255, 255, 255, .06); }
.g-nb__us { background: rgba(255, 107, 24, .16); }
.g-nb__who { margin: 0 0 10px !important; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #FFB48A; }
.g-nb ul { list-style: none; padding: 0; }
.g-nb li { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 14px; }
.g-nb li .g-ic { flex: none; width: 26px; height: 26px; color: var(--or); margin-top: 1px; }
.g-nb li b { display: block; font-size: 16.5px; }
.g-nb li span { display: block; font-size: 14.5px; color: rgba(255, 255, 255, .7); }
.g-nb__money { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 18px 0 0; }
.g-nb__money div { padding: 14px 6px; border-radius: 14px; background: rgba(255, 255, 255, .08); }
.g-nb__money b { display: block; font-size: 30px; line-height: 1; color: #fff; }
.g-nb__money span { display: block; margin-top: 4px; font-size: 13.5px; color: rgba(255, 255, 255, .75); }
.g-nb__small { margin: 16px auto 22px !important; max-width: 40em; font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, .68); }
@media (min-width: 760px) { .g-nb { padding: 40px 40px 36px; } .g-nb__grid { grid-template-columns: .8fr 1.2fr; } .g-nb__us ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; } }

/* faq, related, sources */
.g-faq { border-bottom: 1px solid var(--line); }
.g-faq summary { cursor: pointer; list-style: none; padding: 18px 36px 18px 0; position: relative; font-size: 17.5px; font-weight: 700; }
.g-faq summary::-webkit-details-marker { display: none; }
.g-faq summary::after { content: "+"; position: absolute; right: 4px; top: 12px; font-size: 26px; font-weight: 400; color: var(--or); }
.g-faq[open] summary::after { content: "−"; }
.g-faq p { padding: 0 0 18px; font-size: 16.5px; color: #2A2D30; }
.g-rels, .g-hubgrid { display: grid; gap: 12px; }
.g-rel, .g-hubcard { display: block; padding: 20px; border-radius: 16px; background: #fff; border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: transform 150ms, box-shadow 150ms, border-color 150ms; }
.g-rel:hover, .g-hubcard:hover { transform: translateY(-2px); border-color: #FFC9A8; box-shadow: 0 10px 24px rgba(14, 22, 20, .07); }
.g-rel__sec { display: block; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--or); margin-bottom: 6px; }
.g-rel b, .g-hubcard b { display: block; font-size: 17.5px; line-height: 1.3; margin-bottom: 6px; }
.g-hubcard > span:not(.g-card__ic):not(.g-rel__go) { display: block; font-size: 15px; color: var(--muted); line-height: 1.45; }
.g-rel__go { display: block; margin-top: 10px; font-size: 14.5px; font-weight: 700; color: var(--or); }
@media (min-width: 760px) { .g-rels { grid-template-columns: repeat(3, 1fr); } .g-hubgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .g-hubgrid { grid-template-columns: repeat(3, 1fr); } }
.g-sources { margin: 40px 0 0; font-size: 14px; color: var(--muted); }
.g-sources summary { cursor: pointer; font-weight: 700; }
.g-sources ul { margin: 10px 0 0 !important; padding-left: 20px; display: grid; gap: 6px; list-style: disc; }
.g-updated { margin: 22px 0 0 !important; font-size: 13.5px; color: var(--muted); }

/* Keep the article styles (guides.css) out of the visual components. */
.fdc-guide .g-page ol, .fdc-guide .g-page ul { list-style: none; padding-left: 0; }
.fdc-guide .g-page li { margin: 0; }
.fdc-guide .g-page li::marker { content: none; }
.fdc-guide .g-page .g-sources ul { list-style: disc; padding-left: 20px; }
.fdc-guide .g-page a.g-hubcard, .fdc-guide .g-page a.g-rel, .fdc-guide .g-page a.g-btn { text-decoration: none; color: var(--ink); }
.fdc-guide .g-page a.g-btn { color: #F5F5F5; }
.fdc-guide .g-page a.g-hubcard:hover, .fdc-guide .g-page a.g-rel:hover { color: var(--ink); }
.fdc-guide .g-page .g-steps li { margin: 0; }
.fdc-guide .g-page .g-split__col ul { padding-left: 0; }
.fdc-guide .g-page .g-nb ul { padding-left: 0; }
.fdc-guide .g-page .g-tl { padding-left: 6px; }

/* Facts on small phones: one per row, figure on the left. */
@media (max-width: 560px) {
  .g-facts { grid-template-columns: 1fr; gap: 8px; }
  .g-fact { display: flex; align-items: center; gap: 14px; padding: 14px 16px; text-align: left; }
  .g-fact b { flex: none; min-width: 92px; font-size: 26px; }
  .g-fact span { margin: 0; font-size: 15px; }
}

/* ---------------- compensation table (deposit check page) */
.g-table { margin: 14px 0 0; overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: 18px; }
.g-table table { width: 100%; border-collapse: collapse; font-size: 16px; }
.g-table th, .g-table td { padding: 13px 16px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.g-table th:first-child, .g-table td:first-child { text-align: left; font-weight: 700; }
.g-table th { background: #FAF6EF; font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.g-table tr:last-child td { border-bottom: 0; }
.g-table td b { color: var(--or); }

/* ---------------- /deposit-check (the funnel's index in calculator mode) */
.dc-main { display: block; width: 100%; }
.dc-page { max-width: 1080px; margin: 0 auto; padding: 72px 20px 64px; box-sizing: border-box; }
@media (min-width: 1024px) { .dc-page { padding-top: 48px; } }
.dc-hero { display: grid; gap: 22px; align-items: center; }
@media (min-width: 860px) { .dc-hero { grid-template-columns: 1.1fr .9fr; gap: 34px; } }
.dc-hero__art { display: flex; justify-content: center; }
.dc-q { padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 12px 30px rgba(14, 22, 20, .07); }
.dc-q__label { margin: 0 0 14px; font-size: 18px; font-weight: 700; }
.dc-q__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dc-q__btn { padding: 18px 10px; border: 0; border-radius: 8px; background: #FF6B18; color: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); font: 700 19px Roboto, system-ui, sans-serif; cursor: pointer; transition: background-color 150ms, transform 120ms; }
.dc-q__btn:hover, .dc-q__btn.fdc-picked { background: #F05A08; color: #fff; }
.dc-q__btn:active { transform: scale(.97); }
.dc-results { display: grid; gap: 12px; }
@media (min-width: 760px) { .dc-results { grid-template-columns: repeat(3, 1fr); } }
.dc-result { padding: 22px 20px; border-radius: 18px; background: #fff; border: 1px solid var(--line); border-top: 6px solid var(--muted); }
.dc-result.is-good { border-top-color: var(--green); }
.dc-result.is-bad { border-top-color: var(--red); }
.dc-result.is-warn { border-top-color: var(--or); }
.dc-result__ic { display: inline-flex; width: 50px; height: 50px; border-radius: 14px; align-items: center; justify-content: center; margin-bottom: 10px; }
.dc-result__ic .g-ic { width: 28px; height: 28px; }
.is-good .dc-result__ic { background: #E9F8EF; color: var(--green); }
.is-bad .dc-result__ic { background: #FEF3F2; color: var(--red); }
.is-warn .dc-result__ic { background: var(--soft); color: var(--or); }
.dc-result__tag { margin: 0 0 4px !important; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.dc-result b { display: block; font-size: 20px; margin-bottom: 6px; }
.dc-result > span:last-child { display: block; font-size: 15.5px; color: var(--muted); }
.dc-lede { margin: 0 0 16px !important; font-size: 18px; }
.dc-more { margin: 14px 0 0 !important; font-weight: 700; }
.dc-more a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--or); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.dc-cta { margin: 60px 0 0; padding: 34px 22px; border-radius: 22px; background: var(--ink); color: #fff; text-align: center; }
.dc-cta .g-h2 { color: #fff; margin-bottom: 8px; }
.dc-cta p { margin: 0 0 20px !important; color: rgba(255, 255, 255, .75); }
.dc-start { padding: 18px 34px; border: 0; border-radius: 8px; background: #FF6B18; color: #F5F5F5; font: 700 18px Roboto, system-ui, sans-serif; cursor: pointer; box-shadow: inset 0 0 1px rgba(0, 0, 0, .5); }
.dc-page .g-steps { list-style: none; padding: 0; }
.dc-page ol, .dc-page ul { list-style: none; padding: 0; margin: 0; }

/* ---------------- /compensation-calculator */
.cc-hero { text-align: center; max-width: 720px; margin: 0 auto; }
.cc-hero .g-answer { margin-bottom: 0 !important; }
.cc-wrap { display: grid; gap: 18px; margin: 30px 0 0; align-items: start; }
@media (min-width: 900px) { .cc-wrap { grid-template-columns: 1.15fr .85fr; } .cc-out { position: sticky; top: 96px; } }
.cc-card { padding: 22px 20px 24px; background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 14px 34px rgba(14, 22, 20, .06); }
.cc-q { padding: 16px 0; border-bottom: 1px solid var(--line); transition: background-color 300ms; }
.cc-q.is-missing { background: #FEF3F2; border-radius: 12px; }
.cc-q__t { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 12px !important; font-size: 17px; font-weight: 700; line-height: 1.35; }
.cc-q__n { flex: none; display: inline-flex; width: 26px; height: 26px; border-radius: 50%; align-items: center; justify-content: center; background: var(--cream); color: var(--muted); font-size: 13px; transition: background-color 200ms, color 200ms; }
.cc-q.is-done .cc-q__n { background: var(--green); color: #fff; }
.cc-q__hint { margin: -6px 0 10px 36px !important; font-size: 14px; color: var(--muted); }
.cc-opts { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 36px; }
.cc-opt { position: relative; }
.cc-opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.cc-opt span { display: inline-block; padding: 11px 16px; border: 1.5px solid #D9D3C7; border-radius: 999px; background: #fff; font-size: 15.5px; font-weight: 500; transition: all 150ms; cursor: pointer; }
.cc-opt input:checked + span { border-color: var(--or); background: var(--or); color: #fff; }
.cc-opt input:focus-visible + span { outline: 3px solid #FFC9A8; outline-offset: 2px; }
.cc-row { display: flex; gap: 8px; padding-left: 36px; }
.cc-row select, .cc-money input { font: 500 16px Roboto, system-ui, sans-serif; padding: 12px 14px; border: 1.5px solid #D9D3C7; border-radius: 12px; background: #fff; color: var(--ink); }
.cc-row select { flex: 1; }
.cc-money { display: flex; align-items: center; margin-left: 36px; max-width: 240px; border: 1.5px solid #D9D3C7; border-radius: 12px; background: #fff; }
.cc-money span { padding: 0 0 0 14px; font-size: 18px; font-weight: 700; color: var(--ink); line-height: 1; }
.cc-money input { border: 0; outline: 0; box-shadow: none; flex: 1; min-width: 0; font-size: 18px; font-weight: 700; padding: 12px 14px 12px 1px; margin: 0; background: transparent; }
.cc-money input:focus { outline: 0; border: 0; box-shadow: none; }
.cc-money:focus-within, .cc-row select:focus { border-color: var(--or); outline: none; }
.cc-go { display: block; width: 100%; margin: 20px 0 0; border: 0; cursor: pointer; font-family: inherit; }
@media (min-width: 900px) { .cc-go { display: none; } }
.cc-err { margin: 10px 0 0 !important; color: var(--red); font-weight: 700; text-align: center; }
.cc-out { padding: 26px 22px; border-radius: 22px; background: var(--ink); color: #fff; min-height: 220px; }
.cc-out__empty { text-align: center; padding: 34px 6px; }
.cc-out__ic { width: 46px; height: 46px; color: var(--or); }
.cc-out__empty b { display: block; margin-top: 10px; font-size: 20px; }
.cc-out__empty span { display: block; margin-top: 6px; color: rgba(255, 255, 255, .7); }
.cc-res { text-align: center; animation: ai-fade-up 400ms cubic-bezier(.22, 1, .36, 1) both; }
@keyframes ai-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.cc-res__badge { display: inline-flex; width: 54px; height: 54px; border-radius: 50%; align-items: center; justify-content: center; margin-bottom: 8px; }
.cc-res__badge svg { width: 32px; height: 32px; }
.cc-res--yes .cc-res__badge { background: rgba(22, 163, 74, .2); color: #4ADE80; }
.cc-res--no .cc-res__badge { background: rgba(225, 29, 46, .22); color: #FF8A94; }
.cc-res__kicker { margin: 0 !important; font-size: 14px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #FFB48A; }
.cc-res__fig { display: block; margin: 6px 0 14px; font-size: clamp(30px, 6vw, 40px); line-height: 1.1; }
.cc-res__fig span { font-size: .55em; font-weight: 500; color: rgba(255, 255, 255, .7); }
.cc-res__title { display: block; font-size: 22px; line-height: 1.25; margin-bottom: 8px; }
.cc-res p { color: rgba(255, 255, 255, .82); }
.cc-res__small { font-size: 13.5px; color: rgba(255, 255, 255, .65) !important; margin: 10px 0 0 !important; }
.cc-bars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; height: 150px; align-items: end; margin: 6px auto 0; max-width: 300px; }
.cc-bars div { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
.cc-bars i { display: block; width: 100%; border-radius: 10px 10px 4px 4px; background: rgba(255, 107, 24, .45); animation: cc-grow 700ms cubic-bezier(.22, 1, .36, 1) both; transform-origin: bottom; }
.cc-bars .is-max i { background: var(--or); }
.cc-bars span { margin-top: 6px; font-weight: 700; }
.cc-bars em { font-style: normal; font-size: 13px; color: rgba(255, 255, 255, .7); }
@keyframes cc-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.cc-notes { list-style: none; padding: 0; margin: 18px 0 18px; text-align: left; display: grid; gap: 10px; }
.cc-notes li { display: flex; gap: 10px; align-items: flex-start; }
.cc-notes svg { flex: none; width: 22px; height: 22px; margin-top: 1px; }
.cc-notes .is-ok svg { color: #4ADE80; }
.cc-notes .is-info svg { color: #FFB48A; }
.cc-notes b { display: block; font-size: 15px; }
.cc-notes span { display: block; font-size: 13.5px; color: rgba(255, 255, 255, .7); }
.cc-cta { display: block; margin: 4px 0 0; }
.cc-link { display: inline-block; margin-top: 10px; color: #FFB48A !important; font-weight: 700; text-decoration: none !important; }
.cc-again { margin-top: 14px; background: none; border: 0; color: rgba(255, 255, 255, .7); text-decoration: underline; cursor: pointer; font: 500 14px Roboto, system-ui, sans-serif; }
.fdc-guide .g-page .cc-notes, .fdc-guide .g-page .cc-notes li { list-style: none; padding-left: 0; }

/* A ruling-out answer: flagged under the question straight away. */
.cc-flag { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0 36px !important; padding: 10px 12px; border-radius: 10px; background: #FEF3F2; border: 1px solid #FECDCA; color: #B42318; font-size: 14.5px; font-weight: 500; line-height: 1.4; animation: ai-fade-up 250ms ease both; }
.cc-flag::before { content: "!"; flex: none; display: inline-flex; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; align-items: center; justify-content: center; background: #E11D2E; color: #fff; font-size: 12px; font-weight: 700; }
.cc-q.is-flagged .cc-q__n { background: #E11D2E; color: #fff; }
.cc-q.is-flagged .cc-opt input:checked + span { background: #E11D2E; border-color: #E11D2E; }
.cc-notes--no .is-no svg { color: #FF8A94; }
.cc-res--no .cc-notes { margin-top: 14px; }

/* ---------------- the calculator's live claim summary (upload site style, light) */
.cc-sum { font-family: Roboto, system-ui, sans-serif; color: var(--ink); }
@media (min-width: 900px) { .cc-sum { position: sticky; top: 96px; } }
.cc-sum__head { margin: 0 0 12px; text-align: center; }
.cc-sum__head h2 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -.01em; }
.cc-sum__head p { margin: 4px 0 0 !important; font-size: 14.5px; color: var(--muted); }
.cc-sum .ai-order { animation: none; }
.cc-sum .ai-order__sec dd.cc-tbc { color: #A0A7A4; font-weight: 400; }
.cc-sum .ai-order__sec dl { font-size: 14.5px; }
.cc-status { margin: 14px 0 2px; padding: 12px 14px 12px 18px; border-radius: 4px; position: relative; background: #F7F8F9; border: 1px solid #E5E7EB; }
.cc-status::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: #98A2B3; border-radius: 4px 0 0 4px; }
.cc-status__k { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.cc-status b { display: block; margin-top: 2px; font-size: 17px; }
.cc-status p { margin: 4px 0 0 !important; font-size: 13.5px; line-height: 1.45; color: #4B5563; }
.cc-status.is-none { background: #FEF3F2; border-color: #FECDCA; }
.cc-status.is-none::before { background: #E11D2E; }
.cc-status.is-late { background: #FFF4E0; border-color: #FFD9A8; }
.cc-status.is-late::before { background: #FF6B18; }
.cc-status.is-no { background: #FEF3F2; border-color: #FECDCA; }
.cc-status.is-no::before { background: #E11D2E; }
.cc-status.is-no b { color: #B42318; }
.cc-status ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; font-size: 13.5px; color: #4B5563; }
.cc-status li span { display: block; font-weight: 700; color: var(--ink); }
.fdc-guide .g-page .cc-status ul { padding-left: 0; }
.cc-total--empty { display: flex !important; flex-direction: column; gap: 4px; }
.cc-total--empty > span:last-child { font-size: 14px; color: #3F5F4B; }
.cc-sum .cc-cta { display: block; margin: 16px 0 0; text-align: center; }
.cc-sum .cc-link { display: block; margin: 16px 0 0; text-align: center; color: var(--ink) !important; font-weight: 700; text-decoration: underline !important; text-decoration-color: var(--or) !important; text-underline-offset: 3px; }
.cc-sum.is-done .ai-order { box-shadow: 0 0 0 3px rgba(255, 107, 24, .25), 0 10px 30px rgba(16, 24, 40, .06); }

/* The three scheme logos panel. */
.g-logos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: center; padding: 26px 18px; background: #fff; border: 1px solid var(--line); border-radius: 18px; }
.g-logos__item { display: flex; align-items: center; justify-content: center; height: 110px; padding: 14px; border-radius: 12px; background: #fff; border: 1px solid var(--line); box-sizing: border-box; }
.g-logos__item img { max-height: 76px; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.g-logos__item--dps { background: #7AB534; border-color: #7AB534; }
.g-logos__item--mydeposits { background: #00939F; border-color: #00939F; }
@media (max-width: 480px) { .g-logos__item { height: 76px; } .g-logos__item img { max-height: 54px; } }
.g-media .g-logos__item img { background: none; border: 0; border-radius: 0; padding: 0; aspect-ratio: auto; max-height: 76px; width: auto; max-width: 100%; margin: 0; }

/* The closing "we handle the paperwork" block (light, replaces the dark .g-nb). */
.g-nb2 { margin: 64px 0 0; padding: 34px 22px 30px; border-radius: 22px; background: #FFF1E8; border: 1px solid #FFD9C2; text-align: center; }
.g-nb2 .g-h2 { margin-bottom: 8px; }
.g-nb2__sub { margin: 0 auto 22px !important; max-width: 34em; font-size: 17px; color: #4B3A30; }
.g-nb2__steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; text-align: left; }
.g-nb2__steps li { position: relative; padding: 22px 20px 20px; background: #fff; border-radius: 16px; border: 1px solid #FFE1CF; box-shadow: 0 6px 18px rgba(255, 107, 24, .07); }
.g-nb2__n { position: absolute; top: 16px; right: 18px; display: inline-flex; width: 26px; height: 26px; border-radius: 50%; align-items: center; justify-content: center; background: #FF6B18; color: #fff; font-size: 13px; font-weight: 700; }
.g-nb2__ic { display: inline-flex; width: 52px; height: 52px; border-radius: 14px; align-items: center; justify-content: center; background: #FFF1E8; color: #FF6B18; margin-bottom: 12px; }
.g-nb2__ic .g-ic { width: 28px; height: 28px; }
.g-nb2__steps b { display: block; font-size: 18px; margin-bottom: 4px; }
.g-nb2__steps li > span:last-child { display: block; font-size: 15.5px; line-height: 1.45; color: var(--muted); }
.g-nb2__pills { list-style: none; padding: 0; margin: 20px 0 22px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.g-nb2__pills li { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 999px; background: #fff; border: 1px solid #FFD9C2; font-size: 15px; font-weight: 700; }
.g-nb2__pills .g-ic { width: 18px; height: 18px; color: #16A34A; }
.g-nb2__small { margin: 14px auto 0 !important; max-width: 40em; font-size: 13px; line-height: 1.5; color: #6B5B52; }
.fdc-guide .g-page .g-nb2__steps, .fdc-guide .g-page .g-nb2__pills { list-style: none; padding-left: 0; }
@media (min-width: 760px) { .g-nb2 { padding: 42px 40px 34px; } .g-nb2__steps { grid-template-columns: repeat(3, 1fr); } }

/* Worked example as a checkout order. */
.g-order { max-width: 560px; background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: 0 10px 30px rgba(16, 24, 40, .05); }
.g-order__title { margin: 0 !important; padding: 16px 20px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid #F0F1F3; }
.g-order__rows { display: grid; grid-template-columns: 1fr auto; gap: 12px 16px; margin: 0; padding: 18px 20px; font-size: 16.5px; }
.g-order__rows dt { color: var(--muted); }
.g-order__rows dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.g-order__total { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; background: #E8F7EE; border-top: 1px solid rgba(11, 161, 74, .25); }
.g-order__total span { font-size: 17px; font-weight: 700; }
.g-order__total b { font-size: 34px; line-height: 1; font-weight: 800; color: #FF6B18; letter-spacing: -.02em; }
.g-order__note { margin: 0 !important; padding: 12px 20px 16px; background: #E8F7EE; font-size: 13px; color: #3F5F4B; }

/* "Here's what you get when working with us" vs claiming yourself (Perspective spec). */
.g-vs { margin: 64px 0 0; text-align: center; }
.g-vs__h { margin: 0 auto 26px; max-width: 18em; font-size: clamp(30px, 4.6vw, 48px); line-height: 1.15; font-weight: 700; letter-spacing: -.02em; }
.g-vs__grid { display: grid; gap: 14px; text-align: left; }
@media (min-width: 760px) { .g-vs__grid { grid-template-columns: 1.08fr .92fr; align-items: stretch; } }
.g-vs__col { position: relative; padding: 24px 22px 22px; border-radius: 12px; background: #fff; }
.g-vs__us { border: 2px solid #FF6B18; box-shadow: 0 14px 34px rgba(255, 107, 24, .12); }
.g-vs__you { background: #F3F0EA; }
.g-vs__badge { position: absolute; top: -13px; left: 22px; margin: 0 !important; padding: 4px 12px; border-radius: 999px; background: #FF6B18; color: #F5F5F5; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.g-vs__top { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; padding-bottom: 14px; border-bottom: 1px solid rgba(14, 22, 20, .08); }
.g-vs__top img { width: 34px; height: 34px; object-fit: contain; }
.g-vs__top b { font-size: 20px; font-weight: 700; }
.g-vs__ico { display: inline-flex; width: 34px; height: 34px; border-radius: 50%; align-items: center; justify-content: center; background: #E7E3DB; color: #8A847A; }
.g-vs__ico .g-ic { width: 20px; height: 20px; }
.g-vs__you .g-vs__top b { color: #6B6560; }
.g-vs ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.fdc-guide .g-page .g-vs ul { padding-left: 0; }
.g-vs li { display: flex; gap: 12px; align-items: flex-start; font-size: 16.5px; line-height: 1.4; }
.g-vs li svg { flex: none; width: 24px; height: 24px; }
.g-vs__us li { font-weight: 700; color: #0E1614; }
.g-vs__you li { color: #77716B; }
.g-vs__btn { margin: 26px 0 0; padding: 20px 34px !important; font-size: 20px !important; }
.g-vs__small { margin: 14px auto 0 !important; max-width: 40em; font-size: 13px; line-height: 1.5; color: var(--muted); }
.g-vs__h { text-wrap: balance; max-width: 22em; }
.g-vs__grid { margin-top: 30px; }
.g-vs__btn { line-height: 1.2 !important; white-space: normal; }
@media (max-width: 560px) { .g-vs__btn { display: block; width: 100%; box-sizing: border-box; font-size: 18px !important; padding: 18px 16px !important; } }

/* Worked example: centred, brand orange "You keep" band (Harry, 15 Oct). */
.g-block--center > .g-h2 { text-align: center; }
.g-block--center .g-order { margin: 0 auto; }
.g-order__total { background: #FF6B18; border-top: 0; padding: 20px 22px; }
.g-order__total span { font-size: 22px; font-weight: 800; color: #fff; }
.g-order__total b { font-size: 38px; font-weight: 800; color: #fff; }
.g-order__note { background: #fff; color: var(--muted); padding: 12px 22px 16px; text-align: center; }
.cc-sum__title { padding: 16px 18px; background: #FF6B18; color: #fff; font-size: 19px; font-weight: 700; text-align: center; letter-spacing: -.005em; }
.cc-sum .cc-disclaimer { margin-top: 16px; }

/* Claim type box flush against the card's left wall, like the upload site's summary strip. */
.cc-sum .ai-order__sec .cc-status { margin: 14px 0 2px -18px; border-left: 0; border-radius: 0 6px 6px 0; padding-left: 24px; }
.cc-sum .ai-order__sec .cc-status::before { border-radius: 0; width: 7px; }
.cc-sum .cc-needs { margin-top: 10px !important; }
.cc-needs b { color: #B42318; }
.cc-total__flag { grid-column: 1 / -1; margin: 6px 0 0 !important; padding: 8px 10px; border-radius: 8px; background: #FEF3F2; color: #B42318; font-size: 13.5px; font-weight: 700; text-align: center; }

/* Deposit check: compensation slider. */
.dc-slider { padding: 26px 22px 20px; background: #fff; border: 1px solid var(--line); border-radius: 18px; }
.dc-s-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.dc-s-head span { font-size: 15px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.dc-s-dep { font-size: clamp(30px, 5vw, 40px); font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.dc-s-range { -webkit-appearance: none; appearance: none; width: 100%; height: 10px; border-radius: 999px; outline: none; cursor: pointer;
  background: linear-gradient(to right, #FF6B18 0, #FF6B18 var(--p, 15%), #EDE7DD var(--p, 15%), #EDE7DD 100%); }
.dc-s-range::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 4px solid #FF6B18; box-shadow: 0 3px 10px rgba(14, 22, 20, .2); cursor: grab; }
.dc-s-range::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 4px solid #FF6B18; box-shadow: 0 3px 10px rgba(14, 22, 20, .2); cursor: grab; }
.dc-s-range:focus-visible::-webkit-slider-thumb { outline: 3px solid #FFC9A8; outline-offset: 2px; }
.dc-s-scale { display: flex; justify-content: space-between; margin-top: 8px; font-size: 13px; color: var(--muted); }
.dc-s-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 22px; align-items: end; }
.dc-s-tile { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 14px 8px 12px; border-radius: 14px; background: #FAF6EF; }
.dc-s-tile.is-max { background: #FFF1E8; outline: 2px solid #FF6B18; }
.dc-s-bar { display: flex; align-items: flex-end; width: 56%; height: 120px; margin-bottom: 10px; }
.dc-s-bar i { display: block; width: 100%; border-radius: 8px 8px 3px 3px; background: #FFC9A8; transition: height 160ms ease; }
.dc-s-tile.is-max .dc-s-bar i { background: #FF6B18; }
.dc-s-k { font-size: 13px; font-weight: 700; color: var(--muted); }
.dc-s-v { margin-top: 2px; font-size: clamp(20px, 3.4vw, 28px); font-weight: 800; letter-spacing: -.01em; }
.dc-s-tile.is-max .dc-s-v { color: #FF6B18; }
.dc-s-note { margin: 14px 0 0 !important; font-size: 13.5px; color: var(--muted); text-align: center; }
.dc-s-tiles { align-items: stretch; }
.dc-s-tile { justify-content: flex-end; }
@media (max-width: 560px) { .dc-s-k { font-size: 11.5px; white-space: nowrap; } .dc-s-bar { height: 96px; width: 62%; } .dc-s-tile { padding: 12px 4px 10px; } }

/* "Your landlord had two jobs": two jobs, arrows up from the result centred below. */
.g-jobs { display: flex; flex-direction: column; align-items: center; }
.g-jobs__top { display: grid; gap: 12px; width: 100%; }
@media (min-width: 640px) { .g-jobs__top { grid-template-columns: 1fr 1fr; } }
.g-job { padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.g-job b { display: block; font-size: 18px; margin-bottom: 4px; }
.g-job > span:last-child, .g-job div span { display: block; font-size: 15.5px; color: var(--muted); line-height: 1.45; }
.g-jobs__arrows { display: block; width: 50%; height: 64px; margin: 4px 0; overflow: visible; }
.g-jobs__arrows path { fill: none; stroke: #E11D2E; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.g-job--result { display: flex; gap: 12px; align-items: flex-start; max-width: 480px; background: #FEF3F2; border-color: #FECDCA; }
.g-job--result .g-ck { flex: none; width: 26px; height: 26px; color: #fff; fill: #E11D2E; stroke: #fff; }
.g-job--result b { color: #B42318; }
@media (max-width: 639px) { .g-jobs__arrows { width: 70%; height: 48px; } }
.g-split__more { margin-top: 12px; }
.fdc-guide .g-page .cc-sum .cc-disclaimer, .cc-sum p.cc-disclaimer { margin-top: 20px !important; }
.g-card__wm { display: flex; align-items: center; justify-content: center; width: 170px; height: 64px; margin-bottom: 14px; padding: 8px 12px; border-radius: 10px; background: #fff; border: 1px solid var(--line); box-sizing: border-box; }
.g-card__wm img { max-height: 46px; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.g-card__wm.g-logos__item--dps { background: #7AB534; border-color: #7AB534; }
.g-card__wm.g-logos__item--mydeposits { background: #00939F; border-color: #00939F; }

/* /refer hero art */
.rf-art { display: flex; flex-direction: column; align-items: center; justify-content: center; width: min(100%, 320px); aspect-ratio: 1; border-radius: 50%; text-align: center;
  /* Harry, 17 Oct: the same gold and shimmer as the gold buttons (calc-ai.css .fdc-gold-btn). */
  border: 1px solid #D9A520; box-shadow: 0 10px 28px rgba(217, 165, 32, .3);
  background: linear-gradient(100deg, #F6C744 0%, #F6C744 30%, #FFF6CF 44%, #FFF6CF 50%, #FBE08A 58%, #F6C744 66%, #F6C744 100%) repeat-x; background-size: 200% 100%;
  animation: rf-gold-loop 2.8s linear infinite; }
@keyframes rf-gold-loop { from { background-position: 200% 0; } to { background-position: 0% 0; } }
@media (prefers-reduced-motion: reduce) { .rf-art { animation: none; } }
.rf-art__ic { width: 96px; height: 96px; }
.rf-art__ic svg { width: 100%; height: 100%; }
.rf-art b { margin-top: 8px; font-size: 64px; line-height: 1; font-weight: 800; letter-spacing: -.03em; color: #3A2A00; }
.rf-art span:last-child { margin-top: 6px; font-size: 16px; font-weight: 700; color: #3A2A00; max-width: 12em; }

/* Example case study (Harry, 15 Oct) */
.g-case { background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: 0 12px 30px rgba(14, 22, 20, .06); }
.g-case__top { display: flex; align-items: center; gap: 14px; padding: 18px 20px; background: var(--soft); }
.g-case__av { flex: none; display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: 50%; background: var(--or); color: #fff; font-weight: 700; font-size: 21px; }
.g-case__top > div { flex: 1; min-width: 0; }
.g-case__top b { display: block; font-size: 19px; }
.g-case__top > div span { display: block; font-size: 14.5px; color: var(--muted); line-height: 1.35; }
.g-case__dep { flex: none; text-align: right; font-weight: 700; font-size: 22px; color: var(--ink); line-height: 1.1; }
.g-case__dep small { display: block; font-size: 12px; font-weight: 500; color: var(--muted); }
.fdc-guide .g-page .g-case__story { list-style: none; margin: 0; padding: 8px 20px; }
.g-case__story li { display: grid; grid-template-columns: 128px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 16.5px; line-height: 1.45; }
.g-case__story li:last-child { border-bottom: 0; }
.g-case__k { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--or); padding-top: 2px; }
.g-case__out { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 20px 0; padding: 16px 18px; border-radius: 14px; background: #E9F8EF; border: 1px solid #BBE7CB; }
.g-case__out div { flex: 1 1 140px; }
.g-case__out span { display: block; font-size: 13.5px; color: var(--muted); }
.g-case__out b { display: block; font-size: 22px; color: var(--green); line-height: 1.2; }
.g-case__note { margin: 0; padding: 12px 20px 16px; font-size: 13px; color: var(--muted); }
@media (max-width: 560px) { .g-case__story li { grid-template-columns: 1fr; gap: 2px; } .g-case__top { padding: 16px; } .fdc-guide .g-page .g-case__story { padding: 6px 16px; } .g-case__out { margin: 4px 16px 0; } }
/* Harry, 15 Oct: on desktop the summary ends at its button, so when you scroll down the button
   lines up with the bottom of the questions card; the disclaimer hangs just below it. */
@media (min-width: 900px) {
  .cc-wrap { margin-bottom: 90px; }
  .cc-sum p.cc-disclaimer, .fdc-guide .g-page .cc-sum .cc-disclaimer { position: absolute; top: 100%; left: 0; right: 0; margin-top: 16px !important; }
}
/* Bug sweep, 15 Oct: the funnel's progress bar has no job on guide and tool pages; the comparison
   table fits a phone without hidden columns; long buttons wrap neatly and centred. */
.fdc-guide #ps-progressbar { display: none !important; }
@media (max-width: 560px) {
  .g-table table { font-size: 14px; }
  .g-table th, .g-table td { padding: 10px 8px; white-space: normal; }
  .g-table th { font-size: 11px; letter-spacing: .02em; }
  .g-page .g-btn { display: block; text-align: center; line-height: 1.3; padding: 16px 18px; }
}
.cc-back { margin: 8px 0 0 !important; font-size: 13.5px; font-weight: 600; color: var(--ink); }

/* "In Short" (16 Oct): one self-contained 40-80 word answer per guide, the passage AI answers quote. */
.g-summary p { font-size: 17px; line-height: 1.6; margin: 0; padding: 18px 20px; background: #fff; border-left: 4px solid #FF6B18; border-radius: 10px; }

/* 16 Oct (Harry): no big solid black blocks on the site. The "you do 60 seconds" panel, the deposit
   check call to action and the old calculator output become light peach panels with ink text and
   orange accents. Black stays only as small accents and inside illustrations. */
.g-nb, .dc-cta, .cc-out { background: #FFF1E8; color: var(--ink); border: 1px solid rgba(255, 107, 24, .22); }
.g-nb .g-h2, .dc-cta .g-h2 { color: var(--ink); }
.dc-cta p { color: var(--muted); }
.g-nb__col { background: #fff; border: 1px solid rgba(14, 22, 20, .06); }
.g-nb__us { background: #fff; border: 2px solid rgba(255, 107, 24, .45); }
.g-nb__who { color: var(--or); }
.g-nb li span { color: var(--muted); }
.g-nb__money div { background: #fff; border: 1px solid rgba(14, 22, 20, .06); }
.g-nb__money b { color: var(--or); }
.g-nb__money span, .g-nb__small { color: var(--muted); }
.cc-out__empty span { color: var(--muted); }

/* Step cards (home.css), also used on /refer, which does not load home.css (Harry, 17 Oct: icons were full width). */
.hm-pc-grid { display: grid; gap: 14px; }
@media (min-width: 640px) { .hm-pc-grid--3, .hm-pc-grid--4 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .hm-pc-grid--3 { grid-template-columns: repeat(3, 1fr); } .hm-pc-grid--4 { grid-template-columns: repeat(4, 1fr); } }
.hm-pc { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 28px 20px 24px; border-radius: 12px; background: #fff; transition: box-shadow 150ms cubic-bezier(.4, 0, .2, 1), transform 150ms cubic-bezier(.4, 0, .2, 1); }
.hm-pc:hover { box-shadow: 0 10px 28px rgba(14, 22, 20, .08); transform: translateY(-2px); }
.hm-pc__ic { width: 64px; height: 64px; margin-bottom: 14px; }
.hm-pc__ic svg { width: 100%; height: 100%; }
.hm-pc b { display: block; font-size: 20px; line-height: 1.25; font-weight: 700; margin-bottom: 6px; }
.hm-pc > span:last-child { display: block; font-size: 15.5px; line-height: 1.45; color: #5B6461; }
.hm-pc__n { position: absolute; top: 14px; left: 14px; display: inline-flex; width: 28px; height: 28px; border-radius: 50%; align-items: center; justify-content: center; background: #FF6B18; color: #fff; font-size: 14px; font-weight: 700; }

/* Refer page button (Harry, 17 Oct): the gold buttons' gold and shimmer (calc-ai.css .fdc-gold-btn).
   nav.css forces every .g-btn orange with !important, so this matches it and is more specific. */
a.g-btn.rf-gold-btn, a.g-btn.rf-gold-btn:hover, button.g-btn.rf-gold-btn, button.g-btn.rf-gold-btn:hover {
  color: #3A2A00 !important; border: 1px solid #D9A520 !important; box-shadow: 0 6px 18px rgba(217, 165, 32, .3) !important;
  background: linear-gradient(100deg, #F6C744 0%, #F6C744 30%, #FFF6CF 44%, #FFF6CF 50%, #FBE08A 58%, #F6C744 66%, #F6C744 100%) repeat-x !important;
  background-size: 200% 100% !important; animation: rf-gold-loop 2.8s linear infinite; }
@media (prefers-reduced-motion: reduce) { .g-btn.rf-gold-btn { animation: none; } }
/* Refer page, How It Works (Harry, 17 Oct): the last step, "You Get £100", in the same gold and shimmer. */
.rf-steps .hm-pc:last-child { border: 1px solid #D9A520; box-shadow: 0 6px 18px rgba(217, 165, 32, .3);
  background: linear-gradient(100deg, #F6C744 0%, #F6C744 30%, #FFF6CF 44%, #FFF6CF 50%, #FBE08A 58%, #F6C744 66%, #F6C744 100%) repeat-x;
  background-size: 200% 100%; animation: rf-gold-loop 2.8s linear infinite; }
.rf-steps .hm-pc:last-child b, .rf-steps .hm-pc:last-child > span:last-child { color: #3A2A00; }
.rf-steps .hm-pc:last-child .hm-pc__n { background: #3A2A00; color: #F6C744; }
@media (prefers-reduced-motion: reduce) { .rf-steps .hm-pc:last-child { animation: none; } }
/* Refer page: one closing call to action with the gold button (Harry, 17 Oct). */
.rf-end { margin: 36px 0 8px; padding: 28px 20px; text-align: center; background: #fff; border-radius: 16px; }
.rf-end .g-h2 { margin-top: 0; }
.rf-end p { max-width: 34em; margin: 0 auto 18px; color: #5B6461; }
/* Refer page sign-up (17 Oct): the form at #join and the "You're In" link card. */
.rf-end { scroll-margin-top: 90px; }
.rf-form { display: grid; gap: 12px; max-width: 520px; margin: 0 auto; text-align: left; }
.rf-row { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
@media (max-width: 520px) { .rf-row { grid-template-columns: 1fr; } }
.rf-form label > span:first-child { display: block; margin-bottom: 4px; font-size: 14px; font-weight: 700; color: #0E1614; }
.rf-form input:not([type=checkbox]) { box-sizing: border-box; width: 100%; height: 50px; padding: 0 14px; border: 1.5px solid #D9D3C7; border-radius: 10px; background: #fff; font: 400 16px Roboto, system-ui, sans-serif; color: #0E1614; }
.rf-form input:focus { outline: none; border-color: #FF6B18; }
.rf-phone { display: flex; align-items: center; border: 1.5px solid #D9D3C7; border-radius: 10px; background: #fff; }
.rf-phone:focus-within { border-color: #FF6B18; }
.rf-phone b { padding: 0 2px 0 14px; font-weight: 500; color: #0E1614; }
.rf-form .rf-phone input { border: 0; height: 47px; }
.rf-consent { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; font-size: 14px; line-height: 1.45; color: #374151; cursor: pointer; }
.rf-consent input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; cursor: pointer; appearance: none; -webkit-appearance: none; border: 2px solid #9CA3AF; border-radius: 4px; background: #fff center/14px no-repeat; }
.rf-consent input:checked { border-color: #FF6B18; background-color: #FF6B18; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.rf-consent input:focus-visible { outline: 2px solid #FF6B18; outline-offset: 2px; }
.rf-consent a { color: inherit; text-decoration: underline; }
.rf-form .is-bad input:not([type=checkbox]), .rf-form .is-bad .rf-phone { border-color: #DC2626; }
.rf-form .rf-consent.is-bad { outline: 1px solid #DC2626; outline-offset: -1px; background: #FEF2F2; }
.rf-err { margin: 0 !important; color: #C5221F !important; font-weight: 500; text-align: center; }
.rf-form .rf-go { width: 100%; border: 0; cursor: pointer; font-family: inherit; font-size: 17px; }
.rf-done { max-width: 520px; margin: 0 auto; }
.rf-link { display: flex; gap: 8px; margin: 6px 0 14px; }
.rf-link input { flex: 1; min-width: 0; height: 50px; padding: 0 14px; border: 1.5px solid #D9A520; border-radius: 10px; background: #FFFBEB; font: 500 15px Roboto, system-ui, sans-serif; color: #3A2A00; }
.rf-copy { padding: 0 18px; border: 0; border-radius: 10px; background: #0E1614; color: #fff; font: 700 15px Roboto, system-ui, sans-serif; cursor: pointer; }
.rf-share { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rf-sh { display: block; padding: 13px 8px; border-radius: 10px; color: #fff !important; text-decoration: none !important; font-weight: 700; font-size: 15px; text-align: center; }
.rf-sh--wa { background: #25D366; } .rf-sh--sms { background: #1E88E5; } .rf-sh--em { background: #6B7280; }
.rf-keep { margin-top: 14px !important; font-size: 14px; }