:root{
  --ink:#0a0a0a; --paper:#ffffff; --lime:#d6ff3f; --grey:#6b6b6b;
  --line:#e6e6e6;

  /* Spacing scale. Every padding, margin and gap on the page comes from here —
     change the rhythm of the whole site by editing these six values. */
  --gutter:clamp(16px,3vw,24px);      /* page side padding                  */
  --section-y:clamp(34px,3.6vw,50px); /* vertical space around each section */
  --card-p:clamp(18px,1.8vw,24px);    /* inside a card                      */
  --grid-gap:clamp(12px,1.4vw,18px);  /* between cards                      */
  --col-gap:clamp(28px,3.6vw,48px);   /* between the big page columns       */

  --stack-1:6px;   /* tight, e.g. a heading to its own sub-line */
  --stack-2:10px;
  --stack-3:14px;
  --stack-4:20px;
  --stack-5:28px;
  --stack-6:38px;  /* loosest, e.g. a section intro to its grid */
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:Inter,system-ui,-apple-system,sans-serif;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;line-height:1.35}
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--gutter)}
h1,h2,h3,.display{font-family:Anton,Impact,sans-serif;font-weight:400;text-transform:uppercase;line-height:.92;letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
.btn{display:inline-block;font-weight:900;font-size:16px;padding:14px 24px;border-radius:0;border:3px solid var(--ink);transition:.15s;text-align:center;cursor:pointer}
.btn-lime{background:var(--lime);color:var(--ink)}
.btn-lime:hover{background:var(--ink);color:var(--lime)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:var(--lime);color:var(--ink)}
.btn-ghost{background:transparent;color:#fff;border-color:#fff}
.btn-ghost:hover{background:#fff;color:var(--ink)}

/* Keyboard users land here first; it stays off-screen until focused. */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--lime);color:var(--ink);font-weight:900;padding:14px 20px;border:3px solid var(--ink)}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.pricing :focus-visible,.hero :focus-visible,.form-card :focus-visible{outline-color:var(--lime)}

/* ---- top bar / nav ---- */
.topbar{background:var(--ink);color:#fff;font-size:15px;font-weight:700;padding:10px 0;text-align:center;letter-spacing:.02em}
.topbar b{color:var(--lime)}
.site-nav{position:sticky;top:0;z-index:60;background:#fff;border-bottom:3px solid var(--ink)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:var(--stack-4);padding:var(--stack-2) 0}
.logo{font-family:Anton,sans-serif;font-size:30px;letter-spacing:-.02em}
/* The highlighted word must stay dark — in the footer .logo is white, so
   without this the text was white on lime and unreadable. */
.logo span{background:var(--lime);color:var(--ink);padding:0 6px}
.nav-links{display:flex;gap:28px;font-weight:800;font-size:15px;text-transform:uppercase}
.nav-links a:hover{text-decoration:underline;text-decoration-thickness:3px}
.nav-cta{background:var(--lime);border:3px solid var(--ink);padding:12px 22px;font-weight:900;font-size:15px;text-transform:uppercase}
@media(max-width:900px){.nav-links{display:none}}

/* ---- hero ---- */
.hero{background:var(--ink);color:#fff;padding:var(--section-y) 0;position:relative;overflow:hidden}
.hero:after{content:"";position:absolute;right:-220px;top:-200px;width:460px;height:460px;background:var(--lime);border-radius:50%;opacity:.13}
.eyebrow{display:inline-block;background:var(--lime);color:var(--ink);font-weight:900;font-size:15px;letter-spacing:.08em;text-transform:uppercase;padding:9px 16px;margin-bottom:var(--stack-4)}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--col-gap);align-items:center;position:relative;z-index:2}
.hero-headline,.hero-pitch{position:relative;z-index:2}
@media(max-width:940px){
  .hero-grid{grid-template-columns:1fr;gap:var(--stack-5)}
  /* The decorative circle sits right behind the headline once the columns
     stack, so drop it on narrow screens. */
  .hero:after{display:none}
}
.hero h1{font-size:clamp(48px,6.2vw,88px);margin-bottom:0;position:relative;z-index:2}
.hero h1 em{font-style:normal;color:var(--lime)}
.hero-price{font-family:Anton,Impact,sans-serif;font-size:clamp(30px,3.6vw,46px);line-height:1;text-transform:uppercase;color:var(--lime);margin-top:var(--stack-5);position:relative;z-index:2}
.hero-price small{display:block;font-family:Inter,sans-serif;font-size:14.5px;font-weight:600;line-height:1.45;color:#a8a8a8;text-transform:none;margin-top:var(--stack-2);max-width:420px}
.hero-sub{font-size:clamp(20px,2.1vw,26px);font-weight:600;margin-bottom:var(--stack-5);line-height:1.3;position:relative;z-index:2}
.hero-list{list-style:none;display:grid;gap:var(--stack-3);margin-bottom:var(--stack-5);position:relative;z-index:2}
.hero-list li{font-size:20px;font-weight:700;display:flex;gap:14px;align-items:flex-start}
.hero-list li:before{content:"✓";color:var(--lime);font-weight:900;font-size:24px;line-height:1}
.hero-btns{display:flex;gap:var(--stack-3);flex-wrap:wrap;position:relative;z-index:2}
.hero-note{margin-top:var(--stack-4);font-size:15px;font-weight:600;color:#b5b5b5;position:relative;z-index:2}

/* ---- marquee ---- */
.strip{background:var(--lime);border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);overflow:hidden;padding:var(--stack-3) 0}
.strip-in{display:flex;gap:36px;white-space:nowrap;font-family:Anton,sans-serif;font-size:20px;text-transform:uppercase;animation:slide 24s linear infinite}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---- sections ---- */
section{padding:var(--section-y) 0}
.kicker{font-weight:900;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);margin-bottom:var(--stack-2)}
h2{font-size:clamp(28px,3.4vw,44px);margin-bottom:var(--stack-3)}
.lead{font-size:17.5px;font-weight:600;max-width:600px;margin-bottom:var(--stack-5)}

.pain{background:#f5f5f5}
.pain-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--grid-gap)}
.pain-card{background:#fff;border:3px solid var(--ink);padding:var(--card-p)}
.pain-card .num{font-family:Anton,sans-serif;font-size:40px;line-height:1;color:var(--lime);-webkit-text-stroke:2px var(--ink);margin-bottom:10px}
.pain-card h3{font-size:22px;margin-bottom:9px}
.pain-card p{font-size:15.5px;font-weight:500;color:#4a4a4a;line-height:1.5}

/* The container draws only the top and left edges; every cell draws its own
   right and bottom, so the grid closes up however many cards there are. */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:3px solid var(--ink);border-left:3px solid var(--ink)}
.feat{padding:var(--card-p);border-right:3px solid var(--ink);border-bottom:3px solid var(--ink)}
/* An odd number of cards would leave a hole in the last row, so the final card
   stretches across whatever is left. */
.feat:last-child:nth-child(3n+1){grid-column:span 3}
.feat:last-child:nth-child(3n+2){grid-column:span 2}
@media(max-width:980px){
  .feat-grid{grid-template-columns:repeat(2,1fr)}
  .feat:last-child:nth-child(3n+1),
  .feat:last-child:nth-child(3n+2){grid-column:auto}
  .feat:last-child:nth-child(2n+1){grid-column:span 2}
}
@media(max-width:620px){
  .feat-grid{grid-template-columns:1fr}
  .feat:last-child:nth-child(2n+1){grid-column:auto}
}
.feat .ico{font-size:26px;margin-bottom:10px;display:block}
.feat h3{font-size:19px;margin-bottom:8px}
.feat p{font-size:15px;font-weight:500;color:#4a4a4a;line-height:1.5}

/* ---- pricing ---- */
.pricing{background:var(--ink);color:#fff}
.pricing h2{color:#fff}
.pricing .lead{color:#c9c9c9}
.toggle{display:flex;justify-content:center;width:max-content;margin:0 auto var(--stack-5);border:3px solid #fff;background:#fff}
.bt{font-family:Inter,sans-serif;font-weight:900;font-size:14px;text-transform:uppercase;letter-spacing:.03em;padding:13px 22px;border:0;background:#fff;color:var(--ink);cursor:pointer;display:flex;align-items:center;gap:10px;transition:.15s}
.bt.active{background:var(--ink);color:#fff}
.bt .save{background:var(--lime);color:var(--ink);font-size:12.5px;padding:4px 9px;letter-spacing:.05em}
@media(max-width:520px){.toggle{width:100%;flex-direction:column}.bt{justify-content:center}}

.price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));gap:var(--grid-gap);align-items:start}
.plan{background:#fff;color:var(--ink);border:3px solid #fff;padding:var(--card-p);display:flex;flex-direction:column;height:100%}
.plan.pop{background:var(--lime);border-color:var(--lime);transform:scale(1.035);box-shadow:14px 14px 0 rgba(214,255,63,.28)}
.plan .tag{display:inline-block;background:var(--ink);color:var(--lime);font-weight:900;font-size:11px;letter-spacing:.09em;text-transform:uppercase;padding:5px 10px;margin-bottom:var(--stack-2)}
.plan .tag.empty{visibility:hidden}
.plan h3{font-size:24px;margin-bottom:5px}
.plan .for{font-size:14px;font-weight:600;color:#5c5c5c;margin-bottom:var(--stack-3);min-height:38px;line-height:1.4}
.price{font-family:Anton,sans-serif;font-size:46px;line-height:.9;margin-bottom:3px}
.price sup{font-size:21px;vertical-align:super}
.per{font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#5c5c5c;margin-bottom:var(--stack-3)}
.plan ul{list-style:none;display:grid;gap:8px;margin-bottom:var(--stack-4);flex:1}
.plan li{font-size:14.5px;font-weight:600;line-height:1.4;position:relative;padding-left:22px}
.plan li:before{content:"✓";position:absolute;left:0;top:0;font-weight:900;font-size:18px}
.plan li.off{color:#9a9a9a;font-weight:600}
.plan li.off:before{content:"—";color:#c0c0c0}
.plan .btn{width:100%;font-size:15px;padding:14px 10px}
.plan-buy{margin-top:auto}
.plan-buy .btn{width:100%;font-size:17px;padding:17px 10px}
.price-notice{margin-top:var(--stack-5);background:var(--lime);color:var(--ink);border:3px solid var(--lime);padding:var(--stack-4);font-size:17px;font-weight:800;text-align:center}
.price-foot{margin-top:var(--stack-5);text-align:center;font-size:16px;font-weight:700;color:#c9c9c9}
.price-foot b{color:var(--lime)}

/* ---- steps ---- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--col-gap)}
.step .n{font-family:Anton,sans-serif;font-size:52px;line-height:.8;color:var(--lime);-webkit-text-stroke:2px var(--ink);margin-bottom:10px}
.step h3{font-size:21px;margin-bottom:8px}
.step p{font-size:15.5px;font-weight:500;color:#4a4a4a;line-height:1.5}

/* ---- proof ---- */
.proof{background:#f5f5f5}
.quote-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:var(--grid-gap)}
.quote{background:#fff;border:3px solid var(--ink);padding:var(--card-p)}
.quote .stars{color:#111;font-size:22px;letter-spacing:3px;margin-bottom:14px}
.quote p{font-size:20px;font-weight:700;line-height:1.35;margin-bottom:16px}
.quote .who{font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--grey)}

/* ---- faq ---- */
.faq-list{display:grid;gap:0;border-top:3px solid var(--ink)}
details{border-bottom:3px solid var(--ink);padding:var(--stack-4) 0}
summary{font-family:Anton,sans-serif;font-size:clamp(22px,2.6vw,30px);text-transform:uppercase;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";color:var(--lime);-webkit-text-stroke:2px var(--ink);font-size:40px;line-height:.6}
details[open] summary:after{content:"–"}
details ul{list-style:none;margin-top:var(--stack-3);display:grid;gap:var(--stack-1)}
details li{font-size:18px;font-weight:600;padding-left:22px;position:relative}
details li:before{content:"→";position:absolute;left:0;font-weight:900}

/* ---- final cta + form ---- */
.final{background:var(--lime);border-top:3px solid var(--ink)}
.final h2{font-size:clamp(30px,4vw,52px);margin-bottom:var(--stack-3)}
/* The hero accent is lime on black; on the lime band it has to invert. */
.final h2 em{font-style:normal;background:var(--ink);color:var(--lime);padding:0 10px;display:inline-block}
.final .intro{font-size:17.5px;font-weight:700;margin-bottom:var(--stack-4)}
.final-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--col-gap);align-items:start}
@media(max-width:880px){.final-grid{grid-template-columns:1fr;gap:var(--stack-6)}}
.final .btns{display:flex;gap:var(--stack-3);flex-wrap:wrap;margin-bottom:var(--stack-4)}
.final-note{font-size:16px;font-weight:700}
.engines{margin-top:var(--stack-5);border-top:3px solid var(--ink);padding-top:var(--stack-4)}
.engines-caption{font-size:13px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;margin-bottom:var(--stack-3)}
.engine-list{list-style:none;display:flex;flex-wrap:wrap;gap:var(--stack-2);align-items:center}
.engine-list li{display:flex}
.engine-name{display:inline-block;background:var(--ink);color:var(--lime);font-weight:900;font-size:15px;letter-spacing:.02em;padding:10px 16px}
.engine-list img{height:30px;width:auto;display:block;background:#fff;padding:6px 12px;border:3px solid var(--ink)}

.form-card{background:var(--ink);color:#fff;padding:var(--card-p);border:3px solid var(--ink)}
.form-card h3{color:#fff;font-size:32px;margin-bottom:8px}
.form-card .form-sub{font-size:16px;font-weight:600;color:#b5b5b5;margin-bottom:var(--stack-4)}
.field{margin-bottom:var(--stack-3)}
.field label{display:block;font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;margin-bottom:7px;color:var(--lime)}
.field input,.field select,.field textarea{width:100%;font-family:Inter,sans-serif;font-size:16.5px;font-weight:600;padding:14px 15px;border:3px solid #fff;background:#fff;color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{outline:3px solid var(--lime);outline-offset:2px}
.field textarea{min-height:96px;resize:vertical}
.field .err{display:block;margin-top:6px;font-size:14px;font-weight:800;color:#ff8a8a}
.form-card .btn{width:100%;margin-top:8px}
.form-legal{margin-top:16px;font-size:13.5px;font-weight:600;color:#9a9a9a}
.flash{background:var(--ink);color:var(--lime);border:3px solid var(--ink);padding:26px;font-size:20px;font-weight:800;margin-bottom:24px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:var(--stack-3)}
@media(max-width:520px){.two-col{grid-template-columns:1fr;gap:0}}

/* ---- checkout confirmation ---- */
.confirm{padding:var(--section-y) 0}
.confirm-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--col-gap);align-items:start}
@media(max-width:900px){.confirm-grid{grid-template-columns:1fr}}
.confirm-summary{background:var(--ink);color:#fff;padding:var(--card-p)}
.confirm-summary .kicker{color:var(--lime)}
.confirm-summary h1{font-family:Anton,Impact,sans-serif;text-transform:uppercase;font-size:clamp(34px,4vw,52px);line-height:.95;margin-bottom:var(--stack-2)}
.confirm-tagline{font-size:16.5px;font-weight:600;color:#b5b5b5;margin-bottom:var(--stack-4)}
.confirm-price{font-family:Anton,Impact,sans-serif;font-size:clamp(44px,5vw,66px);line-height:.9;color:var(--lime)}
.confirm-price small{display:block;font-family:Inter,sans-serif;font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#b5b5b5;margin-top:var(--stack-2)}
.confirm-note{font-size:15px;font-weight:600;color:#b5b5b5;margin:var(--stack-3) 0}
.confirm-switch a{color:var(--lime);font-weight:800;font-size:15.5px;text-decoration:underline}
.confirm-features{list-style:none;display:grid;gap:var(--stack-2);margin-top:var(--stack-4);border-top:1px solid #333;padding-top:var(--stack-4)}
.confirm-features li{font-size:16px;font-weight:700;padding-left:24px;position:relative}
.confirm-features li:before{content:"✓";position:absolute;left:0;color:var(--lime);font-weight:900}

.confirm-terms h2{font-size:clamp(30px,3.4vw,44px);margin-bottom:var(--stack-4)}
.term-block{border:3px solid var(--ink);padding:var(--card-p);margin-bottom:var(--stack-3)}
.term-block h3{font-size:22px;margin-bottom:var(--stack-2)}
.term-block ul{list-style:none;display:grid;gap:var(--stack-2)}
.term-block li{font-size:16.5px;font-weight:600;padding-left:22px;position:relative;line-height:1.45}
.term-block li:before{content:"→";position:absolute;left:0;font-weight:900}
.confirm-form{margin-top:var(--stack-5)}
.confirm-form .field label{color:var(--ink)}
.confirm-form .field input[type=text]{width:100%;font-size:16.5px;font-weight:600;padding:14px 15px;border:3px solid var(--ink);font-family:Inter,sans-serif}
.tick{display:flex;gap:12px;align-items:flex-start;margin:var(--stack-3) 0;font-size:16px;font-weight:600;line-height:1.45;cursor:pointer}
.tick input{width:24px;height:24px;flex:none;margin-top:2px;accent-color:var(--ink)}
.tick-required{border:3px solid var(--ink);padding:var(--stack-3);background:#f5f5f5}
.tick a{text-decoration:underline;font-weight:800}
.confirm-form .btn{width:100%;margin-top:var(--stack-3)}
.confirm-secure{margin-top:var(--stack-2);font-size:14px;font-weight:600;color:var(--grey);text-align:center}
.confirm-form .err{display:block;margin-top:6px;font-size:14.5px;font-weight:800;color:#c0392b}

/* ---- inner pages: FAQs ---- */
.page-head{background:var(--ink);color:#fff;padding:var(--section-y) 0}
.page-head h1{font-family:Anton,Impact,sans-serif;text-transform:uppercase;font-size:clamp(40px,5.6vw,76px);line-height:.95;margin-bottom:var(--stack-3)}
.page-head h1 em{font-style:normal;color:var(--lime)}
.page-sub{font-size:clamp(18px,2vw,23px);font-weight:600;max-width:640px;color:#c9c9c9}
.crumbs{font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#8f8f8f;margin-bottom:var(--stack-4)}
.crumbs a{color:var(--lime)}
.crumbs a:hover{text-decoration:underline}
.crumbs span{color:#6b6b6b}

/* Jump bar on the FAQ hub — the whole set is on one page, so this is how you
   get down it quickly. */
.jump{display:flex;flex-wrap:wrap;gap:9px;margin-top:var(--stack-5)}
/* Explicit colours, not near-white on a translucent panel — this washed out
   badly the moment anything else painted a light background behind it. */
.jump a{background:#1c1c1c;border:1px solid #3a3a3a;color:#fff;font-size:14px;font-weight:700;padding:9px 14px}
.jump a:hover{background:var(--lime);color:var(--ink);border-color:var(--lime)}
.lead-link{display:block;margin-top:var(--stack-2);font-size:16px;font-weight:800;text-decoration:underline;text-underline-offset:3px}

/* A reference page, not a poster. Small sentence-case headings, tight rows,
   two independent columns. The display face is deliberately not used here —
   a hundred questions set in Anton uppercase is unreadable. */
.faq-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--col-gap);align-items:start}
@media(max-width:820px){.faq-cols{grid-template-columns:1fr}}
.faq-col{border-top:1px solid var(--line)}

.qa-item{border:0;border-bottom:1px solid var(--line);padding:0}
.qa-item summary{font-family:Inter,system-ui,sans-serif;font-size:16.5px;font-weight:700;line-height:1.45;text-transform:none;letter-spacing:0;color:var(--ink);padding:16px 34px 16px 0;position:relative;display:block}
.qa-item summary:after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-family:Inter,sans-serif;font-size:20px;font-weight:700;color:var(--grey);-webkit-text-stroke:0;line-height:1}
.qa-item[open] summary:after{content:"–"}
.qa-item summary:hover{color:#000}
.qa-item[open] summary{color:#000}
.qa-item ul{list-style:none;margin:0;padding:0 34px 18px 0;display:grid;gap:7px}
.qa-item li{font-size:15.5px;font-weight:500;line-height:1.55;color:#4a4a4a;padding-left:16px;position:relative}
.qa-item li:before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;background:var(--lime);border:1px solid var(--ink)}

/* Section headings here are labels, not billboards — set in the body face at
   label size, so a hundred questions read as a reference page. */
.faq-section{padding:var(--stack-6) 0}
.faq-section h2{font-family:Inter,system-ui,sans-serif;font-weight:900;font-size:19px;letter-spacing:.07em;text-transform:uppercase;margin-bottom:var(--stack-2)}
.faq-section .lead{font-size:15.5px;font-weight:500;color:#5c5c5c;max-width:640px;margin-bottom:var(--stack-4)}
.faq-section .lead-link{font-size:14px;font-weight:700}

/* The FAQ and blog headers do not need the home page's poster type. */
.page-head--tight h1{font-size:clamp(30px,3.4vw,44px)}
.page-head--tight .page-sub{font-size:17px}

.more-faqs{background:#f5f5f5}
.more-faqs h2{font-size:clamp(30px,3.4vw,44px);margin-bottom:var(--stack-4)}
.topic-list{list-style:none;display:flex;flex-wrap:wrap;gap:var(--stack-2)}
.topic-list a{display:inline-block;background:#fff;border:3px solid var(--ink);padding:12px 18px;font-weight:800;font-size:16px}
.topic-list a:hover{background:var(--lime)}

.faq-more{margin-top:var(--stack-5);text-align:center}

/* ---- getting listed ---- */
.engine-detail{display:grid;grid-template-columns:1fr 1fr;gap:var(--col-gap);margin-top:var(--stack-4)}
@media(max-width:860px){.engine-detail{grid-template-columns:1fr;gap:var(--stack-5)}}
.engine-detail h3{font-size:24px;margin-bottom:var(--stack-3)}
.engine-detail p{font-size:17.5px;font-weight:500;line-height:1.6;color:#333}
.tick-list{list-style:none;display:grid;gap:var(--stack-3)}
.tick-list li{font-size:17px;font-weight:600;line-height:1.5;padding-left:30px;position:relative;color:#333}
.tick-list li:before{content:"✓";position:absolute;left:0;font-weight:900;font-size:19px}
.tick-warn li:before{content:"!";color:#c0392b}

/* ---- customer account ---- */
.nav-right{display:flex;align-items:center;gap:var(--stack-3)}
.nav-signin{font-weight:800;font-size:14.5px;text-transform:uppercase;letter-spacing:.03em}
.nav-signin:hover{text-decoration:underline;text-underline-offset:4px}
@media(max-width:640px){.nav-signin{display:none}}
.site-nav .nav-links a.on{border-bottom:3px solid var(--lime)}
.site-nav form{margin:0}

.flash{padding:var(--stack-3) var(--stack-4);font-weight:700;font-size:16px;margin-bottom:var(--stack-4);border:3px solid var(--ink)}
.flash-ok{background:var(--lime);color:var(--ink)}
.flash-warn{background:#fff3cd;color:#5c4600;border-color:#5c4600}

.acct-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--grid-gap)}
.acct-card{border:3px solid var(--ink);padding:var(--card-p);background:#fff}
.acct-label{font-size:12px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);margin-bottom:8px}
.acct-big{font-family:Anton,Impact,sans-serif;font-size:30px;line-height:1;text-transform:uppercase;margin-bottom:6px}
.acct-note{font-size:14.5px;font-weight:500;color:#5c5c5c}
.acct-link{display:inline-block;margin-top:var(--stack-3);font-weight:800;font-size:14.5px;text-decoration:underline;text-underline-offset:3px}

.acct-next{margin-top:var(--stack-6);border:3px solid var(--ink);background:var(--lime);padding:var(--card-p)}
.acct-next h2{font-size:26px;margin-bottom:var(--stack-2)}
.acct-next p{font-size:16.5px;font-weight:600;margin-bottom:var(--stack-3);max-width:600px}

.acct-current{border:3px solid var(--ink);padding:var(--card-p);margin-bottom:var(--stack-6);max-width:320px}
.acct-h2{font-size:22px;margin-bottom:var(--stack-2)}
.acct-intro{font-size:16px;font-weight:500;color:#5c5c5c;margin-bottom:var(--stack-4);max-width:640px}

.plan-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--grid-gap);margin-bottom:var(--stack-6)}
.plan-option{border:3px solid var(--ink);padding:var(--card-p);display:flex;flex-direction:column}
.plan-option h3{font-size:22px;margin-bottom:4px}
.plan-option-price{font-family:Anton,Impact,sans-serif;font-size:34px;line-height:1;margin-bottom:8px}
.plan-option-price small{font-family:Inter,sans-serif;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#5c5c5c}
.plan-option-for{font-size:14.5px;font-weight:600;color:#5c5c5c;margin-bottom:var(--stack-3)}
.plan-option ul{list-style:none;display:grid;gap:7px;margin-bottom:var(--stack-4);flex:1}
.plan-option li{font-size:14.5px;font-weight:600;padding-left:20px;position:relative}
.plan-option li:before{content:"✓";position:absolute;left:0;font-weight:900}
.plan-option .btn{width:100%;font-size:14.5px}

/* Downgrade lock — explain it, do not just grey a button out. */
.locked{border:3px dashed var(--ink);background:#f5f5f5;padding:var(--card-p);max-width:720px}
.locked-title{font-family:Anton,Impact,sans-serif;font-size:24px;text-transform:uppercase;margin-bottom:var(--stack-3)}
.locked ul{list-style:none;display:grid;gap:9px;margin-bottom:var(--stack-3)}
.locked li{font-size:16px;font-weight:600;padding-left:22px;position:relative;color:#333}
.locked li:before{content:"→";position:absolute;left:0;font-weight:900}
.locked-note{font-size:15px;font-weight:600;color:#5c5c5c}

.brief-form{max-width:720px}
.brief-form .field{margin-bottom:var(--stack-4)}
.brief-form label{display:block;font-size:14.5px;font-weight:800;margin-bottom:7px;color:var(--ink)}
.brief-form input[type=text],.brief-form textarea{width:100%;font-family:Inter,sans-serif;font-size:16px;font-weight:500;padding:13px 14px;border:3px solid var(--ink);background:#fff}
.brief-actions{display:flex;gap:var(--stack-3);flex-wrap:wrap;margin-top:var(--stack-5)}
.btn-ghost-ink{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost-ink:hover{background:var(--ink);color:#fff}

.table-wrap{overflow-x:auto;border:3px solid var(--ink)}
.acct-table{width:100%;border-collapse:collapse;min-width:640px;background:#fff}
.acct-table th{background:var(--ink);color:#fff;font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;padding:13px 14px;text-align:left}
.acct-table td{padding:13px 14px;font-size:15px;font-weight:600;border-bottom:1px solid var(--line)}
.acct-table a{text-decoration:underline;font-weight:800}

.auth{padding:var(--section-y) 0}
.auth-card{max-width:420px;margin:0 auto;border:3px solid var(--ink);padding:var(--card-p);background:#fff}
.auth-card h1{font-family:Anton,Impact,sans-serif;font-size:34px;text-transform:uppercase;line-height:1;margin-bottom:8px}
.auth-sub{font-size:15.5px;font-weight:500;color:#5c5c5c;margin-bottom:var(--stack-4)}
.auth-card .field{margin-bottom:var(--stack-3)}
.auth-card label{display:block;font-size:14px;font-weight:800;margin-bottom:6px}
.auth-card input[type=email],.auth-card input[type=password]{width:100%;font-family:Inter,sans-serif;font-size:16px;padding:13px 14px;border:3px solid var(--ink)}
.auth-card .btn{width:100%;margin-top:var(--stack-2)}
.auth-alt{margin-top:var(--stack-4);font-size:14.5px;font-weight:600;text-align:center}
.auth-alt a{text-decoration:underline}
.err{display:block;margin-top:6px;font-size:14px;font-weight:800;color:#c0392b}

/* ---- cookie consent ---- */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:95;background:var(--ink);color:#e8e8e8;border-top:3px solid var(--lime);padding:var(--stack-3) var(--gutter);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--stack-3)}
.consent-text{font-size:14.5px;font-weight:600;line-height:1.5;max-width:640px;margin:0}
.consent-text a{color:var(--lime);text-decoration:underline;text-underline-offset:3px}
.consent-actions{display:flex;gap:10px;flex-wrap:wrap}
.consent-actions form{margin:0}
.consent-actions .btn{font-size:14px;padding:11px 18px}
@media(max-width:760px){
  .consent{bottom:78px;flex-direction:column;align-items:flex-start}
  .consent-actions{width:100%}
  .consent-actions form{flex:1}
  .consent-actions .btn{width:100%}
}

/* ---- onboarding ---- */
.wizard{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--stack-5);counter-reset:none}
.wizard li a{display:flex;align-items:center;gap:9px;border:2px solid var(--line);padding:9px 14px;font-size:14px;font-weight:700;color:#7a7a7a}
.wizard li.done a{border-color:var(--ink);color:var(--ink)}
.wizard li.now a{background:var(--ink);border-color:var(--ink);color:#fff}
.wizard-n{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:currentColor;color:#fff;font-size:11px;font-weight:900}
.wizard li.now .wizard-n{background:var(--lime);color:var(--ink)}
.wizard-t{white-space:nowrap}
@media(max-width:560px){.wizard-t{display:none}}

.tracker{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-bottom:var(--stack-5)}
@media(max-width:760px){.tracker{grid-template-columns:1fr}}
.tracker li{border-top:5px solid var(--line);padding-top:11px;font-size:13.5px;font-weight:700;color:#9a9a9a}
.tracker li.done{border-top-color:var(--ink);color:var(--ink)}
.tracker li.now{border-top-color:var(--lime);color:var(--ink)}
.tracker-n{display:inline-block;font-size:11px;font-weight:900;letter-spacing:.08em;color:var(--grey);margin-bottom:3px}
.tracker li.now .tracker-t{font-weight:900}
.tracker-t{display:block;line-height:1.3}

.req{display:inline-block;margin-left:8px;background:var(--ink);color:var(--lime);font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;padding:3px 7px;vertical-align:middle}
.hint{font-size:13.5px;font-weight:500;color:#6b6b6b;margin:-2px 0 8px}
.uploaded{font-size:13.5px;font-weight:700;margin-bottom:8px}
.uploaded a{text-decoration:underline}
.brief-form input[type=file]{width:100%;font-size:14.5px;font-weight:600;padding:11px;border:3px dashed var(--ink);background:#fafafa}
.thumbs{list-style:none;display:flex;flex-wrap:wrap;gap:9px;margin-top:var(--stack-3)}
.thumbs li{position:relative;width:88px;height:88px}
.thumbs img{width:100%;height:100%;object-fit:cover;border:2px solid var(--ink)}
.thumbs button{position:absolute;top:-8px;right:-8px;width:24px;height:24px;border:2px solid var(--ink);background:#fff;font-size:15px;font-weight:900;line-height:1;cursor:pointer}
.thumbs button:hover{background:var(--lime)}
.hidden-form{display:none}
.preview-form{margin-top:var(--stack-4)}
.preview-form textarea{width:100%;font-family:Inter,sans-serif;font-size:16px;padding:13px 14px;border:3px solid var(--ink)}

/* ---- blog ---- */
.post-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--grid-gap)}
.post-card{background:#fff;border:3px solid var(--ink);padding:var(--card-p);display:flex;flex-direction:column}
.post-meta{font-size:13.5px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:var(--grey);margin-bottom:var(--stack-3)}
.post-card h2{font-size:26px;line-height:1.05;margin-bottom:var(--stack-3)}
.post-card h2 a:hover{color:var(--grey)}
.post-card p{font-size:16.5px;font-weight:600;color:#444;margin-bottom:var(--stack-3);flex:1}
.post-more{font-weight:900;font-size:15px;text-transform:uppercase;letter-spacing:.04em}
.pager{margin-top:var(--stack-6)}
.published-flash{background:var(--lime);border:3px solid var(--ink);padding:var(--stack-4);font-weight:900;font-size:18px;margin-top:var(--stack-4)}

.article{max-width:720px;font-size:18.5px;line-height:1.7;font-weight:500}
.article h2{font-size:clamp(26px,3vw,38px);margin:var(--stack-6) 0 var(--stack-3)}
.article p{margin-bottom:var(--stack-4)}
.article ul{margin:0 0 var(--stack-4) 0;list-style:none;display:grid;gap:var(--stack-2)}
.article li{padding-left:26px;position:relative}
.article li:before{content:"→";position:absolute;left:0;font-weight:900}

/* ---- legal pages ---- */
.legal{padding:var(--section-y) 0}
.legal .wrap{max-width:760px}
.legal-title{font-family:Anton,Impact,sans-serif;text-transform:uppercase;font-size:clamp(38px,5vw,62px);line-height:.95;margin-bottom:var(--stack-2)}
.legal-updated{font-size:14.5px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--grey);margin-bottom:var(--stack-5);padding-bottom:var(--stack-4);border-bottom:3px solid var(--ink)}
.legal-body{font-size:17.5px;font-weight:500;line-height:1.65}

footer{background:var(--ink);color:#8d8d8d;padding:var(--section-y) 0 var(--stack-5);font-size:15px;font-weight:500;line-height:1.55}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:var(--col-gap);margin-bottom:var(--stack-6)}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr;gap:var(--stack-6) var(--col-gap)}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr}}

/* The wordmark is an anchor, so it needs to be a block for its margin to
   apply — as an inline element the blurb rode up into it. */
.foot-brand .logo{display:inline-block;color:#fff;font-size:27px;margin-bottom:var(--stack-3)}
.foot-blurb{max-width:320px;color:#8d8d8d;margin-bottom:0}

/* One type scale for every column: lime heading, light-grey links. */
.foot-col h4{font-family:Inter,sans-serif;font-size:13px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--lime);margin-bottom:var(--stack-3)}
.foot-col ul{list-style:none;display:grid;gap:11px}
.foot-col a{color:#c4c4c4;font-weight:600;font-size:15px}
.foot-col a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.foot-phone{font-weight:800;font-size:16.5px;color:#fff !important}

/* One line, not a block of chips. */
.foot-engines-row{border-top:1px solid #262626;padding-top:var(--stack-4);margin-bottom:var(--stack-4);display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-size:clamp(12.5px,1.1vw,14.5px);font-weight:600;line-height:1.7}
.foot-engines-row strong{font-family:Inter,sans-serif;font-weight:900;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--lime);margin-right:5px}
.foot-engines-row a{color:#a8a8a8}
.foot-engines-row a:hover{color:#fff}
.foot-engines-row span{color:#3d3d3d}

.foot-bar{border-top:1px solid #262626;padding-top:var(--stack-4)}
.foot-bottom{display:flex;justify-content:space-between;gap:var(--stack-4);flex-wrap:wrap;align-items:center}
.foot-legal{font-size:13.5px;color:#7a7a7a;margin:0}
.foot-policies{list-style:none;display:flex;gap:var(--stack-4);flex-wrap:wrap;font-size:13.5px}
.foot-policies a{color:#a8a8a8}
.foot-policies a:hover{color:var(--lime)}

.sticky{position:fixed;bottom:0;left:0;right:0;background:var(--ink);border-top:3px solid var(--lime);padding:12px 16px;display:none;gap:12px;z-index:80}
.sticky a{flex:1;font-size:16px;padding:15px 8px}
@media(max-width:760px){.sticky{display:flex}body{padding-bottom:78px}.plan.pop{transform:none}}