/* Alf — alfrom.us */
:root{
  --bg:#14100d; --bg2:#1c1712; --panel:#221c15; --line:#3a3025;
  --text:#f2e9dc; --muted:#b8a992; --accent:#e8a13c; --accent2:#f4c069;
  --good:#8fbf7f; --max:72rem;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--text);
  font:400 1.0625rem/1.65 "Source Serif 4",Georgia,"Times New Roman",serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.nav,.btn,.tag,.price-figure{font-family:"Fraunces","Iowan Old Style",Georgia,serif}
a{color:var(--accent2);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--max);margin:0 auto;padding:0 1.25rem}

/* header */
header{border-bottom:1px solid var(--line);background:rgba(20,16,13,.92);position:sticky;top:0;z-index:10;backdrop-filter:blur(6px)}
.nav{display:flex;align-items:center;gap:1.4rem;padding:.9rem 1.25rem;max-width:var(--max);margin:0 auto;flex-wrap:wrap}
.brand{font-weight:700;font-size:1.35rem;color:var(--text);letter-spacing:.01em}
.brand em{color:var(--accent);font-style:normal}
.nav a.item{color:var(--muted);font-size:.95rem}
.nav a.item[aria-current="page"]{color:var(--text);border-bottom:2px solid var(--accent);padding-bottom:2px}
.nav .cta{margin-left:auto}

/* buttons */
.btn{display:inline-block;padding:.65rem 1.15rem;border-radius:8px;border:1px solid var(--accent);
  color:#191307;background:var(--accent);font-weight:600;font-size:.95rem}
.btn:hover{background:var(--accent2);text-decoration:none}
.btn.ghost{background:transparent;color:var(--accent2)}
.btn.ghost:hover{background:rgba(232,161,60,.12)}

/* hero */
.hero{padding:5rem 0 3.5rem;border-bottom:1px solid var(--line);background:
  radial-gradient(60rem 30rem at 80% -10%,rgba(232,161,60,.10),transparent 60%)}
.hero .greeting{color:var(--accent);font-size:1.05rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:.75rem}
.hero h1{font-size:clamp(2rem,4.5vw,3.2rem);line-height:1.15;max-width:44rem}
.hero p.lede{margin:1.25rem 0 1.75rem;max-width:40rem;color:var(--muted);font-size:1.15rem}
.hero .actions{display:flex;gap:.8rem;flex-wrap:wrap}
.hero .pricenote{margin-top:1.1rem;color:var(--muted);font-size:.95rem}
.hero .pricenote strong{color:var(--text)}

/* sections */
section{padding:3.25rem 0;border-bottom:1px solid var(--line)}
section h2{font-size:1.7rem;margin-bottom:1.1rem}
section .kicker{color:var(--accent);text-transform:uppercase;letter-spacing:.08em;font-size:.8rem;margin-bottom:.4rem;font-weight:600}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1.1rem;margin-top:1.4rem}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:1.15rem 1.25rem}
.card h3{font-size:1.08rem;margin-bottom:.45rem;color:var(--accent2)}
.card p{color:var(--muted);font-size:.98rem}
.prose{max-width:44rem}
.prose p{margin-bottom:1rem}
.prose p.muted, .muted{color:var(--muted)}

/* pricing */
.price-box{background:var(--panel);border:1px solid var(--accent);border-radius:14px;padding:2rem;max-width:30rem;margin-top:1.5rem}
.price-figure{font-size:3rem;font-weight:700;color:var(--accent2)}
.price-figure small{font-size:1.05rem;color:var(--muted);font-weight:400}
.ticks{list-style:none;margin-top:1.1rem}
.ticks li{padding:.35rem 0 .35rem 1.6rem;position:relative;color:var(--text)}
.ticks li::before{content:"✓";position:absolute;left:0;color:var(--good);font-weight:700}

/* tables */
table{border-collapse:collapse;width:100%;margin-top:1.2rem;font-size:.97rem}
th,td{border:1px solid var(--line);padding:.6rem .8rem;text-align:left;vertical-align:top}
th{background:var(--bg2);font-family:"Fraunces",Georgia,serif}
td{color:var(--muted)} td strong{color:var(--text)}
.table-scroll{overflow-x:auto}

/* faq */
details{border:1px solid var(--line);border-radius:10px;background:var(--panel);margin-bottom:.7rem;padding:.85rem 1.1rem}
summary{cursor:pointer;font-weight:600;font-family:"Fraunces",Georgia,serif;color:var(--text)}
details p{margin-top:.6rem;color:var(--muted)}

/* forms */
form{max-width:30rem;display:grid;gap:.8rem;margin-top:1.2rem}
label{font-size:.9rem;color:var(--muted)}
input,textarea,select{width:100%;padding:.65rem .8rem;border-radius:8px;border:1px solid var(--line);
  background:var(--bg2);color:var(--text);font:inherit}
input:focus,textarea:focus{outline:2px solid var(--accent);border-color:var(--accent)}

/* footer */
footer{padding:2.5rem 0 3rem;color:var(--muted);font-size:.88rem}
footer .cols{gap:2rem}
footer h4{color:var(--text);font-size:.95rem;margin-bottom:.5rem;font-family:"Fraunces",Georgia,serif}
footer p{margin-bottom:.35rem}
.legal{margin-top:1.6rem;border-top:1px solid var(--line);padding-top:1rem}

@media (max-width:40rem){
  .hero{padding:3.2rem 0 2.4rem}
  .nav{gap:.9rem}
}