/* ==========================================================================
   cycleclose.com — site stylesheet
   Tokens below are COPIED from the design system's single source of truth:
   ~/Projects/cycleclose_brand/design-system/tokens/tokens.css
   Keep them in sync when tokens change. No colour may appear outside
   this token block — decorative tints are derived with color-mix().

   This surface deliberately varies from the product design system
   (owner's decision, 2026-08-09): gradients drawn from the two logo
   colours, decorative arc/diamond motifs from the logo story, card
   shadows and hover lift, and restrained entrance motion. The variation
   is visual only — voice, claims and the token palette are unchanged.
   ========================================================================== */

:root {
  /* brand — fixed, from the logo files */
  --cc-brand-green: #0FB55C;
  --cc-brand-blue:  #0070C0;
  --cc-brand-navy:  #1B2A41;
  --cc-brand-ink:   #2B3648;

  /* neutrals — navy-tinted grey ramp */
  --cc-grey-0:   #FFFFFF;
  --cc-grey-25:  #FBFCFD;
  --cc-grey-50:  #F4F6F8;
  --cc-grey-100: #EEF1F4;
  --cc-grey-200: #E4E8EC;
  --cc-grey-300: #D6DBE1;
  --cc-grey-400: #B9C1CA;
  --cc-grey-500: #8A949E;
  --cc-grey-600: #4A5866;
  --cc-grey-700: #33455F;
  --cc-grey-800: #2B3648;
  --cc-grey-900: #1B2A41;

  /* interactive — blue means "you, here" */
  --cc-action:       var(--cc-brand-blue);
  --cc-action-hover: #005B9B;
  --cc-action-press: #004879;
  --cc-action-wash:  #EFF6FC;
  --cc-action-line:  #CBE1F2;

  /* green as text — brand green never carries text (2.70:1) */
  --cc-green-text: #2F7049;

  /* text */
  --cc-text-strong:      var(--cc-brand-ink);
  --cc-text-muted:       var(--cc-grey-600);
  --cc-text-faint:       var(--cc-grey-500);
  --cc-text-inverse:     #FFFFFF;
  --cc-text-on-navy:     #E8EDF2;
  --cc-text-on-navy-mid: #C4CEDB;
  --cc-text-on-navy-dim: #93A1B3;

  /* surfaces & borders */
  --cc-surface-page:   var(--cc-grey-50);
  --cc-surface-card:   var(--cc-grey-0);
  --cc-surface-sunken: var(--cc-grey-100);
  --cc-border-subtle:  var(--cc-grey-100);
  --cc-border-default: var(--cc-grey-200);
  --cc-border-strong:  var(--cc-grey-400);
  --cc-shadow-raised:  0 1px 2px rgba(27,42,65,.06);
  --cc-shadow-overlay: 0 8px 28px rgba(27,42,65,.18);

  /* derived tints — always from brand colours, never new hex */
  --tint-green: color-mix(in srgb, var(--cc-brand-green) 9%, var(--cc-grey-0));
  --tint-blue:  color-mix(in srgb, var(--cc-brand-blue) 8%, var(--cc-grey-0));
  --grad-brand: linear-gradient(90deg, var(--cc-brand-green), var(--cc-brand-blue));

  /* type */
  --cc-font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --cc-size-xs:      11.5px;
  --cc-size-sm:      12.5px;
  --cc-size-base:    13.5px;
  --cc-size-md:      15px;
  --cc-size-lg:      17px;
  --cc-size-xl:      20px;
  --cc-size-2xl:     24px;
  --cc-size-3xl:     30px;
  --cc-size-4xl:     38px;
  --cc-size-display: 56px;
  --cc-weight-normal: 400;
  --cc-weight-medium: 500;
  --cc-weight-semi:   600;
  --cc-weight-bold:   700;
  --cc-leading-tight:   1.2;
  --cc-leading-normal:  1.5;
  --cc-leading-relaxed: 1.65;
  --cc-tracking-tight: -0.02em;
  --cc-tracking-caps:  0.08em;

  /* radius */
  --cc-radius-md:   8px;
  --cc-radius-lg:   11px;
  --cc-radius-xl:   14px;
  --cc-radius-pill: 999px;

  /* layout */
  --cc-width-site:  1120px;
  --cc-width-prose: 680px;

  /* motion */
  --cc-motion-fast: 120ms;
  --cc-motion-base: 200ms;
  --cc-motion-ease: cubic-bezier(.2,0,.2,1);
}

