/* GateDay website: the product-page template (Vendas e inscrições, Credenciamento, Portaria, Painel e API).
   Builds on site.css (tokens, type, buttons, .b-proof, .b-q, .b-cta, door phone). Every selector is prefixed .pp-.
   Page order: hero → facts row → 3–4 feature sections → how it works → questions → related → CTA band. */

.pp { --pp-plate-h: 520px; --pp-scr-x: 48px; --pp-scr-y: 48px; }

/* ---------- eyebrow with the sun mark (the logo's half-sun, Sol as a fill) ---------- */
.pp-eyebrow { display: inline-flex; align-items: center; gap: 10px; }
.pp-sun { width: 16px; height: 8px; flex: none; display: block; }
.pp-sun path { fill: var(--sol); }
.pp-sun .pp-sun-arch { fill: none; stroke: var(--site-ink); stroke-width: 1.4; }

/* ---------- hero ---------- */
.pp-hero { position: relative; padding-block: 72px 88px; overflow: hidden; }
.pp-hero::before { display: none; content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 420px; background: radial-gradient(45% 70% at 72% 100%, rgba(255,190,26,.12), transparent 72%); pointer-events: none; }
.pp-hero-in { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.pp-hero-copy { display: grid; gap: 24px; align-content: center; justify-items: start; }
.pp-hero-copy .t-display { font-size: 56px; line-height: 62px; }
.pp-hero-copy .t-lede { max-width: 480px; }
.pp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 8px; }
.pp-quiet { display: inline-flex; align-items: center; gap: 8px; font: 500 16px/24px var(--f-sans); color: var(--site-ink); text-decoration: none; height: 48px; }
.pp-quiet svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s var(--ease); }
.pp-quiet:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.pp-quiet:hover svg { transform: translateY(2px); }
.pp-hero .pp-plate { --pp-plate-h: 580px; margin-right: calc(-1 * var(--gutter)); border-radius: var(--r-lg) 0 0 var(--r-lg); }
.pp-hero .pp-plate::after { background: linear-gradient(to right, transparent 84%, var(--site-bg) 100%), linear-gradient(to bottom, transparent 82%, var(--site-bg) 100%); }

/* ---------- plates: a light well, cropped screens whose far edges fade to white ---------- */
.pp-plate { position: relative; height: var(--pp-plate-h); border-radius: var(--r-lg); background-color: var(--site-panel); overflow: hidden; isolation: isolate; min-width: 0; }
.pp-plate.is-dots { background-image: radial-gradient(rgba(14,26,58,.08) 1px, transparent 1.2px); background-size: 22px 22px; }
.pp-plate::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5; background: linear-gradient(to right, transparent 86%, var(--site-bg) 100%), linear-gradient(to bottom, transparent 84%, var(--site-bg) 100%); }
.pp-plate.is-left::after { background: linear-gradient(to bottom, transparent 82%, var(--site-bg) 100%); }
.pp-plate > .exemplo { position: absolute; right: 20px; top: 16px; z-index: 6; }
.pp-plate.is-left > .exemplo { right: auto; left: 20px; }
.pp-cap { position: absolute; left: 24px; bottom: 18px; z-index: 6; font: 400 11px/16px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--site-ink-3); }
.pp-scr { position: absolute; left: var(--pp-scr-x); top: var(--pp-scr-y); width: var(--pp-scr-w, 600px); background: var(--site-bg); border: 1px solid var(--site-line); border-radius: 12px; overflow: hidden; color: var(--site-ink); box-shadow: 0 1px 2px rgba(14,26,58,.04), 0 12px 32px -16px rgba(14,26,58,.18); }
.pp-plate.is-left .pp-scr { left: auto; right: var(--pp-scr-x); }
.pp-stage { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.pp-float { position: absolute; z-index: 6; background: var(--site-bg); border: 1px solid var(--site-line); border-radius: 12px; color: var(--site-ink); box-shadow: var(--sh-lg); overflow: hidden; }

/* app bar inside a screen crop (no device chrome) */
.pp-bar { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px; border-bottom: 1px solid var(--site-line); font: 400 12px/16px var(--f-mono); letter-spacing: .04em; color: var(--site-ink-3); white-space: nowrap; }
.pp-bar b { font: 600 13px/18px var(--f-sans); letter-spacing: 0; color: var(--site-ink); }
.pp-bar .pp-mark { width: 18px; height: 18px; flex: none; }
.pp-bar .pp-sp { margin-left: auto; }
.pp-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px var(--success-wash); display: inline-block; flex: none; }
.pp-dot.is-warn { background: var(--warning); box-shadow: 0 0 0 3px var(--warning-wash); }

