/* ── NUMA — The New You ───────────────────────────────── */

:root{
  --blue:#4F7CC9;          /* primary action */
  --blue-700:#3A66B0;      /* hover */
  --blue-400:#6E91CE;      /* logo / frame tint */
  --blue-50:#EDF2FB;       /* soft ground */
  --ink:#1C1C1E;
  --ink-2:#55565A;
  --ink-3:#8A8B90;
  --white:#fff;
  --line:#E4E8F0;

  --shell:min(1080px, 100% - 3rem);
  --font:"Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--white); color:var(--ink);
  font-family:var(--font); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:inherit}
p{margin:0}

h1,h2,h3{font-weight:600; line-height:1.12; letter-spacing:-.03em; margin:0}
h1{font-size:clamp(2.4rem, 5.6vw, 4rem); font-weight:700}
h2{font-size:clamp(1.7rem, 3.4vw, 2.6rem)}
h3{font-size:1.1rem; letter-spacing:-.02em}

.skip{position:absolute; left:-9999px}
.skip:focus{left:1rem; top:1rem; z-index:99; background:var(--ink); color:#fff; padding:.6rem 1rem; border-radius:8px}

/* Blue ring around the page, as in the brand layouts */
.frame{
  position:fixed; inset:8px; border:2px solid var(--blue-400); border-radius:20px;
  pointer-events:none; z-index:60;
}

/* ── Logo ────────────────────────────────────────────── */
.brand{
  display:inline-flex; align-items:center; text-decoration:none;
  color:var(--blue); gap:.02em;
}
.mark{height:1.55em; width:auto; overflow:visible}
.brand-ma{
  font-size:1.6rem; font-weight:500; letter-spacing:-.045em;
  color:var(--ink); margin-left:.06em; line-height:1;
}

/* ── Buttons ─────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:.4rem;
  background:var(--blue); color:#fff;
  font:500 .92rem/1 var(--font); letter-spacing:-.01em;
  padding:.8rem 1.35rem; border:1.5px solid var(--blue); border-radius:100px;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background .15s ease, border-color .15s ease, transform .15s ease;
}
.btn:hover{background:var(--blue-700); border-color:var(--blue-700); transform:translateY(-1px)}
.btn-ghost{background:transparent; color:var(--blue)}
.btn-ghost:hover{background:var(--blue-50); border-color:var(--blue); color:var(--blue-700)}
.btn-sm{padding:.6rem 1.05rem; font-size:.85rem}
.btn-lg{padding:.95rem 1.9rem; font-size:.98rem}
.btn[disabled]{opacity:.5; pointer-events:none}

.lnk{
  display:inline-block; margin-top:1.4rem; color:var(--blue);
  font-weight:500; font-size:.94rem; text-decoration:none;
}
.lnk:hover{color:var(--blue-700); text-decoration:underline}

/* ── Nav ─────────────────────────────────────────────── */
.nav{position:sticky; top:0; z-index:50; padding:1.15rem 0 .5rem}
.nav-pill{
  width:var(--shell); margin-inline:auto;
  display:flex; align-items:center; gap:1.5rem;
  background:var(--white); border:1px solid var(--line); border-radius:100px;
  padding:.55rem .65rem .55rem 1.5rem;
  box-shadow:0 6px 24px rgba(28,28,30,.07);
}
.nav .brand{margin-right:auto}
.nav-links{display:flex; gap:1.7rem}
.nav-links a{font-size:.9rem; font-weight:400; text-decoration:none; color:var(--ink-2)}
.nav-links a:hover{color:var(--blue)}

/* ── Hero ────────────────────────────────────────────── */
.hero{
  width:var(--shell); margin-inline:auto; text-align:center;
  padding:clamp(3.5rem,9vw,7rem) 0 clamp(3rem,7vw,5rem);
}
/* Brand slogan — the hero's h1 */
.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;
}
.slogan{
  font-size:clamp(2.1rem, 5.2vw, 3.6rem);
  font-weight:400; letter-spacing:-.035em; line-height:1.1;
}
.slogan-vis{display:flex; align-items:center; justify-content:center; gap:.3em; flex-wrap:wrap}
.slogan .brand{color:var(--blue)}
.slogan .mark{height:1.02em}
.slogan .brand-ma{font-size:1em; font-weight:500; margin-left:.04em}
.slogan-dash{color:var(--ink-3); font-weight:300}
.slogan strong{font-weight:700; color:var(--ink)}

.hero-prop{
  font-size:clamp(1.35rem, 2.6vw, 2rem); font-weight:600;
  color:var(--ink); margin-top:1.5rem;
}
.lede{font-size:clamp(1rem,1.5vw,1.1rem); color:var(--ink-2); margin-top:1rem}
.hero-cta{display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; margin-top:2.4rem}

/* ── Sections ────────────────────────────────────────── */
.sec{width:var(--shell); margin-inline:auto; padding:clamp(3rem,6vw,5rem) 0; text-align:center}
.sec h2 + .sub{margin-top:1rem}
.sub{color:var(--ink-2); font-size:1rem}
.sub strong{color:var(--ink); font-weight:600}

.sec-blue{
  width:100%; background:var(--blue-50); border-radius:28px;
  max-width:calc(min(1080px, 100% - 3rem)); padding-inline:clamp(1.5rem,4vw,3rem);
}
.sec-forms{
  width:100%; background:var(--ink); color:#fff; border-radius:28px;
  max-width:calc(min(1080px, 100% - 3rem)); padding-inline:clamp(1.25rem,4vw,3rem);
}

