/* Product page layout (index.html): hero with the demo beside it, facts row, module tabs,
   compact "other trades" and one closing section. Builds on site.css. */

/* hero */
.hero2{padding-block:clamp(36px,5vw,64px) clamp(40px,5vw,64px)}
.hero2__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4vw,64px);align-items:center}
.hero2__txt{display:flex;flex-direction:column;gap:22px;min-width:0}
.hero2__txt .eyebrow{margin:0}
.hero2 h1{font-size:clamp(40px,5vw,72px)}
.hero2__notes{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 20px;font-size:14px;color:var(--ink-3)}
.hero2__notes li{display:inline-flex;align-items:center;gap:6px}
.hero2__notes .ic{color:var(--paprika)}
.hero2__notes a{color:var(--ink);font-weight:600}
.hero2__demo{min-width:0}
.hero2__demo .dprev__cta{bottom:clamp(14px,3vw,26px)}

/* facts */
.facts{border-block:2px solid var(--ink)}
.facts__grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,1fr) auto;gap:20px clamp(20px,3vw,44px);align-items:center;padding-block:26px}
.fact{display:flex;flex-direction:column;gap:6px;min-width:0}
.fact__n{display:flex;align-items:center;gap:10px;color:var(--ink)}
.fact__n .num{font:800 clamp(28px,3vw,42px)/1 var(--font);letter-spacing:-.03em;white-space:nowrap}
.fact__n .ic{color:var(--paprika)}
.fact__t{font-size:15px;line-height:1.4;color:var(--ink-2)}
.fact__link{display:inline-flex;align-items:center;gap:6px;color:var(--ink);font-weight:600;white-space:nowrap}

/* modules as tabs */
.mtabs{margin-bottom:22px}
.mtabs .dtab{display:inline-flex;align-items:center;gap:8px}
.mtab__n{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--track);color:var(--ink-3);font:700 12px/1 var(--font)}
.mtabs .dtab[aria-selected="true"] .mtab__n{background:rgba(255,255,255,.18);color:inherit}
.mpane{margin-top:0}
.mlist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.mlist li{background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);padding:16px 18px}
.mlist .mod__t{font-size:16px}
.mlist .mod__d{font-size:14.5px;margin-top:5px}

/* customer story */
.oh__label{font:700 12px/1 var(--font)!important;letter-spacing:.12em;text-transform:uppercase;color:var(--story-fg-2);margin-top:4px}
.oh__uses{list-style:none;margin:-6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.oh__uses li{padding:7px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.22);font:500 14px/1.2 var(--font);color:var(--story-fg)}

/* other trades */
.sec--tight{padding-block:clamp(48px,6vw,80px)}
.fam{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.fam__head{max-width:760px}
.fam__head h2{font-size:clamp(28px,3.2vw,40px)}
.fam__head .sec__lead{font-size:16px}
.fam__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.famc{display:flex;flex-direction:column;gap:8px;padding:20px 22px;border:1px solid var(--line);border-radius:var(--r2);background:var(--surface);min-width:0}
.famc .div__mark{height:34px;margin-bottom:4px;display:flex;align-items:flex-end}
.famc .div__mark svg{height:30px;width:auto;max-width:100%}
.famc .div__meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.famc .div__code{font:700 11px/1 var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.famc h3{font:800 18px/1.2 var(--font);letter-spacing:-.01em}
.famc p{font-size:15px;line-height:1.5;color:var(--ink-2)}

/* closing: steps + contact */
.close{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,5vw,72px);align-items:start}
.close__sub{font:800 20px/1.2 var(--font);margin:30px 0 4px}
.howto--list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 28px}
.howto--list .howto__step{display:grid;grid-template-columns:36px minmax(0,1fr);gap:2px 12px;border-top:1px solid var(--line);padding:14px 0}
.howto--list .howto__n{font-size:24px;grid-row:span 2;color:var(--paprika)}
.howto--list h3{font-size:16px}
.howto--list p{font-size:14.5px}
.close .contact__card{margin-top:clamp(0px,3vw,40px)}

@media (max-width:1080px){
  .facts__grid{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,1fr)}
  .fact__link{grid-column:1/-1}
  .mlist{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:960px){
  .hero2__grid,.fam,.close{grid-template-columns:minmax(0,1fr)}
  .close .contact__card{margin-top:0}
}
@media (max-width:760px){
  .facts__grid{grid-template-columns:minmax(0,1fr);gap:16px}
  .mtabs{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * clamp(16px,4vw,48px));padding-inline:clamp(16px,4vw,48px)}
  .mtabs::-webkit-scrollbar{display:none}
  .mtabs .dtab{flex-shrink:0}
  .mlist{grid-template-columns:minmax(0,1fr)}
  .fam__list{grid-template-columns:minmax(0,1fr)}
  .howto--list{grid-template-columns:minmax(0,1fr)}
}