/* small UI atoms used inside plates */
.pp-h { font: 600 15px/22px var(--f-sans); margin: 0; }
.pp-sub { font: 400 12px/16px var(--f-sans); color: var(--site-ink-3); }
.pp-mono { font: 400 12px/16px var(--f-mono); letter-spacing: .04em; color: var(--site-ink-3); }
.pp-pill { display: inline-flex; align-items: center; gap: 6px; font: 500 11px/16px var(--f-sans); padding: 2px 8px; border-radius: 999px; background: var(--site-panel); color: var(--site-ink-2); white-space: nowrap; }
.pp-pill.ok { background: var(--success-wash); color: var(--success); }
.pp-pill.warn { background: var(--warning-wash); color: var(--warning); }
.pp-pill.ink { background: var(--site-ink); color: #fff; }
.pp-pill.sol { background: var(--sol-wash); color: var(--site-ink); }
.pp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 8px; background: var(--site-ink); color: #fff; font: 500 13px/20px var(--f-sans); white-space: nowrap; }
.pp-btn.is-line { background: var(--site-bg); color: var(--site-ink); border: 1px solid var(--site-line-strong); }
.pp-btn.is-org { background: var(--org-1); }
.pp-tog { width: 30px; height: 18px; border-radius: 999px; background: var(--site-line-strong); position: relative; flex: none; display: inline-block; }
.pp-tog::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: left .2s var(--ease); }
.pp-tog.on { background: var(--site-ink); }
.pp-tog.on::after { left: 14px; }
.pp-field { display: grid; gap: 6px; }
.pp-field > span { font: 500 12px/16px var(--f-sans); color: var(--site-ink-2); }
.pp-field > i { font-style: normal; display: flex; align-items: center; gap: 8px; height: 38px; border: 1px solid var(--site-control); border-radius: 8px; padding: 0 12px; font: 400 14px/20px var(--f-sans); color: var(--site-ink); white-space: nowrap; overflow: hidden; }
.pp-field > i.ph { color: var(--site-ink-3); }
.pp-field > i svg { width: 15px; height: 15px; fill: none; stroke: var(--site-ink-3); stroke-width: 1.8; stroke-linecap: round; flex: none; }
.pp-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--site-line); font: 500 14px/20px var(--f-sans); }
.pp-row small { display: block; font: 400 12px/16px var(--f-sans); color: var(--site-ink-3); }
.pp-row.sel { background: var(--site-panel); box-shadow: inset 2px 0 0 var(--site-ink); }
.pp-qr { display: block; width: 56px; height: 56px; }
.pp-kbd { display: inline-block; font: 400 11px/16px var(--f-mono); padding: 1px 6px; border: 1px solid var(--site-line-strong); border-bottom-width: 2px; border-radius: 5px; color: var(--site-ink-2); background: var(--site-bg); }
.pp-check { width: 16px; height: 16px; border-radius: 4px; background: var(--site-ink); flex: none; display: inline-grid; place-items: center; }
.pp-check svg { width: 11px; height: 11px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pp-check.is-off { background: var(--site-bg); border: 1px solid var(--site-control); }
.pp-check.is-off svg { display: none; }
.pp-code { background: var(--stage); color: var(--stage-ink); border-radius: 12px; font: 400 13px/21px var(--f-mono); padding: 16px 18px; white-space: pre; overflow: hidden; }
.pp-code .m { color: var(--sol); }
.pp-code .c { color: var(--stage-ink-3); }
.pp-code .s { color: #9FD8C4; }
.pp-code .k { color: var(--stage-ink-2); }

/* tabs used by interactive plates (real buttons) */
.pp-tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--site-panel); border: 1px solid var(--site-line); }
.pp-tab { height: 34px; padding: 0 14px; border: 0; border-radius: 7px; background: none; font: 500 14px/20px var(--f-sans); color: var(--site-ink-2); cursor: pointer; white-space: nowrap; }
.pp-tab:hover { color: var(--site-ink); }
.pp-tab[aria-selected="true"], .pp-tab[aria-pressed="true"] { background: var(--site-bg); color: var(--site-ink); box-shadow: 0 1px 2px rgba(14,26,58,.08), 0 0 0 1px var(--site-line); }

