/* Visual direction from the supplied Parenting Village concept slides. */
:root{--ink:#123f57;--green:#007d86;--lime:#ffe3a0;--paper:#fffaf1;--muted:#526979;--line:#d8e9e7;--coral:#ec6557;--teal-light:#e0f3ef;--yellow:#ffc859}
body{background:radial-gradient(ellipse at 0 20%,#e3f4ef 0,transparent 36%),radial-gradient(ellipse at 100% 90%,#fff0cc 0,transparent 40%),var(--paper);font-family:'Segoe UI',system-ui,sans-serif;color:var(--ink)}
header{padding:18px max(24px,calc((100vw - 1120px)/2));border:0;background:#fffdf8;box-shadow:0 3px 18px #173e4908;position:relative;z-index:2}.brand{display:flex;align-items:center;gap:11px;font-size:25px;font-weight:850;letter-spacing:-1px;line-height:1.1}.brand svg{width:42px;height:42px;flex-shrink:0}.brand span{font-size:9px;letter-spacing:1.6px;margin-top:7px;color:#4c7778}.brand-copy{display:block}.demo{background:#e5f3ef;color:#35646b;text-align:center;font-size:11px;letter-spacing:.4px;border-bottom:1px solid #d4e9e4;padding:9px 20px}main{max-width:1160px;margin:25px auto;padding-bottom:55px}h1{font-family:'Segoe UI',system-ui,sans-serif;font-weight:800;letter-spacing:-1.8px;font-size:clamp(33px,4.1vw,51px);line-height:1.14}h2{font-size:25px;letter-spacing:-.7px;font-weight:780}h3{letter-spacing:-.4px;line-height:1.3}p{line-height:1.65}.eyebrow{color:var(--green);font-size:10px;letter-spacing:1.7px;font-weight:800}
button{border-radius:30px;min-height:44px;padding:12px 21px;background:var(--green);box-shadow:0 3px 0 #00545d15;transition:background .15s,transform .15s}button:hover:not(:disabled){background:#006974;transform:translateY(-1px)}button.secondary{background:#e5f3ef;color:#155d68;box-shadow:none;border:1px solid #cee6e1}button.secondary:hover:not(:disabled){background:#d6ece7}button:disabled{opacity:1;background:#e9efec;color:#657871;box-shadow:none}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #d58b13;outline-offset:3px}nav{padding:6px;background:#fff;border:1px solid var(--line);border-radius:18px;gap:3px;box-shadow:0 4px 14px #164f5105;margin-bottom:24px}nav button{font-size:13px;flex:1;white-space:nowrap;background:transparent;box-shadow:none;border-radius:12px;color:#4c6b74;padding:11px 12px}nav button.active{background:var(--green);box-shadow:0 3px 8px #007d8620}.nav-symbol{display:inline-block;margin-right:5px;font-weight:700}
.hero{grid-template-columns:1.05fr 1fr;background:#e6f4ef;border:1px solid #cee8df;border-radius:25px;box-shadow:0 8px 30px #104c4b06;margin-bottom:26px;position:relative;min-height:340px}.hero>div{padding:36px}.hero>div:first-child{background:linear-gradient(130deg,#e4f4ed,#f2f9ec);position:relative}.hero p{max-width:400px;font-size:15px}.hero .eyebrow{margin-bottom:16px}.hero button{background:var(--coral);box-shadow:0 4px 0 #c7473918}.hero button:hover{background:#d55447}.hero h1 em{font-style:normal;color:var(--green)}.art{display:block!important;padding:0!important;min-height:320px;position:relative;overflow:hidden;background:#cfe8de}.village-art{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;object-position:48% 45%}.art:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#123f5730,transparent 60%);pointer-events:none}.art-note{position:absolute;bottom:22px;left:22px;right:22px;z-index:1;padding:13px 17px;border:1px solid #ffffffb0;border-radius:14px;background:#fffef3ee;color:var(--ink);font-size:13px;box-shadow:0 4px 15px #153f5620}.art-note b{display:block;font-size:18px}.art-note .mini-star{float:right;color:#b56b00;font-size:29px;line-height:1.2}.hero .tag{margin:0;background:#fff9e5;color:#876027;border:1px solid #eedcb7}
.journey-strip{display:flex;align-items:center;gap:8px;margin:0 0 24px;padding:13px 18px;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:auto;font-size:11px;color:#567178;white-space:nowrap}.journey-strip strong{color:var(--green)}.journey-strip i{font-style:normal;color:var(--coral);font-weight:700}.journey-strip .step-dot{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#e1f0e9;color:var(--green);margin-right:5px;font-size:10px;font-weight:800}
.card{border:1px solid #d6e7e1;border-radius:20px;padding:24px;box-shadow:0 5px 20px #15465505;overflow:hidden}.card p{font-size:14px}.card>.tag{background:#fce8e4;color:#9d433b;border-radius:8px;font-size:10px;letter-spacing:.3px}.card:nth-child(3n+2)>.tag{background:#e0f0ec;color:#27685d}.card:nth-child(3n)>.tag{background:#fff0ca;color:#856026}.card button{font-size:13px}.grid{gap:18px}.stat{font:800 46px/1.2 'Segoe UI',sans-serif;letter-spacing:-2px;color:var(--green);margin:10px 0}.progress{height:11px;background:#e1ede7}.progress span{background:linear-gradient(90deg,#00a5a6,#54bd9b);border-radius:10px}.grid>.card:has(>.stat){background:#fffef9}.grid>.card:has(>.stat):first-child{background:#e3f3ed;border-color:#c5e1d5}.grid>.card:has(>.stat):nth-child(2){background:#fff3d8;border-color:#f0ddb4}.grid>.card:has(>.stat):nth-child(3){background:#fff0e9;border-color:#f0d9cd}
.activity-art{display:flex;align-items:center;gap:14px;padding:17px 20px;margin:-24px -24px 19px;background:linear-gradient(110deg,#ffede8,#fff8ee);border-bottom:1px solid #f1ddd3}.activity-art.connection{background:linear-gradient(110deg,#e4f3e8,#f5faed);border-color:#d5e8d6}.activity-art.digital{background:linear-gradient(110deg,#e9e6fa,#f4f2fe);border-color:#e1dcf4}.activity-art svg{width:44px;height:44px;flex-shrink:0}.activity-art b{display:block;font-size:12px}.activity-art span{font-size:11px;color:#526979}.card>small{display:block;font-size:11px;line-height:1.7}.card h3{margin-top:8px}.tag{line-height:1.5}.section-title{margin-top:30px}.milestone{border:1px dashed #d3dfd7;border-radius:14px;padding:15px 16px 15px 50px;position:relative;background:#fafbf6}.milestone:before{content:'★';position:absolute;left:14px;top:15px;font-size:25px;color:#a2b4ac}.milestone.earned{border:1px solid #efdb9a;background:#fff8dc}.milestone.earned:before{color:#cf8e0a}.milestone b{font-size:14px}.history{font-size:13px}.history b{color:#265f67}.notice{background:#e6f4f1;border:1px solid #c9e5df;color:#315f66;border-radius:13px;font-size:13px}.error{background:#ffebe6;color:#843920}.narrow{max-width:580px;margin:28px auto}.narrow h1{font-size:34px;letter-spacing:-1px}.narrow h2{font-size:27px}label{font-size:13px;color:#244f61;margin-top:18px}input,select{border-color:#c2dad6;border-radius:10px;background:#fcfefb;color:#214b5f;min-height:45px;font-size:14px}input[type=checkbox]{min-height:0;accent-color:var(--green)}form>button{margin-top:20px!important}small{font-size:12px}table th{background:#e8f3ef;color:#285765;font-size:11px;letter-spacing:.3px}td,th{padding:13px 10px;border-color:#e1ece7}.toast{background:#115e67;border:1px solid #d7eee4;border-radius:16px;font-size:14px}.domain-ribbon{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;margin:30px 0 20px;padding:16px;border-top:1px solid #dbe9de;border-bottom:1px solid #dbe9de;font-size:11px;color:#416c64}.domain-ribbon span:first-child{color:#a44e47}.domain-ribbon span:last-child{color:#2b6986}.village-signoff{text-align:center;color:#55736e;font-size:13px;margin-bottom:16px}.village-signoff b{color:var(--green)}footer{text-align:center;font-size:10px;margin-top:24px}footer a{font-size:11px}
@media(min-width:900px){body[data-view=profile] .narrow{max-width:630px}.hero h1{max-width:440px}body[data-view=login] .hero{min-height:390px}body[data-view=login] .hero>div:first-child{display:flex;flex-direction:column;justify-content:center}}
@media(max-width:700px){header{padding:17px 18px}.brand{font-size:21px;gap:8px}.brand svg{width:33px;height:33px}.brand span{font-size:8px;letter-spacing:1px}header>button{font-size:11px;padding:9px 12px;min-height:39px}main{padding:0 15px 35px;margin-top:18px}.demo{font-size:9px;padding:8px 12px}.hero{display:flex;flex-direction:column;border-radius:21px;min-height:0}.hero>div:first-child{padding:25px 24px}.hero h1{font-size:35px;letter-spacing:-1.1px;margin-bottom:14px}.hero p{font-size:13px;margin-bottom:18px}.hero .art{min-height:210px;height:210px;display:block!important}.village-art{object-position:50% 43%}.art-note{bottom:12px;left:14px;right:14px;padding:9px 12px;font-size:11px}.art-note b{font-size:14px}.art-note .mini-star{font-size:24px}nav{display:grid;grid-template-columns:repeat(3,1fr);padding:5px;border-radius:15px;gap:3px;margin-bottom:17px}nav button{font-size:11px;white-space:normal;padding:8px 4px;min-height:40px}.nav-symbol{margin-right:3px}.journey-strip{gap:6px;padding:11px 12px;font-size:10px;border-radius:12px;margin-bottom:17px}.journey-strip .step-dot{width:18px;height:18px;font-size:9px;margin-right:3px}.grid,.grid.two{grid-template-columns:1fr}.card{padding:21px;border-radius:18px}.activity-art{margin:-21px -21px 17px;padding:14px 19px}.narrow{margin:20px auto}.narrow h1{font-size:31px}.section-title.row{gap:0}.section-title.row h2{margin-bottom:5px}.section-title.row small{font-size:10px}h2{font-size:23px}.domain-ribbon{gap:10px;font-size:10px;padding:13px 0}.village-signoff{font-size:12px}.card .row{gap:8px}}
@media(prefers-reduced-motion:reduce){button{transition:none}button:hover:not(:disabled){transform:none}}
@media(max-width:700px){.journey-strip{display:grid;grid-template-columns:repeat(3,1fr);white-space:normal;overflow:visible;row-gap:9px}.journey-strip>i{display:none}.journey-strip>span{white-space:nowrap}}
/* Persistent navigation, reachable with a thumb on phones. */
body:has(nav){padding-bottom:100px}body:has(nav) main{padding-bottom:35px}
nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,1160px);z-index:20;margin:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;padding:9px 12px calc(9px + env(safe-area-inset-bottom));border:1px solid #c8dfda;border-bottom:0;border-radius:20px 20px 0 0;background:#fffefbf7;box-shadow:0 -5px 24px #123f5714;backdrop-filter:blur(12px)}
nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;min-height:59px;padding:7px 4px;font-size:11px;line-height:1.2;white-space:normal;border-radius:12px}.nav-symbol{font-size:21px;line-height:1.1;margin:0}.toast{bottom:105px}
@media(max-width:700px){body:has(nav){padding-bottom:100px}nav{grid-template-columns:repeat(6,minmax(0,1fr));gap:2px;padding:7px 5px calc(7px + env(safe-area-inset-bottom));border-radius:17px 17px 0 0}nav button{min-height:58px;padding:5px 2px;font-size:9px;letter-spacing:-.1px}.nav-symbol{font-size:21px;margin:0}.toast{bottom:calc(91px + env(safe-area-inset-bottom));font-size:12px}}
.organisation-passport{margin:0 0 26px;background:#fffefb}.organisation-passport>p{margin-bottom:22px}.organisation-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.organisation-badge{background:#f8faf7;border:1px solid #dce8e1;border-radius:16px;padding:16px 12px;text-align:center}.organisation-badge svg{width:100px;height:100px;display:block;margin:0 auto 8px}.organisation-badge h3{font-size:15px;margin:0 0 4px}.organisation-badge>span,.organisation-badge>b,.organisation-badge>small{display:block}.organisation-badge>span{font-size:11px;color:#58727b}.organisation-badge>b{margin:10px 0 2px;font-size:18px}.organisation-badge small{font-size:11px}.badge-meter{height:6px;margin:12px 0;background:#dce3df;border-radius:8px;overflow:hidden}.badge-meter span{display:block;height:100%}.badge-key{margin-top:20px;padding:13px 15px;background:#eef5ed;border-radius:12px;font-size:11px;color:#48646c;line-height:1.7}.organisation-badge details{text-align:left;margin-top:12px;font-size:11px}.organisation-badge summary{cursor:pointer;color:#007d86;font-weight:650;min-height:28px}.organisation-badge details p{font-size:11px;border-top:1px solid #dae5de;padding-top:8px;margin-bottom:8px}@media(max-width:700px){.organisation-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.organisation-badge{padding:13px 8px}.organisation-badge svg{width:85px;height:85px}.organisation-badge h3{font-size:13px}.organisation-passport h2{font-size:24px}.badge-key{font-size:10px}}
.qr-talk-card{display:flex;gap:20px;border:1px solid var(--line);padding:18px;border-radius:15px;align-items:center}.qr-image{width:140px;flex:0 0 140px;background:white}.qr-image svg{width:100%;height:auto;display:block;shape-rendering:crispEdges}.qr-talk-card h3{font-size:17px}.qr-talk-card p{font-size:12px}.qr-talk-card a{font-size:12px;display:inline-block;margin-top:12px}.qr-arrival{margin-bottom:24px}.qr-arrival button{margin:5px 8px 5px 0}@media(max-width:700px){.qr-talk-card{flex-direction:column;align-items:flex-start}.qr-image{width:160px;flex-basis:auto;align-self:center}.qr-talk-card>div:last-child{width:100%}}
nav{grid-template-columns:repeat(3,minmax(0,1fr)) 64px repeat(2,minmax(0,1.5fr))}
nav button[data-page="checkin"]{grid-column:4;grid-row:1;background:#007d86;color:white;min-height:68px;margin-top:-19px;border:3px solid #fff;border-radius:22px;box-shadow:0 4px 14px #123f5740;font-size:12px}
nav button[data-page="checkin"].active{background:#123f57}
nav button[data-page="checkin"] .nav-symbol{font-size:27px}
nav button[data-page="practice"]{grid-column:3;grid-row:1}
.scan-camera{width:min(92vw,520px);max-height:90vh}.scan-camera video{width:100%;max-height:50vh;border-radius:12px;background:#123f57}.scan-camera::backdrop{background:#123f57a0}