/* ==========================================================================
   Perennus — the product page (/product/)
   Builds on landing.css: the hero, bento tiles, FAQ and dark bands are shared.
   Dark holds the product; paper holds the evidence.
   ========================================================================== */

/* ---------- Hero ---------- */
.announce--static { cursor: default; }
.announce--static:hover { box-shadow: 0 0 0 1px var(--line); }
.pd-hero .hero__title { max-width: 14ch; }

/* ---------- The film: a dark card, the video inside it ---------- */
.film { margin-top: clamp(40px, 5vw, 64px); }
.film__card {
  background: #15120E; color: #F4EEE6; border-radius: 24px; padding: clamp(10px, 1.4vw, 16px);
  box-shadow: 0 0 0 1px #15120E, 0 40px 90px -45px rgba(20, 16, 12, 0.6);
}
.film__frame { position: relative; border-radius: 14px; overflow: hidden; background: #fff; aspect-ratio: 16 / 9; }
.film__v { display: block; width: 100%; height: 100%; object-fit: cover; }
.film__sound {
  position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px;
  font: 700 0.875rem/1 var(--f); color: #fff; background: rgba(21, 18, 14, 0.86);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 0; border-radius: 999px; padding: 11px 16px 11px 13px; cursor: pointer;
  transition: background-color 140ms linear, transform 140ms ease;
}
.film__sound:hover { background: var(--acc); }
.film__sound:active { transform: translateY(1px); }
.film__sound svg { width: 14px; height: 14px; }
.film__cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 24px; padding: 14px 6px 4px; font-size: 0.8125rem; color: #968C7F; text-align: left; }
.film__cap b { color: #F4EEE6; font-weight: 700; }
.film__cap span { max-width: 62ch; }

/* ---------- How it works: paper steps on the dark band ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.step {
  --fg: #191918; --fg-2: #55524D; --fg-3: #8B867F; --line: rgba(20, 16, 12, 0.09); --line-2: rgba(20, 16, 12, 0.16);
  --wash: #F7F6F3; --acc-t: #FBEEE7; --acc-i: #963815;
  background: #FCFBF8; color: var(--fg); border-radius: 18px; padding: 22px 22px 0;
  display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px; overflow: hidden;
}
.step__k { display: flex; align-items: center; gap: 10px; font-size: 0.875rem; font-weight: 700; color: var(--acc); }
.step__n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #15120E; color: #F4EEE6; font-size: 0.75rem; font-weight: 700; }
.step h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; text-wrap: balance; }
.step__p { font-size: 0.9375rem; color: var(--fg-2); line-height: 1.5; }
.step__ui {
  margin: 12px -22px 0; padding: 16px 22px 20px; background: #F2EFE9; border-top: 1px solid var(--line);
  display: grid; gap: 8px; align-content: start; justify-items: start; min-height: 112px;
}
.sf { display: grid; gap: 4px; width: 100%; }
.sf span { font-size: 0.75rem; color: var(--fg-3); font-weight: 500; }
.sf b { font-weight: 500; background: #fff; border: 1px solid var(--line-2); border-radius: 8px; padding: 7px 10px; letter-spacing: 0.1em; color: var(--fg-3); font-size: 0.875rem; }
.chain { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; width: 100%; }
.chain li { position: relative; font-size: 0.8125rem; font-weight: 600; background: #fff; border-radius: 8px; padding: 5px 10px; box-shadow: 0 0 0 1px var(--line-2); }
.chain li:nth-child(2) { margin-left: 10px; } .chain li:nth-child(3) { margin-left: 20px; } .chain li:nth-child(4) { margin-left: 30px; }
.fake-btn { display: inline-flex; font-size: 0.8125rem; font-weight: 700; padding: 7px 13px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px rgba(20, 16, 12, 0.16); color: #191918; }
.fake-btn--go { background: var(--acc); color: #fff; box-shadow: none; }

/* Evidence grades: one colour per level, used in steps and tiles */
.g-obs { --g: #0D7A46; --gt: #E8F6EE; }
.g-der { --g: #18A060; --gt: #EEF8F2; }
.g-inf { --g: #946500; --gt: #FDF4DE; }
.g-unk { --g: #6F6A63; --gt: #EFEEEA; }
.grades { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.grades li { font-size: 0.75rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--gt); color: var(--g); }

/* ---------- What you get: tiles (shared bento) ---------- */
.fnd { display: grid; gap: 8px; padding: 14px; border-radius: 12px; box-shadow: 0 0 0 1px var(--line-2); }
.fnd p { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fnd__type { font-size: 0.75rem; color: var(--fg-3); }
.fnd b { font-weight: 700; font-size: 0.9375rem; line-height: 1.35; }
.fnd__acts { margin-top: 2px; }
.evbar { display: flex; gap: 3px; height: 30px; border-radius: 8px; overflow: hidden; }
.evbar span { flex: var(--w) 0 0; background: var(--g); }
.evbar .g-der { background: #5BC08A; }
.evbar .g-unk { background: #8B867F; }
.evkey { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; font-size: 0.8125rem; color: var(--fg-2); }
.evkey li { display: flex; align-items: center; gap: 8px; }
.evkey li::before { content: ""; width: 9px; height: 9px; border-radius: 3px; background: var(--g); flex: none; }
.evkey .g-der::before { background: #5BC08A; }
.evkey .g-unk::before { background: #8B867F; }
.led { display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; box-shadow: 0 0 0 1px var(--line); font-weight: 500; }
.led span { justify-self: start; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 7px; border-radius: 5px; background: var(--gt); color: var(--g); }
.led--gap { box-shadow: 0 0 0 1px var(--line-2); border: 1px dashed transparent; color: var(--fg-3); }
.withheld { justify-self: start; margin-top: 2px; font-size: 0.8125rem; font-weight: 700; color: var(--acc-i); background: var(--acc-t); padding: 5px 11px; border-radius: 999px; }
.unk { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.unk li { padding: 10px 12px; border-radius: 10px; background: var(--wash); font-size: 0.875rem; color: var(--fg-2); line-height: 1.45; border-left: 3px solid #8B867F; }
.unk b { color: var(--fg); font-weight: 700; }

/* ---------- Safe to connect ---------- */
.sec--flush-top { padding-top: 0; }
.trust { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.trust__head .h2 { text-wrap: balance; }
.trust__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.trust__list li { background: #fff; border-radius: 16px; padding: 20px 22px; box-shadow: 0 0 0 1px var(--line); }
.trust__list b { display: block; font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.015em; margin-bottom: 6px; }
.trust__list p { font-size: 0.9375rem; color: var(--fg-2); line-height: 1.5; }

/* ---------- The studio band ---------- */
.pd-studio .head { margin-bottom: 0; }
.pd-studio .cta-row--center { margin-top: 32px; }
.pd-studio + .sec, .pd-how + .sec { }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust { grid-template-columns: 1fr; }
}
@media (max-width: 759px) {
  .steps { grid-template-columns: 1fr; }
  .trust__list { grid-template-columns: 1fr; }
  /* The film runs edge to edge on phones, like the homepage instrument */
  body.v3 .film__card { margin-inline: calc(-1 * var(--gutter)); border-radius: 0; box-shadow: none; padding: 10px var(--gutter) 14px; }
  .film__frame { border-radius: 10px; }
  .film__sound { left: 10px; bottom: 10px; padding: 9px 13px 9px 11px; font-size: 0.8125rem; }
  .film__cap { padding-inline: 0; }
  .panel.trust { padding: 22px 16px; }
}
.bento + .note { margin-top: 28px; }
.grades .g-unk, .led .g-unk { --gt: #E4E1DB; --g: #55524D; }
@media (max-width: 759px) { .step__ui { min-height: 0; } }

/* ---------- Round 2: revenue hero, the pain, the cost of waiting ---------- */
.pd-hero .hero__title { max-width: 20ch; }
.pd-l1 { display: block; }
.pd-hero .hero__sub { max-width: 36ch; }
/* The film sits on white, never against the dark band below */
.pd-pain { padding-top: clamp(80px, 9vw, 128px); }
.pains { list-style: none; margin: 0 auto; padding: 0; max-width: 980px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pains li { position: relative; background: var(--wash); border-radius: 18px; padding: 26px 28px 26px 64px; }
.pains__q { position: absolute; left: 24px; top: 14px; font-size: 3rem; font-weight: 900; line-height: 1; color: var(--acc); }
.pains p { font-size: clamp(1.125rem, 1rem + 0.4vw, 1.375rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; text-wrap: balance; }
.cost {
  max-width: 980px; margin: 14px auto 0; background: #15120E; color: #F4EEE6; border-radius: 18px;
  padding: clamp(24px, 3.5vw, 36px) clamp(24px, 3.5vw, 40px);
  display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap;
}
.cost__t { max-width: 44ch; font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); line-height: 1.45; color: #C9C0B3; }
.cost__t b { color: #F4EEE6; font-weight: 700; }
.cost .btn { flex: none; }
.cost :focus-visible { outline-color: #EE8B5F; }
@media (max-width: 759px) {
  .pd-l1 { display: inline; }
  .pains { grid-template-columns: 1fr; }
  .pains li { padding: 22px 20px 22px 54px; }
  .pains__q { left: 18px; top: 12px; font-size: 2.5rem; }
  .cost { padding: 22px 20px; }
}