/* Layout: a calm one-column site; each page is its own view, sections alternate cream and oat bands, the plan sheet is the signature exhibit. */
:root{
  --cream:#E7E2D8; --oat:#D9CFBB; --rust:#A6532E; --rust-ink:#FFFFFF; --sage:#75795C;
  --walnut:#3A2C22; --taupe:#6D675D; --line:#C9BEA8; --paper:#F2EEE6; --plan-ink:#3A2C22; --plan-grid:#D9CFBB;
  --bg:var(--cream); --band:var(--oat); --fg:var(--walnut); --muted:#5A4E43; --accent:var(--rust);
  --f-display:"Source Serif 4", Georgia, "Times New Roman", serif;
  --f-body:"Karla", "Helvetica Neue", Arial, sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --measure:62ch; --wrap:1120px; --r:6px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#231B15; --band:#2E241C; --fg:#EDE7DC; --muted:#C9BFB0; --accent:#C46A42; --rust-ink:#FFFFFF;
  --line:#4A3D31; --paper:#2B221B; --plan-ink:#E7E2D8; --plan-grid:#3E3228; --sage:#8C9070; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#231B15; --band:#2E241C; --fg:#EDE7DC; --muted:#C9BFB0; --accent:#C46A42; --rust-ink:#FFFFFF;
  --line:#4A3D31; --paper:#2B221B; --plan-ink:#E7E2D8; --plan-grid:#3E3228; --sage:#8C9070; color-scheme:dark}

*{box-sizing:border-box}
body{background:var(--bg); color:var(--fg); font-family:var(--f-body); font-size:18px; line-height:1.6; -webkit-font-smoothing:antialiased}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:30; background:var(--bg)}
h1,h2,h3{font-family:var(--f-display); font-weight:600; line-height:1.15; text-wrap:balance; margin:0; letter-spacing:-.01em}
h1{font-size:clamp(2.1rem,5.2vw,3.6rem)}
h2{font-size:clamp(1.6rem,3.4vw,2.35rem)}
h3{font-size:1.25rem}
p{margin:0; max-width:var(--measure)}
a{color:var(--accent); text-decoration:underline; text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--accent); outline-offset:3px}
.wrap{max-width:var(--wrap); margin:0 auto; padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px))}
.band{background:var(--band)}
section .wrap{padding-block:clamp(56px,8vw,96px)}
.stack{display:grid; gap:20px}
.eyebrow{font-family:var(--f-mono); font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.lede{font-size:1.2rem; color:var(--muted)}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--accent); color:var(--rust-ink); font:700 1rem/1 var(--f-body); padding:16px 24px; border-radius:var(--r); border:0; text-decoration:none; cursor:pointer; min-height:52px}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent; color:var(--fg); box-shadow:inset 0 0 0 2px var(--fg)}
.row{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
.draft{display:inline-block; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; background:var(--sage); color:#fff; padding:3px 8px; border-radius:3px; vertical-align:middle}

/* header */
header.site{position:sticky; top:env(safe-area-inset-top,0px); z-index:20; background:var(--bg); border-bottom:1px solid var(--line)}
header.site .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:14px}
.mark{font-family:var(--f-display); font-weight:700; font-size:1.7rem; color:var(--fg); text-decoration:none; letter-spacing:-.02em}
.mark span{color:var(--accent)}
nav.main{display:flex; gap:22px; align-items:center}
nav.main a{color:var(--fg); text-decoration:none; font-size:.98rem; font-weight:500}
nav.main a[aria-current="page"]{text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:2px}
nav.main .btn{padding:12px 18px; min-height:44px; color:var(--rust-ink)}
#menuBtn{display:none; background:none; border:2px solid var(--fg); color:var(--fg); border-radius:var(--r); font:700 .95rem var(--f-body); padding:8px 14px; cursor:pointer}
@media (max-width:900px){
  #menuBtn{display:block}
  nav.main{display:none; position:absolute; left:0; right:0; top:100%; background:var(--bg); flex-direction:column; align-items:stretch; gap:0; border-bottom:1px solid var(--line);
    padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px)); padding-bottom:16px}
  nav.main.open{display:flex}
  nav.main a{padding:14px 0; border-top:1px solid var(--line)}
  nav.main .btn{margin-top:12px}
}

