/* =============================================================
   Checklist Front — 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, indigo carries the action.

   Indigo appears only where something can be clicked, and in the
   small accents (kicker, toolkit icons, the open stage). The badges
   on the board keep Trello's own green and red, so the brand colour
   doesn't compete with them. The dark bands are the mark's dark end,
   a near-black indigo, lit by the same violet.

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

  /* ---- structure: neutral grey, at rest ---- */
  --page:      #F8F8FA;
  --surface-2: #F0F0F4;
  --border:    #E1E1E8;

  /* The showcase band and the closing CTA: one surface used twice. */
  --band-1: #1E1B4B;
  --band-2: #171347;
  --band-3: #100D31;
  --band-accent: #C4B5FD;
  --band-soft:   #DDD6FE;
  --act-rgb:  79, 70, 229;
  --act2-rgb: 167, 139, 250;
  --acc-rgb:  167, 139, 250;
  --band-muted:  #B7B2D6;
}

body::before { background: linear-gradient(180deg, #EBEBF0 0%, #F2F2F5 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) ---- */
/* The headline is long for the split column; balanced lines keep "card."
   from ending up alone on the last one. */
.hero h1 { text-wrap: balance; }

.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
   the badges Checklist Front puts on them, in Trello's own colours. */
.cf-board {
  background: linear-gradient(160deg, #9E97E8 0%, #6C63D6 55%, #443CA8 100%);
  border-radius: 18px; padding: 18px;
  box-shadow: 0 30px 60px -20px rgba(40, 30, 110, 0.45);
  display: flex; flex-direction: column; gap: 14px;
}
.cf-board-bar { display: flex; align-items: center; gap: 8px; }
.cf-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);
}
.cf-board-btn img { width: 15px; height: 15px; }
.cf-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.cf-list { background: #F1F2F4; border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.cf-list-name { font-size: 13px; font-weight: 600; color: #44546F; padding: 2px 6px; }
.cf-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;
}
.cf-label { width: 40px; height: 6px; border-radius: 3px; }
.cf-label.is-blue { background: #579DFF; }
.cf-label.is-red { background: #F87168; }
.cf-card-title { font-size: 13px; line-height: 1.4; color: #172B4D; }
.cf-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.cf-badge { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; padding: 2px 6px; border-radius: 4px; color: #44546F; }
.cf-badge.is-done { background: #BAF3DB; color: #216E4E; }
.cf-badge.is-overdue { background: #FFD5D2; color: #AE2E24; }
.cf-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.22), transparent 60%),
    radial-gradient(ellipse 45% 90% at 92% 105%, rgba(var(--act-rgb), 0.2), 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: #E4E1F5; }
.showcase-band .flow-copy p { color: var(--band-muted); }
.showcase-band .flow-copy em { color: var(--band-soft); }
.showcase-band .flow-points li { color: #E4E1F5; }
.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(124, 58, 237, 0.35); }
.shot video { height: auto; background: #1E1B4B; }

.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.24), transparent 60%),
    radial-gradient(ellipse 45% 90% at 92% 105%, rgba(var(--act-rgb), 0.2), 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; } }