/* ---------- facts row (uses .b-proof from site.css) ---------- */
.pp-facts .b-proof { border-top: 0; }
.pp-facts .b-proof li b { display: block; margin-bottom: 2px; }

/* ---------- feature sections ---------- */
.pp-sec { padding-block: var(--section-space); border-top: 1px solid var(--site-line); }
.pp-feats .pp-sec:first-child { border-top: 0; }
.pp-feat { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: center; }
.pp-feat.is-flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.pp-feat.is-flip .pp-feat-copy { order: 2; }
.pp-feat-copy { display: grid; gap: 20px; align-content: start; min-width: 0; }
.pp-num { font: 400 12px/16px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--site-ink-3); display: flex; align-items: center; gap: 12px; }
.pp-num::after { content: ""; height: 1px; width: 40px; background: var(--site-line-strong); }
.pp-feat .t-h2 { font-size: 40px; line-height: 46px; }
.pp-feat .t-h2 .tone-2 { color: var(--site-ink-2); }
.pp-feat-copy > p { margin: 0; color: var(--site-ink-2); max-width: 470px; }
.pp-list { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--site-line); max-width: 470px; }
.pp-list li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--site-line); font: 400 15px/22px var(--f-sans); color: var(--site-ink-2); }
.pp-list li b { color: var(--site-ink); font-weight: 600; }
.pp-list svg { width: 18px; height: 18px; fill: none; stroke: var(--site-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; margin-top: 2px; }
.pp-feat-ctl { margin-top: 4px; }

/* ---------- how it works ---------- */
.pp-how { background: var(--site-panel); }
.pp-how .b-head { margin-bottom: 56px; }
.pp-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--pp-steps, 4), minmax(0, 1fr)); gap: 0; counter-reset: pp; }
.pp-step { position: relative; padding: 28px 28px 0 0; min-width: 0; }
.pp-step::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--site-line-strong); }
.pp-step-n { position: relative; display: grid; place-items: center; width: 36px; height: 36px; margin-top: -46px; margin-bottom: 22px; border-radius: 50%; background: var(--site-bg); border: 1px solid var(--site-line-strong); font: 400 12px/16px var(--f-mono); letter-spacing: .04em; color: var(--site-ink); }
.pp-step:first-child .pp-step-n { background: var(--site-ink); border-color: var(--site-ink); color: #fff; }
.pp-step h3 { margin: 0 0 8px; }
.pp-step p { margin: 0; max-width: 260px; }

/* ---------- questions (uses .b-q from site.css) ---------- */
.pp-faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 64px; }
.pp-faq-grid > div:first-child { display: grid; gap: 16px; align-content: start; }
.pp-faq-grid .b-q:first-of-type { border-top: 1px solid var(--site-line-strong); }

/* ---------- related products ---------- */
.pp-rel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.pp-card { display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px; border: 1px solid var(--site-line); border-radius: var(--r-lg); padding: 0 0 24px; text-decoration: none; color: var(--site-ink); overflow: hidden; min-width: 0; transition: border-color .15s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease); }
.pp-card:hover { border-color: var(--site-line-strong); box-shadow: 0 12px 32px -18px rgba(14,26,58,.28); transform: translateY(-2px); }
.pp-card > .t-eyebrow, .pp-card > .t-card-title, .pp-card > .t-card, .pp-card > .pp-go { margin-inline: 24px; }
.pp-card > .t-eyebrow { margin-top: 8px; }
.pp-go { display: inline-flex; align-items: center; gap: 8px; font: 500 15px/22px var(--f-sans); margin-top: 6px; }
.pp-go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s var(--ease); }
.pp-card:hover .pp-go svg { transform: translateX(3px); }
.pp-card:hover .pp-go span { text-decoration: underline; text-underline-offset: 3px; }

