/* =============================================================
   Label Sync — product theme.

   Loads on top of /css/house.css, the house design system, the same
   way time-tracking.css does. On the blog it
   loads after /css/blog.css as well. Type, header,
   buttons, cards, radii, spacing and section rhythm all come from
   there. This file sets the accent, repaints the colours the system
   writes as literals, and adds the one component only this product
   has: the recording whose step list follows the video's clock.
   ============================================================= */

/* Green, from the power-up's own icon: a forest-green tile with
   emerald label strips on it.

   The icon's emerald (#059669) was the accent of the old page, and it
   sits too close to Time Tracking's petrol (#0F766E): nearly the same
   lightness and fourteen degrees of hue apart, so the two product
   pages would read as one colour. The action colour here moves the other
   way, to a plain green (#15803D), which stays clearly green next to
   the petrol and still belongs with the icon. The forest green of the
   icon's tile becomes the dark band and the closing CTA, which is what
   tells this page from its siblings at a glance: Email Inbox is navy
   there and Time Tracking is graphite. */

:root {
  /* ---- action ---- */
  --primary:       #15803D;
  --primary-2:     #22C55E;
  --primary-ink:   #14532D;
  --grad-brand:    linear-gradient(135deg, #166534 0%, #15803D 50%, #22C55E 100%);
  --shadow-glow:   0 18px 44px -16px rgba(21, 128, 61, 0.40);
  --border-active: #A9D6B7;

  /* ---- structure: near-neutral grey at rest, as on the other product
     pages; green is kept for what can be clicked and the dark band ---- */
  --page:          #F7F8F8;
  --surface-2:     #EEF1F0;
  --border:        #DCE2DF;

  /* The dark band and the closing CTA are one surface used twice. */
  --band-1: #123524;
  --band-2: #0B2A1A;
  --band-3: #071D11;
  --band-accent: #86EFAC;
  --band-muted:  #9DB5A6;
}

/* =============================================================
   OVERRIDES — colours written literally into house.css and
   blog.css that no token reaches. Found by scanning both files for
   their blue literals, as time-tracking.css did.
   ============================================================= */

/* the wash behind the hero: grey, like the other product pages */
body::before { background: linear-gradient(180deg, #E6EAE8 0%, #EFF2F1 42%, var(--page) 100%); }

.header-sticky { background: rgba(245, 247, 246, 0.84); }
.btn-primary:hover { box-shadow: 0 24px 50px -14px rgba(21, 128, 61, 0.48); }

/* ---- the dark band ---- */
.showcase-band {
  background:
    radial-gradient(ellipse 70% 110% at 50% -12%, rgba(34, 197, 94, 0.20), transparent 60%),
    radial-gradient(ellipse 45% 90% at 92% 105%, rgba(5, 150, 105, 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); }

.shot {
  /* The recording's own frame, 1600 × 794, so nothing is cropped. */
  aspect-ratio: 1600 / 794;
  box-shadow: 0 44px 90px -34px rgba(0, 0, 0, 0.8), 0 0 110px -26px rgba(34, 197, 94, 0.30);
}

/* ---- pricing ---- */
.pricing { background: linear-gradient(180deg, #EEF1F0 0%, #E4E9E7 100%); }
.price-panel { border-color: #D3DBD7; }
.price-includes li svg { background: rgba(21, 128, 61, 0.12); }
/* The system paints this label in --mint, the colour of a tick. On a
   green page that makes it look like a second tick, so it takes the
   ink instead. */
.price-badge { color: var(--primary-ink); }
/* Five short lines, where Email Inbox has nine long ones. Split into the
   system's two columns they each broke over two lines and left a gap
   under the fifth; in one column each stays on its own line. */
@media (min-width: 768px) {
  .price-panel { max-width: 840px; }
  .price-includes { grid-template-columns: 1fr; align-content: center; }
}

/* ---- final CTA ---- */
.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(34, 197, 94, 0.22), transparent 60%),
    radial-gradient(ellipse 45% 90% at 92% 105%, rgba(5, 150, 105, 0.16), transparent 55%);
}

/* ---- blog: the in-article CTA panel (blog.css) ---- */
.article-cta {
  background: linear-gradient(135deg, var(--band-2) 0%, #14532D 100%);
  color: #D7EBDF;
}
.article-cta p { color: #BCD9C9; }
.article-cta .fine { color: #9DC4B0; }

/* Five posts, where blog.css is laid out for Email Inbox's ten: one wide
   card and then three across left the fifth alone on its own row. Two
   across puts the four under the wide one in two even rows. */
@media (min-width: 1280px) {
  .post-grid { grid-template-columns: repeat(2, 1fr); }
  .post-card.featured { grid-column: span 2; }
}

/* =============================================================
   Hero — copy left, a picture of the labels right.

   The same two columns as Time Tracking, with the same reasoning:
   the picture is one drawn composition, not a collage that needs the
   full width. Below 768px the system hides .hero-visual, and that
   stands here too: at phone width the label names in it are too
   small to read.
   ============================================================= */
.hero-copy { align-items: flex-start; text-align: left; }
.hero-cta,
.hero-trust { justify-content: flex-start; }
/* At tablet widths the column broke "in / sync" across two lines, which
   also split its gradient in two. */
.hero h1 em { white-space: nowrap; }

@media (min-width: 1000px) {
  .hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    align-items: center;
    gap: 48px;
  }
  .hero h1 { font-size: 48px; max-width: 100%; }
  .hero-sub { max-width: 46ch; }
  .hero-visual { max-width: none; width: 100%; margin-top: 0; }
}
@media (min-width: 1280px) {
  .hero h1 { font-size: 52px; }
}

/* =============================================================
   How it works — one recording, and a step list that reads its clock.

   The system's showcase is a tablist over several clips. This product
   has one sixteen-second take, so the steps are chapters of it rather
   than tabs: pressing one seeks the video, and the list follows the
   video as it plays. label-sync.js does that. It sits on the same dark
   band and in the same frame as the other products' clips.
   ============================================================= */
.how { display: grid; gap: 24px; }
.how-side { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; min-width: 0; }

.how-rail { display: flex; flex-direction: column; gap: 8px; width: 100%; list-style: none; }
.how-step {
  display: flex; gap: 14px; align-items: flex-start;
  width: 100%; text-align: left; font: inherit; color: inherit;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 16px;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.how-step:hover { border-color: rgba(255, 255, 255, 0.24); }
.how-step[aria-current="true"] { background: rgba(255, 255, 255, 0.07); border-color: rgba(134, 239, 172, 0.50); }
.how-step:focus-visible { outline: 2px solid var(--band-accent); outline-offset: 3px; }

.how-n {
  flex: none;
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 700;
  background: rgba(255, 255, 255, 0.08);
  color: var(--band-muted);
  transition: background 0.25s ease, color 0.25s ease;
}
.how-step[aria-current="true"] .how-n { background: var(--grad-brand); color: #fff; }

.how-t { font-size: 14.5px; line-height: 1.55; color: var(--band-muted); }
.how-t strong {
  display: block;
  margin-bottom: 4px;
  font-family: 'Space Grotesk', sans-serif; font-size: 17px; font-weight: 600; line-height: 1.3;
  color: #D5E4DA;
}
.how-step[aria-current="true"] .how-t strong { color: #FFFFFF; }

.how-again {
  padding: 8px 16px;
  font-family: 'Space Grotesk', sans-serif; font-size: 13.5px; font-weight: 600;
  color: #D5E4DA;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--r-pill);
  cursor: pointer;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease, background 0.16s ease, border-color 0.16s ease;
}
.how-again.is-ready { opacity: 1; pointer-events: auto; }
.how-again:hover { background: rgba(34, 197, 94, 0.16); border-color: rgba(134, 239, 172, 0.45); color: #fff; }
.how-again:focus-visible { outline: 2px solid var(--band-accent); outline-offset: 3px; }

.how-view { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.how-cap { min-height: 3.2em; font-size: 14.5px; line-height: 1.55; text-align: center; color: var(--band-muted); }
.how-cap.is-done { color: var(--band-accent); font-weight: 600; }

/* Stacked, the recording comes first and the steps follow as its chapter
   list. Steps first left the video a screen further down, with the hidden
   Replay button holding an empty gap open between the two. */
@media (max-width: 999px) {
  .how-view { order: -1; }
}
@media (min-width: 1000px) {
  .how { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 48px; align-items: start; }
}
@media (min-width: 1280px) {
  .how { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 56px; }
}

/* =============================================================
   Features — four rows, laid out as Time Tracking's toolkit.

   The system's toolkit is a tablist over a viewer. There are no
   stills for these, so it is a plain list: .tk-grid rather than
   .tk-list, which also keeps the system's tab controller off it, and
   no hover state on rows that cannot be pressed. These four are the
   main reasons to install, not the small print, so they get a size up
   from the system's rows and two columns at most.
   ============================================================= */
.tk-grid { display: grid; grid-template-columns: 1fr; gap: 4px; list-style: none; }
.tk-row { cursor: default; padding: 16px 12px; }
.tk-row:hover { background: none; }
.tk-row h4 { font-size: 17px; }
.tk-row p { margin-top: 4px; font-size: 14.5px; line-height: 1.55; color: var(--body); }
.tk-ic svg { width: 20px; height: 20px; }
@media (min-width: 620px) {
  .tk-grid { grid-template-columns: 1fr 1fr; gap: 8px 32px; }
}
@media (min-width: 1024px) {
  .tk-grid { gap: 12px 64px; }
}