/* =====================================================================
   FTC Forms — front end
   Two layouts share one stylesheet:
     .is-layout-band   full-width dark band, two columns      (Contact, Free Audit)
     .is-layout-panel  rounded dark panel on a light page     (Quote)
   Colour tokens are injected per form from the dashboard.
   Everything is prefixed .ftc-f so nothing leaks into page content.
   ===================================================================== */
.ftc-forms{
  --ftc-radius-s:6px; --ftc-radius-m:10px; --ftc-radius-l:16px; --ftc-radius-xl:20px; --ftc-radius-panel:22px; --ftc-radius-pill:999px;
  --ftc-font-display:"Schibsted Grotesk","Helvetica Neue",Arial,sans-serif;
  --ftc-font-body:"Figtree","Segoe UI",Roboto,Arial,sans-serif;
  --ftc-wrap:1180px;
  --ftc-safe-l:env(safe-area-inset-left,0px); --ftc-safe-r:env(safe-area-inset-right,0px);
  font-family:var(--ftc-font-body); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.ftc-forms,.ftc-forms *,.ftc-forms *::before,.ftc-forms *::after{box-sizing:border-box}
.ftc-forms ul{list-style:none; margin:0; padding:0}
.ftc-forms li{margin:0; padding:0}
.ftc-forms li::marker{content:none}
.ftc-forms p,.ftc-forms h1,.ftc-forms h2,.ftc-forms h3,.ftc-forms fieldset,.ftc-forms legend{margin:0; padding:0}
.ftc-forms fieldset{border:0; min-width:0}
.ftc-forms a{color:inherit; text-decoration:none}
.ftc-forms img{max-width:100%; height:auto}
.ftc-f-sr{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap}
.ftc-f-wrap{width:100%; max-width:var(--ftc-wrap); margin-inline:auto;
  padding-left:max(20px,var(--ftc-safe-l)); padding-right:max(20px,var(--ftc-safe-r))}

/* ---------- Layout: band ---------- */
.ftc-forms.is-layout-band{background:var(--ftc-band); color:var(--ftc-band-fg); padding:48px 0 72px; overflow-x:clip}
.ftc-forms.is-layout-band .ftc-f-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,580px); gap:64px; align-items:start}

/* ---------- Layout: panel ---------- */
.ftc-forms.is-layout-panel{background:var(--ftc-bg); padding:40px 0}
.ftc-forms.is-layout-panel .ftc-f-panel{position:relative; overflow:hidden; background:var(--ftc-band); color:var(--ftc-band-fg);
  border-radius:var(--ftc-radius-panel); box-shadow:0 30px 60px -34px rgba(15,30,51,.5);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.04fr); gap:36px; align-items:center; padding:36px 40px}
.ftc-forms.is-layout-panel .ftc-f-panel::before{content:""; position:absolute; inset:0; pointer-events:none}
.ftc-f-col{position:relative; min-width:0}

/* ---------- Left column ---------- */
.ftc-f-intro{display:grid; gap:16px; align-content:start; min-width:0}
.ftc-forms.is-layout-panel .ftc-f-intro{align-content:center; justify-items:start; gap:14px}
.ftc-f-eyebrow{font-family:var(--ftc-font-display); font-weight:600; font-size:14px; line-height:1.3; color:var(--ftc-teal-on-band)}
.ftc-f-rule{display:block; width:30px; height:3px; border-radius:var(--ftc-radius-pill); background:var(--ftc-teal-on-band); margin-top:-8px}
.ftc-f-title{font-family:var(--ftc-font-display); font-weight:700; font-size:clamp(28px,2.2vw + 1rem,40px); line-height:1.13;
  letter-spacing:-.02em; text-wrap:balance; color:var(--ftc-band-fg)}
.ftc-forms.is-layout-panel .ftc-f-title{font-size:clamp(26px,2.5vw,37px); line-height:1.1}
.ftc-f-lede{font-size:clamp(15.5px,.4vw + .9rem,18px); line-height:1.6; color:var(--ftc-band-muted); max-width:52ch}
.ftc-forms.is-layout-panel .ftc-f-lede{font-size:15.5px; max-width:44ch}

