/* =============================================================
   Card Priority — product theme.

   Loads on top of /css/house.css (the house system), the way
   card-age.css and sla-alerts.css do, and follows their split:
   a near-neutral grey carries the structure, rose carries the action.

   Rose appears only where something can be clicked, and in the
   small accents (kicker, toolkit icons, the open stage). On the board
   a P1 is red too; kept to buttons the brand colour doesn't compete
   with the badges, which carry Trello's own red, orange, yellow and
   blue. The dark bands are the mark's dark end, a near-black with a
   wine tint, lit by the same rose.

   The rest is what only this page has: the green Free pill and the
   Trello board drawn in markup in the hero.
   ============================================================= */
:root {
  /* ---- action: rose, and only where something happens ---- */
  --primary:       #BE123C;
  --primary-2:     #F43F5E;
  --primary-ink:   #9F1239;
  --grad-brand:    linear-gradient(135deg, #9F1239 0%, #BE123C 50%, #F43F5E 100%);
  --shadow-glow:   0 18px 44px -16px rgba(var(--act-rgb), 0.38);
  --border-active: #F3C6D0;

  /* ---- structure: neutral grey, at rest ---- */
  --page:      #F9F8F8;
  --surface-2: #F2F0F0;
  --border:    #E4E1E2;

  /* The showcase band and the closing CTA: one surface used twice. */
  --band-1: #2B0F17;
  --band-2: #210A11;
  --band-3: #18060B;
  --band-accent: #FDA4AF;
  --band-soft:   #FECDD3;
  --act-rgb:  190, 18, 60;
  --act2-rgb: 244, 63, 94;
  --acc-rgb:  251, 113, 133;
  --band-muted:  #C3A3AB;
}

body::before { background: linear-gradient(180deg, #EDEBEB 0%, #F3F1F1 42%, var(--page) 100%); }
.btn-primary:hover { box-shadow: 0 24px 50px -14px rgba(var(--act-rgb), 0.45); }
.flow-points li svg { background: rgba(var(--act-rgb), 0.12); }

/* The symbol sprite takes no room. */
.sprite { position: absolute; }

/* ---- hero: copy left, the board right (.hero.is-split, house.css) ---- */
.hero h1 em { white-space: nowrap; }
.hero-free {
  font-family: 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: #15803D; background: rgba(22, 163, 74, 0.1); border: 1px solid rgba(22, 163, 74, 0.25);
  padding: 3px 12px; border-radius: var(--r-pill);
}
/* The board is markup, readable at any width, so phones keep it (house.css
   hides .hero-visual below 768px for the products that ship a picture). */
@media (max-width: 767px) {
  .hero-visual { display: block; }
}

/* ---- the board mock ----
   Drawn in markup rather than captured: a handful of Trello cards and
   their priority badges, in Trello's own colours. */
.cp-board {
  background: linear-gradient(160deg, #E8A0B4 0%, #CE6C87 55%, #A83E5C 100%);
  border-radius: 18px; padding: 18px;
  box-shadow: 0 30px 60px -20px rgba(120, 20, 45, 0.4);
  display: flex; flex-direction: column; gap: 14px;
}
.cp-board-bar { display: flex; align-items: center; gap: 8px; }
.cp-board-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255, 255, 255, 0.92); border-radius: 6px; padding: 5px 10px;
  font-size: 12.5px; font-weight: 600; color: #172B4D;
  box-shadow: 0 1px 2px rgba(9, 30, 66, 0.2);
}
.cp-board-btn img { width: 15px; height: 15px; }
.cp-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.cp-list { background: #F1F2F4; border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.cp-list-name { font-size: 13px; font-weight: 600; color: #44546F; padding: 2px 6px; }
/* The sorted list carries its menu, where Sort by priority lives. */
.cp-list-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 2px 6px; }
.cp-list-head .cp-list-name { padding: 0; }
.cp-list-menu { font-size: 11px; font-weight: 600; color: #626F86; }
.cp-card {
  background: #FFFFFF; border-radius: 8px; padding: 8px 10px;
  box-shadow: 0 1px 2px rgba(9, 30, 66, 0.2);
  display: flex; flex-direction: column; gap: 6px;
}
.cp-label { width: 40px; height: 6px; border-radius: 3px; }
.cp-label.is-blue { background: #579DFF; }
.cp-label.is-red { background: #F87168; }
.cp-card-title { font-size: 13px; line-height: 1.4; color: #172B4D; }
.cp-badges { display: flex; gap: 6px; }
.cp-badge { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; padding: 2px 6px; border-radius: 4px; }
.cp-badge.is-p1 { background: #FFD9D0; color: #5D1F1A; }
.cp-badge.is-p2 { background: #FBE1A4; color: #533F04; }
.cp-badge.is-p3 { background: #F7E89D; color: #533F04; }
.cp-badge.is-p4 { background: #CCE0FF; color: #09326C; }
.cp-board-caption { margin-top: 14px; font-size: 13.5px; color: var(--muted); text-align: center; }

/* ---- dark band, same surface as the closing CTA ---- */
.showcase-band {
  background:
    radial-gradient(ellipse 70% 110% at 50% -12%, rgba(var(--act2-rgb), 0.2), transparent 60%),
    radial-gradient(ellipse 45% 90% at 92% 105%, rgba(var(--act-rgb), 0.16), transparent 55%),
    linear-gradient(135deg, var(--band-1) 0%, var(--band-2) 58%, var(--band-3) 100%);
}
.showcase-band .kicker { color: var(--band-accent); }
.showcase-band .section-sub { color: var(--band-muted); }
.showcase-band .flow-n { color: var(--band-muted); }
.showcase-band .flow-item.is-active .flow-n { color: var(--band-accent); }
.showcase-band .flow-step:focus-visible { outline-color: var(--band-accent); }
.showcase-band .flow-item.is-active .flow-step { border-color: rgba(var(--act2-rgb), 0.6); }
.showcase-band .flow-ic { color: var(--band-muted); }
.showcase-band .flow-label { color: #F2E4E7; }
.showcase-band .flow-copy p { color: var(--band-muted); }
.showcase-band .flow-copy em { color: var(--band-soft); }
.showcase-band .flow-points li { color: #F2E4E7; }
.showcase-band .flow-points li svg { background: rgba(var(--act2-rgb), 0.2); color: var(--band-accent); }
.flow-arrow { color: var(--band-muted); }
.flow-arrow:hover { background: rgba(var(--acc-rgb), 0.14); border-color: rgba(var(--acc-rgb), 0.4); }
.flow-arrow:focus-visible { outline: 2px solid var(--band-accent); }
.flow-n { font-variant-numeric: normal; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
@media (min-width: 768px) {
  .showcase-band .flow-label { color: var(--band-muted); }
  .showcase-band .flow-item.is-active .flow-step { border-top-color: var(--primary-2); }
  .flow-n { font-size: 10.5px; }
}
@media (max-width: 767px) {
  .flow-step { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 3px; align-items: center; }
  .flow-ic { grid-row: 1 / 3; }
  .flow-n { grid-column: 2; grid-row: 1; margin-left: 0; }
  .flow-label { grid-column: 2; grid-row: 2; }
}

/* The stage clips: zooms baked in, so each is shown whole at 1852 x 1080. */
.shot { aspect-ratio: auto; border-radius: 14px; box-shadow: 0 44px 90px -34px rgba(0, 0, 0, 0.8), 0 0 110px -26px rgba(244, 63, 94, 0.35); }
.shot video { height: auto; background: #1C2B4A; }

.final-cta { background: linear-gradient(135deg, var(--band-1) 0%, var(--band-2) 58%, var(--band-3) 100%); }
.final-cta::before {
  background:
    radial-gradient(ellipse 70% 110% at 50% -12%, rgba(var(--act2-rgb), 0.22), transparent 60%),
    radial-gradient(ellipse 45% 90% at 92% 105%, rgba(var(--act-rgb), 0.16), transparent 55%);
}

/* ---- toolkit: six rows, three across ---- */
.tk-grid { display: grid; grid-template-columns: 1fr; gap: 2px; list-style: none; }
.tk-row { cursor: default; }
.tk-row:hover { background: none; }
@media (min-width: 620px) { .tk-grid { grid-template-columns: 1fr 1fr; gap: 2px 16px; } }
@media (min-width: 1100px) { .tk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 18px; } }