/* Kastana Tech — styles for tools, industry pages and the blog.
   Builds on styles.css (same tokens, same type). */

.cta-acts{display:flex;flex-wrap:wrap;gap:1rem}
.page-hero{padding-top:10rem;padding-bottom:3.5rem}
.page-hero h1{
  font-size:clamp(2.3rem,5vw,4.2rem);font-weight:400;line-height:1.05;
  letter-spacing:-.02em;color:var(--sand);margin:1.2rem 0 1.4rem;
  text-wrap:balance;max-width:20ch;
}
.page-hero h1 .ember{color:var(--ember)}
.page-hero .lead{max-width:58ch}
.tag-row{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.8rem}
.tag{
  font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--stone-d);border:1px solid var(--hair);border-radius:999px;padding:.45rem .9rem;
}

/* ── card grid (tools hub, industries hub, blog list) ── */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.card{
  display:flex;flex-direction:column;gap:.9rem;
  padding:2.2rem 2rem;border:1px solid var(--hair);border-radius:4px;
  transition:border-color .3s,background .3s;min-height:100%;
}
.card:hover{border-color:rgba(200,90,40,.55);background:rgba(200,90,40,.05)}
.card h2,.card h3{font-size:1.3rem;font-weight:400;line-height:1.25;color:var(--sand)}
.card p{font-size:.9rem;line-height:1.7;color:var(--dim)}
.card .svc-link{margin-top:auto;align-self:flex-start}
.card-icon{width:42px;height:42px;border:1px solid var(--hair);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--ember)}
.card-icon svg{width:18px;height:18px}
.group-title{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--stone-d);margin:3.5rem 0 1.4rem}
.group-title:first-child{margin-top:0}

/* ── tool layout ── */
.tool{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  border:1px solid var(--hair);
}
.tool-form{padding:3rem;border-right:1px solid var(--hair);display:flex;flex-direction:column;gap:1.8rem;min-width:0}
.tool-out{padding:3rem;min-width:0;background:radial-gradient(ellipse 80% 70% at 100% 0%,rgba(200,90,40,.08),transparent 70%)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.field-hint{font-size:.72rem;line-height:1.5;color:var(--stone-d);margin-top:.2rem}
.seg{display:flex;flex-wrap:wrap;gap:.5rem}
.seg button{
  background:transparent;border:1px solid var(--hair);border-radius:999px;
  padding:.5rem 1.1rem;font-family:'Jost',sans-serif;font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dim);cursor:pointer;
  transition:background .2s,color .2s,border-color .2s;
}
.seg button[aria-pressed="true"]{background:var(--ember);border-color:var(--ember);color:var(--dark);font-weight:500}
.tool .btn{align-self:flex-start}
input[type=range].field-range{width:100%;accent-color:var(--ember)}

