.cclf,
body.cclf-page{color-scheme:light}
/* nothing in the funnel scrolls the page sideways: the panel bleeds to the
   edge, and a scrollbar must not turn that into a horizontal scrollbar */
.cclf{overflow-x:clip}
/* LEGACY TOKENS - read before using any name in this block.
   These are the palette from before the artboard redesign. They are kept because
   the signed-off results page still paints with them (and .cclf-rdetail scopes its
   own --ink/--soft on top), so changing a value here changes that page. Nothing on
   the landing, the question boards or the contact step paints with them any more:
   the contact step was the last, moved to the --d-* set in September 2026. A few
   older funnel rules still name these tokens but are overridden by the design
   layer further down - measured on screen, not assumed. Do not add new ones.

   New work uses the --d-* set further down (--d-gold #FFD400, --d-ink #0F1D33,
   --d-soft #4C5B70, --d-panel #0E2545, --d-brand #0A1A30). Reaching for var(--gold)
   here gets the old amber #F4C20D, not the artboard's gold - which is exactly how a
   screen drifts off the design without anyone noticing.

   Two near-blacks are deliberate, not drift: --d-ink (#0F1D33) is text on white;
   --d-gold-ink (#101828) is text on gold, and the results page's gold buttons use
   the same #101828, so the two sets of gold buttons match. */
.cclf{--yellow:#FEF200;
  --gold:#F4C20D; --gold-2:#E0A80D; --gold-3:#F1B600;
  --navy-1:#18305A; --navy-2:#101E37; --navy-3:#080F1D;
  --ink:#131F33; --soft:#57677F; --mid:#68768C; --faint:#8695AC;
  --paper:#EEF1F6; --sheet:#FFFFFF; --rule:#DDE4EE; --rule-2:#EEF2F8;
  --blue:#1E5FA3; --blue-d:#12325F; --bluewash:#EFF5FC; --bluerule:#D3E3F4;
  --goldacc:#A96B12; --goldink:#8F5A0E; --goldwash:#FBF4E6; --goldrule:#EFE0C0;
  --teal:#2F5B6F; --tealwash:#EEF5F8; --tealrule:#CFE1E9;
  /* the result screen's semantic three, kept whole: the contact tstep needs the
     warning colour, and an undefined var silently falls back to inherited ink */
  --ample:#2F6F5E; --soon:#A96B12; --tight:#A5342F;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --display:"Inter Tight","Inter",system-ui,-apple-system,sans-serif;
  --cond:"Barlow Condensed","Inter Tight",Arial Narrow,sans-serif;
  /* straight off CCL-LOGO-COMPENSATION-RECOVERY.svg */
  --mark:#231F20; --mark-2:#6D6E71; --mark-3:#0072BC; --mark-4:#00AEEF;
  --pickwash:#FFFBEC;
  --bar:78px; --barh:80px; --hdr:78px; --prog:88px; --sticky:108px; --chrome:0px;}

/* ---- the funnel is styled at the end of this file, from the approved
     artboards. What follows here is the result and detail pages, which are
     signed off and are not touched by that rebuild. ---------------------- */
/* Legibility, 24 September 2026: the small labels on these two pages were
   under 4.5:1 - the grey #8695AC (3.0:1 on white), the amber #A96B12 on its
   pale washes (3.9-4.4:1), #A9B6C9, #A08A5C, #7C8BA1, #6E7E96 and #B07A76 -
   and the small print on navy was 3.1-4.2:1. Each was taken to the nearest
   shade of its own hue that reads on everything it sits on: #5C6D86 for the
   greys, #8F5A0E (the palette's own --goldink) for the amber, #8F6809,
   #7E6D48 and #9F605B for the gold, khaki and rose, and on navy #879BB9 and
   #919EB0. Colour only; nothing moved. The tokens at the top of the file are
   left alone because the contact step still reads them. */
body.cclf-page .ccl-assessment-tool--progress-header,
body.cclf-page .ccl-sticky-toolbar,
body.cclf-page .ccl-assessment-tool--main-content > *{display:none !important;}
/* the old calculator's own <main>, empty while the evaluator runs, was a second
   main landmark beside the evaluator's (audit item 48) */
body.cclf-page .ccl-assessment-tool--main-content{display:none !important;}

body.cclf-page{padding-bottom:0;}
.cclf-hero,
.cclf-prog,
.cclf-stage,
.cclf-result,
.cclf-rdetail{width:100%;}

body.cclf-page .ccl-assessment-tool--wrapper{display:flex;flex-direction:column;
  min-height:100vh;}

body.cclf-page .ccl-assessment-tool--footer{display:none !important;}

/* ---- the brand bar ------------------------------------------------------
   Every artboard opens on a navy bar: the mark on the left, the number in gold
   on the right, a hairline under it. The page was carrying the old yellow
   gradient header instead, which is the loudest thing on screen and fights the
   navy panel beside it. Colour and type only - the markup is the theme's, and
   the firm's own mark is reversed rather than replaced with type. */
body.cclf-page .ccl-assessment-tool--header{
  background:#0A1A30 !important;background-image:none !important;
  min-height:64px;padding:0 44px;
  border-bottom:1px solid rgba(255,255,255,.10)}
/* The mark is an Illustrator export on a filled plate, so it cannot be reversed
   out with a filter - it comes back as a white block. The boards set the
   wordmark as type, in the display face the page now loads, so that is what
   this does. A reversed SVG can replace it here whenever the firm has one. */
