/* ===========================================================================
   Product page template — used by every product (Arvia today,
   LogicLens and the rest as they ship).
   =========================================================================== */

section { padding:96px 0 0; }
.section-head { margin-bottom:48px; }
.section-head h2 { font-size:22px; }
.detail-grid { gap:52px 72px; }

/* ---------- product hero ---------- */
.phero { padding:110px 0 40px 32px; display:grid; grid-template-columns:180px 1fr;
         gap:48px; align-items:center; }
@media (max-width:680px) {
  .phero { grid-template-columns:1fr; text-align:center; padding-left:0; }
  .phero .appicon { margin:0 auto; }
  .phero .buy-row { justify-content:center; }
}
.crumb { font-size:11px; letter-spacing:.2em; text-transform:uppercase;
         color:var(--ink-dim); margin-bottom:14px; }
.crumb a { color:var(--ink-dim); }
.crumb a:hover { color:var(--ink-mid); }
.phero h1 { font-size:clamp(28px,4.4vw,40px); font-weight:700; line-height:1.2; }
.phero .tag { color:var(--ink-mid); font-size:16px; margin-top:10px; }
.phero .meta { margin-top:16px; font-size:11.5px; color:var(--ink-dim); letter-spacing:.08em; }
.phero .meta .amber { color:var(--amber-dim); }
.buy-row { margin-top:30px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
/* The price lives on the Buy button itself, so this is terms only — never
   repeat the figure here or the row says it twice. */
.buy-note { color:var(--ink-dim); font-size:12px; }

/* ---------- how it works ---------- */
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:640px) { .steps { grid-template-columns:1fr; } }
.step { background:var(--panel-2); border:1px solid var(--line-soft); border-radius:12px; padding:24px; }
.step .n { color:var(--amber); font-size:11px; letter-spacing:.15em; }
.step b { display:block; margin:8px 0 6px; font-size:13.5px; }
.step p { font-size:12.5px; color:var(--ink-mid); }


/* ===========================================================================
   Arvia — V4 teal action layout, 08/19/2026.
   Approved reference: Arvia-V4-Full-Page-Reference (Cowork _INBOX). Amber is
   brand and identity; teal owns action, links, and output energy. The hero
   and see-it-in-action artwork are approved generated compositions; their
   PNG masters sit in src/img/fcp-relay/ beside the WebPs the page serves.
   =========================================================================== */

.product-vision h1, .product-vision h2 { font-family:var(--brand-sans); }
.product-vision section:not(.phero) { padding-top:48px; }
/* named per section so the styles guard can tie markup to rules */
.product-vision .promise, .product-vision .see-action, .product-vision .editors { padding-top:48px; }

/* ----- hero: identity left, composition right ----- */
.product-vision .phero.phero-v4 { grid-template-columns:minmax(330px,0.78fr) 1.1fr;
  gap:48px; align-items:center; padding:56px 0 30px; }
.phero-v4 .crumb a:first-child { color:var(--amber); }
.phero-copy .crumb { margin-bottom:26px; }
.phero-id { display:flex; align-items:center; gap:32px; margin-bottom:22px; }
.phero-id .appicon { margin:0; flex:none; width:158px; height:158px; }
.product-vision .phero-v4 h1 { font-size:clamp(54px,6vw,84px); font-weight:300;
  letter-spacing:-.05em; line-height:1; }
.product-vision .phero-v4 .tag { font-family:var(--brand-sans); color:var(--ink);
  font-weight:300; letter-spacing:-.03em; font-size:clamp(21px,2.1vw,27px);
  margin-top:12px; line-height:1.3; }
@media (min-width:1080px) { .product-vision .phero-v4 .tag { white-space:nowrap; } }
.phero-lede { color:var(--ink-mid); font-family:var(--brand-sans); font-size:15.5px;
  line-height:1.75; max-width:46ch; margin-top:20px; }
.phero-v4 .buy-row { margin-top:28px; }
.phero-v4 .buy-note { display:block; margin-top:16px; }
/* What the apps don't ask of you, said once under the buttons (10/02/2026). */
.hero-pledge { font-family:var(--brand-sans); font-size:16px; font-weight:500; letter-spacing:-.01em;
  color:var(--ink); margin-top:22px; }
.hero-pledge + .buy-note { margin-top:8px; }
.product-vision .guide-link { color:var(--teal); font-size:12px; font-weight:700;
  text-decoration:none; white-space:nowrap; }
.hero-links { display:flex; flex-wrap:wrap; gap:8px 26px; margin-top:18px; }
@media (max-width:680px) { .hero-links { justify-content:center; } }
.product-vision .guide-link:hover { color:var(--teal-bright); text-decoration:underline; }
.hero-stage { position:relative; }
.hero-comp { width:100%; height:auto; display:block; }
@media (max-width:1080px) {
  .product-vision .phero.phero-v4 { grid-template-columns:1fr; gap:44px; }
  .hero-stage { max-width:760px; margin:0 auto; }
}
@media (max-width:680px) {
  /* Icon above the name: side by side, a long name ("Plugin Wrangler") ran
     past the edge of a phone. */
  .phero-id { justify-content:center; flex-direction:column; text-align:center; gap:20px; }
  .phero-id .appicon { width:120px; height:120px; }
  .phero-lede { margin-left:auto; margin-right:auto; }
}

