:root{color-scheme:light dark;box-sizing:border-box}
img{max-width:100%}
[hidden]{display:none!important}

:root{
  --ink:#15171d; --ink-soft:#54575f; --ink-faint:#8b8e94;
  --paper:#efece5; --raised:#ffffff; --line:rgba(21,23,29,.14);
  --brass:#8a6a24; --brass-deep:#5f4a1a; --brass-tint:#f1e6c8;
  --sage:#4f6b56; --focus:#2f5fd6;
  --warn:#a2472c; --warn-tint:#f6e6de;
  --shadow:0 1px 2px rgba(21,23,29,.05), 0 8px 24px -14px rgba(21,23,29,.28);
}
@media (prefers-color-scheme: dark){
  :root{
    --ink:#f1efe8; --ink-soft:#c6c3ba; --ink-faint:#8d8a82;
    --paper:#15171d; --raised:#1d2027; --line:rgba(241,239,232,.14);
    --brass:#d3ac55; --brass-deep:#e9c878; --brass-tint:#2b2411;
    --sage:#8fae95; --focus:#6f95ff;
    --warn:#e08a6c; --warn-tint:#2c1c14;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 30px -16px rgba(0,0,0,.6);
  }
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--paper);}
body{
  color:var(--ink);
  font:14px 'IBM Plex Sans',system-ui,-apple-system,Segoe UI,sans-serif;
  padding-inline:20px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:920px;margin:0 auto;}
h1,h2,h3{font-family:'Fraunces',Georgia,serif;font-weight:500;letter-spacing:-.01em;text-wrap:balance;margin:0;}
a{color:inherit;}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums;}
.eyebrow{
  font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:400; letter-spacing:.12em;
  text-transform:uppercase; color:var(--brass-deep); margin:0 0 10px;
}

/* header */
header{
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{max-width:920px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:10px 0;gap:12px;}
.header-links{display:flex;align-items:center;gap:16px;}
.header-links a.navlink{font-size:13.5px;font-weight:500;text-decoration:none;color:var(--ink-soft);}
.header-links a.navlink:hover{color:var(--ink);}
.logo-mark{height:30px;width:auto;display:block;}
.logo-mark.dark-only{display:none;}
@media (prefers-color-scheme: dark){
  .logo-mark.light-only{display:none;}
  .logo-mark.dark-only{display:block;}
}
.btn{
  display:inline-flex; align-items:center; gap:8px; border:1px solid var(--ink);
  background:var(--ink); color:var(--paper); font-size:13.5px; font-weight:500;
  padding:10px 16px; text-decoration:none; cursor:pointer; white-space:nowrap;
}
.btn:hover{background:var(--brass-deep);border-color:var(--brass-deep);}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line);}
.btn.ghost:hover{border-color:var(--ink);background:transparent;}
.btn.wa{background:var(--sage);border-color:var(--sage);color:var(--raised);}
.btn.wa:hover{filter:brightness(1.08);}
.btn:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--focus); outline-offset:2px;
}

/* hero */
.hero{padding:56px 0 44px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:48px;justify-content:space-between;}
.hero-content{flex:1;min-width:0;}
.hero-visual{flex:none;display:flex;align-items:center;justify-content:center;}
.hero-visual img{width:clamp(160px,20vw,280px);height:auto;display:block;}
.hero-visual img.dark-only{display:none;}
@media (prefers-color-scheme: dark){
  .hero-visual img.light-only{display:none;}
  .hero-visual img.dark-only{display:block;}
}
@media (max-width:760px){
  .hero{flex-direction:column;align-items:flex-start;gap:28px;}
  .hero-visual{display:none;}
}
.hero h1{font-size:clamp(30px,5.6vw,48px);line-height:1.05;max-width:16ch;}
.hero.swap-emphasis .eyebrow{font-size:clamp(30px,5.6vw,48px);line-height:1.05;}
.hero.swap-emphasis h1{font-size:12px;max-width:none;}
.hero p.lead{font-size:17px;color:var(--ink-soft);max-width:56ch;margin:18px 0 26px;}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;}
.hero-cta-note{font-size:12.5px;color:var(--ink-faint);margin:12px 0 0;}
.credibility{display:flex;gap:22px;flex-wrap:wrap;margin-top:32px;padding-top:22px;border-top:1px solid var(--line);}
.credibility div{font-size:12.5px;color:var(--ink-faint);max-width:22ch;}
.credibility b{display:block;font-family:'Fraunces',serif;font-size:22px;color:var(--ink);font-weight:500;}

