/* Clearfront Review — service layer on top of the PLUT Standard Design System.
   Rule: no new brand colour, no overridden tokens. Every value below reads
   from --pl-* custom properties defined in plut.css. Classes are prefixed
   .cf- and compose with (never extend) .pl-* classes. */

*,*::before,*::after{ box-sizing:border-box; }
html,body{ width:100%; max-width:100%; overflow-x:hidden; }
img,svg{ max-width:100%; }

.cf-container{
  max-width:var(--pl-container);
  margin:0 auto;
  padding:0 var(--pl-gutter);
  width:100%;
  box-sizing:border-box;
}
.cf-container--narrow{max-width:var(--pl-container-narrow);}

/* ---------- header ---------- */
.cf-header{
  border-bottom:1px solid var(--pl-line-neutral);
  background:var(--pl-bg-normal);
  position:sticky; top:0; z-index:var(--pl-z-header);
  max-width:100%;
}
.cf-header .cf-container{
  height:var(--pl-header-h);
  display:flex; align-items:center; justify-content:space-between; gap:var(--pl-s-8);
}
@media (max-width:767px){ .cf-header .cf-container{height:var(--pl-header-h-m);} }
.cf-logo{
  font-family:var(--pl-font); font-weight:800; font-size:18px; letter-spacing:-.01em;
  color:var(--pl-label-strong);
  min-width:0; flex:0 1 auto; overflow-wrap:anywhere; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
@media (max-width:400px){
  .cf-logo{ font-size:15px; }
}

/* ---------- buttons ---------- */
.cf-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--pl-s-8);
  height:44px; padding:0 var(--pl-s-24);
  border-radius:var(--pl-r-8);
  font-weight:600; font-size:var(--pl-body2); letter-spacing:var(--pl-body2-ls);
  white-space:nowrap; transition:background var(--pl-t-base) var(--pl-ease);
  max-width:100%;
}
.cf-btn--primary{ background:var(--pl-primary); color:var(--pl-on-primary); }
.cf-btn--primary:hover{ background:var(--pl-primary-strong); }
.cf-btn--sm{ height:36px; padding:0 var(--pl-s-16); font-size:var(--pl-label1); flex:0 0 auto; }
@media (max-width:400px){
  .cf-btn--sm{ padding:0 10px; font-size:13px; }
}
.cf-btn--lg{ height:52px; padding:0 var(--pl-s-32); font-size:var(--pl-headline1); border-radius:var(--pl-r-12); }
@media (max-width:420px){
  .cf-btn--lg{ padding:0 var(--pl-s-20); font-size:var(--pl-body1); white-space:normal; height:auto; min-height:52px; text-align:center; }
}
.cf-btn--on-ink{ background:var(--pl-on-primary); color:var(--pl-navy); }
.cf-btn--on-ink:hover{ background:var(--pl-blue-100); }

