/* product.html - the Product overview, on the Signal foundation
   (signal-site.css: tokens, type, .sg-wrap / .sg-eyebrow / .sg-lead /
   .sg-actions / .sg-btn / .sg-text-link). The page is `body.sg-page`, so the
   site header sits in the flow above the art band. Neutral grounds and text;
   violet only as a small accent (the eyebrow dot, text links, the callout
   rule). Everything here is scoped to .pp; the art band itself comes from
   art/art.css. */

.pp { --art-ground: var(--paper); display: block; }
/* Zero weight, so a component's own margin (.sg-eyebrow) still applies. */
:where(.pp) :is(h1, h2, h3, p) { margin: 0; }

/* ─── The art band ───
   Sits right under the header, on the page's own paper. container-type lets
   the poster size itself with the same rule the shader uses for the sculpt:
   width = min(W * (W/H < 1.5 ? 1 : .9), H * 2.2), centred, aspect 640:427.
   So when the glyph render fades in, the octopus is where the poster had it. */
.pp-art {
  height: clamp(340px, 52vh, 580px);
  container-type: size;
  touch-action: pan-y;
}
.pp-art .glyph-art-poster {
  inset: auto; left: 50%; top: 50%;
  width: min(90cqw, 220cqh); max-width: none; height: auto; aspect-ratio: 640 / 427;
  transform: translate(-50%, -50%);
  object-fit: fill;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent), linear-gradient(transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent), linear-gradient(transparent, #000 8%, #000 92%, transparent);
  mask-composite: intersect;
}
/* Narrow bands (phones): the whole width, so the long left arm is not cut at
   the screen edge. scene-octopus.js uses the same factor. */
@container (aspect-ratio < 1.5) {
  .pp-art .glyph-art-poster { width: min(100cqw, 220cqh); }
}
/* The band runs into the page instead of stopping on a hard edge: the canvas
   is masked (art.css .art-fade); the poster overflows the band, so its edge
   fade is these two paper washes, under the Motion button (z-index 3). */
.pp-art::before,
.pp-art::after {
  content: ''; position: absolute; left: 0; right: 0; height: 20%;
  z-index: 2; pointer-events: none;
}
.pp-art::before { top: 0; height: 12%; background: linear-gradient(var(--paper), transparent); }
.pp-art::after { bottom: 0; background: linear-gradient(transparent, var(--paper)); }
/* No WebGL: the poster is the picture, and there is no motion to pause. */
.pp-art.is-fallback .glyph-art-motion { display: none; }

/* ─── Hero (the study's .page-hero.product-hero) ─── */
.pp-hero { max-width: 820px; padding: 10px 0 46px; }
.pp-hero h1 { margin-bottom: 22px; font-size: clamp(42px, 5vw, 68px); }
.pp-actions { margin-top: 30px; }
.pp .pp-fine { margin-top: 16px; font-size: 13px; }

/* ─── The work has a place to live (the study's .feature-split) ─── */
.pp-split {
  display: grid; grid-template-columns: 1fr 1.3fr; gap: 65px; align-items: center;
  padding: 92px 0 75px; border-top: 1px solid var(--line);
}
.pp-split h2 { margin-bottom: 20px; font-size: clamp(30px, 3.6vw, 50px); }
.pp-split-copy p { max-width: 460px; margin-bottom: 26px; font-size: 15px; }

/* The illustrative result: a light file inside a surface frame. */
.pp-result { margin: 0; }
.pp-work { overflow: hidden; padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.pp-work-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 15px; border-bottom: 1px solid #e8e6e1; background: #fff; color: #656471; font-size: 11px; }
.pp-work-file { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-illus { flex: none; padding: 2px 8px; border: 1px solid #dcdad5; border-radius: 5px; color: #4d4c57; font-size: 10px; font-weight: 600; }
.pp-brief { padding: 30px; background: #f0f3f8; color: #202a3d; }
.pp-brief-kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 19px; font-size: 11px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: #566482; }
.pp-brief-kicker::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #8f86d8; }
.pp .pp-brief h3 { margin-bottom: 12px; font: 500 30px/1.14 var(--serif); letter-spacing: -.02em; color: #202a3d; }
.pp .pp-brief > p { max-width: 450px; font-size: 13px; line-height: 1.65; color: #536178; }
.pp-brief-options { display: grid; gap: 8px; margin: 23px 0; }
.pp-brief-options > div { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 12px 14px; border: 1px solid #d9dfeb; border-radius: 7px; background: #fff; }
.pp-brief-options strong { font-size: 13px; }
.pp-brief-options span { font-size: 11px; color: #455f77; }
.pp-brief-options small { grid-column: 1 / -1; font-size: 12px; color: #67748b; }
.pp-brief-foot { display: flex; gap: 15px; padding-top: 14px; border-top: 1px solid #cbd4e4; font-size: 11px; color: #566482; }
.pp-result figcaption { margin-top: 12px; font-size: 12px; line-height: 1.5; color: var(--muted); }

/* ─── Capabilities (the study's .feature-list) and the callout ─── */
.pp-caps { padding-bottom: 88px; }
.pp-cap-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 25px; }
.pp-cap { display: flex; flex-direction: column; padding-top: 25px; border-top: 1px solid var(--line); }
.pp .pp-cap h3 { margin-bottom: 12px; font-size: 20px; }
.pp .pp-cap p { flex: 1; margin-bottom: 18px; font-size: 14px; }
.pp-cap .sg-text-link, .pp-callout .sg-text-link { font-size: 14px; }
.pp-callout { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 56px; padding: 20px 23px; border: 1px solid var(--line); border-left: 3px solid var(--violet); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--surface); }
.pp-callout p { max-width: 760px; font-size: 14px; color: var(--ink); }
.pp-callout .sg-text-link { flex: none; }

@media (max-width: 900px) {
  .pp-split { gap: 35px; }
  .pp-callout { flex-direction: column; align-items: flex-start; gap: 12px; }
}
@media (max-width: 640px) {
  .pp-art { height: clamp(300px, 46vh, 420px); }
  .pp-hero { padding: 20px 0 30px; }
  .pp-hero h1 { font-size: 42px; }
  .pp-actions .sg-btn { flex: 1 1 auto; }
  .pp-split { grid-template-columns: 1fr; gap: 25px; padding: 53px 0 40px; }
  .pp-split h2 { font-size: 34px; }
  .pp-work { padding: 12px; }
  .pp-brief { padding: 22px 18px; }
  .pp .pp-brief h3 { font-size: 26px; }
  .pp-cap-grid { grid-template-columns: 1fr; gap: 15px; }
  .pp-caps { padding-bottom: 60px; }
  .pp-callout { margin-top: 36px; padding: 18px; }
}