/* Cycologist marketing site.
   Brand: orange #F15825, teal #04BABE, near-black #212121 — same values as AppColors in the app,
   so the site and the product don't drift apart visually. */

:root {
  --orange: #F15825;
  --orange-dark: #D94A1C;
  --teal: #04BABE;
  --ink: #212121;
  --muted: #6B6B6B;
  --bg: #FFFFFF;
  --bg-alt: #F8F9FA;
  --bg-sunk: #F1F3F5;
  --line: #E4E6E8;
  --card: #FFFFFF;
  --shadow: 0 1px 2px rgba(16, 20, 24, .04), 0 8px 24px rgba(16, 20, 24, .06);
  --shadow-lg: 0 2px 4px rgba(16, 20, 24, .05), 0 18px 48px rgba(16, 20, 24, .12);
  --max: 1120px;
  --nav-h: 4.25rem;

  /* Declaring both schemes is what lets the UA render scrollbars and form controls to match,
     and it's also what propagates the dark preference into <img>-referenced SVGs — logo.svg
     carries its own prefers-color-scheme rule for the wordmark and stays black without this. */
  color-scheme: light dark;
}

/* The brand orange and teal are the two fixed points — they're the app's actual AppColors and
   don't move. Everything else inverts so the site is readable in a dark UA without the orange
   going muddy against a near-black background. */
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #F2F3F4;
    --muted: #A0A4A8;
    --bg: #16181A;
    --bg-alt: #1E2124;
    --bg-sunk: #101214;
    --line: #2E3236;
    --card: #1E2124;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .3);
    --shadow-lg: 0 2px 4px rgba(0, 0, 0, .5), 0 18px 48px rgba(0, 0, 0, .45);
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 1rem); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 { line-height: 1.12; margin: 0 0 .5em; letter-spacing: -0.022em; }
h1 { font-size: clamp(2.15rem, 5.2vw, 3.6rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.35rem); font-weight: 750; }
h3 { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.012em; }
p { margin: 0 0 1rem; }
a { color: var(--orange); }
img, svg { max-width: 100%; }

:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--orange); color: #fff; padding: .75rem 1.25rem;
  z-index: 100; border-radius: 0 0 8px 0; font-weight: 600; text-decoration: none;
}
.skip:focus { left: 0; }

/* ---------------------------------------------------------------- Top CTA bar */

/* Sits above the nav and scrolls away with the page; the nav is what stays pinned.
   The whole bar is the link, so there's no underlined phrase competing with the sentence.
   Uses the fixed brand orange rather than --ink, which inverts to near-white in dark mode
   and would turn this into a glaring white strip. */
.cta-bar {
  display: block;
  background: linear-gradient(96deg, #F4682F 0%, #F15825 48%, #DC4A19 100%);
  color: #fff; text-decoration: none;
  font-size: .95rem; font-weight: 600; line-height: 1.4;
  letter-spacing: -0.005em;
  padding: .8rem 1.25rem;
  text-align: center;
  transition: filter .18s ease;
}
.cta-bar:hover { filter: brightness(1.07); }
.cta-bar strong { font-weight: 800; }
/* Inline rather than a flex sibling, so on a phone it follows the last word onto the wrapped
   line instead of stranding itself against the right edge. */
.cta-bar .arrow {
  display: inline-block; margin-left: .3rem;
  transition: transform .18s ease;
}
.cta-bar:hover .arrow { transform: translateX(4px); }

@media (max-width: 560px) {
  .cta-bar { font-size: .85rem; padding: .7rem 1rem; }
}

/* ---------------------------------------------------------------- Nav */

.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  display: flex; align-items: center; gap: 1rem;
  padding: .85rem 1.5rem; max-width: var(--max); margin: 0 auto;
  min-height: var(--nav-h);
}
.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand img { display: block; }
.nav-links { display: flex; gap: 1.5rem; margin-left: auto; align-items: center; }
.nav-links a { color: var(--ink); text-decoration: none; font-weight: 500; font-size: .94rem; white-space: nowrap; }
.nav-links a:hover { color: var(--orange); }

/* On a phone the links drop to their own row underneath rather than being hidden behind a menu —
   every section stays one tap away with no JavaScript involved. The row scrolls sideways on very
   narrow screens instead of wrapping into a ragged block. */
