:root{
  --bg: #FFFFFF;
  --ink: #241B36;
  --ink-soft: #6E657F;
  --green: #3DD68C;
  --orange: #FF9F1C;
  --blue: #3A86FF;
  --pink: #FF6FA3;
  --line: #ECE8F5;
  --panel: #F7F5FC;
  --max: 600px;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{animation:none!important;transition:none!important;} }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:'Inter',sans-serif; font-size:17px; line-height:1.55; }
h1,h2,h3{ font-family:'Baloo 2',sans-serif; font-weight:700; line-height:1.15; margin:0; }
:focus-visible{ outline:3px solid var(--blue); outline-offset:3px; }
.wrap{ max-width:var(--max); margin:0 auto; padding:0 22px; }

.meter{ height:10px; background:var(--line); border-radius:999px; overflow:hidden; margin:0 22px; position:sticky; top:0; z-index:10; }
.meter-fill{ height:100%; width:0%; background:var(--green); border-radius:999px; transition:width 0.3s ease; }

.hero{ padding:32px 0 30px; text-align:center; }
.badge{ display:inline-block; background:var(--panel); border:2px solid var(--line); border-radius:999px; padding:6px 14px; font-weight:600; font-size:0.85rem; margin-bottom:16px; }
.hero h1{ font-size:clamp(1.9rem,8vw,2.4rem); }
.hero p{ margin:16px auto 0; max-width:34ch; color:var(--ink-soft); font-size:1.02rem; }

section{ padding:34px 0; }
.sectionhead{ text-align:center; margin-bottom:22px; }
.sectionhead .eyebrow{ display:inline-block; color:white; border-radius:8px; padding:4px 10px; font-weight:700; font-size:0.78rem; margin-bottom:10px; }
.sectionhead h2{ font-size:clamp(1.4rem,6vw,1.7rem); }

.hook{ background:var(--panel); border-left:4px solid var(--orange); border-radius:12px; padding:16px 18px; margin:0 0 16px; font-size:1.05rem; font-weight:600; }

.concept{ background:var(--panel); border-radius:14px; padding:16px 18px; margin:0 0 14px; }
.concept .label{ font-family:'Baloo 2',sans-serif; font-size:0.85rem; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:6px; }
.concept p{ margin:0; }

.action{ background:var(--bg); border:2px dashed var(--ink); border-radius:14px; padding:14px 18px; margin:0 0 14px; }
.action .label{ font-family:'Baloo 2',sans-serif; font-size:0.85rem; font-weight:700; color:var(--ink); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:6px; }
.action p{ margin:0; }

.demo{ background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:12px 16px; margin:0 0 14px; font-family:'SF Mono',Menlo,monospace; font-size:0.9rem; color:var(--ink-soft); }

.identity{ background:var(--ink); color:white; border-radius:14px; padding:14px 18px; margin:0 0 8px; font-family:'Baloo 2',sans-serif; font-weight:600; font-size:1.05rem; text-align:center; }

.next{ display:block; text-align:center; background:var(--panel); border:2px solid var(--line); border-radius:16px; padding:18px; margin:24px 22px; text-decoration:none; color:var(--ink); font-family:'Baloo 2',sans-serif; font-weight:600; font-size:1.05rem; }
.next:hover{ background:var(--line); }

.day-grid{ display:flex; flex-direction:column; gap:10px; margin:0 22px; }
.day-card{ display:flex; align-items:center; gap:14px; background:var(--panel); border:2px solid var(--line); border-radius:16px; padding:16px 18px; text-decoration:none; color:var(--ink); transition:transform 0.2s; }
.day-card:hover{ transform:translateX(4px); border-color:var(--blue); }
.day-card .num{ width:42px; height:42px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; color:white; font-family:'Baloo 2',sans-serif; font-weight:800; font-size:1.1rem; }
.day-card .label{ font-family:'Baloo 2',sans-serif; font-weight:700; font-size:1.05rem; margin-bottom:2px; }
.day-card .sub{ font-size:0.88rem; color:var(--ink-soft); }