/* card minis: one crafted fragment per product */
.pp-mini { position: relative; height: 150px; background: var(--site-panel); border-bottom: 1px solid var(--site-line); overflow: hidden; }
.pp-mini::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40px; background: linear-gradient(to bottom, transparent, var(--site-panel)); }
.pp-mini-in { position: absolute; left: 24px; right: 24px; top: 22px; background: var(--site-bg); border: 1px solid var(--site-line); border-radius: 10px; overflow: hidden; }
/* vendas: event band + ticket types */
.pp-mini-ev { background: var(--org-1); color: #fff; padding: 10px 14px; font: 600 13px/18px var(--f-sans); }
.pp-mini-ev small { display: block; font: 400 10px/14px var(--f-mono); letter-spacing: .06em; opacity: .8; }
.pp-mini-tt { display: flex; justify-content: space-between; padding: 9px 14px; border-top: 1px solid var(--site-line); font: 500 12px/16px var(--f-sans); }
.pp-mini-tt .pp-pill { font-size: 10px; line-height: 14px; }
/* credenciamento: a badge */
.pp-mini-badge { left: 50%; right: auto; width: 150px; transform: translateX(-50%) rotate(-2deg); top: 18px; }
.pp-mini-badge .t { background: var(--org-2); color: #fff; padding: 7px 10px; font: 600 10px/14px var(--f-sans); }
.pp-mini-badge .n { padding: 10px 10px 2px; font: 600 17px/20px var(--f-display); letter-spacing: -.01em; }
.pp-mini-badge .c { padding: 0 10px 8px; font: 400 10px/14px var(--f-sans); color: var(--site-ink-2); display: flex; justify-content: space-between; align-items: end; }
.pp-mini-badge .pp-qr { width: 30px; height: 30px; }
/* portaria: door verdict */
.pp-mini-door { left: 50%; right: auto; width: 168px; transform: translateX(-50%); top: 18px; border: 1.5px solid var(--site-ink); border-radius: 26px 26px 0 0; padding: 6px 6px 0; border-bottom: 0; }
.pp-mini-door .d { background: var(--door-ok); color: var(--door-ok-ink); border-radius: 20px 20px 0 0; padding: 14px 14px 30px; }
.pp-mini-door .d svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; display: block; margin-bottom: 6px; }
.pp-mini-door .d b { display: block; font: 600 20px/24px var(--f-display); }
.pp-mini-door .d span { font: 400 11px/14px var(--f-sans); }
/* painel: bars */
.pp-mini-dash { padding: 12px 14px; }
.pp-mini-dash small { display: block; font: 400 11px/14px var(--f-sans); color: var(--site-ink-3); }
.pp-mini-dash b { font: 600 22px/26px var(--f-display); letter-spacing: -.02em; }
.pp-mini-bars { display: flex; align-items: flex-end; gap: 5px; height: 48px; margin-top: 8px; border-bottom: 1px solid var(--site-line-strong); }
.pp-mini-bars i { flex: 1; background: var(--chart-bar); border-top: 2px solid var(--site-ink); border-radius: 2px 2px 0 0; }

/* ---------- closing CTA: .b-cta with a faint dawn at its foot ---------- */
.pp-cta.b-cta { position: relative; overflow: hidden; }
.pp-cta.b-cta::before { content: ""; position: absolute; inset: auto 0 0 0; height: 260px; background: var(--site-dawn); pointer-events: none; }
.pp-cta .b-cta-in { position: relative; }
.pp-cta .b-cta-act .link { white-space: nowrap; }

/* ---------- tablet ---------- */
@container site (max-width: 1023px) {
  .pp-hero { padding-block: 48px 72px; }
  .pp-hero-in { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .pp-hero-copy .t-display { font-size: 52px; line-height: 56px; }
  .pp-hero .pp-plate { --pp-plate-h: 520px; }
  .pp-feat, .pp-feat.is-flip { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .pp-feat.is-flip .pp-feat-copy { order: 0; }
  .pp-feat-copy > p, .pp-list { max-width: 640px; }
  .pp-plate.is-left .pp-scr { left: var(--pp-scr-x); right: auto; }
  .pp-plate.is-left::after { background: linear-gradient(to right, transparent 80%, var(--site-bg) 100%), linear-gradient(to bottom, transparent 82%, var(--site-bg) 100%); }
  .pp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 56px; }
  .pp-faq-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .pp-rel { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .pp-card { grid-template-columns: 240px minmax(0, 1fr); grid-template-rows: auto auto 1fr; padding: 0; column-gap: 0; }
  .pp-card .pp-mini { grid-row: 1 / span 4; height: auto; min-height: 170px; border-bottom: 0; border-right: 1px solid var(--site-line); }
  .pp-card > .t-eyebrow { margin-top: 24px; }
  .pp-card > .pp-go { margin-bottom: 24px; }
}

/* ---------- phone ---------- */
@container site (max-width: 719px) {
  .pp { --pp-scr-x: 16px; --pp-scr-y: 40px; }
  /* Phone: the scene is laid out on a stage 1/s the plate's size and scaled by s (set per plate by the page
     script), so screens show their labels instead of being cut; the edge fade moves into the stage so floating cards stay above it. */
  .pp-stage { width: calc(100% / var(--pp-s, 1)); height: calc(100% / var(--pp-s, 1)); transform: scale(var(--pp-s, 1)); transform-origin: 0 0; }
  .pp-plate::after { display: none; }
  .pp-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5; background: linear-gradient(to right, transparent 88%, var(--site-bg) 100%), linear-gradient(to bottom, transparent 86%, var(--site-bg) 100%); }
  .pp-hero { padding-block: 32px 56px; }
  .pp-hero-copy { gap: 18px; }
  .pp-hero-copy .t-display { font-size: 38px; line-height: 42px; }
  .pp-actions { width: 100%; gap: 4px; }
  .pp-actions .btn { width: 100%; }
  .pp-actions .pp-quiet { width: 100%; justify-content: center; }
  .pp-hero .pp-plate { --pp-plate-h: 420px; margin-right: calc(-1 * var(--gutter)); }
  .pp-plate { --pp-plate-h: 400px; }
  .pp-plate > .exemplo { right: 14px; top: 12px; }
  .pp-plate.is-left > .exemplo { left: auto; right: 14px; }
  .pp-cap { left: 16px; }
  .pp-feat .t-h2 { font-size: 30px; line-height: 36px; }
  .pp-feat, .pp-feat.is-flip { gap: 32px; }
  .pp-list li { font-size: 15px; }
  .pp-how .b-head { margin-bottom: 40px; }
  .pp-steps { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .pp-step { padding: 0 0 28px 56px; }
  .pp-step::before { left: 17px; right: auto; top: 36px; bottom: 0; width: 1px; height: auto; }
  .pp-step:last-child::before { display: none; }
  .pp-step-n { position: absolute; left: 0; top: 0; margin: 0; }
  .pp-step h3 { padding-top: 4px; }
  .pp-card { grid-template-columns: minmax(0, 1fr); padding-bottom: 22px; }
  .pp-card .pp-mini { grid-row: auto; min-height: 0; height: 132px; border-right: 0; border-bottom: 1px solid var(--site-line); }
  .pp-card > .t-eyebrow { margin-top: 8px; }
  .pp-card > .pp-go { margin-bottom: 0; }
  .pp-card > .t-eyebrow, .pp-card > .t-card-title, .pp-card > .t-card, .pp-card > .pp-go { margin-inline: 20px; }
  .pp-tabs { display: flex; width: 100%; }
  .pp-tab { flex: 1; padding: 0 8px; }
}