/* AKAMENA product deep-dive (/product) — v5 prototype port
   (design_handoff_akamena_website/source/akamena-product.css + the shared gallery / output /
   fits primitives it relies on). Shared voice primitives (.eyebrow, .title-xl, .chips,
   .out-formats, .rv) come from base.css. */

/* The per-platform visual is now a fan of coded "story fragments" (no images ship) —
   styles live in product-fragments.css. */

/* ============================================================ TOPBAR ANCHOR NAV ============ */
/* uses the shared .topnav (layout.css); tightened tracking for the platform anchors */
.page-product .topnav a { font-size: 0.64rem; }

/* ============================================================ PAGE INTRO — through-line + combination ============ */
.p-intro { padding: clamp(150px, 22vh, 220px) 0 clamp(70px, 10vh, 110px); }
/* intro heading one step down from the global .title-xl; sentence 2 becomes a subline */
.p-intro .title-xl { max-width: 24ch; font-size: clamp(2.05rem, 4.6vw, 4.1rem); }
.p-intro-sub { max-width: 46ch; }
/* the combination — one hairline band, mono voice */
.eq-band { margin-top: clamp(44px, 7vh, 72px); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding: clamp(20px, 3vh, 30px) 0; display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 12px 18px; }
/* each unit = [operator | body]; the operator is a flex child of its term, so it can never
   wrap away from it. justify-content:center keeps every wrapped line centred. */
.eq-band .eq-t { display: inline-flex; align-items: center; gap: clamp(8px, 1vw, 14px); font-family: var(--mono); font-size: clamp(0.62rem, 0.85vw, 0.74rem); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }
.eq-band .eq-t small { display: block; margin-top: 5px; font-size: 0.82em; letter-spacing: 0.16em; color: var(--muted); }
.eq-band .eq-op { font-family: var(--serif); font-size: clamp(1.3rem, 2vw, 1.7rem); color: var(--gold); line-height: 1; flex: none; }
.eq-band .eq-t.out { color: var(--gold); }

/* ============================================================ PLATFORM SECTION TEMPLATE (×3) ============ */
.psec { border-top: 1px solid var(--hairline); padding: clamp(80px, 12vh, 130px) 0; scroll-margin-top: 64px; }
.psec .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(36px, 5vw, 76px); align-items: start; }
.prole { font-family: var(--mono); font-size: clamp(0.8rem, 1vw, 0.92rem); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink); display: flex; align-items: center; gap: 12px; }
.prole::before { content: ""; width: 7px; height: 7px; background: var(--gold); flex: none; }
.prole .tier { color: var(--gold); font-size: 0.7em; font-weight: 500; letter-spacing: 0.16em; }
.psec h2 { margin-top: 22px; font-size: clamp(2rem, 3.6vw, 3.2rem); line-height: 1.05; max-width: 16ch; }
.psec h2 em { font-style: italic; color: var(--gold); }
.psec .p-what { margin-top: 18px; font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.55; color: var(--ink); font-weight: 300; max-width: 44ch; }
.psec .p-who { margin-top: 16px; font-family: var(--mono); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.psec .chips { margin-top: 26px; max-width: 56ch; }
.psec .p-outcome { margin-top: clamp(26px, 4vh, 38px); font-family: var(--serif); font-style: italic; font-size: clamp(1.25rem, 1.9vw, 1.6rem); color: var(--ink); max-width: 30ch; }
.psec .p-outcome::before { content: "— "; color: var(--gold); }
.psec .out-formats { margin-top: clamp(24px, 3.5vh, 34px); align-items: flex-start; }
.psec .of-items { justify-content: flex-start; }
.psec .of-note { margin-top: 12px; font-size: 0.82rem; line-height: 1.45; color: var(--muted); }

/* ============================================================ ARCHITECTURE FLOW (once) ============ */
.pflow-sec { border-top: 1px solid var(--hairline); background: var(--cream); padding: clamp(80px, 12vh, 130px) 0; }
.pflow-sec .flow-cap { font-family: var(--mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }
.pflow-sec h2 { margin-top: 16px; font-size: clamp(1.7rem, 2.8vw, 2.5rem); line-height: 1.1; max-width: none; }
/* subordinate second line — one step down from the heading, keeping the gold-italic
   emphasis. Two blocks ⇒ the break holds on desktop; each line wraps naturally on mobile. */
.pflow-sub { margin-top: 10px; font-family: var(--serif); font-style: italic; color: var(--gold); font-size: clamp(1.2rem, 2vw, 1.7rem); line-height: 1.14; max-width: 34ch; }
.pflow-in { margin-top: clamp(40px, 6vh, 64px); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 24px); }
.fin { background: var(--white); border: 1px solid var(--hairline); padding: clamp(16px, 2vw, 24px) clamp(18px, 2.2vw, 28px); }
.fin .f-name { font-family: var(--mono); font-size: clamp(0.7rem, 0.9vw, 0.82rem); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); display: flex; align-items: center; gap: 10px; }
.fin .f-name::before { content: ""; width: 6px; height: 6px; background: var(--gold); flex: none; }
.fin .f-sub { margin-top: 8px; font-family: var(--mono); font-size: 0.58rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.fin.night { background: var(--night); border-color: var(--night); }
.fin.night .f-name { color: var(--ivory); }
.fin.night .f-sub { color: rgba(255,255,255,0.55); }
.pflow-svg { display: block; width: 100%; height: clamp(90px, 14vh, 140px); }
.fp { fill: none; stroke: var(--gold); stroke-width: 1.2px; vector-effect: non-scaling-stroke; opacity: 0.65; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease) 0.2s; }
.fp.f2 { transition-delay: 0.4s; }
.fp.f3 { transition-delay: 0.6s; }
.pflow.in .fp { stroke-dashoffset: 0; }
body:not(.anim) .fp { stroke-dashoffset: 0; }
.fbanker { position: relative; margin: 0 auto; max-width: 560px; background: var(--night); padding: clamp(20px, 2.6vw, 30px) clamp(24px, 3vw, 38px); text-align: center; }
.fbanker::after { content: ""; position: absolute; left: 50%; bottom: -34px; transform: translateX(-50%); width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid var(--gold); }
.fbanker::before { content: ""; position: absolute; left: 50%; bottom: -28px; width: 1px; height: 28px; background: rgba(201,152,47,0.8); }
.fbanker .f-name { font-family: var(--mono); font-size: clamp(0.78rem, 1vw, 0.9rem); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ivory); display: inline-flex; align-items: center; gap: 12px; }
.fbanker .f-name::before { content: ""; width: 7px; height: 7px; background: var(--gold); }
.fbanker .f-name .tier { color: var(--gold-bright); font-size: 0.7em; font-weight: 500; letter-spacing: 0.16em; }