/* ---------- badge ---------- */
.cf-badge{
  display:inline-flex; align-items:center;
  padding:6px var(--pl-s-12);
  border-radius:var(--pl-r-6);
  font-size:var(--pl-caption1); line-height:var(--pl-caption1-lh); letter-spacing:var(--pl-caption1-ls);
  font-weight:600;
  background:var(--pl-primary-tint); color:var(--pl-primary-text);
  max-width:100%;
  overflow-wrap:anywhere;
}
.cf-badge--on-navy{ background:rgba(255,255,255,.12); color:#fff; }
.cf-badge--ink{ background:var(--pl-ink); color:#fff; }

/* ---------- hero (navy solid surface) ---------- */
.cf-hero{
  background:var(--pl-navy); color:#fff;
  padding:var(--pl-s-96) 0;
  overflow-x:hidden;
  max-width:100%;
}
@media (max-width:767px){ .cf-hero{ padding:var(--pl-s-72) 0; } }
.cf-hero__inner{
  max-width:var(--pl-container-narrow);
  width:100%;
  margin:0 auto;
  padding:0 var(--pl-gutter);
  box-sizing:border-box;
}
.cf-hero__title{ color:#fff; margin:var(--pl-s-20) 0 var(--pl-s-16); overflow-wrap:anywhere; }
.cf-hero__sub{ color:rgba(255,255,255,.78); max-width:560px; overflow-wrap:anywhere; }
.cf-hero__actions{ margin-top:var(--pl-s-32); display:flex; flex-direction:column; align-items:flex-start; gap:var(--pl-s-12); max-width:100%; width:100%; }
.cf-hero__note{ color:rgba(255,255,255,.6); margin:0; max-width:100%; overflow-wrap:anywhere; }

/* ---------- section rhythm ---------- */
.cf-section{ padding:var(--pl-s-96) 0; overflow-x:hidden; max-width:100%; }
.cf-section--alt{ background:var(--pl-bg-alt); }
@media (max-width:767px){ .cf-section{ padding:var(--pl-s-64) 0; } }
.cf-section__head{ max-width:var(--pl-container-narrow); margin-bottom:var(--pl-s-32); }
.cf-section__kicker{ color:var(--pl-primary-text); margin-bottom:var(--pl-s-8); }
.cf-section__lede{ color:var(--pl-label-neutral); max-width:640px; overflow-wrap:anywhere; }

/* ---------- panel / card ---------- */
.cf-panel{
  background:var(--pl-bg-normal);
  border:1px solid var(--pl-line-neutral);
  border-radius:var(--pl-r-12);
  padding:var(--pl-s-24);
  max-width:100%;
}
.cf-card{
  background:var(--pl-bg-normal);
  border:1px solid var(--pl-line-neutral);
  border-radius:var(--pl-r-16);
  padding:var(--pl-s-24);
  max-width:100%;
}
.cf-card--lg{ border-radius:var(--pl-r-20); padding:var(--pl-s-32); }
.cf-card--ink{ background:var(--pl-ink); color:#fff; border-color:var(--pl-ink); }
.cf-card--ink .pl-label-neutral,.cf-card--ink p{ color:rgba(255,255,255,.72); }

/* ---------- two-panel fit / not-fit ---------- */
.cf-split{ display:grid; grid-template-columns:1fr 1fr; gap:var(--pl-s-20); margin-top:var(--pl-s-32); }
@media (max-width:767px){ .cf-split{ grid-template-columns:1fr; } }
.cf-split h3{ margin-bottom:var(--pl-s-12); }
.cf-split ul{ display:flex; flex-direction:column; gap:var(--pl-s-8); }
.cf-split--no{ background:var(--pl-bg-alt); border-style:dashed; }

/* ---------- check list ---------- */
.cf-checklist{ display:flex; flex-direction:column; gap:var(--pl-s-16); margin-top:var(--pl-s-24); max-width:100%; }
.cf-checklist li{ display:flex; gap:var(--pl-s-12); align-items:flex-start; min-width:0; max-width:100%; }
.cf-checklist .pl-icon{ width:20px; height:20px; flex:none; margin-top:2px; color:var(--pl-primary-text); }
.cf-checklist p{ margin:0; color:var(--pl-label-neutral); min-width:0; flex:1 1 auto; overflow-wrap:anywhere; }

/* ---------- dash list (exclusions) ---------- */
.cf-dashlist{ display:flex; flex-direction:column; gap:var(--pl-s-16); max-width:100%; }
.cf-dashlist li{ display:flex; gap:var(--pl-s-12); align-items:flex-start; min-width:0; max-width:100%; }
.cf-dashlist li::before{
  content:"–"; color:var(--pl-label-assist); font-weight:700; flex:none;
}
.cf-dashlist p{ margin:0; color:var(--pl-label-neutral); min-width:0; flex:1 1 auto; overflow-wrap:anywhere; }

/* ---------- numbered row list ("what we look at") ---------- */
.cf-rowlist{ border-top:1px solid var(--pl-line-neutral); margin-top:var(--pl-s-24); max-width:100%; }
.cf-row{
  display:flex; gap:var(--pl-s-16); align-items:flex-start;
  padding:var(--pl-s-20) 0;
  border-bottom:1px solid var(--pl-line-neutral);
  min-height:var(--pl-s-48);
  max-width:100%;
}
.cf-row__num{ flex:none; width:32px; color:var(--pl-label-assist); font-weight:700; }
.cf-row p{ margin:0; min-width:0; flex:1 1 auto; overflow-wrap:anywhere; }

/* ---------- steps ---------- */
.cf-steps{ display:flex; flex-direction:column; gap:0; margin-top:var(--pl-s-32); max-width:100%; }
.cf-step{
  display:flex; gap:var(--pl-s-20);
  padding:var(--pl-s-24) 0;
  border-top:1px solid var(--pl-line-neutral);
  max-width:100%;
}
.cf-step:first-child{ border-top:none; }
.cf-step__num{
  flex:none; width:40px; height:40px; border-radius:var(--pl-r-8);
  background:var(--pl-primary-tint); color:var(--pl-primary-text);
  display:flex; align-items:center; justify-content:center;
  font-weight:700;
}
.cf-step > div{ min-width:0; flex:1 1 auto; }
.cf-step p{ margin:var(--pl-s-4) 0 0; color:var(--pl-label-neutral); overflow-wrap:anywhere; }

/* ---------- price ---------- */
.cf-price{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--pl-s-16); max-width:100%; width:100%; }
.cf-price__amount{ color:#fff; margin:0; }
.cf-price__note{ color:rgba(255,255,255,.68); margin:0; overflow-wrap:anywhere; }

/* ---------- faq ---------- */
.cf-faq{ margin-top:var(--pl-s-24); max-width:100%; }
.cf-faq-item{ border-top:1px solid var(--pl-line-neutral); padding:var(--pl-s-20) 0; max-width:100%; }
.cf-faq-item:last-child{ border-bottom:1px solid var(--pl-line-neutral); }
.cf-faq-item summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between;
  gap:var(--pl-s-16);
}
.cf-faq-item summary > *{ min-width:0; overflow-wrap:anywhere; }
.cf-faq-item summary::-webkit-details-marker{ display:none; }
.cf-faq-item summary::after{
  content:"+"; color:var(--pl-label-alt); font-weight:600; font-size:20px; flex:none;
}
.cf-faq-item[open] summary::after{ content:"–"; }
.cf-faq-item p{ margin-top:var(--pl-s-12); color:var(--pl-label-neutral); max-width:640px; overflow-wrap:anywhere; }

/* ---------- final cta (blue solid surface) ---------- */
.cf-cta{ background:var(--pl-primary); color:#fff; padding:var(--pl-s-96) 0; text-align:left; overflow-x:hidden; max-width:100%; }
.cf-cta h2{ color:#fff; overflow-wrap:anywhere; }
.cf-cta p{ color:rgba(255,255,255,.82); overflow-wrap:anywhere; }

/* ---------- footer ---------- */
.cf-footer{ border-top:1px solid var(--pl-line-neutral); padding:var(--pl-s-48) 0 var(--pl-s-64); max-width:100%; }
.cf-footer p{ color:var(--pl-label-neutral); margin:0 0 var(--pl-s-8); overflow-wrap:anywhere; }
.cf-footer a{ color:var(--pl-label-neutral); text-decoration:underline; }
.cf-footer__links a{ margin-right:var(--pl-s-16); color:var(--pl-label-normal); text-decoration:none; }
.cf-footer__links a:hover{ text-decoration:underline; }

/* ---------- utility ---------- */
.cf-mt-4{ margin-top:var(--pl-s-4); }
.cf-visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}
@media (max-width:390px){
  .cf-container{ padding:0 12px; }
}

/* ---------- overflow safety net ----------
   Belt-and-braces against any external PLUT reveal/stagger transform,
   sprite-icon default sizing, or fixed-width rule pushing content past
   the viewport on narrow phones. Kept last, scoped, !important only here. */
html{ overflow-x:hidden !important; }
body{ overflow-x:hidden !important; max-width:100vw !important; }
[data-pl-reveal], [data-pl-stagger], [data-pl-stagger] > *{
  transform:none !important;
}
main, header, footer, section, .cf-container, .cf-container--narrow,
.cf-hero, .cf-hero__inner, .cf-section__head, .cf-split, .cf-panel, .cf-card,
.cf-checklist, .cf-dashlist, .cf-rowlist, .cf-steps, .cf-faq{
  max-width:100% !important;
}
svg:not([width]){ width:20px !important; height:20px !important; }
@media (max-width:600px){
  * { max-width:100vw; }
}