:root{font:16px/1.6 "DM Sans",system-ui,sans-serif;color:#10233f;background:#fff;--green:#006655;--line:#d9e8e3}
*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}a:focus-visible{outline:3px solid #00836e;outline-offset:4px}
.wrap{width:min(1120px,calc(100% - 36px));margin-inline:auto}.site-header,nav,footer,.actions{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}.site-header,footer{justify-content:space-between;padding-block:14px}.site-header img{display:block;object-fit:contain}.button{display:inline-flex;align-items:center;gap:.55rem;min-height:44px;padding:.6rem 1rem;border-radius:.75rem;background:var(--green);color:white;font-weight:700;border:1px solid var(--green);transition:transform .18s,box-shadow .18s}.button.secondary{background:white;color:#12352e;border-color:var(--line)}.button:hover{transform:translateY(-2px);box-shadow:0 8px 20px #00352a20}.button:active{transform:scale(.98)}
.hero{background:radial-gradient(ellipse at 85% 30%,#c2eddf,transparent 65%),#f1faf6;padding-block:clamp(3rem,8vw,7rem)}.hero-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(1.5rem,5vw,4rem);align-items:center}.eyebrow{font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin:0 0 .6rem}h1,h2,h3{line-height:1.12;margin:0}h1{font-size:clamp(2.4rem,5.2vw,4.5rem);letter-spacing:-.055em}h1 em{color:var(--green);font-style:normal}.intro{max-width:38ch;color:#425970;margin:1.2rem 0}
.preview{padding:clamp(.9rem,3vw,1.55rem);background:#fff;border:1px solid var(--line);border-radius:1.35rem;box-shadow:0 24px 64px #10463820;animation:appear .5s ease-out both}.preview-top,.preview-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex-wrap:wrap}.preview-top span,.preview-row strong{color:var(--green);font-size:.8rem}.metrics,.cards{display:grid;gap:.8rem;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:1rem}.metrics>div,.trend{background:#f1f8f5;padding:.75rem;border-radius:.75rem}.metrics strong{display:block;font-size:1.6rem}.trend{margin-block:.8rem}.bars{display:flex;align-items:end;gap:6%;height:76px;margin-top:.5rem}.bars i{flex:1;height:45%;background:#00836e;border-radius:.3rem .3rem 0 0}.bars i:nth-child(2n){height:72%;background:#6bc9af}.bars i:nth-child(5){height:90%}.preview-row{border-top:1px solid var(--line);padding:.55rem 0}
.features{padding-block:clamp(2rem,6vw,5rem)}h2{font-size:clamp(1.8rem,4vw,3rem);letter-spacing:-.04em}.cards{grid-template-columns:repeat(3,minmax(0,1fr))}.cards article{padding:1.15rem;border:1px solid var(--line);border-radius:1rem}.cards span{display:block;color:var(--green);font-weight:800;margin-bottom:.65rem}.cards p{color:#425970;margin-bottom:0}footer{border-top:1px solid var(--line)}
@keyframes appear{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@media(max-width:760px){.hero-grid,.cards{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){.preview{animation:none}.button{transition:none}.button:hover,.button:active{transform:none}}
.fields{display:grid;gap:.85rem}.fields label{display:grid;gap:.25rem;font-weight:650}.fields input:not([type=checkbox]),.fields textarea,.fields select{width:100%;min-width:0;padding:.65rem;border:1px solid var(--line);border-radius:.55rem;background:#fff;font:inherit;color:inherit}.fields textarea{min-height:6rem;resize:vertical}.fields .check{display:flex;align-items:center}.fields .button{justify-self:start;cursor:pointer;font:inherit;font-weight:700}.price{font-size:1.22rem;font-weight:800}

/* Ragnar public welcome palette */
:root {
    --green: #14294b;
    --line: #e7dab8;
    color: #14294b;
    background: #fffdf5;
}
body { background: #fffdf5; }
.site-header, footer { color: #14294b; }
.hero {
    background: radial-gradient(ellipse at 88% 20%, #2b476b, transparent 65%), #10223e;
    color: #fff3cf;
}
.hero h1 em, .hero .eyebrow { color: #f5da95; }
.hero .intro, #demo .hero-grid > div > p:not(.eyebrow) { color: #f1e8d1; }
.button { background: #14294b; border-color: #14294b; color: #fff3cf; }
.button.secondary { background: #fff6dc; border-color: #e7dab8; color: #14294b; }
.hero .button { background: #f5da95; border-color: #f5da95; color: #14294b; }
.hero .button.secondary { background: transparent; border-color: #f5da95; color: #fff3cf; }
.preview, .cards article { background: #fffaf0; color: #14294b; border-color: #e7dab8; }
.metrics > div, .trend { background: #f8ebc9; }
.bars i { background: #253d63; }
.bars i:nth-child(2n) { background: #a47732; }
.cards p { color: #43536b; }
.fields input:not([type=checkbox]), .fields textarea, .fields select { background: #fffdf7; border-color: #b9a984; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
    outline: 3px solid #a47732;
    outline-offset: 3px;
}