@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@500;700;800&family=Roboto:wght@400;500;700&display=swap');

.cmf-root{
  --cmf-bg:#f2f6f9;
  --cmf-surface:#ffffff;
  --cmf-surface-2:#eaf1f6;
  --cmf-ink:#0f2338;
  --cmf-ink-soft:#4d6478;
  --cmf-ink-faint:#7f93a3;
  --cmf-navy:#0c3357;
  --cmf-navy-2:#124b79;
  --cmf-accent:#00a3ae;
  --cmf-accent-2:#008993;
  --cmf-accent-ink:#ffffff;
  --cmf-border:#d8e2ea;
  --cmf-danger:#c2402f;
  --cmf-radius-s:8px;
  --cmf-radius-m:14px;
  --cmf-radius-l:22px;
  font-family:"Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  color:var(--cmf-ink);
  line-height:1.5;
  max-width:1080px;
  margin:0 auto;
  padding-block:8px 24px;
  overflow-x:hidden;
}
.cmf-root *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;min-width:0;}
.cmf-root h1,.cmf-root h2,.cmf-root h3,.cmf-root h4{
  font-family:"Roboto Slab",Georgia,"Times New Roman",serif;
  font-weight:700;letter-spacing:-.01em;color:var(--cmf-ink);margin:0;
}
.cmf-root p{margin:0;}
.cmf-root a{color:var(--cmf-accent-2);}
.cmf-root button{font-family:inherit;}
.cmf-root img{max-width:100%;display:block;}
.cmf-root [hidden]{display:none!important;}

.cmf-eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--cmf-accent-2);}

/* The host theme's reset.css targets bare button/[type=button]/[type=submit]
   elements directly (pink #c36 text+hover, white-space:nowrap) — every
   control in this tool is a real <button>, so every rule below must be
   explicit and !important rather than relying on specificity alone. */
