/* Quantus edition of the FnF homepage.
   Palette: Turbo #F0E100 is the accent (actions, selected states, highlights), Electric Violet #834DFB is the colour-block hue, Haiti #18102B and Blue Chalk #F5F3FF are the grounds.
   One family (Plus Jakarta Sans), display at weight 300 with tight tracking, labels at 700.
   Colour cards at radius-lg (40px), buttons and tags as pills, no shadows or gradients on cards.
   Bands: dark Haiti for the hero, the story and the booking form; light Blue Chalk / white for reading
   sections; one Electric Violet block (section 05); Turbo footer. */

:root{
  --q-violet:#834DFB; --q-turbo:#F0E100; --q-haiti:#18102B; --q-chalk:#F5F3FF;
  --q-raised-dark:#241A3E; --q-ink-muted-dark:#B9B0D6; --q-line-dark:#3A2F5C; --q-control-dark:#7D72A6;
  --q-raised-light:#FFFFFF; --q-ink-muted-light:#675E80; --q-line-light:#D9D2F0; --q-control-light:#857D9F;
  --q-brand-text-light:#6B30E8; --q-brand-text-dark:#A98BFF;
  --q-radius-sm:10px; --q-radius-md:20px; --q-radius-lg:40px; --q-pill:999px;

  /* Quantus has one family */
  --font-ui:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-read:"Plus Jakarta Sans",system-ui,sans-serif;

  /* the accent is Turbo: yellow fill, Haiti text */
  --accent:#F0E100; --accent-hover:#F5EC5C; --accent-pressed:#D4C700; --on-accent:#18102B; --text-on-accent:#18102B;
  --focus-ring:#F0E100;
  color-scheme:dark;
}
body{font-family:var(--font-ui)}
h1,h2,h3,button,input,summary{font-family:var(--font-ui)}

/* ---------- light bands (Blue Chalk ground, Haiti ink) ---------- */
#problem,#examples,#how,.faq{
  --bg-page:var(--q-chalk); --paper:var(--q-chalk);
  --surface-card:var(--q-raised-light); --surface-raised:var(--q-raised-light); --cream:var(--q-raised-light);
  --surface-hover:#EDE9FE; --surface-active:#E2DCFA;
  --text-main:var(--q-haiti); --ink:var(--q-haiti); --text-secondary:#3F3659; --text-faint:var(--q-ink-muted-light); --gray:var(--q-ink-muted-light);
  --border-subtle:#E6E1F7; --border-default:var(--q-line-light); --line:var(--q-line-light); --border-strong:var(--q-control-light);
  --accent-text:var(--q-brand-text-light);
  color-scheme:light;
  color:var(--q-haiti);
}
/* paint the full width of each light band, not only its centred column */
#problem,#examples,.faq{background:var(--q-chalk);box-shadow:0 0 0 100vmax var(--q-chalk);clip-path:inset(0 -100vmax)}
#how{background:var(--q-raised-light)}
#how{--bg-page:var(--q-raised-light);--paper:var(--q-raised-light);--surface-card:var(--q-chalk);--surface-raised:var(--q-chalk)}
#problem,#examples,#how,.faq{padding-block:clamp(72px,10vw,128px)}
#problem p,#examples p,#how p,.faq p{color:var(--text-secondary)}

/* dark bands keep the Haiti ramp from the recoloured base */
.hero,.promise-strip,#structure-story,.lead,header.nav{--accent-text:var(--q-brand-text-dark)}
.promise-strip{background:var(--q-haiti)}

/* ---------- type: Quantus display is light and tight ---------- */
.hero h1{font-weight:300;letter-spacing:-.045em}
.hero h1 .fixed{font-weight:300;letter-spacing:-.05em}
#problem h2,#examples h2,.point h2,.lead h2,.faq h2,#how h2{font-weight:300;letter-spacing:-.035em}
.problem-card h3,.wf-card h3,.cat h3,.step h3,.lf h3{font-weight:700;letter-spacing:-.01em}
.kicker,.wf-label,.wf-glabel,.point-label,.lf-field label,.lf-dot,.wf-src,.wf-status,.wf-tag,.card-label{font-family:var(--font-ui);font-weight:700}

/* small labels: plain bold, no pill outline */
.kicker{color:var(--q-turbo)!important}
#problem .kicker,#examples .kicker,#how .kicker,.faq .kicker{color:var(--q-haiti)!important}
.hero > .kicker{border-color:var(--q-control-dark);border-radius:var(--q-pill);color:var(--q-chalk)!important}

