/* AgreeVia — additive rules for the four-ways row, templates, pricing and
   audience pages. Loads after home.css (index) or doc.css (everything else).
   Purely additive: no existing selector in site/home/doc/legal/showcase.css is
   changed, so pages that don't load this file are unaffected. */

/* ---------- four-up feature row (home) ---------- */
.features.four{grid-template-columns:repeat(4,1fr);gap:1.6rem}
.features.four h3 a,.features h3 a{color:inherit;text-decoration:none}
.features .more{display:inline-block;margin-top:.7rem;font-size:.82rem;font-weight:600;color:var(--tape);
  text-underline-offset:2px}
.features ul{margin:.6rem 0 0;padding-left:1.1rem;font-size:.9rem;color:#41453F;line-height:1.55}
.features li{margin:0 0 .3rem}
.features li::marker{color:var(--tape)}

/* ---------- linked cards (templates index, audience pages) ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem;margin:0 0 1.4rem}
.tile-card{display:block;background:var(--backsheet);border:1px solid var(--rule);border-radius:12px;
  padding:1.1rem 1.2rem 1.15rem;text-decoration:none;color:var(--ink)}
.tile-card:hover{border-color:var(--tape)}
.tile-card h3{font-family:Newsreader,serif;font-size:1.12rem;font-weight:600;letter-spacing:-.012em;
  line-height:1.25;margin:0 0 .35rem;color:var(--ink)}
.tile-card p{font-size:.88rem;line-height:1.5;color:#41453F;margin:0 0 .7rem;max-width:none}
.tile-card .tags{margin:0}
.tile-card .tag{font-size:.6rem;padding:.3rem .65rem}
.section .tile-card{color:var(--ink)}

/* ---------- pricing plans (two-up) ---------- */
.plans{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem;margin:0 0 1.2rem;
  border-top:2px solid var(--ink);padding-top:1.6rem}
.plans h3{font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tape);margin:0 0 .35rem;font-weight:600}
.plans ul{margin:.4rem 0 0;padding-left:1.1rem;font-size:.9rem;color:#41453F;line-height:1.55}
.plans li{margin:0 0 .35rem}
.plans li::marker{color:var(--tape)}
a.tag{text-decoration:none;color:var(--ink)}
a.tag:hover{background:var(--rule)}
.price{font-family:Newsreader,serif;font-size:2.1rem;font-weight:500;letter-spacing:-.02em;
  line-height:1.1;margin:.1rem 0 .15rem;color:var(--ink)}
.price small{font-family:Karla,sans-serif;font-size:.85rem;font-weight:500;color:var(--muted);letter-spacing:0}
.plan-note{font-size:.82rem;color:var(--muted);margin:.2rem 0 .8rem}

/* ---------- screenshots on content pages ---------- */
.shots{display:flex;flex-wrap:wrap;gap:1.4rem;justify-content:center;margin:1.6rem 0 .6rem}
.shot{margin:0;flex:0 1 15rem;max-width:15rem}
.shot img{display:block;width:100%;height:auto;border-radius:20px;
  box-shadow:0 0 0 1px rgba(0,0,0,.06),0 20px 40px -20px rgba(20,41,77,.35)}
.shot figcaption{font-size:.82rem;color:var(--muted);text-align:center;margin-top:.7rem;line-height:1.45}

/* ---------- inline call to action on content pages ---------- */
.section a.btn,.btn{display:inline-flex;align-items:center;background:var(--brand-deep);color:#fff;
  text-decoration:none;font-weight:600;font-size:.92rem;padding:.8rem 1.4rem;border-radius:8px;
  letter-spacing:.01em}
.section a.btn:hover,.btn:hover{background:#1b3a73;color:#fff}
.cta-note-block{margin:.9rem 0 0;font-size:.82rem;color:var(--muted)}

/* ---------- numbered steps ---------- */
.steps{counter-reset:step;list-style:none;padding:0;margin:0 0 1.15rem}
.steps li{counter-increment:step;position:relative;padding-left:2.4rem;margin:0 0 1rem;max-width:var(--measure)}
.steps li::before{content:counter(step);position:absolute;left:0;top:.05rem;width:1.6rem;height:1.6rem;
  border-radius:50%;background:var(--chip);font-family:'IBM Plex Mono',monospace;font-size:.72rem;
  font-weight:600;display:flex;align-items:center;justify-content:center;color:var(--ink)}
.steps strong{display:block}

/* ---------- small comparison table ---------- */
.compare{width:100%;border-collapse:collapse;font-size:.9rem;margin:0 0 1.2rem}
.compare th,.compare td{text-align:left;padding:.65rem .7rem;border-bottom:1px solid var(--rule-soft);vertical-align:top}
.compare th{font-family:'IBM Plex Mono',monospace;font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);font-weight:600}
.compare td:first-child{font-weight:600;width:38%}
.compare td.yes{color:#1F7A54;font-weight:600}
.compare td.no{color:var(--muted)}

@media (max-width:900px){
  .features.four{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .plans{grid-template-columns:1fr}
  .features.four{grid-template-columns:1fr}
  .shot{flex-basis:100%;max-width:16rem}
  .compare td:first-child{width:auto}
}