section{padding:44px 0;border-bottom:1px solid var(--line);}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:26px;flex-wrap:wrap;}
.section-head h2{font-size:clamp(22px,3.4vw,28px);}
.section-note{font-size:13px;color:var(--ink-faint);max-width:34ch;}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
@media (max-width:720px){.cards{grid-template-columns:1fr;}}
.cards.cols-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:860px){.cards.cols-4{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.cards.cols-4{grid-template-columns:1fr;}}
.card{background:var(--raised);padding:22px 20px;display:flex;flex-direction:column;gap:10px;}
.card h3{font-size:17px;}
.card .desc{font-size:13.5px;color:var(--ink-soft);flex:1;}
.card .meta{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;color:var(--ink-faint);padding-top:8px;border-top:1px dashed var(--line);}
.card .price{font-family:'IBM Plex Mono',monospace;font-size:15px;color:var(--ink);}
.card button.pick, .card a.pick{
  margin-top:6px; border:1px solid var(--line); background:transparent; color:var(--ink);
  font-size:12.5px; font-weight:500; padding:9px 12px; cursor:pointer; text-align:left;
  text-decoration:none; display:inline-block;
}
.card button.pick:hover, .card a.pick:hover{border-color:var(--brass);color:var(--brass-deep);}

/* problem cards (landing) */
.problem-card{background:var(--raised);border:1px solid var(--line);padding:24px 20px;display:flex;flex-direction:column;gap:10px;}
.problem-card .q{font-family:'Fraunces',serif;font-size:18px;font-weight:500;}
.problem-card .a{font-size:13px;color:var(--ink-soft);flex:1;}
.problem-card a.go{font-size:12.5px;font-weight:600;color:var(--brass-deep);text-decoration:none;}
.problem-card a.go:hover{text-decoration:underline;}

/* process */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
@media (max-width:720px){.steps{grid-template-columns:1fr 1fr;}}
.step .num{font-family:'IBM Plex Mono',monospace;color:var(--brass);font-size:13px;}
.step h3{font-size:15.5px;margin:8px 0 6px;}
.step p{font-size:13px;color:var(--ink-soft);margin:0;}

/* case studies / testimonials */
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
@media (max-width:760px){.case-grid{grid-template-columns:1fr;}}
.case-card{background:var(--raised);border:1px solid var(--line);padding:20px;display:flex;flex-direction:column;gap:8px;}
.case-card .step-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-faint);}
.case-card .flow{font-size:13.5px;line-height:1.55;}
.case-card .flow b{color:var(--ink);}

/* success stories */
.story-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
@media (max-width:760px){.story-grid{grid-template-columns:1fr;}}
.story-card{background:var(--raised);border:1px solid var(--line);padding:22px 20px;display:flex;flex-direction:column;gap:16px;}
.story-tag{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--brass-deep);margin:0;}
.story-block{display:flex;flex-direction:column;gap:4px;}
.story-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-faint);margin:0;}
.story-block p:not(.story-label){font-size:13.5px;color:var(--ink-soft);line-height:1.55;margin:0;}
.story-block:last-child p:not(.story-label){color:var(--ink);}
.story-quote{font-family:'Fraunces',serif;font-style:italic;}

.quote-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
@media (max-width:760px){.quote-grid{grid-template-columns:1fr;}}
.quote-card{background:var(--raised);border:1px solid var(--line);padding:20px;display:flex;flex-direction:column;gap:12px;}
.quote-card q{font-family:'Fraunces',serif;font-size:15px;font-style:italic;line-height:1.5;}
.quote-card .who{font-size:12px;color:var(--ink-faint);}
.quote-card .who b{color:var(--ink-soft);font-weight:600;}

/* story grid used as a single card (niche-page case studies) */
.story-grid.single{grid-template-columns:1fr;max-width:640px;}

/* long-form intro / article prose */
.prose{font-size:14.5px;color:var(--ink-soft);line-height:1.7;max-width:68ch;}
.prose p{margin:0 0 16px;}
.prose p:last-child{margin-bottom:0;}
.prose b{color:var(--ink);}

