:root{
  --paper:#FAF5EC; --paper-2:#F5EDDF; --card:#FFFDF8;
  --ink:#33291F; --ink-soft:#6E6253; --ink-faint:#A0917E;
  --line:#EADFCD; --clay:#C05E3C; --clay-deep:#A2492C; --clay-soft:#F8E8DD;
  --halo:0 1px 1px rgba(255,250,242,.7), 0 2px 22px rgba(255,250,242,.5);
  --shadow-sm:0 1px 2px rgba(51,41,31,.04), 0 8px 24px -10px rgba(51,41,31,.12);
  --ease:cubic-bezier(.22,.7,.2,1);
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ background:var(--paper); -webkit-text-size-adjust:100%; }
body{ background:var(--paper); color:var(--ink); font-family:'Hanken Grotesk',system-ui,-apple-system,sans-serif; font-size:1.06rem; line-height:1.68; -webkit-font-smoothing:antialiased; }
h1,h2,h3{ font-family:'Fraunces',Georgia,serif; font-weight:400; letter-spacing:-.018em; }
a{ color:inherit; }
[hidden]{ display:none !important; }
.wrap{ max-width:56rem; margin:0 auto; padding:0 clamp(1rem,5vw,3rem); }
.nav{ background:rgba(250,245,236,.82); border-bottom:1px solid var(--line); }
.nav .wrap{ display:flex; align-items:center; height:4.2rem; }
.brand{ font-family:'Fraunces',serif; font-weight:500; font-size:1.28rem; text-decoration:none; }
.btn{ display:inline-flex; align-items:center; gap:.55rem; font:600 1rem 'Hanken Grotesk',sans-serif; text-decoration:none; cursor:pointer; border:none; padding:.92rem 1.9rem; border-radius:999px; background:var(--clay); color:#FFF8F2; box-shadow:0 1px 2px rgba(120,50,30,.18),0 12px 26px -10px rgba(160,73,44,.5); transition:transform .3s var(--ease),background .25s ease; }
.btn:hover{ transform:translateY(-2px); background:var(--clay-deep); }
.btn.big{ font-size:1.14rem; padding:1.02rem 2.25rem; }
.btn.ghost{ background:transparent; color:var(--clay); border:1.5px solid var(--clay); box-shadow:none; }
.btn.ghost:hover{ background:var(--clay); color:#FFF8F2; }
.hero{ position:relative; min-height:68vh; display:flex; align-items:center; overflow:hidden; }
.hero-bg{ position:absolute; inset:-4%; background:url('../img/hero.jpg') center bottom/cover; transform:scale(1.04); animation:breathe 34s ease-in-out infinite alternate; }
@keyframes breathe{ from{ transform:scale(1.04) } to{ transform:scale(1.13) } }
.hero::after{ content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(250,245,236,.72) 0%,rgba(250,245,236,.34) 40%,rgba(250,245,236,.1) 72%,rgba(250,245,236,.55) 100%); }
.hero .wrap{ position:relative; z-index:2; width:100%; padding-top:4rem; padding-bottom:6rem; }
.hero h1{ font-size:clamp(2.6rem,6vw,4.6rem); line-height:1.03; margin-bottom:1.2rem; text-shadow:var(--halo); }
.hero-sub{ font-size:clamp(1.16rem,1.8vw,1.4rem); line-height:1.5; max-width:34rem; font-weight:500; text-shadow:var(--halo); }
.cta{ margin-top:2.2rem; }
.cta small{ display:block; margin-top:.9rem; font-size:.95rem; text-shadow:var(--halo); }
.cta small a{ font-weight:600; margin-right:.9rem; white-space:nowrap; }
.section{ padding:clamp(3rem,7vw,5.5rem) 0; }
.steps{ display:flex; flex-direction:column; gap:1.4rem; }
.step{ display:grid; grid-template-columns:auto 1fr; gap:1rem 1.6rem; align-items:start; background:var(--card); border:1px solid var(--line); border-radius:20px; padding:1.9rem 2rem; box-shadow:var(--shadow-sm); }
.step-n{ width:3rem; height:3rem; border-radius:50%; display:flex; align-items:center; justify-content:center; font:1.3rem 'Fraunces',serif; color:#FFF8F2; background:var(--clay); }
.step h2{ font-size:1.55rem; line-height:1.14; margin-bottom:.55rem; }
.step p, .step li{ color:var(--ink-soft); }
.step p + p, .step ol + p, .step .btn{ margin-top:.8rem; }
.step ol{ padding-left:1.2rem; }
.step li{ margin-bottom:.45rem; }
.step b{ color:var(--ink); font-weight:600; }
.tabs{ display:flex; gap:.5rem; margin-bottom:1rem; }
.tabs button{ font:600 .92rem 'Hanken Grotesk',sans-serif; color:var(--ink-soft); background:transparent; border:1px solid var(--line); border-radius:999px; padding:.4rem 1rem; cursor:pointer; }
.tabs button[aria-pressed="true"]{ background:var(--clay-soft); border-color:var(--clay); color:var(--clay-deep); }
.note{ background:var(--paper-2); border-radius:12px; padding:.85rem 1.05rem; font-size:.98rem; }
.footer{ border-top:1px solid var(--line); background:var(--paper-2); padding:2rem 0; color:var(--ink-soft); }
@media (max-width:620px){ .step{ grid-template-columns:1fr; padding:1.5rem 1.25rem; } .hero{ min-height:60vh; } .btn.big{ width:100%; justify-content:center; } }
@media (prefers-reduced-motion:reduce){ .hero-bg{ animation:none; } .btn{ transition:none; } }
.nav .wrap{ justify-content:space-between; gap:1rem; }
.nav-links{ display:flex; gap:1.3rem; font-weight:600; font-size:.98rem; }
.nav-links a{ text-decoration:none; color:var(--ink-soft); padding:.3rem 0; border-bottom:2px solid transparent; }
.nav-links a:hover, .nav-links a[aria-current="page"]{ color:var(--clay-deep); border-bottom-color:var(--clay); }
.page-head{ padding:clamp(2.6rem,6vw,4.4rem) 0 0; }
.page-head h1{ font-size:clamp(2.2rem,5vw,3.6rem); line-height:1.06; margin-bottom:1rem; }
.page-head p{ font-size:clamp(1.1rem,1.6vw,1.28rem); line-height:1.55; max-width:40rem; color:var(--ink-soft); }
.section.tight{ padding-top:clamp(2rem,4vw,3rem); }
.card{ background:var(--card); border:1px solid var(--line); border-radius:20px; padding:1.9rem 2rem; box-shadow:var(--shadow-sm); }
.card + .card{ margin-top:1.4rem; }
.card h2{ font-size:1.55rem; line-height:1.14; margin-bottom:.6rem; }
.card h3{ font-family:'Hanken Grotesk',sans-serif; font-weight:700; font-size:1.02rem; letter-spacing:0; color:var(--ink); margin:1.1rem 0 .3rem; }
.card p, .card li{ color:var(--ink-soft); }
.card p + p, .card ol + p, .card ul + p, .card p + ol, .card p + ul, .card .btn, .card .note{ margin-top:.8rem; }
.card ol, .card ul{ padding-left:1.2rem; }
.card li{ margin-bottom:.45rem; }
.card b{ color:var(--ink); font-weight:600; }
.card a:not(.btn){ color:var(--clay-deep); font-weight:600; }
.shot{ display:block; width:100%; height:auto; border:1px solid var(--line); border-radius:14px; margin-top:1.1rem; }
.prompt{ margin-top:1rem; border:1px solid var(--line); border-radius:14px; background:var(--paper-2); overflow:hidden; }
.prompt-bar{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.7rem 1rem; border-bottom:1px solid var(--line); font-weight:600; font-size:.95rem; }
.prompt-bar button{ font:600 .92rem 'Hanken Grotesk',sans-serif; color:#FFF8F2; background:var(--clay); border:none; border-radius:999px; padding:.5rem 1.2rem; cursor:pointer; }
.prompt-bar button:hover{ background:var(--clay-deep); }
.prompt pre{ max-height:13rem; overflow:auto; padding:1rem; font:.84rem/1.55 ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--ink-soft); white-space:pre-wrap; word-break:break-word; }
.pair{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }
.pair .card + .card{ margin-top:0; }
.pair + .card{ margin-top:1.4rem; }
.facts{ margin-top:.9rem; }
.facts div{ padding:.6rem 0; border-top:1px solid var(--line); }
.facts dt{ font-weight:700; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); }
.facts dd{ color:var(--ink); }
.tag{ display:inline-block; font-weight:700; font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:var(--clay-deep); background:var(--clay-soft); border-radius:999px; padding:.2rem .75rem; margin-bottom:.7rem; }
.next{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1rem; }
@media (max-width:760px){ .pair{ grid-template-columns:1fr; } }
@media (max-width:620px){ .card{ padding:1.5rem 1.25rem; } .nav-links{ gap:.9rem; font-size:.92rem; } .brand{ font-size:1.05rem; } }
.step a:not(.btn){ color:var(--clay-deep); }
.prompt + p{ margin-top:.9rem; }
