@font-face{font-family:"Arimo";src:url(/fonts/arimo/arimo-variable.6a22ce0b.woff2) format("woff2");font-display:swap;font-weight:400 700;font-style:normal}@font-face{font-family:"Arimo Fallback";src:local("Arial");ascent-override:90.53%;descent-override:21.19%;line-gap-override:3.27%;size-adjust:100.00%}:root{color-scheme:light;--fx-accent:#8C6500;--fx-accent-2:#848C00;--fx-ink:#004BE0;--fx-bg:#FFFFFF;--fx-card:#FFFFFF;--fx-line:#E0E9FB;--fx-muted:#3570E6;--fx-on-accent:#F5F5F5;--fx-field:#FFFFFF;--fx-field-border:#E5E7EB;--fx-field-text:#004BE0;--fx-option-surface:#DED2B5;--fx-option-label-bar:#8C6500;--fx-option-label-text:#F5F5F5;--fx-danger:#B42318;--fx-success:#067647;--fx-button-hover:#7E5B00;--fx-outline-hover:#8C65001A;--fx-display-font:"Arimo", "Arimo Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--fx-body-font:"Arimo", "Arimo Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--fx-radius:12px;--fx-media-radius:12px;--fx-col:448px;--fx-col-wide:896px;--fx-gutter:24px;--fx-media-max:none;--fx-gap:16px;--fx-stack:16px;--fx-control-h:56px;--fx-button-h:58px;--fx-tile-media-h:132px;--fx-logo-h:48px;--fx-error-h:24px;--fx-question-size:30px;--fx-question-lh:1.15;--fx-question-track:-0.02em;--fx-question-weight:700;--fx-headline-size:24px;--fx-headline-lh:1.25;--fx-headline-track:-0.02em;--fx-headline-weight:700;--fx-body-size:20px;--fx-body-lh:1.25;--fx-body-track:0em;--fx-body-weight:400;--fx-caption-size:12px;--fx-caption-lh:1.5;--fx-caption-track:0em;--fx-caption-weight:400;--fx-list-item-size:16px;--fx-list-item-lh:1.4;--fx-list-item-track:0em;--fx-list-item-weight:400}@media (min-width:640px){:root{--fx-col:576px;--fx-question-size:36px;--fx-question-lh:1.15;--fx-question-track:-0.02em;--fx-question-weight:700;--fx-headline-size:30px;--fx-headline-lh:1.2;--fx-headline-track:-0.02em;--fx-headline-weight:700;--fx-body-size:20px;--fx-body-lh:1.25;--fx-body-track:0em;--fx-body-weight:400;--fx-caption-size:12px;--fx-caption-lh:1.5;--fx-caption-track:0em;--fx-caption-weight:400;--fx-list-item-size:16px;--fx-list-item-lh:1.4;--fx-list-item-track:0em;--fx-list-item-weight:400}}@media (min-width:1024px){:root{--fx-col:896px;--fx-gutter:0px;--fx-media-max:608px;--fx-media-radius:16px;--fx-question-size:48px;--fx-question-lh:1.15;--fx-question-track:-0.02em;--fx-question-weight:700;--fx-headline-size:36px;--fx-headline-lh:1.15;--fx-headline-track:-0.02em;--fx-headline-weight:700;--fx-body-size:24px;--fx-body-lh:1.25;--fx-body-track:0em;--fx-body-weight:400;--fx-caption-size:12px;--fx-caption-lh:1.5;--fx-caption-track:0em;--fx-caption-weight:400;--fx-list-item-size:16px;--fx-list-item-lh:1.4;--fx-list-item-track:0em;--fx-list-item-weight:400}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fx-bg);color:var(--fx-ink);font-family:var(--fx-body-font);font-size:16px;line-height:1.5}
img,svg{max-width:100%;height:auto;display:block}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--fx-accent);outline-offset:2px}

