/* =========================================================
   ONYA — Tradie websites pages (/tradie-websites/ + trade pages)
   Builds on style.css + journal.css; only what those don't cover.
   ========================================================= */
.tx-hero{padding:clamp(2.4rem,6vw,4.5rem) 0 clamp(2.2rem,5vw,3.5rem);background:var(--cream);
  background-image:radial-gradient(circle at 1px 1px,rgba(20,18,16,.14) 1.4px,transparent 0);background-size:26px 26px}
.tx-hero .crumbs{margin-bottom:1.4rem}
.tx-h1{font-size:clamp(2.6rem,7.6vw,6.4rem);margin-bottom:clamp(1rem,2.5vw,1.5rem)}
.tx-lede{max-width:44ch;margin:0 0 1.4rem}
.tx-pill{display:inline-block;margin:0 0 1.6rem;padding:.6rem 1.1rem;background:var(--lime);border:3px solid var(--ink);border-radius:999px;
  box-shadow:4px 4px 0 var(--ink);font-family:var(--disp);font-weight:900;text-transform:uppercase;letter-spacing:-.01em;
  font-size:clamp(.82rem,.78rem + .4vw,1.05rem);line-height:1.1}
.tx-actions{display:flex;flex-wrap:wrap;gap:.9rem}
@media (max-width:480px){ .tx-actions .btn{width:100%} }

.tx-sec{padding:clamp(3rem,8vw,5.5rem) 0;border-top:3px solid var(--ink)}
.tx-sec--tight{padding:clamp(2rem,5vw,3rem) 0}
.tx-sec--cream2{background:var(--cream-2)}
.tx-h2{font-family:var(--disp);font-weight:900;font-variation-settings:'wdth' 112;text-transform:uppercase;letter-spacing:-.025em;
  line-height:.9;font-size:clamp(2rem,5.4vw,4rem);margin:0 0 clamp(1.6rem,4vw,2.4rem)}
.tx-h3{font-family:var(--disp);font-weight:900;text-transform:uppercase;letter-spacing:-.015em;font-size:clamp(1.2rem,1rem + 1vw,1.7rem);margin:0 0 1rem}
.tx-intro p{max-width:62ch;font-size:clamp(1.05rem,1rem + .35vw,1.25rem);line-height:1.6;margin:0 0 1rem}
.tx-intro p:last-child{margin:0}
.tx-fine{margin:1.4rem 0 0;max-width:70ch;color:var(--slate);font-size:.95rem}
.tx-fine a,.tx-links a{color:var(--red-text);font-weight:700;text-underline-offset:3px}

/* trade picker */
.tx-trades{list-style:none;margin:0;padding:0;display:grid;gap:.9rem;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.tx-trades a{display:grid;grid-template-columns:1fr auto;gap:.2rem .8rem;align-items:center;padding:1.1rem 1.2rem;background:var(--cream);
  border:3px solid var(--ink);border-radius:16px;box-shadow:5px 5px 0 var(--ink);text-decoration:none;color:var(--ink);
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.tx-trades a:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink);background:var(--lime)}
.tx-trades b{font-family:var(--disp);font-weight:900;text-transform:uppercase;font-size:1.25rem;letter-spacing:-.015em}
.tx-trades span{grid-column:1;font-size:.92rem;color:var(--slate)}
.tx-trades i{grid-row:1/3;grid-column:2;font-style:normal;font-weight:900;font-size:1.4rem;color:var(--red)}

/* what goes in */
.tx-needs{list-style:none;margin:0;padding:0;display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.tx-needs li{background:var(--cream);border:3px solid var(--ink);border-radius:16px;padding:1.2rem 1.3rem;box-shadow:5px 5px 0 var(--ink)}
.tx-needs h3{font-family:var(--disp);font-weight:900;text-transform:uppercase;letter-spacing:-.01em;font-size:1.12rem;line-height:1.05;margin:0 0 .5rem}
.tx-needs p{margin:0;line-height:1.5}

/* example sites on a cream page */
.tx-sites{display:grid;gap:clamp(1.4rem,3vw,2rem);grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.tx-sites--one{grid-template-columns:minmax(0,640px)}
.tx .tx-site{flex:none;width:auto}
.tx .tx-site .site__frame{border-color:var(--ink);box-shadow:6px 6px 0 var(--ink)}
.tx .tx-site figcaption span{color:var(--red-text)}
.tx .tx-site figcaption b::after{color:var(--red)}

/* how it works */
.tx-steps{list-style:none;margin:0;padding:0;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.tx-steps li{position:relative;background:var(--cream);border:3px solid var(--ink);border-radius:16px;padding:1.6rem 1.3rem 1.3rem}
.tx-steps b{position:absolute;top:-1.1rem;left:1.1rem;width:2.3rem;height:2.3rem;display:grid;place-items:center;border-radius:50%;
  background:var(--red);color:var(--ink);border:3px solid var(--ink);font-family:var(--disp);font-weight:900}
.tx-steps h3{font-family:var(--disp);font-weight:900;text-transform:uppercase;letter-spacing:-.01em;font-size:1.15rem;margin:0 0 .5rem}
.tx-steps p{margin:0;line-height:1.5}

/* plans */
.tx-plans{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));max-width:980px}
.tx-plan{background:var(--cream);border:3px solid var(--ink);border-radius:20px;padding:1.5rem;box-shadow:7px 7px 0 var(--ink)}
.tx-plan p{margin:0;line-height:1.5}
.tx-plan--flash{background:var(--ink);color:var(--cream)}
.tx-plan__name{font-family:var(--disp);font-weight:900;font-variation-settings:'wdth' 118;text-transform:uppercase;font-size:1.8rem;letter-spacing:-.02em}
.tx-plan--flash .tx-plan__name{color:var(--lime)}
.tx-plan__price{margin:.2rem 0 .8rem!important;color:var(--slate);font-weight:600}
.tx-plan__price b{font-family:var(--disp);font-weight:900;font-size:2.4rem;color:var(--ink);letter-spacing:-.03em}
.tx-plan--flash .tx-plan__price,.tx-plan--flash p{color:#CFC6B8}
.tx-plan--flash .tx-plan__price b{color:var(--lime)}

/* comparison + faq spacing tweaks */
.tx-compare{margin:0}
@media (min-width:641px){ .tx-compare tbody th{width:22%} }
@media (max-width:640px){ .tx-compare caption{display:block;width:auto} }
.tx-faq{border-top:3px solid var(--ink)}
.tx-cta{border-bottom:0}

/* link lists */
.tx-links{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.tx-links a{display:inline-flex;min-height:44px;align-items:center}
.tx-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem}
.tx-chips a{display:inline-flex;align-items:center;min-height:44px;padding:0 1rem;border:2.5px solid var(--ink);border-radius:999px;background:var(--cream);
  font-weight:700;text-decoration:none;color:var(--ink)}
.tx-chips a:hover{background:var(--lime)}
@media (max-width:360px){ .tx-h1{font-size:2.2rem} }