:root{--pine:#254739;--pine-deep:#1d392d;--ink:#252724;--cognac:#a65d32;--muted:#637067;--line:#e8e5df;--bg:#fdfcf9;--panel:#ffffff;--soft:#f5f3ed;--soft-green:#eef2ed}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 Inter,'DM Sans',Arial,sans-serif}
h1,h2,h3{font-family:'DM Serif Display',Georgia,serif;font-weight:400;letter-spacing:-.03em;line-height:1.08}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #b0794e;outline-offset:3px}
.wrap{max-width:1140px;margin:auto;padding:0 28px}
.eyebrow{color:var(--cognac);letter-spacing:.15em;font-size:11px;font-weight:700;text-transform:uppercase}
.lead{padding:72px 0 32px}
.lead h1{font-size:clamp(42px,7vw,72px);margin:10px 0 18px}
.lead p{color:var(--muted);max-width:700px;font-size:18px;line-height:1.72}
.search{margin-top:28px}
.filters{display:flex;flex-wrap:wrap;gap:9px;margin:25px 0 20px}
.filters button{background:#f4f1eb;border:1px solid #dedbd4;padding:11px 16px;min-height:44px;border-radius:30px;cursor:pointer;color:#345543;font-weight:700}
.filters button[aria-pressed=true]{background:var(--pine);color:white}
input[type=search]{display:block;width:min(100%,550px);padding:14px;border:1px solid #d7d7d2;border-radius:12px;font-size:16px;background:#fff}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding-bottom:90px}
.card{text-decoration:none;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 10px 28px rgba(20,33,24,.04)}
.card:hover{box-shadow:0 12px 30px rgba(20,33,24,.08);transform:translateY(-1px)}
.card svg,.card>img{width:100%;display:block;aspect-ratio:1.62;object-fit:cover;background:var(--soft)}
.card .copy{padding:20px 20px 22px}
.card h2{font-size:28px;margin:7px 0 10px}
.card p{font-size:14px;color:var(--muted);line-height:1.65;margin:0}
.meta{font-size:12px;font-weight:700;color:#365944;margin-top:14px}

.article{max-width:1120px;margin:0 auto;padding:44px 24px 110px}
.article h1{font-size:clamp(44px,6vw,72px);margin:12px 0 14px;max-width:760px}
.article .dek{font-size:20px;color:#586a5d;line-height:1.7;max-width:760px;margin:0 0 18px}
.back{display:inline-block;padding:10px 0;color:var(--pine);font-size:13px;font-weight:700;text-decoration:none}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 18px}
.chips span{background:#f1efe8;border-radius:999px;padding:9px 14px;color:#395643;font-size:12px;font-weight:700}
.controls{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 18px}
.controls button{border:1px solid #d5ded5;background:#fff;color:var(--pine);border-radius:999px;min-height:44px;padding:10px 18px;font-weight:700;cursor:pointer}
.controls button:hover{background:#f5f8f4}
#saveGuide[aria-pressed=true]{background:var(--pine);color:#fff;border-color:var(--pine)}
#copyStatus,#blGuideStatus{margin:0 0 16px;color:#5b6b60;font-size:14px;min-height:22px}

.article .hero{margin:16px 0 30px;border:1px solid var(--line);border-radius:24px;overflow:hidden;background:#fff;box-shadow:0 12px 34px rgba(20,33,24,.04)}
.fg-hero-brief{background:linear-gradient(180deg,#eef3ee,#f7f8f5);color:var(--pine);min-height:240px;padding:32px 36px;display:flex;flex-direction:column;justify-content:space-between}
.fg-hero-line{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:11px;font-weight:800;letter-spacing:.11em}
.fg-hero-head{font:normal clamp(30px,4vw,48px)/1.02 'DM Serif Display',Georgia,serif;letter-spacing:-.045em;max-width:500px}
.fg-hero-foot{font-size:13px;line-height:1.6;color:#5e7062;max-width:420px}
.fg-ponytail-hero-photo{aspect-ratio:846/317;background:#eaece5}
.fg-ponytail-hero-photo img{display:block;width:100%;height:100%;object-fit:cover}

.article .needs{margin:18px 0 34px;padding:24px 26px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(180deg,#fff,#fbfaf7)}
.article .needs h2{margin:0 0 12px;font-size:30px}
.needs ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px;padding:0;margin:0;list-style:none}
.needs li{position:relative;padding-left:18px;color:#4e5e53}
.needs li::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--cognac);position:absolute;left:0;top:.72em}

.article h2{font-size:38px;margin:0 0 14px}
.step{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,430px);gap:32px;align-items:start;background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:28px;margin:18px 0;box-shadow:0 10px 28px rgba(20,33,24,.04);break-inside:avoid}
.step-copy{min-width:0}
.step .num{display:inline-flex;align-items:center;justify-content:center;min-width:58px;height:36px;padding:0 14px;border-radius:999px;background:#f4ece4;color:var(--cognac);font:700 12px/1 Inter,Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px}
.step h3{font-size:clamp(27px,3vw,34px);margin:0 0 10px;max-width:520px}
.step p{color:#5b6b60;font-size:16px;line-height:1.75;margin:0;max-width:520px}
.step-media{position:relative;min-width:0}
.step-media::before{content:'visual guide';position:absolute;left:16px;top:14px;z-index:2;background:var(--pine);color:#fff;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:8px 12px;border-radius:999px}
.step svg,.step .fg-photo-step{display:block;width:100%;height:auto;border-radius:18px;border:1px solid #e0e2db;background:var(--soft);overflow:hidden}
.step .instruction-visual{aspect-ratio:520/310}
.fg-photo-step{margin:0;aspect-ratio:1.6;background:#eaece5}
.fg-photo-step img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}

.callout-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:28px 0 0}
.callout{background:#f8f3eb;border:1px solid #ead8c8;border-left:4px solid var(--cognac);padding:20px 22px;border-radius:18px;margin:0;min-height:100%}
.callout h3{font-size:27px;margin:0 0 8px}
.callout p{margin:0;color:#485b4d;line-height:1.7}
.callout.safety{background:#eef2ed;border-color:#d6e3da;border-left-color:var(--pine)}
.foot{border-top:1px solid var(--line);padding:22px 0 0;color:var(--muted);font-size:13px;margin-top:20px}
.empty{grid-column:1/-1;color:var(--muted)}
.fg-footer{margin-top:50px;padding:30px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;align-items:center;color:#627067;font-size:14px}
.fg-footer nav{display:flex;gap:14px;flex-wrap:wrap}

@media(max-width:980px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.step{grid-template-columns:1fr}.step-media::before{left:14px;top:12px}.callout-grid{grid-template-columns:1fr}}
@media(max-width:600px){.wrap{padding:0 18px}.grid{grid-template-columns:1fr}.lead{padding-top:42px}.lead p{font-size:16px}.article{padding:30px 18px 100px}.article .dek{font-size:17px}.article .needs{padding:20px}.needs ul{grid-template-columns:1fr}.step{padding:22px;gap:18px}.step h3{font-size:28px}.step p{font-size:15px}.controls{gap:8px}.fg-hero-brief{padding:24px;min-height:188px}.fg-footer{flex-direction:column;align-items:flex-start}}
@media print{.controls,.back,.filters,.search,.bl-site-header,.bl-mobile-nav,.fg-footer{display:none!important}.article{padding:0;max-width:100%}.step{grid-template-columns:1fr 1fr;box-shadow:none}.step-media::before{display:none}.article h1{font-size:36px}}
[hidden]{display:none!important}