/* Our additions on top of the captured Perspective styles. */

/* Entrance: Perspective's "scale" transition (measured 14 Oct 2026). */
.fdc-enter { animation: fdc-enter 600ms cubic-bezier(0.215, 0.61, 0.355, 1) both; animation-delay: calc(var(--fdc-i, 0) * 100ms); }
@keyframes fdc-enter { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: none; } }
.fdc-enter-fade { animation: fdc-fade 450ms ease-out both; }
@keyframes fdc-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .fdc-enter, .fdc-enter-fade { animation: none; } }

/* Answer card feedback before the page changes. */
.fdc-picked { outline: 2px solid #FF6B18; outline-offset: 2px; border-radius: 12px; }
[role="button"]:focus-visible, button:focus-visible, .fdc-select:focus-visible { outline: 2px solid #FF6B18; outline-offset: 2px; }

/* Native select in place of Perspective's dropdown widget. */
.fdc-select { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230E1614' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; color: #0E1614; }
.fdc-select:invalid, .fdc-select option[value=""] { color: #9CA3AF; }

/* Validation message. */
.fdc-error { margin: 12px 0 0; color: #C5221F; font-size: 14px; line-height: 1.4; text-align: center; font-family: Roboto, system-ui, sans-serif; }

/* "+44" beside the flag on the phone field, as on Perspective. */
.fdc-dial { position: absolute; z-index: 1; left: 3.5rem; top: 0; height: 3.5rem; display: flex; align-items: center; font: 300 16px/1 Roboto, system-ui, sans-serif; color: #000; pointer-events: none; }
input.fdc-has-dial { padding-left: 40px !important; }

/* ---- Home hero (Harry, 14 Oct): neater above the fold, report image shown whole ---- */
[data-scroll-id="6a7de2e3b9c5ede8856ac3ca"] { padding-bottom: 20px; }               /* headline -> image gap */
[data-scroll-id="6a7de31547e39717cd2066e8"] img {                                     /* report image: no crop */
  aspect-ratio: auto !important; height: auto; object-fit: contain !important; display: block;
}
[data-scroll-id="6a7de2e3b9c5ede8856ac3cb"] { padding-top: 20px !important; }        /* image -> Start Now */
/* Desktop hero (Harry, 14 Oct, second pass): stack the old two columns so "What Is A
   Tenancy Deposit Claim?" sits below, and give the hero the full width: headline and
   Start Now on the left, the report image large on the right. Mobile is unchanged. */
@media (min-width: 1024px) {
  .fun-grid:has([data-scroll-id="6a7de2e3b9c5ede8856ac3c0"]) { grid-template-columns: minmax(0, 1fr) !important; row-gap: 0 !important; }
  [data-scroll-id="6a7de2e3b9c5ede8856ac3c0"] > div { max-width: 1180px !important; }
  [data-scroll-id="6a7de2e3b9c5ede8856ac3c0"] .fun-flex.fun-flex-col {
    display: grid !important; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); column-gap: 72px;
    align-content: center; min-height: calc(100vh - 72px); padding-top: 24px !important; padding-bottom: 32px !important;
  }
  [data-scroll-id="6a7de2e3b9c5ede8856ac3ca"] { grid-column: 1; grid-row: 1; align-self: end; padding-bottom: 8px; }
  [data-scroll-id="6a7de2e3b9c5ede8856ac3ca"] p:empty { display: none; }
  [data-scroll-id="6a7de2e3b9c5ede8856ac3ca"] p + p { margin-top: 14px; }
  /* Scheme logos are white artwork; on cream they vanished. Show them as a muted strip. */
  [data-scroll-id="6a7de2e3b9c5ede8856ac3cd"] img { filter: brightness(0) saturate(0); opacity: .35; }
  [data-scroll-id="6a7de2e3b9c5ede8856ac3cb"] { grid-column: 1; grid-row: 2; padding-top: 28px !important; }
  [data-scroll-id="6a7de2e3b9c5ede8856ac3cc"] { grid-column: 1; grid-row: 3; }
  [data-scroll-id="6a7de2e3b9c5ede8856ac3cd"] { grid-column: 1; grid-row: 4; align-self: start; }
  [data-scroll-id="6a7de31547e39717cd2066e8"] { grid-column: 2; grid-row: 1 / span 4; align-self: center; }
  [data-scroll-id="6a7de31547e39717cd2066e8"] .fun-overflow-hidden { width: 100%; margin: 0; border-radius: 20px; box-shadow: 0 18px 50px rgba(14, 22, 20, .12), 0 2px 6px rgba(14, 22, 20, .06); }
  [data-scroll-id="6a7de31547e39717cd2066e8"] img { width: 100%; max-height: none; }
  /* Section below: centred, narrower, with room above it. */
  [data-scroll-id="6a7de2e4b9c5ede8856ac3f4"] { padding-top: 48px; }
  [data-scroll-id="6a7de2e4b9c5ede8856ac3f4"] > div { max-width: 760px !important; }
}

/* ---- Desktop home, third pass (Harry, 14 Oct): nav bar + a hero that fills the screen ---- */
.fdc-nav, .fdc-hero-points, .fdc-logos { display: none; }
@media (min-width: 1024px) {
  .has-fdc-nav [role="banner"] { display: none !important; }        /* the nav replaces Perspective's header bar */
  .fdc-nav { display: block; position: sticky; top: 0; z-index: 50; background: rgba(250, 246, 239, .92); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid rgba(14, 22, 20, .07); }
  .fdc-nav__in { max-width: none; margin: 0; height: 76px; padding: 0 max(24px, min(15vw, calc((100vw - 1240px) / 2))); display: flex; align-items: center; gap: 28px; font-family: Roboto, system-ui, sans-serif; }
  .fdc-nav__logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #0E1614; font: 700 19px/1 Roboto, system-ui, sans-serif; letter-spacing: -0.01em; white-space: nowrap; }
  .fdc-nav__logo img { height: 34px; width: auto; display: block; }
  .fdc-nav__links { display: flex; gap: 32px; list-style: none; margin: 0 16px 0 auto; padding: 0; }
  .fdc-nav__links a { white-space: nowrap; color: #0E1614; text-decoration: none; font-size: 16px; font-weight: 500; opacity: .8; transition: opacity 150ms; }
  .fdc-nav__links a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 6px; text-decoration-color: #FF6B18; text-decoration-thickness: 2px; }
  .fdc-nav__right { display: flex; align-items: center; gap: 20px; }
  .fdc-nav__join { margin-left: 0; font: 700 15px/1 Roboto, system-ui, sans-serif; color: #fff; background: #FF6B18; border: 0; border-radius: 8px; padding: 11px 16px; cursor: pointer; white-space: nowrap; transition: filter 150ms; }
  .fdc-nav__join:hover { filter: brightness(1.06); }
  .fdc-nav__rating { font-size: 14px; color: #5B6461; white-space: nowrap; }
  .fdc-nav__rating span { color: #FACC15; letter-spacing: 1px; margin-right: 4px; }
  .fdc-nav__cta { white-space: nowrap; font: 700 16px/1 Roboto, system-ui, sans-serif; color: #fff; background: #FF6B18; border: 0; border-radius: 10px; padding: 14px 22px; cursor: pointer; transition: filter 150ms; }
  .fdc-nav__cta:hover { filter: brightness(1.06); }

  /* Hero: wider, bigger, filling the first screen under the nav. */
  [data-scroll-id="6a7de2e3b9c5ede8856ac3c0"] > div { max-width: 1320px !important; }
  [data-scroll-id="6a7de2e3b9c5ede8856ac3c0"] .fun-flex.fun-flex-col {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) !important; column-gap: clamp(40px, 4vw, 72px) !important;
    min-height: calc(100vh - 76px) !important; padding: 40px 40px 56px !important;
  }
  [data-scroll-id="6a7de2e3b9c5ede8856ac3ca"] p:first-child span { --fs-d: 20px !important; --lh-d: 1.4 !important; }
  [data-scroll-id="6a7de2e3b9c5ede8856ac3ca"] span[style*="--fs-d: 56px"] { --fs-d: clamp(44px, min(4.3vw, 7vh), 68px) !important; --lh-d: 1.04 !important; }
  [data-scroll-id="6a7de2e3b9c5ede8856ac3ca"] p + p { margin-top: 20px !important; }
  [data-scroll-id="6a7de2e3b9c5ede8856ac3cb"] { padding-top: 36px !important; }
  [data-scroll-id="6a7de2e3b9c5ede8856ac3cb"] button { min-height: 72px; border-radius: 14px !important; }
  [data-scroll-id="6a7de2e3b9c5ede8856ac3cb"] button span { --fs-d: 24px !important; }
  .fdc-hero-points { display: flex; flex-direction: column; gap: 10px; list-style: none; margin: 22px 0 0; padding: 0; font: 400 16px/1.4 Roboto, system-ui, sans-serif; color: #3B4442; }
  .fdc-hero-points li::before { content: "✓"; color: #16A34A; font-weight: 700; margin-right: 8px; }
  [data-scroll-id="6a7de2e3b9c5ede8856ac3cd"] { padding-top: 28px !important; }
  [data-scroll-id="6a7de31547e39717cd2066e8"] .fun-overflow-hidden { border-radius: 24px !important; box-shadow: 0 30px 70px rgba(14, 22, 20, .16), 0 4px 10px rgba(14, 22, 20, .06) !important; transform: rotate(-1deg); }
}

/* Fourth pass (Harry, 14 Oct): logo slider full width under the hero, image fills its half. */
@media (min-width: 1024px) {
  [data-scroll-id="6a7de31547e39717cd2066e8"] { grid-row: 1 / span 3 !important; }
  [data-scroll-id="6a7de2e3b9c5ede8856ac3cd"] { grid-column: 1 / -1 !important; grid-row: 4 !important; width: 100vw; margin-left: calc(50% - 50vw); padding-top: 48px !important; }
  [data-scroll-id="6a7de2e3b9c5ede8856ac3cd"] > div { max-width: none !important; }
  [data-scroll-id="6a7de31547e39717cd2066e8"] .fun-overflow-hidden { transform: none !important; width: 100% !important; }
  [data-scroll-id="6a7de31547e39717cd2066e8"] img { width: 100% !important; max-height: none !important; }
}

/* Fifth pass (Harry, 14 Oct): iPhone results graphic replaces the report image on desktop;
   logo slider centred with ~18% fades and wider spacing. */
.fdc-phone { display: none; }
@media (min-width: 1024px) {
  [data-scroll-id="6a7de31547e39717cd2066e8"] .fun-overflow-hidden { display: none !important; }
  /* Zero-height anchor: the phone draws out of it, so it never changes the text rows. */
  [data-scroll-id="6a7de31547e39717cd2066e8"] { display: flex !important; justify-content: center; align-items: flex-start; align-self: start !important; height: 0; overflow: visible; }
  [data-scroll-id="6a7de31547e39717cd2066e8"] > div:not(.fdc-phone) { display: none !important; }
  .fdc-phone { display: block; container-type: inline-size; height: 560px; aspect-ratio: 9 / 17.6; font-family: Roboto, system-ui, sans-serif; color: #0E1614; }
  .fdc-phone__body { position: relative; height: 100%; border-radius: 15cqw; background: #1B1D1F; padding: 3.4cqw; box-shadow: inset 0 0 0 .6cqw #3A3D40, inset 0 0 0 1.2cqw #111, 0 28px 60px rgba(14, 22, 20, .18), 0 6px 14px rgba(14, 22, 20, .08); }
  .fdc-phone__body::before, .fdc-phone__body::after { content: ""; position: absolute; width: 1.2cqw; background: #2A2D30; border-radius: 1cqw; }
  .fdc-phone__body::before { left: -1cqw; top: 22%; height: 9%; box-shadow: 0 13cqw 0 #2A2D30; }   /* volume */
  .fdc-phone__body::after { right: -1cqw; top: 28%; height: 14%; }                                   /* power */
  .fdc-phone__screen { position: relative; height: 100%; border-radius: 12cqw; background: #F6F4EF; overflow: hidden; padding: 0 5.5cqw; display: flex; flex-direction: column; gap: 2.6cqw; }
  .fdc-phone__status { display: flex; justify-content: space-between; align-items: center; height: 13cqw; font-size: 4.2cqw; font-weight: 700; padding: 0 2cqw; flex-shrink: 0; }
  .fdc-phone__island { width: 30cqw; height: 8.6cqw; background: #000; border-radius: 6cqw; }
  .fdc-phone__sys { font-size: 2.8cqw; letter-spacing: .4cqw; }
  .fdc-phone__app { display: flex; align-items: center; justify-content: flex-start; gap: 1.8cqw; font-size: 4.6cqw; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; text-align: left; margin: -1cqw 0 0 -1.6cqw; padding: 0 0 1cqw; }
  .fdc-phone__app img { width: 7cqw !important; height: 7cqw !important; max-width: none; margin: 0 !important; flex: none; }
  .fdc-phone__title { font-size: 7.2cqw; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
  .fdc-phone__alert { background: #FDF3D7; border-radius: 3.4cqw; padding: 3cqw 3.6cqw; display: flex; flex-direction: column; gap: .8cqw; font-size: 3.3cqw; color: #6B4E00; }
  .fdc-phone__alert b { font-size: 3.7cqw; color: #4A3700; }
  .fdc-phone__sec { background: #fff; border-radius: 3.4cqw; padding: 2.8cqw 3.6cqw; box-shadow: 0 .4cqw 1.6cqw rgba(14, 22, 20, .05); }
  .fdc-phone__sec h6 { margin: 0 0 1.4cqw; font-size: 2.9cqw; letter-spacing: .14em; text-transform: uppercase; color: #5B6461; font-weight: 700; }
  .fdc-phone__sec p { display: flex; justify-content: space-between; gap: 3cqw; margin: 0; padding: 1cqw 0; font-size: 3.4cqw; }
  .fdc-phone__sec p span { color: #5B6461; white-space: nowrap; }
  .fdc-phone__sec p b { font-weight: 500; text-align: right; }
  .fdc-phone__sec em { font-style: normal; font-size: 3cqw; background: #FDE2E1; color: #9F1D1A; border-radius: 3cqw; padding: .6cqw 2.2cqw; text-align: right; }
  .fdc-phone__sec ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.6cqw; font-size: 3.4cqw; }
  .fdc-phone__sec li::before { content: "✓"; display: inline-grid; place-items: center; width: 4.4cqw; height: 4.4cqw; margin-right: 2cqw; border-radius: 50%; background: #16A34A; color: #fff; font-size: 2.8cqw; font-weight: 700; }
  .fdc-phone__comp { background: #E3F4E7; border-radius: 3.4cqw; padding: 3.2cqw 3.6cqw 4cqw; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1cqw; }
  .fdc-phone__comp b { font-size: 3.6cqw; color: #166534; }
  .fdc-phone__comp strong { font-size: 11cqw; line-height: 1; letter-spacing: -0.03em; color: #0E1614; }
  .fdc-phone__btn { margin-top: auto; background: #FF6B18; color: #fff; text-align: center; font-weight: 700; font-size: 4cqw; border-radius: 3.4cqw; padding: 3.4cqw; }
  .fdc-phone__home { width: 34cqw; height: 1.4cqw; border-radius: 1cqw; background: #0E1614; margin: 0 auto 2.4cqw; flex-shrink: 0; }

  /* Logo slider: our own even strip, fading over the outer ~18% each side. */
  [data-scroll-id="6a7de2e3b9c5ede8856ac3cd"] > div:not(.fdc-logos) { display: none !important; }
  .fdc-logos { display: block !important; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 82%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 82%, transparent 100%); }
  .fdc-logos__track { display: flex; width: max-content; list-style: none; margin: 0; padding: 0; animation: fdc-logos 60s linear infinite; }
  .fdc-logos__track li { height: 56px; padding: 0 64px; display: flex; align-items: center; justify-content: center; flex: none; }
  .fdc-logos__track img { height: 40px; max-width: 180px; width: auto; object-fit: contain; filter: brightness(0) saturate(0); opacity: .35; }
  @keyframes fdc-logos { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  @media (prefers-reduced-motion: reduce) { .fdc-logos__track { animation: none; } }
}

/* Nav on narrower desktops: keep everything on one line. */
@media (min-width: 1024px) and (max-width: 1499px) {
  .fdc-nav__rating { display: none; }
  .fdc-nav__in { gap: 22px; }
  .fdc-nav__links { gap: 24px; }
  .fdc-nav__links a { font-size: 15px; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .fdc-nav__logo span { display: none; }
}

/* Footer legal links and company disclosure (all pages). */
.fdc-foot-sep { opacity: .6; }
.fdc-foot-co { display: block; margin: 10px auto 0; max-width: 560px; font-size: 11px; line-height: 1.5; opacity: .75; text-align: center; }

/* Cookie pop-up: moved to nav.css (22 Oct), which every page loads. */

/* Hero cursor just below Start Now, in its right fifth (app.js moves it there). */
.fdc-hero-cursor { position: absolute !important; right: auto; left: calc(66.667% - 14px); top: calc(100% - 12px); width: 48px !important; max-width: 48px !important; margin: 0 !important; z-index: 3; pointer-events: none; }

/* Mobile above the fold (Harry, 15 Oct): a shorter report preview, cropped from the top, so
   Start Now is on screen and tappable on first open. */
@media (max-width: 759px) {
  [data-scroll-id="6a7de31547e39717cd2066e8"] .fun-overflow-hidden { width: 100% !important; margin: 0 !important; transform: none !important; left: 0 !important; border-radius: 14px; box-shadow: 0 10px 26px rgba(14, 22, 20, .10); overflow: hidden; }
  [data-scroll-id="6a7de31547e39717cd2066e8"] img { width: 100% !important; height: 130px !important; object-fit: cover !important; object-position: top center; }
  [data-scroll-id="6a7de2e3b9c5ede8856ac3ca"] { padding-bottom: 14px; }
  [data-scroll-id="6a7de2e3b9c5ede8856ac3cb"] { padding-top: 14px !important; }
}
  /* One compact row for the cookie banner on phones, so it does not cover Start Now. */
@media (max-width: 759px) {
  #fdc-cookies { flex-wrap: nowrap; gap: 8px; padding: 8px 34px 8px 12px; font-size: 12px; line-height: 1.3; bottom: 8px; left: 8px; right: 8px; }
  #fdc-cookies p { flex: 1 1 auto; min-width: 0; }
  .fdc-cookies__btns { width: auto; gap: 6px; flex: none; }
  .fdc-cookies__btns button { flex: none; padding: 8px 10px; font-size: 13px; }
  .fdc-cookies__x { right: 4px; width: 28px; top: 50%; transform: translateY(-50%); }
}

/* Mobile hero results card (Harry, 15 Oct, second pass): Perspective claim-summary style,
   replaces the cropped report image under 1024px. Sample data, labelled as an example. */
.fdc-mres { display: none; }
@media (max-width: 1023px) {
  [data-scroll-id="6a7de31547e39717cd2066e8"] .fun-overflow-hidden { display: none !important; }
  .fdc-mres { display: block; max-width: 520px; margin: 0 auto; background: #fff; border: 1px solid #E5E1D8; border-radius: 12px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 10px 30px rgba(16, 24, 40, .07); overflow: hidden; font-family: Roboto, system-ui, sans-serif; color: #0E1614; text-align: left; }
  .fdc-mres__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px 12px; border-bottom: 1px solid #F0EEE9; }
  .fdc-mres__head b { font-size: 17px; font-weight: 700; }
  .fdc-mres__pill { font-size: 12.5px; font-weight: 700; padding: 4px 10px; border-radius: 9999px; background: #FDE2E1; color: #9F1D1A; white-space: nowrap; }
  .fdc-mres__rows { display: grid; grid-template-columns: auto 1fr; gap: 9px 12px; margin: 0; padding: 12px 16px; font-size: 14.5px; line-height: 1.3; }
  .fdc-mres__rows dt { color: #5B6461; }
  .fdc-mres__rows dd { margin: 0; text-align: right; font-weight: 500; }
  .fdc-mres__sch { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 4px; }
  .fdc-mres__sch span { font-size: 12px; font-weight: 600; padding: 2px 7px; border-radius: 6px; background: #F5F2EC; color: #5B6461; text-decoration: line-through; text-decoration-color: #E11D2E; }
  .fdc-mres__total { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: #FFF1E8; border-top: 1px solid #FFE0CC; }
  .fdc-mres__total span { display: block; font-size: 15px; font-weight: 700; }
  .fdc-mres__total small { display: block; margin-top: 2px; font-size: 12.5px; color: #5B6461; }
  .fdc-mres__total strong { display: flex; flex-direction: column; align-items: flex-end; font-size: 32px; line-height: 1; font-weight: 800; letter-spacing: -.02em; color: #FF6B18; }
  .fdc-mres__total em { font-style: normal; font-size: 12px; font-weight: 600; letter-spacing: 0; color: #5B6461; margin-bottom: 3px; }
  .fdc-mres__ex { margin: 0; padding: 6px 16px 8px; font-size: 11px; color: #8A918E; text-align: right; background: #FFF1E8; }
}
@media (max-width: 1023px) and (max-height: 700px) { .fdc-mres__opt { display: none; } }
@media (max-width: 1023px) {
  /* Logo strip: clear of the cursor under Start Now. */
  [data-scroll-id="6a7de2e3b9c5ede8856ac3cd"] { padding-top: 56px !important; }
}

@media (max-width: 1023px) {
  .fdc-mres__head { padding: 12px 16px 10px; }
  .fdc-mres__rows { gap: 8px 12px; padding: 10px 16px; }
  .fdc-mres__no { color: #E11D2E !important; font-weight: 700 !important; }
  .fdc-mres__total { padding: 11px 16px 12px; }
}
@media (max-width: 1023px) and (max-height: 700px) { .fdc-mres__total small { display: none; } .fdc-mres__total strong { font-size: 28px; } }
@media (max-width: 1023px) and (min-height: 701px) {
  .fdc-mres__head { padding: 15px 16px 13px; }
  .fdc-mres__rows { gap: 10px 12px; padding: 13px 16px; }
  .fdc-mres__total { padding: 15px 16px 16px; }
}
/* Thank-you: straight on to the results (15 Oct) */
.fdc-ty-top { max-width: 448px; margin: 4px auto 18px; padding: 0 16px; text-align: center; font-family: Roboto, system-ui, sans-serif; }
.fdc-ty-top p { margin: 0 0 12px; font-size: 15px; line-height: 1.45; color: #5B6461; }
.fdc-ty-go { width: 100%; padding: 17px 20px; border: 0; border-radius: 8px; background: #FF6B18; color: #F5F5F5; box-shadow: inset 0 0 1px rgba(0, 0, 0, .5); font: 700 18px Roboto, system-ui, sans-serif; cursor: pointer; }
/* The page capture froze Perspective's confetti pieces into the templates as static dots (Harry, 16 Oct: "confetti is stuck"). Our own confetti is canvas and clears itself. */
.confetti { display: none !important; }

/* Quiz steps to the upload site's spec (16 Oct) */
select.fdc-select { -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 40px !important;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%235B6461' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 14px center / 18px no-repeat; }
select.fdc-select:invalid, select.fdc-select option[disabled] { color: #6B7280; }
.fdc-pound { display: inline-grid; place-items: center; width: 22px; font: 700 20px/1 Roboto, system-ui, sans-serif; color: #0E1614; text-decoration: none; }
u:has(.fdc-pound) { text-decoration: none; }
.fdc-step [role="button"].fdc-picked { outline: 2px solid #FF6B18; outline-offset: -2px; }
.fdc-step button.fun-animate-button-jittery, .fdc-step button[class*="buttonBgColor"] { border-radius: 8px !important; background: #FF6B18 !important; color: #F5F5F5 !important; box-shadow: inset 0 0 1px rgba(0, 0, 0, .5) !important; }
/* Fifth tenancy card sits centred under the other four on phones */
[data-scroll-id] .fun-flex-wrap > [class*="fun-basis-"]:last-child:nth-child(odd) { margin-left: auto; margin-right: auto; }

/* 16 Oct (Harry): no hero flicker on refresh. The page is hidden until app.js has drawn it (the head
   sets html.fdc-boot; a 2.5s fallback removes it if scripts fail). The phone fades in once, sized. */
html.fdc-boot #app { visibility: hidden; }
@media (min-width: 1024px) {
  .fdc-phone { position: relative; opacity: 0; transition: opacity 350ms ease; }
  .fdc-phone.is-ready { opacity: 1; }
  /* Cash and coins at the phone's bottom right (Harry, 16 Oct): a clean flat drawing, two notes and one
     coin stack in brand colours. */
  .fdc-phone__cash { position: absolute; right: -137cqw; bottom: -12cqw; width: 143.5cqw; pointer-events: none; z-index: 2; }
  .fdc-phone__cash svg { display: block; width: 100%; height: auto; }
}
/* Narrow laptops: no room to slide the phone, so the cash is a little smaller (still well over 1.5x). */
@media (min-width: 1024px) and (max-width: 1199px) { .fdc-phone__cash { right: -106cqw; width: 112.5cqw; } }

/* ---- Review of 16 Oct (Harry): question pages to one spec ---- */
/* Cards: no extra margin around an odd last card (the gap between cards 2 and 3), and three-card
   rows fill the width like four-card rows so they line up under the title. */
@media (min-width: 768px) {
  .fdc-step .fdc-cards > [class*="fun-basis-"] { margin-left: 0 !important; margin-right: 0 !important; }
  .fdc-step .fdc-cards-3 > [class*="fun-basis-"] { flex-basis: calc(33.333% - 11px) !important; max-width: calc(33.333% - 11px) !important; }
}
/* Card press: the highlight goes round the whole card (an overlay, so the card's own content cannot
   cover it), and the hover and press motion answer straight away instead of over half a second. */
.fdc-step [role="button"] { transition-duration: 160ms !important; }
.fdc-step [role="button"]:active { transform: scale(.96) !important; transition-duration: 90ms !important; }
.fdc-step [role="button"].fdc-picked { outline: none !important; }
.fdc-step [role="button"].fdc-picked::after { content: ""; position: absolute; inset: 0; border: 3px solid #FF6B18; border-radius: inherit; pointer-events: none; z-index: 20; }
/* Every question title the same size (the deposit amount step was 36px against 48px). */
@media (min-width: 768px) { .fdc-step .fdc-q-title { font-size: 48px !important; line-height: 1.12 !important; } }
/* Fields under the title, starting at the title's left edge, in a 640px column centred on the page;
   the button centred under the fields (Harry, 23 Oct: was pinned left of a wide column). Bigger,
   white fields (the month and year were see-through); the 228 x 50 orange button everywhere. */
@media (min-width: 768px) {
  .fdc-q-form [data-scroll-id] > [class*="fun-max-w-"] { max-width: 640px !important; }
  .fdc-q-form form { margin-left: 0 !important; margin-right: 0 !important; width: 100%; max-width: none !important; }
  .fdc-q-form form [class*="fun-justify-start"] { justify-content: center !important; }
  .fdc-q-form form button { margin-left: auto !important; margin-right: auto !important; }
}
.fdc-q-form form .fun-box-border:not(select):not(button), .fdc-q-form .fdc-date-field { background-color: #FFFFFF !important; border-radius: 10px !important; }
.fdc-q-form form .fun-box-border:not(select):not(input):not(button) { min-height: 58px; display: flex; align-items: center; }
.fdc-q-form form input:not([type="checkbox"]), .fdc-q-form select.fdc-select { font-size: 18px !important; min-height: 56px; }
.fdc-q-form select.fdc-select { background-color: transparent !important; width: 100%; color: #0E1614; }
.fdc-q-form button.fdc-q-btn { width: 228px !important; max-width: 100%; min-height: 50px; padding: 12px 20px !important; border: 0 !important; border-radius: 8px !important; background: #FF6B18 !important; color: #FFFFFF !important; box-shadow: inset 0 0 1px rgba(0, 0, 0, .5) !important; cursor: pointer; }
.fdc-q-form button.fdc-q-btn * { font-size: 18px !important; font-weight: 700 !important; color: #FFFFFF !important; background: transparent !important; }
.fdc-q-form button.fdc-q-btn:active { transform: scale(.97); }

/* The month and year did not open (Harry, 16 Oct): a transparent click-catcher left by Perspective's
   dropdown widget sat over the native select. The select now sits above it. */
select.fdc-select.fdc-select-top, .fdc-step form select.fdc-select { position: relative !important; z-index: 40 !important; pointer-events: auto !important; }

/* Arrived from the compensation calculator (17 Oct): their answers are kept, a few questions left. */
.fdc-prefill-note { box-sizing: border-box; width: 100%; margin: 10px auto 0; max-width: 560px; padding: 0 16px; text-align: center; color: #FF6B18; font: 600 15px/1.4 "Roboto", system-ui, sans-serif; }

/* Tick boxes: orange box, white tick, same as the unlock-page consent box (Harry, 20 Oct).
   The captured Perspective checkbox draws a green outline tick; app.js toggles .-checked. */
.checkbox.svelte-17jzik4.-checked .checkbox__border { fill: #FF6B18; stroke: #FF6B18; }
.checkbox.svelte-17jzik4.-checked .checkbox__check { display: none; }
.checkbox.svelte-17jzik4.-checked::after { content: ""; position: absolute; inset: 0; background: 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") center/70% no-repeat; pointer-events: none; }

/* Protection scheme examples on the "communications from a scheme" step (Harry, 23 Oct): stacked and
   smaller on phones, side by side on desktop. Pairing is done in app.js wireCommon. */
.fdc-proof-pair { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 8px 24px 16px; }
.fdc-proof-pair > [data-scroll-id] { width: 100%; max-width: 200px; padding: 0 !important; }
.fdc-proof-pair > [data-scroll-id] > div { max-width: none !important; }
.fdc-proof-pair [class*="fun-px-"] { padding: 0 !important; }
@media (min-width: 768px) {
  .fdc-proof-pair { flex-direction: row; justify-content: center; align-items: flex-start; gap: 32px; }
  .fdc-proof-pair > [data-scroll-id] { max-width: 340px; }
}