@media (max-width: 760px) {
  .nav-inner { flex-wrap: wrap; row-gap: .55rem; padding: .7rem 1.1rem; min-height: 0; }
  .nav-links {
    width: 100%; margin-left: 0; gap: 1.15rem;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { font-size: .9rem; }
}

/* ---------------------------------------------------------------- Layout */

.band { max-width: var(--max); margin: 0 auto; padding: 4.5rem 1.5rem; }
.band-alt { background: var(--bg-alt); max-width: none; }
.band-alt > .band-inner { max-width: var(--max); margin: 0 auto; }
.band-tight { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.section-head { max-width: 680px; margin: 0 auto 2.75rem; text-align: center; }
.section-head p { color: var(--muted); font-size: 1.08rem; margin-bottom: 0; }

.eyebrow {
  display: inline-block; font-size: .74rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--teal); margin-bottom: .6rem;
}

/* ---------------------------------------------------------------- Hero */

.hero {
  position: relative; overflow: hidden;
  border-bottom: 1px solid var(--line);
}
/* A soft brand wash behind the hero. Sits under the content and never intercepts clicks. */
.hero::before {
  content: ""; position: absolute; inset: -30% -10% auto -10%; height: 130%;
  background:
    radial-gradient(48% 55% at 18% 8%, color-mix(in srgb, var(--orange) 15%, transparent), transparent 70%),
    radial-gradient(42% 50% at 88% 22%, color-mix(in srgb, var(--teal) 15%, transparent), transparent 70%);
  pointer-events: none;
}
.hero-inner {
  position: relative;
  max-width: var(--max); margin: 0 auto; padding: 4.25rem 1.5rem 4rem;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 3.5rem; align-items: center;
}
.hero h1 { margin-bottom: .35em; }
.hero .lede { font-size: 1.19rem; color: var(--muted); max-width: 34em; }
.hero-copy .cta-row { justify-content: flex-start; }

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; gap: 2.75rem; padding-top: 3rem; text-align: center; }
  .hero .lede { margin-left: auto; margin-right: auto; }
  .hero-copy .cta-row { justify-content: center; }
  .status-line { justify-content: center; }
}

.cta-row { display: flex; gap: .75rem; flex-wrap: wrap; margin: 2rem 0 1.1rem; }

/* Paired calls to action that must read as equal weight — same width whichever label is longer.
   The flex-basis is what makes them stack to full width rather than sit lopsided once the row
   is too narrow for both. */
.cta-row.cta-equal .btn { flex: 1 1 12rem; max-width: 16rem; text-align: center; }
.cta-row.cta-center { justify-content: center; margin-top: 2.25rem; margin-bottom: 0; }

.btn {
  display: inline-block; padding: .85rem 1.6rem; border-radius: 10px;
  text-decoration: none; font-weight: 650; font-size: 1rem;
  border: 2px solid transparent; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--orange); color: #fff; }
.btn-primary:hover { background: var(--orange-dark); }
.btn-ghost { border-color: var(--line); color: var(--ink); background: var(--card); }
.btn-ghost:hover { border-color: var(--orange); color: var(--orange); }

.status-line {
  display: flex; align-items: center; gap: .55rem;
  font-size: .88rem; color: var(--muted); margin: 0;
}
.dot {
  width: .5rem; height: .5rem; border-radius: 50%; background: var(--teal);
  flex-shrink: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 22%, transparent);
}

/* ---------------------------------------------------------------- Phone mockup */

.phone-wrap { display: flex; justify-content: center; }
.phone {
  width: 100%; max-width: 310px;
  background: var(--card);
  border: 10px solid #1B1D1F;
  border-radius: 38px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  position: relative;
}
@media (prefers-color-scheme: dark) {
  .phone { border-color: #3A3F44; }
}
.phone-notch {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 42%; height: 1.35rem; background: #1B1D1F;
  border-radius: 0 0 14px 14px; z-index: 2;
}
@media (prefers-color-scheme: dark) { .phone-notch { background: #3A3F44; } }

.phone-screen { padding: 2.1rem 1rem 1.15rem; background: var(--bg-alt); }
.phone-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: .2rem; }
.phone-head strong { font-size: .95rem; }
.phone-head span { font-size: .72rem; color: var(--muted); }
.phone-sub { font-size: .74rem; color: var(--muted); margin: 0 0 .9rem; }

/* The tracker mirrors the four stages a real ticket moves through on the shop's board. */
.tracker { list-style: none; margin: 0; padding: 0; }
.tracker li {
  position: relative; padding: 0 0 1.05rem 1.75rem;
  font-size: .82rem; line-height: 1.35;
}
.tracker li::before {
  content: ""; position: absolute; left: 0; top: .18rem;
  width: .82rem; height: .82rem; border-radius: 50%;
  background: var(--bg-alt); border: 2px solid var(--line);
}
.tracker li::after {
  content: ""; position: absolute; left: .35rem; top: 1.05rem; bottom: .1rem;
  width: 2px; background: var(--line);
}
.tracker li:last-child { padding-bottom: 0; }
.tracker li:last-child::after { display: none; }
.tracker li.done::before { background: var(--teal); border-color: var(--teal); }
.tracker li.done::after { background: var(--teal); }
.tracker li.now::before {
  background: var(--orange); border-color: var(--orange);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--orange) 22%, transparent);
}
.tracker li.now { font-weight: 700; }
.tracker small { display: block; color: var(--muted); font-size: .72rem; font-weight: 400; }
.tracker li.todo { color: var(--muted); }

