/* Dearword site · "Calm & Nordic": mist background, fjord blue, a little red-roof accent. */
:root{
  --mist:#F4F6F8; --mist2:#EBF0F6; --card:#FFFFFF; --ink:#1B2533; --muted:#5B6675; --line:#D5DDE6;
  --fjord:#2F5470; --fjord-ink:#FFFFFF; --roof:#C2563E;
  --serif:"Fraunces",Georgia,serif; --sans:"Manrope",-apple-system,system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--mist);color:var(--ink);font:400 1.0625rem/1.65 var(--sans);-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--fjord)}
.wrap{width:min(1080px,100% - 32px);margin:0 auto}

/* floating pill nav */
.nav{position:sticky;top:max(12px,env(safe-area-inset-top));z-index:10;margin:12px auto 0;width:min(1080px,100% - 32px);
  display:flex;align-items:center;justify-content:space-between;padding:10px 12px 10px 24px;border:1px solid var(--line);
  border-radius:999px;background:rgba(244,246,248,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.brand{font:450 1.45rem/1 var(--serif);font-variation-settings:"opsz" 48;color:var(--ink);text-decoration:none;letter-spacing:-.01em}
.nav nav{display:flex;gap:4px}
.nav nav a{color:var(--muted);text-decoration:none;padding:8px 14px;border-radius:999px;font-size:.95rem;font-weight:400}
.nav nav a{display:inline-flex;align-items:center;gap:8px}
.flag{width:20px;height:14px;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.nav nav a[aria-current="page"]{background:var(--mist2);color:var(--ink)}

/* type */
.eyebrow{font-size:.9rem;font-weight:400;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);margin:0 0 20px}
h1{font:420 clamp(2.7rem,7vw,4.8rem)/1.04 var(--serif);font-variation-settings:"opsz" 72;letter-spacing:-.018em;margin:0 0 26px}
h2{font:420 clamp(2rem,5vw,3.1rem)/1.1 var(--serif);font-variation-settings:"opsz" 72;letter-spacing:-.012em;margin:0 0 20px}
.lead{font-size:1.15rem;font-weight:400;color:var(--muted);max-width:34em;margin:0 0 30px}

/* sections */
section{padding:72px 0;border-top:1px solid var(--line)}
.hero{border-top:0;padding:96px 0 72px;background:linear-gradient(180deg,#E9EEF3 0%,var(--mist) 100%)}
.hero.photo{position:relative;padding:0;min-height:min(92svh,860px);display:flex;align-items:flex-end;overflow:hidden;margin-top:-76px}
.hero.photo{background:#cfd6dd}
.hero.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%}
/* the see-through layer over the photo: even mist everywhere, a little stronger behind the text, fading into the page */
.hero.photo::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(244,246,248,0) 55%,rgba(244,246,248,1) 100%),
  linear-gradient(90deg,rgba(244,246,248,.78) 0%,rgba(244,246,248,.55) 50%,rgba(244,246,248,.35) 100%)}
@media (max-width:700px){.hero.photo::after{background:linear-gradient(180deg,rgba(244,246,248,.2) 0%,rgba(244,246,248,.6) 45%,rgba(244,246,248,.97) 80%)}}
.hero.photo .wrap{position:relative;z-index:1;padding:140px 0 56px}
/* home hero: the fjord as a full background under a frosty, see-through mist */
.hero.frost::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(236,240,245,.55) 0%,rgba(236,240,245,.62) 55%,rgba(244,246,248,.92) 88%,rgba(244,246,248,1) 100%)}
.hero.frost img{object-position:50% 60%;filter:saturate(.75)}
.tint{background:var(--mist2)}
.split{display:grid;gap:40px;align-items:center}
@media (min-width:860px){.split{grid-template-columns:1.1fr 1fr}}
.art{border-radius:24px;border:1px solid var(--line);overflow:hidden;background:#F5F0E4}

/* buttons */
.btn{display:inline-flex;justify-content:center;align-items:center;min-height:52px;padding:0 28px;border-radius:999px;font:500 1.05rem var(--sans);
  text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .12s ease}
.btn:active{transform:scale(.98)}
.btn.primary{background:var(--fjord);color:var(--fjord-ink);box-shadow:0 8px 24px rgba(47,84,112,.22)}
.btn.ghost{background:rgba(255,255,255,.6);color:var(--ink);border-color:var(--line)}
.stack{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:520px){.stack{display:grid}}
.note{color:var(--muted);font-size:1rem}

/* steps */
.steps{list-style:none;padding:0;margin:0;display:grid;gap:34px}
@media (min-width:860px){.steps{grid-template-columns:repeat(4,1fr)}}
.steps li{display:grid;grid-template-columns:auto 1fr;gap:18px}
.steps .n{font:400 2.6rem/1 var(--serif);font-variation-settings:"opsz" 72;color:var(--roof)}
.steps b{display:block;font-size:1.15rem;font-weight:500;margin-bottom:6px}
.steps span{color:var(--muted)}

/* example cards */
.cards{display:grid;gap:14px;max-width:640px}
.card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:24px 26px}
.card .label{font-size:.9rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.card.dark{background:var(--fjord);border-color:var(--fjord);color:#fff}
.card.dark .label{color:#D6E2EC}
.card.dark p{font:400 1.75rem/1.35 var(--serif);font-variation-settings:"opsz" 72;margin:0}
.card p{margin:0}

/* the "Amma hears" voice: a gentle sound wave that moves faster while the example plays */
.voice{display:flex;align-items:center;gap:16px;margin-top:20px}
.play{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid rgba(255,255,255,.55);
  background:rgba(255,255,255,.12);color:#fff;font:600 1rem var(--sans);cursor:pointer}
.wave{display:flex;align-items:center;gap:5px;height:40px}
.wave i{display:block;width:5px;height:35%;border-radius:3px;background:#D6E2EC;opacity:.85;animation:wave 1.6s ease-in-out infinite}
.wave i:nth-child(2){animation-delay:-.2s}.wave i:nth-child(3){animation-delay:-.4s}.wave i:nth-child(4){animation-delay:-.6s}
.wave i:nth-child(5){animation-delay:-.8s}.wave i:nth-child(6){animation-delay:-1s}.wave i:nth-child(7){animation-delay:-1.2s}
.wave i:nth-child(8){animation-delay:-1.4s}.wave i:nth-child(9){animation-delay:-.3s}.wave i:nth-child(10){animation-delay:-.7s}
.playing .wave i{animation-duration:.55s;opacity:1}
@keyframes wave{0%,100%{height:22%}50%{height:95%}}
@media (prefers-reduced-motion: reduce){.wave i{animation:none;height:55%}}

/* quote */
.quote{text-align:center}
.quote blockquote{font:400 clamp(1.9rem,4.6vw,3rem)/1.2 var(--serif);font-variation-settings:"opsz" 72;letter-spacing:-.01em;margin:0 auto 18px;max-width:18em}

/* forms */
form{display:grid;gap:16px;max-width:560px}
label{display:grid;gap:6px;font-weight:500;font-size:1rem}
label small{font-weight:400;color:var(--muted);font-size:.95rem}
input,select,textarea{font:400 1.0625rem var(--sans);color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;width:100%}
input:focus,select:focus,textarea:focus,.btn:focus-visible,a:focus-visible{outline:3px solid #8FB0C9;outline-offset:2px}
textarea{min-height:110px;resize:vertical}
fieldset{border:0;padding:0;margin:0;display:grid;gap:8px}
legend{font-weight:500;font-size:1rem;margin-bottom:6px}
.choice{display:flex;gap:10px;align-items:center;font-weight:400;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.choice input{width:auto;margin:0;accent-color:var(--fjord)}
.inline{display:grid;gap:12px}
@media (min-width:640px){.inline{grid-template-columns:1fr auto}}
.hp{position:absolute;left:-9999px}
.msg{font-weight:600}
.msg:empty{display:none}
.msg.ok::before{content:"✓ "}
.msg.err::before{content:"⚠︎ "}

footer{padding:40px 0 calc(40px + env(safe-area-inset-bottom));text-align:center;color:var(--muted);font-size:1rem;border-top:1px solid var(--line)}

/* language picker (replaces the native datalist popup) */
.combo{position:relative}
.combo input{padding-right:44px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%235B6675' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 18px center}
.combo-list{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 6px);margin:0;padding:6px;list-style:none;max-height:280px;overflow:auto;
  background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 14px 34px rgba(27,37,51,.12),0 2px 6px rgba(27,37,51,.06)}
.combo-list li{padding:11px 14px;border-radius:10px;cursor:pointer;font-size:1.0625rem;color:var(--ink)}
.combo-list li:hover,.combo-list li[aria-selected="true"]{background:var(--mist2)}

/* centered signup block (home "notify me") */
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}
.center form{margin:0 auto;text-align:left}
.center .note{text-align:center}