/* Sign-up page for the free calculator. Mobile first: base rules are the phone layout, wider screens add to them.
   Draft 2026-10-14. Colours: teal for labels and gains, gold for the example result, no green (green stays in the calculator). */

.draft-bar{background:var(--gold);color:var(--navy);text-align:center;font-weight:700;font-size:.85rem;padding:7px 12px}
body.optin-page{padding-bottom:78px}

/* Hero: intro, then the form, then the bullets. On wide screens the form moves to the right. */
.optin-hero{padding:26px 0 34px}
.optin-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:22px}
.optin-hero h1{margin:10px 0 14px}
.optin-hero .lead{margin:0}
.hero-proof .check-list{margin:4px 0 0}

/* Form card */
.optin{padding:22px 20px}
.optin h2{font-size:1.5rem;line-height:1.15;margin:6px 0 2px}
.optin label{display:block;font-weight:600;margin:16px 0 6px}
.optin input[type=text],.optin input[type=email]{width:100%;box-sizing:border-box;min-height:52px;padding:13px 14px;border-radius:10px;border:1px solid var(--line);background:#07131f;color:var(--white);font:inherit;font-size:max(1rem,16px)}
.optin input[type=text]:focus,.optin input[type=email]:focus{outline:2px solid var(--teal);outline-offset:1px}
.optin .consent{display:flex;gap:12px;align-items:flex-start;font-weight:400;font-size:.92rem;line-height:1.45;color:var(--muted);margin-top:18px;cursor:pointer}
.optin .consent input{margin-top:1px;width:22px;height:22px;flex:none;accent-color:var(--teal)}
.optin .button{width:100%;min-height:54px;justify-content:center;margin-top:20px;border:0;cursor:pointer}
.optin .fine{font-size:.8rem;line-height:1.45;color:var(--muted);margin:14px 0 0}
.optin .fine a{color:var(--muted)}

/* Live demo of the result panel, example figures only */
.demo-wrap{max-width:660px;margin:0 auto}
.demo{--tone:#e3a63f;--glow:rgba(227,166,63,.55);background:linear-gradient(125deg,#113444,#091722);border:1px solid #326d7a;border-radius:20px;padding:22px 16px 20px;text-align:center}
.demo.full{--tone:#22d3ee;--glow:rgba(34,211,238,.5)}
.demo-eyebrow{color:var(--teal);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;margin:0}
.ring{position:relative;display:block;width:min(220px,62vw);aspect-ratio:1/1;margin:14px auto 6px}
.ring svg{display:block;width:100%;height:100%;overflow:visible}
.ring-track{fill:none;stroke:#12283a;stroke-width:8}
.ring-fill{fill:none;stroke:var(--tone);stroke-width:8;stroke-linecap:round;stroke-dasharray:326.73;filter:drop-shadow(0 0 5px var(--glow));transition:stroke-dashoffset 1.2s cubic-bezier(.2,.8,.2,1),stroke .4s ease}
.ring-tick{stroke:#3b5a70;stroke-width:1.6}
.ring-core{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring-num{font-size:clamp(3rem,15vw,4.4rem);font-weight:800;line-height:1;letter-spacing:-.04em;color:var(--tone);text-shadow:0 0 .35em var(--glow);font-variant-numeric:tabular-nums;transition:color .4s ease}
.ring-unit{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:#b7c7d6;font-weight:700;margin-top:6px}
.ring-key{display:block;font-size:.76rem;color:#8ea3b5}
.demo-line{font-size:1.04rem;line-height:1.5;color:var(--white);margin:12px auto 0;max-width:34ch}
.demo-fine{font-size:.8rem;color:#8ea3b5;margin:6px auto 0}
.level{max-width:460px;margin:18px auto 0;text-align:left}
.level-scale{display:flex;justify-content:space-between;font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);margin-bottom:6px}
.level-bar{height:12px;border-radius:7px;background:#071420;border:1px solid #1f3a4d;overflow:hidden}
.level-fill{height:100%;border-radius:7px;background:linear-gradient(90deg,#0e7490,#22d3ee);transition:width 1s cubic-bezier(.2,.8,.2,1)}
.level-text{font-size:.92rem;line-height:1.5;color:var(--white);margin:10px 0 0;text-align:center}
.chips-label{text-align:left;color:var(--teal);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;margin:22px 0 8px}
.chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.chip{min-height:60px;border-radius:12px;border:1px solid #2a4a5e;background:#0e2232;color:var(--white);font:inherit;font-weight:800;font-size:1rem;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:8px 4px;transition:border-color .2s ease,box-shadow .2s ease,transform .15s ease}
.chip small{color:var(--teal);font-weight:700;font-size:.76rem}
.chip:active{transform:scale(.97)}
.chip[aria-pressed=true]{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal),0 0 18px rgba(34,211,238,.25)}
.chip-note{font-size:.8rem;color:#8ea3b5;margin:12px 0 0;text-align:left}
.demo-cta{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:22px}
.demo-cta .button{width:100%;max-width:420px;justify-content:center;min-height:54px}

/* Without the number, with the number */
.contrast{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin-top:8px}
.contrast article{border-radius:16px;padding:20px;border:1px solid var(--line);background:var(--panel)}
.contrast h3{font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;margin:0 0 10px;color:#8ea3b5}
.contrast p{margin:8px 0;font-size:1.05rem}
.contrast .without p{color:#8ea3b5;font-style:italic}
.contrast .with{border-color:#326d7a;background:linear-gradient(125deg,#113444,#091722)}
.contrast .with h3{color:var(--teal)}
.contrast .with p{color:var(--white);font-weight:700}
.contrast-cap{font-size:.82rem;color:var(--muted);margin-top:12px}

.steps-grid article strong{color:var(--teal)}

/* Sticky bar on phones once the form has scrolled away */
.optin-bar{position:fixed;left:0;right:0;bottom:0;z-index:6;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px max(12px,env(safe-area-inset-bottom));background:#06111bf5;border-top:1px solid #365061;transform:translateY(110%);transition:transform .3s ease}
.optin-bar.show{transform:none}
.optin-bar span{font-size:.85rem;color:#c9d7e2}
.optin-bar .button{min-height:46px;padding:10px 16px;font-size:.92rem;white-space:nowrap}

@media (min-width:760px){
  .contrast{grid-template-columns:repeat(2,minmax(0,1fr))}
  .demo{padding:30px 28px 26px}
}
@media (min-width:900px){
  body.optin-page{padding-bottom:0}
  .optin-hero{padding:60px 0 64px}
  .optin-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);grid-template-areas:"intro form" "proof form";column-gap:56px;row-gap:6px;align-items:start}
  .hero-intro{grid-area:intro}
  .hero-form{grid-area:form}
  .hero-proof{grid-area:proof}
  .optin{padding:28px}
  .optin-bar{display:none}
}
@media (prefers-reduced-motion:reduce){
  .ring-fill,.level-fill,.ring-num,.chip,.optin-bar{transition:none}
}

.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}