.cmf-root button{
  white-space:normal !important;
  -webkit-appearance:none;appearance:none;text-align:inherit;
}
.cmf-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border:none !important;border-radius:999px;cursor:pointer;font-weight:700;font-size:1rem;padding:15px 30px;
  transition:transform .12s ease, background .15s ease;
}
.cmf-btn-primary{background:var(--cmf-accent) !important;color:var(--cmf-accent-ink) !important;box-shadow:0 10px 24px -10px rgba(0,163,174,.5);}
.cmf-btn-primary:hover,.cmf-btn-primary:active,.cmf-btn-primary:focus{background:var(--cmf-accent-2) !important;color:var(--cmf-accent-ink) !important;transform:translateY(-1px);outline:none;}
.cmf-btn-onlight,.cmf-btn-onlight:hover,.cmf-btn-onlight:active,.cmf-btn-onlight:focus{background:#fff !important;color:var(--cmf-navy) !important;box-shadow:none;transform:translateY(-1px);outline:none;}
.cmf-btn-text{background:none !important;border:none !important;color:var(--cmf-ink-soft) !important;font-weight:700;cursor:pointer;padding:8px 4px;font-size:.95rem;}
.cmf-btn-text:hover,.cmf-btn-text:active,.cmf-btn-text:focus{background:none !important;color:var(--cmf-accent-2) !important;outline:none;}

.cmf-shell{
  background:var(--cmf-surface);border:1px solid var(--cmf-border);border-radius:var(--cmf-radius-l);
  box-shadow:0 1px 2px rgba(12,51,87,.06), 0 16px 40px -18px rgba(12,51,87,.16);
  border-top:4px solid var(--cmf-accent);
  overflow:hidden;
}
.cmf-head-icon{
  width:52px;height:52px;margin:0 auto 16px;border-radius:14px;
  background:linear-gradient(145deg,var(--cmf-navy),var(--cmf-navy-2));color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.cmf-head-icon svg{width:26px;height:26px;}
.cmf-shell-inner{padding:40px clamp(18px,5vw,56px);}

.cmf-screen-start .cmf-shell-inner{
  padding-block:52px;
  display:flex !important;flex-direction:column !important;align-items:center !important;
  text-align:center !important;
}
.cmf-screen-start h2{font-size:clamp(1.7rem,4vw,2.4rem);max-width:16ch;text-align:center !important;}
.cmf-start-sub{max-width:50ch;margin:24px 0 0 !important;color:var(--cmf-ink-soft);font-size:1.05rem;text-align:center !important;}
.cmf-start-meta{margin-top:24px;display:flex;justify-content:center;gap:20px;flex-wrap:wrap;font-size:.82rem;color:var(--cmf-ink-faint);width:100%;}
.cmf-start-meta span{display:flex;align-items:center;gap:7px;}
.cmf-start-meta svg{width:15px;height:15px;stroke:var(--cmf-accent-2);flex:none;}
.cmf-screen-start .cmf-btn-primary{margin-top:28px;}

.cmf-step-dots{display:flex;justify-content:center;gap:8px;margin-bottom:18px;}
.cmf-step-dot{
  width:30px;height:30px;min-width:30px;flex:none !important;border-radius:50% !important;border:2px solid var(--cmf-border) !important;background:var(--cmf-surface) !important;
  color:var(--cmf-ink-faint) !important;font-size:.82rem;line-height:1 !important;font-weight:700;cursor:pointer;
  display:flex !important;align-items:center !important;justify-content:center !important;padding:0 !important;text-indent:0;
  transition:border-color .15s ease,background .15s ease,color .15s ease,transform .15s ease;
}
.cmf-step-dot:disabled{cursor:default;}
.cmf-step-dot:hover,.cmf-step-dot:focus{border-color:var(--cmf-border) !important;background:var(--cmf-surface) !important;color:var(--cmf-ink-faint) !important;}
.cmf-step-dot.cmf-step-current{border-color:var(--cmf-accent) !important;background:var(--cmf-accent) !important;color:#fff !important;transform:scale(1.1);}
.cmf-step-dot.cmf-step-done{border-color:var(--cmf-accent) !important;color:var(--cmf-accent-2) !important;background:var(--cmf-surface-2) !important;}
.cmf-step-dot.cmf-step-done:hover,.cmf-step-dot.cmf-step-done:focus{background:var(--cmf-surface-2) !important;color:var(--cmf-accent-2) !important;transform:translateY(-1px);}
.cmf-step-dot.cmf-step-current:hover,.cmf-step-dot.cmf-step-current:focus{background:var(--cmf-accent) !important;color:#fff !important;}
.cmf-step-dot.cmf-step-upcoming{color:var(--cmf-ink-faint) !important;}
.cmf-progress-label{text-align:center !important;font-size:.78rem;color:var(--cmf-ink-faint);font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:22px !important;}
.cmf-q-text{font-size:clamp(1.3rem,3vw,1.7rem);margin-block:0 32px !important;text-align:center !important;}
.cmf-option-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:12px;}
.cmf-option-card{
  position:relative;text-align:left !important;background:var(--cmf-surface) !important;border:2px solid var(--cmf-border) !important;border-radius:var(--cmf-radius-m);
  padding:14px 40px 14px 14px !important;cursor:pointer;display:flex;align-items:center;gap:14px;font-size:.96rem;font-weight:500;color:var(--cmf-ink) !important;
  transition:border-color .12s ease, background .12s ease, transform .12s ease;
}
.cmf-option-card:hover,.cmf-option-card:active,.cmf-option-card:focus{border-color:var(--cmf-accent) !important;background:var(--cmf-surface) !important;color:var(--cmf-ink) !important;transform:translateY(-1px);outline:none;}
.cmf-option-card.selected,.cmf-option-card.selected:hover{border-color:var(--cmf-accent) !important;background:var(--cmf-surface-2) !important;color:var(--cmf-ink) !important;}
.cmf-option-icon{
  width:40px;height:40px;border-radius:11px;background:var(--cmf-surface-2);color:var(--cmf-accent-2);flex:none;
  display:flex;align-items:center;justify-content:center;transition:background .15s ease,color .15s ease;
}
.cmf-option-icon svg{width:21px;height:21px;}
.cmf-option-card.selected .cmf-option-icon{background:var(--cmf-accent);color:#fff;}
.cmf-option-label{min-width:0;flex:1 1 auto;overflow-wrap:break-word;word-break:break-word;line-height:1.3;}
.cmf-option-check{
  position:absolute;top:50%;right:12px;transform:translateY(-50%) scale(.5);width:20px;height:20px;border-radius:50%;
  background:var(--cmf-accent);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .12s ease,transform .12s ease;
}
.cmf-option-check svg{width:11px;height:11px;}
.cmf-option-card.selected .cmf-option-check{opacity:1;transform:translateY(-50%) scale(1);}
.cmf-quiz-nav{display:flex;justify-content:space-between;align-items:center;margin-top:26px;}

.cmf-screen-lead .cmf-shell-inner{display:flex !important;flex-direction:column !important;align-items:center !important;}
.cmf-screen-lead .cmf-shell-inner form{width:100%;display:flex !important;flex-direction:column !important;align-items:center !important;}
.cmf-screen-lead .cmf-shell-inner form .cmf-lead-grid,
.cmf-screen-lead .cmf-shell-inner form .cmf-lead-submit{width:100%;}
.cmf-lead-head{text-align:center !important;max-width:44ch;margin:0 auto 28px;}
.cmf-lead-head h2{font-size:clamp(1.4rem,3.2vw,1.9rem);}
.cmf-lead-head p{color:var(--cmf-ink-soft);margin-top:10px;}
.cmf-lead-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 16px;max-width:600px;margin:0 auto;}
.cmf-field{display:flex;flex-direction:column;gap:7px;}
.cmf-field.full{grid-column:1 / -1;}
.cmf-field label{font-size:.8rem;font-weight:700;color:var(--cmf-ink-soft);}
.cmf-field label .req{color:var(--cmf-accent-2);}
.cmf-field input{border:2px solid var(--cmf-border);border-radius:var(--cmf-radius-s);padding:12px 14px;font-size:1rem;background:var(--cmf-surface);color:var(--cmf-ink);}
.cmf-field input:focus{border-color:var(--cmf-accent);outline:none;}
.cmf-field input.invalid{border-color:var(--cmf-danger);}
.cmf-field-error{font-size:.76rem;color:var(--cmf-danger);min-height:1em;}
.cmf-consent{display:flex;gap:10px;align-items:flex-start;max-width:520px;margin:28px auto 0;padding-top:20px;border-top:1px solid var(--cmf-border);font-size:.84rem;color:var(--cmf-ink-soft);text-align:left;}
.cmf-consent input{margin-top:3px;flex:none;}
.cmf-legal{max-width:480px;margin:22px auto 0 !important;font-size:.76rem;color:var(--cmf-ink-faint);text-align:center !important;}
.cmf-lead-submit{text-align:center;margin-top:26px;}
.cmf-hp-field{position:absolute;left:-9999px;top:-9999px;}

.cmf-screen-results .cmf-shell-inner{display:flex !important;flex-direction:column !important;align-items:center !important;}
.cmf-screen-results .cmf-shell-inner #cmf-top-slot,
.cmf-screen-results .cmf-shell-inner #cmf-others-slot,
.cmf-screen-results .cmf-shell-inner .cmf-advice{width:100%;}
.cmf-results-head{text-align:center !important;max-width:46ch;margin:0 auto 10px !important;}
.cmf-results-head h2{font-size:clamp(1.3rem,3.2vw,1.8rem);}
.cmf-top-label{text-align:center !important;margin:48px 0 26px !important;font-weight:700;color:var(--cmf-accent-2);font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;}

.cmf-machine-card{display:flex;flex-direction:column;background:var(--cmf-surface);border:1px solid var(--cmf-border);border-radius:var(--cmf-radius-m);overflow:hidden;height:100%;}
.cmf-machine-photo{width:100%;aspect-ratio:4/3;background:var(--cmf-surface-2);display:flex;align-items:center;justify-content:center;flex:none;}
.cmf-machine-photo img{width:100%;height:100%;object-fit:cover;}
.cmf-machine-body{padding:30px 32px !important;display:flex;flex-direction:column;flex:1;}
.cmf-machine-category{font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--cmf-ink-faint);}
.cmf-machine-card h3{font-size:1.05rem;margin-top:14px !important;}
.cmf-machine-why{margin-top:18px !important;color:var(--cmf-ink);font-size:.9rem;line-height:1.65;}
.cmf-machine-why b{color:var(--cmf-accent-2);}
.cmf-machine-benefit{margin-top:14px !important;color:var(--cmf-ink-soft);font-size:.86rem;line-height:1.65;}
.cmf-machine-card .cmf-btn{margin-top:28px !important;padding:13px 16px;font-size:.85rem;width:100%;}

/* Top match: a compact horizontal card, not a huge hero image */
.cmf-machine-card.top{
  flex-direction:row;align-items:stretch;height:auto;
  border-color:var(--cmf-accent);box-shadow:0 12px 30px -16px rgba(0,163,174,.35);
}
.cmf-machine-card.top .cmf-machine-photo{width:190px;aspect-ratio:1/1;flex:none;}
.cmf-machine-card.top .cmf-machine-body{padding:34px 38px !important;}
.cmf-machine-card.top h3{font-size:1.25rem;}
.cmf-machine-card.top .cmf-machine-why{font-size:.94rem;}
.cmf-machine-card.top .cmf-machine-benefit{font-size:.9rem;}
.cmf-machine-card.top .cmf-btn{width:auto;padding:14px 30px;margin-top:26px !important;}

.cmf-other-heading{margin:64px 0 28px !important;font-size:1.05rem;text-align:center !important;}
.cmf-other-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;align-items:stretch;}
.cmf-other-grid .cmf-machine-benefit{margin-bottom:22px !important;}
.cmf-other-grid .cmf-btn{margin-top:auto !important;}

.cmf-advice{margin-top:68px !important;background:linear-gradient(135deg,var(--cmf-navy),var(--cmf-navy-2));color:#fff;border-radius:var(--cmf-radius-m);padding:36px clamp(24px,4vw,44px) !important;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;}
.cmf-advice h3{color:#fff;font-size:1.15rem;}
.cmf-advice p{color:#cfe1ee;margin-top:10px !important;max-width:42ch;}
.cmf-restart-row{text-align:center;margin-top:36px !important;}

@media (max-width:900px){
  .cmf-other-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:760px){
  .cmf-lead-grid{grid-template-columns:1fr;}
  .cmf-advice{flex-direction:column;align-items:flex-start;text-align:left;}
}
@media (max-width:520px){
  .cmf-machine-card.top{flex-direction:column;}
  .cmf-machine-card.top .cmf-machine-photo{width:100%;aspect-ratio:16/9;}
}
@media (max-width:640px){
  .cmf-other-grid{grid-template-columns:1fr;max-width:320px;margin:0 auto;}
}
