/* One self-hosted face: Figtree (variable, wght 300-900), headings and body. The display faces were removed 2026-09-30 (14:22 "easier on the eyes"). */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(/assets/fonts/Figtree-1.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* hyelyf.com shared design: B (Elyse) dark field, Figtree headings + body, D's light form block.
   Every visible text is 17px or larger. Accent text on the dark field stays pastel (ink rule). */
:root{--field:#101312;--raise:#171b19;--ink:#f1f2ee;--red:#ffb8ae;--green:#a6f5c9;--line:#3a403d;
  --pad:clamp(20px,6vw,72px);--cell:#e9eae8;--cink:#161514;--rust:#8a3b12}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--field);color:var(--ink);font:400 18px/1.6 Figtree,system-ui,sans-serif;overflow-wrap:break-word}
::selection{background:var(--green);color:var(--field)}
a{color:inherit;text-underline-offset:4px}
:focus-visible{outline:2px solid var(--green);outline-offset:4px}
.serif,h1,h2{font-family:Figtree,system-ui,sans-serif;font-weight:700;letter-spacing:0}
[hidden]{display:none!important}

/* Header */
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px var(--pad);position:relative}
.mark{display:grid;font-weight:800;font-size:22px;line-height:1;letter-spacing:.06em;text-decoration:none;flex:none}
.mark span+span{padding-left:.9em}
.top .wide{display:none;gap:22px;font-weight:600}
.top .wide a{text-decoration:none;padding:6px 0;border-bottom:1.5px solid transparent}
.top .wide a:hover,.top .wide a[aria-current]{border-bottom-color:var(--green)}
.acts{display:flex;gap:8px;align-items:center}
.pill{display:inline-block;font-weight:600;font-size:17px;text-decoration:none;padding:7px 13px;border:1.5px solid var(--ink);border-radius:999px;cursor:pointer;list-style:none;white-space:nowrap}
.pill::-webkit-details-marker{display:none}
.menu[open] summary{background:var(--ink);color:var(--field)}
.menu nav{position:absolute;right:var(--pad);left:var(--pad);top:100%;z-index:5;display:grid;background:var(--raise);border:1px solid var(--line);border-radius:16px;padding:8px 18px}
.menu nav a{padding:12px 0;font-weight:600;font-size:19px;text-decoration:none;border-top:1px solid var(--line)}
.menu nav a:first-child{border-top:0}
@media(min-width:900px){.top .wide{display:flex}.menu{display:none}}

/* Sections */
.screen{padding:72px var(--pad);border-top:1px solid var(--line)}
.first{padding:14px var(--pad) 40px}
.home h1{font-size:clamp(40px,11vw,92px);line-height:1.1;max-width:12ch}
.page h1{font-size:clamp(34px,9vw,72px);line-height:1.12;max-width:18ch}
.from{font-weight:600;font-size:clamp(24px,6vw,48px);line-height:1.2;margin-top:18px}
.from .r,.red h2 em{color:var(--red);font-style:normal}
.from .g,.green h2 em{color:var(--green);font-style:normal}
.cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.btn{display:inline-block;padding:14px 22px;font-weight:600;text-decoration:none;border:1.5px solid var(--ink);border-radius:999px}
.btn.fill{background:var(--green);border-color:var(--green);color:var(--field)}
.btn:active{transform:scale(.98)}
.answer{margin-top:28px;max-width:44ch;font-size:clamp(19px,2vw,22px);line-height:1.55}
.eyebrow{font-weight:700;font-size:17px;letter-spacing:.08em;text-transform:uppercase;color:var(--green);margin-bottom:12px}
.eyebrow a{text-decoration:none}
.screen h2{font-size:clamp(34px,9vw,84px);line-height:1.12;max-width:15ch}
.sec{padding:56px var(--pad);border-top:1px solid var(--line)}
.sec h2{font-size:clamp(28px,7vw,52px);line-height:1.15;max-width:20ch}
p.body{margin-top:18px;max-width:62ch;font-size:clamp(18px,1.6vw,20px)}
.home p.body{max-width:44ch}
.more{margin-top:18px;font-weight:600}
.list{margin-top:22px;list-style:none;max-width:62ch}
.list li{padding:12px 0;border-top:1px solid var(--line)}
.list.big li{font-weight:600;font-size:clamp(21px,2.6vw,27px);line-height:1.3}
.list.small li{font-size:19px}
.list.links a{font-weight:600}

/* FAQ */
.qa{border-top:1px solid var(--line);max-width:780px}
.qa:first-of-type{margin-top:22px}
.qa summary{list-style:none;cursor:pointer;padding:18px 38px 18px 0;position:relative}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";position:absolute;right:4px;top:12px;font-size:28px;color:var(--green)}
.qa[open] summary::after{content:"\2212"}
.qa h3{font-weight:700;font-size:21px;line-height:1.3}
.qa p{padding:0 0 22px;max-width:62ch}

/* D's form block, light, on the dark page */
.formblock{margin-top:26px;max-width:600px;background:var(--cell);color:var(--cink);border-radius:16px;padding:22px}
.lead{display:grid;gap:12px}
.f{display:grid;gap:4px}
.f label{font-weight:600}
.lead input,.lead select,.lead textarea{font:inherit;font-size:18px;color:var(--cink);background:#fff;border:1.5px solid var(--cink);border-radius:10px;padding:12px;width:100%}
.lead ::placeholder{color:#4d4a46}
.lead input:focus,.lead select:focus,.lead textarea:focus{outline:2px solid var(--rust);outline-offset:1px}
.lead [aria-invalid]{border-color:#9b1c1c;border-width:2px}
.lead button{font:inherit;font-weight:700;font-size:20px;min-height:56px;border-radius:999px;background:var(--cink);color:var(--cell);border:0;cursor:pointer}
.lead button:disabled{opacity:.6}
.lead button:active{transform:scale(.98)}
.lead .msg{font-weight:600}
.lead.sent .msg{font-size:20px}
.fine a{font-weight:600}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.tel{font-weight:700;font-size:clamp(32px,9.5vw,100px);line-height:1.1;text-decoration:none;margin-top:40px;display:block;white-space:nowrap}
.mail{display:inline-block;margin-top:10px;font-size:20px;font-weight:600}

/* Articles */
.byline{margin-top:14px;font-weight:600}
.article article{padding:14px var(--pad) 40px}
.prose{max-width:68ch}
.prose .answer{max-width:none}
.prose h2{font-size:clamp(26px,5.6vw,38px);line-height:1.18;margin-top:48px}
.prose h3{font-weight:700;font-size:22px;line-height:1.3;margin-top:28px}
.prose p,.prose ul,.prose ol{margin-top:16px}
.prose ul,.prose ol{padding-left:1.2em}
.prose li+li{margin-top:8px}
.prose em{font-style:italic}
.prose a{font-weight:600}
.tw{margin-top:18px;overflow-x:auto;max-width:100%}
.tw table{border-collapse:collapse;width:100%;min-width:0}
.tw th,.tw td{text-align:left;vertical-align:top;padding:12px 10px;border-top:1px solid var(--line);font-size:17px}
.tw th{font-weight:700;border-top:0;border-bottom:1.5px solid var(--ink)}
.tw td:first-child{font-weight:600;width:34%}
@media(max-width:699px){
  .tw thead{display:none}
  .tw table,.tw tbody,.tw tr,.tw td{display:block;width:100%}
  .tw tr{border-top:1.5px solid var(--ink);padding:10px 0}
  .tw td,.tw td:first-child{border:0;padding:4px 0;width:100%}
  .tw td::before{content:attr(data-label);display:block;font-weight:700;color:var(--green)}
}
.cards{list-style:none;display:grid;gap:12px;max-width:900px}
.cards a{display:grid;gap:8px;padding:22px;border:1px solid var(--line);border-radius:16px;text-decoration:none;background:var(--raise)}
.cards a:hover{border-color:var(--green)}
.cards strong{font-size:clamp(21px,2.6vw,27px);line-height:1.2;font-weight:700}

/* Footer */
footer{padding:34px var(--pad) 40px;border-top:1px solid var(--line)}
footer p{max-width:66ch}
footer p+p,footer nav+p{margin-top:12px}
.fcall{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:22px;font-weight:700}
.flinks{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:16px;font-weight:600}
.flinks.legal-links{margin-top:10px}

@media (prefers-reduced-motion:no-preference){
  .from .g{animation:rise 1.4s cubic-bezier(.16,1,.3,1) .4s both}
  @keyframes rise{from{opacity:.3;filter:blur(6px)}to{opacity:1;filter:none}}
}

/* Legal pages (Privacy Policy, Terms of Use, Disclaimer): plain black on white for reading. Same header and
   footer markup; every accent, raised surface and display size is switched off. */
html.legal{--field:#fff;--raise:#fff;--ink:#000;--line:#c8c8c8;--green:#000;--red:#000}
html.legal{background:#fff}
.legal ::selection{background:#000;color:#fff}
.legal .page h1{font-size:clamp(32px,7vw,48px);line-height:1.15}
.legal .page h2{font-size:clamp(22px,4vw,28px);line-height:1.25;max-width:none}
.legal .page .answer{font-size:19px;max-width:66ch}
.legal .sec{padding:28px var(--pad)}
.legal .sec p,.legal .sec ul{margin-top:12px;max-width:66ch}
.legal .sec ul{padding-left:1.2em}
.legal .sec li+li{margin-top:6px}
.legal .qa h3{font-size:19px}
.legal .qa p{padding-bottom:16px}
.legal .page a{font-weight:600}