/* ============================================================
   PRODUCT PAGE STYLES — billing, store, app, legal
   ============================================================ */

.product-hero {
  position: relative;
  padding: 160px var(--pad) 80px;
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  min-height: 80vh;
}
.product-hero-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(var(--fg-rgb),.5);
  margin-bottom: 32px;
}
.product-hero-back:hover { color: var(--fg); }
.product-tag-row {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 32px;
}
.product-tag-row span {
  padding: 8px 16px;
  border: 1px solid rgba(var(--fg-rgb),.15);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(var(--fg-rgb),.8);
  background: rgba(var(--fg-rgb),.02);
}
.product-tag-row span.red { border-color: var(--red); color: var(--red); }
.product-tag-row span.blue { border-color: var(--blue); color: var(--blue); }

.product-h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(60px, 9vw, 160px);
  line-height: .9;
  letter-spacing: -.04em;
  margin-bottom: 32px;
}
.product-lead {
  font-size: clamp(20px, 1.6vw, 28px);
  line-height: 1.4;
  color: rgba(var(--fg-rgb),.7);
  max-width: 640px;
  margin-bottom: 48px;
}
.product-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid rgba(var(--fg-rgb),.08);
}
.product-stat .num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 3vw, 48px);
  line-height: 1;
  margin-bottom: 8px;
  letter-spacing: -.03em;
}
.product-stat .lbl {
  font-size: var(--fs-small);
  color: rgba(var(--fg-rgb),.5);
}

.product-hero-visual {
  position: relative;
  height: 100%;
  min-height: 480px;
}

/* Architecture block */
.arch {
  position: relative;
  padding: 120px var(--pad);
  max-width: var(--maxw);
  margin: 0 auto;
}
.arch-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1px;
  background: rgba(var(--fg-rgb),.08);
  border: 1px solid rgba(var(--fg-rgb),.08);
  border-radius: 24px;
  overflow: hidden;
}
.arch-cell {
  background: var(--bg);
  padding: 32px;
}
.arch-cell h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-lead);
  margin-bottom: 12px;
  letter-spacing: -.01em;
}
.arch-cell p {
  font-size: var(--fs-small);
  line-height: 1.5;
  color: rgba(var(--fg-rgb),.6);
}
.arch-cell-num {
  display: none; /* декоративная нумерация убрана (skills: numbered-section-markers) */
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  color: var(--red);
  letter-spacing: .2em;
  margin-bottom: 16px;
}
@media (max-width: 1000px){
  .arch-grid { grid-template-columns: 1fr; }
}

/* Process block */
.process {
  padding: 120px var(--pad);
  max-width: var(--maxw);
  margin: 0 auto;
}
.process-step {
  display: grid;
  grid-template-columns: 80px 320px 1fr;
  gap: 40px;
  padding: 32px 0;
  border-bottom: 1px solid rgba(var(--fg-rgb),.08);
  align-items: flex-start;
}
.process-step .num {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--red);
  letter-spacing: .15em;
}
.process-step h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -.02em;
  line-height: 1.1;
}
.process-step p {
  font-size: var(--fs-body);
  line-height: 1.5;
  color: rgba(var(--fg-rgb),.65);
}
@media (max-width: 900px){
  .process-step { grid-template-columns: 1fr; gap: 12px; }
}