/* ----- promise: centered title over the icon row ----- */
.structure-title { text-align:center; font-size:clamp(28px,3vw,40px); font-weight:300;
  letter-spacing:-.035em; line-height:1.15; font-family:var(--brand-sans); }
.promise .feature-icons { margin-top:40px; }
.feature-icons { display:grid; grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line-soft); border-radius:16px; background:var(--panel);
  overflow:hidden; }
.feature-icons > div { --accent:var(--teal); padding:36px 30px; border-right:1px solid var(--line-soft); text-align:left; }
.feature-icons > div:last-child { border-right:0; }
.fi-mark { display:block; width:54px; height:54px; margin:0 auto 20px; }
.fi-mark svg { width:100%; height:100%; display:block;
  filter:drop-shadow(0 0 9px color-mix(in srgb,var(--accent,var(--teal)) 30%,transparent)); }
/* The icons are drawn in teal (and ivory and amber); inside a row whose accents
   take turns, every stroke takes the card's accent. */
.accent-turns .fi-mark svg [stroke] { stroke:var(--accent); }
.feature-icons b { display:block; color:var(--accent); font-family:var(--brand-sans);
  font-size:17px; font-weight:500; letter-spacing:-.01em; margin-bottom:10px; }
.feature-icons p { font-size:13.5px; font-family:var(--brand-sans); color:var(--ink-mid);
  line-height:1.65; margin:0; }
@media (max-width:820px) {
  .feature-icons { grid-template-columns:1fr 1fr; }
  .feature-icons > div:nth-child(2) { border-right:0; }
  .feature-icons > div:nth-child(-n+2) { border-bottom:1px solid var(--line-soft); }
}
@media (max-width:520px) {
  .feature-icons { grid-template-columns:1fr; }
  .feature-icons > div { border-right:0; border-bottom:1px solid var(--line-soft); }
  .feature-icons > div:last-child { border-bottom:0; }
}

/* ----- see it in action: composition + live import summary ----- */
.sa-head, .ed-head { font-family:var(--brand-sans); font-size:clamp(24px,2.6vw,32px);
  font-weight:400; letter-spacing:-.02em; margin-bottom:24px; }
.sa-band { display:grid; grid-template-columns:2.1fr 1fr; gap:26px;
  border:1px solid var(--line-soft); border-radius:16px; background:var(--panel);
  padding:26px; align-items:center; }
.sa-comp { width:100%; height:auto; display:block; }
.sa-summary { border:1px solid #303137; border-radius:12px; background:#0c0d0f;
  padding:24px 26px; font-size:12px; }
.sum-title { color:var(--teal); letter-spacing:.06em; padding-bottom:14px;
  border-bottom:1px solid #24252a; margin-bottom:14px; }
.sum-row { display:flex; justify-content:space-between; gap:18px; color:#92939a;
  line-height:2.1; }
.sum-row b { color:var(--ink); font-weight:700; }
.sum-zeros { display:flex; flex-direction:column; gap:2px; margin:14px 0;
  color:var(--teal); letter-spacing:.08em; }
.sum-zeros i { font-style:normal; font-weight:700; margin-right:10px; }
.sum-foot { color:var(--teal); border-top:1px solid #24252a; padding-top:14px;
  font-size:11px; letter-spacing:.04em; }
@media (max-width:900px) { .sa-band { grid-template-columns:1fr; } }

/* ----- built for editors ----- */
.editors-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.ed-card { --accent:var(--teal); border:1px solid var(--line-soft); border-radius:14px; background:var(--panel);
  padding:32px 28px; overflow:hidden; }
.ed-card .fi-mark { width:46px; height:46px; margin:0 0 22px; }
.ed-card b { display:block; color:var(--accent); font-family:var(--brand-sans);
  font-size:17px; font-weight:500; letter-spacing:-.01em; margin-bottom:10px; }
.ed-card p { font-size:13px; color:var(--ink-mid); line-height:1.8; }
/* five-column variant once a real customer quote exists:
   .editors-grid{grid-template-columns:repeat(4,1fr) 1.4fr}
   .ed-quote{border:1px solid var(--line-soft);border-radius:14px;background:var(--panel-2);padding:28px} */
@media (max-width:1080px) { .editors-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:560px) { .editors-grid { grid-template-columns:1fr; } }

/* ----- closing band ----- */
.product-vision .closing-band { display:flex; align-items:center; justify-content:space-between;
  gap:44px; flex-wrap:wrap; border:1px solid var(--line-soft); border-radius:16px;
  background:radial-gradient(420px 160px at 78% 50%,rgba(34,199,184,.07),transparent 70%),var(--panel);
  padding:44px 48px !important; margin-top:56px; }
.closing-band h2 { font-family:var(--brand-sans); font-size:clamp(26px,3vw,38px);
  font-weight:400; letter-spacing:-.02em; line-height:1.25; }
.cb-actions { display:flex; gap:14px; flex-wrap:wrap; }


/* ===========================================================================
   Screenshot-led product layout, 09/24/2026.

   Arvia's page argues with generated artwork, because what it does is a shape
   you can draw. A utility that reads your library argues with the thing
   itself: the claim, then the screen where the app makes it. These rules are
   named for what they do, not for the product, so the next app can use them.
   =========================================================================== */

/* ----- a status line where a shipping product has its price ----- */
.status-line { font-family:var(--brand-sans); display:inline-flex; align-items:center; gap:9px; font-size:12px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-dim);
  border:1px solid var(--line-soft); border-radius:999px; padding:7px 15px; }