/* highlights: Turbo on dark, brand-text violet on light */
.phrase span{color:var(--q-turbo)!important}
.underlined:after{background:var(--q-turbo)!important;height:4px!important;border-radius:2px!important;transform:none!important}
#problem .underlined,#examples .underlined{isolation:isolate}
#problem .underlined:after,#examples .underlined:after{height:.3em!important;bottom:.06em!important;border-radius:3px!important;z-index:-1}

/* ---------- actions: Turbo pills, Haiti text ---------- */
.button,.btn,.lf-btn,.go{border-radius:var(--q-pill)!important;font-weight:700!important}
.button:not(.light),.lf-btn:not(.ghost){background:var(--q-turbo)!important;border-color:var(--q-turbo)!important;color:var(--q-haiti)!important}
.button:not(.light) *,.lf-btn:not(.ghost) *{color:var(--q-haiti)!important}
.button:not(.light):hover,.lf-btn:not(.ghost):hover{background:#F5EC5C!important;border-color:#F5EC5C!important}
.button.light{border-radius:var(--q-pill)!important;background:transparent!important;border:1px solid var(--q-control-dark)!important;color:var(--q-chalk)!important}
.button.light:hover{background:var(--q-raised-dark)!important}
.text-link{border-bottom-color:currentColor}
:focus-visible{outline:2px solid var(--focus-ring)!important;outline-offset:2px!important;box-shadow:none!important}
#problem :focus-visible,#examples :focus-visible,#how :focus-visible,.faq :focus-visible{outline-color:var(--q-haiti)!important}

/* header */
header.nav{background:var(--q-haiti)!important;box-shadow:0 0 0 100vmax var(--q-haiti)!important}
.nav-links a:hover{color:var(--q-chalk)}

/* ---------- 01: Quantus colour cards ---------- */
.problem-card{border-radius:var(--q-radius-lg)!important;padding:clamp(28px,3vw,40px)!important;border:0!important;box-shadow:none!important}
.problem-card:nth-of-type(1){background:var(--q-violet)!important}
.problem-card:nth-of-type(2){background:var(--q-turbo)!important}
.problem-card:nth-of-type(3){background:var(--q-haiti)!important}
.problem-card:nth-of-type(1) *,.problem-card:nth-of-type(1) h3,.problem-card:nth-of-type(1) p,.problem-card:nth-of-type(1) .card-label{color:#FFFFFF!important}
.problem-card:nth-of-type(2) *,.problem-card:nth-of-type(2) h3,.problem-card:nth-of-type(2) p,.problem-card:nth-of-type(2) .card-label{color:var(--q-haiti)!important}
.problem-card:nth-of-type(3) *,.problem-card:nth-of-type(3) h3,.problem-card:nth-of-type(3) p,.problem-card:nth-of-type(3) .card-label{color:var(--q-chalk)!important}
.problem-card p{opacity:.9!important}
.problem-card:nth-of-type(1) .doodle,.problem-card:nth-of-type(3) .doodle{filter:brightness(0) invert(1)!important;opacity:.95!important}
.problem-card:nth-of-type(2) .doodle{filter:brightness(0)!important;opacity:.85!important}

/* ---------- 03: workflows on the light band ---------- */
.wf-chip,.wf-pill{border-radius:var(--q-pill)!important;border-color:var(--q-control-light)!important;color:var(--q-haiti)!important;background:var(--q-raised-light)!important}
.wf-chip:hover,.wf-pill:hover{background:#EDE9FE!important}
.wf-chip[aria-pressed=true]{background:var(--q-turbo)!important;border-color:var(--q-haiti)!important;color:var(--q-haiti)!important}
.wf-pill[aria-pressed=true]{background:var(--q-turbo)!important;border-color:var(--q-haiti)!important;box-shadow:none!important;color:var(--q-haiti)!important}
.wf-label{color:var(--q-ink-muted-light)!important}
.wf-glabel{color:var(--q-haiti)!important}
.wf-tag{border-radius:var(--q-pill)!important;padding:5px 12px!important;background:var(--q-line-light)!important;color:var(--q-haiti)!important}
.wf-tag.on{background:var(--q-turbo)!important;color:var(--q-haiti)!important}
.wf-sub{color:var(--q-ink-muted-light)!important}
.wf-scrap{background:var(--q-raised-light)!important;border-color:var(--q-line-light)!important;border-radius:var(--q-radius-md)!important;box-shadow:none!important}
.wf-scrap .wf-src{color:var(--q-ink-muted-light)!important}
.wf-scrap .wf-text{color:var(--q-haiti)!important}
.wf-scrap.note{background:var(--q-turbo)!important;border-color:var(--q-turbo)!important}
.wf-scrap.note .wf-src,.wf-scrap.note .wf-text{color:var(--q-haiti)!important}
.wf-arrow{color:var(--q-haiti)!important}
.wf-replay{color:var(--q-ink-muted-light)!important;border-bottom-color:var(--q-control-light)!important}
.wf-card{background:var(--q-violet)!important;border:0!important;border-radius:var(--q-radius-lg)!important;padding:clamp(24px,3vw,36px)!important}
.wf-card h3{color:#FFFFFF!important}
.wf-status{background:var(--q-chalk)!important;color:var(--q-haiti)!important;border:0!important}
.wf-status i{background:var(--q-turbo)!important;outline:1px solid var(--q-haiti)}
.wf-step{color:#FFFFFF!important;border-top-color:rgba(255,255,255,.24)!important}
.wf-step::before{border-color:#FFFFFF!important;background-color:#FFFFFF!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.6 7.3l2.3 2.3 4.5-4.9' fill='none' stroke='%23834DFB' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important}
.wf-step.you{color:var(--q-turbo)!important}
.wf-step.you::before{border-color:var(--q-turbo)!important;background:transparent!important}
.wf-step.you::after{background:var(--q-turbo)!important}
.wf-out{color:#FFFFFF!important;border-top-color:rgba(255,255,255,.35)!important}
.wf-out strong{color:var(--q-turbo)!important}
.example-footer{color:var(--q-ink-muted-light)!important}

/* ---------- 04 ---------- */
.step:before{color:var(--q-haiti)!important;font-weight:700;background:var(--q-turbo);border-radius:999px;padding:2px 8px;font-size:12px!important}
.step{border-bottom-color:var(--q-line-light)!important}

/* ---------- 05: the one Electric Violet block ---------- */
.point{background:var(--q-violet)!important}
.point .kicker{color:#FFFFFF!important}
.point h2{color:#FFFFFF!important}
.point h2 .dim{color:rgba(255,255,255,.62)!important}
.point-label{color:rgba(255,255,255,.8)!important}
.point-col.more .point-label{color:var(--q-turbo)!important}
.point-col li{border-bottom-color:rgba(255,255,255,.28)!important;color:#FFFFFF!important;font-weight:300!important;letter-spacing:-.02em!important}
.point-col.less li{color:rgba(255,255,255,.62)!important}

/* ---------- booking (dark) ---------- */
.lead{background:var(--q-haiti)!important}
.lf{background:var(--q-raised-dark)!important;border:0!important;border-radius:var(--q-radius-lg)!important;padding:clamp(24px,3vw,40px)!important}
.lf-field input{border-radius:var(--q-radius-md)!important;background:var(--q-haiti)!important;border-color:var(--q-control-dark)!important;color:var(--q-chalk)!important}
.lf-field input:focus{border-color:var(--q-turbo)!important;box-shadow:none!important;outline:2px solid var(--q-turbo)!important;outline-offset:2px!important}
.lf-dot.on::before{background:var(--q-turbo)!important}
.lf-tick{background:var(--q-turbo)!important;color:var(--q-haiti)!important}
.lf-btn.ghost{border-radius:var(--q-pill)!important;border-color:var(--q-control-dark)!important;color:var(--q-chalk)!important}
#lf-frame{border-radius:var(--q-radius-md)!important}

/* ---------- FAQ (light) ---------- */
.faq summary{color:var(--q-haiti)}
.faq details{border-color:var(--q-line-light)!important}
.faq summary::after,.faq summary::marker{color:var(--q-haiti)!important}

/* ---------- footer: Turbo ground, Haiti ink ---------- */
footer{background:var(--q-turbo)!important;color:var(--q-haiti)!important}
footer .footer-line,footer .footer-sub,footer a,footer .footer-copy{color:var(--q-haiti)!important}
footer .footer-line{font-weight:300!important;letter-spacing:-.03em!important;font-size:clamp(24px,3.2vw,40px)!important}
.footer-bar{border-top-color:rgba(24,16,43,.24)!important}