/* API / spec list */
.spec-list {
  padding: 120px var(--pad);
  max-width: var(--maxw);
  margin: 0 auto;
}
.spec-row {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  gap: 40px;
  padding: 24px 0;
  border-bottom: 1px solid rgba(var(--fg-rgb),.08);
  align-items: center;
  transition: transform .25s var(--ease-out-expo, ease), background .25s ease;
}
.spec-row:hover { transform: translateX(12px); background: rgba(var(--fg-rgb),.02); }
.spec-method {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  padding: 6px 12px;
  border-radius: 6px;
  display: inline-block;
  min-width: 70px;
  text-align: center;
}
.spec-method.get { background: rgba(0,137,207,.15); color: var(--blue); border: 1px solid rgba(0,137,207,.4); }
.spec-method.post { background: rgba(74,222,128,.15); color: #4ade80; border: 1px solid rgba(74,222,128,.4); }
.spec-method.put { background: rgba(237,28,36,.15); color: var(--red); border: 1px solid rgba(237,28,36,.4); }
.spec-method.del { background: rgba(255,180,0,.15); color: #ffb400; border: 1px solid rgba(255,180,0,.4); }
.spec-endpoint {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--fg);
}
.spec-desc {
  font-size: var(--fs-small);
  color: rgba(var(--fg-rgb),.5);
}

/* Diagram block */
.diagram {
  padding: 120px var(--pad);
  max-width: var(--maxw);
  margin: 0 auto;
}
.diagram-box {
  background: linear-gradient(180deg, rgba(var(--fg-rgb),.04), rgba(var(--fg-rgb),.01));
  border: 1px solid rgba(var(--fg-rgb),.1);
  border-radius: 32px;
  padding: 80px 40px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.diagram-layer {
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}
.diagram-node {
  padding: 20px 28px;
  border-radius: 16px;
  background: rgba(0,0,0,.4);
  border: 1px solid rgba(var(--fg-rgb),.12);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  color: var(--fg);
  min-width: 140px;
  text-align: center;
  position: relative;
}
.diagram-node.red { border-color: rgba(237,28,36,.5); background: rgba(237,28,36,.06); }
.diagram-node.blue { border-color: rgba(0,137,207,.5); background: rgba(0,137,207,.06); }
.diagram-node small {
  display: block;
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(var(--fg-rgb),.4);
  margin-bottom: 6px;
}
.diagram-arrow {
  width: 30px; height: 1px;
  background: rgba(var(--fg-rgb),.2);
  position: relative;
  flex-shrink: 0;
}
.diagram-arrow::after {
  content: '';
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 6px; height: 6px;
  border-top: 1px solid rgba(var(--fg-rgb),.4);
  border-right: 1px solid rgba(var(--fg-rgb),.4);
}
.diagram-vertical {
  display: flex; flex-direction: column; align-items: center;
  font-family: var(--font-mono); font-size: var(--fs-meta);
  color: rgba(var(--fg-rgb),.4);
}
.diagram-vertical::before {
  content: ''; display: block;
  width: 1px; height: 30px;
  background: linear-gradient(180deg, transparent, rgba(var(--fg-rgb),.3), transparent);
  margin-bottom: 4px;
}
.diagram-vertical::after {
  content: ''; display: block;
  width: 1px; height: 30px;
  background: linear-gradient(180deg, transparent, rgba(var(--fg-rgb),.3), transparent);
  margin-top: 4px;
}

/* Scenario / UX flow */
.scenarios { padding: 120px var(--pad); max-width: var(--maxw); margin: 0 auto; }
.scenario-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.scenario {
  padding: 36px;
  background: rgba(var(--fg-rgb),.02);
  border: 1px solid rgba(var(--fg-rgb),.08);
  border-radius: 24px;
}
.scenario-num {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: .25em;
  color: var(--blue);
  margin-bottom: 16px;
}
.scenario h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  margin-bottom: 12px;
  letter-spacing: -.01em;
}
.scenario p {
  font-size: var(--fs-small);
  line-height: 1.5;
  color: rgba(var(--fg-rgb),.6);
  margin-bottom: 16px;
}
.scenario-flow {
  display: flex; flex-wrap: wrap; gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
}
.scenario-flow span {
  padding: 6px 10px;
  background: rgba(var(--fg-rgb),.04);
  border: 1px solid rgba(var(--fg-rgb),.08);
  border-radius: 6px;
  color: rgba(var(--fg-rgb),.7);
}
.scenario-flow .arr { background: transparent; border: none; color: rgba(var(--fg-rgb),.3); }
@media (max-width: 900px){ .scenario-grid { grid-template-columns: 1fr; } }

/* Doc list */
.doclist {
  padding: 120px var(--pad);
  max-width: var(--maxw);
  margin: 0 auto;
}
.doc-row {
  display: grid;
  grid-template-columns: 80px 1fr 1fr auto;
  gap: 32px;
  padding: 28px 0;
  border-bottom: 1px solid rgba(var(--fg-rgb),.08);
  align-items: center;
}
.doc-row .icon {
  width: 40px; height: 48px;
  border: 1px solid rgba(var(--fg-rgb),.2);
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 10px;
  color: rgba(var(--fg-rgb),.5);
}
.doc-row h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-body);
  letter-spacing: -.01em;
  margin-bottom: 4px;
}
.doc-row .meta { font-family: var(--font-mono); font-size: var(--fs-meta); color: rgba(var(--fg-rgb),.4); }
.doc-row .desc { font-size: var(--fs-small); color: rgba(var(--fg-rgb),.55); }

/* Big claim block */
.bigclaim {
  padding: 200px var(--pad) 160px;
  max-width: var(--maxw);
  margin: 0 auto;
  text-align: center;
}
.bigclaim h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(48px, 8vw, 140px);
  letter-spacing: -.04em;
  line-height: .95;
  text-wrap: balance;
  margin-bottom: 32px;
}
.bigclaim p {
  font-size: clamp(18px, 1.4vw, 24px);
  line-height: 1.4;
  color: rgba(var(--fg-rgb),.6);
  max-width: 640px;
  margin: 0 auto 48px;
}