/* ==========================================================================
   Base
   ========================================================================== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--cc-font-sans);
  font-size: var(--cc-size-lg);
  line-height: var(--cc-leading-normal);
  color: var(--cc-text-strong);
  background: var(--cc-surface-card);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--cc-action); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
.wrap { max-width: var(--cc-width-site); margin: 0 auto; padding: 0 24px; }

/* ==========================================================================
   Nav
   ========================================================================== */
.nav { border-bottom: 1px solid var(--cc-border-default);
  background: color-mix(in srgb, var(--cc-grey-0) 88%, transparent);
  backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 6; }
.nav .wrap { display: flex; align-items: center; gap: 24px; padding-top: 13px; padding-bottom: 13px; }
.nav__brand { display: flex; align-items: center; gap: 10px;
  font-size: var(--cc-size-lg); font-weight: var(--cc-weight-bold);
  letter-spacing: var(--cc-tracking-tight); color: var(--cc-text-strong); }
.nav__brand:hover { text-decoration: none; }
.nav__brand img { width: 30px; height: 30px; }
.nav__brand sup { font-size: .55em; font-weight: var(--cc-weight-medium); color: var(--cc-text-muted); }
.nav__links { margin-left: auto; display: flex; align-items: center; gap: 22px;
  font-size: var(--cc-size-md); }
.nav__links a:not(.btn) { color: var(--cc-text-muted); font-weight: var(--cc-weight-medium); }
.nav__links a:not(.btn):hover { color: var(--cc-text-strong); text-decoration: none; }
@media (max-width: 700px) { .nav__links a:not(.btn) { display: none; } }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  font: inherit; font-size: var(--cc-size-md); font-weight: var(--cc-weight-semi);
  padding: 11px 20px; border-radius: var(--cc-radius-md);
  border: 1px solid transparent; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background var(--cc-motion-fast) var(--cc-motion-ease),
              border-color var(--cc-motion-fast) var(--cc-motion-ease),
              transform var(--cc-motion-fast) var(--cc-motion-ease),
              box-shadow var(--cc-motion-fast) var(--cc-motion-ease);
}
.btn--primary { background: var(--cc-action); color: var(--cc-text-inverse);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--cc-brand-navy) 18%, transparent); }
.btn--primary:hover { background: var(--cc-action-hover); color: var(--cc-text-inverse);
  text-decoration: none; transform: translateY(-1px);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--cc-brand-blue) 30%, transparent); }
.btn--secondary { background: var(--cc-surface-card); color: var(--cc-text-strong);
  border-color: var(--cc-grey-300); }
.btn--secondary:hover { border-color: var(--cc-border-strong); text-decoration: none;
  transform: translateY(-1px); box-shadow: var(--cc-shadow-raised); }
.btn--lg { font-size: var(--cc-size-lg); padding: 13px 24px; }
.btn--sm { font-size: var(--cc-size-base); padding: 7px 15px; }

/* ==========================================================================
   Chips — product status
   ========================================================================== */
.chip { display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--cc-size-sm); font-weight: var(--cc-weight-bold);
  letter-spacing: var(--cc-tracking-caps); text-transform: uppercase;
  padding: 5px 14px; border-radius: var(--cc-radius-pill); margin-bottom: 16px; }
.chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
.chip--now { color: var(--cc-green-text);
  background: color-mix(in srgb, var(--cc-brand-green) 12%, var(--cc-grey-0));
  border: 1px solid color-mix(in srgb, var(--cc-brand-green) 28%, var(--cc-grey-0)); }
.chip--now::before { background: var(--cc-brand-green); }
.chip--soon { color: var(--cc-grey-700);
  background: var(--cc-surface-sunken);
  border: 1px solid var(--cc-border-default); }
.chip--soon::before { background: var(--cc-grey-400); }

/* ==========================================================================
   Hero — arcs from the logo story: green plan arc out, blue actuals back
   ========================================================================== */
.hero { position: relative; overflow: hidden; padding: 88px 0 72px; text-align: center;
  background:
    radial-gradient(900px 420px at 12% -10%, var(--tint-green), transparent 70%),
    radial-gradient(900px 460px at 88% 108%, var(--tint-blue), transparent 70%);
}
.hero__arc { position: absolute; pointer-events: none; }
.hero__arc--green { top: -140px; left: -120px; width: 460px; height: 460px;
  stroke: var(--cc-brand-green); opacity: .12; }
.hero__arc--blue { bottom: -160px; right: -130px; width: 500px; height: 500px;
  stroke: var(--cc-brand-blue); opacity: .10; }
.hero__eyebrow { font-size: var(--cc-size-sm); font-weight: var(--cc-weight-semi);
  letter-spacing: var(--cc-tracking-caps); text-transform: uppercase;
  color: var(--cc-text-muted); margin-bottom: 16px; }
.hero h1 { font-size: clamp(var(--cc-size-3xl), 5.6vw, var(--cc-size-display));
  font-weight: var(--cc-weight-bold); letter-spacing: -0.03em;
  line-height: 1.06; max-width: 19ch; margin: 0 auto 14px; }
.hero h1 .accent { color: var(--cc-brand-blue); }
.hero__sub { font-size: var(--cc-size-xl); color: var(--cc-text-muted);
  max-width: 52ch; margin: 0 auto 30px; }
.hero__ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero__proof { margin-top: 26px; font-size: var(--cc-size-sm); color: var(--cc-text-faint); }

/* the closing bar: a plan line that ends on a milestone diamond */
.dataline { display: flex; align-items: center; justify-content: center;
  gap: 0; margin: 26px auto 0; width: min(340px, 60%); }
.dataline::before { content: ""; flex: 1; height: 3px; border-radius: var(--cc-radius-pill);
  background: var(--grad-brand); }
.dataline::after { content: ""; width: 11px; height: 11px; margin-left: 8px;
  background: var(--cc-brand-navy); transform: rotate(45deg); }

/* No entrance animation, deliberately: animation-fill-mode tricks leave
   content invisible in throttled tabs, and the system's rule stands —
   nothing decorative moves. Motion lives in hover transitions only. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .panel, .price-card { transition: none; }
}

/* ==========================================================================
   Sections & panels
   ========================================================================== */
.section { padding: 72px 0; }
.section--sunken { background: var(--cc-surface-page); }
.section h2 { font-size: var(--cc-size-3xl); font-weight: var(--cc-weight-bold);
  letter-spacing: var(--cc-tracking-tight); line-height: var(--cc-leading-tight);
  margin-bottom: 10px; }
.section .lede { font-size: var(--cc-size-xl); color: var(--cc-text-muted);
  max-width: 56ch; margin-bottom: 8px; }
.section .body { font-size: var(--cc-size-md); color: var(--cc-text-muted); max-width: 62ch; }

.panel { position: relative; background: var(--cc-surface-card);
  border: 1px solid var(--cc-border-default);
  border-radius: var(--cc-radius-xl); padding: 40px;
  box-shadow: var(--cc-shadow-raised); overflow: hidden;
  transition: box-shadow var(--cc-motion-base) var(--cc-motion-ease),
              transform var(--cc-motion-base) var(--cc-motion-ease); }