.fx-page{min-height:100dvh;display:flex;flex-direction:column;overflow-x:hidden}
.fx-main{flex:1 0 auto;width:100%;max-width:var(--fx-col);margin-inline:auto;padding:20px var(--fx-gutter) 40px;display:flex;flex-direction:column;gap:var(--fx-stack)}
.fx-main[data-wide="true"]{max-width:var(--fx-col-wide)}

/* Logo: inside the column on mobile, pinned to the top left of the viewport at
   desktop (spec 5.4.1, measured 205x96 source rendered at 103x48). */
.fx-logo{height:var(--fx-logo-h);width:auto;object-fit:contain;object-position:left center}
.fx-logo-slot{display:flex;justify-content:flex-start}
@media (min-width:1024px){
  .fx-logo-slot[data-pin="pinned"]{position:absolute;top:20px;left:24px;z-index:2}
  .fx-logo-slot[data-pin="center"]{justify-content:center}
}

/* The five type roles. */
.fx-question{font-family:var(--fx-display-font);font-size:var(--fx-question-size);line-height:var(--fx-question-lh);letter-spacing:var(--fx-question-track);font-weight:var(--fx-question-weight);margin:0}
.fx-headline{font-family:var(--fx-display-font);font-size:var(--fx-headline-size);line-height:var(--fx-headline-lh);letter-spacing:var(--fx-headline-track);font-weight:var(--fx-headline-weight);margin:0}
.fx-body{font-size:var(--fx-body-size);line-height:var(--fx-body-lh);letter-spacing:var(--fx-body-track);font-weight:var(--fx-body-weight);margin:0}
.fx-caption{font-size:var(--fx-caption-size);line-height:var(--fx-caption-lh);font-weight:var(--fx-caption-weight);margin:0}
.fx-list-item{font-size:var(--fx-list-item-size);line-height:var(--fx-list-item-lh);font-weight:var(--fx-list-item-weight);margin:0}
.fx-al-left{text-align:left}
.fx-al-center{text-align:center}
.fx-rich a{color:inherit;text-underline-offset:2px}

/* Option tiles (spec 5.4.1): two across on mobile, four across at desktop, 16 px
   gap, the label as ONE text run so a word cannot split across two weights, and
   a width floor with an automatic shrink one size before wrapping. */