/* hero */
.hero{position:relative; background:var(--walnut); color:#F4EFE6}
.hero picture img{display:block; width:100%; height:clamp(420px,62vw,640px); object-fit:cover; object-position:58% 50%}
.hero .veil{position:absolute; inset:0; background:linear-gradient(90deg,rgba(34,25,18,.82) 0%,rgba(34,25,18,.55) 42%,rgba(34,25,18,0) 70%)}
.hero .copy{position:absolute; inset:0; display:flex; align-items:center}
.hero .copy .wrap{width:100%}
.hero .copy .inner{max-width:560px; display:grid; gap:22px}
.hero h1{color:#F7F2E9}
.hero p{color:#E8DFD0; font-size:1.2rem}
.hero .btn.ghost{color:#F7F2E9; box-shadow:inset 0 0 0 2px #F7F2E9}
@media (max-width:700px){
  .hero picture img{height:320px; object-position:62% 50%}
  .hero .veil{display:none}
  .hero .copy{position:static; background:var(--walnut)}
  .hero .copy .wrap{padding-block:36px 48px}
}

/* four things */
.four{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; border-top:2px solid var(--fg)}
.four > div{padding:28px 28px 32px 0; border-bottom:1px solid var(--line); display:grid; gap:10px; align-content:start}
.four > div:nth-child(odd){padding-right:32px; border-right:1px solid var(--line)}
.four > div:nth-child(even){padding-left:32px}
.four .tag{font-family:var(--f-mono); font-size:.78rem; color:var(--accent); letter-spacing:.06em; text-transform:uppercase}
@media (max-width:760px){.four{grid-template-columns:1fr}.four > div,.four > div:nth-child(odd),.four > div:nth-child(even){padding:24px 0; border-right:0}}

.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(32px,5vw,72px); align-items:start}
@media (max-width:860px){.split{grid-template-columns:1fr}}

/* steps (a real sequence) */
ol.steps{list-style:none; margin:0; padding:0; counter-reset:s; display:grid; gap:0}
ol.steps li{counter-increment:s; display:grid; grid-template-columns:56px minmax(0,1fr); gap:16px; padding:20px 0; border-top:1px solid var(--line)}
ol.steps li::before{content:counter(s); font-family:var(--f-display); font-size:2rem; line-height:1; color:var(--accent); font-weight:600}
ol.steps h3{margin-bottom:4px}
ol.steps p{color:var(--muted)}

/* plan sheet */
.sheet{background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:14px; box-shadow:0 18px 40px -24px rgba(58,44,34,.45)}
.sheet svg{display:block; width:100%; height:auto}
.sheet .tb{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--plan-ink); margin-top:10px; font-family:var(--f-mono); font-size:.68rem; color:var(--muted)}
.sheet .tb div{padding:6px 8px; border-right:1px solid var(--line)}
.sheet .tb div:last-child{border-right:0}
.sheet .tb b{display:block; color:var(--fg); font-weight:500; font-size:.78rem}
.svg-ink{stroke:var(--plan-ink); fill:none}
.svg-fill-sage{fill:var(--sage); opacity:.35}
.svg-fill-oat{fill:var(--oat)}
.svg-text{fill:var(--plan-ink); font-family:var(--f-mono); font-size:11px}
.svg-dim{stroke:var(--accent); fill:none}
.svg-dimtext{fill:var(--accent); font-family:var(--f-mono); font-size:11px}
.svg-grid{stroke:var(--plan-grid)}

/* tables */
.tablewrap{overflow-x:auto; border-top:2px solid var(--fg)}
table{border-collapse:collapse; width:100%; min-width:560px; font-size:1rem}
th,td{text-align:left; padding:14px 12px 14px 0; border-bottom:1px solid var(--line); vertical-align:top}
th{font-family:var(--f-mono); font-weight:500; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
td.num{font-family:var(--f-mono); font-variant-numeric:tabular-nums}
.who{font-weight:700}
.who.diy{color:var(--sage)}
:root .who.diy{color:#5E6249}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .who.diy{color:#B5BA92}}
:root[data-theme="dark"] .who.diy{color:#B5BA92}
.who.trade{color:var(--accent)}

/* tiers */
.tiers{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
@media (max-width:1000px){.tiers{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.tiers{grid-template-columns:1fr}}
.tier{background:var(--bg); border:1px solid var(--line); border-radius:var(--r); padding:24px; display:grid; gap:14px; align-content:start}
.tier .price{font-family:var(--f-display); font-size:2rem; font-weight:600}
.tier .price small{font-family:var(--f-body); font-size:.9rem; font-weight:400; color:var(--muted)}
.tier ul{margin:0; padding-left:18px; display:grid; gap:6px; font-size:.98rem}
.tier .bound{font-family:var(--f-mono); font-size:.78rem; color:var(--muted); border-top:1px solid var(--line); padding-top:10px}

/* lists */
ul.ticks{list-style:none; margin:0; padding:0; display:grid; gap:12px}
ul.ticks li{padding-left:30px; position:relative}
ul.ticks li::before{content:""; position:absolute; left:0; top:.55em; width:14px; height:8px; border-left:2.5px solid var(--sage); border-bottom:2.5px solid var(--sage); transform:rotate(-45deg)}
ul.cross li::before{width:14px; height:2.5px; border:0; background:var(--accent); transform:none; top:.75em}
.twocol{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(24px,4vw,56px)}
@media (max-width:760px){.twocol{grid-template-columns:1fr}}

/* form */
form.wl{display:grid; gap:18px; max-width:620px}
.field{display:grid; gap:6px}
.field label,.field legend{font-weight:700; font-size:1rem}
.field .hint{font-size:.92rem; color:var(--muted)}
input[type=text],input[type=email],select{font:inherit; font-size:1.05rem; color:var(--fg); background:var(--paper); border:1.5px solid var(--line); border-radius:var(--r); padding:13px 14px; width:100%; min-height:52px}
input:hover,select:hover{border-color:var(--muted)}
fieldset{border:0; margin:0; padding:0; display:grid; gap:8px}
.choices{display:grid; gap:8px}
.choice{display:flex; gap:12px; align-items:center; background:var(--paper); border:1.5px solid var(--line); border-radius:var(--r); padding:12px 14px; cursor:pointer; font-size:1rem}
.choice input{width:20px; height:20px; accent-color:var(--accent); flex:none}
.choice:has(input:checked){border-color:var(--accent)}
.grid2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
@media (max-width:560px){.grid2{grid-template-columns:1fr}}
.err{color:var(--accent); font-weight:700; font-size:.95rem}
.hp{position:absolute; left:-9999px}
.notice{font-size:.9rem; color:var(--muted)}
.thanks{background:var(--paper); border:1px solid var(--line); border-left:4px solid var(--sage); border-radius:var(--r); padding:24px; display:grid; gap:10px; max-width:620px}

/* faq */
details{border-top:1px solid var(--line); padding:18px 0}
details:last-child{border-bottom:1px solid var(--line)}
summary{cursor:pointer; font-family:var(--f-display); font-size:1.2rem; font-weight:600; list-style:none; display:flex; justify-content:space-between; gap:16px}
summary::after{content:"+"; color:var(--accent); font-family:var(--f-body); font-size:1.5rem; line-height:1}
details[open] summary::after{content:"\2013"}
details p{margin-top:10px; color:var(--muted)}

.pagehead .wrap{padding-block:clamp(48px,7vw,88px) clamp(24px,4vw,40px)}
.pagehead .inner{display:grid; gap:18px; max-width:760px}

footer.site{background:var(--walnut); color:#E8DFD0}
footer.site .wrap{padding-block:48px; display:grid; gap:28px; grid-template-columns:minmax(0,1.2fr) repeat(2,minmax(0,1fr))}
footer.site a{color:#F4EFE6}
footer.site .mark{color:#F4EFE6}
footer.site ul{list-style:none; margin:0; padding:0; display:grid; gap:8px; font-size:.98rem}
footer.site .small{font-size:.85rem; color:#BFB3A2; grid-column:1/-1; border-top:1px solid #57483B; padding-top:20px}
@media (max-width:760px){footer.site .wrap{grid-template-columns:1fr}}


[hidden]{display:none!important}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}