.phone-foot {
  margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--line);
  font-size: .72rem; color: var(--muted); display: flex; justify-content: space-between; gap: .5rem;
}

/* ---------------------------------------------------------------- Audience split */

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 760px) { .split { grid-template-columns: 1fr; } }

.split-card {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--line); border-radius: 16px; padding: 1.9rem;
  background: var(--card); box-shadow: var(--shadow);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.split-card:hover {
  border-color: var(--orange); transform: translateY(-3px); box-shadow: var(--shadow-lg);
}
.split-card h3 { margin-bottom: .35rem; }
.split-card p { color: var(--muted); font-size: .96rem; margin-bottom: .9rem; }
.split-card .go { color: var(--orange); font-weight: 650; font-size: .94rem; }
.split-card .go::after { content: " →"; }

/* ---------------------------------------------------------------- Pillars */

.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; }
.pillar {
  border: 1px solid var(--line); border-radius: 16px; padding: 1.75rem;
  background: var(--card);
}
.pillar .ico {
  width: 2.6rem; height: 2.6rem; border-radius: 10px; margin-bottom: 1rem;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--orange) 12%, transparent);
  color: var(--orange);
}
.pillar:nth-child(2) .ico {
  background: color-mix(in srgb, var(--teal) 14%, transparent); color: var(--teal);
}
.pillar .ico svg { width: 1.4rem; height: 1.4rem; display: block; }
.pillar p { color: var(--muted); margin-bottom: 0; font-size: .97rem; }

/* ---------------------------------------------------------------- Before/after */

.contrast { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; max-width: 880px; margin: 0 auto; }
@media (max-width: 700px) { .contrast { grid-template-columns: 1fr; } }
.contrast-col { border-radius: 14px; padding: 1.6rem; border: 1px solid var(--line); background: var(--card); }
.contrast-col h3 { font-size: 1.02rem; margin-bottom: .9rem; }
.contrast-col ul { list-style: none; margin: 0; padding: 0; }
.contrast-col li { position: relative; padding-left: 1.6rem; margin-bottom: .6rem; font-size: .95rem; color: var(--muted); }
.contrast-col li::before {
  position: absolute; left: 0; top: -.05rem; font-size: 1rem; font-weight: 700;
}
.contrast-before li::before { content: "×"; color: var(--muted); }
.contrast-after { border-color: var(--teal); }
.contrast-after li::before { content: "✓"; color: var(--teal); }
.contrast-after li { color: var(--ink); }

/* ---------------------------------------------------------------- How it works */

.tracks { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2.75rem; }
.track h3 { margin-bottom: 1.35rem; }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li { counter-increment: step; position: relative; padding: 0 0 1.5rem 3.1rem; margin: 0; }
/* The connector runs between the numbers rather than through them; the last item has no
   following step, so it doesn't get one. */
.steps li::after {
  content: ""; position: absolute; left: 1.09rem; top: 2.3rem; bottom: .2rem;
  width: 2px; background: var(--line);
}
.steps li:last-child { padding-bottom: 0; }
.steps li:last-child::after { display: none; }
.steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--orange); color: #fff;
  font-weight: 700; font-size: .95rem;
  display: flex; align-items: center; justify-content: center;
}
.steps strong { display: block; margin-bottom: .2rem; }
.steps p { color: var(--muted); font-size: .95rem; margin: 0; }

/* ---------------------------------------------------------------- Kanban mockup */

.shop-layout { display: grid; grid-template-columns: 1fr 1.1fr; gap: 3rem; align-items: center; }
@media (max-width: 900px) { .shop-layout { grid-template-columns: 1fr; gap: 2.25rem; } }

.board {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem;
  background: var(--bg-sunk); border: 1px solid var(--line);
  border-radius: 14px; padding: .85rem; box-shadow: var(--shadow);
}
.board-col h4 {
  font-size: .66rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); margin: 0 0 .5rem; font-weight: 800;
}
.ticket {
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  padding: .55rem .6rem; margin-bottom: .5rem; font-size: .72rem; line-height: 1.35;
  border-left: 3px solid var(--line);
}
.ticket strong { display: block; font-size: .74rem; }
.ticket span { color: var(--muted); }
.ticket.t-orange { border-left-color: var(--orange); }
.ticket.t-teal { border-left-color: var(--teal); }

/* ---------------------------------------------------------------- Feature list */