body.cclf-page .ccl-assessment-tool--logo-img{display:none}
body.cclf-page .ccl-assessment-tool--logo{display:flex;flex-direction:column;gap:3px}
body.cclf-page .ccl-assessment-tool--logo::before{
  content:"CARTER CAPNER LAW";font-family:"Archivo","Inter Tight",system-ui,sans-serif;
  font-weight:700;font-size:14px;letter-spacing:.15em;line-height:1;color:#fff}
body.cclf-page .ccl-assessment-tool--logo::after{
  content:"COMPENSATION RECOVERY";font-family:"Inter Tight","Inter",system-ui,sans-serif;
  font-weight:600;font-size:9px;letter-spacing:.24em;line-height:1;color:#FFD400}
body.cclf-page .ccl-assessment-tool--phone-number{
  font-family:"Archivo","Inter Tight",system-ui,sans-serif;
  font-size:18px;font-weight:700;color:#FFD400 !important;letter-spacing:0}
body.cclf-page .ccl-assessment-tool--phone-number i{color:#FFD400}
body.cclf-page .ccl-assessment-tool--phone-hours{
  font-family:"Inter Tight","Inter",system-ui,sans-serif;
  font-size:12.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  color:#90A6C4 !important}
body.cclf-page .ccl-assessment-tool--header-cta{
  background:#FFD400;color:#101828;border:0}
@media (max-width:660px){
  body.cclf-page .ccl-assessment-tool--header{padding:0 18px;min-height:54px}
  body.cclf-page .ccl-assessment-tool--logo::before{font-size:12px;letter-spacing:.14em}
  body.cclf-page .ccl-assessment-tool--logo::after{font-size:7.5px;letter-spacing:.22em}
  body.cclf-page .ccl-assessment-tool--phone-number{font-size:16px}
  /* the mobile board carries the mark and the number and nothing else: the
     strapline wrapped onto two lines and crowded the number */
  body.cclf-page .ccl-assessment-tool--phone-hours{display:none}
  body.cclf-page .ccl-assessment-tool--header-contact{align-items:flex-end}
}
.cclf-arow{display:flex;align-items:baseline;justify-content:space-between;gap:10px 22px;
  grid-template-columns:none;padding:8px 0;border-bottom:1px solid rgba(16,32,64,.055);}
.cclf-arow dt{flex:1 1 auto;min-width:0;}
.cclf-arow dd{flex:0 0 auto;text-align:right;max-width:56%;}
@media (max-width:560px){
  .cclf-arow{flex-wrap:wrap;}
  .cclf-arow dd{max-width:100%;text-align:left;}
}

.cclf-result .cclf-in{padding:52px 26px 46px;}
.cclf-result .cclf-lab{font-size:11.5px;letter-spacing:.16em;}
.cclf-figure{margin-top:14px;font-variant-numeric:tabular-nums lining-nums;}
/* The estimate is the one number the whole page exists to show; on the dark
   result panel it inherited the navy body colour and all but disappeared. */
.cclf-result .cclf-figure{color:#FFFFFF;text-shadow:0 1px 24px rgba(0,0,0,.28);}
.cclf-result .cclf-figure span{color:#93A7C6;}
.cclf-figure span{color:#5E739A;font-weight:400;padding:0 10px;font-size:.62em;
  position:relative;top:-.1em;}
.cclf-result .cclf-sub{font-size:16.5px;line-height:1.6;color:#B9C8DF;max-width:58ch;
  margin-top:16px;}


.cclf-rcta{margin-top:38px;gap:14px;}
.cclf-rcta .cclf-primary{padding:16px 30px;box-shadow:0 14px 30px -14px rgba(244,194,13,.55);
  transition:transform .14s ease,box-shadow .14s ease;}
.cclf-rcta .cclf-primary:hover{transform:translateY(-1px);
  box-shadow:0 18px 34px -14px rgba(244,194,13,.65);}
.cclf-rcta .cclf-secondary{padding:15px 24px;transition:border-color .14s ease,color .14s ease;}

/* The result hero's two calls to action. Both anchors carried only padding and a
   shadow, so they rendered as bare text on the dark hero — a gold smear with no
   button on top of it. These are the fills they were always meant to have. */
.cclf .cclf-rcta{display:flex;flex-wrap:wrap;align-items:center;}
.cclf .cclf-rcta .cclf-primary{display:inline-flex;align-items:center;gap:10px;
  text-decoration:none;border:0;border-radius:12px;
  background-color:#FFD400;
  background-image:linear-gradient(135deg,#FFD400 0%,var(--gold-3) 100%);
  color:#101828;font-family:var(--display);font-size:16.5px;font-weight:800;
  letter-spacing:-.015em;}
.cclf .cclf-rcta .cclf-primary:focus-visible{outline:2px solid #FFD400;outline-offset:3px;}
.cclf .cclf-rcta .cclf-secondary{display:inline-flex;align-items:center;gap:9px;
  text-decoration:none;border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.05);color:#fff;border-radius:12px;
  font-size:15.5px;font-weight:700;}
.cclf .cclf-rcta .cclf-secondary:hover{border-color:rgba(255,255,255,.6);
  background:rgba(255,255,255,.1);color:#fff;}
.cclf .cclf-rcta .cclf-secondary:focus-visible{outline:2px solid #FFD400;outline-offset:3px;}










.cclf-doc{gap:0 52px;grid-template-columns:206px minmax(0,1fr);}
@media (max-width:900px){ .cclf-doc{grid-template-columns:minmax(0,1fr);gap:0;} }



@media (max-width:900px){
  .cclf-doc{gap:0;}
  
}

.cclf-tmo{padding-left:24px;}
.cclf-tmo .cclf-stars{color:var(--gold-2);font-size:15px;letter-spacing:2.5px;}

.cclf-rfoot{margin-top:40px;padding:34px 34px 30px;border-radius:20px;
  background:linear-gradient(135deg,#16294B 0%,var(--navy-2) 68%,#0B1526 100%);
  position:relative;overflow:hidden;}
.cclf-rfoot::after{content:"";position:absolute;right:-120px;top:-120px;width:380px;height:380px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(244,194,13,.13) 0%,rgba(244,194,13,0) 65%);}
.cclf-rfoot > *{position:relative;z-index:1;}
.cclf-rfoot h3{font-size:24px;}
.cclf-rfoot p{font-size:15px;margin-bottom:22px;}
.cclf-rfoot .cclf-p1{padding:15px 30px;font-size:16px;
  box-shadow:0 14px 30px -14px rgba(244,194,13,.5);
  transition:transform .14s ease,box-shadow .14s ease;}
.cclf-rfoot .cclf-p1:hover{transform:translateY(-1px);
  box-shadow:0 18px 34px -14px rgba(244,194,13,.6);}
.cclf-rfoot .cclf-p2{padding:14px 24px;transition:border-color .14s ease;}
.cclf-minor{display:flex;flex-wrap:wrap;gap:22px;margin-top:22px;padding-top:18px;
  border-top:1px solid rgba(255,255,255,.13);}
.cclf-rfoot .cclf-p3{background:none;border:0;padding:0;color:#9FB2CE;font-size:13.5px;
  font-weight:600;text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:rgba(255,255,255,.28);
  transition:color .14s ease;}
.cclf-rfoot .cclf-p3:hover{color:#fff;text-decoration-color:rgba(255,255,255,.7);}
.cclf-rdisc{margin-top:24px;max-width:86ch;}

@media print{ .cclf-rfoot .cclf-minor{display:none!important;} }









.cclf-rdetail{
  --paper:#EEF1F6;        /* cool paper, biased toward the navy, not neutral grey */
  --sheet:#FFFFFF;
  --rule:#DDE4EE;
  --rule-2:#EAEFF6;
  --ink:#131F33;
  --soft:#57677F;
  --faint:#5C6D86;
  --ample:#2F6F5E;        /* semantic, deliberately off the brand accent */
  --soon:#8F5A0E;
  --tight:#A5342F;
  background:var(--paper);border-top:1px solid #E1E7F0;color:var(--ink);
}
.cclf-rdetail .cclf-in{max-width:1000px;margin:0 auto;padding:52px 26px 70px;}

.cclf-rsec{margin-top:54px;}
.cclf-rsec:first-child{margin-top:0;}
.cclf-rsec > h2{position:relative;margin:0 0 6px;padding:0;font-size:24px;font-weight:800;
  letter-spacing:-.026em;color:var(--ink);line-height:1.2;text-wrap:balance;}
.cclf-rsec > h2::before{display:none;}
.cclf-rsec > p.cclf-lead{margin:0 0 22px;font-size:15.5px;line-height:1.62;color:var(--soft);
  max-width:70ch;}

.cclf-snap{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  grid-auto-rows:auto;}



.cclf-clocks{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr));gap:18px;}
.cclf-clock{--tone:#12325F;background:var(--sheet);border:1px solid var(--rule);
  border-radius:4px 4px 14px 14px;border-top:3px solid var(--tone);
  padding:22px 24px 20px;display:grid;gap:0;
  box-shadow:0 1px 2px rgba(19,31,51,.04),0 22px 44px -34px rgba(19,31,51,.4);}
.cclf-clock.cclf-is-ample{--tone:var(--ample);}
.cclf-clock.cclf-is-soon{--tone:var(--soon);}
.cclf-clock.cclf-is-tight,
.cclf-clock.cclf-is-past{--tone:var(--tight);}
.cclf-clock header{margin-bottom:16px;}
.cclf-clock h3{margin:0 0 5px;font-size:17px;font-weight:800;letter-spacing:-.018em;
  color:var(--ink);line-height:1.3;font-family:var(--display);}
.cclf-clock .cclf-cw{margin:0;font-size:13.5px;line-height:1.55;color:var(--soft);}
.cclf-cnum{display:flex;align-items:baseline;gap:9px;margin-bottom:13px;}
.cclf-cnum b{font-family:var(--display);font-size:44px;font-weight:800;letter-spacing:-.045em;
  line-height:.92;color:var(--tone);font-variant-numeric:tabular-nums lining-nums;}
.cclf-cnum span{font-size:13px;font-weight:700;letter-spacing:.01em;color:var(--soft);}

.cclf-rail{position:relative;height:6px;border-radius:99px;background:#E7ECF4;
  overflow:visible;margin:0 6px;}
.cclf-rail i{display:block;height:100%;border-radius:99px;background:var(--tone);opacity:.85;}
.cclf-rail u{position:absolute;top:50%;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;
  border-radius:50%;background:var(--sheet);border:2.5px solid var(--tone);text-decoration:none;}
.cclf-cends{display:flex;justify-content:space-between;gap:14px;margin-top:11px;}
.cclf-cends span{display:flex;flex-direction:column;gap:2px;font-size:10.5px;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:var(--faint);font-family:var(--sans);}
.cclf-cends b{font-family:var(--display);font-size:14px;font-weight:700;letter-spacing:-.012em;
  color:var(--ink);text-transform:none;letter-spacing:normal;
  font-variant-numeric:tabular-nums;}
.cclf-cends .cclf-due{text-align:right;}
.cclf-cends .cclf-due b{color:var(--tone);}
.cclf-cstat{margin:15px 0 0;padding-top:13px;border-top:1px solid var(--rule-2);
  font-size:11.5px;line-height:1.5;color:var(--faint);font-style:italic;}
.cclf-clocknote{margin:18px 0 0;padding:14px 18px;border-left:3px solid #12325F;
  background:var(--sheet);border-radius:0 8px 8px 0;font-size:14.5px;line-height:1.6;
  color:var(--ink);}

.cclf-levers{display:grid;gap:0;border-top:1px solid var(--rule);}
.cclf-lev{--tone:#12325F;display:grid;grid-template-columns:34px minmax(0,1fr) auto;
  gap:0 16px;align-items:start;padding:18px 2px;border-bottom:1px solid var(--rule);}
.cclf-l-up{--tone:var(--ample);}
.cclf-l-down{--tone:var(--tight);}
.cclf-l-watch{--tone:var(--soon);}
.cclf-l-info{--tone:#12325F;}
.cclf-lm{width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;
  justify-content:center;border:1.5px solid var(--tone);color:var(--tone);margin-top:1px;}
.cclf-lm svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round;}
.cclf-lt{margin:0 0 5px;font-family:var(--display);font-size:16.5px;font-weight:700;
  letter-spacing:-.016em;line-height:1.35;color:var(--ink);}
.cclf-lw{margin:0;font-size:14.5px;line-height:1.62;color:var(--soft);max-width:68ch;}
@media (max-width:620px){
  .cclf-lev{grid-template-columns:28px minmax(0,1fr);gap:0 13px;}
}

.cclf-doc{display:grid;grid-template-columns:180px minmax(0,1fr);gap:0 32px;align-items:start;}
@media (max-width:900px){ .cclf-doc{grid-template-columns:minmax(0,1fr);gap:0;} }









.cclf-acc{display:block;background:var(--sheet);border:1px solid var(--rule);border-radius:14px;
  padding:2px 32px;box-shadow:0 1px 2px rgba(19,31,51,.035),0 24px 48px -38px rgba(19,31,51,.34);}













@media (max-width:620px){
  .cclf-acc{padding:2px 18px;}
  
  
}
.cclf-ansg{column-count:auto;display:block;}
.cclf-agrp{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:0 40px;
  padding:20px 0 8px;border-top:1px solid var(--rule-2);}
.cclf-agrp:first-child{border-top:0;padding-top:24px;}
.cclf-agrp > h4{grid-column:1/-1;margin:0 0 6px;font-size:10.5px;font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;color:var(--faint);font-family:var(--sans);}
.cclf-arow{display:flex;align-items:baseline;justify-content:space-between;gap:10px 22px;
  grid-template-columns:none;padding:8px 0;border-bottom:1px solid #F2F5F9;
  break-inside:auto;}
.cclf-arow dt{flex:1 1 auto;min-width:0;font-size:13.5px;color:var(--soft);line-height:1.45;}
.cclf-arow dd{flex:0 0 auto;max-width:56%;text-align:right;font-size:13.5px;font-weight:700;
  color:var(--ink);line-height:1.45;}
@media (max-width:560px){
  .cclf-arow{flex-wrap:wrap;}
  .cclf-arow dd{max-width:100%;text-align:left;}
}

#cclf-rfaq{display:block;background:var(--sheet);border:1px solid var(--rule);border-radius:14px;
  padding:0 30px;box-shadow:0 1px 2px rgba(19,31,51,.035),0 24px 48px -38px rgba(19,31,51,.34);}
@media (max-width:620px){ #cclf-rfaq{padding:0 18px;} }

.cclf-tmo{background:none;border:0;border-radius:0;padding:2px 0 0 24px;
  border-left:3px solid var(--gold);display:grid;gap:12px;}
.cclf-tmo p{margin:0;font-size:17px;line-height:1.6;color:var(--ink);font-style:normal;
  max-width:64ch;}
.cclf-tmo .cclf-meta{display:flex;align-items:center;gap:11px;flex-wrap:wrap;}
.cclf-tmo .cclf-stars{color:var(--gold-2);font-size:15px;letter-spacing:2.5px;}
.cclf-tmo .cclf-who{font-size:12.5px;font-weight:700;color:var(--soft);}

.cclf-rfoot{margin-top:48px;padding:34px 34px 30px;border-radius:18px;color:#fff;
  background:linear-gradient(135deg,#16294B 0%,#0F1C33 68%,#0B1526 100%);
  position:relative;overflow:hidden;}
.cclf-rfoot::after{content:"";position:absolute;right:-120px;top:-120px;width:380px;height:380px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(244,194,13,.13) 0%,rgba(244,194,13,0) 65%);}
.cclf-rfoot > *{position:relative;z-index:1;}
.cclf-rfoot h3{margin:0 0 7px;font-size:24px;font-weight:800;letter-spacing:-.024em;}
.cclf-rfoot p{margin:0 0 22px;font-size:15px;line-height:1.6;color:#C3D0E4;max-width:56ch;}
.cclf-rfoot .cclf-acts{display:flex;flex-wrap:wrap;gap:12px;}
.cclf-rfoot .cclf-p1{background:linear-gradient(135deg,var(--gold) 0%,var(--gold-2) 100%);
  color:#0F1C33;border:0;padding:15px 30px;font-size:16px;font-weight:800;
  box-shadow:0 14px 30px -14px rgba(244,194,13,.5);
  transition:transform .14s ease,box-shadow .14s ease;}
.cclf-rfoot .cclf-p1:hover{transform:translateY(-1px);
  box-shadow:0 18px 34px -14px rgba(244,194,13,.6);}
.cclf-rfoot .cclf-p2{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.3);
  padding:14px 24px;font-size:14.5px;font-weight:700;transition:border-color .14s ease;}
.cclf-rfoot .cclf-p2:hover{border-color:rgba(255,255,255,.62);}
.cclf-minor{display:flex;flex-wrap:wrap;gap:22px;margin-top:22px;padding-top:18px;
  border-top:1px solid rgba(255,255,255,.13);}
.cclf-rfoot .cclf-p3{background:none;border:0;padding:0;color:#9FB2CE;font-size:13.5px;
  font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:rgba(255,255,255,.28);
  transition:color .14s ease;}
.cclf-rfoot .cclf-p3:hover{color:#fff;text-decoration-color:rgba(255,255,255,.7);}
.cclf-rdisc{margin:26px 0 0;font-size:12.5px;line-height:1.68;color:#7C8BA1;max-width:88ch;}


.cclf-rfoot .cclf-p3:focus-visible{outline:2px solid var(--cta);outline-offset:3px;
  border-radius:3px;}
@media (prefers-reduced-motion:reduce){ .cclf-rdetail *{transition:none!important;} }
@media print{
  
.cclf-rfoot .cclf-minor{display:none!important;}
  .cclf-clock,
.cclf-acc,
#cclf-rfaq{box-shadow:none;}
}

.cclf-snap{display:block;border:0;}
.cclf-fnote{margin:0;max-width:64ch;font-size:19px;line-height:1.62;color:var(--ink);
  letter-spacing:-.008em;}
.cclf-fnfoot{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;
  margin:20px 0 0;padding-top:15px;border-top:1px solid var(--rule-2);
  font-size:12.5px;line-height:1.55;color:var(--faint);max-width:64ch;}
.cclf-fnfoot span{font-family:var(--sans);font-size:9.5px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:#5C6D86;}
@media (max-width:620px){ .cclf-fnote{font-size:17px;} }

.cclf-result .cclf-in{max-width:1320px;padding:56px 32px 50px;}

.cclf-result .cclf-sub{max-width:44ch;}

.cclf-rcta{margin-top:32px;}


.cclf-rdetail .cclf-in{max-width:1320px;padding:54px 32px 72px;}
.cclf-file{display:grid;grid-template-columns:246px minmax(0,1fr);gap:0 56px;align-items:start;}
@media (max-width:1080px){ .cclf-file{grid-template-columns:minmax(0,1fr);gap:0;} }

.cclf-spine{position:sticky;top:24px;align-self:start;}
.cclf-spinein{display:grid;gap:0;}
.cclf-spinelab{margin:0 0 12px;font-family:var(--sans);font-size:10.5px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--faint);}
.cclf-filenav{display:block;}
.cclf-filenav a{display:block;text-decoration:none;transition:color .14s ease,
  border-color .14s ease,background .14s ease;}
.cclf-fn1{padding:9px 13px;border-left:2px solid var(--rule);font-size:14px;line-height:1.35;
  font-weight:700;color:var(--soft);letter-spacing:-.008em;}
.cclf-fn1:hover{color:var(--ink);border-left-color:#B5C3D6;background:rgba(19,31,51,.03);}
.cclf-fn1.cclf-here,
.cclf-fn1.cclf-within{color:#0846c1;border-left-color:var(--cta);
  background:#E9F0FF;}
.cclf-fnsub{display:block;}
.cclf-fn2{padding:6px 13px 6px 24px;border-left:2px solid var(--rule);font-size:12.5px;
  line-height:1.35;font-weight:600;color:var(--faint);}
.cclf-fn2:hover{color:var(--ink);border-left-color:#B5C3D6;}
.cclf-fn2.cclf-here{color:#0846c1;border-left-color:var(--cta);background:#F1F6FF;}

.cclf-spinenext{margin-top:22px;padding:14px 15px;border-radius:11px;background:var(--sheet);
  border:1px solid var(--rule);border-left:3px solid var(--tone,#12325F);}
.cclf-spinenext.cclf-is-ample{--tone:var(--ample);}
.cclf-spinenext.cclf-is-soon{--tone:var(--soon);}
.cclf-spinenext.cclf-is-tight,
.cclf-spinenext.cclf-is-past{--tone:var(--tight);}
.cclf-snlab{margin:0 0 5px;font-family:var(--sans);font-size:10px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--faint);}
.cclf-sndate{margin:0;font-family:var(--display);font-size:17px;font-weight:800;
  letter-spacing:-.02em;color:var(--tone,#12325F);font-variant-numeric:tabular-nums;}
.cclf-snwhat{margin:3px 0 0;font-size:12px;line-height:1.45;color:var(--soft);}

.cclf-spinecall{display:block;margin-top:14px;padding:13px 15px;border-radius:11px;
  background:#12325F;color:#fff;text-decoration:none;
  transition:background .15s ease,transform .15s ease;}
.cclf-spinecall:hover{background:#0B2244;transform:translateY(-1px);}
.cclf-spinecall span{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:#9FB6D8;}
.cclf-spinecall b{display:block;margin-top:3px;font-family:var(--display);font-size:18px;
  font-weight:800;letter-spacing:-.02em;}
.cclf-spinecall:focus-visible{outline:2px solid var(--cta);outline-offset:3px;}

@media (max-width:1080px){
  .cclf-spine{position:static;margin-bottom:36px;padding-bottom:26px;
    border-bottom:1px solid var(--rule);}
  .cclf-spinein{grid-template-columns:minmax(0,1fr);}
  .cclf-filenav{display:flex;flex-wrap:wrap;gap:7px;}
  .cclf-fnsub{display:none;}
  .cclf-filenav a{border-left:0;border:1px solid var(--rule);border-radius:999px;
    padding:7px 14px;font-size:12.5px;background:var(--sheet);}
  .cclf-fn1.cclf-here,
.cclf-fn1.cclf-within{border-color:var(--cta);}
  .cclf-spinenext{display:none;}
  .cclf-spinecall{display:inline-block;margin-top:16px;}
}

.cclf-rsec{margin-top:58px;}
.cclf-rsec:first-child{margin-top:0;}

/* levers: two to a row once there is room, so the list stops being a column */
@media (min-width:900px){
  .cclf-levers{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 44px;
    border-top:1px solid var(--rule);}
  .cclf-lev{border-bottom:1px solid var(--rule);}
  .cclf-lev:nth-last-child(-n+2):nth-child(odd):last-child{grid-column:1/-1;}
}
.cclf-lw{max-width:none;}

/* the detail: topic in its own column, prose held to a readable measure */

.cclf-acc{padding:2px 36px;}

/* the schedule spreads to three columns on a wide sheet */
@media (min-width:1180px){
  .cclf-agrp{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px;}
}
.cclf-rfoot{margin-top:44px;}
.cclf-rfoot p{max-width:52ch;}
.cclf-rdisc{max-width:92ch;}

/* the range has to hold one line in the narrower left column, so the figure is
   sized to the column rather than to the viewport once the band splits */
@media (min-width:1080px){
  .cclf-figure{font-size:clamp(34px,3.05vw,45px);}
  .cclf-figure span{padding:0 7px;}
  .cclf-result .cclf-sub{max-width:40ch;font-size:15.5px;}
  .cclf-rsec > h2{font-size:26px;}
}

.cclf-resultwrap{display:block;}

.cclf-result .cclf-in{max-width:1180px;margin:0 auto;padding:74px 32px 68px;text-align:center;}
.cclf-result .cclf-lab{font-size:11.5px;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;color:var(--yellow);margin:0;}

.cclf-scale{display:grid;grid-template-columns:minmax(0,1fr) minmax(120px,190px) minmax(0,1fr);
  align-items:start;gap:0 26px;margin:34px auto 0;max-width:960px;}
@media (max-width:820px){
  .cclf-scale{grid-template-columns:minmax(0,1fr);gap:22px 0;margin-top:26px;}
}
.cclf-send{display:grid;gap:0;}
.cclf-send b{display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(32px,5.1vw,58px);line-height:1;letter-spacing:-.042em;color:#fff;
  font-variant-numeric:tabular-nums lining-nums;}
.cclf-send span{display:block;margin-top:11px;font-family:var(--sans);font-size:10.5px;
  font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);}
.cclf-send u{display:block;margin-top:7px;text-decoration:none;font-size:13px;line-height:1.55;
  color:#93A7C6;max-width:30ch;}
.cclf-send-lo{text-align:right;justify-items:end;}
.cclf-send-lo u{margin-left:auto;}
.cclf-send-hi{text-align:left;justify-items:start;}
@media (max-width:820px){
  .cclf-send-lo,
.cclf-send-hi{text-align:center;justify-items:center;}
  .cclf-send-lo u,
.cclf-send-hi u{margin-left:auto;margin-right:auto;}
}

.cclf-strack{position:relative;height:58px;display:flex;align-items:center;justify-content:center;}
.cclf-strack i{position:absolute;left:0;right:0;top:26px;height:2px;border-radius:99px;
  background:linear-gradient(90deg,rgba(244,194,13,.28) 0%,var(--gold) 50%,rgba(244,194,13,.28) 100%);}
.cclf-strack::before,
.cclf-strack::after{content:"";position:absolute;top:21px;width:12px;height:12px;
  border-radius:50%;border:2px solid var(--gold);background:var(--navy-2);}
.cclf-strack::before{left:-4px;}
.cclf-strack::after{right:-4px;}
.cclf-strack em{position:relative;top:22px;font-style:normal;font-family:var(--sans);
  font-size:9.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#7E93B4;}
@media (max-width:820px){
  .cclf-strack{height:34px;}
  .cclf-strack i{left:22%;right:22%;}
  .cclf-strack::before{left:calc(22% - 4px);}
  .cclf-strack::after{right:calc(22% - 4px);}
}

.cclf-figure{font-size:clamp(32px,5.2vw,58px);margin:26px 0 0;}
.cclf-result .cclf-sub{margin:32px auto 0;max-width:60ch;font-size:16px;line-height:1.62;
  color:#B9C8DF;text-align:center;}
.cclf-rcta{justify-content:center;margin-top:34px;}

.cclf-rbreak{background:#fff;border-top:1px solid #E4EAF3;color:#131F33;}
.cclf-rbreak .cclf-in{max-width:1180px;margin:0 auto;padding:62px 32px 66px;}
.cclf-klab{margin:0 0 10px;font-family:var(--sans);font-size:10.5px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:#5C6D86;}
.cclf-rbreak h2{margin:0 0 8px;font-family:var(--display);font-size:clamp(24px,2.5vw,30px);
  font-weight:800;letter-spacing:-.028em;line-height:1.18;color:#131F33;text-wrap:balance;}
.cclf-klead{margin:0 0 30px;font-size:16px;line-height:1.62;color:#57677F;max-width:66ch;}


.cclf-rnext{background:linear-gradient(150deg,#16294B 0%,#0F1C33 70%,#0B1526 100%);color:#fff;}
.cclf-rnext .cclf-in{max-width:1180px;margin:0 auto;padding:58px 32px 62px;}
.cclf-rnext .cclf-klab{color:var(--gold);}
.cclf-rnext h2{margin:0 0 30px;font-family:var(--display);font-size:clamp(24px,2.5vw,30px);
  font-weight:800;letter-spacing:-.028em;line-height:1.18;color:#fff;text-wrap:balance;}


.cclf-rdetail{border-top:0;}

.cclf-result{position:relative;isolation:isolate;
  background:
    radial-gradient(58% 48% at 50% 38%,rgba(244,194,13,.115) 0%,rgba(244,194,13,0) 68%),
    radial-gradient(90% 70% at 50% 120%,rgba(11,92,255,.16) 0%,rgba(11,92,255,0) 60%),
    repeating-linear-gradient(180deg,rgba(255,255,255,.019) 0 1px,transparent 1px 64px),
    linear-gradient(168deg,#18305A 0%,#101E37 46%,#080F1D 100%);}
.cclf-result::after{display:none;}
.cclf-result .cclf-in{position:relative;z-index:1;}

.cclf-docbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:16px 30px;padding-bottom:22px;margin-bottom:34px;
  border-bottom:1px solid rgba(255,255,255,.13);text-align:left;}
.cclf-done{display:inline-flex;align-items:center;gap:9px;margin:0;
  font-family:var(--sans);font-size:11px;font-weight:800;letter-spacing:.15em;
  text-transform:uppercase;color:#7FE0BC;}
.cclf-done svg{width:17px;height:17px;fill:none;stroke:#7FE0BC;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;}
.cclf-docbar .cclf-meta{display:flex;flex-wrap:wrap;gap:6px 32px;margin:0;}
.cclf-docbar .cclf-meta > div{display:grid;gap:2px;}
.cclf-docbar dt{margin:0;font-family:var(--sans);font-size:9.5px;font-weight:800;
  letter-spacing:.15em;text-transform:uppercase;color:#879BB9;}
.cclf-docbar dd{margin:0;font-family:var(--display);font-size:14px;font-weight:700;
  letter-spacing:-.008em;color:#E6EDF8;font-variant-numeric:tabular-nums;}
@media (max-width:700px){
  .cclf-docbar{flex-direction:column;align-items:flex-start;}
  .cclf-docbar .cclf-meta{gap:10px 26px;}
}

.cclf-rhead{margin:0 0 26px;font-family:var(--display);font-weight:700;
  font-size:clamp(26px,3.3vw,40px);line-height:1.12;letter-spacing:-.028em;color:#fff;
  text-wrap:balance;max-width:22ch;margin-left:auto;margin-right:auto;}

.cclf-result .cclf-lab{display:inline-flex;align-items:center;gap:9px;
  padding:7px 16px;border-radius:999px;
  border:1px solid rgba(244,194,13,.32);background:rgba(244,194,13,.08);
  color:var(--gold);letter-spacing:.17em;}

.cclf-send b{text-shadow:0 3px 32px rgba(4,10,22,.6);}

.cclf-assure{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0 30px;margin:46px auto 0;padding:30px 0 0;max-width:900px;
  border-top:1px solid rgba(255,255,255,.12);text-align:center;}
@media (max-width:760px){
  .cclf-assure{grid-template-columns:minmax(0,1fr);gap:24px 0;margin-top:36px;}
}
.cclf-assure li{display:grid;justify-items:center;gap:0;}
.cclf-assure svg{width:22px;height:22px;fill:none;stroke:var(--gold);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;margin-bottom:11px;}
.cclf-assure b{font-family:var(--display);font-size:15px;font-weight:800;
  letter-spacing:-.014em;color:#fff;}
.cclf-assure span{margin-top:5px;font-size:12.5px;font-weight:400;line-height:1.5;
  color:#8FA3C2;max-width:26ch;}

.cclf-covers{grid-column:1/-1;margin-top:14px;padding:14px 16px;border-radius:10px;
  background:#F4F7FB;border:1px solid #E4EAF3;}
.cclf-cvlab{margin:0 0 7px;font-family:var(--sans);font-size:10px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:#5C6D86;}
.cclf-covers ul{margin:0;padding:0;list-style:none;display:grid;gap:5px;}
.cclf-covers li{position:relative;padding-left:19px;font-size:13.5px;line-height:1.5;
  color:#3B4B63;}
.cclf-covers li::before{content:"";position:absolute;left:0;top:8px;width:9px;height:5px;
  border-left:1.8px solid #C99A0E;border-bottom:1.8px solid #C99A0E;
  transform:rotate(-45deg);}

.cclf-rnext .cclf-klead{color:#A8B8D0;margin-bottom:34px;max-width:60ch;}


.cclf-swhen{margin:0 0 7px;font-family:var(--sans);font-size:10.5px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold);}
.cclf-sbody{margin:0;font-size:14.5px;line-height:1.62;color:#A8B8D0;}

.cclf-ransband{background:#fff;border-top:1px solid #E4EAF3;color:#131F33;}
.cclf-ransband .cclf-in{max-width:1320px;margin:0 auto;padding:60px 32px 66px;}
.cclf-ransband h2{margin:0 0 8px;font-family:var(--display);font-size:clamp(24px,2.5vw,30px);
  font-weight:800;letter-spacing:-.028em;line-height:1.18;color:#131F33;text-wrap:balance;}
.cclf-ransband .cclf-agrp{padding:22px 0 10px;border-top:1px solid #EAEFF6;}
.cclf-ransband .cclf-agrp:first-child{border-top:0;}
@media (min-width:1080px){
  .cclf-ransband .cclf-agrp{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 44px;}
}

.cclf-rclose{background:#EEF1F6;}
.cclf-rclose .cclf-in{max-width:1320px;margin:0 auto;padding:56px 32px 70px;}
.cclf-rclose .cclf-rfoot{margin-top:0;}

.cclf-trust span{font-weight:400;}

.cclf-prep{position:fixed;inset:0;z-index:70;display:flex;align-items:center;
  justify-content:center;overflow-y:auto;overscroll-behavior:contain;
  padding:clamp(20px,5vh,56px) 20px;
  background:
    radial-gradient(60% 46% at 50% 40%,rgba(244,194,13,.13) 0%,rgba(244,194,13,0) 66%),
    radial-gradient(90% 70% at 50% 118%,rgba(11,92,255,.17) 0%,rgba(11,92,255,0) 60%),
    linear-gradient(168deg,#18305A 0%,#101E37 46%,#080F1D 100%);}
.cclf-prep .cclf-in{width:100%;max-width:600px;margin:auto;padding:0;text-align:center;
  position:relative;}
.cclf-prep:not([hidden]) ~ .cclf-in{opacity:0;pointer-events:none;}
.cclf-result > .cclf-in{transition:opacity .5s ease;}
.cclf-lit{animation:cclf-lift .55s ease both;}
@keyframes cclf-lift{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

.cclf-pgreet{margin:0 0 8px;font-size:15px;color:#93A7C6;}
.cclf-prep h2{margin:0 0 30px;font-family:var(--display);font-weight:800;
  font-size:clamp(24px,3vw,34px);letter-spacing:-.028em;color:#fff;line-height:1.15;}

.cclf-plist{list-style:none;margin:0 auto;padding:0;display:grid;gap:2px;
  max-width:470px;text-align:left;}
.cclf-pstep{display:flex;align-items:center;gap:14px;padding:9px 4px;
  opacity:.34;transition:opacity .3s ease;}
.cclf-pstep.cclf-on,
.cclf-pstep.cclf-did{opacity:1;}
.cclf-pi{position:relative;width:32px;height:32px;flex:0 0 auto;border-radius:50%;
  border:1.5px solid rgba(244,194,13,.4);display:inline-flex;align-items:center;
  justify-content:center;transition:border-color .3s ease,background .3s ease;}
.cclf-pi svg{width:16px;height:16px;fill:none;stroke:var(--gold);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;transition:opacity .25s ease;}
.cclf-pt{position:absolute;opacity:0;stroke:#0F1C33 !important;stroke-width:2.6 !important;}
.cclf-pstep.cclf-on .cclf-pi{border-color:var(--gold);
  box-shadow:0 0 0 5px rgba(244,194,13,.12);}
.cclf-pstep.cclf-did .cclf-pi{background:#7FE0BC;border-color:#7FE0BC;}
.cclf-pstep.cclf-did .cclf-pi svg:first-child{opacity:0;}
.cclf-pstep.cclf-did .cclf-pt{opacity:1;}
.cclf-ptx{font-size:15px;line-height:1.45;color:#D4DEEE;}

.cclf-pbar{max-width:470px;margin:28px auto 0;height:3px;border-radius:99px;
  background:rgba(255,255,255,.11);overflow:hidden;}
.cclf-pbar i{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--gold-2),var(--gold));transition:width .34s ease;}

body.cclf-lockscroll{overflow:hidden !important;position:fixed;top:0;left:0;right:0;
  width:100%;}
.cclf-pskip{display:inline-flex;align-items:center;gap:9px;margin-top:26px;cursor:pointer;
  font:inherit;font-size:14px;font-weight:700;letter-spacing:-.005em;color:#D4DEEE;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.24);
  border-radius:999px;padding:11px 22px;
  transition:background .16s ease,border-color .16s ease,color .16s ease;}
.cclf-pskip svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;}
.cclf-pskip:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.5);
  color:#fff;}
.cclf-pskip:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}

@media (prefers-reduced-motion:reduce){
  .cclf-prep{display:none !important;}
  .cclf-prep:not([hidden]) ~ .cclf-in{opacity:1;}
  .cclf-lit{animation:none;}
}
@media (max-width:600px){
  .cclf-plist{max-width:none;}
  .cclf-ptx{font-size:14px;}
}
/* on a short screen the whole sequence still has to sit on one screen */
@media (max-height:900px){
  .cclf-prep{padding-top:clamp(24px,5vh,56px);}
  .cclf-prep h2{margin-bottom:20px;font-size:clamp(21px,2.6vw,27px);}
  .cclf-pstep{padding:6px 4px;}
  .cclf-pi{width:28px;height:28px;}
  .cclf-pbar{margin-top:20px;}
  .cclf-pskip{margin-top:18px;}
}

@media (max-height:700px),(max-width:480px){
  .cclf-pgreet{font-size:14px;margin-bottom:6px;}
  .cclf-prep h2{margin-bottom:16px;font-size:clamp(20px,5.6vw,25px);}
  .cclf-pstep{padding:5px 2px;gap:12px;}
  .cclf-pi{width:26px;height:26px;}
  .cclf-pi svg{width:14px;height:14px;}
  .cclf-ptx{font-size:13.5px;}
  .cclf-pbar{margin-top:16px;}
  .cclf-pskip{margin-top:16px;padding:10px 18px;font-size:13.5px;}
}

/* --- print ---------------------------------------------------------------
   There is a "Print assessment" button on this page, so the stage has to
   survive a printer. Dark grounds either drop out and take the white type with
   them or lay down a slab of ink, so on paper the assessment goes back to
   black on white and the decoration comes off.
------------------------------------------------------------------------- */
@media print{
  .cclf-prep{display:none !important;}
  body.cclf-lockscroll{overflow:visible !important;position:static !important;}
  .cclf-result,
.cclf-rnext{background:#fff !important;color:#000 !important;
    border-top:1px solid #000;}
  .cclf-result::after,
.cclf-rnext::after{display:none !important;}
  .cclf-result .cclf-in,
.cclf-rnext .cclf-in{padding:18pt 0 !important;}
  .cclf-docbar{border-bottom:1px solid #999;}
  .cclf-done,
.cclf-done svg{color:#000 !important;stroke:#000 !important;}
  .cclf-docbar dt,
.cclf-rnext .cclf-klab,
.cclf-send span,
.cclf-swhen{color:#444 !important;}
  .cclf-docbar dd,
.cclf-rhead,
.cclf-send b,
.cclf-figure,
.cclf-assure b,
.cclf-rnext h2{color:#000 !important;text-shadow:none !important;}
  .cclf-result .cclf-lab{color:#000 !important;border-color:#999 !important;
    background:none !important;}
  .cclf-result .cclf-lab svg,
.cclf-assure svg{stroke:#000 !important;}
  .cclf-result .cclf-sub,
.cclf-send u,
.cclf-assure span,
.cclf-sbody,
.cclf-rnext .cclf-klead{color:#333 !important;}
  .cclf-strack i{background:#000 !important;}
  .cclf-strack::before,
.cclf-strack::after{border-color:#000 !important;background:#fff !important;}
  .cclf-rcta,
.cclf-pskip{display:none !important;}
  .cclf-assure{border-color:#bbb !important;}
  .cclf-result,
.cclf-rbreak,
.cclf-rnext,
.cclf-ransband{break-inside:avoid-page;}
}

.cclf-rbreak .cclf-in{max-width:1320px;padding:62px 32px 74px;}
.cclf-rbreak .cclf-klead{max-width:74ch;margin-bottom:30px;}




.cclf-rnext .cclf-in{max-width:1320px;padding:62px 32px 70px;}
.cclf-rnext .cclf-klead{margin-bottom:34px;max-width:70ch;}

.cclf-nact{--tone:#E7BE4A;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0 44px;align-items:start;margin:0 0 46px;padding:0;
  background:none;border:0;}
.cclf-nact.cclf-is-ample{--tone:#6FC7A9;}
.cclf-nact.cclf-is-soon{--tone:#E7BE4A;}
.cclf-nact.cclf-is-tight,
.cclf-nact.cclf-is-past{--tone:#EE8A83;}
@media (max-width:1040px){
  .cclf-nact{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px 40px;}
  .cclf-ncall{grid-column:1/-1;}
}
@media (max-width:700px){
  .cclf-nact{grid-template-columns:minmax(0,1fr);gap:22px 0;}
  .cclf-ncall{grid-column:1;}
}
.cclf-nclock{min-width:0;}
.cclf-nceye{display:flex;align-items:center;gap:9px;margin:0;font-family:var(--sans);
  font-size:10px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--tone);}
.cclf-nceye::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--tone);
  flex:0 0 auto;box-shadow:0 0 0 4px color-mix(in srgb,var(--tone) 22%,transparent);}
.cclf-ncdate{margin:9px 0 0;font-family:var(--display);font-size:clamp(28px,3.2vw,40px);
  font-weight:800;letter-spacing:-.035em;line-height:1;color:#fff;
  font-variant-numeric:tabular-nums lining-nums;}
.cclf-ncwhat{margin:9px 0 0;font-family:var(--sans);font-size:13px;font-weight:700;
  letter-spacing:.02em;color:var(--tone);}
.cclf-ncnote{margin:0;padding-top:4px;font-size:14px;line-height:1.62;color:#A8B8D0;}

.cclf-ncall{min-width:0;}
.cclf-ncta{display:flex;justify-content:center;align-items:center;gap:12px;
  background:linear-gradient(135deg,var(--gold) 0%,var(--gold-2) 100%);color:#0F1C33;
  border-radius:999px;padding:16px 30px;font-family:var(--display);font-size:clamp(20px,2vw,25px);
  font-weight:800;letter-spacing:-.02em;text-decoration:none;
  box-shadow:0 14px 30px -14px rgba(244,194,13,.6);transition:transform .14s ease;}
.cclf-ncta:hover{transform:translateY(-1px);}
.cclf-ncta svg{width:22px;height:22px;fill:currentColor;flex:0 0 auto;}
.cclf-ncsub{margin:14px 0 0;font-size:13.5px;line-height:1.6;color:#A8B8D0;}
.cclf-ncsub b{color:#fff;font-weight:700;}

.cclf-steps3{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:0 44px;counter-reset:s3;
  position:relative;}
.cclf-steps3::before{content:"";position:absolute;left:16px;right:16px;top:16px;height:1.5px;
  background:linear-gradient(90deg,rgba(244,194,13,.55),rgba(244,194,13,.28));}
@media (max-width:860px){
  .cclf-steps3{grid-template-columns:minmax(0,1fr);gap:30px 0;}
  .cclf-steps3::before{left:16px;right:auto;top:16px;bottom:16px;width:1.5px;height:auto;
    background:linear-gradient(rgba(244,194,13,.55),rgba(244,194,13,.28));}
}
.cclf-s3{position:relative;padding-top:52px;counter-increment:s3;}
@media (max-width:860px){ .cclf-s3{padding:0 0 0 50px;} }
.cclf-s3::before{content:counter(s3);position:absolute;left:0;top:0;
  display:flex;align-items:center;justify-content:center;width:33px;height:33px;border-radius:50%;
  background:#101E38;border:1.5px solid var(--gold);
  font-family:var(--display);font-size:15px;font-weight:800;color:var(--gold);
  box-shadow:0 0 0 6px #12203A;}
@media (max-width:860px){ .cclf-s3::before{top:-2px;} }
.cclf-rnext .cclf-s3 .cclf-swhen{margin:0 0 8px;font-family:var(--sans);
  font-size:10.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);}
.cclf-rnext .cclf-s3 h3{margin:0 0 10px;font-family:var(--display);font-size:22px;font-weight:800;
  letter-spacing:-.026em;line-height:1.22;color:#fff;}
.cclf-rnext .cclf-s3 .cclf-sbody{margin:0;font-size:14.5px;line-height:1.62;color:#A8B8D0;}

.cclf-paths{display:block;}
.cclf-two{display:grid;grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr);
  grid-template-rows:auto auto auto auto;}

.cclf-tcell{padding:20px 24px 22px;background:#fff;}
.cclf-a{grid-column:1;--acc:#1E5FA3;--accb:#EFF5FC;--accr:#D3E3F4;}
.cclf-b{grid-column:3;--acc:#8F6809;--accb:#FBF4E6;--accr:#EFE0C0;}
.cclf-tcell.cclf-a,
.cclf-tcell.cclf-b{border-left:1px solid #DDE4EE;border-right:1px solid #DDE4EE;}
.cclf-th.cclf-a,
.cclf-th.cclf-b{border-top:1px solid #DDE4EE;border-radius:16px 16px 0 0;}
.cclf-tft.cclf-a,
.cclf-tft.cclf-b{border-bottom:1px solid #DDE4EE;border-radius:0 0 16px 16px;}
.cclf-tcell:not(.cclf-th){border-top:1px solid #EDF1F7;}
.cclf-th{grid-row:1;} .cclf-tst{grid-row:2;} .cclf-tft{grid-row:4;}

.cclf-tgut{grid-column:2;grid-row:1/-1;display:flex;flex-direction:column;align-items:center;
  justify-content:flex-start;padding-top:36px;gap:8px;color:#5C6D86;}
.cclf-tgut svg{width:30px;height:30px;stroke:#8F5A0E;}
.cclf-tgut span{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--sans);
  font-size:9.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#5C6D86;}

.cclf-rl{display:block;margin:0 0 12px;font-family:var(--sans);font-size:9.5px;
  font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:#5C6D86;}

.cclf-th{padding-top:24px;padding-bottom:22px;position:relative;display:flex;gap:16px;
  align-items:flex-start;background:var(--accb);}
.cclf-th::before{content:"";position:absolute;top:-1px;left:-1px;right:-1px;height:3px;
  border-radius:16px 16px 0 0;}
.cclf-a.cclf-th::before{background:linear-gradient(90deg,#16457F,#3D82C4);}
.cclf-b.cclf-th::before{background:linear-gradient(90deg,var(--gold-2),var(--gold));}
.cclf-tic{flex:none;width:52px;height:52px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:#fff;border:1px solid var(--accr);color:var(--acc);}
.cclf-tic svg{width:26px;height:26px;}
.cclf-tht{min-width:0;}
.cclf-teye{margin:0 0 5px;font-family:var(--sans);font-size:10px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--acc);}
.cclf-th h4{margin:0 0 8px;font-family:var(--display);font-size:21px;font-weight:800;
  letter-spacing:-.024em;line-height:1.2;color:#131F33;}
.cclf-b.cclf-th h4{font-size:22px;}
.cclf-tw{margin:0;font-size:14px;line-height:1.6;color:#4A5A73;}

.cclf-stages{list-style:none;margin:0;padding:0;}
.cclf-sg{position:relative;display:flex;gap:14px;padding:0 0 18px;}
.cclf-sg:last-child{padding-bottom:2px;}
.cclf-sg::before{content:"";position:absolute;left:8px;top:23px;bottom:1px;width:2px;
  background:#E4EAF3;}
.cclf-sg:last-child::before{display:none;}
.cclf-sg > i{flex:none;position:relative;top:1px;width:18px;height:18px;border-radius:50%;
  border:2px solid var(--sgc,#C3CDDB);background:#fff;box-sizing:border-box;}
.cclf-sg-done > i{background:var(--sgc);border-color:var(--sgc);}
/* The tick and the bang are drawn, not typed. The tick was a rotated pair of
   borders offset by hand and the bang was a text "!" - both sat low and left of
   the centre of their disc, and at 18px that reads as a smudge rather than a mark.
   An inline SVG centres exactly at any size and needs no transform arithmetic. */
.cclf-sg-done > i::after{content:"";position:absolute;left:0;right:0;top:0;bottom:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.7 7.25 5.95 9.5 10.3 4.9' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center center / 14px 14px no-repeat;}

.cclf-sg-now > i{border-color:var(--sgc);
  background:radial-gradient(circle at 50% 50%,var(--sgc) 0 3.6px,#fff 4.4px);}
.cclf-sg-act > i{border-color:var(--sgc);background:var(--sgc);}
.cclf-sg-act > i::after{content:"";position:absolute;left:0;right:0;top:0;bottom:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cg fill='%23fff'%3E%3Crect x='6' y='3.1' width='2' height='5.6' rx='1'/%3E%3Ccircle cx='7' cy='10.65' r='1.15'/%3E%3C/g%3E%3C/svg%3E") center center / 14px 14px no-repeat;}
.cclf-sg-done{--sgc:#2F6F5E;--sgb:#E4F1EC;}
.cclf-sg-now{--sgc:#8F5A0E;--sgb:#FBF1DC;}
.cclf-sg-act{--sgc:#A5342F;--sgb:#F8E5E3;}
.cclf-sg-next{--sgc:#C3CDDB;--sgb:#EEF2F7;}
.cclf-sg-unk{--sgc:#5C6D86;--sgb:#EEF2F7;}
.cclf-sgb{min-width:0;flex:1 1 auto;}
.cclf-sgt{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 4px;
  font-family:var(--display);font-size:15.5px;font-weight:800;letter-spacing:-.018em;
  line-height:1.3;color:#131F33;}
.cclf-sg-next .cclf-sgt,
.cclf-sg-unk .cclf-sgt{color:#3B4B63;}
.cclf-sgp{display:inline-block;padding:3px 9px;border-radius:999px;background:var(--sgb);
  color:var(--sgc);font-family:var(--sans);font-size:9.5px;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;line-height:1.3;}
.cclf-sg-next .cclf-sgp{color:#5C6D86;}
.cclf-sgw{margin:0;font-size:13.5px;line-height:1.58;color:#4A5A73;}

.cclf-twhen{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;}
.cclf-twhen b{font-family:var(--display);font-size:18px;font-weight:800;letter-spacing:-.02em;
  color:#131F33;font-variant-numeric:tabular-nums;}
.cclf-twhen i{font-style:normal;font-family:var(--sans);font-size:11px;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;color:#5C6D86;}
.cclf-twhen i.cclf-is-ample{color:#2F6F5E;}
.cclf-twhen i.cclf-is-soon{color:#8F5A0E;}
.cclf-twhen i.cclf-is-tight,
.cclf-twhen i.cclf-is-past{color:#A5342F;}

.cclf-tft{background:var(--accb);padding:18px 24px 20px;}
.cclf-tft p{margin:0;font-size:14px;line-height:1.6;color:#3B4B63;}
.cclf-tft p b{color:#131F33;font-weight:700;}

.cclf-tfoot{margin:16px 0 0;font-size:13.5px;line-height:1.6;color:#5C6D86;}

@media (max-width:1100px){
  .cclf-two{grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr);}
  .cclf-tcell{padding:18px 20px 20px;}
  .cclf-th{padding-top:22px;}
}
/* stacked: the whole of one claim, then the gutter turned sideways, then the
   whole of the other */
@media (max-width:820px){
  .cclf-two{display:flex;flex-direction:column;}
  .cclf-a{order:1;} .cclf-tgut{order:2;} .cclf-b{order:3;}
  .cclf-tgut{flex-direction:row;justify-content:center;padding:18px 0;gap:10px;}
  .cclf-tgut svg{transform:rotate(90deg);width:24px;height:24px;}
  .cclf-tgut span{writing-mode:horizontal-tb;transform:none;}
  .cclf-tcell{padding:16px 18px 18px;}
  .cclf-th{padding-top:20px;gap:13px;}
  .cclf-tic{width:44px;height:44px;} .cclf-tic svg{width:22px;height:22px;}
  .cclf-tft{padding:16px 18px 18px;}
}

.cclf-rbreak .cclf-klab{position:relative;padding-top:16px;}
.cclf-rbreak .cclf-klab::before{content:"";position:absolute;left:0;top:0;width:38px;height:3px;
  border-radius:99px;background:var(--gold);}
.cclf-mast{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:0 64px;align-items:end;padding-bottom:34px;border-bottom:1px solid #E4EAF3;}
@media (max-width:900px){ .cclf-mast{grid-template-columns:minmax(0,1fr);gap:14px 0;
  align-items:start;padding-bottom:26px;} }
.cclf-rbreak .cclf-mast h2{margin:0;font-size:clamp(26px,3.1vw,38px);letter-spacing:-.03em;
  line-height:1.1;max-width:18ch;}
.cclf-rbreak .cclf-mast .cclf-klead{margin:0 0 4px;font-size:16px;line-height:1.66;
  max-width:52ch;}

.cclf-beat{margin-top:58px;display:grid;grid-template-columns:52px minmax(0,1fr);
  column-gap:22px;align-items:center;}
.cclf-beat > *{grid-column:1/-1;}
@media (max-width:700px){ .cclf-beat{margin-top:44px;display:block;} }
.cclf-chn{grid-column:1;grid-row:1;margin:0;width:52px;height:52px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  border:1.5px solid #E0C97A;background:#FFFCF2;
  font-family:var(--display);font-size:22px;font-weight:800;letter-spacing:-.03em;
  color:#8F5A0E;text-transform:none;font-variant-numeric:tabular-nums;}
@media (max-width:700px){
  .cclf-chn{position:static;width:auto;height:auto;border:0;border-radius:0;background:none;
    display:block;margin:0 0 8px;font-size:11px;font-weight:800;letter-spacing:.16em;
    text-transform:uppercase;color:#8F5A0E;}
}
.cclf-beat > h3{grid-column:2;grid-row:1;margin:0;font-family:var(--display);
  font-size:clamp(20px,2vw,25px);font-weight:800;letter-spacing:-.026em;line-height:1.24;
  color:#131F33;text-wrap:balance;max-width:30ch;}
@media (max-width:700px){ .cclf-beat > h3{padding-top:0;} }
.cclf-chl{grid-column:2;grid-row:2;margin:8px 0 0;font-size:15px;line-height:1.64;
  color:#57677F;max-width:68ch;}
.cclf-beat > :not(.cclf-chn):not(h3):not(.cclf-chl){margin-top:28px;}
@media (max-width:700px){
  .cclf-beat > h3,
.cclf-chl{margin-left:0;}
  .cclf-chl{margin-bottom:0;}
}

.cclf-beat ~ .cclf-beat{padding-top:56px;margin-top:56px;border-top:1.5px dashed #D5DEEA;}

.cclf-fork{display:grid;justify-items:center;}

.cclf-ftrig{position:relative;max-width:940px;width:100%;text-align:center;
  background:#FFFCF4;border:1px solid #EFDFBB;border-radius:16px;padding:24px 26px 22px;
  box-shadow:0 1px 2px rgba(19,31,51,.03),0 20px 40px -34px rgba(120,84,10,.5);}
.cclf-fic{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;
  border-radius:50%;background:#fff;border:1.5px solid #E0C97A;margin-bottom:12px;}
.cclf-fic svg{width:20px;height:20px;fill:none;stroke:#8F5A0E;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;}
.cclf-feye{margin:0 0 6px;font-family:var(--sans);font-size:10px;font-weight:800;
  letter-spacing:.15em;text-transform:uppercase;color:#8F5A0E;}
.cclf-ftrig h4{margin:0 0 10px;font-family:var(--display);font-size:20px;font-weight:800;
  letter-spacing:-.022em;line-height:1.25;color:#131F33;}
.cclf-ftw{margin:0;font-size:14.5px;line-height:1.65;color:#57677F;}

.cclf-fstem{width:100%;max-width:940px;position:relative;}
.cclf-fstem i{position:absolute;left:50%;width:1.5px;margin-left:-.75px;background:#C9D6E5;}
.cclf-fstem-1{height:26px;}
.cclf-fstem-1 i{top:0;bottom:0;}
.cclf-fstem-2{height:64px;}
.cclf-fstem-2 i{top:0;height:20px;}
.cclf-fstem-2 b{position:absolute;left:23.8%;right:23.8%;top:19px;height:45px;
  border:1.5px solid #C9D6E5;border-bottom:0;border-top-left-radius:14px;
  border-top-right-radius:14px;}
@media (max-width:760px){
  .cclf-fstem{max-width:none;}
  .cclf-fstem-2{height:26px;}
  .cclf-fstem-2 i{height:26px;}
  .cclf-fstem-2 b{display:none;}
}

.cclf-fgate{max-width:660px;width:100%;text-align:center;padding:16px 30px;border-radius:999px;
  background:#fff;border:1.5px dashed #C9D6E5;}
@media (max-width:520px){ .cclf-fgate{border-radius:16px;padding:16px 20px;} }
.cclf-geye{margin:0 0 6px;font-family:var(--sans);font-size:9.5px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:#5C6D86;}
.cclf-gq{margin:0 0 5px;font-family:var(--display);font-size:17px;font-weight:800;
  letter-spacing:-.018em;line-height:1.3;color:#131F33;}
.cclf-gq b{color:#8F5A0E;}
.cclf-ga{margin:0;font-size:13.5px;line-height:1.5;color:#57677F;}

.cclf-gbefore{width:100%;max-width:940px;position:relative;z-index:1;
  display:grid;grid-template-columns:118px minmax(0,1fr) minmax(0,1fr);
  gap:0 34px;align-items:start;
  padding:20px 26px 20px 24px;border-radius:14px;
  background:#FFFDF6;border:1px solid #EFE2C4;border-left:3px solid #E0A80D;}
.cclf-bfeye{margin:0;padding-top:3px;text-align:left;
  font-family:var(--sans);font-size:10px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:#8F5A0E;line-height:1.5;}
.cclf-bfrow{display:contents;}
.cclf-bfi{display:grid;grid-template-columns:30px minmax(0,1fr);gap:0 12px;align-items:start;}
.cclf-bfic{display:flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:50%;background:#fff;border:1px solid #E4D0A0;}
.cclf-bfic svg{width:16px;height:16px;fill:none;stroke:#8F5A0E;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;}
.cclf-bft{min-width:0;padding-top:3px;}
.cclf-bft h5{margin:0 0 5px;font-family:var(--display);font-size:15px;font-weight:700;
  letter-spacing:-.018em;line-height:1.32;color:#131F33;}
.cclf-bft h5 b{font-weight:800;color:#8F5A0E;}
.cclf-bft p{margin:0;font-size:13px;line-height:1.56;color:#6B5D42;}
@media (max-width:860px){
  .cclf-gbefore{grid-template-columns:minmax(0,1fr);gap:16px 0;padding:18px 18px 18px 17px;}
  .cclf-bfeye{padding-top:0;}
}

.cclf-fjoin{width:100%;max-width:940px;height:46px;position:relative;}
.cclf-fjoin b{position:absolute;left:23.8%;right:23.8%;top:0;height:26px;
  border:1.5px dashed #C9D6E5;border-top:0;border-bottom-left-radius:14px;
  border-bottom-right-radius:14px;}
.cclf-fjoin i{position:absolute;left:50%;top:25px;width:1.5px;height:21px;margin-left:-.75px;
  background:#C9D6E5;}
@media (max-width:760px){
  .cclf-fjoin{height:26px;max-width:none;}
  .cclf-fjoin b{display:none;}
  .cclf-fjoin i{top:0;height:26px;}
}
.cclf-fmerge{width:100%;max-width:700px;text-align:center;padding:18px 26px;border-radius:16px;
  background:#F2F8F5;border:1px solid #CFE2DB;}
.cclf-meye{margin:0 0 6px;font-family:var(--sans);font-size:10px;font-weight:800;
  letter-spacing:.15em;text-transform:uppercase;color:#2F6F5E;}
.cclf-mq{margin:0;font-size:15px;line-height:1.6;color:#28483F;}
.cclf-mq em{font-style:italic;font-weight:700;}
@media (max-width:760px){
  .cclf-fstem{height:26px;max-width:none;}
  .cclf-fstem i{height:26px;}
  .cclf-fstem b{display:none;}
}

.cclf-fouts{display:grid;grid-template-columns:1fr 1fr;gap:0 44px;width:100%;
  max-width:940px;align-items:stretch;}
@media (max-width:760px){ .cclf-fouts{grid-template-columns:1fr;gap:18px 0;} }
.cclf-fout{--tone:#A5342F;--wash:#FDF7F6;--ring:#EBD3D1;
  background:var(--wash);border:1px solid var(--ring);border-radius:16px;
  padding:24px 26px 22px;position:relative;text-align:center;
  display:flex;flex-direction:column;
  box-shadow:0 1px 2px rgba(19,31,51,.03),0 20px 40px -34px rgba(19,31,51,.38);}
.cclf-fout-open{--tone:#2F6F5E;--wash:#F5FAF8;--ring:#CFE2DB;}
.cclf-fout .cclf-fic{align-self:center;width:42px;height:42px;border-radius:50%;
  background:#fff;border:1.5px solid var(--ring);margin-bottom:12px;
  display:inline-flex;align-items:center;justify-content:center;}
.cclf-fout .cclf-fic svg{width:20px;height:20px;fill:none;stroke:var(--tone);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;}
.cclf-fbadge{margin:0 0 7px;padding:0;background:none;border:0;border-radius:0;
  font-family:var(--sans);font-size:10px;font-weight:800;letter-spacing:.15em;
  text-transform:uppercase;color:var(--tone);}
.cclf-fout h5{margin:0 0 16px;font-family:var(--display);font-size:21px;font-weight:800;
  letter-spacing:-.024em;line-height:1.22;color:#131F33;text-wrap:balance;}
.cclf-fout ul{list-style:none;margin:0;padding:16px 0 0;display:grid;gap:11px;
  border-top:1px solid var(--ring);text-align:left;flex:0 0 auto;align-content:start;}
.cclf-fout li{position:relative;padding-left:21px;font-size:14px;line-height:1.55;color:#57677F;}
.cclf-fout li::before{content:"";position:absolute;left:3px;top:8px;width:6px;height:6px;
  border-radius:50%;background:var(--ring);}
.cclf-fout .cclf-fkey{color:#131F33;font-weight:700;}
.cclf-fout .cclf-fkey::before{background:var(--tone);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--tone) 14%,transparent);}
.cclf-fwarn{margin:16px 0 0;padding:12px 14px;border-radius:10px;background:#fff;
  border:1px solid var(--ring);font-size:13px;line-height:1.55;color:#7A3A36;text-align:left;}
.cclf-fwarn-open{color:#2A5449;}
.cclf-fout .cclf-fwarn:last-of-type{margin-bottom:18px;}
.cclf-fout ul:last-of-type{margin-bottom:18px;}
.cclf-fseal{display:flex;align-items:center;justify-content:center;gap:9px;line-height:1.4;
  margin:0;margin-top:auto;padding:11px 14px;border-radius:999px;background:#fff;
  border:1px solid var(--ring);font-family:var(--sans);font-size:11.5px;font-weight:800;
  letter-spacing:.07em;text-transform:uppercase;color:var(--tone);text-align:center;}
.cclf-fseal svg{width:15px;height:15px;fill:none;stroke:var(--tone);stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;}

.cclf-chwhen{--tone:#8F5A0E;margin:18px 0 0;padding:14px 0 0;border-top:1px dashed #E4D6B4;
  text-align:left;}
.cclf-chwhen.cclf-is-ample{--tone:#2F6F5E;}
.cclf-chwhen.cclf-is-tight{--tone:#A5342F;}
.cclf-cwl{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-family:var(--sans);
  font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#7E6D48;}
.cclf-cwl i{width:7px;height:7px;border-radius:50%;background:var(--tone);flex:0 0 auto;}
.cclf-cwl b{margin-left:auto;font-family:var(--display);font-size:14px;font-weight:800;
  letter-spacing:-.014em;text-transform:none;color:var(--tone);}
.cclf-cwt{margin:0;font-size:13px;line-height:1.6;color:#7A6A48;}

.cclf-intnote{margin-top:56px;padding-top:56px;border-top:1.5px dashed #D5DEEA;}
.cclf-ieye{margin:0 0 8px;font-family:var(--sans);font-size:10.5px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:#8F5A0E;}
.cclf-iw{margin:0 0 12px;font-size:15.5px;line-height:1.65;color:#3B4B63;max-width:74ch;}
.cclf-iw2{margin:0;padding:16px 20px;border-radius:12px;background:#FFFCF4;
  border:1px solid #EFDFBB;color:#6B4A0E;font-size:14.5px;}

.cclf-build{display:block;}

.cclf-bgrp{display:grid;grid-template-columns:266px minmax(0,1fr);gap:0 54px;
  align-items:start;padding-top:30px;margin-top:30px;border-top:1px solid #E4EAF3;}
.cclf-bgrp:first-child{padding-top:6px;margin-top:0;border-top:0;}

.cclf-ghead{position:sticky;top:22px;}
@media (max-width:980px){ .cclf-ghead{position:static;} }
.cclf-gt{margin:0;font-family:var(--display);font-size:clamp(19px,1.8vw,23px);font-weight:800;
  letter-spacing:-.026em;line-height:1.18;color:#131F33;text-wrap:balance;}
.cclf-gshare{margin:10px 0 0;display:flex;align-items:baseline;gap:8px;
  font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.04em;color:#5C6D86;}
.cclf-gshare b{font-family:var(--display);font-size:26px;font-weight:800;letter-spacing:-.035em;
  color:#1E5FA3;font-variant-numeric:tabular-nums;line-height:1;}
.cclf-g-derived .cclf-gt{color:#57677F;}
.cclf-glead{margin:15px 0 0;padding-top:14px;border-top:1px solid #E9EEF6;
  font-size:13px;line-height:1.62;color:#5C6D86;}

.cclf-gheads{min-width:0;display:grid;}

.cclf-hd{padding:0 0 22px;}
.cclf-hd + .cclf-hd{padding-top:22px;border-top:1px dashed #E1E8F2;}
.cclf-gheads > .cclf-hd:last-child{padding-bottom:0;}

.cclf-hdtop{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:2px 24px;}
.cclf-hdtop h4{margin:0;font-family:var(--display);font-size:clamp(18px,1.6vw,21px);
  font-weight:800;letter-spacing:-.026em;line-height:1.2;color:#131F33;}
.cclf-hdval{margin:0;font-family:var(--display);font-size:clamp(18px,1.6vw,21px);font-weight:800;
  letter-spacing:-.03em;color:#131F33;font-variant-numeric:tabular-nums;white-space:nowrap;}
.cclf-hd.is-less .cclf-hdval{color:#A5342F;}
.cclf-hd.is-less .cclf-hdtop h4{color:#7A3A36;}

.cclf-hdbar{height:9px;margin-top:13px;border-radius:99px;background:#EDF1F7;overflow:hidden;}
.cclf-hdbar{display:flex;}
.cclf-hdbar i{display:block;height:100%;border-radius:99px 0 0 99px;
  background:linear-gradient(90deg,#2A6BAC,#123E75);}
.cclf-hdbar u{display:block;height:100%;border-radius:0 99px 99px 0;text-decoration:none;
  background:#9CBEDE;}
.cclf-hdbar i:only-child{border-radius:99px;}
.cclf-hdbar.is-less u{background:#F0BDB9;}
.cclf-hdbar.is-less i{background:repeating-linear-gradient(-45deg,#D9827C 0 5px,#F0BDB9 5px 10px);}
.cclf-hd.is-brief .cclf-hdbar{height:7px;}
.cclf-hdpct{margin:8px 0 0;font-family:var(--sans);font-size:10.5px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:#5C6D86;font-variant-numeric:tabular-nums;}
.cclf-hdpct.is-less{color:#9F605B;}

.cclf-hdbody{margin-top:14px;}
.cclf-hd.is-full .cclf-hdbody{display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:0 42px;align-items:start;}
.cclf-hdw{margin:0;font-size:15.5px;line-height:1.62;color:#3B4B63;letter-spacing:-.003em;}
.cclf-hd.is-brief .cclf-hdw{max-width:78ch;}

.cclf-hd.is-full .cclf-hdbody > .cclf-hdw{grid-column:1;grid-row:1;}
.cclf-hd.is-full .cclf-hdbody > .cclf-covers{grid-column:2;grid-row:1;}

.cclf-hd .cclf-covers{margin:0;padding:0 0 0 20px;background:none;border:0;border-radius:0;
  border-left:2px solid #EFE2C4;max-width:none;}
.cclf-hd .cclf-covers ul{gap:11px;}
.cclf-hd .cclf-covers li{font-size:14px;line-height:1.5;color:#3B4B63;padding-left:19px;}
.cclf-hd .cclf-covers li::before{content:'\2014';top:0;left:0;width:auto;height:auto;
  border:0;border-radius:0;transform:none;background:none;color:#C99A0E;}
.cclf-hd .cclf-cvlab{margin:0 0 11px;font-size:10px;font-weight:800;letter-spacing:.14em;
  color:#8F5A0E;}

.cclf-fact{margin:16px 0 0;padding:11px 14px;border-radius:9px;background:#F6F8FB;
  border:1px solid #E9EEF6;}
.cclf-factlab{margin:0 0 7px;font-family:var(--sans);font-size:9.5px;font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;color:#5C6D86;}
.cclf-fact ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  align-items:baseline;gap:5px 0;}
.cclf-fact li{font-size:13px;line-height:1.45;font-weight:600;color:#22324B;
  font-variant-numeric:tabular-nums;}
.cclf-fact li + li::before{content:"";display:inline-block;width:1px;height:11px;margin:0 12px;
  background:#CFD9E6;position:relative;top:1px;}

@media (max-width:980px){
  .cclf-bgrp{grid-template-columns:minmax(0,1fr);gap:18px 0;}
  .cclf-glead{max-width:74ch;}
}
@media (max-width:760px){
  .cclf-hd.is-full .cclf-hdbody{grid-template-columns:minmax(0,1fr);gap:16px 0;}
  /* One column means one column: the list kept grid-column 2, which made an
     implicit column beside a 0px one, and the text ran one word per line over the
     list (audit item 21). On a phone the list goes under the text. */
  .cclf-hd.is-full .cclf-hdbody > .cclf-hdw{grid-column:1;grid-row:auto;}
  .cclf-hd.is-full .cclf-hdbody > .cclf-covers{grid-column:1;grid-row:auto;}
  /* the separator goes at the end of the fact before it, so a wrapped line never
     starts with one */
  .cclf-fact li + li::before{content:none;}
  .cclf-fact li:not(:last-child)::after{content:"";display:inline-block;width:1px;height:11px;
    margin:0 12px;background:#CFD9E6;position:relative;top:1px;}
}
/* A value and its note are one line on a computer. Narrower, the pain and suffering
   value with its bracketed note is wider than its box, and it was cut mid-word at the
   screen edge (audit item 40): it wraps instead. */
@media (max-width:1080px){
  .cclf-hdval{white-space:normal;overflow-wrap:break-word;}
}

.cclf-bsum{margin:0 0 34px;}
.cclf-bsumlab{margin:0 0 12px;font-family:var(--sans);font-size:10px;font-weight:800;
  letter-spacing:.15em;text-transform:uppercase;color:#5C6D86;}
.cclf-bsumbar{display:flex;gap:2px;height:26px;border-radius:7px;overflow:hidden;
  background:#EDF1F7;}
.cclf-bsumbar span{display:block;height:100%;min-width:3px;}
.cclf-bsumkey{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;
  gap:9px 34px;}
.cclf-bsumkey li{display:flex;align-items:baseline;gap:9px;font-size:14px;color:#57677F;}
.cclf-bsumkey i{width:11px;height:11px;border-radius:3px;flex:0 0 auto;
  position:relative;top:1px;}
.cclf-bsumkey b{font-family:var(--display);font-size:16px;font-weight:800;letter-spacing:-.024em;
  color:#131F33;font-variant-numeric:tabular-nums;}

.cclf-btop{margin:0 0 40px;padding-bottom:34px;border-bottom:2px solid #131F33;}
.cclf-bendeye{margin:0 0 20px;font-family:var(--sans);font-size:10px;font-weight:800;
  letter-spacing:.15em;text-transform:uppercase;color:#8F5A0E;}
.cclf-bendk{margin:0 0 12px;font-family:var(--display);font-size:clamp(21px,2.2vw,28px);
  font-weight:800;letter-spacing:-.028em;line-height:1.2;color:#131F33;max-width:30ch;
  text-wrap:balance;}

.cclf-span{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 40px;
  margin:0;padding-top:26px;position:relative;}
.cclf-spanline{position:absolute;left:0;right:0;top:0;height:8px;border-radius:99px;
  background:linear-gradient(90deg,#F0D89A,#E0A80D);}
.cclf-spanline::before,
.cclf-spanline::after{content:"";position:absolute;top:-3px;width:14px;
  height:14px;border-radius:50%;background:#fff;border:3px solid #C9860B;}
.cclf-spanline::before{left:0;}
.cclf-spanline::after{right:0;}
.cclf-spanend{min-width:0;}
.cclf-spanend b{display:block;font-family:var(--display);font-size:clamp(30px,4.2vw,54px);
  font-weight:800;letter-spacing:-.045em;line-height:1;color:#131F33;
  font-variant-numeric:tabular-nums lining-nums;}
.cclf-spanend span{display:block;margin-top:11px;font-family:var(--sans);font-size:10px;
  font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:#7E6D48;}
.cclf-spanend u{display:block;margin-top:8px;text-decoration:none;font-size:13.5px;
  line-height:1.55;color:#57677F;max-width:34ch;}
.cclf-spanend-hi{text-align:right;justify-items:end;}
.cclf-spanend-hi u{margin-left:auto;}

.cclf-gapline{margin:30px 0 0;font-size:16px;line-height:1.62;color:#3B4B63;max-width:78ch;}
.cclf-gapline b{font-family:var(--display);font-size:20px;font-weight:800;letter-spacing:-.028em;
  color:#8F5A0E;font-variant-numeric:tabular-nums;}

.cclf-lone{margin:26px 0 0;font-family:var(--display);font-size:clamp(28px,3.6vw,42px);
  font-weight:800;letter-spacing:-.04em;color:#131F33;font-variant-numeric:tabular-nums;}
.cclf-bendp{margin:14px 0 0;font-size:15px;line-height:1.66;color:#57677F;max-width:82ch;}

.cclf-bclose{margin:34px 0 0;padding-top:24px;border-top:1px solid #E4EAF3;
  font-size:15.5px;line-height:1.66;color:#3B4B63;max-width:88ch;}
.cclf-bclose b{color:#131F33;font-weight:700;}

@media (max-width:820px){
  .cclf-btop{margin-bottom:30px;padding-bottom:26px;}
  .cclf-span{grid-template-columns:minmax(0,1fr);gap:24px 0;padding-top:22px;}
  .cclf-spanend-hi{text-align:left;justify-items:start;}
  .cclf-spanend-hi u{margin-left:0;}
  .cclf-bsumkey{gap:8px 22px;}
}

/* --- using the width the fork already had --------------------------------
   The composition was 820px inside a 1256px column and 1674px tall. Nothing
   about the funnel needed to be that tall; the stages were simply stacking
   their own contents in one narrow measure. So the spine stays exactly where
   it is - dead centre, every connector still drawn on percentages - and each
   stage lays itself out across the width instead.
------------------------------------------------------------------------- */
@media (min-width:901px){
  .cclf-ftrig{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
    column-gap:40px;text-align:left;align-items:start;padding:28px 32px 26px;}
  .cclf-ftrig .cclf-fic{grid-column:1;grid-row:1;margin:0 0 14px;}
  .cclf-ftrig .cclf-feye{grid-column:1;grid-row:2;}
  .cclf-ftrig h4{grid-column:1;grid-row:3;font-size:23px;}
  .cclf-ftrig .cclf-ftw{grid-column:2;grid-row:1/4;margin:0;padding-top:2px;}
  .cclf-ftrig .cclf-chwhen{grid-column:1/-1;grid-row:4;margin-top:22px;}

  .cclf-fbody{display:block;}
  .cclf-fout ul{padding-top:0;border-top:0;}
  .cclf-fbody{padding-top:16px;border-top:1px solid var(--ring);}
  .cclf-fout .cclf-fwarns .cclf-fwarn:first-child{margin-top:0;}
  .cclf-fout .cclf-fwarn:last-of-type{margin-bottom:0;}
  .cclf-fbody{margin-bottom:18px;}

}

.cclf-fstem-short{height:16px;}
.cclf-fstem-short i{top:0;bottom:0;}
.cclf-hdpct.is-open{color:#8F5A0E;}
.cclf-hd .cclf-hdpct.is-open{margin-top:12px;}

.cclf-rdetail{--paper:#FFFFFF;--sheet:#FFFFFF;--rule:#DDE4EE;--rule-2:#EEF2F8;
  background:#fff;border-top:1px solid #E1E7F0;}

.cclf-rsec{margin-top:0;padding-top:44px;border-top:2px solid var(--ink);}
.cclf-rsec:first-child{padding-top:0;border-top:0;}
.cclf-rsec > h2{margin:0 0 8px;font-family:var(--display);
  font-size:clamp(26px,2.7vw,33px);font-weight:800;letter-spacing:-.03em;line-height:1.12;
  color:var(--ink);text-wrap:balance;}
.cclf-rsec > p.cclf-lead{margin:0 0 26px;font-size:16px;line-height:1.62;color:var(--soft);
  max-width:66ch;}
.cclf-rsec + .cclf-rsec{margin-top:52px;}
@media (max-width:900px){ .cclf-rsec{padding-top:34px;} .cclf-rsec + .cclf-rsec{margin-top:38px;} }

.cclf-acc{background:none;border:0;border-radius:0;padding:0;box-shadow:none;}






#cclf-rfaq{background:none;border:0;border-radius:0;padding:0;box-shadow:none;}
#cclf-rfaq{border-top:1px solid var(--rule-2);}

.cclf-clock{background:#FCFDFF;border:1px solid var(--rule);
  box-shadow:0 1px 2px rgba(19,31,51,.04),0 18px 40px -34px rgba(19,31,51,.34);}
.cclf-clocknote{background:#F7F9FD;border-left-color:#12325F;}
.cclf-clockcav{margin:16px 0 0;font-size:13.5px;line-height:1.62;color:var(--faint);
  max-width:78ch;}

.cclf-ransband{background:#F4F7FB;border-top:1px solid #E1E7F0;}

.cclf-rdetail .cclf-snap{display:block;padding:28px 32px 26px;border:1px solid var(--rule);
  border-left:3px solid #12325F;border-radius:0 14px 14px 0;background:#FAFCFF;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);}
.cclf-fnote{max-width:62ch;}
.cclf-fnfoot{margin:22px 0 0;padding-top:16px;border-top:1px solid var(--rule-2);max-width:none;}
@media (max-width:620px){ .cclf-rdetail .cclf-snap{padding:22px 20px 20px;} }

.cclf-levers{display:block;border-top:0;}
.cclf-lcols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;}
@media (max-width:860px){ .cclf-lcols{grid-template-columns:minmax(0,1fr);gap:34px 0;} }
.cclf-lside{--tone:#12325F;min-width:0;padding-top:14px;border-top:2px solid var(--tone);}
.cclf-lside-up{--tone:#2F6F5E;}
.cclf-lside-down{--tone:#A5342F;}
.cclf-lhead{display:flex;align-items:baseline;gap:10px;margin:0 0 4px;
  font-family:var(--sans);font-size:10.5px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tone);}
.cclf-lhead b{font-family:var(--display);font-size:14px;font-weight:800;letter-spacing:-.02em;
  color:var(--tone);opacity:.62;}
.cclf-lnone{margin:12px 0 0;font-size:14.5px;line-height:1.6;color:var(--soft);max-width:44ch;}

.cclf-llist{list-style:none;margin:0;padding:0;display:grid;gap:0;}
.cclf-lev{display:grid;grid-template-columns:26px minmax(0,1fr);gap:0 14px;align-items:start;
  padding:16px 0;border-bottom:1px solid var(--rule-2);}
.cclf-lev:last-child{border-bottom:0;padding-bottom:0;}
.cclf-lm{width:22px;height:22px;margin-top:2px;border-radius:50%;display:inline-flex;
  align-items:center;justify-content:center;border:1.5px solid var(--tone);color:var(--tone);}
.cclf-lm svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;}
.cclf-lt{margin:0 0 5px;font-family:var(--display);font-size:16px;font-weight:700;
  letter-spacing:-.018em;line-height:1.34;color:var(--ink);}
.cclf-lw{margin:0;font-size:14px;line-height:1.6;color:var(--soft);}
.cclf-l-up{--tone:#2F6F5E;} .cclf-l-down{--tone:#A5342F;}
.cclf-l-watch{--tone:#8F5A0E;} .cclf-l-info{--tone:#12325F;}

.cclf-lctx{margin-top:34px;padding-top:14px;border-top:1px solid var(--rule);}
.cclf-lctx .cclf-lhead{color:var(--faint);}
.cclf-lctx .cclf-lev{grid-template-columns:26px minmax(0,1fr);}
.cclf-lctx .cclf-lw{max-width:82ch;}


.cclf-is-caveat h3{color:var(--soft);}



.cclf-cdrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;
  margin:6px 0 0;align-items:stretch;}

.cclf-cd{display:flex;flex-direction:column;padding:24px 24px 24px;
  background:#fff;border:1px solid #E1E7F0;border-radius:14px;
  box-shadow:0 1px 2px rgba(18,50,95,.04),0 14px 28px -20px rgba(18,50,95,.16);}
.cclf-cd-a{--ac:#8F5A0E;--acb:#FBF4E6;--acr:#EFE0C0;}
.cclf-cd-b{--ac:#1E5FA3;--acb:#EFF5FC;--acr:#D3E3F4;}
.cclf-cd-c{--ac:#2F5B6F;--acb:#EEF5F8;--acr:#CFE1E9;}

.cclf-cdtop{display:flex;align-items:center;gap:11px;margin:0 0 17px;}
.cclf-cdn,
.cclf-cdic{flex:none;width:36px;height:36px;display:flex;
  align-items:center;justify-content:center;border-radius:50%;}
.cclf-cdn{background:var(--ac);color:#fff;font-family:var(--display);font-size:15px;
  font-weight:800;line-height:1;font-variant-numeric:tabular-nums;}
.cclf-cdic{background:var(--acb);border:1px solid var(--acr);color:var(--ac);}
.cclf-cdic svg{width:20px;height:20px;}

.cclf-cd h3{margin:0;font-family:var(--display);
  font-size:clamp(17.5px,1.55vw,20px);font-weight:800;letter-spacing:-.026em;
  line-height:1.24;color:var(--ink);text-wrap:balance;}
.cclf-cdsum{margin:11px 0 0;font-size:14.5px;line-height:1.6;color:#4A5A73;}

.cclf-cdon{flex:1 1 auto;margin:18px 0 0;padding:16px 0 0;border-top:1px solid #EDF1F7;}
.cclf-cdonh{margin:0 0 11px;font-family:var(--sans);font-size:9.5px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:#5C6D86;}
.cclf-cdon ul{list-style:none;margin:0;padding:0;}
.cclf-cdon li{position:relative;margin:0 0 9px;padding:0 0 0 17px;
  font-size:13.5px;line-height:1.48;color:#4A5A73;}
.cclf-cdon li:last-child{margin-bottom:0;}
.cclf-cdon li::before{content:'\2014';position:absolute;left:0;top:0;color:var(--ac);
  opacity:.62;}

.cclf-cdif{margin:20px -4px -4px;padding:15px 16px 16px;background:var(--acb);
  border:1px solid var(--acr);border-radius:10px;}
.cclf-cdifh{margin:0 0 7px;font-family:var(--sans);font-size:9.5px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ac);}
.cclf-cdif p:last-child{margin:0;font-size:13.5px;line-height:1.58;color:#25344A;}

.cclf-cdkey{display:flex;gap:18px;margin:26px 0 0;padding:22px 26px 24px;
  background:#F3F7FC;border-radius:14px;}
.cclf-cdkeyic{flex:none;width:40px;height:40px;display:flex;align-items:center;
  justify-content:center;border-radius:50%;background:#fff;color:#12325F;
  box-shadow:0 1px 2px rgba(18,50,95,.08);}
.cclf-cdkeyic svg{width:22px;height:22px;}
.cclf-cdkeyl{margin:0 0 6px;font-family:var(--sans);font-size:10px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:#8F5A0E;}
.cclf-cdkey h4{margin:0;font-family:var(--display);
  font-size:clamp(17px,1.6vw,19.5px);font-weight:800;letter-spacing:-.024em;
  line-height:1.32;color:var(--ink);text-wrap:balance;}
.cclf-cdkey p:last-child{margin:8px 0 0;max-width:74ch;font-size:14.5px;
  line-height:1.6;color:#4A5A73;}

@media (max-width:1080px){
  .cclf-cdrow{gap:20px;}
  .cclf-cd{padding:22px 20px;}
}
/* three across needs the width; below it they stack rather than orphan one */
@media (max-width:860px){
  .cclf-cdrow{grid-template-columns:minmax(0,1fr);gap:18px;}
  .cclf-cd{padding:22px 22px 22px;}
  .cclf-cdon{flex:0 0 auto;}
  .cclf-cdon ul{columns:2;column-gap:28px;}
  .cclf-cdon li{break-inside:avoid;}
  .cclf-cdkey{margin-top:22px;padding:20px 22px 22px;}
}
@media (max-width:560px){
  .cclf-cdon ul{columns:1;}
  .cclf-cdkey{display:block;}
  .cclf-cdkeyic{margin:0 0 14px;}
}

#cclf-rfaq.cclf-faqg{display:flex;flex-direction:column;gap:12px;margin:10px 0 0;
  border:0;border-top:0;padding:0;background:none;box-shadow:none;}

#cclf-rfaq .cclf-fq{margin:0;background:#fff;border:1px solid #E1E7F0;border-radius:12px;
  box-shadow:0 1px 2px rgba(18,50,95,.04);transition:border-color .16s,background .16s;}
#cclf-rfaq .cclf-fq[open]{background:#F5F9FD;border-color:#CFDFF1;}
#cclf-rfaq .cclf-fq:hover{border-color:#C6D6E8;}

#cclf-rfaq .cclf-fq > summary{list-style:none;cursor:pointer;display:flex;
  align-items:center;gap:16px;padding:15px 18px;margin:0;}
#cclf-rfaq .cclf-fq > summary::-webkit-details-marker{display:none;}
.cclf-fqi{flex:none;width:40px;height:40px;display:flex;align-items:center;
  justify-content:center;border-radius:50%;background:#EDF3FA;color:#1E5FA3;}
#cclf-rfaq .cclf-fq[open] .cclf-fqi{background:#fff;color:#12325F;}
.cclf-fqi svg{width:21px;height:21px;}
.cclf-fqq{flex:1 1 auto;font-family:var(--display);font-size:clamp(15.5px,1.35vw,17.5px);
  font-weight:800;letter-spacing:-.02em;line-height:1.34;color:var(--ink);}
#cclf-rfaq .cclf-fq .cclf-ch{flex:none;margin:0;width:18px;height:18px;color:#8695AC;
  transition:transform .18s;}
#cclf-rfaq .cclf-fq[open] .cclf-ch{transform:rotate(180deg);color:#12325F;}
#cclf-rfaq .cclf-fq > summary:focus-visible{outline:2px solid #9A6B12;outline-offset:2px;
  border-radius:12px;}

.cclf-fqa{padding:0 22px 20px 74px;}
.cclf-fqa p{margin:0;max-width:80ch;font-size:15px;line-height:1.68;color:#3B4B63;}

@media (max-width:620px){
  #cclf-rfaq.cclf-faqg{gap:10px;}
  #cclf-rfaq .cclf-fq > summary{gap:13px;padding:14px 15px;}
  .cclf-fqi{width:34px;height:34px;}
  .cclf-fqi svg{width:18px;height:18px;}
  .cclf-fqa{padding:0 16px 18px 16px;}
}

.cclf-rsec-faq .cclf-klab{display:flex;align-items:center;gap:13px;margin:0 0 9px;
  color:#8F5A0E;}
.cclf-rsec-faq .cclf-klab::before{content:'';flex:none;width:30px;height:2px;
  background:#C9922F;}

.cclf-ransband{background:#F4F7FB;border-top:1px solid #E1E7F0;}
.cclf-ransband .cclf-anshead{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);
  gap:24px 40px;align-items:end;margin:0 0 26px;}
.cclf-ransband .cclf-anshl{min-width:0;}
.cclf-ransband .cclf-anshl .cclf-klead{margin-bottom:0;}

.cclf-anscall{display:flex;gap:16px;align-items:flex-start;padding:20px 22px 22px;
  background:#FFFBF2;border:1px solid #EFE0C0;border-radius:14px;}
.cclf-anscic{flex:none;width:44px;height:44px;display:flex;align-items:center;
  justify-content:center;border-radius:50%;background:#FBF1DC;color:#8F5A0E;}
.cclf-anscic svg{width:22px;height:22px;}
.cclf-anscall h3{margin:0 0 5px;font-family:var(--display);font-size:17px;font-weight:800;
  letter-spacing:-.02em;line-height:1.28;color:#131F33;}
.cclf-anscall p{margin:0;font-size:13.5px;line-height:1.58;color:#57677F;}
.cclf-ansedit{display:inline-flex;align-items:center;gap:8px;margin:14px 0 0;
  padding:11px 15px 11px 17px;border-radius:10px;background:#12325F;color:#fff;
  font-family:var(--sans);font-size:13.5px;font-weight:800;text-decoration:none;
  box-shadow:0 1px 2px rgba(18,50,95,.15);}
.cclf-ansedit svg{width:16px;height:16px;}
.cclf-ansedit:hover{background:#0E2749;}
.cclf-ansedit:focus-visible{outline:2px solid #9A6B12;outline-offset:2px;}

.cclf-ransband .cclf-ansg{display:block;columns:2;column-gap:18px;}
.cclf-ransband .cclf-agrp{display:inline-block;width:100%;box-sizing:border-box;
  break-inside:avoid;page-break-inside:avoid;margin:0 0 18px;vertical-align:top;
  padding:20px 22px 12px;border:1px solid #DDE4EE;border-radius:14px;background:#fff;
  box-shadow:0 1px 2px rgba(19,31,51,.035),0 18px 36px -30px rgba(19,31,51,.28);}
.cclf-at-a{--acc:#1E5FA3;--accb:#EFF5FC;}
.cclf-at-b{--acc:#8F5A0E;--accb:#FBF4E6;}
.cclf-at-c{--acc:#2F5B6F;--accb:#EEF5F8;}

.cclf-agh{display:flex;align-items:center;gap:14px;margin:0 0 6px;}
.cclf-agic{flex:none;width:46px;height:46px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:var(--accb,#EFF5FC);color:var(--acc,#1E5FA3);}
.cclf-agic svg{width:22px;height:22px;}
.cclf-ransband .cclf-agrp > .cclf-agh h4,
.cclf-anscontact .cclf-agh h4{margin:0 0 3px;
  font-family:var(--display);font-size:18px;font-weight:800;letter-spacing:-.022em;line-height:1.2;
  color:#131F33;text-transform:none;letter-spacing:-.022em;}
.cclf-agh p{margin:0;font-size:13px;line-height:1.5;color:#5C6D86;}

.cclf-ransband .cclf-agl{display:grid;grid-template-columns:minmax(0,1fr);margin:10px 0 0;}
.cclf-ransband .cclf-arow{display:flex;align-items:center;justify-content:space-between;
  gap:8px 14px;padding:11px 0;border-top:1px solid #EEF2F7;min-width:0;}
.cclf-ransband .cclf-arow dt{flex:1 1 auto;min-width:0;margin:0;font-size:13.5px;line-height:1.42;
  color:#4A5A73;}
.cclf-ransband .cclf-arow dd{flex:none;max-width:52%;margin:0;padding:6px 12px;border-radius:9px;
  background:var(--accb,#EFF5FC);font-family:var(--display);font-size:13.5px;font-weight:800;
  letter-spacing:-.012em;line-height:1.3;color:#131F33;text-align:right;overflow-wrap:anywhere;}
.cclf-ransband .cclf-agl .cclf-arow:first-child{border-top:0;}

.cclf-anscontact{display:flex;align-items:center;gap:20px 34px;flex-wrap:wrap;margin:18px 0 0;
  padding:16px 22px;border:1px solid #DDE4EE;border-radius:14px;background:#fff;
  --acc:#12325F;--accb:#EEF3FA;}
.cclf-anscontact .cclf-agh{margin:0;flex:0 1 300px;}
.cclf-acl{display:flex;flex-wrap:wrap;gap:10px 28px;margin:0;flex:1 1 auto;}
.cclf-acrow{display:flex;align-items:center;gap:10px;}
.cclf-acrow dt{margin:0;font-size:13px;color:#5C6D86;white-space:nowrap;}
.cclf-acrow dd{margin:0;padding:6px 12px;border-radius:9px;background:#EEF3FA;
  font-family:var(--display);font-size:13.5px;font-weight:800;letter-spacing:-.012em;color:#131F33;
  overflow-wrap:anywhere;}

.cclf-anschange{display:flex;align-items:center;gap:16px 22px;flex-wrap:wrap;margin:18px 0 0;
  padding:18px 22px;border-radius:14px;background:#EAF0F8;}
.cclf-anschic{flex:none;width:46px;height:46px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:#fff;color:#12325F;box-shadow:0 1px 2px rgba(18,50,95,.08);}
.cclf-anschic svg{width:21px;height:21px;}
.cclf-anscht{flex:1 1 300px;min-width:0;}
.cclf-anscht h3{margin:0 0 3px;font-family:var(--display);font-size:17.5px;font-weight:800;
  letter-spacing:-.02em;line-height:1.26;color:#131F33;}
.cclf-anscht p{margin:0;font-size:13.5px;line-height:1.55;color:#57677F;max-width:64ch;}
.cclf-ansedit-2{margin:0;padding:13px 18px 13px 20px;font-size:14px;}

@media (max-width:860px){
  .cclf-ransband .cclf-anshead{grid-template-columns:minmax(0,1fr);align-items:start;}
  .cclf-ransband .cclf-ansg{columns:1;}
  .cclf-ransband .cclf-agrp{margin-bottom:14px;}
}
@media (max-width:560px){
  .cclf-ransband .cclf-agrp{padding:18px 18px 10px;}
  .cclf-ransband .cclf-arow{align-items:flex-start;flex-direction:column;gap:6px;}
  .cclf-ransband .cclf-arow dd{max-width:100%;text-align:left;}
  .cclf-anscontact{padding:16px 18px;}
  .cclf-anschange{padding:18px;}
  .cclf-ansedit-2{width:100%;justify-content:center;}
}

.cclf-rclose{position:relative;background:linear-gradient(180deg,#14335F 0%,#0F2140 46%,#0A101E 100%);
  color:#fff;border-top:3px solid #F1B600;}
.cclf-rclose .cclf-in{max-width:1320px;margin:0 auto;padding:60px 32px 44px;}

.cclf-rclose .cclf-rfoot{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr);
  gap:30px 56px;align-items:start;margin:0;padding:0;border-radius:0;background:none;
  box-shadow:none;overflow:visible;color:#fff;}
.cclf-rclose .cclf-rfoot::after{display:none;}

.cclf-rclose .cclf-rfl{min-width:0;}
.cclf-rclose .cclf-rfl .cclf-klab{margin:0 0 10px;color:#F1C232;}
.cclf-rclose .cclf-rfoot h3{margin:0 0 10px;font-family:var(--display);
  font-size:clamp(26px,2.7vw,34px);font-weight:800;letter-spacing:-.03em;line-height:1.1;
  color:#fff;text-wrap:balance;}
.cclf-rflead{margin:0 0 26px;font-size:16px;line-height:1.62;color:#C3D0E4;max-width:50ch;}

.cclf-rclose .cclf-acts{display:flex;flex-wrap:wrap;gap:12px;}
.cclf-rclose .cclf-p1,
.cclf-rclose .cclf-p2{display:inline-flex;align-items:center;gap:10px;
  padding:15px 24px;border-radius:12px;font-family:var(--sans);font-size:15.5px;font-weight:800;
  letter-spacing:-.005em;text-decoration:none;line-height:1.2;}
.cclf-rclose .cclf-p1{background:linear-gradient(135deg,#FFD400 0%,#F1B600 100%);color:#101828;
  box-shadow:0 10px 24px -12px rgba(255,212,0,.65);}
.cclf-rclose .cclf-p1 svg{width:18px;height:18px;}
.cclf-rclose .cclf-p1:hover{transform:translateY(-1px);}
.cclf-rclose .cclf-p2{background:rgba(255,255,255,.06);color:#fff;
  border:1px solid rgba(255,255,255,.28);}
.cclf-rclose .cclf-p2:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.6);}
.cclf-rfph{margin:24px 0 0;font-size:13.5px;line-height:1.58;color:#9FB2CE;max-width:52ch;}
.cclf-rfph b{color:#fff;font-weight:800;letter-spacing:.01em;white-space:nowrap;}

.cclf-rclose .cclf-rfr{min-width:0;}
.cclf-rclose .cclf-tmo{margin:0;padding:22px 24px 20px;border-radius:14px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);}
.cclf-rclose .cclf-tmo blockquote{margin:0;}
.cclf-rclose .cclf-tmo p{margin:0;font-family:var(--display);font-size:16.5px;line-height:1.55;
  font-weight:500;letter-spacing:-.012em;color:#fff;font-style:normal;}
.cclf-rclose .cclf-tmo .cclf-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:14px 0 0;}
.cclf-rclose .cclf-tmo .cclf-stars{color:#FFD400;font-size:14px;letter-spacing:2.5px;}
.cclf-rclose .cclf-tmo .cclf-who{font-size:12.5px;font-weight:700;color:#9FB2CE;}
.cclf-rfpts{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:9px;}
.cclf-rfpts li{display:flex;align-items:center;gap:11px;font-size:14px;font-weight:600;
  color:#DCE5F2;}
.cclf-rfpts li sup{font-size:.7em;color:#F1C232;margin-left:1px;}
.cclf-rfpts li i{flex:none;width:20px;height:20px;border-radius:50%;
  background:rgba(255,212,0,.16);border:1px solid rgba(255,212,0,.5);position:relative;}
.cclf-rfpts li i::after{content:"";position:absolute;left:5.5px;top:5px;width:7px;height:4px;
  border-left:2px solid #FFD400;border-bottom:2px solid #FFD400;transform:rotate(-45deg);}

.cclf-rfutil{display:flex;align-items:center;flex-wrap:wrap;gap:14px 22px;margin:44px 0 0;
  padding:22px 0;border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12);}
.cclf-rfulab{margin:0;font-family:var(--sans);font-size:10px;font-weight:800;letter-spacing:.15em;
  text-transform:uppercase;color:#9FB2CE;}
.cclf-rclose .cclf-minor{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;border:0;}
.cclf-rclose .cclf-p3{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;
  border-radius:9px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
  color:#C3D0E4;font-family:var(--sans);font-size:13px;font-weight:700;text-decoration:none;
  cursor:pointer;line-height:1.2;}
.cclf-rclose .cclf-p3 svg{width:15px;height:15px;}
.cclf-rclose .cclf-p3:hover{color:#fff;border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.09);}
.cclf-rfudate{margin:0 0 0 auto;font-size:12.5px;color:#919EB0;}
.cclf-rfudate b{color:#C3D0E4;font-weight:700;}
.cclf-rclose .cclf-p3:focus-visible,
.cclf-rclose .cclf-p2:focus-visible,
.cclf-rclose .cclf-p1:focus-visible{outline:2px solid #FFD400;outline-offset:3px;}

.cclf-rclose .cclf-rdisc{margin:22px 0 0;max-width:100ch;color:#919EB0;}
.cclf-rdlab{margin:0 0 6px;font-family:var(--sans);font-size:9.5px;font-weight:800;
  letter-spacing:.15em;text-transform:uppercase;color:#9FB2CE;}
.cclf-rclose .cclf-rdisc p{margin:0;font-size:12.5px;line-height:1.68;}
.cclf-rdnw{margin:10px 0 0!important;color:#919EB0;}
.cclf-rdnw sup{color:#F1C232;}
.cclf-rdnw a{color:#9FB2CE;text-decoration:underline;text-decoration-color:rgba(159,178,206,.4);
  text-underline-offset:2px;}
.cclf-rdnw a:hover{color:#fff;}

@media (max-width:900px){
  .cclf-rclose .cclf-in{padding:44px 24px 36px;}
  .cclf-rclose .cclf-rfoot{grid-template-columns:minmax(0,1fr);gap:26px;}
  .cclf-rfutil{margin-top:34px;}
  .cclf-rfudate{margin-left:0;flex-basis:100%;}
}
@media (max-width:520px){
  .cclf-rclose .cclf-in{padding:38px 18px 30px;}
  .cclf-rclose .cclf-acts{flex-direction:column;}
  .cclf-rclose .cclf-p1,
.cclf-rclose .cclf-p2{justify-content:center;}
}

.cclf-clock.cclf-is-met{--tone:var(--ample);}
.cclf-clock.cclf-is-met .cclf-cnum b{font-size:34px;letter-spacing:-.03em;}
.cclf-clock.cclf-is-met .cclf-rail i{opacity:.55;}
.cclf-spinenext.cclf-is-met,
.cclf-nact.cclf-is-met{--tone:var(--ample);}

.cclf,
body.cclf-page{
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --display:"Inter Tight","Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

.cclf-hero h1,
.cclf-ask,
.cclf-figure,
.cclf-amt,
.cclf-rsec > h2,
.cclf-rfoot h3,
.cclf-next,
.cclf-go,
.cclf-primary,
.cclf-p1,
.cclf-arow dd{font-family:var(--display);}

.cclf-hero h1{font-weight:800;letter-spacing:-.034em;line-height:1.05;}
.cclf-ask{font-weight:800;letter-spacing:-.02em;}
.cclf-figure{font-weight:800;letter-spacing:-.038em;}
.cclf-rsec > h2{font-weight:800;letter-spacing:-.02em;}
.cclf-rfoot h3{font-weight:800;letter-spacing:-.02em;}
.cclf-next,
.cclf-go,
.cclf-primary,
.cclf-p1{font-weight:800;letter-spacing:-.01em;}

.cclf-lab,
.cclf-eyebrow,
.cclf-agrp > h4{font-family:var(--sans);}

.cclf .cclf-rhead{color:#fff;font-weight:700;line-height:1.12;}
.cclf .cclf-ask{color:var(--ink);font-weight:800;line-height:1.1;letter-spacing:-.035em;}
.cclf .cclf-hero > .cclf-in > div > h1{color:inherit;}
.cclf-rdpsl{margin:14px 0 0!important;padding-top:12px;
  border-top:1px solid rgba(255,255,255,.1);color:#919EB0;}

/* ===========================================================================
   Carter Capner claim evaluator — the funnel, written from the approved
   artboards (Landing A, Q-First, Question, Q-Date, Q-GradualDates, Q-BodyMap,
   Q-Money, Q-Liability, Q-Reveal, Q-Review and the four phone boards).

   This is the whole of the funnel's presentation. It replaces the block that
   grew up under it screen by screen, where a rule written for one pattern kept
   winning on another and the design never arrived. Nothing here touches the
   result or the detail pages: those keep the stylesheet they already have,
   which starts where this ends.

   It opens with the contact step's own rules (the band, the form, the panel's
   next steps), which used to sit at the end of the result pages' part; they
   are in the same place in the cascade as before (audit item 49).
   =========================================================================== */
.cclf .cclf-doneband{background:var(--sheet);border-bottom:1px solid var(--rule);}
.cclf .cclf-doneband .cclf-in{max-width:1320px;margin:0 auto;padding:16px 32px;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.cclf .cclf-dtick{flex:none;width:34px;height:34px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;background:var(--ample)}
.cclf .cclf-dtick svg{width:17px;height:17px;fill:none;stroke:#fff;stroke-width:2.8;
  stroke-linecap:round;stroke-linejoin:round}
.cclf .cclf-dtx{flex:1 1 260px;min-width:0}
.cclf .cclf-dtx b{display:block;font-family:var(--display);font-size:16px;font-weight:800;
  letter-spacing:-.018em;color:var(--ink);line-height:1.25}
.cclf .cclf-dtx span{display:block;margin-top:2px;font-size:13px;line-height:1.4;color:var(--soft)}
.cclf .cclf-dbar{flex:1 1 220px;height:6px;border-radius:99px;background:var(--rule-2);overflow:hidden}
.cclf .cclf-dbar i{display:block;height:100%;width:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--gold-2),var(--gold))}
@media (max-width:820px){
  .cclf .cclf-doneband .cclf-in{padding:13px 20px;gap:12px}
  .cclf .cclf-dbar{flex:1 1 100%}
}
@media (max-width:620px){.cclf .cclf-doneband .cclf-in{padding:12px 18px}}

.cclf .cclf-form{display:grid;gap:13px;margin-top:20px;max-width:700px}
.cclf .cclf-row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.cclf .cclf-islast .cclf-in{padding-top:26px;padding-bottom:26px}
.cclf .cclf-islast .cclf-ask{max-width:28ch;font-size:clamp(27px,2.9vw,38px)}
@media (max-width:620px){.cclf .cclf-row2{grid-template-columns:minmax(0,1fr)}}
.cclf .cclf-tf{display:grid;gap:7px;min-width:0}
.cclf .cclf-tf label{font-size:12.5px;font-weight:700;color:var(--d-soft)}
.cclf .cclf-tf input{width:100%;box-sizing:border-box;border:1px solid var(--rule);
  border-radius:12px;background:var(--sheet);padding:15px 16px;
  font-family:var(--display);font-size:17px;font-weight:600;letter-spacing:-.01em;
  color:var(--ink);box-shadow:0 1px 2px rgba(19,31,51,.035);
  transition:border-color .14s ease,box-shadow .14s ease}
.cclf .cclf-tf input::placeholder{color:#AEB9C9;font-weight:500}
.cclf .cclf-tf input:focus{outline:0;border-color:var(--blue);
  box-shadow:inset 0 0 0 1px var(--blue),0 16px 30px -20px rgba(18,50,95,.5)}
.cclf .cclf-tf.cclf-bad input{border-color:var(--d-down);box-shadow:inset 0 0 0 1px var(--d-down)}
/* the free-text control, when a sentence is the honest answer rather than a line.
   Same box as the single-line field so the two do not look like different forms. */
.cclf .cclf-taw textarea{width:100%;box-sizing:border-box;border:1px solid var(--rule);
  border-radius:12px;background:var(--sheet);padding:14px 16px;
  font-family:inherit;font-size:16px;font-weight:500;line-height:1.55;
  color:var(--ink);box-shadow:0 1px 2px rgba(19,31,51,.035);resize:vertical;min-height:112px;
  transition:border-color .14s ease,box-shadow .14s ease}
.cclf .cclf-taw textarea::placeholder{color:#AEB9C9;font-weight:500}
.cclf .cclf-taw textarea:focus{outline:0;border-color:var(--blue);
  box-shadow:inset 0 0 0 1px var(--blue),0 16px 30px -20px rgba(18,50,95,.5)}
.cclf .cclf-tf.cclf-bad input:focus{box-shadow:inset 0 0 0 1px var(--d-down),
  0 16px 30px -20px rgba(138,59,47,.5)}
.cclf .cclf-err{display:none;align-items:flex-start;gap:7px;margin:0;font-size:12.5px;
  line-height:1.45;font-weight:600;color:var(--d-down)}
.cclf .cclf-tf.cclf-bad .cclf-err{display:flex}
/* the contact step's choice of how to reach them, when the button is pressed without it */
.cclf .cclf-prefbad .cclf-err{display:flex;margin-top:10px}
.cclf .cclf-err svg{width:14px;height:14px;flex:none;margin-top:1px;fill:none;stroke:currentColor;
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

.cclf #cclf-go2{max-width:320px;margin-top:13px;padding-top:15px;padding-bottom:15px}
/* the same waiting gold as the bar's Next (--d-gold-quiet, 5.39:1): these two were
   still on the pre-design brown #8F5A0E, so one state had two colours */
.cclf #cclf-go2.cclf-wait{background-color:transparent;background-image:none;color:var(--d-gold-quiet);
  box-shadow:inset 0 0 0 1.5px rgba(244,194,13,.42);cursor:default}
.cclf #cclf-go2.cclf-wait:hover{transform:none}
/* said under a number board when a value was brought down to what the unit can
   physically be - shown, never silent */
.cclf .cclf-cap{margin:10px 0 0;font-size:13.5px;line-height:1.5;color:var(--d-ink);
  border-left:3px solid var(--d-gold);padding-left:12px;max-width:60ch}
.cclf .cclf-terms{display:flex;align-items:flex-start;gap:10px;margin:14px 0 0;max-width:700px;
  font-size:12.5px;line-height:1.5;color:var(--d-soft)}
.cclf .cclf-terms svg{width:15px;height:15px;flex:none;margin-top:3px;fill:none;stroke:var(--d-mid);
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cclf .cclf-terms a{color:var(--d-deep);text-decoration:underline;text-underline-offset:2px}

.cclf .cclf-nxt{list-style:none;display:grid;gap:0;margin:14px 0 0;padding:0}
.cclf .cclf-nxt li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 14px;
  padding:0 0 18px;position:relative}
.cclf .cclf-nxt li:last-child{padding-bottom:0}
.cclf .cclf-nxt li:not(:last-child)::before{content:"";position:absolute;left:13px;top:30px;
  bottom:4px;width:2px;background:var(--rule);border-radius:2px}
.cclf .cclf-nn{grid-row:1/3;width:28px;height:28px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;background:var(--blue-d);color:#fff;
  font-family:var(--display);font-size:13px;font-weight:800;line-height:1;
  position:relative;z-index:1}
.cclf .cclf-nxt b{font-family:var(--display);font-size:14.5px;font-weight:800;letter-spacing:-.014em;
  line-height:1.3;color:var(--ink);align-self:center}
.cclf .cclf-nxt .cclf-nd{font-size:12.5px;line-height:1.5;color:var(--d-soft)}
.cclf .cclf-whenline{display:block;margin-top:3px;font-size:10.5px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--goldink)}

.cclf .cclf-flab{margin:14px 0 0;font-family:var(--display);font-size:15.5px;font-weight:800;
  letter-spacing:-.018em;color:var(--d-ink)}
.cclf .cclf-form .cclf-periods{margin-top:9px}
.cclf .cclf-prefs{display:grid;grid-template-columns:auto auto;gap:0 30px;justify-content:start;
  align-items:start}
.cclf .cclf-prefs > div:first-child .cclf-flab{margin-top:14px}
@media (max-width:760px){.cclf .cclf-prefs{grid-template-columns:minmax(0,1fr);gap:0}}
.cclf #cclf-goinline{display:none;}
@media (max-width:980px){
  .cclf #cclf-goinline:not([hidden]){display:block;margin-top:20px;}
  .cclf #cclf-gonow{max-width:none;padding-top:15px;padding-bottom:15px;}
  .cclf #cclf-gonow.cclf-wait{background-color:transparent;background-image:none;
    color:var(--d-gold-quiet);box-shadow:inset 0 0 0 1.5px rgba(244,194,13,.42);cursor:default;}
  .cclf #cclf-gonow.cclf-wait:hover{transform:none;}
}

.cclf .cclf-dfield label i{font-style:normal;font-weight:600;color:var(--d-mid);
  text-transform:none;letter-spacing:0;}
.cclf .cclf-dfield label i::before{content:"\00a0\00b7\00a0";}
.cclf .cclf-dmiss{margin:12px 0 0;font-size:13.5px;line-height:1.5;font-weight:600;
  color:var(--soon);}

.cclf,
body.cclf-page{color-scheme:light}

/* ---- what the design is made of ----------------------------------------
   Named apart from the result page's own palette on purpose: that screen is
   signed off and is not re-coloured by anything written here. */
.cclf{
  --d-gold:#FFD400; --d-gold-ink:#101828; --d-gold-quiet:#7A6A12;
  --d-ink:#0F1D33; --d-soft:#4C5B70; --d-mid:#566577; --d-quiet:#64717F;
  --d-line:#E7EBF1; --d-line-2:#EDF0F4; --d-card:#DDE3EB; --d-chip:#E2E7ED;
  --d-wash:#F8FAFC; --d-track:#EDF0F5; --d-tile:#F1F4F9; --d-pick:#F7F9FC;
  --d-deep:#0F2547; --d-deep-hover:#1E4278;
  /* Nine rules in this file use var(--cta) and none of them defined it: it was
     resolving to #0b5cff from another of the site's stylesheets, so the results
     page's navigation accents and three focus rings depended on a file that
     knows nothing about them. Same value, said here. */
  --cta:#0b5cff;
  --d-panel:#0E2545; --d-brand:#0A1A30;
  --d-panel-line:rgba(255,255,255,.12); --d-panel-rule:#1C3A64; --d-panel-off:#26456F;
  --d-panel-text:#A9BBD4; --d-panel-bright:#D7E2F1; --d-panel-soft:#C6D6EC;
  --d-panel-quiet:#93A9C8; --d-panel-faint:#7C90AC;
  --d-up:#14634A; --d-up-bg:#E7F3EE; --d-down:#8A3B2F; --d-down-bg:#FBEDEA;
  --d-warm:#FFFCEC; --d-warm-line:#F2E3A8; --d-warm-bg:#FFF3C9;
  --d-aside:432px;
}
.cclf *{box-sizing:border-box;min-width:0}
.cclf [hidden]{display:none!important}
.cclf{font-family:var(--sans);color:var(--d-ink);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased}
.cclf button{font:inherit}
/* Written for the questions. Unscoped, these two - and the .cclf-sub and
   .cclf-done rules further down, narrowed the same way - were reaching the
   result pages, which keep their own: the link colour turned "Edit my
   answers", the number in "Talk it through" and the terms links in the footer
   navy on navy, and the sub-line put the sentence under the range in grey,
   off centre. :where() adds nothing to the specificity, so each rule wins and
   loses exactly where it did on the question screens. */
.cclf a:not(:where(.cclf-resultwrap a,.cclf-rtail a)){color:var(--d-deep)}
.cclf a:not(:where(.cclf-resultwrap a,.cclf-rtail a)):hover{color:var(--d-deep-hover)}

/* the eyebrow: a short gold rule, then the part, in caps */
/* ---- the typefaces the artboards are set in -----------------------------
   Every board loads Archivo for display and sets its body in Inter Tight. The
   funnel was set the other way round - Inter Tight for display over Inter for
   body - which is a narrower, heavier voice than the design and is what made
   the screens read as "not the artboard" however close the boxes got.

   The two tokens are redefined on the funnel's own sections rather than on
   .cclf, so #cclf-result and #cclf-detail keep the faces they were signed off
   in. ------------------------------------------------------------------- */
.cclf .cclf-hero,
.cclf .cclf-prog,
.cclf .cclf-stage,
.cclf .cclf-reviewwrap,
.cclf .cclf-bar{
  --sans:"Inter Tight","Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --display:"Archivo","Inter Tight",system-ui,-apple-system,sans-serif;
  font-family:var(--sans)}

/* and the weights and tracking the boards actually use: the eyebrow is 600 not
   700, the opening headline tracks -.032em, the review headline is 700. */
.cclf .cclf-hero .cclf-eye,
.cclf .cclf-stage .cclf-eye,
.cclf .cclf-reviewwrap .cclf-eye{font-weight:600}
.cclf .cclf-hero h1{letter-spacing:-.032em}
.cclf .cclf-rvhead{font-weight:700;letter-spacing:-.02em}

.cclf .cclf-eye{display:flex;align-items:center;gap:11px;margin:0;
  font-family:var(--display);font-size:11.5px;font-weight:700;letter-spacing:.17em;
  text-transform:uppercase;color:var(--d-gold-quiet)}
.cclf .cclf-eye::before{content:"";flex:none;width:22px;height:3px;background:var(--d-gold)}

/* the two buttons the whole funnel is built on */
.cclf .cclf-go,.cclf .cclf-next,.cclf .cclf-pgo{display:inline-flex;align-items:center;
  justify-content:center;gap:10px;height:56px;padding:0 30px;border:0;border-radius:12px;
  background:var(--d-gold);color:var(--d-gold-ink);cursor:pointer;
  font-family:var(--display);font-size:17px;font-weight:700;letter-spacing:normal;
  text-decoration:none;transition:transform .14s ease,box-shadow .14s ease}
.cclf .cclf-go:hover,.cclf .cclf-next:hover,.cclf .cclf-pgo:hover{transform:translateY(-1px);
  box-shadow:0 12px 24px -14px rgba(160,120,10,.85);color:var(--d-gold-ink)}
.cclf .cclf-go svg,.cclf .cclf-next svg,.cclf .cclf-pgo svg{width:18px;height:18px;flex:none;
  fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* The primary action while it waits. #9A8A4A on white is 3.44:1 - exempt from
   1.4.3 because the button is genuinely disabled, and still the one thing on the
   screen telling the claimant what happens next. The palette already has a quiet
   gold for this: 5.39:1. */
.cclf .cclf-next.cclf-wait,.cclf .cclf-pgo.cclf-wait{background:transparent;color:var(--d-gold-quiet);
  box-shadow:inset 0 0 0 1.5px rgba(244,194,13,.42);cursor:default}
.cclf .cclf-next.cclf-wait:hover,.cclf .cclf-pgo.cclf-wait:hover{transform:none;box-shadow:inset 0 0 0 1.5px rgba(244,194,13,.42)}
.cclf .cclf-ghost{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:56px;padding:0 26px;border:1px solid rgba(255,255,255,.28);border-radius:12px;
  background:rgba(255,255,255,.04);color:#fff;text-decoration:none;
  font-family:var(--display);font-size:17px;font-weight:700}
.cclf .cclf-ghost:hover{background:rgba(255,255,255,.1);color:#fff}
.cclf .cclf-ghost svg{width:17px;height:17px;flex:none;fill:none;stroke:var(--d-gold);
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* =========================================================================
   Landing A — one centred column and a start button
   ========================================================================= */
/* Landing A is a flat navy page, not a gradient, and its column is wider than
   the one the funnel was using. */
.cclf .cclf-hero{position:relative;isolation:isolate;color:#fff;overflow:hidden;
  background:var(--d-brand)}
.cclf .cclf-hero .cclf-in{max-width:1248px;margin:0 auto;width:100%;
  padding:clamp(26px,4.4vh,44px) 32px clamp(20px,3vh,28px);display:block;text-align:center}
.cclf .cclf-hero .cclf-lead{display:flex;flex-direction:column;align-items:center}
.cclf .cclf-hero .cclf-eye{justify-content:center;color:var(--d-gold);
  font-size:12px;letter-spacing:.2em;gap:12px}
.cclf .cclf-hero .cclf-eye::before,
.cclf .cclf-hero .cclf-eye::after{content:"";flex:none;width:26px;height:3px;
  background:var(--d-gold)}
.cclf .cclf-hero h1{margin:18px 0 0;font-family:var(--display);
  font-size:clamp(36px,min(5.2vw,8vh),72px);font-weight:800;line-height:1;
  letter-spacing:-.035em;max-width:20ch}
.cclf .cclf-hero h1 em{font-style:normal;color:var(--d-gold);display:block}
.cclf .cclf-hero .cclf-lede{margin:16px auto 0;font-size:19px;line-height:1.5;
  color:#A9BBD4;max-width:640px}
.cclf .cclf-hbtns{display:flex;flex-wrap:wrap;gap:13px;margin-top:30px;justify-content:center}
/* Someone arriving with answers already carried in from an enquiry. The opening
   screen used to tell them it takes five minutes and to start, which is not what
   is in front of them. */
.cclf .cclf-resume{display:flex;align-items:flex-start;gap:13px;margin:26px auto 0;
  max-width:620px;padding:15px 18px;text-align:left;border-radius:14px;
  background:rgba(255,212,0,.09);border:1px solid rgba(255,212,0,.3)}
.cclf .cclf-resume[hidden]{display:none}
.cclf .cclf-resume .cclf-rsic{flex:none;width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,212,0,.16);border:1px solid rgba(255,212,0,.34)}
.cclf .cclf-resume .cclf-rsic svg{width:18px;height:18px;fill:none;stroke:var(--d-gold);
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.cclf .cclf-resume .cclf-rstx{flex:1 1 auto;font-size:15px;line-height:1.5;color:#D7E2F1}
.cclf .cclf-resume .cclf-rstx b{display:block;color:#fff;font-size:15.5px;font-weight:700}
.cclf .cclf-rsclr{flex:none;align-self:center;background:none;border:0;padding:0;
  font:inherit;font-size:14px;font-weight:600;color:#B9C8DF;text-decoration:underline;
  text-underline-offset:3px;cursor:pointer}
.cclf .cclf-rsclr:hover{color:#fff}

.cclf .cclf-hero .cclf-go{height:auto;padding:18px 32px;font-size:19px}
/* The board carries one line of four claims with a bare gold check against each
   and a dot between them - not a ring, and not the three-column block of icons
   the funnel had grown underneath it. */
.cclf .cclf-mins{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:8px 18px;margin:16px 0 0;padding:0;list-style:none;font-size:14px;font-weight:400;
  color:#A9BBD4}
.cclf .cclf-mins li{display:flex;align-items:center;gap:8px}
.cclf .cclf-mins li + li::before{content:"";flex:none;width:4px;height:4px;border-radius:50%;
  background:#46608A;margin-right:10px}
.cclf .cclf-mins i{flex:none;width:15px;height:15px;position:relative}
.cclf .cclf-mins i::after{content:"";position:absolute;left:3px;top:4px;width:8px;height:4px;
  border-left:2.2px solid var(--d-gold);border-bottom:2.2px solid var(--d-gold);
  transform:rotate(-45deg)}
/* the note beside a line that ends in "*" - the fee line - saying what can still be
   payable; it sits under the list in the list's own tone, a step smaller */
.cclf .cclf-minsnote{margin:10px auto 0;max-width:64ch;font-size:12.5px;line-height:1.5;
  color:#90A6C4;text-align:center}
.cclf .cclf-minsnote a{color:var(--d-gold);font-weight:600;text-decoration:none}
.cclf .cclf-minsnote a:hover{color:#FFE566}







/* question one, asked on the landing itself */
.cclf .cclf-q1{margin-top:34px;padding-top:30px;border-top:1px solid rgba(255,255,255,.12);
  text-align:left}
.cclf .cclf-q1lab{display:flex;align-items:center;gap:18px;margin:0 0 20px;
  font-family:var(--display);font-size:20px;font-weight:700;letter-spacing:-.015em;color:#fff}
.cclf .cclf-q1n{flex:none;width:30px;height:30px;border-radius:50%;background:rgba(255,212,0,.16);
  color:var(--d-gold);display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:14px;font-weight:700}
.cclf .cclf-q1lab b{font-weight:700}
.cclf .cclf-q1rule{flex:1 1 auto;height:1px;background:rgba(255,255,255,.14);min-width:20px}
.cclf .cclf-q1cap{flex:none;font-family:var(--sans);font-size:13.5px;font-weight:400;
  letter-spacing:normal;color:#90A6C4}

/* the line the board closes the screen with */
.cclf .cclf-hfoot{display:flex;align-items:center;justify-content:space-between;gap:18px;
  margin:30px 0 0;padding-top:16px;border-top:1px solid rgba(255,255,255,.10);
  font-size:14.5px;color:#A9BBD4;text-align:left}
.cclf .cclf-hfoot a{color:var(--d-gold);font-weight:600;text-decoration:none}
.cclf .cclf-hfoot a:hover{color:#FFE566}
.cclf .cclf-hfoot .cclf-hfr{flex:none;font-size:13px;color:#7C90AC}
.cclf .cclf-hfshort{display:none}

/* =========================================================================
   The strip across the top of every question
   ========================================================================= */
.cclf .cclf-prog{position:sticky;top:0;z-index:20;background:#fff;
  border-bottom:1px solid var(--d-line)}
.cclf .cclf-prog .cclf-in{max-width:1320px;margin:0 auto;padding:0 32px}
.cclf #cclf-proginner{display:flex;align-items:center;gap:26px;min-height:64px}
.cclf #cclf-proginner .cclf-back{flex:none;margin:0;padding:0;border:0;background:none;
  display:flex;align-items:center;gap:8px;cursor:pointer;
  font-size:14.5px;font-weight:600;color:#3E4C5E}
.cclf #cclf-proginner .cclf-back:hover{color:var(--d-deep)}
.cclf .cclf-back svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cclf .cclf-psep{flex:none;width:1px;height:22px;background:var(--d-chip)}
.cclf .cclf-track{flex:1 1 auto;min-width:0;display:flex;margin:0;padding:0;list-style:none}
.cclf .cclf-tline{flex:1 1 auto;display:flex;align-items:center;gap:22px;padding:0}
.cclf .cclf-tq{font-size:14.5px;color:var(--d-soft);white-space:nowrap}
.cclf .cclf-tq b{color:var(--d-ink);font-weight:700}
.cclf .cclf-trail{flex:1 1 auto;height:6px;border-radius:99px;background:var(--d-track);
  overflow:hidden}
.cclf .cclf-trail i{display:block;height:100%;border-radius:99px;background:var(--d-gold);
  transition:width .4s ease}
.cclf .cclf-gonow2{flex:none;display:inline-flex;align-items:center;gap:8px;height:38px;
  padding:0 16px;border:1px solid #C9D2DE;border-radius:99px;background:#fff;
  color:var(--d-deep);cursor:pointer;font-size:14px;font-weight:600;white-space:nowrap}
.cclf .cclf-gonow2:hover{background:var(--d-deep);border-color:var(--d-deep);color:#fff}
.cclf .cclf-gonow2-off{border-style:dashed;border-color:#D3DAE4;color:#8A97A6;
  background:transparent;cursor:default;font-weight:600}
.cclf .cclf-gonow2-off:hover{background:transparent;border-color:#D3DAE4;color:#8A97A6}
.cclf .cclf-pmini{display:none;gap:7px;padding:10px 0}
.cclf .cclf-pmtop{display:flex;align-items:center;justify-content:flex-start;gap:10px}
.cclf .cclf-pmnum{font-size:13px;color:var(--d-soft)}
.cclf .cclf-pmnum b{color:var(--d-ink);font-weight:700}
.cclf .cclf-prail{height:3px;border-radius:99px;background:var(--d-track);overflow:hidden}
.cclf .cclf-prail i{display:block;height:100%;width:0;border-radius:99px;background:var(--d-gold);
  transition:width .4s ease}

/* =========================================================================
   The stage: the question on the left, the panel on the right
   ========================================================================= */
.cclf .cclf-stage{background:#fff;display:flex;align-items:stretch}
.cclf .cclf-stage .cclf-in{max-width:1320px;margin:0 auto;width:100%;padding:0;display:grid;
  grid-template-columns:minmax(0,1fr) var(--d-aside);align-items:stretch}
.cclf .cclf-qcol{display:flex;flex-direction:column;min-width:0;padding:44px 52px 30px 32px}
.cclf .cclf-ask{margin:16px 0 0;font-family:var(--display);
  font-size:clamp(28px,2.9vw,40px);font-weight:700;line-height:1.1;letter-spacing:-.02em;
  color:var(--d-ink);max-width:22ch}
/* the question's sub-line; the sentence under the range keeps its own */
.cclf .cclf-sub:not(:where(.cclf-result .cclf-sub)){margin:11px 0 0;font-size:16.5px;line-height:1.5;color:var(--d-soft);
  max-width:620px}
.cclf .cclf-hint{display:flex;align-items:flex-start;gap:9px;margin:16px 0 0;font-size:14px;
  line-height:1.5;color:var(--d-soft)}
.cclf .cclf-hint svg{width:16px;height:16px;flex:none;margin-top:2px;fill:none;
  stroke:#8A97A6;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* the note that says why the question is being asked */
.cclf .cclf-why{display:flex;align-items:flex-start;gap:12px;margin-top:22px;padding:16px 18px;
  border:1px solid var(--d-line);border-radius:12px;background:var(--d-wash);max-width:760px}
.cclf .cclf-why svg{width:18px;height:18px;flex:none;margin-top:1px;fill:none;
  stroke:var(--d-deep);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cclf .cclf-why > span{font-size:14.5px;line-height:1.5;color:#3E4C5E}
.cclf .cclf-why b{color:var(--d-ink);font-weight:700}

/* =========================================================================
   The answers
   ========================================================================= */
.cclf .cclf-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(278px,1fr));
  gap:14px;margin-top:28px}
.cclf .cclf-opt{position:relative;width:100%;min-height:96px;padding:16px 20px;
  border:1px solid var(--d-card);border-radius:14px;background:#fff;cursor:pointer;
  display:flex;align-items:center;gap:14px;text-align:left;
  transition:border-color .14s ease,background .14s ease}
.cclf .cclf-opt:hover{border-color:#B9C6D8}
.cclf .cclf-opt:focus-visible{outline:2px solid var(--d-deep);outline-offset:2px}
.cclf .cclf-opt.cclf-on{border:2px solid var(--d-deep);background:var(--d-pick);padding:15px 19px}
.cclf .cclf-otx{flex:1 1 auto;min-width:0;font-size:17.5px;font-weight:600;color:var(--d-ink)}
.cclf .cclf-otx span{display:block;margin-top:4px;font-size:14px;font-weight:400;
  line-height:1.45;color:var(--d-mid)}
.cclf .cclf-oic{flex:none;width:46px;height:46px;border-radius:12px;background:var(--d-tile);
  color:var(--d-deep);display:flex;align-items:center;justify-content:center}
.cclf .cclf-oic svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.cclf .cclf-oic-gap{background:none}
.cclf .cclf-pick{flex:none;width:26px;height:26px;border-radius:50%;border:1.6px solid #C3CDDB;
  background:#fff;position:relative;transition:border-color .14s ease,background .14s ease}
.cclf .cclf-opt.cclf-on .cclf-pick{border-color:var(--d-deep);background:var(--d-deep)}
.cclf .cclf-opt.cclf-on .cclf-pick::after{content:"";position:absolute;inset:6px;
  border-radius:50%;background:var(--d-gold)}
.cclf .cclf-box{flex:none;width:24px;height:24px;border-radius:7px;border:1.6px solid #C3CDDB;
  background:#fff;position:relative;transition:border-color .14s ease,background .14s ease}
.cclf .cclf-box svg{position:absolute;inset:3px;width:16px;height:16px;fill:none;
  stroke:var(--d-gold);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.cclf .cclf-opt.cclf-on .cclf-box{border-color:var(--d-deep);background:var(--d-deep)}
.cclf .cclf-opt.cclf-on .cclf-box svg{opacity:1}

/* the tall numbered card the first question is asked with */
.cclf .cclf-stage .cclf-opts.cclf-tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.cclf .cclf-stage .cclf-opts.cclf-tiles .cclf-opt{flex-direction:column;align-items:stretch;
  gap:0;min-height:232px;padding:24px 24px 20px;border-radius:16px}
.cclf .cclf-stage .cclf-opts.cclf-tiles .cclf-opt.cclf-on{padding:23px 23px 19px}
.cclf .cclf-stage .cclf-opts.cclf-tiles .cclf-opt:not(:has(.cclf-otx span)){min-height:196px}
.cclf .cclf-stage .cclf-opts.cclf-tiles .cclf-oic{width:50px;height:50px;border-radius:13px}
.cclf .cclf-stage .cclf-opts.cclf-tiles .cclf-oic svg{width:25px;height:25px}
.cclf .cclf-stage .cclf-opts.cclf-tiles .cclf-otx{margin-top:auto;padding-top:18px;flex:none;
  font-family:var(--display);font-size:23px;font-weight:700;letter-spacing:-.015em;
  line-height:1.16}
.cclf .cclf-stage .cclf-opts.cclf-tiles .cclf-otx span{margin-top:9px;font-family:var(--sans);
  font-size:14.5px;letter-spacing:0;line-height:1.45}
.cclf .cclf-onum{position:absolute;top:24px;right:24px;font-family:var(--display);font-size:28px;
  font-weight:800;line-height:1;letter-spacing:-.02em;color:#E4E8EE}
.cclf .cclf-ochoose{display:none}
.cclf .cclf-stage .cclf-opts.cclf-tiles .cclf-ochoose{display:flex;align-items:center;gap:9px;
  margin-top:14px;font-size:14.5px;font-weight:600;color:var(--d-deep)}
.cclf .cclf-stage .cclf-opts.cclf-tiles .cclf-ochoose svg{width:16px;height:16px;fill:none;
  stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cclf .cclf-stage .cclf-opts.cclf-tiles .cclf-opt.cclf-on .cclf-ochoose{color:var(--d-ink)}
.cclf .cclf-stage .cclf-opts.cclf-tiles .cclf-pick,
.cclf .cclf-stage .cclf-opts.cclf-tiles .cclf-opt:not(.cclf-on) .cclf-tick{display:none}

/* the landing's own tiles stay the quieter thing they are on the dark panel */
/* The board draws these as tall navy cards: a gold icon plate top left, the
   number ghosted opposite it, the label sitting on the floor of the card with
   its line under it and Choose beneath that. */
.cclf .cclf-hero .cclf-opts.cclf-tiles{grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;margin-top:0}
.cclf .cclf-hero .cclf-opt{min-height:230px;padding:24px 26px 20px;border-radius:18px;
  border:1px solid rgba(255,255,255,.18);background:var(--d-panel);
  flex-direction:column;align-items:stretch;gap:0}
.cclf .cclf-hero .cclf-opt:hover{border-color:rgba(255,212,0,.5);background:#122C52}
/* The board's card carries a line under the label. Where an estimator has not
   written one - the workplace roles are three bare words - the 230px card holds
   a void in its middle, so it comes down to the height the content needs. */
.cclf .cclf-hero .cclf-opt:not(:has(.cclf-otx span)){min-height:176px}
.cclf .cclf-hero .cclf-opt .cclf-oic{width:50px;height:50px;border-radius:13px;
  background:rgba(255,212,0,.14);color:var(--d-gold);margin:0}
.cclf .cclf-hero .cclf-opt .cclf-oic svg{width:25px;height:25px}
.cclf .cclf-hero .cclf-onum{position:absolute;top:24px;right:26px;
  font-family:var(--display);font-size:30px;font-weight:800;line-height:1;
  color:rgba(255,255,255,.13)}
.cclf .cclf-hero .cclf-otx{margin-top:auto;padding-top:18px;flex:none;
  font-family:var(--display);font-size:24px;font-weight:700;letter-spacing:-.015em;color:#fff}
.cclf .cclf-hero .cclf-otx span{display:block;margin-top:9px;font-family:var(--sans);
  font-size:14.5px;font-weight:400;line-height:1.45;color:#93A9C8}
.cclf .cclf-hero .cclf-ochoose{display:flex;align-items:center;gap:9px;margin-top:14px;
  font-size:14.5px;font-weight:600;color:var(--d-gold)}
.cclf .cclf-hero .cclf-ochoose svg{width:16px;height:16px;flex:none;fill:none;
  stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cclf .cclf-hero .cclf-opt .cclf-pick,
.cclf .cclf-hero .cclf-opt .cclf-tick{display:none}
.cclf .cclf-tick{position:absolute;top:12px;right:12px;width:26px;height:26px;border-radius:50%;
  display:none;align-items:center;justify-content:center;background:var(--d-gold);
  box-shadow:0 4px 10px -4px rgba(160,120,10,.8)}
.cclf .cclf-tick svg{width:14px;height:14px;fill:none;stroke:var(--d-gold-ink);stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round}
.cclf .cclf-hero .cclf-opt.cclf-on{border-color:var(--d-gold);background:rgba(255,212,0,.1)}
/* the gold tick lands on the ghosted number, so the number gives way */
.cclf .cclf-hero .cclf-opt.cclf-on .cclf-onum,
.cclf .cclf-stage .cclf-opts.cclf-tiles .cclf-opt.cclf-on .cclf-onum{visibility:hidden}
.cclf .cclf-hero .cclf-opt.cclf-on .cclf-tick{display:flex}

/* several answers at once */
.cclf .cclf-mstrip{display:flex;flex-wrap:wrap;align-items:center;gap:0 18px;margin-top:24px;
  padding:10px 16px;border-radius:11px;background:var(--d-wash);border:1px solid var(--d-line);
  font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--d-soft)}
.cclf .cclf-mstrip span{display:flex;align-items:center;gap:8px;padding:2px 0}
.cclf .cclf-mstrip span + span{padding-left:18px;border-left:1px solid var(--d-line)}
.cclf .cclf-mstrip svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cclf .cclf-mstrip b{color:var(--d-gold-quiet);font-weight:800;font-variant-numeric:tabular-nums}
.cclf .cclf-opts.cclf-multi{margin-top:11px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.cclf .cclf-opts.cclf-multi .cclf-opt{min-height:64px;padding:14px 18px}
.cclf .cclf-opts.cclf-multi .cclf-opt.cclf-on{padding:13px 17px}
.cclf .cclf-opts.cclf-multi .cclf-otx{font-size:16px}

/* a date, and the rough alternative under it */
.cclf .cclf-modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;
  margin-top:26px;max-width:700px}
.cclf .cclf-mode{display:flex;align-items:center;gap:12px;padding:15px 18px;
  border:1px solid var(--d-card);border-radius:14px;background:#fff;cursor:pointer;
  font-size:16px;font-weight:600;color:var(--d-ink);text-align:left}
.cclf .cclf-mode:hover{border-color:#B9C6D8}
.cclf .cclf-mode.cclf-on{border:2px solid var(--d-deep);background:var(--d-pick);padding:14px 17px}
.cclf .cclf-mode .cclf-pick{width:22px;height:22px}
.cclf .cclf-mode.cclf-on .cclf-pick::after{inset:5px}
.cclf .cclf-dparts{display:flex;flex-wrap:wrap;gap:14px;margin-top:20px}
.cclf .cclf-dfield{display:grid;gap:8px;min-width:0}
.cclf .cclf-dfield label{font-size:12.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--d-quiet)}
.cclf .cclf-dfield label i{font-style:normal;font-weight:600;color:var(--d-mid);
  text-transform:none;letter-spacing:0}
.cclf .cclf-dfield label i::before{content:"\00a0\00b7\00a0"}
.cclf .cclf-dfield select,.cclf select.cclf-wide{appearance:none;-webkit-appearance:none;
  height:64px;min-width:118px;padding:0 42px 0 18px;border:1px solid var(--d-card);
  border-radius:14px;background:#fff;color:var(--d-ink);cursor:pointer;
  font-family:var(--display);font-size:19px;font-weight:700;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F2547' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center;background-size:18px}
.cclf select.cclf-wide{width:100%;max-width:520px;font-size:17px}
.cclf .cclf-dfield select:focus-visible,.cclf select.cclf-wide:focus-visible{outline:0;
  border-color:var(--d-deep);box-shadow:0 0 0 3px rgba(15,37,71,.12)}
.cclf .cclf-dnote{display:flex;align-items:center;gap:9px;margin:16px 0 0;font-size:14px;
  font-weight:600;color:var(--d-up)}
.cclf .cclf-dnote svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cclf .cclf-dmiss{margin:12px 0 0;font-size:14px;line-height:1.5;font-weight:600;
  color:var(--d-down)}

/* what they earn */
.cclf .cclf-periods{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.cclf .cclf-per{height:44px;padding:0 20px;border:1px solid var(--d-card);border-radius:12px;
  background:#fff;color:var(--d-ink);cursor:pointer;font-size:15px;font-weight:600}
.cclf .cclf-per:hover{border-color:#B9C6D8}
.cclf .cclf-per.cclf-on{border:2px solid var(--d-deep);background:var(--d-pick);padding:0 19px}
.cclf .cclf-periods.cclf-payper{display:inline-flex;align-self:flex-start;gap:0;padding:4px;
  border-radius:11px;background:var(--d-track);border:0}
.cclf .cclf-periods.cclf-payper .cclf-per{height:38px;padding:0 20px;border:0;border-radius:8px;
  background:none;color:var(--d-soft);font-size:14.5px;display:inline-flex;align-items:center}
.cclf .cclf-periods.cclf-payper .cclf-per:hover{color:var(--d-ink);background:rgba(255,255,255,.55)}
.cclf .cclf-periods.cclf-payper .cclf-per.cclf-on{background:#fff;color:var(--d-ink);
  box-shadow:0 1px 2px rgba(16,24,40,.09),0 1px 1px rgba(16,24,40,.06)}
.cclf .cclf-paypanel{margin-top:18px}
.cclf .cclf-amtrow{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap}
.cclf .cclf-fld{display:grid;gap:7px;min-width:0}
.cclf .cclf-fld label{font-size:12.5px;font-weight:700;color:var(--d-quiet)}
.cclf .cclf-fld.cclf-amt{flex:0 1 380px}
.cclf .cclf-fld.cclf-units{flex:0 1 240px}
.cclf .cclf-money{display:flex;align-items:center;height:78px;padding:0 22px;width:100%;
  border:2px solid var(--d-deep);border-radius:14px;background:#fff}
.cclf .cclf-money:focus-within{box-shadow:0 0 0 3px rgba(15,37,71,.12)}
.cclf .cclf-money .cclf-pre{flex:none;font-family:var(--display);font-size:22px;font-weight:700;
  color:#8695AC}
.cclf .cclf-money .cclf-post{flex:none;font-size:14.5px;font-weight:600;color:var(--d-mid);
  white-space:nowrap}
.cclf .cclf-money input{flex:1 1 auto;min-width:0;border:0;outline:0;background:none;padding:0 10px;
  font-family:var(--display);font-size:26px;font-weight:800;letter-spacing:-.03em;
  color:var(--d-ink);font-variant-numeric:tabular-nums}
.cclf .cclf-money input::placeholder{color:#C3CDDB;font-weight:700}
.cclf .cclf-money input[type=number]{-moz-appearance:textfield;appearance:textfield}
.cclf .cclf-money input::-webkit-outer-spin-button,
.cclf .cclf-money input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cclf .cclf-money.cclf-sm input{font-size:24px}
.cclf .cclf-conv{margin:14px 0 0;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.cclf .cclf-conv .cclf-big{order:2;display:flex;flex-wrap:wrap;align-items:baseline;gap:7px;
  font-family:var(--display);font-size:24px;font-weight:800;letter-spacing:-.03em;
  color:var(--d-ink);font-variant-numeric:tabular-nums}
.cclf .cclf-conv .cclf-big::before{content:"That is about";order:-1;width:100%;margin-bottom:2px;
  font-family:var(--sans);font-size:13.5px;font-weight:600;letter-spacing:0;color:var(--d-soft)}
.cclf .cclf-conv .cclf-big em{font-style:normal;font-family:var(--sans);font-size:13.5px;
  font-weight:600;letter-spacing:0;color:var(--d-soft)}
.cclf .cclf-conv .cclf-alt{order:3;font-size:13.5px;color:var(--d-soft);
  font-variant-numeric:tabular-nums}
.cclf .cclf-conv .cclf-alt b{color:var(--d-ink);font-weight:700}
.cclf .cclf-conv .cclf-pending{order:1;font-size:14px;line-height:1.5;color:var(--d-soft)}

/* free text */
.cclf .cclf-entry,.cclf .cclf-taw textarea,.cclf .cclf-tf input{width:100%;max-width:620px;
  height:64px;padding:0 18px;border:1px solid var(--d-card);border-radius:14px;background:#fff;
  color:var(--d-ink);font-family:var(--sans);font-size:17px;outline:0}
.cclf .cclf-taw textarea{height:auto;min-height:120px;padding:16px 18px;line-height:1.5;
  max-width:760px;resize:vertical}
.cclf .cclf-entry:focus,.cclf .cclf-taw textarea:focus,.cclf .cclf-tf input:focus{
  border-color:var(--d-deep);box-shadow:0 0 0 3px rgba(15,37,71,.12)}
.cclf .cclf-entry::placeholder,.cclf .cclf-taw textarea::placeholder,
.cclf .cclf-tf input::placeholder{color:#B4BECC}

/* a follow-up that opens because of the answer above it */
.cclf .cclf-panel{margin-top:26px;max-width:820px;padding:22px;border:1px solid var(--d-line);
  border-radius:16px;background:var(--d-wash)}
.cclf .cclf-panel.cclf-paypanel{margin-top:18px;padding:0;border:0;background:none;max-width:none}

/* =========================================================================
   The panel
   ========================================================================= */
.cclf .cclf-aside{background:var(--d-panel);color:#fff;padding:34px 34px 30px;
  display:flex;flex-direction:column;min-width:0}
@media (min-width:1381px){
  /* The panel runs to the edge of the screen. The old rule measured 50% against
     the panel's own grid track, not the container: at 1440 that put its right
     edge 504px past the page and every calculator scrolled sideways. The gap to
     the edge is half of whatever the viewport has over the 1320 container. */
  .cclf .cclf-aside{margin-right:calc(0px - max(0px, (100vw - 1320px) / 2));
    padding-right:calc(34px + max(0px, (100vw - 1320px) / 2))}
}
.cclf .cclf-qrail{margin:0;padding:0;border:0;background:none}
.cclf .cclf-qband{margin:0 0 22px;padding:0 0 22px;border-bottom:1px solid var(--d-panel-line)}
.cclf .cclf-qbeye{display:flex;align-items:center;gap:10px;margin:0;
  font-family:var(--display);font-size:11.5px;font-weight:700;letter-spacing:.17em;
  text-transform:uppercase;color:var(--d-gold)}
.cclf .cclf-qbchip{flex:none;height:22px;padding:0 9px;border-radius:6px;
  background:rgba(255,255,255,.1);color:var(--d-panel-soft);display:inline-flex;
  align-items:center;font-size:11px;font-weight:600;letter-spacing:.08em}
.cclf .cclf-qbfig{margin:14px 0 0;font-family:var(--display);
  font-size:clamp(26px,2.7vw,38px);font-weight:800;line-height:1.05;letter-spacing:-.02em;
  color:#fff}
.cclf .cclf-qbnote{margin:9px 0 0;font-size:13.5px;line-height:1.5;color:var(--d-panel-text)}
.cclf .cclf-qraileye{margin:0;font-family:var(--display);font-size:11.5px;font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;color:var(--d-gold)}
.cclf .cclf-qrailmeter{display:flex;align-items:center;gap:12px;margin-top:14px}
.cclf .cclf-qrailmeter i{width:26px;height:6px;border-radius:99px;background:var(--d-panel-off);
  display:block;flex:none}
.cclf .cclf-qrailmeter i.cclf-qrailon{background:var(--d-gold)}
.cclf .cclf-qrailmeter b{font-size:14.5px;font-weight:600;color:#fff}
.cclf .cclf-qrailnote{margin:9px 0 0;font-size:14px;line-height:1.5;color:var(--d-panel-text)}
.cclf .cclf-qrailclocks{margin-top:22px;padding-top:22px;border-top:1px solid var(--d-panel-line)}
.cclf .cclf-qrailclabel{display:flex;align-items:center;gap:9px;margin:0 0 14px;
  font-family:var(--display);font-size:11.5px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--d-gold)}
.cclf .cclf-qrailclock + .cclf-qrailclock{margin-top:14px}
.cclf .cclf-qrailcrow{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.cclf .cclf-qrailcn{font-size:14.5px;font-weight:600;color:#fff}
.cclf .cclf-qrailcv{font-family:var(--display);font-size:14.5px;font-weight:700;
  color:var(--d-panel-bright)}
.cclf .cclf-qrailtight .cclf-qrailcv{color:var(--d-gold)}
.cclf .cclf-qrailcbar{display:block;height:5px;margin-top:7px;border-radius:99px;
  background:var(--d-panel-rule);overflow:hidden}
.cclf .cclf-qrailcbar i{display:block;height:100%;border-radius:99px;background:#7FA0CE}
.cclf .cclf-qrailtight .cclf-qrailcbar i{background:var(--d-gold)}
.cclf .cclf-aside .cclf-privacy{margin-top:16px;padding:12px 14px;border-radius:12px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  display:flex;align-items:flex-start;gap:11px}
.cclf .cclf-aside .cclf-privacy svg{width:17px;height:17px;flex:none;margin-top:1px;fill:none;
  stroke:var(--d-gold);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cclf .cclf-aside .cclf-privacy b{display:block;font-family:var(--display);font-size:13px;
  font-weight:700;color:#fff}
.cclf .cclf-aside .cclf-privacy span span{display:block;margin-top:4px;font-size:12px;
  line-height:1.5;color:var(--d-panel-text)}
.cclf .cclf-asklaw{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:10px;
  height:52px;border:1px solid rgba(255,255,255,.35);border-radius:12px;color:#fff;
  text-decoration:none;font-family:var(--display);font-size:15.5px;font-weight:700}
.cclf .cclf-asklaw:hover{background:rgba(255,255,255,.08);color:#fff}
.cclf .cclf-asklaw svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* the panel's own version of "why we ask" belongs to the last screen only */
.cclf .cclf-stage:not(.cclf-islast) .cclf-aside > .cclf-wico,
.cclf .cclf-stage:not(.cclf-islast) .cclf-aside > #cclf-whyhead,
.cclf .cclf-stage:not(.cclf-islast) .cclf-aside > #cclf-whytext{display:none}
.cclf .cclf-wico{width:34px;height:34px;border-radius:50%;background:rgba(255,212,0,.14);
  color:var(--d-gold);display:flex;align-items:center;justify-content:center;margin:22px 0 10px;
  flex:none;align-self:flex-start}
.cclf .cclf-wico svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.cclf .cclf-aside h3{margin:0;font-family:var(--display);font-size:16px;font-weight:700;
  letter-spacing:-.015em;color:#fff}
.cclf .cclf-aside .cclf-wt{margin:7px 0 0;font-size:13.5px;line-height:1.55;
  color:var(--d-panel-text)}

/* the numbered list of what happens next, on the last screen */
/* the list keeps the shape it has; on navy it only needs its colours back */
.cclf .cclf-aside .cclf-nxt b{color:#fff}
.cclf .cclf-aside .cclf-nxt li{color:var(--d-panel-text)}
.cclf .cclf-aside .cclf-nxt .cclf-nd{color:var(--d-panel-text)}
.cclf .cclf-aside .cclf-nn{background:rgba(255,212,0,.16);color:var(--d-gold);
  border-color:transparent}
.cclf .cclf-aside .cclf-nxt li:not(:last-child)::before{background:rgba(255,255,255,.18)}
.cclf .cclf-aside .cclf-whenline{color:var(--d-gold)}

/* =========================================================================
   The row of controls under the question
   ========================================================================= */
.cclf .cclf-bar{position:sticky;bottom:0;z-index:25;background:#fff;
  border-top:1px solid var(--d-line)}
.cclf .cclf-bar .cclf-in{max-width:1320px;margin:0 auto;display:grid;
  grid-template-columns:minmax(0,1fr) var(--d-aside);padding:0}
.cclf .cclf-bar .cclf-in > *{grid-column:1}
.cclf .cclf-bar .cclf-skip{grid-row:1;justify-self:start;align-self:center;
  margin:0 0 0 32px;padding:8px 2px;border:0;background:none;cursor:pointer;
  font-size:15px;font-weight:600;color:var(--d-soft);text-decoration:underline;
  text-underline-offset:3px;white-space:nowrap}
.cclf .cclf-bar .cclf-skip:hover{color:var(--d-deep)}
.cclf .cclf-bar .cclf-next{grid-row:1;justify-self:end;align-self:center;margin:14px 52px 14px 0}
.cclf .cclf-bar .cclf-back{grid-row:1;justify-self:start;align-self:center;
  margin:14px 0 14px 32px;padding:0;border:0;background:none;cursor:pointer;
  display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;color:#3E4C5E}
.cclf .cclf-bar .cclf-back:hover{color:var(--d-deep)}
.cclf .cclf-next span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cclf .cclf-nshort{display:none}
.cclf #cclf-goinline{display:none}

/* =========================================================================
   The last screen: where to send it
   ========================================================================= */
.cclf .cclf-tf input{border-radius:12px}
.cclf .cclf-tf input:focus{border-color:var(--d-deep);box-shadow:0 0 0 3px rgba(15,37,71,.12)}
.cclf .cclf-taw textarea:focus{border-color:var(--d-deep);box-shadow:0 0 0 3px rgba(15,37,71,.12)}
/* no question screen has one of these; the result page's docbar keeps its own */
.cclf .cclf-done:not(:where(.cclf-docbar .cclf-done)){display:flex;align-items:center;gap:12px}

/* the pieces the old base carried that nothing above has said again */
.cclf .cclf-back{display:flex;align-items:center;gap:9px;border:0;background:none;padding:0;
  cursor:pointer;font-size:15px;font-weight:600;color:#C3D0E4}
.cclf .cclf-back:hover{color:#fff}
.cclf .cclf-back[disabled]{opacity:.38;cursor:default}
.cclf .cclf-nlong{display:inline}
.cclf .cclf-opts.cclf-two{grid-template-columns:repeat(2,minmax(0,1fr))}
.cclf .cclf-opts.cclf-three{grid-template-columns:repeat(3,minmax(0,1fr))}
.cclf .cclf-opt.cclf-on .cclf-oic{background:#E3E9F2;color:var(--d-deep)}
.cclf .cclf-oic.cclf-oic-gap,.cclf .cclf-opt.cclf-on .cclf-oic.cclf-oic-gap{background:none}
.cclf .cclf-mode.cclf-on .cclf-pick{border-color:var(--d-deep);background:var(--d-deep)}
.cclf .cclf-per:focus-visible{outline:2px solid var(--d-deep);outline-offset:2px}
/* The heading takes focus programmatically on every new question, so a keyboard
   user keeps their place and a screen reader is told what the board now asks.
   It is not tabbable, so it can never be reached by tabbing and never wants a
   ring - the ring belongs to the controls below it. */
.cclf .cclf-ask:focus{outline:none}
.cclf .cclf-ask:focus-visible{outline:none}
/* same for the first-range screen's label, which takes focus when that screen
   opens */
.cclf .cclf-rv1lab:focus,
.cclf .cclf-rv1lab:focus-visible{outline:none}
/* and the review's heading, which takes focus when the review opens */
.cclf .cclf-rvhead:focus,
.cclf .cclf-rvhead:focus-visible{outline:none}

/* =========================================================================
   Keyboard focus, everywhere it was missing
   =========================================================================
   A ring showed on the option cards, the pay chips, the dropdowns and the text
   fields, and nowhere else. Next, Back, Skip, the start buttons, the review's
   Change links, the date board's month-or-year toggle, the money fields and the
   sidebar call link all took focus silently, so tabbing through the evaluator
   meant losing sight of where you were every second or third stop. Set per
   surface - deep navy on the light stage, gold on the navy panels, white on the
   hero - and only for :focus-visible, so a mouse never sees them. */
@supports selector(:focus-visible){
  .cclf .cclf-next:focus-visible,
  .cclf .cclf-go:focus-visible,
  .cclf .cclf-gonow2:focus-visible,
  .cclf .cclf-pgo:focus-visible,
  .cclf .cclf-back:focus-visible,
  .cclf .cclf-skip:focus-visible,
  .cclf .cclf-mode:focus-visible,
  .cclf .cclf-rvgoto:focus-visible,
  .cclf .cclf-rvback:focus-visible{
    outline:2px solid var(--d-deep);outline-offset:2px;border-radius:4px}
  /* the input's own outline is zeroed and the bordered box is the wrapper, so
     the ring goes on the wrapper */
  .cclf .cclf-money:focus-within{outline:2px solid var(--d-deep);outline-offset:2px}
  /* the three links inside the consent sentence carry no class of their own */
  .cclf .cclf-terms a:focus-visible,
  .cclf .cclf-hint a:focus-visible,
  .cclf .cclf-why a:focus-visible{
    outline:2px solid var(--d-deep);outline-offset:2px;border-radius:3px}
  .cclf .cclf-asklaw:focus-visible,
  .cclf #cclf-rv1go:focus-visible,
  .cclf .cclf-rv1enough:focus-visible,
  .cclf .cclf-rv1goto:focus-visible,
  .cclf .cclf-rvcall:focus-visible,
  .cclf .cclf-ncta:focus-visible,
  .cclf .cclf-aside a:focus-visible,
  .cclf .cclf-rv1call a:focus-visible{
    outline:2px solid var(--d-gold);outline-offset:3px;border-radius:4px}
  .cclf #cclf-begin:focus-visible,
  .cclf .cclf-ghost:focus-visible,
  .cclf .cclf-rsclr:focus-visible{
    outline:2px solid #fff;outline-offset:3px;border-radius:4px}
  /* The landing is navy in both themes, and its role tiles - the first answer of
     the claim - took the stage's navy ring, about 1.1:1 (audit item 38). They take
     the hero's white, and keep their own rounded corners. "Start again" above sits
     on the same navy, and the first-range screen's "Tighten it" is named by its id:
     the class the gold rule used to name is not on the button. */
  .cclf .cclf-hero .cclf-opt:focus-visible{outline:2px solid #fff;outline-offset:3px}
}
/* Read, not seen: the status line that says what the side panel shows, and what is
   missing (audit items 20 and 39). */
.cclf .cclf-sr{position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
/* the two notes that are status lines are always there, and take no room empty */
.cclf .cclf-cap:empty,.cclf .cclf-dmiss:empty{margin:0;padding:0;border:0}
/* the headings a screen change puts focus on: read, not ringed */
.cclf .cclf-rhead:focus,.cclf .cclf-rhead:focus-visible,
.cclf #cclf-detail h2[tabindex="-1"]:focus,.cclf #cclf-detail h2[tabindex="-1"]:focus-visible{outline:none}
/* A field's edge and an option's mark are what show there is something to fill in
   or tick: #DDE3EB and #C3CDDB were 1.3 and 1.6 to 1 on white, and the typed
   examples in the contact fields about 1.9 (audit item 48). Edges and marks at 3:1
   or better, the examples at 4.5:1; the chosen and focused states are unchanged. */
.cclf .cclf-dfield select,.cclf select.cclf-wide,.cclf .cclf-money,.cclf .cclf-entry,
.cclf .cclf-tf input,.cclf .cclf-taw textarea{border-color:#7F8DA3}
.cclf .cclf-pick,.cclf .cclf-box{border-color:#7F8DA3}
.cclf .cclf-tf input::placeholder,.cclf .cclf-taw textarea::placeholder,
.cclf .cclf-entry::placeholder{color:#66758A}
/* With a reader's own text spacing on a phone, the wordmark ran under the
   light/dark switch (audit item 48): it may wrap rather than hold its width. */
@media (max-width:660px){
  body.cclf-page .ccl-assessment-tool--logo-link{min-width:0;flex:0 1 auto}
  body.cclf-page .ccl-assessment-tool--logo{min-width:0;flex-shrink:1}
}

/* The evaluator carries a lot of movement: a card lifts in on every new
   question, option tiles and body-map regions fade, the first-range panel grows
   in. Two older blocks cover the result page and the prep animation; neither
   covers the boards, which is where a claimant spends the whole visit. Motion
   goes, the states it carried stay - a chosen option still looks chosen and a
   lit region still lights, they simply arrive instead of travelling. Near-zero
   rather than `none`, so anything waiting on a transition still hears it end. */
@media (prefers-reduced-motion:reduce){
  .cclf *,
  .cclf *::before,
  .cclf *::after{
    animation-duration:.001ms !important;
    animation-delay:0ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    transition-delay:0ms !important;
  }
  .cclf{scroll-behavior:auto !important}
}
.cclf .cclf-money.cclf-num{padding:0 18px}
.cclf .cclf-money.cclf-num input{font-size:24px}
.cclf .cclf-money.cclf-sm{padding:0 18px}
.cclf .cclf-money.cclf-sm .cclf-post{font-size:13.5px}
.cclf .cclf-privacy{display:flex;align-items:flex-start;gap:12px;margin-top:22px;padding:15px 16px;
  border-radius:12px;background:#EDF2F8;border:1px solid #DCE5F0}
.cclf .cclf-privacy svg{width:19px;height:19px;flex:none;margin-top:1px;fill:none;
  stroke:var(--d-deep);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cclf .cclf-privacy b{display:block;font-family:var(--display);font-size:14px;font-weight:700;
  color:var(--d-ink);line-height:1.3}
.cclf .cclf-privacy span span{display:block;margin-top:4px;font-size:12.5px;line-height:1.5;
  color:var(--d-soft)}

/* =========================================================================
   Review and tighten
   ========================================================================= */
.cclf .cclf-reviewwrap{background:#fff;padding:0 0 clamp(32px,6vh,64px)}
.cclf .cclf-reviewwrap .cclf-in{max-width:1320px;margin:0 auto;padding:0 32px}
.cclf .cclf-rvtop{background:#fff;border-bottom:1px solid var(--d-line)}
.cclf .cclf-rvtop .cclf-in{display:flex;align-items:center;gap:24px;min-height:62px}
.cclf .cclf-rvback{flex:none;display:flex;align-items:center;gap:8px;border:0;background:none;
  padding:0;cursor:pointer;font-size:14.5px;font-weight:600;color:#3E4C5E}
.cclf .cclf-rvback:hover{color:var(--d-deep)}
.cclf .cclf-rvback svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.cclf .cclf-rvsep{flex:none;width:1px;height:22px;background:var(--d-chip)}
.cclf .cclf-rvstat{flex:none;font-size:14.5px;color:var(--d-soft);white-space:nowrap}
.cclf .cclf-rvprog{flex:1 1 auto;min-width:60px;height:6px;border-radius:99px;
  background:var(--d-track);overflow:hidden;display:block}
.cclf .cclf-rvprog i{display:block;height:100%;width:0;border-radius:99px;background:var(--d-gold);
  transition:width .3s ease}
.cclf .cclf-rvready{flex:none;display:inline-flex;align-items:center;gap:8px;font-size:14px;
  font-weight:600;color:var(--d-up)}
.cclf .cclf-rvready svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.cclf .cclf-reviewwrap .cclf-rvgrid{display:grid;grid-template-columns:minmax(0,1fr) 372px;
  gap:32px;align-items:stretch;padding-top:clamp(28px,4vh,44px);padding-bottom:8px}
.cclf .cclf-rvmain{display:flex;flex-direction:column;min-width:0}
.cclf .cclf-rveye{margin:0}
.cclf .cclf-rvhead{margin:12px 0 0;font-family:var(--display);font-size:clamp(25px,2.7vw,34px);
  font-weight:800;line-height:1.12;letter-spacing:-.026em;color:var(--d-ink);max-width:24ch}
.cclf .cclf-rvlead{margin:9px 0 0;font-size:16px;line-height:1.5;color:var(--d-soft);max-width:66ch}
.cclf .cclf-rvtable{margin-top:20px;border:1px solid var(--d-line);border-radius:16px;
  overflow:hidden;background:#fff}
.cclf .cclf-rvhead2,.cclf .cclf-rvrow{display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1.1fr) minmax(0,1.3fr) 76px;
  gap:16px;align-items:center;padding:13px 20px}
.cclf .cclf-rvhead2{background:#F4F6FA;padding:11px 20px;font-size:12.5px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--d-soft)}
.cclf .cclf-rvrow{border-top:1px solid var(--d-line-2);font-size:15px}
.cclf .cclf-rvrow.cclf-rvest{background:var(--d-warm)}
.cclf .cclf-rvrow.cclf-rvmiss{background:#FBFCFE}
.cclf .cclf-rvq{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0;
  font-size:14.5px;color:var(--d-quiet)}
.cclf .cclf-rvflag{flex:none;height:20px;padding:0 7px;border-radius:5px;background:var(--d-gold);
  display:inline-flex;align-items:center;font-size:10.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--d-gold-ink)}
.cclf .cclf-rva{min-width:0;font-size:15.5px;font-weight:600;color:var(--d-ink);
  overflow-wrap:anywhere}
.cclf .cclf-rva i{font-style:normal;font-weight:500;color:var(--d-quiet)}
.cclf .cclf-rve{min-width:0}
.cclf .cclf-rvchip{display:inline-block;padding:4px 10px;border-radius:7px;background:#EEF1F6;
  font-family:var(--display);font-size:13px;font-weight:700;color:var(--d-soft)}
.cclf .cclf-rvchip.cclf-rvup{background:var(--d-up-bg);color:var(--d-up)}
.cclf .cclf-rvchip.cclf-rvdown{background:var(--d-down-bg);color:var(--d-down)}
.cclf .cclf-rvchip.cclf-rvopen{background:var(--d-warm-bg);color:var(--d-gold-quiet)}
/* muted, but read: #8794A5 was 3.1:1 on the white row, under the 4.5:1 that body
   text needs; this is 5.4:1 and still the quietest thing in the row */
.cclf .cclf-rvchip.cclf-rvflat{background:none;padding:0;font-family:var(--sans);font-size:14px;
  font-weight:500;color:#5E6B7D}
.cclf .cclf-rvgoto{justify-self:end;border:0;background:none;cursor:pointer;font-size:14px;
  font-weight:600;color:var(--d-deep);text-decoration:underline;text-underline-offset:3px}
.cclf .cclf-rvgoto:hover{color:var(--d-deep-hover)}
.cclf .cclf-rvfoot{margin-top:auto;padding-top:22px;display:flex;align-items:center;gap:20px;
  flex-wrap:wrap}
.cclf .cclf-rvnote{font-size:14.5px;color:var(--d-soft)}
.cclf .cclf-rvfoot .cclf-go{margin-left:auto}
.cclf .cclf-rvrail{background:var(--d-panel);color:#fff;border-radius:18px;padding:34px 30px;
  display:flex;flex-direction:column;align-self:start;position:sticky;top:78px}
.cclf .cclf-rvrlab{margin:0;font-family:var(--display);font-size:11.5px;font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;color:var(--d-gold)}
.cclf .cclf-rvrfig{margin:12px 0 0;font-family:var(--display);font-size:clamp(25px,2.3vw,34px);
  font-weight:800;line-height:1.05;letter-spacing:-.02em;color:#fff}
.cclf .cclf-rvrbar{display:block;height:10px;margin-top:14px;border-radius:99px;
  background:var(--d-panel-rule);overflow:hidden}
.cclf .cclf-rvrbar i{display:block;height:100%;border-radius:99px;background:var(--d-gold)}
.cclf .cclf-rvconf{margin:22px 0 0;display:flex;align-items:center;gap:12px;font-size:14.5px;
  font-weight:600;color:#fff}
.cclf .cclf-rvconf i{flex:none;width:24px;height:6px;border-radius:99px;
  background:var(--d-panel-off);display:block}
.cclf .cclf-rvconf i.cclf-rvon{background:var(--d-gold)}
.cclf .cclf-rvconf b{font-weight:600}
.cclf .cclf-rvnote2{margin-top:20px;padding:16px 18px;border-radius:12px;
  background:rgba(255,212,0,.1);border:1px solid rgba(255,212,0,.28)}
.cclf .cclf-rvnote2 b{display:block;font-size:14.5px;font-weight:600;color:var(--d-gold)}
.cclf .cclf-rvnote2 span{display:block;margin-top:6px;font-size:13.5px;line-height:1.45;
  color:var(--d-panel-bright)}
.cclf .cclf-rvgrow{flex:1 1 auto;min-height:22px}
.cclf .cclf-rvclocks{display:flex;flex-direction:column;gap:9px;margin-bottom:14px}
.cclf .cclf-rvclock{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-size:14px;color:var(--d-panel-soft)}
.cclf .cclf-rvclock b{font-family:var(--display);font-size:14.5px;font-weight:700;
  color:var(--d-gold)}
.cclf .cclf-rvclock.cclf-rvtight b{color:#FFB37A}
.cclf .cclf-rvcall{display:flex;align-items:center;justify-content:center;gap:10px;height:50px;
  border:1px solid rgba(255,255,255,.35);border-radius:12px;color:#fff;text-decoration:none;
  font-family:var(--display);font-size:15.5px;font-weight:700}
.cclf .cclf-rvcall:hover{background:rgba(255,255,255,.08);color:#fff}

/* =========================================================================
   Narrower than a desk
   ========================================================================= */
@media (max-width:1380px){
  .cclf{--d-aside:372px}
  .cclf .cclf-qcol{padding:36px 36px 26px 24px}
  .cclf .cclf-bar .cclf-next{margin-right:36px}
  .cclf .cclf-bar .cclf-skip{margin-left:24px}
}
/* On a desk the row runs the width of the page, as the strip above it does:
   Back in the left corner, on the question's left edge, and the two ways on -
   skip and Next - together on the right, Next ending where the strip's own
   control ends above it. The strip keeps its Back; this one is where the hand
   already is once an answer is picked. Each is placed on the grid rather than
   pushed by a margin, so the bigger targets a touch screen gets further down
   (negative margins) cannot move them. The contact step has no skip or Next,
   and its one Back comes down to the same corner. At 1060px and under the row
   is as it was, with Back in the strip only. */
@media (min-width:1061px){
  .cclf .cclf-bar .cclf-in{grid-template-columns:auto minmax(0,1fr) auto auto;
    column-gap:24px;padding:0 32px}
  .cclf .cclf-bar .cclf-in > *{grid-row:1}
  .cclf .cclf-bar .cclf-back{grid-column:1;margin:14px 0}
  .cclf .cclf-bar .cclf-skip{grid-column:3;justify-self:end;margin:0}
  .cclf .cclf-bar .cclf-next{grid-column:4;margin:14px 0}
}
@media (min-width:1061px) and (max-width:1380px){
  .cclf .cclf-bar .cclf-in{padding-left:24px}
}
@media (max-width:1060px){
  .cclf .cclf-bar .cclf-barback{display:none}
}
@media (max-width:1060px){
  /* The bar was position:sticky, and sticky here does nothing: the site puts
     overflow-x:hidden on <body>, which computes overflow-y to auto and makes the
     body a scroll container, so the bar's scrollport is the body box rather than
     the window and it reverts to an ordinary block at the end of the page. On a
     multi-select board at 390x844 that put Back, Skip and Next 450px below the
     fold - and a multi-select board is the one kind that deliberately has no
     inline Next, on the reasoning that the bar stays on screen. Fixed is immune
     to what an ancestor's overflow does, so it is fixed from the width where the
     column is single and a board can run past the window. The stage pays for the
     space it takes, plus whatever the handset reserves at the bottom. */
  .cclf .cclf-bar{position:fixed;left:0;right:0;bottom:0;
    padding-bottom:env(safe-area-inset-bottom,0px)}
  .cclf .cclf-stage{padding-bottom:96px}
}
/* the review goes to one column a step wider than the questions do; the bar is
   fixed only where the questions do (audit item 49: between 1061 and 1080 the bar
   was fixed under the desk layout, leaving a strip under the panel) */
@media (max-width:1080px){
  .cclf .cclf-reviewwrap .cclf-rvgrid{grid-template-columns:minmax(0,1fr);gap:24px}
  .cclf .cclf-rvrail{position:static;order:-1;padding:26px 22px}
  .cclf .cclf-rvgrow{display:none}
  .cclf .cclf-rvclocks{margin-top:20px}
}
@media (max-width:768px){
  /* The site's floating call switch (formstyle.css) sits at bottom:68px, which
     clears the site's own ~60px bottom toolbar. During the question flow that
     toolbar is not shown and the funnel's fixed action bar is - 73px tall - so
     the switch was sitting on the bar's top edge, and over the last row of
     whatever list was scrolling beneath it. While the flow is up it floats
     clear of the bar; on the landing and the result, where body.cclf-on is off,
     it goes back to where the site puts it. Only its position changes - the
     call feature is the site's. The breakpoint is the site's own: above 768px
     the switch is display:none.

     !important because the switch is not placed by a stylesheet: the theme's
     main.js measures whichever site bar is active and writes style.bottom inline
     (bar height + 8px, falling back to 60 + 8 when no site bar is showing, which
     is the case during the flow). An inline style beats any rule that is not
     important, so without it this line did nothing on the live site. */
  body.cclf-on .ccl-bar-switch{bottom:calc(84px + env(safe-area-inset-bottom,0px)) !important}
  /* On Contact, dock Call inside the unused right of the fixed action bar. */
  body.cclf-on:has(.cclf-stage.cclf-islast:not([hidden])) .ccl-bar-switch{bottom:calc(17px + env(safe-area-inset-bottom,0px)) !important}
}
@media (max-width:1060px){
  .cclf .cclf-stage .cclf-in{grid-template-columns:minmax(0,1fr)}
  .cclf .cclf-qcol{padding:30px 24px 26px}
  .cclf .cclf-aside{margin:0;padding:26px 24px 28px}

  /* The panel is a column beside the question on a desktop. Stacked under it on
     a phone it became a 300px slab between the answers and the action, so the
     person had to scroll past it to find Next - which is not what the design
     draws. The design lifts the range and the clocks into a band above the
     question and ends the question with what to do next. That is what this
     does: the panel's box disappears, the rail moves to the top with the navy
     it used to inherit, and the reassurance blocks the design does not carry on
     a phone step aside. The last screen keeps its stacked panel. */
  .cclf .cclf-stage:not(.cclf-islast) .cclf-in{display:flex;flex-direction:column}
  .cclf .cclf-stage:not(.cclf-islast) .cclf-aside{display:contents}
  .cclf .cclf-stage:not(.cclf-islast) .cclf-qrail{order:-1;margin:0;
    background:var(--d-panel);color:#fff;padding:22px 24px 24px}
  .cclf .cclf-stage:not(.cclf-islast) .cclf-qcol{order:0}
  .cclf .cclf-stage:not(.cclf-islast) .cclf-aside > .cclf-privacy,
  .cclf .cclf-stage:not(.cclf-islast) .cclf-aside > .cclf-asklaw{display:none}
  /* and it carries only what the strip above does not: the range and the
     deadlines. The counter, the meter and the "x of y answered" line are the
     same numbers twice on a screen this narrow. */
  .cclf .cclf-stage:not(.cclf-islast) .cclf-qrail > #cclf-qraileye,
  .cclf .cclf-stage:not(.cclf-islast) .cclf-qrail > #cclf-qrailmeter,
  .cclf .cclf-stage:not(.cclf-islast) .cclf-qrail > #cclf-qrailnote{display:none}
  .cclf .cclf-stage:not(.cclf-islast) .cclf-qrail.cclf-qrailbare{display:none}
  .cclf .cclf-stage:not(.cclf-islast) .cclf-qrailcbar{display:none}
  .cclf .cclf-stage:not(.cclf-islast) .cclf-qrailclock{margin-top:0}
  .cclf .cclf-stage:not(.cclf-islast) .cclf-qrailclocks{margin-top:14px;gap:6px}
  .cclf .cclf-stage:not(.cclf-islast) #cclf-qbnote{display:none}
  .cclf .cclf-stage:not(.cclf-islast) .cclf-qband{margin:0 0 14px;padding:0 0 14px}
  /* One row. Back lives in the strip at the top on every screen but the last,
     and the last screen has no skip, so the three never need more than one line
     between them - and two rows of 44px tap targets was a 129px bar eating a
     sixth of the screen. */
  .cclf .cclf-bar .cclf-in{grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:"back skip next";row-gap:0;column-gap:10px;padding:8px 18px;
    align-items:center}
  .cclf .cclf-bar .cclf-skip{grid-area:skip;justify-self:start;margin:0;font-size:14px}
  .cclf .cclf-bar .cclf-back{grid-area:back;justify-self:start;margin:0}
  .cclf .cclf-bar .cclf-next{grid-area:next;justify-self:end;margin:0}
}
@media (max-width:980px){
  .cclf .cclf-prog .cclf-in{padding:0 20px}
  .cclf .cclf-track{display:none}
  .cclf #cclf-proginner{gap:14px;min-height:0}
  .cclf .cclf-psep,.cclf .cclf-gonow2{display:none}
  .cclf .cclf-pmini{display:grid;flex:1 1 auto;min-width:0}
  /* The action belongs under the question, not behind the panel: on a phone the
     column reads answers, then the note, then what to do next. The bar keeps its
     own Next as well, because it is the one that stays on screen while a long
     list of options is being worked through. */
  .cclf #cclf-goinline:not([hidden]){display:block;margin-top:22px}
  .cclf #cclf-gonow{width:100%;height:56px;font-size:16px;white-space:nowrap;
    padding:0 18px}
  .cclf #cclf-gonow span{overflow:hidden;text-overflow:ellipsis}
  /* The bar keeps its own Next on these screens too (audit item 30): with the
     note and the range band above it, the Next under the question was below the
     fold, and the bar offered only "skip", which clears the answer. */
}
@media (max-width:900px){
  .cclf .cclf-stage .cclf-opts.cclf-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cclf .cclf-opts.cclf-three{grid-template-columns:repeat(2,minmax(0,1fr))}
  
  .cclf .cclf-prefs{grid-template-columns:minmax(0,1fr);gap:16px}
}
@media (max-width:860px){
  .cclf .cclf-reviewwrap .cclf-in{padding:0 18px}
  .cclf .cclf-rvtop .cclf-in{gap:14px}
  .cclf .cclf-rvstat{font-size:13px}
  .cclf .cclf-rvrail{padding:20px 18px;border-radius:14px}
  .cclf .cclf-rvrfig{font-size:27px;margin-top:8px}
  .cclf .cclf-rvrbar{height:8px;margin-top:11px}
  .cclf .cclf-rvconf{margin-top:14px;font-size:13.5px;gap:10px}
  .cclf .cclf-rvconf i{width:18px;height:5px}
  .cclf .cclf-rvnote2{margin-top:14px;padding:12px 14px}
  .cclf .cclf-rvnote2 b{font-size:13.5px}
  .cclf .cclf-rvnote2 span{margin-top:4px;font-size:12.5px}
  .cclf .cclf-rvclocks{margin-top:14px;margin-bottom:12px;gap:7px}
  .cclf .cclf-rvclock{font-size:13px}
  .cclf .cclf-rvcall{height:46px;font-size:14.5px}
  .cclf .cclf-rvhead2{display:none}
  .cclf .cclf-rvrow{grid-template-columns:minmax(0,1fr) auto;gap:5px 14px;padding:14px 16px}
  .cclf .cclf-rvq{grid-column:1;grid-row:1;font-size:13px}
  .cclf .cclf-rvgoto{grid-column:2;grid-row:1;align-self:start}
  .cclf .cclf-rva{grid-column:1/3;grid-row:2}
  .cclf .cclf-rve{grid-column:1/3;grid-row:3}
  .cclf .cclf-rvfoot{flex-direction:column;align-items:stretch;gap:12px}
  .cclf .cclf-rvnote{order:2;text-align:center}
  .cclf .cclf-rvfoot .cclf-go{margin-left:0;width:100%}
}
/* =========================================================================
   Touch targets, hung off the pointer rather than off the width
   =========================================================================
   The 660px block below gives these controls 44px because a phone is a thumb.
   A tablet is a thumb too, and between 661 and 1024px it gets the desktop
   layout, so the review's Change links stayed 23px and the pay chips 38px on
   every iPad. The same six rules are repeated here against `pointer: coarse`,
   which is the thing that actually matters; the layout changes stay where they
   are, because a 900px tablet wants the desktop layout and only the bigger
   targets. A mouse sees no change at all - these are text links by design and
   at a mouse that is the right size for them. */
@media (pointer: coarse){
  .cclf #cclf-proginner .cclf-back{min-height:44px;padding:0 8px;margin:0 -8px}
  .cclf .cclf-bar .cclf-back{min-height:44px;padding:0 8px;margin:0 -8px}
  .cclf .cclf-bar .cclf-skip{min-height:44px;display:flex;align-items:center;
    padding:0 10px;margin:0 -10px}
  .cclf .cclf-rvtop .cclf-rvback{min-height:44px;padding:0 8px;margin:0 -8px}
  /* 44px of thumb without 44px of row: the negative margin lets the target
     overhang the line it sits on rather than setting the row's height. */
  .cclf .cclf-rvgoto{min-height:44px;display:inline-flex;align-items:center;
    padding:0 8px;margin:-12px -8px}
  .cclf .cclf-periods.cclf-payper .cclf-per{height:44px}
}

@media (max-width:660px){
  .cclf .cclf-hero .cclf-in{padding:32px 18px 40px}
  .cclf .cclf-resume{flex-wrap:wrap;gap:11px}
  .cclf .cclf-resume .cclf-rstx{flex:1 1 100%;order:2}
  .cclf .cclf-rsclr{order:3;align-self:flex-start}
  .cclf .cclf-hbtns{flex-direction:column;align-items:stretch}
  .cclf .cclf-hero .cclf-go,.cclf .cclf-ghost{width:100%}
  /* The same first question is drawn on the landing as a row, so it is drawn as
     a row here: a claimant who scrolls past the opening screen and presses
     Start was getting the desktop card treatment of the question they had just
     seen as a list. MobileQuestion draws rows too. */
  .cclf .cclf-stage .cclf-opts.cclf-tiles{grid-template-columns:minmax(0,1fr);gap:9px}
  .cclf .cclf-stage .cclf-opts.cclf-tiles .cclf-opt,
  .cclf .cclf-stage .cclf-opts.cclf-tiles .cclf-opt:not(:has(.cclf-otx span)){min-height:0;
    padding:15px 16px;flex-direction:row;align-items:center;gap:12px}
  .cclf .cclf-stage .cclf-opts.cclf-tiles .cclf-opt.cclf-on{padding:14px 15px}
  .cclf .cclf-stage .cclf-opts.cclf-tiles .cclf-oic{width:38px;height:38px;border-radius:10px}
  .cclf .cclf-stage .cclf-opts.cclf-tiles .cclf-oic svg{width:20px;height:20px}
  .cclf .cclf-stage .cclf-opts.cclf-tiles .cclf-onum{display:none}
  .cclf .cclf-stage .cclf-opts.cclf-tiles .cclf-otx{margin-top:0;padding-top:0;flex:1 1 auto;
    min-width:0;font-family:var(--sans);font-size:16.5px;font-weight:600;
    letter-spacing:normal;line-height:1.3}
  .cclf .cclf-stage .cclf-opts.cclf-tiles .cclf-otx span{margin-top:3px;font-size:13.5px}
  .cclf .cclf-stage .cclf-opts.cclf-tiles .cclf-ochoose{flex:none;margin-top:0;font-size:0;
    gap:0;align-self:center}
  .cclf .cclf-stage .cclf-opts.cclf-tiles .cclf-ochoose svg{width:16px;height:16px}
  .cclf .cclf-stage .cclf-opts.cclf-tiles .cclf-opt.cclf-on .cclf-ochoose{display:none}
  .cclf .cclf-stage .cclf-opts.cclf-tiles .cclf-opt.cclf-on .cclf-tick{position:static;
    order:9;flex:none;width:24px;height:24px;margin:0;box-shadow:none}
  /* "Next: How long you worked there" does not fit a phone, and the button was
     overflowing the screen to the left rather than shortening. It has always
     carried a short label for exactly this. */
  .cclf .cclf-nlong{display:none}
  .cclf .cclf-nshort{display:inline}
  .cclf .cclf-bar .cclf-next{max-width:100%;min-width:0}

  /* Thumbs, not cursors. Back was a 22px target in the strip, the review's
     Change links were 23px and there are thirty of them, and the pay chips were
     38. Each of these had a more specific rule holding it small, so the fix has
     to be written against the same selector. */
  .cclf #cclf-proginner .cclf-back{min-height:44px;padding:0 8px;margin:0 -8px}
  .cclf .cclf-bar .cclf-back{min-height:44px;padding:0 8px;margin:0 -8px}
  .cclf .cclf-rvtop .cclf-rvback{min-height:44px;padding:0 8px;margin:0 -8px}
  .cclf .cclf-bar .cclf-skip{min-height:44px;display:flex;align-items:center;
    padding:0 10px;margin:0 -10px}
  /* 44px of thumb without 44px of row: the negative margin lets the target
     overhang the line it sits on rather than setting the row's height. */
  .cclf .cclf-rvgoto{min-height:44px;display:inline-flex;align-items:center;
    padding:0 8px;margin:-12px -8px}
  .cclf .cclf-periods.cclf-payper .cclf-per{height:44px}
  /* the field is 66px tall and the input inside it was 30: tapping the padding
     did nothing at all */
  .cclf .cclf-money{padding:0 16px}
  .cclf .cclf-money input{align-self:stretch;height:auto}
  .cclf .cclf-tf input{min-height:52px}
  .cclf .cclf-onum{top:18px;right:18px;font-size:22px}
  /* One card per row. The column count is set by a second class on the same
     element - cclf-two, cclf-three, cclf-multi - which outweighed the plain
     .cclf-opts override that used to sit here, so five options stayed in two
     columns on a phone: every label broke mid-word and the cards grew to 440px.
     These have to match that specificity to win. */
  .cclf .cclf-opts,
  .cclf .cclf-opts.cclf-two,
  .cclf .cclf-opts.cclf-three,
  .cclf .cclf-opts.cclf-multi{grid-template-columns:minmax(0,1fr)}
  /* and the card gives its words the room: the icon and the tick together were
     taking a third of a 342px row, which broke two-word labels in half. */
  .cclf .cclf-opt{padding:15px 16px;gap:12px}
  .cclf .cclf-opt.cclf-on{padding:14px 15px}
  .cclf .cclf-oic{width:38px;height:38px;border-radius:10px}
  .cclf .cclf-oic svg{width:20px;height:20px}
  .cclf .cclf-otx{font-size:16.5px;line-height:1.3}
  .cclf .cclf-otx span{margin-top:3px;font-size:13.5px}
  .cclf .cclf-pick{width:24px;height:24px}
  .cclf .cclf-modes{grid-template-columns:minmax(0,1fr)}
  .cclf .cclf-periods.cclf-payper{align-self:stretch;width:100%}
  .cclf .cclf-periods.cclf-payper .cclf-per{flex:1 1 auto;padding:0 12px;font-size:13.5px}
  .cclf .cclf-money,.cclf .cclf-money.cclf-sm{height:66px}
  .cclf .cclf-fld.cclf-amt,.cclf .cclf-fld.cclf-units{flex:1 1 100%}
  .cclf .cclf-why{margin-top:18px;padding:14px 15px;gap:10px}
  .cclf .cclf-why > span{font-size:13.5px}
  /* Day, month and year belong on one line; they were wrapping the year onto a
     row of its own because each box was holding a 96px floor. */
  .cclf .cclf-dparts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  /* each part keeps a gutter for its arrow, and the months are named short here
     (the engine writes "Nov"), so "November" is no longer cut to "Novemb" with the
     arrow under it (audit item 41) */
  .cclf .cclf-dfield select{height:58px;min-width:0;font-size:17px;padding:0 28px 0 10px;
    background-position:right 8px center;background-size:16px}
  /* "Day · optional" is the one label that matters most here - a first field
     that looks required and is not is how someone fills in a day and wonders
     why the button will not open - so it wraps rather than truncating. */
  .cclf .cclf-dfield label{font-size:12px;line-height:1.25;min-height:2.5em}
  /* the hint under it is a hint, not a result: it was reading as a green
     confirmation of something the claimant had not done yet */
  .cclf .cclf-dnote{font-weight:400;font-size:13.5px;color:var(--d-mid);align-items:flex-start}
  .cclf .cclf-dnote svg{stroke-width:1.8;margin-top:2px}
  /* six periods make two tidy rows of three, not a row of four and a gap */
  .cclf .cclf-periods.cclf-payper{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px}
  .cclf .cclf-periods.cclf-payper .cclf-per{padding:0 6px;width:100%}
  /* one line, because the sub-line above already says choose all that apply */
  .cclf .cclf-mstrip span:nth-child(2){display:none}
  .cclf .cclf-mstrip span:nth-child(3){padding-left:14px;border-left:1px solid var(--d-line)}

  /* ---- the opening screen on a phone --------------------------------------
     MobileStart draws the same landing at 390 as a single column that fits one
     screen: a 41px headline, the two buttons full width, and the three answers
     as compact rows with a chevron rather than the 230px cards the desktop
     uses. Ours was still running the desktop treatment - three tiles 105px
     wide with the labels breaking mid-word - because the phone override that
     collapses the tile grid only ever named the question stage. */
  .cclf .cclf-hero .cclf-in{padding:22px 20px 18px}
  .cclf .cclf-hero .cclf-eye{gap:9px;font-size:10px;letter-spacing:.18em}
  .cclf .cclf-hero .cclf-eye::before,
  .cclf .cclf-hero .cclf-eye::after{width:18px;height:2.5px}
  .cclf .cclf-hero h1{margin-top:14px;font-size:clamp(30px,10.5vw,41px);line-height:.99;
    letter-spacing:-.03em;max-width:none}
  .cclf .cclf-hero .cclf-lede{margin-top:12px;font-size:15.5px;line-height:1.5}
  .cclf .cclf-hbtns{width:100%;gap:10px;margin-top:20px}
  .cclf .cclf-hero .cclf-go{height:58px;padding:0 18px;font-size:18px;border-radius:12px}
  .cclf .cclf-hero .cclf-ghost{height:52px;font-size:16.5px;border-radius:12px;
    border-color:rgba(255,255,255,.35)}
  /* four claims wrap to three rows once the dots are between them */
  .cclf .cclf-mins{gap:7px 12px;margin-top:14px;font-size:13px}
  .cclf .cclf-mins li + li::before{display:none}
  .cclf .cclf-mins i{width:13px;height:13px}
  .cclf .cclf-mins i::after{left:2px;top:3px;width:7px;height:3.5px}
  .cclf .cclf-minsnote{margin-top:8px;font-size:12px}

  /* question one: the number, the question, and the rule running out to the
     edge. The caption belongs to a wide screen - at 390 it takes the question
     down to four lines. */
  .cclf .cclf-q1{margin-top:20px;padding-top:0;border-top:0}
  .cclf .cclf-q1lab{gap:12px;margin-bottom:12px;font-size:15.5px;letter-spacing:-.01em}
  .cclf .cclf-q1n{width:26px;height:26px;font-size:12.5px}
  .cclf .cclf-q1cap{display:none}

  /* the closing line: the long version repeats the Call button sitting right
     above it, and the two halves together do not fit 350px */
  .cclf .cclf-hflong{display:none}
  .cclf .cclf-hfshort{display:inline}
  .cclf .cclf-hfoot{margin-top:18px;padding-top:12px;font-size:12px;gap:12px}
  .cclf .cclf-hfoot .cclf-hfr{font-size:12px}
  /* These are inline links inside a sentence, so the 44px rule does not apply to
     them - but a 15px-tall target for the costs disclosure on a phone is still a
     miss waiting to happen. Vertical padding on an inline box does not change the
     line height and does grow what a thumb can land on; the paragraph opens to
     1.85 so the padded boxes on consecutive lines cannot touch. Phone only: a
     mouse does not need it, and a link that wraps mid-sentence on a wide screen
     would grow a box the size of the line. */
  .cclf .cclf-terms{line-height:1.85}
  .cclf .cclf-terms a{padding:6px 0;margin:-6px 0}

  /* MobileReview packs a row into two lines - the question small above the
     answer, the way out on the right - and lets the chip take the place of the
     way out where there is nothing to change. Ours was running to three lines
     and 245px a row, which is 34 rows of scrolling before the button. The flat
     chip goes: "Not moving this estimate" is on most rows and is the one thing
     on them that does not need saying twice. */
  .cclf .cclf-rvrow{gap:2px 12px;padding:12px 14px;font-size:14px}
  .cclf .cclf-rvq{grid-column:1;grid-row:1;font-size:12px;line-height:1.35;gap:7px}
  .cclf .cclf-rvgoto{grid-column:2;grid-row:1;align-self:start;font-size:13px}
  .cclf .cclf-rva{grid-column:1;grid-row:2;font-size:14.5px;line-height:1.35}
  /* the chip sits under the way out rather than on a third line of its own */
  .cclf .cclf-rve{grid-column:2;grid-row:2;justify-self:end;align-self:center;
    text-align:right}
  .cclf .cclf-rve:empty,
  .cclf .cclf-rve:has(> .cclf-rvflat){display:none}
  .cclf .cclf-rvchip{padding:3px 8px;font-size:11.5px}
  .cclf .cclf-rvflag{font-size:9.5px;padding:0 6px;height:17px}
}
/* The opening screen's three answers, below the width where a 230px card still
   has room for its words. At 768 the three cards were 221px wide with 52px of
   padding in them, so every two-word label broke; MobileStart draws them as
   rows, and a row works the whole way down from here. This sits after the 660
   block so the row treatment is the last word at every width it covers. */
@media (max-width:860px){
  .cclf .cclf-hero .cclf-opts.cclf-tiles{grid-template-columns:minmax(0,1fr);gap:9px}
  .cclf .cclf-hero .cclf-opt,
  .cclf .cclf-hero .cclf-opt:not(:has(.cclf-otx span)){min-height:0;padding:13px 15px;
    border-radius:13px;flex-direction:row;align-items:center;gap:13px;
    border-color:rgba(255,255,255,.2)}
  .cclf .cclf-hero .cclf-opt.cclf-on{padding:13px 15px}
  .cclf .cclf-hero .cclf-opt .cclf-oic{width:36px;height:36px;border-radius:10px}
  .cclf .cclf-hero .cclf-opt .cclf-oic svg{width:18px;height:18px}
  .cclf .cclf-hero .cclf-onum{display:none}
  .cclf .cclf-hero .cclf-otx{margin-top:0;padding-top:0;flex:1 1 auto;min-width:0;
    font-family:var(--sans);font-size:15.5px;font-weight:600;letter-spacing:normal;
    line-height:1.3}
  .cclf .cclf-hero .cclf-otx span{margin-top:2px;font-size:12.5px;line-height:1.35}
  /* Choose reads as a label on a card; on a row it is the chevron at the end */
  .cclf .cclf-hero .cclf-ochoose{flex:none;margin-top:0;font-size:0;gap:0;align-self:center}
  .cclf .cclf-hero .cclf-ochoose svg{width:16px;height:16px;stroke-width:2}
  .cclf .cclf-hero .cclf-opt.cclf-on .cclf-ochoose{display:none}
  .cclf .cclf-hero .cclf-opt.cclf-on .cclf-tick{position:static;order:9;flex:none;
    width:24px;height:24px;margin:0;box-shadow:none}
}

/* =========================================================================
   Q-Reveal / MobileReveal - the first time there is a number
   =========================================================================
   The boards give this its own screen rather than a panel in the rail, and the
   reason is in the copy: it is the only moment where the tool stops and says
   what it has got and what is still missing. It replaces the stage the way the
   review does, and it happens once. */
.cclf .cclf-rv1{background:var(--d-brand);color:#fff;
  min-height:calc(100vh - 64px);display:flex;
  font-family:var(--sans);
  --sans:"Inter Tight","Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --display:"Archivo","Inter Tight",system-ui,-apple-system,sans-serif}
.cclf .cclf-rv1[hidden]{display:none}
.cclf .cclf-rv1 .cclf-in{max-width:1248px;margin:0 auto;width:100%;
  padding:clamp(30px,5vh,52px) 32px clamp(20px,3vh,26px);
  display:flex;flex-direction:column;align-items:center;text-align:center}
/* the foot sits on the floor of the screen, as the board draws it */
.cclf .cclf-rv1 > .cclf-in > *:not(.cclf-rv1foot){flex:none}
.cclf .cclf-rv1pill{display:inline-flex;align-items:center;gap:9px;height:30px;padding:0 14px;
  border-radius:99px;background:rgba(255,212,0,.14);font-family:var(--display);font-size:11.5px;
  font-weight:600;letter-spacing:.15em;color:var(--d-gold)}
.cclf .cclf-rv1pill svg{width:14px;height:14px;flex:none;fill:none;stroke:var(--d-gold);
  stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.cclf .cclf-rv1pill b{font-weight:600}
.cclf .cclf-rv1lab{margin:20px 0 0;font-family:var(--display);font-size:30px;font-weight:700;
  letter-spacing:-.015em;color:#A9BBD4}
.cclf .cclf-rv1fig{margin:14px 0 0;font-family:var(--display);
  font-size:clamp(38px,7.2vw,86px);font-weight:800;line-height:1;letter-spacing:-.035em;color:#fff}
.cclf .cclf-rv1scale{margin-top:34px;width:100%;max-width:940px}
/* the track is the whole scale and the gold is where this claim sits on it, so
   the fill is offset by margin rather than pinned to the left. An absolutely
   positioned fill ignores that margin. */
.cclf .cclf-rv1bar{display:block;height:18px;border-radius:99px;
  background:#14325C;overflow:hidden}
.cclf .cclf-rv1bar i{display:block;height:18px;border-radius:99px;
  background:var(--d-gold);margin-left:0;width:0}
.cclf .cclf-rv1ends{margin-top:12px;display:flex;justify-content:space-between;gap:16px;
  font-size:13.5px;color:#93A9C8;text-align:left}
.cclf .cclf-rv1ends span:last-child{text-align:right}
.cclf .cclf-rv1conf{margin:30px 0 0;display:flex;align-items:center;gap:16px;
  font-size:15.5px;color:#fff}
.cclf .cclf-rv1conf i{flex:none;width:42px;height:7px;border-radius:99px;
  background:#26456F}
.cclf .cclf-rv1conf i.cclf-rvon{background:var(--d-gold)}
.cclf .cclf-rv1conf b{font-weight:600}
.cclf .cclf-rv1why{margin:16px 0 0;font-size:17px;line-height:1.55;color:#A9BBD4;max-width:660px}
.cclf .cclf-rv1btns{margin-top:34px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  justify-content:center}
.cclf .cclf-rv1 .cclf-go{height:62px;padding:0 34px;font-size:19px;border-radius:12px}
.cclf .cclf-rv1enough{display:inline-flex;align-items:center;justify-content:center;height:62px;
  padding:0 28px;border:1px solid rgba(255,255,255,.35);border-radius:12px;background:none;
  font:inherit;font-family:var(--display);font-size:16.5px;font-weight:700;color:#fff;cursor:pointer}
.cclf .cclf-rv1enough:hover{background:rgba(255,255,255,.1)}
.cclf .cclf-rv1call{margin:22px 0 0;font-size:15px;color:#A9BBD4}
.cclf .cclf-rv1call a{color:var(--d-gold);font-weight:600;text-decoration:none}
.cclf .cclf-rv1call a:hover{color:#FFE566}
/* what the figure was built from, and a way back into any of it */
.cclf .cclf-rv1foot{margin-top:auto;width:100%;display:flex;align-items:center;gap:14px;
  flex-wrap:wrap;padding:20px 0 0;border-top:1px solid rgba(255,255,255,.10);
  text-align:left}
.cclf .cclf-rv1flab{flex:none;font-size:13.5px;color:#7C90AC}
.cclf .cclf-rv1chips{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex:1 1 auto}
.cclf .cclf-rv1chip{display:inline-flex;align-items:center;gap:10px;height:36px;padding:0 14px;
  border-radius:99px;background:rgba(255,255,255,.06);font-size:14px;color:#D7E2F1}
.cclf .cclf-rv1goto{background:none;border:0;padding:0;font:inherit;font-size:13px;
  font-weight:600;color:var(--d-gold);cursor:pointer;text-decoration:underline;
  text-underline-offset:3px}
.cclf .cclf-rv1goto:hover{color:#FFE566}
.cclf .cclf-rv1fr{flex:none;margin-left:auto;font-size:13px;color:#7C90AC}

@media (max-width:860px){
  .cclf .cclf-rv1 .cclf-in{padding:26px 20px 18px}
  .cclf .cclf-rv1lab{margin-top:18px;font-size:20px}
  .cclf .cclf-rv1fig{margin-top:10px;font-size:clamp(30px,10.4vw,40px);line-height:1.04;
    letter-spacing:-.03em}
  .cclf .cclf-rv1scale{margin-top:22px}
  .cclf .cclf-rv1{min-height:calc(100vh - 54px)}
  .cclf .cclf-rv1bar,.cclf .cclf-rv1bar i{height:14px}
  .cclf .cclf-rv1ends{margin-top:9px;font-size:11.5px;gap:10px}
  .cclf .cclf-rv1conf{margin-top:20px;gap:12px;font-size:14.5px}
  .cclf .cclf-rv1conf i{width:30px;height:6px}
  .cclf .cclf-rv1why{margin-top:14px;font-size:14.5px;line-height:1.5}
  /* stacked and full width, because a phone has one column and these are the
     two things the screen is asking */
  .cclf .cclf-rv1btns{margin-top:22px;width:100%;flex-direction:column;align-items:stretch;gap:10px}
  .cclf .cclf-rv1 .cclf-go{width:100%;height:58px;padding:0 18px;font-size:17px}
  .cclf .cclf-rv1enough{width:100%;height:52px;padding:0 16px;font-size:15.5px}
  .cclf .cclf-rv1call{margin-top:14px;font-size:14.5px}
  .cclf .cclf-rv1foot{margin-top:auto;padding:14px 0 0;flex-direction:column;
    align-items:stretch;gap:8px}
  .cclf .cclf-rv1chips{gap:7px}
  .cclf .cclf-rv1chip{height:30px;padding:0 11px;font-size:12.5px}
  .cclf .cclf-rv1flab{font-size:12px}
  .cclf .cclf-rv1fr{font-size:12px}
}
@media (max-width:660px){
  /* the two ends of the bar named short enough to sit either side of it */
  .cclf .cclf-rv1ends{font-size:11.5px}
  .cclf .cclf-rv1goto{padding:6px 0;margin:-6px 0}
}

/* =========================================================================
   Q-BodyMap - the figure beside the list of injured areas
   =========================================================================
   The board draws the chosen areas on a schematic body. It is an illustration
   of the answer and nothing else: the list beside it is the control, the figure
   carries aria-hidden, and on a phone it is dropped entirely rather than
   squeezed - MobileQuestion has no figure, and 350px of width is needed by the
   answers. */
.cclf .cclf-bodyrow{display:flex;align-items:flex-start;gap:26px;margin-top:14px}
.cclf .cclf-bodyrow > .cclf-opts{flex:1 1 auto;min-width:0;margin-top:0}
.cclf .cclf-body{flex:none;width:200px;box-sizing:border-box;padding:14px;
  border:1px solid var(--d-line);border-radius:16px;background:var(--d-wash)}
.cclf .cclf-body svg{display:block;width:100%;height:auto;aspect-ratio:200/400}
.cclf .cclf-bmbase{fill:#DCE3EC}
/* Each region is a rectangle clipped to the figure, so a highlight comes out
   the shape of the part rather than the shape of the rectangle. Unselected
   regions stay in the flow at zero opacity: that is what makes them pressable,
   and what gives the hover its preview. */
.cclf .cclf-bmr{fill:var(--d-gold);opacity:0;cursor:pointer;
  transition:opacity .16s ease}
.cclf .cclf-bmr:hover{opacity:.38}
.cclf .cclf-bmr.cclf-bmon{opacity:1}
.cclf .cclf-bmr.cclf-bmon:hover{opacity:.82}
.cclf .cclf-bmcap{margin:10px 0 0;min-height:35px;font-size:12.5px;line-height:1.4;
  color:var(--d-soft);text-align:center}
@media (max-width:1060px){
  .cclf .cclf-body{width:180px}
  .cclf .cclf-bodyrow{gap:18px}
}
@media (max-width:860px){
  .cclf .cclf-body{display:none}
  .cclf .cclf-bodyrow{display:block}
  .cclf .cclf-bodyrow > .cclf-opts{margin-top:14px}
}

/* =========================================================================
   Q-Liability - a two or three word answer
   =========================================================================
   Yes / No / I do not know is not a list of options with descriptions under
   them: at that length the label is the control. The board gives it three plain
   cards at 78px with the answer set in the display face, the tick on the left
   and only on the one chosen, and the decline drawn with a dashed edge so it
   does not read as a third answer. */
.cclf .cclf-opts.cclf-terse .cclf-opt{min-height:78px;padding:0 20px;gap:14px;
  border-radius:14px;align-items:center}
.cclf .cclf-opts.cclf-terse .cclf-opt.cclf-on{padding:0 19px}
.cclf .cclf-opts.cclf-terse .cclf-otx{flex:1 1 auto;font-family:var(--display);font-size:21px;
  font-weight:700;letter-spacing:-.012em;line-height:1.15}
.cclf .cclf-opts.cclf-terse .cclf-opt .cclf-oic{width:44px;height:44px;border-radius:12px}
.cclf .cclf-opts.cclf-terse .cclf-opt .cclf-oic svg{width:22px;height:22px}
/* the control leads and shows only where it means something */
.cclf .cclf-opts.cclf-terse .cclf-pick{order:-1;width:26px;height:26px;border:0;
  background:none;position:relative}
.cclf .cclf-opts.cclf-terse .cclf-opt.cclf-on .cclf-pick{background:var(--d-ink);
  border-radius:50%}
/* the general pick draws a filled gold dot on this same pseudo-element, so the
   inset shorthand and the fill have to be undone before the tick is drawn */
.cclf .cclf-opts.cclf-terse .cclf-opt.cclf-on .cclf-pick::after{content:"";position:absolute;
  inset:auto;left:7px;top:8px;width:11px;height:5px;background:none;border-radius:0;
  border-left:2.6px solid var(--d-gold);border-bottom:2.6px solid var(--d-gold);
  transform:rotate(-45deg)}
.cclf .cclf-opts.cclf-terse .cclf-odk{border-style:dashed;border-color:#B9C3D1}
.cclf .cclf-opts.cclf-terse .cclf-odk .cclf-otx{color:var(--d-soft)}
.cclf .cclf-opts.cclf-terse .cclf-odk.cclf-on{border-style:solid}
.cclf .cclf-opts.cclf-terse .cclf-odk.cclf-on .cclf-otx{color:var(--d-ink)}
@media (max-width:660px){
  .cclf .cclf-opts.cclf-terse .cclf-opt{min-height:64px;padding:0 16px;gap:12px}
  .cclf .cclf-opts.cclf-terse .cclf-opt.cclf-on{padding:0 15px}
  .cclf .cclf-opts.cclf-terse .cclf-otx{font-size:18px}
  .cclf .cclf-opts.cclf-terse .cclf-pick{width:24px;height:24px}
}

/* the slot the figure will appear in, drawn before there is one. The "$ ———"
   was #46608A, 2.4:1 on the panel - a placeholder nobody could read. #7C90AC is
   the panel's own quiet colour (4.7:1): still plainly an empty slot beside the
   white figure that replaces it. */
.cclf .cclf-qbwait{margin:0 0 22px;padding:0 0 22px;
  border-bottom:1px solid var(--d-panel-line)}
.cclf .cclf-qbwait[hidden]{display:none}
.cclf .cclf-qbwait .cclf-qbdash{margin:12px 0 0;padding:20px;border-radius:14px;
  border:1px dashed rgba(255,255,255,.28);text-align:center;font-family:var(--display);
  font-size:30px;font-weight:800;line-height:1;color:#7C90AC}
.cclf .cclf-qbwaitnote{margin:10px 0 0;font-size:13.5px;line-height:1.5;
  color:var(--d-panel-text);text-align:center}
/* The same slot, carrying what the calculator said instead of the slot for a
   number it is not going to give. The dashed box goes - it promises a figure -
   and the sentence gets a left rule and a reading measure rather than the
   centred one line the waiting note uses. */
.cclf .cclf-qbnotice .cclf-qbdash{display:none}
.cclf .cclf-qbnotice .cclf-qbwaitnote{margin:12px 0 0;padding:12px 0 2px 14px;
  border-left:3px solid var(--d-gold);text-align:left;font-size:13.5px;
  line-height:1.55;color:#DCE6F4}
@media (max-width:1060px){
  .cclf .cclf-qbwait{margin:0 0 14px;padding:0 0 14px}
  .cclf .cclf-qbwait .cclf-qbdash{padding:14px;font-size:24px}
  .cclf .cclf-qbwaitnote{font-size:13px}
}

/* what the last answer did to the two ends */
.cclf .cclf-qbmove{display:inline-flex;align-items:center;gap:9px;margin:12px 0 0;
  height:34px;padding:0 13px;border-radius:8px;background:rgba(255,212,0,.12);
  font-size:13.5px;font-weight:600;color:var(--d-gold)}
.cclf .cclf-qbmove[hidden]{display:none}
.cclf .cclf-qbmove svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cclf .cclf-qbmove.cclf-qbdown{background:rgba(255,255,255,.08);color:#D7E2F1}
.cclf .cclf-qbmove.cclf-qbdown svg{transform:rotate(180deg)}
@media (max-width:1060px){
  .cclf .cclf-qbmove{margin-top:10px;height:30px;padding:0 11px;font-size:12.5px;gap:7px}
  .cclf .cclf-qbmove svg{width:14px;height:14px}
}

/* =========================================================================
   Light and dark - option B from "Light and dark mode - enquiry journey"
   =========================================================================
   The same switch as the enquiry wizard, so one choice carries across the
   journey: html[data-ccl-theme] is set before first paint by the script at the
   top of header-form.php, from the visitor's stored choice ('ccl-theme' in this
   browser) or, failing that, the device. Everything below keys off that
   attribute and nothing else.

   The header is navy in both modes, so the round button that flips it looks the
   same in both: a moon while the page is light, a sun while it is dark. */
body.cclf-page .ccl-calc-mode{position:relative;flex:none;display:inline-flex;
  align-items:center;justify-content:center;width:40px;height:40px;margin:0 16px 0 auto;
  padding:0;border-radius:999px;border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.04);color:#fff;cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease}
/* 40px drawn, 44px to press */
body.cclf-page .ccl-calc-mode::before{content:"";position:absolute;inset:-3px;border-radius:999px}
body.cclf-page .ccl-calc-mode:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.45)}
body.cclf-page .ccl-calc-mode:focus-visible{outline:2px solid #FFD400;outline-offset:2px}
body.cclf-page .ccl-calc-mode svg{width:17px;height:17px}
body.cclf-page .ccl-calc-mode .ccl-calc-mode-moon{display:block}
body.cclf-page .ccl-calc-mode .ccl-calc-mode-sun{display:none}
html[data-ccl-theme="dark"] body.cclf-page .ccl-calc-mode .ccl-calc-mode-moon{display:none}
html[data-ccl-theme="dark"] body.cclf-page .ccl-calc-mode .ccl-calc-mode-sun{display:block}
/* the number keeps its place at the right-hand end; the button sits beside it */
body.cclf-page .ccl-assessment-tool--wrapper .ccl-calc-mode + .ccl-assessment-tool--header-contact{margin-left:0}
/* On a phone the header holds the mark, the switch and the number and nothing
   else, set as the canvas's phone board sets it: the number at 14.5px, 8px from
   the switch. Below 375px there is not room for all three at those sizes, so the
   switch and the mark come down a little and the number drops its icon - the
   number is the link either way. */
body.cclf-page .ccl-calc-mode ~ .ccl-assessment-tool--header-contact .ccl-assessment-tool--phone-number{white-space:nowrap}
@media (max-width:660px){
  /* the template's own style block pads the bar 2rem a side with !important,
     which on a phone is 64px of a 390px screen; the phone board pads it 20px */
  body.cclf-page .ccl-assessment-tool--header{padding-left:20px !important;padding-right:20px !important}
  body.cclf-page .ccl-calc-mode{margin-right:8px}
  body.cclf-page .ccl-calc-mode ~ .ccl-assessment-tool--header-contact .ccl-assessment-tool--phone-number{font-size:14.5px}
}
@media (max-width:374px){
  body.cclf-page .ccl-assessment-tool--header{padding-left:16px !important;padding-right:16px !important}
  body.cclf-page .ccl-calc-mode{width:36px;height:36px;margin-right:6px}
  body.cclf-page .ccl-calc-mode::before{inset:-4px}
  body.cclf-page .ccl-calc-mode ~ .ccl-assessment-tool--header-contact .ccl-assessment-tool--phone-number i{display:none}
  body.cclf-page .ccl-assessment-tool--logo::before{font-size:11px;letter-spacing:.1em}
  body.cclf-page .ccl-assessment-tool--logo::after{font-size:7px;letter-spacing:.18em}
}

/* The line at the foot that hands the choice back to the device. It shows only
   once a choice has been stored. */
body.cclf-page .ccl-calc-modeline{margin:0;padding:18px 20px 24px;text-align:center;
  font-family:"Inter Tight","Inter",system-ui,sans-serif;font-size:13px;line-height:1.5;
  font-weight:500;color:#4C5B70}
body.cclf-page .ccl-calc-modeline[hidden]{display:none}
body.cclf-page .ccl-calc-modeline-btn{display:inline;margin:0;padding:10px 2px;border:0;
  background:none;font:inherit;font-weight:700;color:#0F2547;text-decoration:underline;
  text-underline-offset:2px;cursor:pointer}
body.cclf-page .ccl-calc-modeline-btn:hover{color:#1E4278}
body.cclf-page .ccl-calc-modeline-btn:focus-visible{outline:2px solid #0F2547;outline-offset:2px;border-radius:3px}
/* on a phone the bar is fixed over the bottom of the window, so the line clears it */
@media (max-width:1060px){
  body.cclf-page.cclf-on .ccl-calc-modeline{padding-bottom:calc(24px + 88px + env(safe-area-inset-bottom,0px))}
}
/* On paper there is nothing to switch: the assessment prints as the light page
   whatever the screen was showing, so neither the switch nor the line goes to
   the printer. */
@media print{
  body.cclf-page .ccl-calc-mode,
  body.cclf-page .ccl-calc-modeline{display:none !important}
}
/* if the engine never arrives, the shell puts the old wizard back; the switch
   has nothing to switch there */
body:not(.cclf-page) .ccl-calc-mode,
body:not(.cclf-page) .ccl-calc-modeline{display:none}

/* The site's note on what "no win, no fee" means is the site's own: its words, its
   place at the end of the page and its look (fine print on the light/dark line's
   centre, 12px under it) come from the site's stylesheet. Three things fit it to this
   page. With no light/dark line above it, it no longer rides 12px up into the
   evaluator, where the landing's navy was drawn over its first line. On a phone the
   room the fixed question bar needs is the note's to keep, so the line above it goes
   back to its usual space instead of standing a bar's height above the note. And on
   paper it is in print ink, whatever the screen showed. */
body.cclf-page:not(:has(.ccl-calc-modeline:not([hidden]))) > .ccl-nwnf-wrap{margin-top:0;padding-top:24px}
@media (max-width:1060px){
  body.cclf-page.cclf-on:has(> .ccl-nwnf-wrap) .ccl-calc-modeline{padding-bottom:24px}
}
@media print{
  html[data-ccl-theme] body.cclf-page > .ccl-nwnf-wrap .ccl-nwnf-note{color:#4C5B70}
  body.cclf-page > .ccl-nwnf-wrap{margin-top:0}
}

/* ---- dark ----------------------------------------------------------------
   The landing, the first-range screen and the panel beside the questions were
   navy already and are left as they are. What turns dark is what was white: the
   strip, the stage, the bar, the review and the contact step (and, in the block
   after this one, the white parts of the result and detail pages). The palette is the
   canvas's calculator boards - ground #0A1A30, cards #0E2545 on a 20% white edge,
   question text white, sub-text #A9BBD4, eyebrow and Next in gold, the why-box
   4% white on a 12% edge - and the accent that was navy on white is gold on
   navy, as it already was on the landing. */
@media screen{
  html[data-ccl-theme="dark"] body.cclf-page,
  html[data-ccl-theme="dark"] body.cclf-page .ccl-assessment-tool--wrapper{
    background:#0A1A30;color-scheme:dark}
}
html[data-ccl-theme="dark"] body.cclf-page .ccl-calc-modeline{color:#A9BBD4}
html[data-ccl-theme="dark"] body.cclf-page .ccl-calc-modeline-btn{color:#FFD400}
html[data-ccl-theme="dark"] body.cclf-page .ccl-calc-modeline-btn:hover{color:#FFE566}
html[data-ccl-theme="dark"] body.cclf-page .ccl-calc-modeline-btn:focus-visible{outline-color:#FFD400}

html[data-ccl-theme="dark"] .cclf .cclf-prog,
html[data-ccl-theme="dark"] .cclf .cclf-stage,
html[data-ccl-theme="dark"] .cclf .cclf-bar,
html[data-ccl-theme="dark"] .cclf .cclf-reviewwrap{
  color-scheme:dark;
  --d-gold-quiet:#FFD400;
  --d-ink:#FFFFFF; --d-soft:#A9BBD4; --d-mid:#A9BBD4; --d-quiet:#A9BBD4;
  --d-line:rgba(255,255,255,.10); --d-line-2:rgba(255,255,255,.08);
  --d-card:rgba(255,255,255,.20); --d-chip:rgba(255,255,255,.14);
  --d-wash:rgba(255,255,255,.04); --d-track:rgba(255,255,255,.12);
  --d-tile:rgba(255,255,255,.08); --d-pick:rgba(255,212,0,.10);
  --d-deep:#FFD400; --d-deep-hover:#FFE566;
  --d-up:#7FE0BC; --d-up-bg:rgba(127,224,188,.12);
  --d-down:#FF9D8C; --d-down-bg:rgba(255,157,140,.12);
  --d-warm:rgba(255,212,0,.06); --d-warm-line:rgba(255,212,0,.30); --d-warm-bg:rgba(255,212,0,.14)}

/* the grounds */
html[data-ccl-theme="dark"] .cclf .cclf-prog,
html[data-ccl-theme="dark"] .cclf .cclf-stage,
html[data-ccl-theme="dark"] .cclf .cclf-bar,
html[data-ccl-theme="dark"] .cclf .cclf-reviewwrap,
html[data-ccl-theme="dark"] .cclf .cclf-rvtop,
html[data-ccl-theme="dark"] .cclf .cclf-doneband{background:#0A1A30}
html[data-ccl-theme="dark"] .cclf .cclf-doneband{border-bottom-color:rgba(255,255,255,.10)}
html[data-ccl-theme="dark"] .cclf .cclf-dtx b{color:#fff}
html[data-ccl-theme="dark"] .cclf .cclf-dtx span{color:#A9BBD4}
html[data-ccl-theme="dark"] .cclf .cclf-dbar{background:rgba(255,255,255,.12)}
html[data-ccl-theme="dark"] .cclf .cclf-dbar i{background:#FFD400}

/* the way back, and the strip's own controls */
html[data-ccl-theme="dark"] .cclf #cclf-proginner .cclf-back,
html[data-ccl-theme="dark"] .cclf .cclf-bar .cclf-back,
html[data-ccl-theme="dark"] .cclf .cclf-rvback{color:#C9D6E8}
html[data-ccl-theme="dark"] .cclf #cclf-proginner .cclf-back:hover,
html[data-ccl-theme="dark"] .cclf .cclf-bar .cclf-back:hover,
html[data-ccl-theme="dark"] .cclf .cclf-rvback:hover{color:#fff}
html[data-ccl-theme="dark"] .cclf .cclf-gonow2{border-color:rgba(255,255,255,.28);background:transparent;color:#FFD400}
html[data-ccl-theme="dark"] .cclf .cclf-gonow2:hover{background:#FFD400;border-color:#FFD400;color:#0A1A30}
html[data-ccl-theme="dark"] .cclf .cclf-gonow2-off,
html[data-ccl-theme="dark"] .cclf .cclf-gonow2-off:hover{border-color:rgba(255,255,255,.14);background:transparent;color:#7C90AC}

/* the note under the answers */
html[data-ccl-theme="dark"] .cclf .cclf-hint svg,
html[data-ccl-theme="dark"] .cclf .cclf-why svg{stroke:#A9BBD4}
html[data-ccl-theme="dark"] .cclf .cclf-why{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12)}
html[data-ccl-theme="dark"] .cclf .cclf-why > span{color:#A9BBD4}

/* the cards */
html[data-ccl-theme="dark"] .cclf .cclf-stage .cclf-opt,
html[data-ccl-theme="dark"] .cclf .cclf-mode,
html[data-ccl-theme="dark"] .cclf .cclf-per{background:#0E2545}
html[data-ccl-theme="dark"] .cclf .cclf-stage .cclf-opt:hover,
html[data-ccl-theme="dark"] .cclf .cclf-mode:hover,
html[data-ccl-theme="dark"] .cclf .cclf-per:hover{border-color:rgba(255,255,255,.40)}
html[data-ccl-theme="dark"] .cclf .cclf-stage .cclf-opt.cclf-on,
html[data-ccl-theme="dark"] .cclf .cclf-mode.cclf-on,
html[data-ccl-theme="dark"] .cclf .cclf-per.cclf-on{border-color:#FFD400;background:rgba(255,212,0,.10)}
html[data-ccl-theme="dark"] .cclf .cclf-onum{color:rgba(255,255,255,.13)}
html[data-ccl-theme="dark"] .cclf .cclf-opt.cclf-on .cclf-oic{background:rgba(255,212,0,.16);color:#FFD400}
html[data-ccl-theme="dark"] .cclf .cclf-opts.cclf-terse .cclf-odk{border-color:rgba(255,255,255,.30)}
/* the round and square ticks: gold when chosen, and what sits on the gold is navy */
html[data-ccl-theme="dark"] .cclf .cclf-pick,
html[data-ccl-theme="dark"] .cclf .cclf-box{border-color:rgba(255,255,255,.38);background:transparent}
html[data-ccl-theme="dark"] .cclf .cclf-opt.cclf-on .cclf-pick,
html[data-ccl-theme="dark"] .cclf .cclf-mode.cclf-on .cclf-pick,
html[data-ccl-theme="dark"] .cclf .cclf-opt.cclf-on .cclf-box,
html[data-ccl-theme="dark"] .cclf .cclf-opts.cclf-terse .cclf-opt.cclf-on .cclf-pick{border-color:#FFD400;background:#FFD400}
html[data-ccl-theme="dark"] .cclf .cclf-opt.cclf-on .cclf-pick::after,
html[data-ccl-theme="dark"] .cclf .cclf-mode.cclf-on .cclf-pick::after{background:#0A1A30}
html[data-ccl-theme="dark"] .cclf .cclf-opt.cclf-on .cclf-box svg{stroke:#0A1A30}
html[data-ccl-theme="dark"] .cclf .cclf-opts.cclf-terse .cclf-opt.cclf-on .cclf-pick::after{border-left-color:#0A1A30;border-bottom-color:#0A1A30}

/* the pay-period switch */
html[data-ccl-theme="dark"] .cclf .cclf-periods.cclf-payper .cclf-per{background:transparent}
html[data-ccl-theme="dark"] .cclf .cclf-periods.cclf-payper .cclf-per:hover{background:rgba(255,255,255,.08)}
html[data-ccl-theme="dark"] .cclf .cclf-periods.cclf-payper .cclf-per.cclf-on{background:#0E2545;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}

/* the fields */
html[data-ccl-theme="dark"] .cclf .cclf-money,
html[data-ccl-theme="dark"] .cclf .cclf-entry,
html[data-ccl-theme="dark"] .cclf .cclf-taw textarea,
html[data-ccl-theme="dark"] .cclf .cclf-tf input{background:#0E2545;color:#fff}
/* The dropdowns set their colour alone: the shorthand above wiped the chevron, and
   in dark every date part and dropdown looked like a text box holding a dash
   (audit item 41). The chevron is redrawn in the panel's soft blue. */
html[data-ccl-theme="dark"] .cclf .cclf-dfield select,
html[data-ccl-theme="dark"] .cclf select.cclf-wide{background-color:#0E2545;color:#fff;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9BBD4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>")}
html[data-ccl-theme="dark"] .cclf .cclf-tf input,
html[data-ccl-theme="dark"] .cclf .cclf-taw textarea{border-color:rgba(255,255,255,.20);box-shadow:none}
/* at 3:1 or better against the ground, as in light (audit item 48) */
html[data-ccl-theme="dark"] .cclf .cclf-dfield select,html[data-ccl-theme="dark"] .cclf select.cclf-wide,
html[data-ccl-theme="dark"] .cclf .cclf-money,html[data-ccl-theme="dark"] .cclf .cclf-entry,
html[data-ccl-theme="dark"] .cclf .cclf-tf input,html[data-ccl-theme="dark"] .cclf .cclf-taw textarea{border-color:rgba(255,255,255,.45)}
html[data-ccl-theme="dark"] .cclf .cclf-dfield select option{background:#0E2545;color:#fff}
html[data-ccl-theme="dark"] .cclf .cclf-dfield select option:disabled{color:#7C90AC}
html[data-ccl-theme="dark"] .cclf .cclf-dfield select:focus-visible,
html[data-ccl-theme="dark"] .cclf select.cclf-wide:focus-visible,
html[data-ccl-theme="dark"] .cclf .cclf-money:focus-within,
html[data-ccl-theme="dark"] .cclf .cclf-entry:focus,
html[data-ccl-theme="dark"] .cclf .cclf-taw textarea:focus,
html[data-ccl-theme="dark"] .cclf .cclf-tf input:focus{border-color:#FFD400;box-shadow:0 0 0 3px rgba(255,212,0,.22)}
html[data-ccl-theme="dark"] .cclf .cclf-tf.cclf-bad input{border-color:#FF9D8C;box-shadow:inset 0 0 0 1px #FF9D8C}
html[data-ccl-theme="dark"] .cclf .cclf-tf.cclf-bad input:focus{box-shadow:inset 0 0 0 1px #FF9D8C,0 0 0 3px rgba(255,157,140,.25)}
html[data-ccl-theme="dark"] .cclf .cclf-money .cclf-pre{color:#A9BBD4}
html[data-ccl-theme="dark"] .cclf .cclf-money input::placeholder,
html[data-ccl-theme="dark"] .cclf .cclf-entry::placeholder,
html[data-ccl-theme="dark"] .cclf .cclf-taw textarea::placeholder,
html[data-ccl-theme="dark"] .cclf .cclf-tf input::placeholder{color:rgba(255,255,255,.55)}

/* the figure on the injury board */
html[data-ccl-theme="dark"] .cclf .cclf-bmbase{fill:#22406B}

/* Next: filled gold once there is an answer, as in light; while it waits, a gold
   outline on the navy, which is how the canvas draws it */
html[data-ccl-theme="dark"] .cclf .cclf-next.cclf-wait,
html[data-ccl-theme="dark"] .cclf .cclf-pgo.cclf-wait,
html[data-ccl-theme="dark"] .cclf #cclf-go2.cclf-wait,
html[data-ccl-theme="dark"] .cclf #cclf-gonow.cclf-wait,
html[data-ccl-theme="dark"] .cclf .cclf-next.cclf-wait:hover,
html[data-ccl-theme="dark"] .cclf .cclf-pgo.cclf-wait:hover{color:#FFD400;box-shadow:inset 0 0 0 1.5px #FFD400}

/* the review */
html[data-ccl-theme="dark"] .cclf .cclf-rvtable{background:#0E2545}
html[data-ccl-theme="dark"] .cclf .cclf-rvhead2{background:rgba(255,255,255,.04)}
html[data-ccl-theme="dark"] .cclf .cclf-rvrow.cclf-rvmiss{background:rgba(255,255,255,.02)}
html[data-ccl-theme="dark"] .cclf .cclf-rva i{color:#93A9C8}
html[data-ccl-theme="dark"] .cclf .cclf-rvchip{background:rgba(255,255,255,.08)}
/* "not moving this estimate" is words, not a chip, in both modes */
html[data-ccl-theme="dark"] .cclf .cclf-rvchip.cclf-rvflat{background:none;color:#93A9C8}
/* The "questions answered" band sits inside .cclf-prog, and the progress row's own
   padding rule (.cclf .cclf-prog .cclf-in, later in this file and the same weight)
   was winning, so the band's line sat flush under the header with no space above. */
.cclf .cclf-prog .cclf-doneband .cclf-in{padding:16px 32px}
@media (max-width:820px){ .cclf .cclf-prog .cclf-doneband .cclf-in{padding:13px 20px} }
@media (max-width:620px){ .cclf .cclf-prog .cclf-doneband .cclf-in{padding:12px 18px} }

/* ---- audit item 49: the question screens, polished ---------------------------
   Nothing here reaches the result or detail pages at computer width. The rules for
   classes nothing emits any longer (the old detail sections, the document nav and
   the landing's old assurance list: .cclf-dsec, .cclf-di, .cclf-ab, .cclf-dhead,
   .cclf-docnav, .cclf-hassure, .cclf-asub) were taken out, with their dark rules. */
/* the privacy box and "Ask a lawyer instead" had no space between them, and the
   button's words filled it edge to edge between 1061 and 1380 */
.cclf .cclf-aside .cclf-privacy{margin-bottom:16px}
.cclf .cclf-asklaw{padding:0 14px}
@media (max-width:1380px){.cclf .cclf-asklaw{font-size:14.5px}}
/* the results' two-claims grid rule was reaching the option lists and adding
   empty rows under the answers */
.cclf .cclf-opts{grid-template-rows:none}
/* a chosen landing card keeps its gold plate in light as in dark */
.cclf .cclf-hero .cclf-opt.cclf-on .cclf-oic{background:rgba(255,212,0,.16);color:var(--d-gold)}
/* a typed answer sits as far under the question as any other answer; the date
   panel's switch no longer doubles its top inset */
.cclf #cclf-opts > .cclf-tf,.cclf #cclf-opts > .cclf-money{margin-top:26px}
.cclf .cclf-panel > .cclf-modes:first-child{margin-top:0}
/* the "why" note ends where the answers do; a dropdown is as wide as a text field */
.cclf .cclf-why{max-width:none}
.cclf select.cclf-wide{max-width:620px}
/* a chosen stage tile shows a tick where its number was */
.cclf .cclf-stage .cclf-opts.cclf-tiles .cclf-opt.cclf-on .cclf-tick{display:flex}
/* the landing's two buttons sit on one line, centred on each other; the dots
   between the claims go where four claims no longer fit on one line */
.cclf .cclf-hbtns{align-items:center}
@media (max-width:900px){.cclf .cclf-mins li + li::before{display:none}}
/* the pay period's words sit in the middle of their segment */
.cclf .cclf-periods.cclf-payper .cclf-per{justify-content:center}
/* the date note is a hint at every width, not a green confirmation */
.cclf .cclf-dnote{font-weight:400;color:var(--d-mid)}
/* the review's call is the same height as the panel's */
.cclf .cclf-rvcall{height:52px}
@media (max-width:1060px){
  /* the range band and the clocks under it were two hairlines 15px apart */
  .cclf .cclf-stage:not(.cclf-islast) .cclf-qrailclocks{border-top:0;padding-top:0}
}
@media (max-width:660px){
  /* single-choice rows were holding the desk's 96px height */
  .cclf .cclf-opt{min-height:64px}
}
/* The summary bar's three tones. In light they are the signed-off ones; in dark the
   deep blue was 2.7:1 on the ground, and the three are restated for navy - on screen
   only: on paper the assessment is the light page. */
.cclf .cclf-tone-fixed{background:#6E8BB0}
.cclf .cclf-tone-proved{background:#1E5FA3}
.cclf .cclf-tone-derived{background:#B4CFEA}
@media screen{
  html[data-ccl-theme="dark"] .cclf .cclf-tone-fixed{background:#50719C}
  html[data-ccl-theme="dark"] .cclf .cclf-tone-proved{background:#86B0E8}
  html[data-ccl-theme="dark"] .cclf .cclf-tone-derived{background:#C9D6E8}
}
/* One side gutter for the header, the strip, the question and the bar at each
   width, the header's own (32px to 661px, 20px on a phone, 16px under 375px): each
   had its own, and nothing lined up (audit item 49). */
@media (max-width:1060px){
  .cclf .cclf-prog .cclf-in,.cclf .cclf-prog .cclf-doneband .cclf-in{padding-left:32px;padding-right:32px}
  .cclf .cclf-qcol,.cclf .cclf-aside,
  .cclf .cclf-stage:not(.cclf-islast) .cclf-qrail{padding-left:32px;padding-right:32px}
  .cclf .cclf-bar .cclf-in{padding-left:32px;padding-right:32px}
}
@media (max-width:660px){
  .cclf .cclf-prog .cclf-in,.cclf .cclf-prog .cclf-doneband .cclf-in{padding-left:20px;padding-right:20px}
  .cclf .cclf-qcol,.cclf .cclf-aside,
  .cclf .cclf-stage:not(.cclf-islast) .cclf-qrail{padding-left:20px;padding-right:20px}
  .cclf .cclf-bar .cclf-in{padding-left:20px;padding-right:20px}
}
@media (max-width:374px){
  .cclf .cclf-prog .cclf-in,.cclf .cclf-prog .cclf-doneband .cclf-in{padding-left:16px;padding-right:16px}
  .cclf .cclf-qcol,.cclf .cclf-aside,
  .cclf .cclf-stage:not(.cclf-islast) .cclf-qrail{padding-left:16px;padding-right:16px}
  .cclf .cclf-bar .cclf-in{padding-left:16px;padding-right:16px}
}

/* ---- dark: the result and detail pages ------------------------------------
   The range at the top, "What happens next" and the close were navy already and
   are left exactly as they are. What turns dark is what was white - the
   breakdown, the file and the answers - in the same palette as the questions:
   ground #0A1A30, cards #0E2545 on a 20% white edge, headings white, sub-text
   #A9BBD4, and the accent that was navy on white is gold on navy. The tones
   that carry meaning keep it, lifted for a dark ground as "What happens next"
   already lifts them: settled green #6FC7A9, coming-up amber #E7BE4A, overdue
   red #EE8A83, and the statutory claim's blue #86B0E8.

   Screen only. On paper the assessment is the light page, whatever the screen
   was showing. */
@media screen{

/* the grounds, and the page behind them */
html[data-ccl-theme="dark"] .cclf .cclf-rbreak,
html[data-ccl-theme="dark"] .cclf .cclf-rdetail,
html[data-ccl-theme="dark"] .cclf .cclf-ransband{
  color-scheme:dark;
  --paper:#0A1A30; --sheet:#0E2545; --rule:rgba(255,255,255,.20); --rule-2:rgba(255,255,255,.09);
  --ink:#FFFFFF; --soft:#A9BBD4; --faint:#93A9C8;
  --ample:#6FC7A9; --soon:#E7BE4A; --tight:#EE8A83;
  --cta:#FFD400; --d-deep:#FFD400; --d-deep-hover:#FFE566;
  background:#0A1A30;border-top-color:rgba(255,255,255,.10);color:#fff}
/* a link in the prose, where the firm's wording carries one */
html[data-ccl-theme="dark"] .cclf .cclf-rbreak a:not([class]),
html[data-ccl-theme="dark"] .cclf .cclf-rdetail a:not([class]),
html[data-ccl-theme="dark"] .cclf .cclf-ransband a:not([class]){color:#FFD400}

/* eyebrows, headings and the lines under them */
html[data-ccl-theme="dark"] .cclf .cclf-rbreak .cclf-klab,
html[data-ccl-theme="dark"] .cclf .cclf-rdetail .cclf-klab,
html[data-ccl-theme="dark"] .cclf .cclf-ransband .cclf-klab{color:#FFD400}
html[data-ccl-theme="dark"] .cclf .cclf-rbreak .cclf-klab::before,
html[data-ccl-theme="dark"] .cclf .cclf-rsec-faq .cclf-klab::before{background:#FFD400}
html[data-ccl-theme="dark"] .cclf .cclf-rbreak h2,
html[data-ccl-theme="dark"] .cclf .cclf-ransband h2{color:#fff}
html[data-ccl-theme="dark"] .cclf .cclf-rbreak .cclf-klead,
html[data-ccl-theme="dark"] .cclf .cclf-ransband .cclf-klead{color:#A9BBD4}
html[data-ccl-theme="dark"] .cclf .cclf-rsec{border-top-color:rgba(255,255,255,.28)}

/* ---- the breakdown ---- */
html[data-ccl-theme="dark"] .cclf .cclf-mast{border-bottom-color:rgba(255,255,255,.10)}
html[data-ccl-theme="dark"] .cclf .cclf-chn{background:rgba(255,212,0,.08);border-color:rgba(255,212,0,.45);color:#FFD400}
@media (max-width:700px){
  html[data-ccl-theme="dark"] .cclf .cclf-chn{background:none;border:0}
}
html[data-ccl-theme="dark"] .cclf .cclf-beat > h3{color:#fff}
html[data-ccl-theme="dark"] .cclf .cclf-chl{color:#A9BBD4}
html[data-ccl-theme="dark"] .cclf .cclf-beat ~ .cclf-beat,
html[data-ccl-theme="dark"] .cclf .cclf-intnote{border-top-color:rgba(255,255,255,.16)}

/* the two claims */
html[data-ccl-theme="dark"] .cclf .cclf-tcell{background:#0E2545}
html[data-ccl-theme="dark"] .cclf .cclf-a{--acc:#86B0E8;--accb:#1A3355;--accr:rgba(134,176,232,.38)}
html[data-ccl-theme="dark"] .cclf .cclf-b{--acc:#FFD400;--accb:#21333F;--accr:rgba(255,212,0,.34)}
html[data-ccl-theme="dark"] .cclf .cclf-tcell.cclf-a,
html[data-ccl-theme="dark"] .cclf .cclf-tcell.cclf-b{border-left-color:rgba(255,255,255,.20);border-right-color:rgba(255,255,255,.20)}
html[data-ccl-theme="dark"] .cclf .cclf-th.cclf-a,
html[data-ccl-theme="dark"] .cclf .cclf-th.cclf-b{border-top-color:rgba(255,255,255,.20)}
html[data-ccl-theme="dark"] .cclf .cclf-tft.cclf-a,
html[data-ccl-theme="dark"] .cclf .cclf-tft.cclf-b{border-bottom-color:rgba(255,255,255,.20)}
html[data-ccl-theme="dark"] .cclf .cclf-tcell:not(.cclf-th){border-top-color:rgba(255,255,255,.09)}
html[data-ccl-theme="dark"] .cclf .cclf-th{background:var(--accb)}
html[data-ccl-theme="dark"] .cclf .cclf-tft{background:var(--accb)}
html[data-ccl-theme="dark"] .cclf .cclf-a.cclf-th::before{background:linear-gradient(90deg,#4F86C6,#86B0E8)}
html[data-ccl-theme="dark"] .cclf .cclf-b.cclf-th::before{background:linear-gradient(90deg,#E0A80D,#FFD400)}
html[data-ccl-theme="dark"] .cclf .cclf-tic{background:#0A1A30}
html[data-ccl-theme="dark"] .cclf .cclf-th h4{color:#fff}
html[data-ccl-theme="dark"] .cclf .cclf-tw{color:#A9BBD4}
html[data-ccl-theme="dark"] .cclf .cclf-tgut,
html[data-ccl-theme="dark"] .cclf .cclf-tgut span,
html[data-ccl-theme="dark"] .cclf .cclf-rl{color:#93A9C8}
html[data-ccl-theme="dark"] .cclf .cclf-tgut svg{stroke:#E7BE4A}
html[data-ccl-theme="dark"] .cclf .cclf-sg::before{background:rgba(255,255,255,.14)}
html[data-ccl-theme="dark"] .cclf .cclf-sg > i{background:#0E2545}
html[data-ccl-theme="dark"] .cclf .cclf-sg-done{--sgc:#6FC7A9;--sgb:rgba(111,199,169,.14)}
html[data-ccl-theme="dark"] .cclf .cclf-sg-now{--sgc:#E7BE4A;--sgb:rgba(231,190,74,.14)}
html[data-ccl-theme="dark"] .cclf .cclf-sg-act{--sgc:#EE8A83;--sgb:rgba(238,138,131,.14)}
html[data-ccl-theme="dark"] .cclf .cclf-sg-next{--sgc:#5B7394;--sgb:rgba(255,255,255,.08)}
html[data-ccl-theme="dark"] .cclf .cclf-sg-unk{--sgc:#93A9C8;--sgb:rgba(255,255,255,.08)}
html[data-ccl-theme="dark"] .cclf .cclf-sg-done > i,
html[data-ccl-theme="dark"] .cclf .cclf-sg-act > i{background:var(--sgc)}
/* the tick and the bang sit on the light tone now, so they are drawn in navy */
html[data-ccl-theme="dark"] .cclf .cclf-sg-done > i::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.7 7.25 5.95 9.5 10.3 4.9' fill='none' stroke='%230A1A30' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
html[data-ccl-theme="dark"] .cclf .cclf-sg-act > i::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cg fill='%230A1A30'%3E%3Crect x='6' y='3.1' width='2' height='5.6' rx='1'/%3E%3Ccircle cx='7' cy='10.65' r='1.15'/%3E%3C/g%3E%3C/svg%3E")}
html[data-ccl-theme="dark"] .cclf .cclf-sg-now > i{background:radial-gradient(circle at 50% 50%,var(--sgc) 0 3.6px,#0E2545 4.4px)}
html[data-ccl-theme="dark"] .cclf .cclf-sgt{color:#fff}
html[data-ccl-theme="dark"] .cclf .cclf-sg-next .cclf-sgt,
html[data-ccl-theme="dark"] .cclf .cclf-sg-unk .cclf-sgt{color:#C9D6E8}
html[data-ccl-theme="dark"] .cclf .cclf-sg-next .cclf-sgp{color:#A9BBD4}
html[data-ccl-theme="dark"] .cclf .cclf-sgw{color:#A9BBD4}
html[data-ccl-theme="dark"] .cclf .cclf-twhen b{color:#fff}
html[data-ccl-theme="dark"] .cclf .cclf-twhen i{color:#93A9C8}
html[data-ccl-theme="dark"] .cclf .cclf-twhen i.cclf-is-ample{color:#6FC7A9}
html[data-ccl-theme="dark"] .cclf .cclf-twhen i.cclf-is-soon{color:#E7BE4A}
html[data-ccl-theme="dark"] .cclf .cclf-twhen i.cclf-is-tight,
html[data-ccl-theme="dark"] .cclf .cclf-twhen i.cclf-is-past{color:#EE8A83}
html[data-ccl-theme="dark"] .cclf .cclf-tft p{color:#C9D6E8}
html[data-ccl-theme="dark"] .cclf .cclf-tft p b{color:#fff}
html[data-ccl-theme="dark"] .cclf .cclf-tfoot{color:#93A9C8}

/* the choice */
html[data-ccl-theme="dark"] .cclf .cclf-ftrig{background:rgba(255,212,0,.06);border-color:rgba(255,212,0,.30);box-shadow:none}
html[data-ccl-theme="dark"] .cclf .cclf-fic{background:#0A1A30;border-color:rgba(255,212,0,.45)}
html[data-ccl-theme="dark"] .cclf .cclf-fic svg{stroke:#FFD400}
html[data-ccl-theme="dark"] .cclf .cclf-feye,
html[data-ccl-theme="dark"] .cclf .cclf-bfeye,
html[data-ccl-theme="dark"] .cclf .cclf-ieye{color:#E7BE4A}
html[data-ccl-theme="dark"] .cclf .cclf-ftrig h4{color:#fff}
html[data-ccl-theme="dark"] .cclf .cclf-ftw{color:#A9BBD4}
html[data-ccl-theme="dark"] .cclf .cclf-chwhen{--tone:#E7BE4A;border-top-color:rgba(255,212,0,.25)}
html[data-ccl-theme="dark"] .cclf .cclf-chwhen.cclf-is-ample{--tone:#6FC7A9}
html[data-ccl-theme="dark"] .cclf .cclf-chwhen.cclf-is-tight{--tone:#EE8A83}
html[data-ccl-theme="dark"] .cclf .cclf-cwl{color:#C9B27A}
html[data-ccl-theme="dark"] .cclf .cclf-cwt{color:#D9C9A3}
html[data-ccl-theme="dark"] .cclf .cclf-fstem i,
html[data-ccl-theme="dark"] .cclf .cclf-fjoin i{background:rgba(255,255,255,.28)}
html[data-ccl-theme="dark"] .cclf .cclf-fstem-2 b,
html[data-ccl-theme="dark"] .cclf .cclf-fjoin b{border-color:rgba(255,255,255,.28)}
html[data-ccl-theme="dark"] .cclf .cclf-fgate{background:#0E2545;border-color:rgba(255,255,255,.30)}
html[data-ccl-theme="dark"] .cclf .cclf-geye{color:#93A9C8}
html[data-ccl-theme="dark"] .cclf .cclf-gq{color:#fff}
html[data-ccl-theme="dark"] .cclf .cclf-gq b,
html[data-ccl-theme="dark"] .cclf .cclf-bft h5 b{color:#FFD400}
html[data-ccl-theme="dark"] .cclf .cclf-ga{color:#A9BBD4}
html[data-ccl-theme="dark"] .cclf .cclf-gbefore{background:rgba(255,212,0,.05);border-color:rgba(255,212,0,.25);border-left-color:#FFD400}
html[data-ccl-theme="dark"] .cclf .cclf-bfic{background:#0A1A30;border-color:rgba(255,212,0,.40)}
html[data-ccl-theme="dark"] .cclf .cclf-bfic svg{stroke:#FFD400}
html[data-ccl-theme="dark"] .cclf .cclf-bft h5{color:#fff}
html[data-ccl-theme="dark"] .cclf .cclf-bft p{color:#D9C9A3}
html[data-ccl-theme="dark"] .cclf .cclf-fmerge{background:rgba(111,199,169,.08);border-color:rgba(111,199,169,.35)}
html[data-ccl-theme="dark"] .cclf .cclf-meye{color:#6FC7A9}
html[data-ccl-theme="dark"] .cclf .cclf-mq{color:#C9E6DA}
html[data-ccl-theme="dark"] .cclf .cclf-fout{--tone:#EE8A83;--wash:rgba(238,138,131,.07);--ring:rgba(238,138,131,.32);box-shadow:none}
html[data-ccl-theme="dark"] .cclf .cclf-fout-open{--tone:#6FC7A9;--wash:rgba(111,199,169,.07);--ring:rgba(111,199,169,.32)}
html[data-ccl-theme="dark"] .cclf .cclf-fout .cclf-fic{background:#0A1A30;border-color:var(--ring)}
html[data-ccl-theme="dark"] .cclf .cclf-fout .cclf-fic svg{stroke:var(--tone)}
html[data-ccl-theme="dark"] .cclf .cclf-fout h5,
html[data-ccl-theme="dark"] .cclf .cclf-fout .cclf-fkey{color:#fff}
html[data-ccl-theme="dark"] .cclf .cclf-fout li{color:#A9BBD4}
html[data-ccl-theme="dark"] .cclf .cclf-fwarn{background:#0A1A30;color:#F2B8B2}
html[data-ccl-theme="dark"] .cclf .cclf-fwarn-open{color:#BFE3D5}
html[data-ccl-theme="dark"] .cclf .cclf-fseal{background:#0A1A30}
html[data-ccl-theme="dark"] .cclf .cclf-iw{color:#C9D6E8}
html[data-ccl-theme="dark"] .cclf .cclf-iw2{background:rgba(255,212,0,.06);border-color:rgba(255,212,0,.30);color:#E8D9AE}

/* what is inside the figure */
html[data-ccl-theme="dark"] .cclf .cclf-bgrp{border-top-color:rgba(255,255,255,.10)}
html[data-ccl-theme="dark"] .cclf .cclf-bgrp:first-child{border-top:0}
html[data-ccl-theme="dark"] .cclf .cclf-gt{color:#fff}
html[data-ccl-theme="dark"] .cclf .cclf-g-derived .cclf-gt{color:#A9BBD4}
html[data-ccl-theme="dark"] .cclf .cclf-gshare,
html[data-ccl-theme="dark"] .cclf .cclf-hdpct,
html[data-ccl-theme="dark"] .cclf .cclf-factlab,
html[data-ccl-theme="dark"] .cclf .cclf-bsumlab,
html[data-ccl-theme="dark"] .cclf .cclf-cvlab{color:#93A9C8}
html[data-ccl-theme="dark"] .cclf .cclf-gshare b{color:#86B0E8}
html[data-ccl-theme="dark"] .cclf .cclf-glead{border-top-color:rgba(255,255,255,.09);color:#93A9C8}
html[data-ccl-theme="dark"] .cclf .cclf-hd + .cclf-hd{border-top-color:rgba(255,255,255,.12)}
html[data-ccl-theme="dark"] .cclf .cclf-hdtop h4,
html[data-ccl-theme="dark"] .cclf .cclf-hdval{color:#fff}
html[data-ccl-theme="dark"] .cclf .cclf-hd.is-less .cclf-hdval{color:#EE8A83}
html[data-ccl-theme="dark"] .cclf .cclf-hd.is-less .cclf-hdtop h4{color:#F2B8B2}
html[data-ccl-theme="dark"] .cclf .cclf-hdbar{background:rgba(255,255,255,.10)}
html[data-ccl-theme="dark"] .cclf .cclf-hdbar i{background:linear-gradient(90deg,#86B0E8,#4F86C6)}
html[data-ccl-theme="dark"] .cclf .cclf-hdbar u{background:rgba(134,176,232,.38)}
html[data-ccl-theme="dark"] .cclf .cclf-hdbar.is-less u{background:rgba(238,138,131,.35)}
html[data-ccl-theme="dark"] .cclf .cclf-hdbar.is-less i{background:repeating-linear-gradient(-45deg,#EE8A83 0 5px,rgba(238,138,131,.45) 5px 10px)}
html[data-ccl-theme="dark"] .cclf .cclf-hdpct.is-less{color:#E8A7A1}
html[data-ccl-theme="dark"] .cclf .cclf-hdpct.is-open{color:#E7BE4A}
html[data-ccl-theme="dark"] .cclf .cclf-hdw{color:#C9D6E8}
html[data-ccl-theme="dark"] .cclf .cclf-covers{background:#0E2545;border-color:rgba(255,255,255,.12)}
html[data-ccl-theme="dark"] .cclf .cclf-covers li{color:#C9D6E8}
html[data-ccl-theme="dark"] .cclf .cclf-covers li::before{border-left-color:#FFD400;border-bottom-color:#FFD400}
html[data-ccl-theme="dark"] .cclf .cclf-hd .cclf-covers{background:none;border:0;border-left:2px solid rgba(255,212,0,.30)}
html[data-ccl-theme="dark"] .cclf .cclf-hd .cclf-covers li::before{color:#FFD400}
html[data-ccl-theme="dark"] .cclf .cclf-hd .cclf-cvlab{color:#E7BE4A}
html[data-ccl-theme="dark"] .cclf .cclf-fact{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.10)}
html[data-ccl-theme="dark"] .cclf .cclf-fact li{color:#D7E2F1}
html[data-ccl-theme="dark"] .cclf .cclf-fact li + li::before{background:rgba(255,255,255,.22)}
@media (max-width:760px){html[data-ccl-theme="dark"] .cclf .cclf-fact li:not(:last-child)::after{background:rgba(255,255,255,.22)}}
html[data-ccl-theme="dark"] .cclf .cclf-bsumbar{background:rgba(255,255,255,.08)}
html[data-ccl-theme="dark"] .cclf .cclf-bsumkey li{color:#A9BBD4}
html[data-ccl-theme="dark"] .cclf .cclf-bsumkey b{color:#fff}
html[data-ccl-theme="dark"] .cclf .cclf-btop{border-bottom-color:rgba(255,255,255,.28)}
html[data-ccl-theme="dark"] .cclf .cclf-bendeye{color:#E7BE4A}
html[data-ccl-theme="dark"] .cclf .cclf-bendk,
html[data-ccl-theme="dark"] .cclf .cclf-spanend b,
html[data-ccl-theme="dark"] .cclf .cclf-lone{color:#fff}
html[data-ccl-theme="dark"] .cclf .cclf-spanline::before,
html[data-ccl-theme="dark"] .cclf .cclf-spanline::after{background:#0A1A30;border-color:#FFD400}
html[data-ccl-theme="dark"] .cclf .cclf-spanend span{color:#C9B27A}
html[data-ccl-theme="dark"] .cclf .cclf-spanend u,
html[data-ccl-theme="dark"] .cclf .cclf-bendp{color:#A9BBD4}
html[data-ccl-theme="dark"] .cclf .cclf-gapline{color:#C9D6E8}
html[data-ccl-theme="dark"] .cclf .cclf-gapline b{color:#FFD400}
html[data-ccl-theme="dark"] .cclf .cclf-bclose{border-top-color:rgba(255,255,255,.10);color:#C9D6E8}
html[data-ccl-theme="dark"] .cclf .cclf-bclose b{color:#fff}

/* ---- the file ---- */
/* the spine */
html[data-ccl-theme="dark"] .cclf .cclf-fn1:hover,
html[data-ccl-theme="dark"] .cclf .cclf-fn2:hover{border-left-color:rgba(255,255,255,.40);background:rgba(255,255,255,.04)}
html[data-ccl-theme="dark"] .cclf .cclf-fn1.cclf-here,
html[data-ccl-theme="dark"] .cclf .cclf-fn1.cclf-within{color:#FFD400;background:rgba(255,212,0,.10)}
html[data-ccl-theme="dark"] .cclf .cclf-fn2.cclf-here{color:#FFD400;background:rgba(255,212,0,.07)}
html[data-ccl-theme="dark"] .cclf .cclf-spinenext{--tone:#FFD400}
html[data-ccl-theme="dark"] .cclf .cclf-spinenext.cclf-is-ample,
html[data-ccl-theme="dark"] .cclf .cclf-spinenext.cclf-is-met{--tone:var(--ample)}
html[data-ccl-theme="dark"] .cclf .cclf-spinenext.cclf-is-soon{--tone:var(--soon)}
html[data-ccl-theme="dark"] .cclf .cclf-spinenext.cclf-is-tight,
html[data-ccl-theme="dark"] .cclf .cclf-spinenext.cclf-is-past{--tone:var(--tight)}
/* the call, filled gold as every call to act is on the dark page */
html[data-ccl-theme="dark"] .cclf .cclf-spinecall{background:#FFD400;color:#101828}
html[data-ccl-theme="dark"] .cclf .cclf-spinecall:hover{background:#FFE566;color:#101828}
html[data-ccl-theme="dark"] .cclf .cclf-spinecall span{color:rgba(16,24,40,.74)}
/* where the claim stands */
html[data-ccl-theme="dark"] .cclf .cclf-rdetail .cclf-snap{background:#0E2545;border-left-color:#FFD400}
html[data-ccl-theme="dark"] .cclf .cclf-fnfoot span{color:#93A9C8}
/* the deadlines */
html[data-ccl-theme="dark"] .cclf .cclf-clock{--tone:#FFD400;background:#0E2545;box-shadow:none}
html[data-ccl-theme="dark"] .cclf .cclf-clock.cclf-is-ample,
html[data-ccl-theme="dark"] .cclf .cclf-clock.cclf-is-met{--tone:var(--ample)}
html[data-ccl-theme="dark"] .cclf .cclf-clock.cclf-is-soon{--tone:var(--soon)}
html[data-ccl-theme="dark"] .cclf .cclf-clock.cclf-is-tight,
html[data-ccl-theme="dark"] .cclf .cclf-clock.cclf-is-past{--tone:var(--tight)}
html[data-ccl-theme="dark"] .cclf .cclf-rail{background:rgba(255,255,255,.12)}
html[data-ccl-theme="dark"] .cclf .cclf-clocknote{background:#0E2545;border-left-color:#FFD400}
/* what moves the number */
html[data-ccl-theme="dark"] .cclf .cclf-lside{--tone:#FFD400}
html[data-ccl-theme="dark"] .cclf .cclf-lside-up{--tone:#6FC7A9}
html[data-ccl-theme="dark"] .cclf .cclf-lside-down{--tone:#EE8A83}
html[data-ccl-theme="dark"] .cclf .cclf-lev{--tone:#FFD400}
html[data-ccl-theme="dark"] .cclf .cclf-l-up{--tone:#6FC7A9}
html[data-ccl-theme="dark"] .cclf .cclf-l-down{--tone:#EE8A83}
html[data-ccl-theme="dark"] .cclf .cclf-l-watch{--tone:#E7BE4A}
html[data-ccl-theme="dark"] .cclf .cclf-l-info{--tone:#FFD400}
/* what the number does not say on its own */




html[data-ccl-theme="dark"] .cclf .cclf-cd{background:#0E2545;border-color:rgba(255,255,255,.20);box-shadow:none}
html[data-ccl-theme="dark"] .cclf .cclf-cd-a{--ac:#E7BE4A;--acb:rgba(231,190,74,.12);--acr:rgba(231,190,74,.36)}
html[data-ccl-theme="dark"] .cclf .cclf-cd-b{--ac:#86B0E8;--acb:rgba(134,176,232,.12);--acr:rgba(134,176,232,.36)}
html[data-ccl-theme="dark"] .cclf .cclf-cd-c{--ac:#8CC6D6;--acb:rgba(140,198,214,.12);--acr:rgba(140,198,214,.36)}
html[data-ccl-theme="dark"] .cclf .cclf-cdn{color:#0A1A30}
html[data-ccl-theme="dark"] .cclf .cclf-cdsum,
html[data-ccl-theme="dark"] .cclf .cclf-cdon li,
html[data-ccl-theme="dark"] .cclf .cclf-cdkey p:last-child{color:#A9BBD4}
html[data-ccl-theme="dark"] .cclf .cclf-cdon{border-top-color:rgba(255,255,255,.09)}
html[data-ccl-theme="dark"] .cclf .cclf-cdonh{color:#93A9C8}
html[data-ccl-theme="dark"] .cclf .cclf-cdif p:last-child{color:#D7E2F1}
html[data-ccl-theme="dark"] .cclf .cclf-cdkey{background:#0E2545;box-shadow:inset 0 0 0 1px rgba(255,255,255,.20)}
html[data-ccl-theme="dark"] .cclf .cclf-cdkeyic{background:#0A1A30;color:#FFD400;box-shadow:none}
html[data-ccl-theme="dark"] .cclf .cclf-cdkeyl{color:#E7BE4A}
/* questions people ask */
html[data-ccl-theme="dark"] .cclf .cclf-rsec-faq .cclf-klab{color:#FFD400}
html[data-ccl-theme="dark"] .cclf #cclf-rfaq .cclf-fq{background:#0E2545;border-color:rgba(255,255,255,.20);box-shadow:none}
html[data-ccl-theme="dark"] .cclf #cclf-rfaq .cclf-fq:hover{border-color:rgba(255,255,255,.40)}
html[data-ccl-theme="dark"] .cclf #cclf-rfaq .cclf-fq[open]{background:#11294C;border-color:rgba(255,212,0,.40)}
html[data-ccl-theme="dark"] .cclf .cclf-fqi{background:rgba(134,176,232,.14);color:#86B0E8}
html[data-ccl-theme="dark"] .cclf #cclf-rfaq .cclf-fq[open] .cclf-fqi{background:rgba(255,212,0,.14);color:#FFD400}
html[data-ccl-theme="dark"] .cclf #cclf-rfaq .cclf-fq .cclf-ch{color:#93A9C8}
html[data-ccl-theme="dark"] .cclf #cclf-rfaq .cclf-fq[open] .cclf-ch{color:#FFD400}
html[data-ccl-theme="dark"] .cclf #cclf-rfaq .cclf-fq > summary:focus-visible{outline-color:#FFD400}
html[data-ccl-theme="dark"] .cclf .cclf-fqa p{color:#C9D6E8}

/* ---- the answers ---- */
html[data-ccl-theme="dark"] .cclf .cclf-anscall{background:rgba(255,212,0,.06);border-color:rgba(255,212,0,.30)}
html[data-ccl-theme="dark"] .cclf .cclf-anscic{background:rgba(255,212,0,.14);color:#FFD400}
html[data-ccl-theme="dark"] .cclf .cclf-anscall h3,
html[data-ccl-theme="dark"] .cclf .cclf-anscht h3{color:#fff}
html[data-ccl-theme="dark"] .cclf .cclf-anscall p,
html[data-ccl-theme="dark"] .cclf .cclf-anscht p{color:#A9BBD4}
html[data-ccl-theme="dark"] .cclf .cclf-ansedit{background:#FFD400;color:#101828;box-shadow:none}
html[data-ccl-theme="dark"] .cclf .cclf-ansedit:hover{background:#FFE566;color:#101828}
html[data-ccl-theme="dark"] .cclf .cclf-ansedit:focus-visible{outline-color:#FFD400}
html[data-ccl-theme="dark"] .cclf .cclf-ransband .cclf-agrp{background:#0E2545;border-color:rgba(255,255,255,.20);box-shadow:none}
html[data-ccl-theme="dark"] .cclf .cclf-at-a,
html[data-ccl-theme="dark"] .cclf .cclf-agrp:not(.cclf-at-a):not(.cclf-at-b):not(.cclf-at-c){--acc:#86B0E8;--accb:rgba(134,176,232,.14)}
html[data-ccl-theme="dark"] .cclf .cclf-at-b{--acc:#E7BE4A;--accb:rgba(231,190,74,.14)}
html[data-ccl-theme="dark"] .cclf .cclf-at-c{--acc:#8CC6D6;--accb:rgba(140,198,214,.14)}
html[data-ccl-theme="dark"] .cclf .cclf-ransband .cclf-agrp > .cclf-agh h4,
html[data-ccl-theme="dark"] .cclf .cclf-anscontact .cclf-agh h4{color:#fff}
html[data-ccl-theme="dark"] .cclf .cclf-agh p,
html[data-ccl-theme="dark"] .cclf .cclf-acrow dt{color:#93A9C8}
html[data-ccl-theme="dark"] .cclf .cclf-arow{border-bottom-color:rgba(255,255,255,.06)}
html[data-ccl-theme="dark"] .cclf .cclf-ransband .cclf-arow{border-top-color:rgba(255,255,255,.09)}
html[data-ccl-theme="dark"] .cclf .cclf-ransband .cclf-arow dt{color:#A9BBD4}
html[data-ccl-theme="dark"] .cclf .cclf-ransband .cclf-arow dd{color:#fff}
html[data-ccl-theme="dark"] .cclf .cclf-anscontact{--acc:#FFD400;--accb:rgba(255,212,0,.12);background:#0E2545;border-color:rgba(255,255,255,.20)}
html[data-ccl-theme="dark"] .cclf .cclf-acrow dd{background:rgba(255,255,255,.08);color:#fff}
html[data-ccl-theme="dark"] .cclf .cclf-anschange{background:#0E2545;box-shadow:inset 0 0 0 1px rgba(255,255,255,.20)}
html[data-ccl-theme="dark"] .cclf .cclf-anschic{background:#0A1A30;color:#FFD400;box-shadow:none}
}

/* Picture answers. Applies only where the guide adds .cclf-pics, which it does only for a
   question whose answers have pictures in PICS: stage questions here, and the first-screen
   hero and tile questions in the next block. Questions without pictures, and the existing
   .cclf-oic icons and terse rules, are untouched. Pictures keep their own fixed light
   palette, so they read the same in both themes. */
.cclf .cclf-stage .cclf-opts.cclf-pics{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.cclf .cclf-stage .cclf-opts.cclf-pics .cclf-opt{flex-wrap:wrap;align-items:center;align-content:flex-start;
  min-height:0;padding:10px 12px 12px 10px;gap:10px 12px}
.cclf .cclf-stage .cclf-opts.cclf-pics .cclf-opt.cclf-on{padding:9px 11px 11px 9px}
.cclf .cclf-stage .cclf-opts.cclf-pics .cclf-opt:not(:has(.cclf-opic)){align-content:center;min-height:96px}
.cclf .cclf-opic{display:block;flex:0 0 100%;order:-1;border-radius:9px;overflow:hidden;line-height:0;
  background:#EEF2F7;box-shadow:inset 0 0 0 1px rgba(22,41,74,.08)}
.cclf .cclf-opic svg{display:block;width:100%;height:auto;fill:#16294A;stroke:none;overflow:hidden}
.cclf .cclf-stage .cclf-opts.cclf-pics .cclf-otx{flex:1 1 0;min-width:0;font-size:16px;line-height:1.3}
.cclf .cclf-stage .cclf-opts.cclf-pics .cclf-opt.cclf-on .cclf-opic{box-shadow:0 0 0 2px var(--d-deep)}
html[data-ccl-theme="dark"] .cclf .cclf-stage .cclf-opts.cclf-pics .cclf-opt.cclf-on .cclf-opic{box-shadow:0 0 0 2px #FFD400}
@media (max-width:660px){
  .cclf .cclf-stage .cclf-opts.cclf-pics{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .cclf .cclf-stage .cclf-opts.cclf-pics .cclf-opt{padding:7px 8px 10px 7px;gap:8px}
  .cclf .cclf-stage .cclf-opts.cclf-pics .cclf-opt.cclf-on{padding:6px 7px 9px 6px}
  .cclf .cclf-stage .cclf-opts.cclf-pics .cclf-opt:not(:has(.cclf-opic)){min-height:72px}
  .cclf .cclf-stage .cclf-opts.cclf-pics .cclf-otx{font-size:14.5px}
  .cclf .cclf-stage .cclf-opts.cclf-pics .cclf-pick{width:20px;height:20px}
  .cclf .cclf-stage .cclf-opts.cclf-pics .cclf-box{width:20px;height:20px}
}

/* Pictures on the first-screen hero (pedestrian "What happened?") and on tile
   questions named in PICS (truck "What were you driving?"). Unmapped hero and tile
   questions, such as motor "What were you in or on?", get no .cclf-pics and are unchanged. */
.cclf .cclf-hero .cclf-opts.cclf-pics{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-top:0}
.cclf .cclf-hero .cclf-opts.cclf-pics .cclf-opt{min-height:0;padding:12px 12px 14px;justify-content:flex-start}
.cclf .cclf-hero .cclf-opts.cclf-pics .cclf-opt.cclf-on{padding:12px 12px 14px}
.cclf .cclf-hero .cclf-opts.cclf-pics .cclf-opic{margin:0 0 4px;box-shadow:none}
.cclf .cclf-hero .cclf-opts.cclf-pics .cclf-otx{margin-top:0;padding-top:8px;font-size:18px;line-height:1.25}
.cclf .cclf-hero .cclf-opts.cclf-pics .cclf-ochoose{margin-top:auto;padding-top:10px}
.cclf .cclf-hero .cclf-opts.cclf-pics .cclf-opt:not(:has(.cclf-opic)){justify-content:center}
.cclf .cclf-hero .cclf-opts.cclf-pics .cclf-opt.cclf-on .cclf-opic{box-shadow:0 0 0 2px var(--d-gold)}
.cclf .cclf-opts.cclf-pics .cclf-onum{display:none}
/* these cards are column flex boxes, so the picture takes its own height, not 100% of the card */
.cclf .cclf-hero .cclf-opts.cclf-pics .cclf-opic,.cclf .cclf-stage .cclf-opts.cclf-tiles.cclf-pics .cclf-opic{flex:none;width:100%}
.cclf .cclf-stage .cclf-opts.cclf-tiles.cclf-pics .cclf-opt{min-height:0;padding:12px 12px 14px}
.cclf .cclf-stage .cclf-opts.cclf-tiles.cclf-pics .cclf-opt.cclf-on{padding:11px 11px 13px}
.cclf .cclf-stage .cclf-opts.cclf-tiles.cclf-pics .cclf-otx{margin-top:0;padding-top:8px;font-size:19px}
@media (max-width:860px){
  .cclf .cclf-hero .cclf-opts.cclf-pics{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .cclf .cclf-hero .cclf-opts.cclf-pics .cclf-opt,
  .cclf .cclf-hero .cclf-opts.cclf-pics .cclf-opt.cclf-on{flex-direction:column;align-items:stretch;padding:7px 8px 10px;gap:6px}
  .cclf .cclf-hero .cclf-opts.cclf-pics .cclf-otx{padding-top:2px;font-size:14.5px}
  .cclf .cclf-hero .cclf-opts.cclf-pics .cclf-ochoose{display:none}
  .cclf .cclf-hero .cclf-opts.cclf-pics .cclf-opt.cclf-on .cclf-tick{position:absolute;top:12px;right:12px}
}
@media (max-width:660px){
  .cclf .cclf-stage .cclf-opts.cclf-tiles.cclf-pics .cclf-opt,
  .cclf .cclf-stage .cclf-opts.cclf-tiles.cclf-pics .cclf-opt.cclf-on{flex-direction:column;align-items:stretch;padding:7px 8px 10px;gap:6px}
  .cclf .cclf-stage .cclf-opts.cclf-tiles.cclf-pics .cclf-otx{padding-top:2px;font-size:14.5px}
  .cclf .cclf-stage .cclf-opts.cclf-tiles.cclf-pics .cclf-ochoose{display:none}
  .cclf .cclf-stage .cclf-opts.cclf-tiles.cclf-pics .cclf-opt.cclf-on .cclf-tick{position:absolute;top:12px;right:12px}
}
/* ===== CCL calculator print layout r3 - appended block (DRAFT for review; print only) =====
   Appended to the end of ccl-funnel.css 683fdb04; every rule above this line is unchanged. Print media only; nothing on
   screen changes. No wording, figures or status text is changed. Paper size and orientation are left to the visitor.
   r3 replaces the r2 block (a6fbd0f5) whole. Kept from r2: A sections may flow, B short blocks whole, C headings with their
   text, D white closing band and disclaimer, E screen-only controls and in-page links off paper, F page numbers, G answers
   stacked. Dropped: r2 rule H (landscape zoom .8), so all text prints at its normal size in both orientations.
   New in r3, for the splits and rendering faults found on the printed pages:
   I. The three cards under "What the number does not say on its own" sat three across and were each taller than a
      landscape page, so every card was cut and its "If it does not hold" panel landed on the next page. On paper they
      stack, one card per row, each laid out across the page (title and summary | what it turns on | if it does not
      hold) and kept whole.
   J. Other bounded cards that could be cut are kept whole: the two-track cells, the conference outcomes pair, the
      breakdown heads, the deadline clocks, the levers, the next steps, and the short detail sections.
   K. The breakdown's layout grids print as plain blocks and the two-track table as wrapped rows of two, so a row moves
      to the next page whole instead of being cut at the page edge. Its spacing is tightened on paper (padding, gaps,
      connector lines only; no text size changes) so the conference outcomes fit on one page with the panel above them.
   L. "What happens next": 683 prints that band white but keeps its light screen text colours, so its date, step titles
      and notes printed white or pale blue on white (invisible). They print in dark ink; the "already passed" notes stay
      red, in a darker red.
   C is narrowed: a heading is kept with its own lead paragraph but no longer forced onto the next card, because that
   rule made Chromium cut the card instead of moving it.
   Where a card does not fit the space left on a page it moves whole to the next page; an extra page is preferred over a
   broken card or smaller text. */
@page {
  margin: 12mm 12mm 15mm;
  @bottom-right { content: "Page " counter(page) " of " counter(pages); font: 8.5pt/1 Arial, Helvetica, sans-serif; color: #444; }
}
@media print {
  /* A. big sections may flow across pages */
  .cclf-result, .cclf-rbreak, .cclf-rnext, .cclf-ransband { break-inside: auto !important; }

  /* B. keep each short block on one page */
  .cclf-docbar, .cclf-scale, .cclf-assure,
  .cclf-tcell.cclf-th, .cclf-tcell.cclf-tft, .cclf-sg, .cclf-ftrig, .cclf-fgate, .cclf-gbefore, .cclf-fout, .cclf-fmerge, .cclf-fwarn,
  .cclf-nact, .cclf-s3, .cclf-snap, .cclf-clock, .cclf-cd h3, .cclf-cdsum, .cclf-cdon, .cclf-cdif, .cclf-cdkey, .cclf-agrp,
  .cclf-anshead, .cclf-anscontact, .cclf-rfoot, .cclf-rdisc, .cclf-rdisc p,
  #cclf-rfaq details, .cclf-fq, .cclf-rsec figure, .cclf-rsec li,
  .ccl-nwnf-wrap, .ccl-nwnf-note { break-inside: avoid; }

  /* C. keep labels and headings with what follows */
  .cclf-klab, .cclf-chn, .cclf-beat h3, .cclf-mast h2, .cclf-rsec h2, .cclf-rsec h3,
  .cclf-rnext h2, .cclf-anshead h2, #cclf-rfaq h3, .cclf-rdlab,
  .cclf-rsec .cclf-lead, .cclf-btop, .cclf-bsum, .cclf-fstem, .cclf-fjoin { break-after: avoid; }

  /* G. the answers list (two CSS columns of inline-block cards) is laid out as one unbreakable block, so it jumps
     whole to the next page and leaves most of a page empty. On paper the cards stack as ordinary blocks. */
  .cclf-ransband .cclf-ansg { columns: auto !important; column-count: 1 !important; }
  .cclf-ransband .cclf-agrp { display: block !important; width: auto !important; }

  /* the side navigation of the file is not needed on paper (its links are in-page jumps) */
  .cclf-spine { display: none !important; }
  .cclf-file { display: block !important; }

  /* D. closing band prints dark text on white, disclaimer included */
  .cclf-rclose { background: #fff !important; color: #000 !important; border-top: 1px solid #000 !important; }
  .cclf-rclose::before, .cclf-rclose::after { display: none !important; }
  .cclf-rclose *, .cclf-rclose .cclf-rfoot h3, .cclf-rclose .cclf-tmo p, .cclf-rclose .cclf-rdisc {
    color: #000 !important; text-shadow: none !important; box-shadow: none !important; }
  .cclf-rclose .cclf-p1, .cclf-rclose .cclf-tmo {
    background: none !important; border: 1px solid #999 !important; }
  .cclf-rclose .cclf-rdisc, .cclf-rclose .cclf-rdisc * { color: #222 !important; background: none !important; }
  .cclf-rclose .cclf-in { padding: 18pt 0 !important; }

  /* E. screen-only controls and their in-page links are left off paper. The phone number, "Prepared"
     date and every status line ("Early estimate" / "Assessment complete" / saved-enquiry card) still print. */
  #cclf-editans, #cclf-editans2, .cclf-ansedit, .cclf-anschange,
  #cclf-reviewme, #cclf-printme, #cclf-restart, .cclf-rfutil .cclf-minor,
  .cclf-rcta, .cclf-pskip, .cclf-resultwrap a[href="#"], .cclf-rtail a[href="#"],
  #cclf-gonow2, #cclf-rvgo, #cclf-rvback, .cclf-rvgoto, .cclf-rv1btns, .cclf-rv1goto { display: none !important; }

  /* I. "What the number does not say on its own": one card per row, laid out across the page, kept whole */
  .cclf-cdrow { display: block !important; }
  .cclf-cd { display: grid !important; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr; column-gap: 22px; align-items: start;
    margin: 0 0 14px; padding: 18px 20px !important; box-shadow: none !important; break-inside: avoid; }
  .cclf-cd > .cclf-cdtop { grid-column: 1; grid-row: 1; margin: 0 0 10px; }
  .cclf-cd > h3 { grid-column: 1; grid-row: 2; }
  .cclf-cd > .cclf-cdsum { grid-column: 1; grid-row: 3; }
  .cclf-cd > .cclf-cdon { grid-column: 2; grid-row: 1 / span 3; margin: 0; padding: 0 0 0 20px;
    border-top: 0; border-left: 1px solid #EDF1F7; }
  .cclf-cd > .cclf-cdif { grid-column: 3; grid-row: 1 / span 3; margin: 0; }
  .cclf-cdon ul { columns: auto !important; }
  .cclf-cdkey { margin-top: 4px; }

  /* J. other bounded cards and short paragraphs kept whole */
  .cclf-two > .cclf-tcell, .cclf-fouts, .cclf-hd, .cclf-lev, .cclf-lside, .cclf-lctx,
  .cclf-rsec-stand, .cclf-rsec-clock, .cclf-rsec-lev, .cclf-clocks, .cclf-steps3, .cclf-chwhen, .cclf-covers, .cclf-fact,
  .cclf-bclose, .cclf-clocknote, .cclf-clockcav, .cclf-rsec .cclf-lead, .cclf-chl, .cclf-klead { break-inside: avoid; }
  .cclf-rnext .cclf-steps3 { padding-top: 8px; }
  .cclf-fstem, .cclf-fjoin { break-inside: avoid; }   /* connector lines are not cut across pages */

  /* K. the breakdown's layout grids print as plain blocks */
  .cclf-beat { display: block !important; margin-top: 24px !important; }
  .cclf-beat ~ .cclf-beat { padding-top: 20px !important; margin-top: 20px !important; }
  .cclf-beat > .cclf-chn { float: left; margin: 0 22px 0 0; }
  .cclf-beat > h3 { padding-top: 12px; margin-left: 74px; }
  .cclf-beat > .cclf-chl { margin-left: 74px; }
  .cclf-beat > :not(.cclf-chn):not(h3):not(.cclf-chl) { clear: both; margin-top: 18px; }
  .cclf-fork { display: block !important; }
  .cclf-fork > * { margin-left: auto !important; margin-right: auto !important; }
  .cclf-rbreak .cclf-in { padding: 18pt 0 !important; }   /* the same band padding 683 gives the result and next-steps bands */
  .cclf-fstem-1 { height: 16px !important; }
  .cclf-fstem-2 { height: 30px !important; }
  .cclf-fstem-2 i { height: 10px !important; }
  .cclf-fstem-2 b { top: 9px !important; height: 21px !important; }
  .cclf-gbefore { padding-top: 14px !important; padding-bottom: 14px !important; }
  .cclf-fouts { max-width: none !important; gap: 0 26px !important; }
  .cclf-fout { padding: 16px 20px 14px !important; box-shadow: none !important; }
  .cclf-fout .cclf-fic { margin-bottom: 6px; }
  .cclf-fout h5 { margin-bottom: 10px; }
  .cclf-fout ul { padding-top: 10px; gap: 7px; }
  .cclf-fwarn { margin-top: 10px; padding: 9px 12px !important; }
  .cclf-fout .cclf-fwarn:last-of-type, .cclf-fout ul:last-of-type { margin-bottom: 12px; }
  .cclf-fseal { padding: 7px 12px !important; }

  /* L. "What happens next" prints in dark ink on its white paper band */
  .cclf-rnext .cclf-ncdate, .cclf-rnext .cclf-ncsub b, .cclf-rnext .cclf-ncsub sup, .cclf-rnext .cclf-s3 h3 { color: #000 !important; }
  .cclf-rnext .cclf-ncnote, .cclf-rnext .cclf-ncsub, .cclf-rnext .cclf-s3 .cclf-sbody { color: #333 !important; }
  .cclf-rnext .cclf-nceye, .cclf-rnext .cclf-ncwhat { color: #A5342F !important; }
  /* M. the tinted answers band ends with its last block: no trailing padding or margin left to spill onto a page of its own */
  .cclf-ransband > .cclf-in { padding-bottom: 0 !important; }
  .cclf-ransband > .cclf-in > :last-child, .cclf-ransband .cclf-ansg > :last-child { margin-bottom: 0 !important; }
}
/* K (wide paper only). The two-track table prints as wrapped rows of two, the "one opens the other" arrow between the
   two headings. On narrower paper (portrait A4) 683's own stacked layout (the whole of one claim, then the other) applies. */
@media print and (min-width: 821px) {
  .cclf-two { display: flex !important; flex-wrap: wrap; align-items: stretch; }
  .cclf-two > .cclf-tcell { width: calc((100% - 56px) / 2); box-sizing: border-box; }
  .cclf-two > .cclf-tcell.cclf-a:not(.cclf-th) { margin-right: 56px; }
  .cclf-two > .cclf-tgut { width: 56px; box-sizing: border-box; }
}
/* ===== end of CCL calculator print layout r3.1 block ===== */
/* ===== CCL calculator print layout r3.2 - addition to the r3.1 block (print only) =====
   Appended after the r3.1 block; every line above is unchanged. Print media only; nothing on screen changes. No wording,
   figures, status text, model or source changes. No @page size and no zoom.
   N. "What happens next" timeline: 683's print rule sets that section's inner padding to 0 at the sides, so the first
      numbered circle (left 0, with a 6px ring drawn as a box-shadow) started at the page's printable edge and its ring and
      left side were cut flat. The three steps are moved in by 8px so the whole circle and ring print inside the page.
   O. Outcome diagram: the connector lines between its boxes (the short stems and the dashed joins) are decoration.
      Each one is kept with the box below it, so wherever the page breaks, a line landed at the top of the next page
      joined to nothing above it (page 6 began with a partial dotted join; page 5 with a short stem). On paper the lines
      are not drawn: the stems keep their space so the boxes sit where they did, and the join under the two outcome
      cards is left out. The boxes, their wording and their order are unchanged. */
@media print {
  /* N */ .cclf-rnext .cclf-steps3 { padding-left: 8px; }
  /* O */ .cclf-fstem, .cclf-fstem * { visibility: hidden !important; }
  /* O */ .cclf-fjoin { display: none !important; }
}
/* ===== end of CCL calculator print layout r3.2 addition ===== */
/* ===== CCL calculator print layout r3.3 - addition to the r3.2 candidate (print only) =====
   Appended after the r3.2 addition; every line above is unchanged. Print media only; nothing on screen changes. No wording,
   font size, keep-together rule, answer model, routing or transport change.
   P. Timeline rail, single column. Rule N (r3.2) gave .cclf-rnext .cclf-steps3 8px of left padding so the circles' 6px ring
      is not clipped. The rail (.cclf-steps3::before, left:16px, 683 L857) is placed from that padding edge, so at the
      single-column width (683's own max-width:860px breakpoint) it ran about 7.75px left of the circle centres. Moving it
      by the same 8px (16px -> 24px) puts it back where 683 had it relative to the circles. Above 860px the rail is the
      horizontal one (left:16px; right:16px) and is not touched.
   Q. Gap above the merge box. Rule O (r3.2) removed .cclf-fjoin, which was the only space between the outcome cards and
      the merge box, so the box printed flush against them. Q gives the merge box a 26px top margin, the same height 683
      gives the trigger-to-gate stem (.cclf-fstem-1, L1047) and the narrow join (.cclf-fjoin at max-width:760px, L1102).
      No connector line comes back. */
@media print and (max-width: 860px) {
  /* P */ .cclf-rnext .cclf-steps3::before { left: 24px; }
}
@media print {
  /* Q */ .cclf-fjoin + .cclf-fmerge { margin-top: 26px; }
}
/* ===== end of CCL calculator print layout r3.3 addition ===== */
/* ===== CCL calculator print layout r3.3b - addition to the r3.3 candidate (print only) =====
   Appended after the r3.3 addition; every line above is unchanged. Print media only; nothing on screen changes. No wording,
   font size, card keep-together rule, answer model, routing or transport change.
   R. Status dot halo. The dot before "A date has already passed" (.cclf-nceye::before) has a 4px box-shadow ring and sits
      at the content edge, where main.cclf's overflow-x:clip cuts the ring's left side (landscape p9, portrait p8 under the
      faithful formstyle cascade). As rule N did for the timeline circles, the eyebrow gets 6px of left padding (ring plus
      2px) in the next-steps band only; the eyebrow text moves right by the same 6px.
   S. "The figure this section takes apart". In portrait the label (.cclf-bendeye) ended p5 and its figure began p6. The
      label is kept with what follows it. */
@media print {
  /* R */ .cclf-rnext .cclf-nceye { padding-left: 6px; }
  /* S */ .cclf-bendeye { break-after: avoid; }
}
/* ===== end of CCL calculator print layout r3.3b addition ===== */
/* ===== CCL calculator print layout r3.3c - addition to the r3.3b candidate (print only) =====
   Appended after the r3.3b addition; every line above is unchanged. Print media only; nothing on screen changes. No wording,
   font size, card keep-together rule, answer model, routing or transport change.
   T. Timeline rail, three-column (wide) layout. The r3 print rule .cclf-rnext .cclf-steps3 { padding-top: 8px } moves the
      circles down 8px but not the horizontal rail (.cclf-steps3::before, top:16px, 683 L853), which is placed from the
      padding edge, so on paper the rail crossed the upper part of the circles. Above 683's 860px breakpoint the rail moves
      down by the same 8px (16px -> 24px), mirroring rule P for the single-column rail. */
@media print and (min-width: 861px) {
  /* T */ .cclf-rnext .cclf-steps3::before { top: 24px; }
}
/* ===== end of CCL calculator print layout r3.3c addition ===== */
/* ===== CCL calculator print layout r3.3d - addition to the r3.3c candidate (print only) =====
   Appended after the r3.3c addition; every line above is unchanged. Print media only; nothing on screen changes. No wording,
   font size, card keep-together rule, answer model, routing or transport change.
   U. Gap above the closing section. In print the answers band's inner box has no bottom padding, so its last block (the
      contact card when present) ends exactly on the closing section's 1px black top rule (landscape p22). The band's inner
      box gets 18px of bottom padding, the same as the contact card's own top margin (18px). Both blocks stay whole. */
@media print {
  /* U */ .cclf-ransband .cclf-in { padding-bottom: 18px !important; }
}
/* ===== end of CCL calculator print layout r3.3d addition ===== */
/* ===== CCL calculator print layout r3.3e - addition to the r3.3d candidate (print only) =====
   Appended after the r3.3d addition; every line above is unchanged. Print media only; nothing on screen changes. No wording,
   font size, answer model, routing or transport change. Each rule only avoids a page break at a boundary; none makes a block
   taller than a page unbreakable.
   V. Section heading kept with its content. A section's number, heading (both already break-after: avoid in 683) and intro
      (.cclf-chl) could end a page with the section's first block on the next (portrait p3, section 2; portrait p5, section 3).
      The intro is kept with the block that follows it. (Proposal-V, accepted by Codex 06:56Z.)
   W. Breakdown group heading kept with its first item. With V in place, portrait p6 ended with "Won or lost on evidence" and
      its 97% share, and the group's explanatory paragraph began p7. Where 683 stacks the group (max-width 980px, 683 L1251)
      its heading block (.cclf-ghead: title, share, paragraph, about 131px) is kept whole and with the first item after it. Not
      applied in the wide layout, where the heading sits beside the items: a scratch render with W there carried the avoid to
      the whole row and split the closing paragraph after the breakdown (landscape p8/p9).
   X. Two-track damages-claim card kept whole where 683 stacks the two tracks (max-width 820px, 683 L977). There the
      damages-claim card's four cells (header, "Where yours stands", time limit, note; about 650px together, against about
      1,020px of page) could split after the header (portrait p2/p3). The connector ("One opens the other"), the card's header
      and its middle cells are kept with the cell after them, so the connector and the whole card move together. The notice
      card above is unchanged. The wide layout's aligned side-by-side table is not touched. */
@media print {
  /* V */ .cclf-beat > .cclf-chl { break-after: avoid; }
}
@media print and (max-width: 980px) {
  /* W */ .cclf-bgrp > .cclf-ghead { break-inside: avoid; break-after: avoid; }
}
@media print and (max-width: 820px) {
  /* X */ .cclf-two > .cclf-tgut, .cclf-two > .cclf-b:not(.cclf-tft) { break-after: avoid; }
}
/* ===== end of CCL calculator print layout r3.3e addition ===== */
/* ===== CCL calculator print layout r3.3f - addition to r3.3e (print only) =====
   Needs guide print-r3.3f (routing amend-2 57d9a7e0 + the paintPaths row groups). With that guide the two-track cells sit in
   row groups: thead.cclf-tgrp.cclf-tgrp-h > .cclf-tgrow (both headers + connector), then div.cclf-tgrp > .cclf-tgrow per row,
   with an empty .cclf-tsp under the connector. The guide sets every group to display:contents and every spacer to
   display:none inline, so screen and portrait keep 683's grid and stacked layouts. */
@media print {
  /* J and X, re-targeted: the cells are no longer direct children of .cclf-two */
  #cclf-rpaths .cclf-tgrow > .cclf-tcell { break-inside: avoid; }
}
@media print and (max-width: 820px) {
  #cclf-rpaths .cclf-tgrow > .cclf-tgut, #cclf-rpaths .cclf-tgrow > .cclf-b:not(.cclf-tft) { break-after: avoid; }
}
/* Y (wide paper). The aligned two-column table prints as a table whose first row (both existing card titles and the
   connector) is a repeating header: if the table continues on the next page, that row prints again at its top.
   Same widths as K: two half columns with a 56px connector column. No wording, font or screen change. */
@media print and (min-width: 821px) {
  #cclf-rpaths > .cclf-two { display: table !important; width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; }
  #cclf-rpaths > .cclf-two > .cclf-tgrp-h { display: table-header-group !important; }
  #cclf-rpaths > .cclf-two > .cclf-tgrp:not(.cclf-tgrp-h) { display: table-row-group !important; }
  #cclf-rpaths > .cclf-two > .cclf-tgrp > .cclf-tgrow { display: flex !important; align-items: stretch; break-inside: avoid; }
  #cclf-rpaths .cclf-tgrow > .cclf-tcell { width: calc((100% - 56px) / 2); flex: none; box-sizing: border-box; margin: 0; }
  /* the connector's turned label is longer than the header cells are tall; contain: size keeps it from setting the header
     row's height (so the row stays short enough for Chromium to repeat it: at most a quarter of the page), and the label
     runs on into the empty gutter below, as it does on screen, where the connector spans every row */
  #cclf-rpaths .cclf-tgrow > .cclf-tgut { width: 56px; flex: none; box-sizing: border-box; contain: size; overflow: visible; }
  #cclf-rpaths .cclf-tgrow > .cclf-tsp { display: block !important; width: 56px; flex: none; }
  #cclf-rpaths .cclf-tgrow > .cclf-tgut span { white-space: nowrap; }
  /* 683's own compact table spacing (its <=820px values), so the header row and each stage take less height */
  #cclf-rpaths .cclf-tgrow > .cclf-tcell { padding: 16px 18px 18px; }
  #cclf-rpaths .cclf-tgrow > .cclf-th { padding-top: 20px; gap: 13px; }
  #cclf-rpaths .cclf-tgrow .cclf-tic { width: 44px; height: 44px; }
  #cclf-rpaths .cclf-tgrow .cclf-tic svg { width: 22px; height: 22px; }
  /* each body row prints whole (rule above); the table may start on a new page after the section's intro (V is lifted for
     this one intro, else Chromium cuts a stage), and the time-limit row stays with the closing note */
  .cclf-beat:has(> #cclf-rpaths) > .cclf-chl { break-after: auto; }
  #cclf-rpaths > .cclf-two > .cclf-tgrp:has(+ .cclf-tgrp > .cclf-tgrow > .cclf-tft) { break-after: avoid; }
}
/* ===== end of CCL calculator print layout r3.3f addition ===== */
/* ===== CCL calculator print layout r3.3g - addition to r3.3f (print only) =====
   Needs guide print-r3.3g. Its first group (the repeating thead) now holds a compact repeat of each existing card title
   (.cclf-trep: icon, eyebrow, title); the full header cells (.cclf-th, with their descriptions) are the first body row. */
@media print {
  /* closing note under the damages card: print words for the figure's place; screen words hidden in print */
  #cclf-rpaths .cclf-pscr { display: none !important; }
  #cclf-rpaths .cclf-pprn { display: inline !important; }
}
@media print and (min-width: 821px) {
  /* the compact title repeat closes up onto the description row below it */
  #cclf-rpaths .cclf-tgrow > .cclf-trep { display: flex !important; padding-bottom: 6px; align-items: center; }
  #cclf-rpaths .cclf-tgrow > .cclf-trep h4 { margin-bottom: 0; }
  /* the full header cell prints its description only (icon space kept so the text lines up under the title); its top
     edge, stripe and rounded corners belong to the repeat row above it */
  #cclf-rpaths .cclf-tgrow > .cclf-th:not(.cclf-trep) { padding-top: 0; border-top: 0; border-radius: 0; }
  #cclf-rpaths .cclf-tgrow > .cclf-th:not(.cclf-trep)::before { display: none; }
  #cclf-rpaths .cclf-tgrow > .cclf-th:not(.cclf-trep) .cclf-tic { visibility: hidden; height: 0; }
  #cclf-rpaths .cclf-tgrow > .cclf-th:not(.cclf-trep) .cclf-teye,
  #cclf-rpaths .cclf-tgrow > .cclf-th:not(.cclf-trep) h4 { display: none; }
  /* the connector now sits in the repeating title row (contain: size from r3.3f keeps it from setting that row's height);
     its turned label wraps to a second line (683's <=820px arrow size) so it ends beside the descriptions instead of hanging
     below the cards */
  #cclf-rpaths .cclf-tgrow > .cclf-tgut { padding-top: 10px; }
  #cclf-rpaths .cclf-tgrow > .cclf-tgut svg { flex: none; width: 24px; height: 24px; }
  #cclf-rpaths .cclf-tgrow > .cclf-tgut span { white-space: normal; display: block; flex: none; height: 104px; }
  /* the "where yours stands" row may continue on the next page under the repeated titles, at stage boundaries only
     (each stage already avoids a break), never straight after its label */
  #cclf-rpaths > .cclf-two > .cclf-tgrp > .cclf-tgrow:has(> .cclf-tst),
  #cclf-rpaths .cclf-tgrow > .cclf-tst { break-inside: auto; }
  #cclf-rpaths .cclf-tst > .cclf-rl { break-after: avoid; }
  /* r3.3f lifted V for this intro; with the table now able to continue, V applies again */
  .cclf-beat:has(> #cclf-rpaths) > .cclf-chl { break-after: avoid; }
}
/* ===== end of CCL calculator print layout r3.3g addition ===== */
/* ===== CCL calculator print layout r3.3h - addition to r3.3g (print only, CSS only; guide unchanged) =====
   Wide paper: the table's one-line footnote ("Both dates run ...") stays with the table. Fine packing only: tighter
   padding in the body rows, a shorter gap between stages and before the footnote. No font size or wording change. */
@media print and (min-width: 821px) {
  #cclf-rpaths .cclf-tgrow > .cclf-tcell:not(.cclf-th) { padding-top: 12px; padding-bottom: 14px; }
  #cclf-rpaths .cclf-tgrow > .cclf-tst .cclf-sg:not(:last-child) { padding-bottom: 14px; }
  #cclf-rpaths > .cclf-tfoot { margin-top: 8px; break-before: avoid; }
}
/* ===== end of CCL calculator print layout r3.3h addition ===== */

/* S4 actual landscape print follow-up: spacing only; retain type sizes,
   whole cards and the existing repeated two-column claim headers. */
@media print and (min-width: 821px) {
  .cclf-result .cclf-docbar { padding-bottom: 10px; margin-bottom: 12px; }
  .cclf-result .cclf-rhead { margin-bottom: 12px; }
  .cclf-result .cclf-scale { margin-top: 16px; }
  .cclf-result .cclf-sub { margin-top: 12px; }
  .cclf-result .cclf-assure { margin-top: 14px; padding-top: 10px; }

  #cclf-beat-2 .cclf-fork > .cclf-ftrig { padding: 14px 20px; }
  #cclf-beat-2 .cclf-fork > .cclf-fgate { padding: 10px 20px; }
  #cclf-beat-2 .cclf-fork > .cclf-fstem-1 { height: 6px !important; }

  #cclf-s-clock .cclf-clock { padding: 14px 24px; }
  #cclf-s-clock .cclf-clock header { margin-bottom: 10px; }
  #cclf-s-clock .cclf-cstat { margin-top: 8px; padding-top: 8px; }
  #cclf-s-clock .cclf-clocknote { margin-top: 10px; padding: 10px 18px; break-after: avoid; }
  #cclf-s-clock .cclf-clockcav { margin-top: 8px; }
}

/* Actual Product portrait: keep existing content at its semantic boundaries.
   No font, wording, value, screen or wide-print layout change. */
@media print {
  body.cclf-page .ccl-bar-switch { display: none !important; }
}
@media print and (max-width: 820px) {
  /* Mirror the existing negligence-card chain for the consumer-law card. */
  #cclf-rpaths .cclf-tgrow > .cclf-a:not(.cclf-tft) { break-after: avoid; }
  /* The composition bar and its own colour/percentage key are one unit. */
  .cclf-bsum { break-inside: avoid; page-break-inside: avoid; }
  /* Keep the next-date note together with its following deadline qualification. */
  #cclf-s-clock .cclf-clocknote { break-after: avoid; }
}

/* Portrait: keep each bounded damage head's title, bar, explanation and answer strip together. */
@media print and (max-width: 820px) {
  #cclf-rbuild .cclf-hd > :not(:last-child) { break-after: avoid; page-break-after: avoid; }
}

/* Portrait: damage cards use block flow inside the existing stacked group. */
@media print and (max-width: 820px) {
  #cclf-rbuild .cclf-gheads { display: block !important; }
}

/* Portrait: let a whole damage card move after its complete group introduction. */
@media print and (max-width: 820px) {
  #cclf-rbuild .cclf-bgrp > .cclf-ghead { break-after: auto; page-break-after: auto; }
}