/*
 * Octopia — public pages outside the landing: legal floor and contact door
 * (ADR-0033). Reuses octopia.css tokens only; nothing here touches the
 * landing's own classes.
 */

.pg { background: var(--surface); color: var(--ink-900); }
.pg-shell { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* --------------------------------------------------------------- nav */
.pg-nav { position: sticky; top: 0; z-index: 40; background: var(--surface); border-bottom: 1px solid var(--line); }
.pg-nav-row { display: flex; align-items: center; gap: 24px; height: 62px; min-width: 0; }
.pg-nav .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink-900); font-weight: 700; font-size: 17px; }
.pg-nav-links { display: flex; gap: 22px; margin-left: 8px; }
.pg-nav-links a { color: var(--ink-500); font-size: 14px; font-weight: 500; text-decoration: none; padding: 4px 0; }
.pg-nav-links a:hover, .pg-nav-links a[aria-current="page"] { color: var(--ink-900); }
.pg-nav-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.pg-nav-actions .btn { white-space: nowrap; }
@media (max-width: 720px) {
  .pg-nav-links { display: none; }
}

/* -------------------------------------------------------------- prose */
.pg-main { padding: clamp(40px, 6vw, 72px) 24px clamp(56px, 8vw, 96px); }
.pg-prose { max-width: 760px; }
.pg-narrow { max-width: 640px; }
.pg-prose h1 { font-size: clamp(30px, 4vw, 42px); line-height: 1.1; letter-spacing: -.03em; margin: 0 0 12px; }
.pg-prose h2 { font-size: 21px; letter-spacing: -.015em; margin: 40px 0 10px; }
.pg-prose h3 { font-size: 16.5px; margin: 24px 0 6px; }
.pg-prose p, .pg-prose li { font-size: 15.5px; line-height: 1.65; color: var(--ink-700); }
.pg-prose p { margin: 0 0 14px; }
.pg-prose ul, .pg-prose ol { margin: 0 0 16px; padding-left: 22px; }
.pg-prose li + li { margin-top: 6px; }
.pg-prose a { color: var(--blue-600); }
.pg-prose strong { color: var(--ink-900); }
.pg-lede { font-size: 17px !important; color: var(--ink-500) !important; margin-bottom: 26px !important; }
.pg-updated { font-size: 13px !important; color: var(--ink-400) !important; margin: 0 0 30px !important; }
.pg-prose .v2-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 16px; padding: 5px 14px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  background: var(--blue-100); color: var(--blue-700);
}
.pg-prose .v2-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Facts block (legal notice) and data tables (privacy) */
.pg-facts { list-style: none; padding: 0; margin: 0 0 20px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.pg-facts li { display: grid; grid-template-columns: 200px 1fr; gap: 12px; padding: 10px 14px; margin: 0; font-size: 14.5px; }
.pg-facts li + li { border-top: 1px solid var(--line); }
.pg-facts li span:first-child { color: var(--ink-500); }
@media (max-width: 560px) { .pg-facts li { grid-template-columns: 1fr; gap: 2px; } }

.pg-table-wrap { overflow-x: auto; margin: 0 0 20px; border: 1px solid var(--line); border-radius: var(--radius); }
.pg-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pg-table th, .pg-table td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); line-height: 1.5; color: var(--ink-700); }
.pg-table th { background: var(--surface-sunken); color: var(--ink-900); font-weight: 600; font-size: 13px; white-space: nowrap; }
.pg-table tr:last-child td { border-bottom: 0; }
.pg-table code { font-family: var(--mono); font-size: 12.5px; }

/* --------------------------------------------------------------- form */
.pg-form { max-width: 640px; margin-top: 8px; }
.pg-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
@media (max-width: 560px) { .pg-form-grid { grid-template-columns: 1fr; } }
.pg-form-privacy { font-size: 12.5px; color: var(--ink-500); margin: 0 0 14px; }
.pg-form-privacy a { color: var(--ink-700); }
.pg-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------------------------------------------- footer */
.pg-footer { border-top: 1px solid var(--line); padding: 30px 0; background: var(--surface); }
.pg-footer-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pg-footer p { margin: 0; color: var(--ink-500); font-size: 13.5px; }
.pg-footer-links { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.pg-footer-links a { font-size: 13.5px; color: var(--ink-500); text-decoration: none; }
.pg-footer-links a:hover { color: var(--ink-900); }

/* ------------------------------------------------- preview (O5, ADR-0075) */
/* The public demonstration page: the merchant's own description beside the
   one Octopia wrote. Two columns that become one on a phone — a before/after
   read side by side is the whole point, so the stack order keeps "before"
   first rather than reflowing into it. */
/* One column, deliberately, and not a responsive fallback.
   The "after" side is a real storefront layout: `octopia-row` puts media and
   copy side by side and alternates them left/right, and its own stylesheet
   collapses that to a stack below 640px — measured INSIDE the iframe, not on
   the page. Two columns inside the 1180px shell gave each iframe 580px, so the
   collapse fired at every screen size and the one thing this page exists to
   show could never render (owner, 2026-09-21: "y'a pas les images un coup a
   droite un coup a gauche comme dans Octopia"). Side by side is only honest
   above ~1320px of shell, which we do not have. Full width it is. */
.pv-compare { display: grid; grid-template-columns: 1fr; gap: 20px; margin: 0 0 24px; align-items: start; }
.pv-side { margin: 0; overflow: hidden; }
.pv-side .card-body { padding-bottom: 8px; }
.pv-side h2 { margin: 0 0 4px; font-size: 17px; }
/* The merchant's HTML is third-party markup on an Octopia page: it renders in
   a fully sandboxed frame (no scripts, no forms, no same-origin), so nothing
   inside it can reach the page around it. */
.pv-frame { display: block; width: 100%; height: 620px; border: 0; border-top: 1px solid var(--line); background: #fff; }
.pv-observations, .pv-reasons { margin: 0 0 8px; padding-left: 20px; }
.pv-observations li, .pv-reasons li { margin: 0 0 6px; color: var(--ink-700); line-height: 1.55; }
.pv-cta { text-align: center; }
.pv-cta h2 { margin-top: 0; }
/* The waiting state: a page that says only "come back later" reads as broken. */
.pv-step { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0 4px; }
.pv-step-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent, #4f46e5); flex: none; animation: pv-pulse 1.4s ease-in-out infinite; }
@keyframes pv-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .pv-step-dot { animation: none; } }

/* The specialists at work, on the public page (C5). The merchant workspace
   has shown the relay since M4.5; a prospect used to get a step label and a
   count. Same data, same sentences, a lighter frame — this is a sales page,
   not a control room, so there is no artifact link and no identifier on any
   row. */
.pv-team-feed { list-style: none; margin: 12px 0 0; padding: 0; }
.pv-team-row { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr) auto; gap: 10px 14px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--line); }
.pv-team-row:first-child { border-top: 0; }
@media (max-width: 700px) { .pv-team-row { grid-template-columns: 1fr; gap: 4px; } }
.pv-team-actor { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pv-team-portrait { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line); flex: none; object-fit: cover; }
.pv-team-who { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.pv-team-message { color: var(--ink-700); line-height: 1.5; }

/* What a connected store would add. Inside the call-to-action card, and
   left-aligned inside a centred one: it is a list to read, not a slogan. */
.pv-limits { list-style: none; margin: 8px 0 22px; padding: 0; text-align: left; }
.pv-limit { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--line); }
.pv-limit:first-child { border-top: 0; }
.pv-limit-portrait { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--line); flex: none; object-fit: cover; }
.pv-limit-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pv-limit-would { color: var(--ink-900); line-height: 1.5; }