/* Legal page */
.legal-toc {
  padding: 80px var(--pad);
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 80px;
}
.legal-toc-nav {
  position: sticky;
  top: 100px;
  align-self: start;
}
.legal-toc-nav a {
  display: block;
  padding: 8px 0;
  font-size: var(--fs-small);
  color: rgba(var(--fg-rgb),.6);
  border-left: 1px solid rgba(var(--fg-rgb),.1);
  padding-left: 16px;
  transition: all .2s;
}
.legal-toc-nav a:hover, .legal-toc-nav a.active { color: var(--fg); border-color: var(--red); }
.legal-section {
  padding: 32px 0;
  border-bottom: 1px solid rgba(var(--fg-rgb),.08);
}
.legal-section h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 32px;
  letter-spacing: -.02em;
  margin-bottom: 24px;
}
.legal-section p {
  font-size: var(--fs-body);
  line-height: 1.6;
  color: rgba(var(--fg-rgb),.75);
  margin-bottom: 16px;
}
.legal-section ul {
  list-style: none;
  margin: 16px 0;
}
.legal-section li {
  padding: 6px 0;
  font-size: var(--fs-small);
  color: rgba(var(--fg-rgb),.7);
  font-family: var(--font-mono);
}
.legal-section li::before {
  content: '·';
  color: var(--red);
  font-weight: bold;
  margin-right: 12px;
}
/* Tech-stack chip rows */
.stack-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 26px;
}
.stack-tags span {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border: 1px solid rgba(var(--fg-rgb),.12);
  border-radius: 999px;
  background: rgba(var(--fg-rgb),.025);
  font-family: var(--font-mono);
  font-size: 13.5px;
  letter-spacing: -.01em;
  color: rgba(var(--fg-rgb),.78);
  white-space: nowrap;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.stack-tags span:hover {
  border-color: rgba(0,137,207,.55);
  color: var(--fg);
  background: rgba(0,137,207,.08);
}
.stack-tags.lead span {
  border-color: rgba(0,137,207,.4);
  color: var(--fg);
  background: rgba(0,137,207,.07);
  font-size: 14.5px;
  font-weight: 500;
}
.stack-tags.lead span:hover {
  border-color: var(--blue);
  background: rgba(0,137,207,.14);
}
@media (max-width: 900px){
  .legal-toc { grid-template-columns: 1fr; }
  .legal-toc-nav { position: relative; top: auto; }
}


/* Product codename — formal designation above a product page H1 */
.product-codename {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--accent, #0089CF);
  margin-bottom: 14px;
}


/* Full documentation inside doc tabs */
.doc-panel--full{
  max-height:620px; overflow-y:auto; padding:8px 28px 8px 0; margin-top:8px;
  scrollbar-width:thin;
}
.doc-panel--full h3{
  font-family:var(--font-display); font-weight:700; font-size: var(--fs-lead);
  letter-spacing:-.015em; margin:34px 0 12px; color:var(--fg);
}
.doc-panel--full h4{
  font-family:var(--font-display); font-weight:700; font-size: var(--fs-body);
  letter-spacing:-.01em; margin:26px 0 10px; color:var(--fg);
}
.doc-panel--full h3:first-child,
.doc-panel--full h4:first-child{margin-top:0;}
.doc-panel--full p{
  font-size: var(--fs-small); line-height:1.6; color:rgba(var(--fg-rgb),.72); margin:0 0 12px; max-width:78ch;
}
.doc-panel--full ul{ list-style:none; margin:0 0 16px; padding:0; }
.doc-panel--full li{
  position:relative; padding:5px 0 5px 20px; font-size:14.5px; line-height:1.5;
  color:rgba(var(--fg-rgb),.72); border-bottom:1px solid rgba(var(--fg-rgb),.05);
}
.doc-panel--full li::before{ content:''; position:absolute; left:2px; top:13px; width:6px; height:6px; border-radius:50%; background:var(--accent,#0089CF); opacity:.6; }
.doc-panel--full pre{
  background:rgba(var(--fg-rgb),.04); border:1px solid rgba(var(--fg-rgb),.08); border-radius:10px;
  padding:14px 16px; margin:0 0 16px; overflow-x:auto;
  font-family:var(--font-mono); font-size:12.5px; line-height:1.5; color:rgba(var(--fg-rgb),.8); white-space:pre-wrap; word-break:break-word;
}
.doc-panel--full::-webkit-scrollbar{width:8px;}
.doc-panel--full::-webkit-scrollbar-thumb{background:rgba(var(--fg-rgb),.18);border-radius:8px;}