.out-label{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--stone-d);margin-bottom:1rem}
.big-num{font-size:clamp(2.4rem,5vw,3.6rem);font-weight:400;line-height:1;color:var(--sand);letter-spacing:-.02em}
.big-num.good{color:#cfe0a8}
.big-num.bad{color:#ec9a78}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--hair);margin-top:2rem}
.stat{padding:1.3rem 0;border-bottom:1px solid var(--hair)}
.stat:nth-child(odd){padding-right:1.2rem;border-right:1px solid var(--hair)}
.stat:nth-child(even){padding-left:1.2rem}
.stat b{display:block;font-weight:400;font-size:1.35rem;color:var(--sand)}
.stat span{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--stone-d)}
.verdict{margin-top:1.8rem;font-size:.95rem;line-height:1.75;color:var(--dim)}
.verdict strong{color:var(--sand);font-weight:400}
.out-cta{margin-top:2rem;padding-top:1.6rem;border-top:1px solid var(--hair);display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.out-cta p{flex:1 1 220px;font-size:.88rem;line-height:1.6;color:var(--dim)}

.bar-cmp{margin-top:1.6rem;display:grid;gap:.9rem}
.bar-row{display:grid;grid-template-columns:7.5rem 1fr auto;gap:.9rem;align-items:center;font-size:.8rem;color:var(--dim)}
.bar-track{height:10px;background:rgba(232,216,190,.08);border-radius:999px;overflow:hidden}
.bar-fill{height:100%;border-radius:999px;background:var(--stone-d);transition:width .5s cubic-bezier(.16,1,.3,1)}
.bar-fill.ember{background:var(--ember)}
.bar-row b{font-weight:400;color:var(--sand);font-variant-numeric:tabular-nums}

/* hook list */
.hooks{display:grid;gap:.7rem;counter-reset:h}
.hook{
  position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:start;
  padding:1rem 1.1rem;border:1px solid var(--hair);border-radius:4px;
}
.hook::before{counter-increment:h;content:counter(h,decimal-leading-zero);font-size:.7rem;letter-spacing:.1em;color:var(--ember);padding-top:.2rem}
.hook p{font-size:.98rem;line-height:1.55;color:var(--sand)}
.hook small{display:block;margin-top:.35rem;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--stone-d)}
.hook[dir=rtl] p{font-family:'Jost',system-ui,sans-serif}
.copy-btn{
  background:transparent;border:1px solid var(--hair);border-radius:999px;color:var(--dim);
  font-family:'Jost',sans-serif;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.35rem .8rem;cursor:pointer;transition:all .2s;
}
.copy-btn:hover{border-color:var(--ember);color:var(--sand)}
.empty-note{font-size:.92rem;line-height:1.7;color:var(--dim)}

/* ── long-form content (industries, blog) ── */
.content-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:4rem;align-items:start}
.article{max-width:70ch}
.article h2{font-size:clamp(1.4rem,2.4vw,1.9rem);font-weight:400;line-height:1.2;color:var(--sand);margin:3rem 0 1rem;letter-spacing:-.01em}
.article h2:first-child{margin-top:0}
.article h3{font-size:1.1rem;font-weight:400;color:var(--sand);margin:2rem 0 .6rem}
.article p,.article li{font-size:1rem;line-height:1.85;color:var(--dim)}
.article p + p{margin-top:1rem}
.article ul,.article ol{padding-left:1.2rem;display:grid;gap:.5rem;margin:1rem 0}
.article ul{list-style:disc}
.article ol{list-style:decimal}
.article strong{color:var(--sand);font-weight:400}
.article a{color:var(--ember);border-bottom:1px solid currentColor}
.article table{width:100%;border-collapse:collapse;margin:1.4rem 0;font-size:.9rem}
.article th,.article td{text-align:left;padding:.8rem .6rem;border-bottom:1px solid var(--hair);color:var(--dim);vertical-align:top}
.article th{color:var(--sand);font-weight:400;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.note{margin-top:1.6rem;padding:1.1rem 1.3rem;border-left:2px solid var(--ember);background:rgba(200,90,40,.06);font-size:.88rem;line-height:1.7;color:var(--dim)}
.side{position:sticky;top:7rem;display:grid;gap:1.4rem}
.side-box{border:1px solid var(--hair);padding:1.8rem}
.side-box h3{font-size:1.05rem;font-weight:400;color:var(--sand);margin-bottom:.6rem}
.side-box p{font-size:.86rem;line-height:1.65;color:var(--dim)}
.side-box .pkg-price{margin-top:1rem}
.side-box .btn{margin-top:1.4rem}
.side-links{display:grid;gap:.7rem;margin-top:.8rem}
.side-links a{font-size:.86rem;color:var(--dim);border-bottom:1px solid var(--hair);padding-bottom:.6rem;transition:color .2s}
.side-links a:hover{color:var(--sand)}
.meta{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--stone-d)}

@media(max-width:1000px){
  .card-grid{grid-template-columns:1fr 1fr}
  .content-grid{grid-template-columns:1fr}
  .side{position:static}
}
@media(max-width:860px){
  .tool{grid-template-columns:1fr}
  .tool-form{border-right:none;border-bottom:1px solid var(--hair)}
}
@media(max-width:600px){
  .card-grid{grid-template-columns:1fr}
  .tool-form,.tool-out{padding:2rem 1.4rem}
  .row2{grid-template-columns:1fr}
  .stat-grid{grid-template-columns:1fr}
  .stat:nth-child(odd){padding-right:0;border-right:none}
  .stat:nth-child(even){padding-left:0}
  .bar-row{grid-template-columns:5.5rem 1fr auto}
  .page-hero{padding-top:8rem}
}