/* output flow (reuses .out-formats from base.css) */
.outflow { text-align: center; }
.pflow .outflow { margin-top: 44px; }
.pflow .outflow .out-stem { display: none; }
.out-stem { display: block; width: 1px; height: clamp(38px, 6vh, 64px); margin: 0 auto 24px; background: linear-gradient(180deg, rgba(201,152,47,0.75), rgba(201,152,47,0.12)); }
.sl-cap { font-family: var(--mono); font-size: 0.6rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.sl-flow { margin-top: 16px; display: flex; align-items: center; justify-content: center; gap: clamp(14px, 2vw, 22px); flex-wrap: wrap; }
.sl-flow span { font-family: var(--serif); font-style: italic; font-size: clamp(1.15rem, 2vw, 1.6rem); color: var(--ink); white-space: nowrap; }
.sl-flow span:last-child { color: var(--gold); }
.sl-flow i { width: clamp(28px, 4vw, 64px); height: 1px; background: linear-gradient(90deg, rgba(201,152,47,0.15), rgba(201,152,47,0.8)); }
.pflow .outflow .out-formats { margin-top: clamp(26px, 4vh, 40px); }

/* ============================================================ CLOSING — relocated from home (before the CTA) ============ */
/* The one-experience line + the "On top of your systems" trust block now live only
   here, directly before the CTA. Left-aligned (the home version was centred). */
.p-closing { padding: clamp(56px, 9vh, 104px) 0 clamp(60px, 10vh, 110px); border-top: 1px solid var(--hairline); }
.p-closing .product-close { text-align: left; font-family: var(--serif); font-size: clamp(1.6rem, 3vw, 2.6rem); line-height: 1.12; color: var(--ink); max-width: none; }
.p-closing .product-close em { font-style: italic; color: var(--gold); }
/* two-line headline on desktop — "One experience." / "Every client…"; the em flows inline
   (natural wrap) on mobile. */
@media (min-width: 981px) { .p-closing .product-close em { display: block; } }
.p-closing .fits { margin-top: clamp(36px, 5vh, 60px); border: 1px solid var(--hairline); background: var(--cream); padding: clamp(28px, 4vw, 48px); }
.p-closing .fits-lead { font-family: var(--serif); font-size: clamp(1.3rem, 2.2vw, 1.8rem); color: var(--ink); max-width: 28ch; }
.p-closing .fits-lead em { font-style: italic; color: var(--gold); }
.p-closing .fits-markers { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 16px 24px; }
.p-closing .fits-markers span { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); display: inline-flex; align-items: center; gap: 9px; }
.p-closing .fits-markers span::before { content: ""; width: 14px; height: 14px; border: 1px solid var(--gold); flex: none; background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%2012'%3E%3Cpath%20d='M2.4%206.4L4.8%208.8L9.6%203.3'%20fill='none'%20stroke='%23C9982F'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center; }

/* ============================================================ RESPONSIVE ============ */
@media (max-width: 1099px) {
  .psec .wrap { grid-template-columns: 1fr; }
  .pflow-in { grid-template-columns: 1fr; gap: 34px; }
  .pflow-svg { display: none; }
  .pflow-in .fin { position: relative; }
  .pflow-in .fin:not(:first-child)::before { content: "+"; position: absolute; top: -26px; left: 50%; transform: translateX(-50%); font-family: var(--serif); font-size: 1.3rem; color: var(--gold); }
  .fbanker { margin-top: 40px; }
  .eq-band .eq-t small { display: inline; margin-left: 6px; }
}