/* ============================================================
   PALADIO — product pages (shared)
   Builds on css/styles.css tokens. Same paper-and-ink system.
   ============================================================ */

/* ---------- Product sub-nav ---------- */
.pnav .nav-inner { height: 64px; }
.pnav-back { display:flex; align-items:center; gap:9px; font-family:var(--mono); font-size:12.5px; letter-spacing:.04em; color:var(--ink-500); transition:color .2s; white-space:nowrap; }
.pnav-back:hover { color:var(--ink); }
.pnav-back .ar { transition:transform .25s; }
.pnav-back:hover .ar { transform:translateX(-3px); }
.pnav-mid { display:flex; align-items:center; gap:26px; }
.pnav-mid a { font-size:14.5px; color:var(--ink-700); transition:color .2s; }
.pnav-mid a:hover { color:var(--ink); }
@media (max-width:860px){ .pnav-mid{display:none} }

/* ---------- Product hero ---------- */
.phero { padding-top: 132px; padding-bottom: clamp(40px,6vh,72px); position:relative; overflow:hidden; }
.phero-grid { position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 85% 65% at 50% 20%,#000 25%,transparent 76%);
          mask-image:radial-gradient(ellipse 85% 65% at 50% 20%,#000 25%,transparent 76%); }
.phero-inner { position:relative; z-index:2; max-width: 60ch; }
.phero .eyebrow { margin-bottom: 22px; }
.phero h1 { font-size:clamp(2.6rem,6.5vw,5.4rem); letter-spacing:-0.045em; line-height:0.96; }
.phero h1 .it { font-style:italic; font-weight:500; }
.phero .lead { margin-top:26px; max-width:48ch; }
.phero .cta-row { margin-top:32px; }

/* layer affinity tags */
.layer-tags { display:flex; gap:9px; flex-wrap:wrap; margin-top:30px; }
.ltag { display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; padding:7px 12px; border-radius:100px; border:1px solid var(--line); color:var(--ink-700); background:var(--surface); white-space:nowrap; }
.ltag i { width:8px; height:8px; border-radius:2px; flex:none; }
.ltag.off { opacity:.4; }

/* ---------- Browser frame (embeds live product UI) ---------- */
.bframe { margin-top: clamp(40px,6vh,72px); border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--surface); box-shadow:0 40px 100px -60px rgba(23,20,14,.5); position:relative; z-index:2; }
.bframe-bar { display:flex; align-items:center; gap:14px; padding:12px 16px; border-bottom:1px solid var(--line-soft); background:linear-gradient(180deg,var(--paper),var(--surface)); }
.bframe-dots { display:flex; gap:7px; }
.bframe-dots i { width:11px; height:11px; border-radius:50%; background:var(--line-strong); display:block; }
.bframe-url { flex:1; display:flex; align-items:center; gap:9px; justify-content:center; font-family:var(--mono); font-size:12px; color:var(--ink-500); background:var(--surface); border:1px solid var(--line-soft); border-radius:8px; padding:7px 14px; max-width:420px; margin:0 auto; }
.bframe-url .lock { width:11px; height:11px; opacity:.6; }
.bframe-live { font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--fidelity); display:flex; align-items:center; gap:7px; flex:none; }
.bframe-live::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--fidelity); box-shadow:0 0 0 0 color-mix(in srgb,var(--fidelity) 60%,transparent); animation:livePulse 2s infinite; }
@keyframes livePulse { 0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--fidelity) 50%,transparent)} 70%{box-shadow:0 0 0 7px transparent} 100%{box-shadow:0 0 0 0 transparent} }
.bframe-stage { position:relative; width:100%; overflow:hidden; background:var(--paper-2); }
.bframe-stage iframe { border:0; display:block; transform-origin:top left; background:#fff; }
.bframe-stage .bshot { width:100%; height:auto; display:block; }
.bframe-cap { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:13px 18px; border-top:1px solid var(--line-soft); font-family:var(--mono); font-size:11.5px; letter-spacing:.03em; color:var(--ink-500); flex-wrap:wrap; }
.bframe-cap a { color:var(--ink); border-bottom:1px solid var(--line-strong); padding-bottom:1px; transition:border-color .2s; }
.bframe-cap a:hover { border-color:var(--ink); }

/* ---------- Problem band ---------- */
.pband { background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.pband .h-lg .it { font-style:italic; font-weight:500; color:var(--ink-700); }

/* ---------- Step / capability grid ---------- */
.steps3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:clamp(36px,5vh,56px); }
@media (max-width:820px){ .steps3{grid-template-columns:1fr} }
.stepc { border:1px solid var(--line); border-radius:16px; background:var(--surface); padding:26px; display:flex; flex-direction:column; min-height:230px; transition:border-color .3s, transform .3s; }
.stepc:hover { border-color:var(--line-strong); transform:translateY(-3px); }
.stepc .sh { display:flex; align-items:center; justify-content:space-between; }
.stepc .sn { font-family:var(--mono); font-size:12px; color:var(--ink-400); display:flex; gap:10px; align-items:center; }
.stepc .sn b { color:var(--accent); font-weight:600; letter-spacing:.08em; }
.stepc .sico { width:34px; height:34px; border-radius:9px; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; }
.stepc .sico svg { width:18px; height:18px; }
.stepc .st { font-size:clamp(1.2rem,1.7vw,1.5rem); font-weight:600; letter-spacing:-0.025em; margin-top:20px; line-height:1.08; }
.stepc ul { list-style:none; margin-top:14px; display:flex; flex-direction:column; gap:9px; }
.stepc li { position:relative; padding-left:18px; font-size:14.5px; color:var(--ink-600,var(--ink-700)); line-height:1.4; }
.stepc li::before { content:""; position:absolute; left:0; top:8px; width:6px; height:6px; border-radius:50%; background:var(--accent); opacity:.7; }
.stepc .smetric { margin-top:auto; padding-top:18px; font-size:clamp(1.6rem,2.4vw,2.1rem); font-weight:600; letter-spacing:-0.04em; }
.stepc .smetric span { font-size:13px; font-family:var(--mono); color:var(--ink-500); font-weight:400; letter-spacing:0; display:block; margin-top:4px; }

/* ---------- Outcome / case study ---------- */
.csband { background:var(--dark); color:var(--on-dark); }
.cs-grid { display:grid; grid-template-columns: 1.1fr 1fr; gap:clamp(32px,5vw,72px); align-items:center; }
@media (max-width:880px){ .cs-grid{grid-template-columns:1fr; gap:36px} }
.cs-quote { font-size:clamp(1.5rem,2.6vw,2.2rem); font-weight:500; letter-spacing:-0.025em; line-height:1.22; }
.cs-quote .it { font-style:italic; color:var(--accent-on-dark); }
.cs-meta { margin-top:26px; display:flex; align-items:center; gap:14px; font-family:var(--mono); font-size:13px; color:var(--dark-ink-300); }
.cs-meta .av { width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--fabric)); flex:none; }
.cs-metrics { display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--dark-line); border-radius:16px; overflow:hidden; }
.cs-metrics .m { padding:clamp(22px,3vw,32px); border-right:1px solid var(--dark-line-soft); border-bottom:1px solid var(--dark-line-soft); }
.cs-metrics .m:nth-child(2n){ border-right:none; }
.cs-metrics .m:nth-last-child(-n+2){ border-bottom:none; }
.cs-metrics .mv { font-size:clamp(2.4rem,4vw,3.4rem); font-weight:600; letter-spacing:-0.05em; line-height:0.9; color:var(--on-dark); }
.cs-metrics .ml { font-size:13.5px; color:var(--dark-ink-300); margin-top:12px; line-height:1.35; }