.ftc-f-checks{display:grid; gap:11px; margin-top:2px}
.ftc-f-checks li{display:grid; grid-template-columns:18px minmax(0,1fr); gap:10px; align-items:start;
  font-size:15.5px; line-height:1.5; color:var(--ftc-band-fg)}
.ftc-f-checks svg{margin-top:3px; color:var(--ftc-teal-on-band)}

.ftc-f-divider{display:block; width:100%; max-width:430px; height:1px; background:var(--ftc-band-line); margin:4px 0}

.ftc-f-alt{display:inline-flex; align-items:center; justify-content:space-between; gap:18px; width:100%; max-width:430px;
  min-height:50px; padding:10px 16px; border-radius:var(--ftc-radius-m); border:1px solid var(--ftc-band-line);
  background:rgba(255,255,255,.03); color:var(--ftc-band-fg);
  font-family:var(--ftc-font-display); font-weight:600; font-size:14.5px; line-height:1.3;
  transition:border-color .15s,background-color .15s}
.ftc-f-alt:hover{border-color:var(--ftc-teal-on-band); background:var(--ftc-band-2)}
.ftc-f-alt .ftc-f-arrow{flex:none; display:inline-flex; transition:transform .15s}
.ftc-f-alt:hover .ftc-f-arrow{transform:translateX(4px)}

/* ---------- Contact rows ---------- */
.ftc-f-direct{display:grid; gap:10px; margin-top:4px; min-width:0}
.ftc-f-direct.is-plain{margin-top:12px; padding-top:28px; border-top:1px solid var(--ftc-band-line); gap:6px}
.ftc-f-direct-h{font-family:var(--ftc-font-display); font-size:18px; line-height:1.3; font-weight:600; margin-bottom:6px; color:var(--ftc-band-fg)}
.ftc-f-row{display:grid; grid-template-columns:44px minmax(0,1fr); gap:14px; align-items:center; min-width:0;
  border-radius:12px; transition:background-color .15s,border-color .15s}
.ftc-f-direct.is-plain .ftc-f-row{min-height:56px; padding:6px 10px 6px 6px; margin-inline:-6px}
.ftc-f-direct.is-plain .ftc-f-row:hover{background:var(--ftc-band-2)}
.ftc-f-direct.is-boxed .ftc-f-row{padding:14px 16px; border:1px solid var(--ftc-band-line); align-items:start}
.ftc-f-direct.is-boxed .ftc-f-row:hover{border-color:var(--ftc-teal-on-band)}
.ftc-f-row-ic{width:44px; height:44px; border-radius:12px; display:grid; place-items:center; color:var(--ftc-teal-on-band); transition:background-color .15s}
.ftc-f-direct.is-plain .ftc-f-row-ic{background:var(--ftc-band-2)}
.ftc-f-direct.is-plain .ftc-f-row:hover .ftc-f-row-ic{background:var(--ftc-band)}
.ftc-f-direct.is-boxed .ftc-f-row-ic{width:36px; height:36px; border-radius:10px}
.ftc-f-direct.is-boxed .ftc-f-row{grid-template-columns:36px minmax(0,1fr)}
.ftc-f-row-body{display:grid; gap:2px; min-width:0}
.ftc-f-row-l{display:block; font-size:13px; line-height:1.4; color:var(--ftc-band-muted)}
.ftc-f-row-v{display:block; font-weight:600; font-size:16px; line-height:1.4; overflow-wrap:anywhere; color:var(--ftc-band-fg)}
.ftc-f-acts{display:flex; flex-wrap:wrap; gap:6px; margin-top:4px}
.ftc-f-copy{background:none; border:1px solid var(--ftc-band-line); color:var(--ftc-band-fg); border-radius:var(--ftc-radius-pill);
  padding:4px 12px; font:inherit; font-size:13px; cursor:pointer; transition:border-color .15s}
.ftc-f-copy:hover{border-color:var(--ftc-band-fg)}
.ftc-f-row-link{font-size:13.5px; font-weight:600; color:var(--ftc-teal-on-band)}
.ftc-f-row-link:hover{text-decoration:underline; text-underline-offset:3px}

