/* Barksdale Media — Kinetic Dark
   Tokens come straight from the logo files: ink = logo background, signal = the square dot. */
:root{
  --ink:#0d0d0d;
  --panel:#171716;
  --raised:#1f1f1d;
  --line:#2c2c29;
  --bone:#f2efe8;
  --mute:#9a9a93;
  --signal:#ff3c00;
  --signal-text:#ff6a3d;      /* signal tint that passes 4.5:1 on ink for small text */
  --display:'Syne',system-ui,sans-serif;
  --body:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --wrap:1120px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--bone);font:400 17px/1.65 var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:2px}
.wrap{width:min(var(--wrap),100% - 40px);margin-inline:auto}
.skip{position:absolute;left:-999px;top:8px;background:var(--signal);color:#000;padding:8px 14px;font-weight:600;z-index:100}
.skip:focus{left:8px}

/* type */
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.04;letter-spacing:-.02em;margin:0 0 .5em}
h1{font-size:clamp(2.7rem,7.2vw,5.6rem);font-weight:800}
h2{font-size:clamp(1.9rem,4vw,3rem)}
h3{font-size:1.3rem;line-height:1.2}
p{margin:0 0 1em}
.lede{font-size:1.15rem;color:var(--mute);max-width:52ch}
.muted{color:var(--mute)}
/* the logo's square dot, reused as punctuation */
.dot{display:inline-block;width:.16em;height:.16em;background:var(--signal);margin-left:.06em;vertical-align:baseline}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(13,13,13,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;height:76px}
.brand img{height:46px;width:auto}
.nav{display:flex;align-items:center;gap:28px}
.nav a{text-decoration:none;font-size:.95rem;color:var(--mute);padding:6px 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{color:var(--bone);border-bottom-color:var(--signal)}
.nav .btn{color:#000;border:0;padding:10px 18px}

/* buttons */
.btn{display:inline-block;font:700 .98rem/1 var(--display);text-decoration:none;padding:16px 26px;border:1.5px solid var(--bone);background:transparent;color:var(--bone);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.btn:hover{background:var(--bone);color:var(--ink)}
.btn-primary{background:var(--signal);border-color:var(--signal);color:#000}
.btn-primary:hover{background:var(--bone);border-color:var(--bone);color:#000}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}

/* hero */
.hero{padding:clamp(64px,10vw,128px) 0 clamp(56px,8vw,96px);border-bottom:1px solid var(--line);background:
  linear-gradient(var(--line) 1px,transparent 1px) 0 0/100% 72px,
  linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/72px 100%;background-color:var(--ink);background-blend-mode:normal}
.hero-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:56px;align-items:end}
.hero h1 .dot{animation:land .7s cubic-bezier(.2,.9,.3,1.2) .15s both}
@keyframes land{from{transform:translateY(-.9em);opacity:0}to{transform:none;opacity:1}}
.ledger{background:var(--panel);border:1px solid var(--line);padding:28px}
.ledger h2{font-size:1.15rem;margin-bottom:14px}
.ledger dl{margin:0}
.ledger div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-top:1px solid var(--line);font-size:.97rem}
.ledger dt{color:var(--bone)}
.ledger dd{margin:0;color:var(--mute);text-align:right}
.ledger .total{border-top:2px solid var(--signal);margin-top:4px}
.ledger .total dd{color:var(--signal-text);font-weight:700}

/* sections */
.section{padding:clamp(56px,8vw,104px) 0}
.section + .section{border-top:1px solid var(--line)}
.split{display:grid;grid-template-columns:3fr 2fr;gap:2px;background:var(--line);border:1px solid var(--line)}
.offer{background:var(--panel);padding:clamp(28px,4vw,52px);display:flex;flex-direction:column}
.offer.alt{background:var(--raised)}
.offer p{color:var(--mute)}
.offer .price{font:700 1.05rem var(--display);color:var(--bone);margin:auto 0 18px}
.offer .btn{align-self:flex-start}
.checks{list-style:none;padding:0;margin:0 0 28px}
.checks li{padding:8px 0 8px 26px;position:relative;border-top:1px solid var(--line)}
.checks li::before{content:"";position:absolute;left:0;top:1.05em;width:10px;height:10px;background:var(--signal)}

.steps{list-style:none;padding:0;margin:40px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:s}
.steps li{counter-increment:s;padding:24px 24px 0 0;border-top:2px solid var(--line)}
.steps li:first-child{border-top-color:var(--signal)}
.steps li::before{content:counter(s);font:800 2.4rem var(--display);color:var(--signal-text);display:block;margin-bottom:8px}
.steps h3{font-size:1.1rem}
.steps p{color:var(--mute);font-size:.97rem}

.builds{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line);border:1px solid var(--line);margin-top:36px}
.build{background:var(--panel);padding:28px;text-decoration:none;display:block}
.build:hover{background:var(--raised)}
.build h3{margin-bottom:6px}
.build span{color:var(--signal-text);font-size:.92rem}
.build p{color:var(--mute);margin:10px 0 0;font-size:.97rem}

.cta{background:var(--signal);color:#000;padding:clamp(40px,6vw,72px);display:flex;gap:32px;justify-content:space-between;align-items:center;flex-wrap:wrap}
.cta h2{margin:0;max-width:16ch}
.cta .btn{border-color:#000;color:#000}
.cta .btn:hover{background:#000;color:var(--bone)}

/* plans */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line);border:1px solid var(--line);margin-top:40px}
.plan{background:var(--panel);padding:34px 30px;display:flex;flex-direction:column}
.plan.feature{background:var(--raised);box-shadow:inset 0 3px 0 var(--signal)}
.plan .amount{font:800 3rem/1 var(--display);margin:8px 0 4px}
.plan .amount small{font:400 1rem var(--body);color:var(--mute)}
.plan .for{color:var(--mute);font-size:.95rem;margin-bottom:20px}
.plan .checks{margin-top:auto}
.compare{width:100%;border-collapse:collapse;margin-top:32px;font-size:.98rem}
.compare th,.compare td{text-align:left;padding:14px 16px;border-top:1px solid var(--line);vertical-align:top}
.compare thead th{font-family:var(--display);border-top:0;border-bottom:2px solid var(--signal)}
.compare td:first-child{color:var(--mute)}
.tablewrap{overflow-x:auto}
.faq details{border-top:1px solid var(--line);padding:18px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font:700 1.1rem var(--display);list-style:none;display:flex;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--signal-text);font-size:1.4rem;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq p{color:var(--mute);margin:12px 0 0;max-width:62ch}

/* forms */
.form-card{background:var(--panel);border:1px solid var(--line);padding:clamp(24px,4vw,44px);max-width:680px}
.field{margin-bottom:20px}
label{display:block;font-weight:600;margin-bottom:6px;font-size:.97rem}
.hint{font-weight:400;color:var(--mute)}
input,select,textarea{width:100%;font:inherit;color:var(--bone);background:var(--ink);border:1.5px solid var(--line);padding:13px 14px;border-radius:0}
input:hover,select:hover,textarea:hover{border-color:var(--mute)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--signal);box-shadow:0 0 0 3px rgba(255,60,0,.25)}
textarea{min-height:140px;resize:vertical}
.two{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.form-msg{margin-top:16px;min-height:1.4em;font-weight:600}
.form-msg.err{color:#ff8a66}
.form-card .btn[disabled]{opacity:.6;cursor:wait}

.page-head{padding:clamp(56px,8vw,104px) 0 clamp(32px,5vw,56px)}
.page-head h1{font-size:clamp(2.4rem,6vw,4.4rem)}

/* footer */
.site-footer{border-top:1px solid var(--line);padding:40px 0 56px;color:var(--mute);font-size:.93rem}
.foot{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:center}
.foot nav{display:flex;gap:22px;flex-wrap:wrap}
.foot a{text-decoration:none}
.foot a:hover{color:var(--bone)}
.foot img{height:36px;width:auto;margin-bottom:8px}

@media (max-width:900px){
  .hero-grid,.split,.builds,.plans{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr;row-gap:28px}
  .two{grid-template-columns:1fr}
}
@media (max-width:640px){
  body{font-size:16px}
  .nav{gap:16px}
  .nav a:not(.btn){display:none}
  .steps{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero h1 .dot{animation:none}
  *{transition:none!important}
}

/* free tools */
.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:24px}
.tool-card{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);text-decoration:none;color:inherit}
.tool-card img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-bottom:1px solid var(--line);background:var(--ink)}
.tool-body{padding:26px 28px 30px;display:flex;flex-direction:column;flex:1}
.tool-body h2{font-size:1.5rem;margin-bottom:.4em}
.tool-body p{color:var(--mute);margin:0 0 .8em}
.tool-note{font-size:.93rem}
.tool-open{margin-top:auto;padding-top:8px;font:700 .98rem var(--display);color:var(--signal-text);border-bottom:2px solid transparent;align-self:flex-start}
.tool-card:hover{background:var(--raised)}
.tool-card:hover .tool-open{border-bottom-color:var(--signal-text)}