.status-dot { width:7px; height:7px; border-radius:50%; background:var(--amber);
  box-shadow:0 0 10px rgba(246,182,24,.55); flex:none; }

/* ----- a screenshot, framed so it reads as a window rather than a picture ----- */
.shot { width:100%; height:auto; display:block; border:1px solid var(--line);
  border-radius:12px; background:var(--panel); }
video.shot { border-radius:12px; }
/* A crop of one part of the window, cut at 2x so it can be shown at its own
   size. Detail is the point of these — a whole window shrunk into a column
   proves nothing (Kelly, 09/24/2026).
   Centred in its column and capped in height, so a tall crop doesn't tower
   over the sentence it belongs to. */
.proof .shot-frame.detail { width:fit-content; max-width:560px; margin-inline:auto; }
.proof .shot-frame.detail .shot { border-radius:10px; max-height:540px; width:auto;
  max-width:100%; }
/* A crop that is wide and short — a toolbar, a status bar, a row of results —
   needs the whole column, and on a flipped row it would land in the narrow
   one. These rows stack instead: the sentence, then the strip beneath it at
   full width. */
.proof .shot-frame.strip { width:100%; max-width:100%; margin-inline:0; }
.proof .shot-frame.strip .shot { width:100%; max-height:none; border-radius:10px; }
.proof.banner, .proof.banner.flip { grid-template-columns:1fr; gap:26px; }
.proof.banner .proof-copy { order:1; }
.proof.banner .shot-frame { order:2; }
.proof.banner .proof-copy p { max-width:62ch; }
.shot-frame { position:relative; border-radius:14px; overflow:hidden;
  box-shadow:0 26px 60px -30px rgba(0,0,0,.9); }
/* Inside the summary band the crop is sized by the column, never by its own
   pixel width — otherwise the frame clips it and the crop reads as broken. */
.sa-band .shot-frame { display:flex; align-items:center; }
.sa-band .shot { width:100%; height:auto; max-width:100%; }

/* ----- claim beside the screen that proves it ----- */
.proof { display:grid; grid-template-columns:minmax(300px,.85fr) 1.35fr;
  gap:50px; align-items:center; }
.proof + .proof { margin-top:72px; }
.proof.flip { grid-template-columns:1.35fr minmax(300px,.85fr); }
.proof.flip .proof-copy { order:2; }
.proof.flip .shot-frame { order:1; }
.proof-copy h3 { font-family:var(--brand-sans); font-size:clamp(21px,2.2vw,27px);
  font-weight:400; letter-spacing:-.02em; line-height:1.25; margin-bottom:14px; }
.proof-copy p { font-family:var(--brand-sans); color:var(--ink-mid); font-size:14.5px;
  line-height:1.8; max-width:46ch; }
.proof-copy p + p { margin-top:12px; }
.proof-note { font-family:var(--brand-sans); margin-top:16px; font-size:13px; color:var(--ink-dim);
  border-left:2px solid var(--coral); padding-left:14px; line-height:1.7; }
.proof-note b { color:var(--cyan); font-weight:500; }
@media (max-width:1000px) {
  .proof, .proof.flip { grid-template-columns:1fr; gap:28px; }
  .proof.flip .proof-copy { order:1; }
  .proof.flip .shot-frame { order:2; }
}

/* ----- the honest list: what it doesn't do ----- */
.limits { border:1px solid var(--line-soft); border-radius:16px; background:var(--panel);
  padding:36px 40px; }
.limits h3 { font-family:var(--brand-sans); font-size:19px; font-weight:500;
  margin-bottom:8px; }
.limits > p { font-family:var(--brand-sans); color:var(--ink-mid); font-size:14px; max-width:70ch; }
.limits ul { margin-top:22px; display:grid; grid-template-columns:1fr 1fr;
  gap:14px 40px; list-style:none; }
.limits li { font-family:var(--brand-sans); color:var(--ink-mid); font-size:13.5px; line-height:1.7;
  padding-left:20px; position:relative; }
.limits li::before { content:"—"; position:absolute; left:0; color:var(--ink-dim); }
.limits li b { color:var(--ink); font-weight:500; }
@media (max-width:760px) { .limits ul { grid-template-columns:1fr; } }