/* ---------- Foundation strip ---------- */
.foundation { border-top:1px solid var(--line); }
.fnd-row { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:clamp(32px,4vh,48px); }
@media (max-width:760px){ .fnd-row{grid-template-columns:repeat(2,1fr)} }
.fnd { border:1px solid var(--line); border-radius:14px; padding:22px; background:var(--surface); transition:border-color .3s, transform .3s; }
.fnd.on { border-color:color-mix(in srgb,var(--accent) 35%,var(--line)); background:linear-gradient(180deg,var(--accent-soft),transparent); }
.fnd:hover { transform:translateY(-3px); }
.fnd .fn { font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; display:flex; align-items:center; gap:8px; color:var(--ink-500); }
.fnd .fn i { width:8px; height:8px; border-radius:2px; }
.fnd .fv { font-size:19px; font-weight:600; letter-spacing:-0.02em; margin-top:10px; }
.fnd .fd { font-size:13.5px; color:var(--ink-500); margin-top:6px; line-height:1.35; }
.fnd .foff { font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-400); margin-top:12px; }

/* product cross-links */
.morep { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:clamp(32px,4vh,48px); }
@media (max-width:900px){ .morep{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .morep{grid-template-columns:1fr} }
.mp { border:1px solid var(--line); border-radius:14px; padding:22px; background:var(--surface); display:flex; flex-direction:column; gap:8px; min-height:140px; transition:border-color .3s, transform .3s; }
.mp:hover { border-color:var(--line-strong); transform:translateY(-3px); }
.mp .mpn { font-size:17px; font-weight:600; letter-spacing:-0.02em; }
.mp .mpd { font-size:13.5px; color:var(--ink-500); line-height:1.35; }
.mp .mpgo { margin-top:auto; font-family:var(--mono); font-size:12px; color:var(--accent); display:flex; align-items:center; gap:7px; }