/* Components shared by the individual product pages and their privacy policies.
   Carried over from the original PHEM Logger and Kit Checker GitHub Pages sites.
   Colours come from the theme tokens, so each page picks up its product accent. */

/* ---------- SECTIONS ---------- */
.product-page section{ padding:32px 0 64px; }
.product-page .section-head{ max-width:62ch; margin-bottom:40px; }
.product-page .section-head p:not(.eyebrow){ font-size:15.5px; }
.product-page .hero{ padding:64px 0 60px; border-bottom:1px solid var(--line-soft); }
.product-page .hero-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center; }
.product-page .hero .lede{ font-size:17px; max-width:46ch; }
.product-page h1{ font-size:clamp(38px, 5.2vw, 58px); }
.platforms{
  margin-top:24px; font-family:var(--font-mono); font-size:12.5px; color:var(--text-faint);
  display:flex; flex-wrap:wrap; gap:6px 14px;
}
.platforms a{ color:var(--text-dim); }
.platforms a:hover{ color:var(--text); }

/* Store button that isn't live yet (see assets/store-links.js). */
.btn-soon{ border-style:dashed; color:var(--text-dim); cursor:default; pointer-events:none; }
.btn-soon .soon{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--accent); border:1px solid var(--accent-dim); border-radius:4px; padding:1px 6px; margin-left:2px;
}

/* ---------- NUMBERED GRID (features / principles) ---------- */
.grid-cells{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:1px; background:var(--line-soft);
  border:1px solid var(--line-soft); border-radius:10px; overflow:hidden;
}
.grid-cells.four{ grid-template-columns:repeat(4, 1fr); }
.grid-cells > div{ background:var(--panel); padding:26px 22px; }
.grid-cells .num{
  font-family:var(--font-mono); font-size:11px; color:var(--accent);
  letter-spacing:0.08em; margin-bottom:14px;
}
.grid-cells h3{ font-size:17px; margin:0 0 8px; }
.grid-cells p{ font-size:14px; color:var(--text-dim); margin:0; }