/* point cards: mistakes, benefits, types, comparisons */
.point-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
@media (max-width:720px){.point-grid{grid-template-columns:1fr;}}
.point-grid.cols-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:860px){.point-grid.cols-4{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.point-grid.cols-4{grid-template-columns:1fr;}}
.point-card{background:var(--raised);border:1px solid var(--line);padding:20px;display:flex;flex-direction:column;gap:8px;}
.point-card .point-num{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.06em;color:var(--brass);}
.point-card h3{font-size:16px;}
.point-card p{font-size:13.5px;color:var(--ink-soft);margin:0;line-height:1.55;}
.point-card ul{margin:0;padding-left:18px;font-size:13.5px;color:var(--ink-soft);line-height:1.6;}
.point-card ul li{margin-bottom:4px;}
.point-card ul li:last-child{margin-bottom:0;}

/* related links row */
.related-links{font-size:13px;color:var(--ink-faint);}
.related-links a{color:var(--brass-deep);font-weight:500;text-decoration:none;}
.related-links a:hover{text-decoration:underline;}

/* blog article */
.article-meta{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--brass-deep);margin:0 0 10px;}
.article h1{max-width:22ch;}
.article-section{margin-bottom:32px;}
.article-section:last-child{margin-bottom:0;}
.article-section h2{font-size:19px;margin:0 0 10px;}
.article-section p{font-size:14.5px;color:var(--ink-soft);line-height:1.7;margin:0 0 14px;max-width:68ch;}
.article-section p:last-child{margin-bottom:0;}
.article-section ul{margin:0 0 16px;padding-left:20px;color:var(--ink-soft);font-size:14px;line-height:1.7;max-width:64ch;}
.article-section ul:last-child{margin-bottom:0;}
.article-section li{margin-bottom:4px;}
.article-section .sub-label{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);margin:18px 0 8px;}
.article-section .sub-label:first-child{margin-top:0;}
.article-section ol{margin:0 0 16px;padding-left:20px;color:var(--ink-soft);font-size:14px;line-height:1.7;max-width:64ch;}
.article-section ol li{margin-bottom:8px;}

.founder{display:flex;gap:28px;align-items:center;flex-wrap:wrap;}
.founder-photo{width:180px;flex:none;border:1px solid var(--line);overflow:hidden;background:var(--raised);}
.founder-photo img{display:block;width:100%;height:auto;}
.founder-photo.placeholder{height:180px;background:var(--brass-tint);display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--brass-deep);text-align:center;padding:8px;}
.founder-bio{flex:1;min-width:240px;font-size:14px;color:var(--ink-soft);line-height:1.6;}
.founder-bio b{color:var(--ink);}

/* placeholder tag */
.placeholder{border:1px dashed var(--warn);position:relative;padding-top:34px!important;}
.placeholder-tag{
  position:absolute;top:10px;left:20px;right:20px;
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--warn);background:var(--warn-tint);display:inline-block;padding:3px 8px;border-radius:2px;
  width:fit-content;
}
.section-placeholder-note{font-size:12px;color:var(--warn);background:var(--warn-tint);border:1px dashed var(--warn);padding:10px 14px;margin-bottom:18px;font-family:'IBM Plex Mono',monospace;}

/* faq */
.faq details{border-bottom:1px solid var(--line);padding:14px 0;}
.faq summary{cursor:pointer;font-family:'Fraunces',serif;font-size:16px;font-weight:500;list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:center;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:'+';font-family:'IBM Plex Mono',monospace;color:var(--brass);font-size:18px;}
.faq details[open] summary::after{content:'–';}
.faq p{font-size:13.5px;color:var(--ink-soft);margin:10px 0 0;max-width:62ch;}

/* final cta */
.final-cta{text-align:center;padding:56px 0;}
.final-cta h2{font-size:clamp(24px,4.4vw,34px);max-width:20ch;margin:0 auto;}
.final-cta .hero-cta{justify-content:center;margin-top:22px;}
.final-cta .hero-cta-note{text-align:center;}

/* form */
#contact{border-bottom:none;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;background:var(--raised);border:1px solid var(--line);padding:24px;box-shadow:var(--shadow);}
@media (max-width:640px){.form-grid{grid-template-columns:1fr;}}
.field{display:flex;flex-direction:column;gap:6px;}
.field.full{grid-column:1 / -1;}
.brief-title{
  grid-column:1/-1; margin:14px 0 -2px; font-family:'IBM Plex Mono',monospace;
  font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--brass-deep);
}
.brief-title:first-child{margin-top:0;}
label{font-size:12px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.06em;}
input,select,textarea{
  font:inherit;font-size:14.5px;padding:10px 12px;background:var(--paper);
  border:1px solid var(--line);color:var(--ink);
}
textarea{resize:vertical;min-height:84px;}
.form-actions{grid-column:1/-1;display:flex;gap:12px;flex-wrap:wrap;margin-top:4px;}
.hint{font-size:12px;color:var(--ink-faint);grid-column:1/-1;}
.privacy-note{grid-column:1/-1;border-top:1px dashed var(--line);padding-top:12px;margin-top:4px;}
.privacy-note summary{cursor:pointer;font-size:12.5px;color:var(--ink-soft);font-weight:500;}
.privacy-note summary:hover{color:var(--brass-deep);}
.privacy-note p{font-size:12.5px;color:var(--ink-faint);line-height:1.6;margin:10px 0 0;max-width:62ch;}

footer{padding:30px 0 40px;font-size:12.5px;color:var(--ink-faint);}
footer .row{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;}
footer a{text-decoration:underline;}
.footer-nav{display:flex;flex-wrap:wrap;gap:8px 22px;margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid var(--line);}
.footer-nav a{text-decoration:none;color:var(--ink-soft);font-weight:500;}
.footer-nav a:hover{color:var(--brass-deep);text-decoration:underline;}