/* ── Pillars ─────────────────────────────────────────── */
.pills{
  list-style:none; padding:0; margin:2.4rem 0 0;
  display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center;
}
.pills li{
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--white); border:1px solid var(--line); border-radius:100px;
  padding:.6rem 1.15rem; font-size:.94rem; font-weight:500;
}
.pills span{color:var(--blue); font-size:.75rem; font-weight:500}

/* ── Offerings ───────────────────────────────────────── */
.cols{display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:2.6rem; text-align:left}
.col{border:1px solid var(--line); border-radius:20px; padding:1.8rem 1.6rem 1.9rem}
.col-tag{
  font-size:.72rem; font-weight:500; letter-spacing:.06em;
  text-transform:uppercase; color:var(--blue); margin-bottom:.55rem;
}
.col h3{font-size:1.35rem; margin-bottom:1.2rem}
.ticks{list-style:none; padding:0; margin:0; display:grid; gap:.75rem}
.ticks li{position:relative; padding-left:1.5rem; font-size:.94rem; color:var(--ink-2)}
.ticks li::before{
  content:""; position:absolute; left:0; top:.55rem;
  width:.45rem; height:.45rem; border-radius:50%; background:var(--blue);
}

/* ── Forms ───────────────────────────────────────────── */
.tabs{display:inline-flex; gap:.25rem; margin-top:2rem; padding:.28rem; background:#2C2C30; border-radius:100px}
.tab{
  font:500 .89rem/1 var(--font); color:rgba(255,255,255,.62);
  background:transparent; border:none; border-radius:100px;
  padding:.7rem 1.3rem; cursor:pointer; transition:.15s ease;
}
.tab:hover{color:#fff}
.tab.is-on{background:#fff; color:var(--ink)}

.panel{margin-top:1.5rem}
.form{
  background:var(--white); color:var(--ink); border-radius:22px;
  padding:clamp(1.25rem,3vw,2.2rem); text-align:left;
  display:grid; gap:1.25rem;
}
.grid{display:grid; grid-template-columns:1fr 1fr; gap:.9rem}
.field{display:grid; gap:.4rem; border:none; padding:0; margin:0; min-width:0}
.lbl{font-size:.82rem; font-weight:500; color:var(--ink-2); padding:0}
.lbl i{color:var(--blue); font-style:normal}
.opt{font-weight:400; color:var(--ink-3)}

input[type=text], input[type=email], select, textarea{
  font:400 .96rem/1.5 var(--font); color:var(--ink);
  background:var(--white); border:1px solid var(--line); border-radius:12px;
  padding:.72rem .9rem; width:100%; transition:border-color .15s, box-shadow .15s;
}
textarea{resize:vertical; min-height:4.8rem}
select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238A8B90' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .9rem center; background-size:12px; padding-right:2.4rem}
input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(79,124,201,.16);
}
.is-bad input, .is-bad select, .is-bad textarea{border-color:#D8503C !important}

.chips{display:flex; flex-wrap:wrap; gap:.45rem}
.chip{position:relative; cursor:pointer}
.chip input{position:absolute; opacity:0; width:0; height:0}
.chip span{
  display:inline-block; font-size:.87rem; font-weight:400;
  background:var(--white); border:1px solid var(--line); border-radius:100px;
  padding:.5rem .95rem; transition:.15s ease;
}
.chip:hover span{border-color:var(--blue-400)}
.chip input:checked + span{background:var(--blue); border-color:var(--blue); color:#fff}
.chip input:focus-visible + span{outline:2px solid var(--blue); outline-offset:2px}
.is-bad .chips span{border-color:#D8503C}

.consent{display:flex; gap:.65rem; align-items:flex-start; font-size:.9rem; color:var(--ink-2); cursor:pointer}
.consent input{margin-top:.22rem; width:1rem; height:1rem; accent-color:var(--blue); flex:none}
.consent.is-bad{color:#D8503C}
.consent.is-bad input{outline:2px solid #D8503C; outline-offset:2px}

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

.form .btn-lg{justify-self:start}
.form-msg{font-size:.9rem; margin:0}
.form-msg.is-bad{color:#D8503C; font-weight:500}

.done{padding:clamp(1.5rem,3vw,2.2rem); text-align:left}
.done h3{font-size:1.5rem; margin-bottom:.6rem}
.done p{color:var(--ink-3); font-size:.96rem}

/* ── Credibility ─────────────────────────────────────── */
.credits{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; text-align:left;
  max-width:44rem; margin-inline:auto;
}
.credits div{display:grid; gap:.3rem; padding-top:1.1rem; border-top:2px solid var(--blue)}
.credits b{font-size:1.5rem; font-weight:600; letter-spacing:-.03em}
.credits span{font-size:.88rem; color:var(--ink-3); line-height:1.45}

/* ── Footer ──────────────────────────────────────────── */
.foot{
  width:var(--shell); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:2rem 0 2.6rem; border-top:1px solid var(--line);
}
.foot p{font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.brand-foot .brand-ma{font-size:1.3rem}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width:900px){
  .nav-links{display:none}
  .cols, .credits{grid-template-columns:1fr}
}
@media (max-width:620px){
  :root{--shell:min(1080px, 100% - 1.75rem)}
  .frame{inset:5px; border-radius:14px; border-width:1.5px}
  .nav-pill{padding-left:1.1rem}
  .grid{grid-template-columns:1fr}
  .tabs{display:flex; width:100%}
  .tab{flex:1; padding-inline:.4rem}
  .hero-cta .btn{width:100%; justify-content:center}
  .foot{flex-direction:column; align-items:flex-start; gap:.6rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important}
}