/* The product page template (template-parts/product.php, template-parts/product-finale.php; loaded by
   gs_product_assets() in inc/product.php, after the kit): only what is the template's own. Every section is a k- part
   of the landing kit (kit.css) and every picture the shared demo (demo.css); nothing here restyles either one, it only
   sizes the demo where the template puts it. The template's output sits in div.pp, the scope of every rule here; the
   finale's are scoped to its own section.pp-fin. Nothing moves but the finale card's ticks, drawn in once
   (inc/product.php gs_product_card_script()). */

/* the page starts under the nav with the hero's own padding, as every page bundle does */
main.pg:has(>.pp){padding-top:0}
/* an anchor lands clear of the sticky nav: a block's id, its extra anchors (at the block's top edge), the FAQ's, and a
   bundle's own finale after the template (Creator's checklist) */
.pp [id],main.pg:has(>.pp)>section[id]{scroll-margin-top:calc(var(--nav-h) + 16px)}
.pp .pp-anchor{position:absolute;top:0;left:0;width:1px;height:1px}
/* a fine line of one or two lines splits evenly instead of leaving a word on its last line; the hero's dek too, at
   every width, so its lines read as one even block under the balanced H1 (the agency page keeps the kit's own rag) */
.pp .k-blk-txt .k-fine,.pp .k-hero-dek{text-wrap:balance}

/* the plan in the run block: wider than the demo's own 400, so its rows read at 14 px (demo.css steps the plan's type
   up from 460 px of card) */
.pp .pp-run-pic .gsd.gsd-v-plan{max-width:480px}
/* Creator's stills fill the stage as every other piece's do (601 px at 1440), not their 560 px column */
.pp .k-pic>.gsd.gsd-v-creator{max-width:none}

/* the shared finale (template-parts/product-finale.php): without a card the motto closes the night under the calls */
.pp-fin>.k-motto{margin-top:72px}
/* a still of the demo on the night in place of the card (finale.still: the segment pages' plan, nothing lit), centred,
   as wide as the run block's plan, with the card's room under it before the motto */
.pp-fin-still .k-finale-art .gsd{max-width:480px;margin:0 auto 60px}
@media (max-width:760px){
  .pp-fin>.k-motto{margin-top:52px}
  .pp-fin-still .k-finale-art .gsd{margin-bottom:44px}
}

/* ---- the finale's card: one small card on the night (finale.card, inc/product.php gs_product_card()) ---------------
   The look of Creator's checklist (theme/pages/ai-sales-assistant/parts/finale.css), shared: the kit's .k-navy-card,
   a title with its Sample chip over a hairline, then the rows, a label on the left and its state on the right, a
   value between them in a column of its own when any row has one (.pp-card-vals: the rows share one grid, so the
   values and the states line up as a table), and an optional foot line. The night is the same in both themes, so the
   colours are the kit's fixed navy tokens; a tick wears --ok's dark value and an open row the board's amber.
   A state is drawn by its kind: done the tick in its soft disc, wait the hollow amber ring with the row lit, on the
   solid green dot in its disc, note the words alone, muted. The one motion: the script arms the ticks only while the
   card is below the fold, then draws them once, together, in 600 ms. */