.feature-list { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.feature-list li { position: relative; padding-left: 1.85rem; margin-bottom: .85rem; }
.feature-list li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--teal); font-weight: 800;
}
.feature-list strong { font-weight: 700; }
.feature-list span { color: var(--muted); }

/* ---------------------------------------------------------------- Pricing */

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1.35rem; }
.card {
  border: 1px solid var(--line); border-radius: 16px; padding: 1.9rem;
  background: var(--card); box-shadow: var(--shadow);
}
.card-accent { border-color: var(--teal); border-width: 2px; position: relative; }
.tag {
  position: absolute; top: -.72rem; right: 1.5rem;
  background: var(--teal); color: #06282A; font-size: .68rem; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; padding: .25rem .65rem; border-radius: 999px;
}
.price { font-size: 2.3rem; font-weight: 800; margin: .2rem 0 1rem; letter-spacing: -0.03em; }
.price span { font-size: .95rem; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.card ul { margin: 0 0 1.1rem; padding-left: 1.15rem; }
.card li { margin-bottom: .55rem; }
.note { font-size: .875rem; color: var(--muted); margin-bottom: 0; }

/* ---------------------------------------------------------------- FAQ */

.faq { max-width: 740px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--line); padding: 1.15rem 0; }
.faq details:first-of-type { border-top: 1px solid var(--line); }
.faq summary {
  cursor: pointer; font-weight: 650; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; color: var(--orange); font-size: 1.5rem; font-weight: 400; line-height: 1;
  flex-shrink: 0; transition: transform .15s ease;
}
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: .9rem 0 0; color: var(--muted); }
.faq details p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- Closing CTA */

.closer {
  background: var(--ink); color: var(--bg);
  text-align: center; padding: 4rem 1.5rem;
}
.closer h2 { color: var(--bg); }
.closer p { color: color-mix(in srgb, var(--bg) 68%, var(--ink)); max-width: 46ch; margin: 0 auto 1.75rem; }
.closer .cta-row { justify-content: center; margin-bottom: 0; }
.closer .btn-ghost { background: transparent; border-color: color-mix(in srgb, var(--bg) 35%, transparent); color: var(--bg); }
.closer .btn-ghost:hover { border-color: var(--orange); color: var(--orange); }

/* In dark mode --ink is near-white, so the inversion above would turn this band into a glaring
   white slab. Keep it dark and set it apart with a brand wash instead. */
@media (prefers-color-scheme: dark) {
  .closer {
    background:
      radial-gradient(65% 130% at 50% 0%, color-mix(in srgb, var(--orange) 18%, transparent), transparent 70%),
      var(--bg-sunk);
    color: var(--ink);
    border-top: 1px solid var(--line);
  }
  .closer h2 { color: var(--ink); }
  .closer p { color: var(--muted); }
  .closer .btn-ghost { border-color: var(--line); color: var(--ink); }
  .closer .btn-ghost:hover { border-color: var(--orange); color: var(--orange); }
}

/* ---------------------------------------------------------------- Long-form pages */

.doc { max-width: 740px; margin: 0 auto; padding: 3.25rem 1.5rem 4rem; }
.doc h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); }
.doc h2 { text-align: left; margin-top: 2.5rem; font-size: 1.3rem; }
.doc ul { padding-left: 1.15rem; }
.doc li { margin-bottom: .45rem; }
.doc .lede { font-size: 1.1rem; color: var(--muted); }
.updated { color: var(--muted); font-size: .9rem; }

/* A callout for the things a reader must not miss on a legal or support page. */
.callout {
  border-left: 3px solid var(--teal); background: var(--bg-alt);
  padding: 1.1rem 1.25rem; border-radius: 0 10px 10px 0; margin: 1.5rem 0;
}
.callout p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- Footer */

footer { border-top: 1px solid var(--line); background: var(--bg-alt); }
.footer-inner { max-width: var(--max); margin: 0 auto; padding: 3rem 1.5rem 2rem; }
.footer-cols {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem;
  padding-bottom: 2rem; border-bottom: 1px solid var(--line);
}
@media (max-width: 720px) { .footer-cols { grid-template-columns: 1fr 1fr; gap: 1.75rem; } }
.footer-brand p { font-size: .88rem; color: var(--muted); margin: .75rem 0 0; max-width: 26ch; }
.footer-col h4 {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); margin: 0 0 .85rem; font-weight: 800;
}
.footer-col a {
  display: block; color: var(--ink); text-decoration: none;
  font-size: .93rem; margin-bottom: .5rem;
}
.footer-col a:hover { color: var(--orange); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; flex-wrap: wrap; padding-top: 1.5rem;
}
.footer-bottom p { margin: 0; font-size: .85rem; color: var(--muted); }