:root { --bg:#FBF5F0; --ink:#2B221F; --muted:#6E5F58; --line:#EBDDD3; --soft:#F5EBE3; --accent:#D0654A; --accent-d:#B24E36; --sans:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif; --serif:'Instrument Serif','Times New Roman',serif; }
*,*::before,*::after { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
.wrap { max-width:1040px; margin:0 auto; padding:0 20px; }
.wrap.narrow { max-width:760px; }
.top { position:sticky; top:0; z-index:10; background:rgba(251,245,240,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.top .in { max-width:1040px; margin:0 auto; padding:10px 20px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand { display:flex; align-items:center; gap:8px; font-weight:700; text-decoration:none; }
.top nav { display:flex; align-items:center; gap:18px; font-size:15px; }
.top nav a { text-decoration:none; color:var(--muted); }
.btn { display:inline-block; background:var(--accent); color:#fff !important; padding:12px 22px; border-radius:12px; font-weight:600; text-decoration:none; }
.btn:hover { background:var(--accent-d); }
.btn.sm { padding:8px 14px; font-size:14px; }
.btn.ghost { background:transparent; color:var(--ink) !important; border:1px solid var(--line); margin-left:10px; }
.hero { padding:56px 0 40px; }
.eyebrow { color:var(--accent-d); font-weight:600; font-size:14px; letter-spacing:.04em; text-transform:uppercase; margin:0 0 10px; }
h1 { font-family:var(--serif); font-weight:400; font-size:clamp(32px,5.5vw,52px); line-height:1.1; margin:0 0 16px; max-width:20ch; }
h2 { font-family:var(--serif); font-weight:400; font-size:clamp(26px,3.6vw,36px); line-height:1.15; margin:0 0 20px; }
h3 { font-size:17px; margin:0 0 6px; }
.lead { font-size:19px; color:var(--muted); max-width:62ch; margin:0 0 22px; }
.cta { margin:0 0 12px; display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.cta .btn.ghost { margin-left:0; }
.note { color:var(--muted); font-size:14px; margin:0; }
section { padding:44px 0; }
.band { background:var(--soft); }
.pains { margin:0; padding-left:20px; display:grid; gap:8px; color:var(--ink); }
.grid { display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); }
.grid article { background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px; }
.grid p { margin:0; color:var(--muted); font-size:15.5px; }
.steps { margin:0; padding-left:22px; display:grid; gap:10px; }
details { background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px 18px; margin-bottom:10px; }
summary { cursor:pointer; font-weight:600; }
details p { margin:10px 0 0; color:var(--muted); }
.final { text-align:center; }
.final .cta { justify-content:center; }
.related { color:var(--muted); font-size:15px; }
.related a { margin:0 6px; color:var(--accent-d); }
footer { border-top:1px solid var(--line); padding:24px 0 40px; color:var(--muted); font-size:14px; }
.foot { display:flex; flex-wrap:wrap; gap:12px 24px; justify-content:space-between; }
.foot nav { display:flex; flex-wrap:wrap; gap:14px; }
.foot a { text-decoration:none; }
@media (max-width:560px) { .top nav a:not(.btn) { display:none; } .hero { padding-top:36px; } }

.shots { display:grid; grid-template-columns:repeat(3, minmax(0, 250px)); gap:clamp(16px,3vw,32px); justify-content:center; margin-top:28px; }
.shot { margin:0; text-align:center; }
.phoneframe { border:7px solid #1d1613; border-radius:32px; overflow:hidden; background:#fff; line-height:0; box-shadow:0 18px 40px -14px rgba(70,40,25,.35); }
.phoneframe img { width:100%; height:auto; display:block; }
.shot figcaption { margin-top:12px; font-size:15px; line-height:1.45; color:var(--muted); }
.shot figcaption b { display:block; color:var(--ink); font-size:16px; margin-bottom:2px; }
@media (max-width:760px) { .shots { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; justify-content:flex-start; padding:4px 20px 16px; margin-left:-20px; margin-right:-20px; } .shot { flex:0 0 min(70vw, 260px); scroll-snap-align:center; } }

/* Tools dropdown in the shared header */
.dd { position: relative; }
.dd > button { font: inherit; font-size: 15px; background: none; border: 0; color: var(--muted); cursor: pointer; padding: 0; display: inline-flex; align-items: center; gap: 4px; }
.dd > button::after { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.dd-panel { display: none; position: absolute; top: calc(100% + 10px); right: -8px; min-width: 290px; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 8px; box-shadow: 0 24px 50px -20px rgba(43,34,31,.35); z-index: 20; }
.dd:hover .dd-panel, .dd:focus-within .dd-panel, .dd.open .dd-panel { display: block; }
.dd-panel a { display: block; padding: 10px 12px; border-radius: 10px; color: var(--ink) !important; text-decoration: none; font-size: 15px; }
.dd-panel a:hover { background: var(--soft); }
.dd-panel a b { display: block; font-size: 15px; }
.dd-panel a span { display: block; font-size: 13px; color: var(--muted); }
@media (max-width: 560px) { .dd { display: none; } }