.pp-card{--pp-ok:#2CC283;--pp-line:#1D2147;--pp-ink:#F4F1E6;max-width:560px;margin:0 auto 60px;padding:18px 24px 6px}
.pp-card figcaption{display:flex;align-items:center;gap:12px;padding:2px 0 16px;border-bottom:1px solid var(--k-navy-line)}
.pp-card-ttl{min-width:0;font:600 16px/1.25 var(--sans);color:#FFFFFF}
.pp-card figcaption .k-sample{margin-left:auto}
.pp-card-rows{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:20px;margin:0;padding:0;list-style:none}
.pp-card-vals .pp-card-rows{grid-template-columns:minmax(0,1fr) auto auto}
.pp-card-rows li{display:grid;grid-column:1/-1;grid-template-columns:subgrid;align-items:center;min-height:56px;margin:0;padding:10px 0;border-bottom:1px solid var(--pp-line)}
.pp-card-rows li:last-child{border-bottom:0}
.pp-card-l{min-width:0;font:500 16.5px/1.3 var(--sans);color:var(--k-on-navy);text-wrap:pretty}
.pp-card-v{justify-self:end;font:500 16.5px/1.3 var(--sans);font-variant-numeric:tabular-nums;color:#FFFFFF;text-align:right;white-space:nowrap}
.pp-card-s{display:inline-flex;align-items:center;gap:10px;justify-self:start;font:500 13.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--pp-ink);white-space:nowrap}
.pp-card-tick{display:block;flex:none;width:22px;height:22px;padding:3px;border-radius:50%;background:color-mix(in srgb,var(--pp-ok) 16%,transparent)}
.pp-card-tick path{fill:none;stroke:var(--pp-ok);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.pp-card-ring{display:block;flex:none;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--k-amber)}
.pp-card-dot{display:block;flex:none;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle,var(--pp-ok) 0 4.5px,transparent 5px),color-mix(in srgb,var(--pp-ok) 16%,transparent)}
/* a switch turned on (a play that is On), the board's green; a muted dash for a note, so every state starts at the
   same place */
.pp-card-sw{position:relative;display:block;flex:none;width:30px;height:18px;border-radius:999px;background:color-mix(in srgb,var(--pp-ok) 72%,transparent)}
.pp-card-sw::after{content:"";position:absolute;top:2px;right:2px;width:14px;height:14px;border-radius:50%;background:#FFFFFF}
.pp-card-mute{position:relative;display:block;flex:none;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--pp-line)}
.pp-card-mute::after{content:"";position:absolute;top:10px;left:7px;width:8px;height:2px;border-radius:1px;background:var(--k-navy-mute)}
/* the path (finale.card.path): the steps as nodes on one line, each its count over its name, a rate under the count;
   the line runs behind them from the first to the last */
.pp-card-path{position:relative;display:grid;grid-template-columns:repeat(var(--pp-n,3),minmax(0,1fr));gap:12px;margin:0;padding:22px 0 20px;list-style:none}
.pp-card-path::before{content:"";position:absolute;top:44px;left:calc(50% / var(--pp-n,3));right:calc(50% / var(--pp-n,3));height:2px;background:linear-gradient(90deg,color-mix(in srgb,var(--pp-ok) 55%,transparent),color-mix(in srgb,var(--pp-ok) 25%,transparent))}
.pp-card-path li{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;margin:0;text-align:center}
.pp-card-path b{display:grid;place-items:center;min-width:46px;height:46px;padding:0 10px;border-radius:14px;background:#151937;box-shadow:inset 0 0 0 1px var(--k-navy-line);font:600 18px/1 var(--sans);font-variant-numeric:tabular-nums;color:#FFFFFF}
.pp-card-path li:last-child b{box-shadow:inset 0 0 0 1.5px var(--pp-ok)}
.pp-card-path span{font:500 14px/1.3 var(--sans);color:var(--k-on-navy);text-wrap:balance}
.pp-card-path small{font:500 12.5px/1 var(--mono);letter-spacing:.06em;color:var(--pp-ok)}
.pp-card-haspath .pp-card-rows{border-top:1px solid var(--pp-line)}
.pp-card-wait .pp-card-l{color:#FFFFFF;font-weight:600}
.pp-card-wait .pp-card-s{color:var(--k-amber)}
.pp-card-note .pp-card-s{color:var(--k-navy-mute)}
.pp-card-foot{margin:0;padding:14px 0 12px;border-top:1px solid var(--k-navy-line);font:400 14.5px/1.5 var(--sans);color:var(--k-navy-mute);text-wrap:pretty}
.pp-card-arm .pp-card-tick path{stroke-dasharray:1;stroke-dashoffset:1}
.pp-card-arm.pp-card-drawn .pp-card-tick path{stroke-dashoffset:0;transition:stroke-dashoffset .6s cubic-bezier(.3,.7,.2,1)}

@media (max-width:760px){
  .pp-card{margin-bottom:44px;padding:16px 16px 4px}
  .pp-card-ttl{font-size:15px}
  .pp-card-rows{column-gap:14px}
  .pp-card-rows li{min-height:52px}
  .pp-card-l,.pp-card-v{font-size:15.5px}
  .pp-card-s{font-size:12.5px;letter-spacing:.06em}
  .pp-card-foot{font-size:14px}
  .pp-card-path{gap:6px;padding:18px 0 16px}
  .pp-card-path::before{top:38px}
  .pp-card-path b{min-width:40px;height:40px;padding:0 8px;border-radius:12px;font-size:16px}
  .pp-card-path span{font-size:12.5px}
  .pp-card-path small{font-size:11.5px}
}
/* on a phone a row with a value puts it under its label, muted, so the label keeps the width and the state its column */
@media (max-width:560px){
  .pp-card-vals .pp-card-rows{grid-template-columns:minmax(0,1fr) auto}
  .pp-card-vals .pp-card-rows li{grid-template-columns:subgrid;row-gap:3px}
  .pp-card-vals .pp-card-l{grid-column:1;grid-row:1}
  .pp-card-vals .pp-card-v{grid-column:1;grid-row:2;justify-self:start;font-size:14.5px;color:var(--k-navy-eye);text-align:left;white-space:normal}
  .pp-card-vals .pp-card-v:empty{display:none}
  .pp-card-vals .pp-card-s{grid-column:2;grid-row:1/span 2}
}