.panel:hover { box-shadow: 0 10px 30px rgba(27,42,65,.10); transform: translateY(-2px); }
.panel::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--grad-brand); }
.panel + .panel { margin-top: 28px; }
.panel__cols { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; }
@media (max-width: 860px) { .panel__cols { grid-template-columns: 1fr; } }
.panel h2 { font-size: var(--cc-size-3xl); }
.panel .name-suffix { color: var(--cc-text-muted); font-weight: var(--cc-weight-semi); }
.panel__actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 26px; }
.panel__facts { list-style: none; margin: 20px 0 0; }
.panel__facts li { font-size: var(--cc-size-md); color: var(--cc-text-muted);
  padding: 6px 0 6px 24px; position: relative; }
.panel__facts li::before { content: ""; position: absolute; left: 4px; top: 13px;
  width: 8px; height: 8px; background: var(--cc-brand-green); transform: rotate(45deg); }

.bridge { margin-top: 26px; border-radius: var(--cc-radius-md); padding: 14px 18px;
  font-size: var(--cc-size-md); color: var(--cc-text-muted);
  background: linear-gradient(90deg, var(--tint-green), var(--tint-blue));
  border: 1px solid var(--cc-border-default); }

/* composed product visual — the image carries its own frame and background */
.visual { display: block; width: 100%; border: 1px solid var(--cc-border-subtle);
  border-radius: var(--cc-radius-xl); margin: 32px 0; }
.panel .visual { margin: 0; }

/* product screenshot framed like a drawing sheet */
.shot { background: var(--cc-grey-0); border: 1px solid var(--cc-border-default);
  border-radius: var(--cc-radius-xl); overflow: hidden; margin: 32px 0;
  box-shadow: var(--cc-shadow-overlay); }
.panel .shot { margin: 0; box-shadow: 0 6px 22px rgba(27,42,65,.12); }
.shot figcaption { font-size: var(--cc-size-sm); color: var(--cc-text-muted);
  padding: 10px 16px; border-top: 1px solid var(--cc-border-default); text-align: center; }

/* ==========================================================================
   Steps — a process line that closes on a diamond, like the diagrams
   ========================================================================== */
.steps { position: relative; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 26px; margin-top: 34px; }
.steps__item { position: relative; padding-top: 44px; }
.steps__item::before { content: ""; position: absolute; top: 15px; left: 34px; right: -26px;
  border-top: 2px dashed var(--cc-border-strong); }
.steps__item:last-child::before { right: auto; width: calc(100% - 34px);
  border-top: none; }
.steps__item:last-child::after { content: ""; position: absolute; top: 10px; right: 2px;
  width: 12px; height: 12px; background: var(--cc-brand-navy); transform: rotate(45deg); }
.steps__n { position: absolute; top: 0; left: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--cc-surface-card); color: var(--cc-action-hover);
  border: 2px solid var(--cc-action-line);
  font-size: var(--cc-size-md); font-weight: var(--cc-weight-bold); }
.steps h3 { font-size: var(--cc-size-lg); font-weight: var(--cc-weight-semi);
  letter-spacing: -0.01em; margin-bottom: 6px; }
.steps p { font-size: var(--cc-size-md); color: var(--cc-text-muted); }
@media (max-width: 700px) {
  .steps__item::before, .steps__item:last-child::after { display: none; }
  .steps__item { padding-top: 0; padding-left: 46px; }
  .steps__n { top: 2px; }
}

/* ==========================================================================
   Pricing cards
   ========================================================================== */
.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 20px; margin-top: 34px; }
.price-card { background: var(--cc-surface-card); border: 1px solid var(--cc-border-default);
  border-radius: var(--cc-radius-xl); padding: 28px;
  box-shadow: var(--cc-shadow-raised); display: flex; flex-direction: column;
  transition: box-shadow var(--cc-motion-base) var(--cc-motion-ease),
              transform var(--cc-motion-base) var(--cc-motion-ease); }