/* ---------- CARDS ROW ---------- */
.card-row{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.card-row.four{ grid-template-columns:repeat(4, 1fr); }
.mini-card{ border:1px solid var(--line); border-radius:10px; padding:22px 20px; background:var(--panel); }
.mini-card h3{
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:0.04em; text-transform:uppercase;
  color:var(--accent); margin:0 0 10px; font-weight:500;
}
.mini-card p{ margin:0; font-size:14.5px; color:var(--text-dim); }

/* ---------- ROSTER ---------- */
.roster{ display:flex; flex-wrap:wrap; gap:10px; }
.roster span{
  font-family:var(--font-mono); font-size:13px; color:var(--text-dim);
  border:1px solid var(--line); border-radius:6px; padding:8px 13px;
}

/* ---------- SPLIT + DASH LIST ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
.dash-list{ list-style:none; margin:0; padding:0; }
.dash-list li{
  position:relative; padding:12px 0 12px 26px;
  border-bottom:1px solid var(--line-soft); font-size:14.5px; color:var(--text-dim);
}
.dash-list li:last-child{ border-bottom:none; }
.dash-list li::before{ content:"—"; color:var(--accent); position:absolute; left:0; }
.dash-list li strong{ color:var(--text); font-weight:600; }
.text-link{ color:var(--accent); font-weight:600; }
.text-link:hover{ text-decoration:underline; }

/* ---------- DOWNLOAD ---------- */
.download{
  display:grid; grid-template-columns:1fr auto; gap:40px; align-items:center;
  background:linear-gradient(180deg, var(--accent-wash), transparent);
  border:1px solid var(--line); border-radius:14px; padding:40px;
}
.download h2{ margin-bottom:10px; }
.download p{ color:var(--text-dim); margin:0 0 24px; max-width:52ch; }
.qr{ text-align:center; font-family:var(--font-mono); font-size:11.5px; color:var(--text-faint); }
.qr img{
  width:150px; height:150px; background:#fff; padding:10px;
  border-radius:10px; border:1px solid var(--line); margin-bottom:10px;
}

/* ---------- NOTES ---------- */
.disclaimer{
  background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:6px; padding:18px 20px; font-size:14px; color:var(--text-dim); max-width:80ch;
}
.disclaimer strong{ color:var(--text); }
.sibling{ margin-top:28px; font-size:14px; color:var(--text-dim); }

/* ---------- PRIVACY POLICY PAGES ---------- */
.policy{ padding:56px 0 90px; }
.policy .doc-head{ max-width:66ch; margin-bottom:52px; }
.policy h1{ font-size:clamp(32px, 4.6vw, 46px); line-height:1.05; margin:0 0 18px; }
.policy .doc-head p{ color:var(--text-dim); font-size:15.5px; margin:0; }
.policy .doc-head .meta{ font-family:var(--font-mono); font-size:12.5px; color:var(--text-faint); margin-top:18px; }
.policy .layout{ display:grid; grid-template-columns:220px 1fr; gap:56px; align-items:start; }
.policy nav.toc{
  position:sticky; top:134px;
  display:flex; flex-direction:column;
  border-left:1px solid var(--line-soft); padding-left:16px;
  max-height:calc(100vh - 160px); overflow-y:auto;
}
.policy nav.toc a{ font-size:13px; color:var(--text-dim); padding:6px 0; }
.policy nav.toc a:hover{ color:var(--accent); }
.policy article{ min-width:0; }
.policy article section{
  padding:0 0 28px; margin-bottom:28px; max-width:70ch;
  border-bottom:1px solid var(--line-soft);
}
.policy article section:last-child{ border-bottom:none; margin-bottom:0; padding-bottom:0; }
.policy h2{ font-size:22px; margin:0 0 16px; }
.policy h2 .n{ font-family:var(--font-mono); font-size:13px; color:var(--accent); margin-right:10px; font-weight:500; }
.policy article p{ font-size:15px; color:var(--text-dim); margin:0 0 14px; }
.policy article p:last-child{ margin-bottom:0; }
.policy article strong{ color:var(--text); font-weight:600; }
.policy .fact-list{ list-style:none; margin:0 0 14px; padding:0; }
.policy .fact-list:last-child{ margin-bottom:0; }
.policy .fact-list li{
  position:relative; padding:10px 0 10px 26px;
  border-bottom:1px solid var(--line-soft); font-size:14.5px; color:var(--text-dim);
}
.policy .fact-list li:last-child{ border-bottom:none; }
.policy .fact-list li::before{ content:"—"; color:var(--accent); position:absolute; left:0; }
.policy .note{
  background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:6px; padding:16px 18px; font-size:14px; color:var(--text-dim); margin:0 0 14px;
}
.policy .note:last-child{ margin-bottom:0; }
.policy .contact-card{
  background:var(--panel); border:1px solid var(--line); border-radius:8px;
  padding:16px 18px; font-size:14.5px; color:var(--text-dim); margin:0 0 14px;
}
.policy .contact-card strong{ display:block; margin-bottom:2px; }
.policy table.disclosures{ width:100%; border-collapse:collapse; font-size:14px; margin:0 0 14px; }
.policy table.disclosures th, .policy table.disclosures td{
  text-align:left; padding:10px 12px; border-bottom:1px solid var(--line-soft); vertical-align:top;
}
.policy table.disclosures th{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--text-faint); font-weight:500;
}
.policy table.disclosures td{ color:var(--text-dim); }
.policy table.disclosures td:first-child{ color:var(--text); font-weight:500; }
.policy .table-scroll{ overflow-x:auto; }
.policy code.inline{
  font-family:var(--font-mono); font-size:0.92em; background:var(--panel);
  border:1px solid var(--line); border-radius:4px; padding:1px 6px; color:var(--text);
}
@media print{
  header.site, .product-bar, .policy nav.toc, footer.site{ display:none; }
  .policy .layout{ grid-template-columns:1fr; }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:860px){
  .product-page .hero-grid{ grid-template-columns:1fr; gap:40px; }
  .grid-cells, .grid-cells.four, .card-row.four{ grid-template-columns:1fr 1fr; }
  .card-row{ grid-template-columns:1fr; }
  .split{ grid-template-columns:1fr; gap:24px; }
  .download{ grid-template-columns:1fr; padding:28px; }
  .qr{ text-align:left; }
  .policy .layout{ grid-template-columns:1fr; gap:28px; }
  .policy nav.toc{
    position:static; max-height:none; flex-direction:row; flex-wrap:wrap;
    border-left:none; padding-left:0; border-bottom:1px solid var(--line-soft);
    padding-bottom:16px; gap:2px 18px;
  }
}
@media (max-width:560px){
  .product-page section{ padding:22px 0 44px; }
  .product-page .hero{ padding:40px 0 44px; }
  .grid-cells, .grid-cells.four, .card-row.four{ grid-template-columns:1fr; }
  .download{ padding:22px 18px; }
  .policy{ padding:36px 0 70px; }
}