/* ---------- The form card ---------- */
.ftc-f-card{position:relative; background:var(--ftc-surface); color:var(--ftc-fg);
  border-radius:var(--ftc-radius-xl); padding:32px; box-shadow:0 24px 50px -30px rgba(10,22,40,.6); min-width:0}
.ftc-forms.is-layout-panel .ftc-f-card{border-radius:var(--ftc-radius-l); padding:44px 26px 24px; margin-top:22px;
  box-shadow:0 24px 48px -26px rgba(10,22,40,.6)}
.ftc-f-card.is-align-center .ftc-f-card-h{text-align:center}
.ftc-f-card.is-align-center .ftc-f-card-sub{margin-inline:auto}

.ftc-f-avatars{position:absolute; top:0; left:50%; transform:translate(-50%,-50%); display:flex; align-items:center}
.ftc-f-avatars span{position:relative; overflow:hidden; display:grid; place-items:center; width:48px; height:48px;
  border-radius:var(--ftc-radius-pill); border:3px solid var(--ftc-surface); color:#FFFFFF;
  font-family:var(--ftc-font-display); font-weight:700; font-size:14px; letter-spacing:.02em}
.ftc-f-avatars span + span{margin-left:-14px}
.ftc-f-avatars img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
/* Cards carrying avatars need headroom for the overlap */
.ftc-f-card:has(.ftc-f-avatars){padding-top:44px}
.ftc-forms.is-layout-band .ftc-f-card:has(.ftc-f-avatars){margin-top:26px}

.ftc-f-card-h{display:grid; gap:6px; margin-bottom:18px}
.ftc-f-card-title{font-family:var(--ftc-font-display); font-weight:700; font-size:clamp(21px,.6vw + 1rem,25px);
  line-height:1.25; letter-spacing:-.01em; color:var(--ftc-fg)}
.ftc-f-card-sub{font-size:14px; line-height:1.5; color:var(--ftc-muted); max-width:42ch}