.price-card:hover { box-shadow: 0 10px 30px rgba(27,42,65,.10); transform: translateY(-2px); }
.price-card--paid { border: 1px solid transparent;
  background: linear-gradient(var(--cc-surface-card), var(--cc-surface-card)) padding-box,
              var(--grad-brand) border-box; }
.price-card .label { font-size: var(--cc-size-sm); font-weight: var(--cc-weight-semi);
  letter-spacing: var(--cc-tracking-caps); text-transform: uppercase; color: var(--cc-text-muted); }
.price-card .amt { font-size: var(--cc-size-4xl); font-weight: var(--cc-weight-bold);
  letter-spacing: var(--cc-tracking-tight); margin: 8px 0 2px; }
.price-card .terms { font-size: var(--cc-size-sm); color: var(--cc-text-faint); }
.price-card ul { list-style: none; margin: 18px 0 0; flex: 1; }
.price-card li { font-size: var(--cc-size-md); color: var(--cc-text-muted);
  padding: 6px 0 6px 24px; position: relative; line-height: var(--cc-leading-normal); }
.price-card li::before { content: ""; position: absolute; left: 4px; top: 13px;
  width: 8px; height: 8px; background: var(--cc-brand-green); transform: rotate(45deg); }
.price-card .btn { margin-top: 22px; justify-content: center; }
.price-card .foot { margin-top: 14px; font-size: var(--cc-size-sm); color: var(--cc-text-faint); }

/* ==========================================================================
   Navy claim band — the mark's arcs ghosted behind
   ========================================================================== */
.claim { position: relative; overflow: hidden;
  background: var(--cc-brand-navy); color: var(--cc-text-on-navy);
  padding: 64px 0; text-align: center; }
.claim::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--grad-brand); }
.claim__arc { position: absolute; pointer-events: none; }
.claim__arc--green { top: -180px; right: -140px; width: 460px; height: 460px;
  stroke: var(--cc-brand-green); opacity: .16; }
.claim__arc--blue { bottom: -200px; left: -150px; width: 480px; height: 480px;
  stroke: var(--cc-brand-blue); opacity: .16; }
.claim b { color: var(--cc-text-inverse); }
.claim p { position: relative; font-size: var(--cc-size-xl); line-height: var(--cc-leading-normal);
  max-width: 56ch; margin: 0 auto; font-weight: var(--cc-weight-medium); }
.claim .sub { font-size: var(--cc-size-md); color: var(--cc-text-on-navy-mid);
  font-weight: var(--cc-weight-normal); margin-top: 14px; }

/* ==========================================================================
   Follow
   ========================================================================== */
.follow { text-align: center; }
.follow .inner { max-width: 560px; margin: 0 auto; padding: 40px 32px;
  border-radius: var(--cc-radius-xl); border: 1px solid var(--cc-border-default);
  background: linear-gradient(135deg, var(--tint-green), var(--cc-grey-0) 40%, var(--tint-blue)); }
.follow h2 { font-size: var(--cc-size-2xl); }
.follow p { font-size: var(--cc-size-md); color: var(--cc-text-muted);
  max-width: 48ch; margin: 8px auto 20px; }

/* ==========================================================================
   Footer — navy, grounded
   ========================================================================== */
footer { background: var(--cc-brand-navy); color: var(--cc-text-on-navy-mid);
  padding: 44px 0 52px; text-align: center; font-size: var(--cc-size-sm); }
footer a { color: var(--cc-text-on-navy); }
footer .brandline { display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: var(--cc-size-lg); font-weight: var(--cc-weight-bold);
  color: var(--cc-text-inverse); margin-bottom: 14px; }
footer .brandline img { width: 26px; height: 26px; }
footer .fine { margin-top: 14px; font-size: var(--cc-size-xs); color: var(--cc-text-on-navy-dim);
  max-width: var(--cc-width-prose); margin-left: auto; margin-right: auto; }