/* Easeful — shared site styles */
:root{
  --bg:#fbfbfa; --surface:#ffffff; --ink:#12130f; --ink-2:#4a4e46; --ink-3:#7c8177;
  --line:#e6e6e1; --accent:#157f4a; --accent-soft:#eaf4ee; --rose:#e0455c; --rose-soft:#fdeef0;
  --radius:16px; --maxw:1080px;
  --shadow:0 1px 2px rgba(18,19,15,.04),0 8px 24px rgba(18,19,15,.06);
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0e100d; --surface:#161914; --ink:#f2f3ef; --ink-2:#b6bbb1; --ink-3:#868b81;
    --line:#262a22; --accent:#4ec489; --accent-soft:#14251c; --rose:#f4788a; --rose-soft:#2a1418;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 28px rgba(0,0,0,.35);
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:400 17px/1.65 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:6px}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.narrow{max-width:740px}

/* header */
header.site{position:sticky; top:0; z-index:50; background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; justify-content:space-between; height:60px; gap:16px}
.brand{display:flex; align-items:center; gap:9px; font-weight:640; letter-spacing:-.02em; color:var(--ink); font-size:17px}
.brand:hover{text-decoration:none}
.mark{width:26px; height:26px; flex:none}
.wordmark{font-family:Georgia,"Iowan Old Style","Times New Roman",serif; font-size:21px;
  font-weight:400; letter-spacing:-.01em}
.navlinks{display:flex; gap:26px; align-items:center}
.navlinks a{color:var(--ink-2); font-size:15px; font-weight:500}
.navlinks a:hover{color:var(--ink); text-decoration:none}
@media (max-width:640px){ .navlinks{display:none} }

/* type */
h1,h2,h3{letter-spacing:-.028em; line-height:1.12; margin:0; font-weight:660}
h1{font-size:clamp(38px,6.2vw,64px)}
h2{font-size:clamp(27px,3.6vw,38px)}
h3{font-size:19px; letter-spacing:-.015em}
.lede{font-size:clamp(18px,2.1vw,21px); color:var(--ink-2); line-height:1.6}
.eyebrow{font-size:13px; font-weight:640; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin:0 0 14px}
section{padding:clamp(64px,9vw,110px) 0}
section + section{border-top:1px solid var(--line)}

/* hero */
.hero{padding-top:clamp(56px,8vw,92px); padding-bottom:0}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(32px,5vw,64px); align-items:center}
@media (max-width:860px){ .hero-grid{grid-template-columns:1fr; text-align:left} }
.hero h1{margin-bottom:20px}
.hero .lede{max-width:34ch}
.pill{display:inline-flex; align-items:center; gap:8px; padding:6px 13px; border-radius:999px;
  background:var(--accent-soft); color:var(--accent); font-size:13.5px; font-weight:600; margin-bottom:22px}
.dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.cta-row{display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-top:30px}
.btn{display:inline-flex; align-items:center; gap:9px; height:48px; padding:0 22px; border-radius:12px;
  font-size:16px; font-weight:600; background:var(--accent); color:#fff; border:1px solid transparent}
.btn:hover{text-decoration:none; filter:brightness(1.06)}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.note{font-size:14px; color:var(--ink-3)}

/* phone */
.phone{position:relative; width:min(266px,72vw); margin-inline:auto; border-radius:42px; padding:9px;
  background:linear-gradient(160deg,#d8dad4,#f4f5f1 40%,#cfd2cb); box-shadow:var(--shadow)}
@media (prefers-color-scheme:dark){ .phone{background:linear-gradient(160deg,#33372f,#1c1f19 40%,#2c302a)} }
.phone img{border-radius:34px; background:#fff}
.phone::after{content:""; position:absolute; top:15px; left:50%; transform:translateX(-50%);
  width:78px; height:20px; border-radius:12px; background:#0d0f0c}

/* trust strip */
.strip{display:flex; gap:12px 34px; flex-wrap:wrap; justify-content:center; padding:22px 0 0;
  color:var(--ink-3); font-size:14.5px; font-weight:520}
.strip span{display:inline-flex; align-items:center; gap:8px}
.tick{width:15px;height:15px;flex:none;color:var(--accent)}

/* cards */
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); gap:18px; margin-top:44px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px 22px}
.card h3{margin:0 0 8px}
.card p{margin:0; color:var(--ink-2); font-size:15.5px; line-height:1.6}
.ico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--accent-soft);
  color:var(--accent); margin-bottom:14px}
.ico svg{width:18px;height:18px}

/* privacy band */
.band{background:var(--surface); border-block:1px solid var(--line)}
.band .kv{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:26px; margin-top:40px}
.kv div{padding-left:18px; border-left:2px solid var(--accent)}
.kv h3{margin:0 0 6px; font-size:16.5px}
.kv p{margin:0; color:var(--ink-2); font-size:15px}

/* gallery */
.shots{display:flex; gap:20px; overflow-x:auto; padding:44px 4px 8px; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch}
.shots figure{margin:0; flex:none; width:214px; scroll-snap-align:center}
.shots img{border-radius:22px; border:1px solid var(--line); box-shadow:var(--shadow)}
.shots figcaption{margin-top:11px; font-size:13.5px; color:var(--ink-3); text-align:center}

/* faq */
details{border-bottom:1px solid var(--line); padding:18px 0}
details summary{cursor:pointer; font-weight:600; font-size:17px; list-style:none; display:flex;
  justify-content:space-between; gap:16px; align-items:center}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+"; color:var(--ink-3); font-weight:400; font-size:22px; line-height:1}
details[open] summary::after{content:"−"}
details p{margin:12px 0 0; color:var(--ink-2); font-size:15.5px}

/* legal pages */
.legal{padding:clamp(48px,7vw,84px) 0}
.legal h1{font-size:clamp(31px,4.6vw,44px); margin-bottom:10px}
.legal h2{font-size:21px; margin:38px 0 10px}
.legal h3{font-size:17px; margin:24px 0 8px}
.legal p,.legal li{color:var(--ink-2); font-size:16.5px}
.legal ul,.legal ol{padding-left:22px}
.legal li{margin:6px 0}
.legal strong{color:var(--ink); font-weight:620}
.updated{font-size:14.5px; color:var(--ink-3); margin:0 0 8px}
.callout{background:var(--accent-soft); border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);
  border-radius:var(--radius); padding:18px 20px; margin:26px 0}
.callout p{margin:0; color:var(--ink); font-size:16px}
.toc{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px 24px; margin:28px 0 8px}
.toc p{margin:0 0 10px; font-weight:640; color:var(--ink); font-size:15px}
.toc ol{margin:0; padding-left:20px; columns:2; column-gap:32px}
@media (max-width:640px){ .toc ol{columns:1} }
.toc li{margin:3px 0; font-size:15px}

/* footer */
footer.site{border-top:1px solid var(--line); padding:44px 0; color:var(--ink-3); font-size:14.5px}
.foot{display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; align-items:center}
.foot a{color:var(--ink-2)}
.foot nav{display:flex; gap:22px; flex-wrap:wrap}