.fx-tiles{display:flex;flex-wrap:wrap;gap:var(--fx-gap);justify-content:center;align-items:stretch}
.fx-tile{flex:0 0 calc((100% - var(--fx-gap)) / 2);display:flex}
@media (min-width:1024px){.fx-tile{flex-basis:calc((100% - 3 * var(--fx-gap)) / 4)}}
.fx-tile-button{width:100%;display:flex;flex-direction:column;background:var(--fx-option-surface);border:0;border-radius:var(--fx-radius);overflow:hidden;padding:0;cursor:pointer;text-align:center}
.fx-tile-media{flex:1 1 auto;min-height:var(--fx-tile-media-h);display:grid;place-items:center;padding:16px}
.fx-tile-media img,.fx-tile-media svg{width:56px;height:56px}
.fx-tile-label{background:var(--fx-option-label-bar);color:var(--fx-option-label-text);font-size:var(--fx-body-size);line-height:var(--fx-body-lh);font-weight:700;padding:8px 6px;
  /* Shrink before wrap: one text run, no hyphenation, and a font size that
     steps down rather than breaking "Independence" across two lines the way the
     live funnel does (spec 5.4.1, defect 3). */
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-tile-label[data-long="true"]{font-size:calc(var(--fx-body-size) * 0.8)}
.fx-tile-label[data-long="wrap"]{white-space:normal;font-size:calc(var(--fx-body-size) * 0.8);text-overflow:clip}
.fx-tile-button[aria-pressed="true"]{box-shadow:inset 0 0 0 3px var(--fx-accent)}
.fx-tile-button:active{transform:scale(0.985)}

/* List and pill option styles, for a brand that does not want cards. */
.fx-options-list .fx-tile{flex-basis:100%}
.fx-options-list .fx-tile-button{flex-direction:row;align-items:center;gap:12px;padding:12px 16px;background:var(--fx-card);border:1px solid var(--fx-line);text-align:left}
.fx-options-list .fx-tile-label{background:none;color:var(--fx-ink);padding:0;white-space:normal}
.fx-options-pill .fx-tile{flex-basis:auto}
.fx-options-pill .fx-tile-button{border-radius:999px;padding:10px 18px;background:var(--fx-option-surface)}
.fx-options-pill .fx-tile-media{display:none}
.fx-options-pill .fx-tile-label{background:none;color:var(--fx-ink);padding:0}

/* Buttons (spec 5.4.1: full column width, 12 px radius, 58 px tall, 20/700). */
.fx-button{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:var(--fx-button-h);padding:12px 20px;border:0;border-radius:var(--fx-radius);background:var(--fx-accent);color:var(--fx-on-accent);font-size:var(--fx-body-size);font-weight:700;line-height:1.2;cursor:pointer;text-decoration:none}
.fx-button:hover{background:var(--fx-button-hover)}
.fx-button[data-variant="outline"]{background:transparent;color:var(--fx-accent);box-shadow:inset 0 0 0 1px var(--fx-accent)}
.fx-button[data-variant="outline"]:hover{background:var(--fx-outline-hover)}
.fx-button[disabled]{opacity:.55;cursor:not-allowed}

/* Fields (spec 5.4.1: 56 px tall, 12 px radius, 1 px border, 16 px text, a
   leading icon inside the wrapper, and the error message in RESERVED space so
   the layout does not shift). */
.fx-field{display:flex;flex-direction:column;gap:6px}
.fx-field-label{font-size:14px;font-weight:700}
.fx-field-box{position:relative;display:flex;align-items:center;background:var(--fx-field);border:1px solid var(--fx-field-border);border-radius:var(--fx-radius);min-height:var(--fx-control-h)}
.fx-field-box[data-invalid="true"]{border-color:var(--fx-danger)}
.fx-field-icon{flex:0 0 auto;display:grid;place-items:center;width:44px;height:var(--fx-control-h)}
.fx-field-icon img,.fx-field-icon svg{width:20px;height:20px}
.fx-field-box input,.fx-field-box textarea,.fx-field-box select{flex:1 1 auto;min-width:0;border:0;background:transparent;color:var(--fx-field-text);font:inherit;font-size:16px;padding:0 14px;height:calc(var(--fx-control-h) - 2px);outline:none}
.fx-field-box[data-icon="true"] input,.fx-field-box[data-icon="true"] textarea,.fx-field-box[data-icon="true"] select{padding-left:0}
.fx-field-box textarea{height:auto;min-height:130px;padding:14px;resize:vertical}
.fx-field-status{flex:0 0 auto;display:grid;place-items:center;width:40px;height:var(--fx-control-h)}
.fx-field-error{min-height:var(--fx-error-h);font-size:14px;line-height:var(--fx-error-h);color:var(--fx-danger);display:flex;align-items:center;gap:6px}
.fx-field-error:empty::before{content:"";display:block}
.fx-consent{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.4}
.fx-consent input{margin-top:2px;width:20px;height:20px;flex:0 0 auto}

/* The Turnstile container (task 1.6). It has NO height of its own: the widget
   renders in interaction-only mode, so on almost all traffic the div stays
   empty and must take no vertical space at all. When Cloudflare does draw a
   challenge the iframe gives the box its own height and the CTA moves down,
   which is the one time that movement is what the visitor wants. */
.fx-turnstile:empty{display:none}
.fx-turnstile{display:flex;justify-content:center}
/* The submit failure line (spec 6.4's "plain please try again with the phone
   number"). Bordered rather than coloured text alone, so it reads as a state
   and not as small print. */
.fx-submit-error{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border:1px solid var(--fx-danger);border-radius:var(--fx-radius,10px);color:var(--fx-ink)}
.fx-submit-error .fx-body{margin:0;color:var(--fx-danger)}
.fx-submit-error .fx-caption{margin:0;color:var(--fx-muted)}
/* An outcome SEQUENCE (task 1.6, decision 5): every result and content step in
   order, one under the next, scrolling. The gap is the step stack's own, so
   two outcome pages read as one document rather than two crammed screens. */
.fx-outcome-step{display:flex;flex-direction:column;gap:var(--fx-stack)}
.fx-outcome-step[data-first="false"]{margin-top:var(--fx-stack)}

/* Media. A column image takes the media radius; the postcode step's map runs
   full bleed, which is the one image on the live funnel that does. */
.fx-media{border-radius:var(--fx-media-radius);overflow:hidden}
.fx-media[data-bleed="column"]{max-width:var(--fx-media-max);margin-inline:auto;width:100%}
/* The wrapper carries the aspect ratio (see components/blocks.tsx), so the
   image FILLS it and a broken source cannot collapse the box. */
.fx-media img{width:100%;height:100%;object-fit:inherit}
.fx-media[data-bleed="full"]{border-radius:0;width:100vw;max-width:none;margin-left:calc(50% - 50vw)}

/* The result page's numbered steps: one column on mobile, a 2 by 2 grid at
   desktop, keycap in a left column at 48 px (spec 5.4.1). */
.fx-steps{list-style:none;margin:0;padding:0;display:grid;gap:20px}
@media (min-width:1024px){.fx-steps{grid-template-columns:1fr 1fr;column-gap:32px}}
.fx-step-item{display:flex;gap:14px;align-items:flex-start}
.fx-step-key{flex:0 0 auto;width:48px;height:48px;display:grid;place-items:center;border-radius:8px;background:var(--fx-option-surface);color:var(--fx-option-label-bar);font-weight:700;font-size:20px}
.fx-step-body strong{font-weight:700}

.fx-divider{border:0;border-top:1px solid var(--fx-line);margin:8px 0;width:100%}

/* The hold step (spec 5.2): a bounded wait with a live region, never a spinner
   that a screen reader cannot see. */
.fx-hold{display:flex;flex-direction:column;align-items:center;gap:16px;padding:40px 0}
.fx-hold-dial{width:48px;height:48px;border-radius:50%;border:4px solid var(--fx-line);border-top-color:var(--fx-accent)}

.fx-footer{flex:0 0 auto;padding:24px var(--fx-gutter) 32px;text-align:center;color:var(--fx-muted);font-size:var(--fx-caption-size);line-height:var(--fx-caption-lh)}
.fx-footer a,.fx-footer button{color:inherit;background:none;border:0;padding:0;text-decoration:underline;cursor:pointer;font:inherit}
.fx-footer-sep{margin:0 8px}

.fx-progress{height:6px;border-radius:999px;background:var(--fx-line);overflow:hidden}
.fx-progress-fill{height:100%;background:var(--fx-accent)}
.fx-progress-dots{display:flex;gap:6px;justify-content:center}
.fx-progress-dot{width:8px;height:8px;border-radius:50%;background:var(--fx-line)}
.fx-progress-dot[data-on="true"]{background:var(--fx-accent)}

.fx-back{align-self:flex-start;background:none;border:0;padding:4px 0;color:var(--fx-muted);cursor:pointer;font-size:14px;text-decoration:underline}

/* The returning-visitor offer (spec 5.7). OUT OF FLOW so it cannot shift the
   page: it appears a paint after hydration, and anything inserted into the
   flow at that moment moves the content under it. CLS measures 0.0000 and this
   is one of the reasons it still does. */
.fx-resume{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;flex-direction:column;gap:10px;padding:16px var(--fx-gutter,24px) calc(16px + env(safe-area-inset-bottom));background:var(--fx-card);border-top:1px solid var(--fx-line);box-shadow:0 -4px 16px #00000014}
.fx-resume-text{margin:0;font-size:var(--fx-body-size);color:var(--fx-ink)}
.fx-resume-actions{display:flex;flex-direction:column;gap:8px}
@media (min-width:640px){.fx-resume{align-items:center}.fx-resume-actions{flex-direction:row}.fx-resume .fx-button{width:auto;padding-left:28px;padding-right:28px}}

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

/* Consent (task 1.5, spec 6.5 and 10.1).

   THE BAR IS NON-BLOCKING AND OUT OF FLOW, which spec 6.5 requires in as many
   words: "a non-blocking bottom bar over a fully rendered step 1". Fixed to the
   bottom like `.fx-resume`, and for the same reason: it appears a paint after
   hydration, and anything inserted into the FLOW at that moment moves the
   content under it, which is a layout shift on the one page whose CLS is
   measured at zero.

   REJECT IS AS EASY AS ACCEPT (spec 10.1). The two buttons are the same
   element, the same size and the same weight; only the fill differs, and the
   outline variant is the existing `data-variant="outline"` rather than a
   quieter one invented here. A reject control that is smaller, greyer or a bare
   text link is the dark pattern every one of these regimes names by name. */
.fx-consent{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;flex-direction:column;gap:12px;padding:16px var(--fx-gutter,24px) calc(16px + env(safe-area-inset-bottom));background:var(--fx-card);border-top:1px solid var(--fx-line);box-shadow:0 -4px 16px #00000014;max-height:80vh;overflow-y:auto}
.fx-consent-text{margin:0;font-size:var(--fx-caption-size);line-height:var(--fx-caption-lh);color:var(--fx-ink)}
.fx-consent-actions{display:flex;flex-direction:column;gap:8px}
.fx-consent-purposes{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;border:0}
.fx-consent-purpose{display:flex;gap:10px;align-items:flex-start}
.fx-consent-purpose input{margin:2px 0 0;flex:0 0 auto;width:18px;height:18px}
.fx-consent-purpose-label{display:block;font-size:var(--fx-body-size);color:var(--fx-ink)}
.fx-consent-purpose-body{display:block;margin-top:2px;font-size:var(--fx-caption-size);line-height:var(--fx-caption-lh);color:var(--fx-muted)}
.fx-consent-note{margin:0;font-size:var(--fx-caption-size);line-height:var(--fx-caption-lh);color:var(--fx-muted)}
.fx-consent-title{margin:0;font-size:var(--fx-body-size);font-weight:600;color:var(--fx-ink)}
@media (min-width:640px){.fx-consent{align-items:stretch}.fx-consent-actions{flex-direction:row;justify-content:flex-end}.fx-consent .fx-button{width:auto;padding-left:28px;padding-right:28px}}

/* Motion (spec 5.4.1: the live theme's transition is `slide`).
   React 19.2.7 exports no ViewTransition component and Next 15.5.25 wires none,
   verified in this repo's own install, so the slide is a CSS animation keyed to
   the step. `prefers-reduced-motion` wins over `theme.motion` in every case:
   the rule below only ever ADDS animation, and it is inside the
   no-preference query. */
@media (prefers-reduced-motion:no-preference){
  .fx-step[data-motion="full"]{animation:fx-slide 240ms cubic-bezier(.2,.6,.2,1)}
  .fx-step[data-motion="subtle"]{animation:fx-fade 160ms ease}
  .fx-hold-dial{animation:fx-spin 900ms linear infinite}
  .fx-tile-button{transition:transform 90ms ease,box-shadow 120ms ease}
  .fx-button{transition:background-color 120ms ease}
}
@keyframes fx-slide{from{opacity:0;transform:translate3d(24px,0,0)}to{opacity:1;transform:none}}
@keyframes fx-fade{from{opacity:0}to{opacity:1}}
@keyframes fx-spin{to{transform:rotate(360deg)}}