/* ---------- Fields ---------- */
.ftc-f-fields{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
.ftc-f-field{display:grid; gap:5px; min-width:0; align-content:start}
.ftc-f-field.is-full{grid-column:1 / -1}
.ftc-f-label,.ftc-f-fs legend{font-family:var(--ftc-font-display); font-weight:600; font-size:13px; line-height:1.3; color:var(--ftc-fg)}
.ftc-f-fs legend{margin-bottom:8px}
.ftc-f-req{color:var(--ftc-err); margin-left:2px}
.ftc-f-help{font-size:12.5px; line-height:1.4; color:var(--ftc-muted)}

.ftc-f-input{width:100%; height:44px; padding:8px 12px; font-family:var(--ftc-font-body); font-size:15px; line-height:1.4;
  color:var(--ftc-fg); background:var(--ftc-bg); border:1px solid var(--ftc-control-border); border-radius:var(--ftc-radius-m);
  transition:border-color .15s,box-shadow .15s}
.ftc-f-input::placeholder{color:var(--ftc-muted); opacity:.85}
.ftc-f-input:focus{outline:none; border-color:var(--ftc-teal); box-shadow:0 0 0 3px var(--ftc-teal-soft)}
.ftc-f-input[aria-invalid="true"]{border-color:var(--ftc-err)}
.ftc-f-textarea{height:auto; min-height:96px; padding:11px 12px; resize:vertical; line-height:1.5}
.ftc-f-select{appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%234B5C72' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center}

/* Phone: separate controls, or joined into one bordered box */
/* The dial sizes itself to its widest country label, so a long one such as
   "SA +966" is never cut off, and the number takes whatever is left */
.ftc-f-phone{display:grid; grid-template-columns:auto minmax(0,1fr); gap:7px; min-width:0}
.ftc-f-phone.is-joined{gap:0; border:1px solid var(--ftc-control-border); border-radius:var(--ftc-radius-m);
  background:var(--ftc-bg); overflow:hidden; grid-template-columns:auto minmax(0,1fr)}
.ftc-f-phone.is-joined:focus-within{border-color:var(--ftc-teal); box-shadow:0 0 0 3px var(--ftc-teal-soft)}
.ftc-f-phone.is-joined .ftc-f-input{border:0; border-radius:0; background:transparent; box-shadow:none}
.ftc-f-phone.is-joined .ftc-f-dial{border-right:1px solid var(--ftc-control-border); font-weight:600}
/* In a half-width column the dial has to give the number room to show in full */
/* A half-width column is tight, so the dial runs compact to leave the number room */
.ftc-f-field.is-half .ftc-f-phone{gap:6px}
.ftc-f-field.is-half .ftc-f-dial{font-size:13px; padding-left:8px; padding-right:21px; background-position:right 4px center}
.ftc-f-field.is-half .ftc-f-phone .ftc-f-input{padding-left:10px; padding-right:10px}

/* Choice cards */
.ftc-f-opts{display:grid; grid-template-columns:repeat(var(--ftc-opt-cols,3),minmax(0,1fr)); gap:10px}
.ftc-f-opt{position:relative; display:block}
.ftc-f-opt input{position:absolute; opacity:0; inset:0; width:100%; height:100%; margin:0; cursor:pointer}
.ftc-f-opt-box{display:grid; gap:2px; align-content:start; min-height:76px; padding:12px;
  border:1px solid var(--ftc-control-border); border-radius:12px; background:var(--ftc-bg);
  transition:border-color .15s,background-color .15s}
.ftc-f-opt-t{font-family:var(--ftc-font-display); font-weight:600; font-size:15px; line-height:1.35; color:var(--ftc-fg)}
.ftc-f-opt-s{font-size:12.5px; line-height:1.35; color:var(--ftc-muted)}
.ftc-f-opt:hover .ftc-f-opt-box{border-color:var(--ftc-fg)}
.ftc-f-opt input:checked + .ftc-f-opt-box{border-color:var(--ftc-teal); background:var(--ftc-teal-soft); box-shadow:inset 0 0 0 1px var(--ftc-teal)}
.ftc-f-opt input:focus-visible + .ftc-f-opt-box{outline:3px solid var(--ftc-teal); outline-offset:2px}

/* Consent */
.ftc-f-consent{display:grid; grid-template-columns:18px minmax(0,1fr); gap:10px; align-items:start;
  font-size:13.5px; line-height:1.5; color:var(--ftc-muted)}
.ftc-f-consent input[type="checkbox"]{width:18px; height:18px; margin:1px 0 0; accent-color:var(--ftc-teal); cursor:pointer}
.ftc-f-consent a{color:var(--ftc-teal); font-weight:600; text-decoration:underline; text-underline-offset:3px}
.ftc-f-consent a:hover{color:var(--ftc-fg)}
.ftc-f-field.type-consent.is-invalid .ftc-f-consent{color:var(--ftc-err)}
.ftc-f-inline-check{display:grid; grid-template-columns:18px minmax(0,1fr); gap:10px; align-items:start; font-size:13.5px; color:var(--ftc-muted)}
.ftc-f-inline-check input{width:18px; height:18px; margin:1px 0 0; accent-color:var(--ftc-teal)}

/* Errors, status, submit */
.ftc-f-error{font-size:12.5px; line-height:1.4; color:var(--ftc-err)}
.ftc-f-error:empty{display:none}
.ftc-f-status{margin-top:14px; padding:12px 14px; border-radius:12px; font-size:14px; line-height:1.5;
  background:var(--ftc-teal-soft); color:var(--ftc-fg)}
.ftc-f-status[hidden]{display:none}
.ftc-f-status.is-error{background:transparent; border:1px solid var(--ftc-err); color:var(--ftc-err)}

.ftc-f-submit{display:inline-flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:50px;
  margin-top:14px; padding:0 22px; border:0; border-radius:var(--ftc-radius-m); cursor:pointer;
  font-family:var(--ftc-font-display); font-weight:600; font-size:16px;
  color:var(--ftc-cta-fg); background:var(--ftc-cta); transition:background-color .15s}
.ftc-f-submit:hover{background:var(--ftc-cta-hover)}
.ftc-f-submit[disabled]{opacity:.7; cursor:progress}
.ftc-f-note{margin-top:8px; font-size:12.5px; line-height:1.45; color:var(--ftc-muted); text-align:center}

.ftc-f-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.ftc-forms a:focus-visible,.ftc-forms button:focus-visible,.ftc-forms input[type="checkbox"]:focus-visible{
  outline:3px solid var(--ftc-teal-on-band); outline-offset:3px; border-radius:var(--ftc-radius-s)}
.ftc-f-card a:focus-visible,.ftc-f-card button:focus-visible,.ftc-f-card input[type="checkbox"]:focus-visible{
  outline-color:var(--ftc-teal)}

/* ===================== Responsive ===================== */
@media (max-height:860px) and (min-width:992px){
  .ftc-forms.is-layout-panel{padding:28px 0}
  .ftc-forms.is-layout-panel .ftc-f-panel{padding:28px 34px; gap:30px}
  .ftc-forms.is-layout-panel .ftc-f-card{padding:40px 22px 20px}
  .ftc-forms.is-layout-panel .ftc-f-title{font-size:clamp(24px,2.1vw,32px)}
  .ftc-forms.is-layout-panel .ftc-f-textarea{min-height:76px}
}
@media (max-width:1099.98px){
  .ftc-forms.is-layout-panel .ftc-f-panel{gap:28px; padding:32px 28px}
  .ftc-forms.is-layout-panel .ftc-f-lede{max-width:none}
  .ftc-f-phone{grid-template-columns:auto minmax(0,1fr)}
}
@media (max-width:991.98px){
  .ftc-forms.is-layout-band{padding:40px 0 56px}
  .ftc-forms.is-layout-band .ftc-f-grid{grid-template-columns:minmax(0,1fr); gap:40px}
  .ftc-forms.is-layout-panel .ftc-f-panel{grid-template-columns:1fr; gap:32px; padding:32px 26px}
  /* Form above the pitch on narrow screens */
  .ftc-f-form-col{order:1}
  .ftc-f-intro{order:2}
  .ftc-f-alt,.ftc-f-divider{max-width:none}
}
@media (max-width:767.98px){
  .ftc-forms.is-layout-panel{padding:28px 0}
  .ftc-f-wrap{padding-left:max(14px,var(--ftc-safe-l)); padding-right:max(14px,var(--ftc-safe-r))}
  .ftc-forms.is-layout-panel .ftc-f-panel{padding:26px 16px; border-radius:var(--ftc-radius-l); gap:28px}
  .ftc-f-card{padding:24px 18px}
  .ftc-forms.is-layout-panel .ftc-f-card{padding:40px 18px 20px; border-radius:14px}
  .ftc-f-card:has(.ftc-f-avatars){padding-top:40px}
  .ftc-f-fields{grid-template-columns:minmax(0,1fr); gap:12px}
  .ftc-f-opts{grid-template-columns:minmax(0,1fr)}
  .ftc-f-opt-box{min-height:0}
  .ftc-f-card-title{font-size:20px}
  .ftc-f-avatars span{width:42px; height:42px; font-size:13px}
  /* One phone field: the dial code moves into the placeholder */
  .ftc-f-phone{display:block}
  .ftc-f-phone .ftc-f-dial{display:none}
  .ftc-f-phone.is-joined{border:0; background:transparent; overflow:visible; box-shadow:none}
  .ftc-f-phone.is-joined .ftc-f-input{border:1px solid var(--ftc-control-border); border-radius:var(--ftc-radius-m); background:var(--ftc-bg)}
  /* 16px stops iOS zooming the field on focus */
  .ftc-f-input{font-size:16px}
  .ftc-f-alt{justify-content:flex-start; gap:12px}
}
@media (max-width:359.98px){
  .ftc-forms.is-layout-panel .ftc-f-panel{padding:22px 12px}
  .ftc-f-card{padding:20px 14px}
}

/* Fallback for browsers without :has() — reserve the avatar headroom anyway */
@supports not selector(:has(*)){
  .ftc-f-card{padding-top:44px}
}

@media (prefers-reduced-motion:reduce){
  .ftc-forms *,.ftc-forms *::before,.ftc-forms *::after{transition:none!important; animation:none!important}
}
@media (forced-colors:active){
  .ftc-f-input,.ftc-f-submit,.ftc-f-opt-box,.ftc-f-alt,.ftc-f-copy{border:1px solid CanvasText}
}