/* skedworx landing page. Builds on the tokens in skedworx.css. */

body { background: var(--surface-2); }

/* ------------------------------------------------------------------- nav */
.site-nav {
  position: sticky; top: 0; z-index: 1030;
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-nav .nav-link {
  color: var(--ink-600); font-weight: 550; font-size: .95rem;
  padding: .4rem .85rem; border-radius: 8px;
}
.site-nav .nav-link:hover { color: var(--brand-ink); background: var(--brand-tint); }
.navbar-toggler:focus { box-shadow: none; }

/* ------------------------------------------------------------------ hero */
.hero {
  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(3rem, 6vw, 4.5rem);
  background:
    radial-gradient(1100px 400px at 12% -8%, var(--brand-tint), transparent 60%),
    radial-gradient(800px 340px at 92% 4%, var(--accent-tint), transparent 62%);
}
.hero-title { margin: 0; }

/* The slogan lockup sets the headline size; cap it so it stays proportionate on
   wide screens and never overflows narrow ones. */
.hero-art {
  display: block;
  width: 100%;
  max-width: 30rem;
  height: auto;
  /* The supplied artwork has a white background baked in, with no alpha channel,
     so on the tinted hero it would read as a white box. Multiply drops white to
     nothing against a light background without keying the image and fringing the
     antialiased letterforms. The hero gradient is always light, so this is safe;
     browsers without support simply show the white panel, as before. */
  mix-blend-mode: multiply;
}
/* Text used only when the artwork is missing. */
.hero-fallback {
  font-size: clamp(2.3rem, 5.2vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.06;
}

/* ------------------------------------------- hero visual: a schedule grid */
.sched {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.sched-head {
  display: flex; align-items: center; gap: .4rem;
  padding: .7rem .9rem;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.sched-head .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.sched-title { margin-left: .6rem; font-size: .78rem; color: var(--ink-400); font-weight: 600; }
.sched-body { padding: .85rem; }

.sched-grid {
  display: grid;
  grid-template-columns: 4.6rem 1fr 1fr;
  gap: .4rem;
  align-items: stretch;
}
.sc-col-head {
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--ink-400);
  padding: .1rem .2rem .3rem;
}
.sc-time {
  font-size: .74rem; font-weight: 650; color: var(--ink-400);
  display: flex; align-items: center;
}
.sc-game {
  border-radius: var(--radius-sm);
  padding: .45rem .55rem;
  font-size: .8rem; line-height: 1.25;
  border: 1px solid transparent;
}
.sc-game b { font-weight: 700; }
.sc-game span { display: block; font-size: .66rem; opacity: .8; margin-top: .1rem; }
.d-a { background: var(--brand-tint); color: var(--brand-ink); border-color: #cfe6cf; }
.d-b { background: var(--accent-tint); color: var(--brand-700); border-color: #dcefc8; }
.d-c { background: var(--surface); color: var(--ink-600); border-color: var(--line); }
.sc-game.dh { position: relative; }
.sc-game.dh::after {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 3px; border-radius: 3px; background: currentColor; opacity: .45;
}
.sched-foot {
  display: flex; flex-wrap: wrap; gap: .4rem;
  padding: .7rem .9rem; border-top: 1px solid var(--line); background: var(--surface);
}
.chip {
  font-size: .7rem; font-weight: 650; padding: .2rem .55rem;
  border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--ink-600);
}
.chip.ok { background: var(--accent-tint); border-color: #cfe6b8; color: var(--brand-700); }

/* --------------------------------------------------------------- sections */
.section { padding: clamp(3rem, 6.5vw, 5rem) 0; }

/* The nav is sticky, so an anchor jump would otherwise land the heading
   underneath it. Offset the scroll target by roughly the nav's height. */
section[id] { scroll-margin-top: 4.75rem; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.band { background: var(--surface); border-block: 1px solid var(--line); }
.section-title { font-size: clamp(1.7rem, 3.4vw, 2.35rem); }

/* --------------------------------------------------- story illustrations */
/* The two marketing graphics are product explanation, not decoration, so they
   get real width and are never cropped — only scaled. On narrow screens they
   stack full-bleed rather than shrinking into illegibility. */
.story-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  background: var(--surface-2);
}
/* The diamond is square and self-contained; cap it so it does not tower over
   the copy on wide screens. */
.story-img.plate {
  max-width: 40rem;
  margin-inline: auto;
  box-shadow: none;
}

/* --------------------------------------------------- the reality (compact) */
/* Supporting detail under the spreadsheet graphic. Deliberately NOT cards: the
   illustration is carrying this section, and six equal boxes would flatten it. */
.reality {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: .9rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  border-top: 1px solid var(--line);
  padding-top: 1.6rem;
}
.reality li { display: flex; flex-direction: column; gap: .15rem; }
.reality b { font-size: .95rem; color: var(--ink); }
.reality span { font-size: .9rem; color: var(--ink-600); line-height: 1.55; }

/* ----------------------------------------------------------- origin story */
/* Plain prose on plain background. No card, no icon — the point is that a
   person wrote it. */
.story p {
  font-size: 1.06rem;
  line-height: 1.7;
  color: var(--ink-600);
  margin-bottom: 1rem;
}
.story p:first-child { color: var(--ink); }
.story p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------ the chains */
.chain-head {
  font-size: .78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--ink-400); margin-bottom: .9rem;
}
/* The cascade. Muted and grey on purpose: this is the version you don't want,
   and it should feel like a list that keeps going. */
.chain {
  list-style: none; margin: 0; padding: 0;
  counter-reset: none;
}
.chain li {
  position: relative;
  padding: .5rem 0 .5rem 1.6rem;
  font-size: .95rem;
  color: var(--ink-600);
}
.chain li::before {
  content: "";
  position: absolute; left: .35rem; top: 1.35rem; bottom: -.35rem;
  width: 1px; background: var(--line);
}
.chain li:last-child::before { display: none; }
.chain li::after {
  content: "";
  position: absolute; left: 0; top: 1rem;
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--ink-400);
}
.chain-after li:last-child { color: var(--ink); font-weight: 600; }

/* The skedworx side: inputs converge on one node and one outcome. */
.chain-in { display: flex; flex-wrap: wrap; gap: .4rem; }
.chain-in span {
  font-size: .85rem; font-weight: 600;
  padding: .3rem .7rem; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-600);
}
.chain-node {
  margin: 1rem auto .75rem;
  width: max-content;
  padding: .55rem 1.6rem;
  border-radius: 999px;
  background: var(--brand-ink); color: #fff;
  font-weight: 700; letter-spacing: -.02em;
  position: relative;
}
.chain-node::before,
.chain-node::after {
  content: "↓";
  position: absolute; left: 50%; transform: translateX(-50%);
  color: var(--brand-ink); font-weight: 700;
}
.chain-node::before { top: -1.15rem; }
.chain-node::after  { bottom: -1.35rem; }
.chain-out {
  margin: 1.4rem 0 0;
  text-align: center;
  font-weight: 600;
  color: var(--ink);
}

/* ------------------------------------------------------ philosophy pull-quote */
.pull {
  text-align: center;
  font-size: clamp(1.35rem, 2.8vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -.025em;
  color: var(--ink);
  max-width: 34rem;
  margin: 0 auto 1.25rem;
  padding-top: 2rem;
  border-top: 2px solid var(--brand);
  width: fit-content;
}

/* --------------------------------------------------------- feature list */
.feature-list { list-style: none; margin: 0; padding: 0; }
.feature-list li {
  position: relative;
  padding: .42rem 0 .42rem 1.6rem;
  font-size: .96rem;
  color: var(--ink-600);
}
.feature-list li::before {
  content: "";
  position: absolute; left: 0; top: .95rem;
  width: .5rem; height: .5rem; border-radius: 2px;
  background: var(--brand);
}

/* ------------------------------------------------------------- trade-offs */
/* One idea, given a whole section and a wide measure. This is the argument
   that separates skedworx from a template, so it does not sit in a card. */
.tradeoff {
  max-width: 46rem;
  text-align: center;
  padding: clamp(1.5rem, 4vw, 2.5rem) 0;
  border-block: 1px solid var(--line);
}

/* --------------------------------------------------------- sister product */
/* Cooler Cards is a neighbour, not a feature. These cards borrow the page's own
   surface, border and radius tokens rather than importing another brand's look,
   so the section reads as the same voice recommending something -- which is what
   it is -- instead of a banner cut out and pasted in.

   The two columns are deliberately symmetrical: the question a visitor is
   already answering, beside the one they might not have thought about. */
.sister-col {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .6rem;
  padding: 1.5rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
/* The column describing where the reader already is sits back, so the eye lands
   on the one carrying the new information. */
.sister-col.is-here { background: var(--surface); }
.sister-q { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.sister-a { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--ink-600); }
.sister-a b { color: var(--ink); }
/* mt-auto on the button and the tag keeps both columns' footers aligned however
   the copy wraps. */
.sister-tag {
  margin-top: auto;
  padding: .2rem .6rem;
  font-size: .7rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase;
  color: var(--brand-700); background: var(--accent-tint);
  border: 1px solid #cfe6b8; border-radius: 999px;
}
.sister-note {
  max-width: 34rem;
  margin: 1.5rem auto 0;
  text-align: center;
  font-size: .85rem;
  color: var(--ink-600);
}

/* ------------------------------------------------------------ credibility */
.credibility {
  max-width: 42rem; margin-inline: auto;
  font-size: .95rem; line-height: 1.65; color: var(--ink-600);
  padding-top: 1.6rem; border-top: 1px solid var(--line);
}
.credibility b { color: var(--ink); }

/* ------------------------------------------------- copy emphasis treatments */
/* The central product promise, in the hero. Sized between body and heading so it
   reads as a statement without competing with the logo lockup above it. */
.promise {
  margin: 0 0 1.5rem;
  padding-left: .9rem;
  border-left: 3px solid var(--brand);
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  font-weight: 650;
  line-height: 1.45;
  color: var(--ink);
  max-width: 30rem;
}

/* Conversational one-liners that land a section. Quieter than .pull, which is a
   full-width statement; this sits inline at the end of a column of copy. */
.aside {
  margin: 1.25rem 0 0;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ink);
}

/* The turn in the origin story. The sentence before it is the easy path, this is
   the decision -- so it gets the weight, and the paragraphs stay plain around it. */
.story p.turn {
  color: var(--ink);
  font-size: 1.18rem;
  font-weight: 650;
  letter-spacing: -.015em;
  margin: 1.25rem 0;
}

/* ------------------------------------------------------------------ steps */
.step { position: relative; padding-left: 3.4rem; }
.step-n {
  position: absolute; left: 0; top: 0;
  width: 2.5rem; height: 2.5rem; border-radius: 12px;
  background: var(--brand-ink); color: #fff;
  display: grid; place-items: center;
  font-weight: 700; font-size: 1.05rem;
}
.step h3 { font-size: 1.08rem; font-weight: 650; margin: .35rem 0 .4rem; }
.step p  { color: var(--ink-600); font-size: .95rem; line-height: 1.6; margin: 0; }

/* ------------------------------------------------------------------ knobs */
.knobs {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: .35rem .9rem;
}
.knob {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .72rem 0;
  border-bottom: 1px solid var(--line);
}
.knob:last-child { border-bottom: 0; }
.k-label { font-size: .92rem; color: var(--ink-600); }
.k-value { font-weight: 650; font-size: .92rem; color: var(--ink); white-space: nowrap; }
.k-value.num { font-variant-numeric: tabular-nums; }
.k-value.pill {
  background: var(--brand-tint); color: var(--brand-ink);
  padding: .15rem .6rem; border-radius: 999px; font-size: .82rem;
}

/* ----------------------------------------------------------------- sports */
.sports { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.sport {
  border: 1px solid var(--line); background: var(--surface-2);
  border-radius: 999px; padding: .45rem 1rem;
  font-weight: 600; font-size: .92rem; color: var(--ink-600);
  transition: transform .15s ease, border-color .15s ease, color .15s ease;
}
.sport:hover { transform: translateY(-2px); border-color: var(--accent); color: var(--accent-600); }

/* -------------------------------------------------------------------- CTA */
.cta {
  padding: clamp(3rem, 6vw, 4.5rem) 0;
  background: linear-gradient(160deg, var(--brand) 0%, var(--brand-700) 100%);
}
.cta .section-title { max-width: 46rem; margin-inline: auto; }
.cta-sub { color: rgba(255,255,255,.82); font-size: 1.05rem; }

/* ----------------------------------------------------------------- footer */
/* Sticky footer. A page shorter than the window -- pricing is, on any normal
   monitor -- otherwise leaves the footer band floating mid-screen with blank
   page beneath it, which reads as content failing to load rather than as the
   end of the page. The column pushes it down instead of pinning it, so a long
   page like the landing page is unaffected. */
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; }

.site-foot { padding: 2rem 0; border-top: 1px solid var(--line); background: var(--surface);
             flex-shrink: 0; }

/* ------------------------------------------------------------ small screens */
@media (max-width: 991.98px) {
  .site-nav .navbar-collapse { padding: .75rem 0 .25rem; }
  .site-nav .nav-link { padding-inline: 0; }
}
@media (max-width: 575.98px) {
  .sched-grid { grid-template-columns: 3.6rem 1fr 1fr; gap: .3rem; }
  .sc-game { font-size: .72rem; padding: .38rem .45rem; }
  .sc-col-head, .sc-time { font-size: .65rem; }
  .step { padding-left: 3rem; }
}