/*
 | LoopChat public site — "Precision Green" design system
 |--------------------------------------------------------------------------
 | Single stylesheet for the marketing site (resources/views/site/**).
 | Linked from site/layout.blade.php <head> only. Tokens live in :root;
 | every component below is prefixed lc- so it can never collide with the
 | app-shell design systems (turbo.css / loopchat-theme.css) which this file
 | must never touch. Tailwind (CDN) still styles layout/spacing utilities;
 | this file owns colour, type, and the named components.
 |
 | Where an lc-* rule must beat a Tailwind utility on the same element, the
 | utility is removed from the markup rather than fought here on load order:
 | the CDN injects its <style> at runtime, so relative position is unstable.
 */

:root {
  /* Surfaces & ink */
  --lc-canvas:      #FFFFFF;   /* reference body is pure white */
  --lc-tint:        #F8F8F8;   /* reference band grey, measured rgb(248,248,248) */
  --lc-ink:         #0E1F18;
  --lc-green:       #123B2E;
  --lc-green-2:     #1B5741;
  --lc-lime:        #CCF381;
  --lc-lime-dim:    #B8E45F;

  /* Text */
  --lc-text:        #3E4A44;
  --lc-muted:       #67736D;
  --lc-faint:       #8A948E;

  /* Lines */
  --lc-hairline:    #E5E7E1;
  --lc-on-dark:     #E7ECE8;
  --lc-on-dark-muted: rgba(231,236,232,.62);
  --lc-hairline-dark: rgba(204,243,129,.14);

  /* Radii */
  --lc-r-btn:   8px;
  --lc-r-card: 16px;              /* measured: reference cards are 16px */
  --lc-r-panel:12px;

  /* Elevation */
  /* Resting surfaces carry no shadow: the reference separates them with a 1px
     hairline alone, and matching that is what makes the surface read crisp
     rather than soft. Kept as a token so callers need not change. */
  --lc-shadow-card:  none;
  --lc-shadow-panel: 0 10px 15px -3px rgba(0,0,0,.1);

  /* Type */
  --lc-font-sans: 'Poppins', system-ui, -apple-system, sans-serif;
  --lc-font-display: 'Nohemi', 'Poppins', system-ui, sans-serif;
  --lc-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
}

html { color-scheme: light; }

body.lcs-site {
  background: var(--lc-canvas);
  color: var(--lc-text);
  font-family: var(--lc-font-sans);
  -webkit-font-smoothing: antialiased;
}

/* Keyboard focus is a system-wide affordance — one visible ring everywhere. */
body.lcs-site a:focus-visible,
body.lcs-site button:focus-visible,
body.lcs-site input:focus-visible,
body.lcs-site summary:focus-visible {
  outline: 2px solid var(--lc-green);
  outline-offset: 2px;
  border-radius: 4px;
}
/* On dark surfaces the green ring vanishes into the ink — flip it to lime. */
.lc-band :focus-visible,
.lc-grid-dark :focus-visible { outline-color: var(--lc-lime); }

/* ---- Surfaces & helpers ------------------------------------------------- */
/* audit #8: the reference's container is 1216px; every section uses max-w-7xl,
   so one override moves the whole site rather than 40 view edits. */
body.lcs-site .max-w-7xl { max-width: 1216px; }
.lc-canvas { background: var(--lc-canvas); }
.lc-tint   { background: var(--lc-tint); }
.lc-mono   { font-family: var(--lc-font-mono); }
.lc-shadow-card  { box-shadow: var(--lc-shadow-card); }
.lc-shadow-panel { box-shadow: var(--lc-shadow-panel); }
.lc-hairline-t { border-top: 1px solid var(--lc-hairline); }
.lc-hairline-b { border-bottom: 1px solid var(--lc-hairline); }
.lc-ink-text { color: var(--lc-ink); }
/* Keyword spans pop in the vivid brand green, as the reference's accent words do;
   the deep forest tokens stay for surfaces and long text. */
.lc-green-text { color: #1FA548; }
.lc-on-dark-text { color: var(--lc-on-dark); }
.lc-on-dark-muted-text { color: var(--lc-on-dark-muted); }

/* ---- Typography --------------------------------------------------------- */
.lc-display {
  font-family: var(--lc-font-display);
  /* measured: reference h1 is 56px/550; ours computed to 68px/600 */
  font-size: clamp(2.5rem, 4.2vw, 3.5rem);
  line-height: 1.232;   /* measured: 56/69 */
  letter-spacing: -.025em;
  max-width: 760px;
  font-weight: 550;
  letter-spacing: -.03em;
  color: var(--lc-ink);
}
.lc-h2 {
  font-family: var(--lc-font-display);
  font-size: clamp(1.9rem, 3.4vw, 2.75rem);
  line-height: 1.12;
  font-weight: 550;
  letter-spacing: -.02em;
  color: var(--lc-ink);
}
/* Section heading. Callers always set the size with a utility (text-3xl,
   md:text-[38px] and so on), so this deliberately sets no font-size -- it carries
   only the traits every section heading shares. It was used by page.blade.php and
   vertical.blade.php while undefined, so those headings rendered unstyled. */
.lc-h {
  font-family: var(--lc-font-display);
  font-weight: 550;
  line-height: 1.08;    /* measured: 38/41 */
  letter-spacing: -.024em;
  color: var(--lc-ink);
}
.lc-h3 { font-family: var(--lc-font-display); font-size: 1.25rem; font-weight: 550; color: var(--lc-ink); line-height: 1.3; }
.lc-sub { font-size: 1.25rem; line-height: 1.65; color: var(--lc-muted); }  /* measured: 20px/33 */

.lc-eyebrow {
  font-family: var(--lc-font-sans);  /* measured: Poppins 12px w500, not mono */
  font-size: .75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #178A3C;   /* audit #4: accent-coloured labels */
}
.lc-eyebrow span { color: var(--lc-green); }

.lc-stat {
  font-family: var(--lc-font-display);   /* audit #10: figures are display-face, not mono */
  font-variant-numeric: tabular-nums;
  font-weight: 550;
  letter-spacing: 0;
  color: var(--lc-ink);
}

/* Accent word inside a headline — the {!! !!} <span class="lcs-accent">…</span>
   carried in config/loopchat-pages.php hero titles. Green text with a lime
   highlighter band echoing the hero underline. */
/* audit #9: the reference colours headline words but never underlines them
   with a highlighter band; the band was ours and is gone. Vivid accent to
   match the .lc-green-text keyword spans. */
.lcs-accent { color: #1FA548; }

/* ---- Chips -------------------------------------------------------------- */
.lc-chip {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-family: var(--lc-font-mono);
  font-size: .6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: .35em .7em;
  border-radius: 999px;
  border: 1px solid var(--lc-hairline);
  color: var(--lc-muted);
  background: var(--lc-canvas);
  white-space: nowrap;
}
.lc-chip--coming {
  border: 1px dashed var(--lc-faint);
  color: var(--lc-muted);
  background: transparent;
}
/* On dark surfaces the chip flips its lines. */
.lc-band .lc-chip { border-color: var(--lc-hairline-dark); color: var(--lc-on-dark-muted); background: transparent; }
.lc-band .lc-chip--coming { border-color: rgba(231,236,232,.32); }

/* ---- Buttons ------------------------------------------------------------ */
.lc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: 12px 22px;
  border-radius: var(--lc-r-btn);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color .15s cubic-bezier(.4,0,.2,1), border-color .15s cubic-bezier(.4,0,.2,1), color .15s cubic-bezier(.4,0,.2,1);
}
/* No lift on hover. The reference's own hover changes only colour and border,
   and the movement was ours, not theirs. */

.lc-btn-primary { background: var(--lc-green); color: #fff; }
.lc-btn-primary:hover { background: var(--lc-green-2); color: #fff; }

/* Lime accent — hero + nav CTA only, one per viewport. */
.lc-btn-accent { background: #1FA548; color: #fff; border-color: #1FA548; }
.lc-btn-accent:hover { background: #178A3C; color: #fff; border-color: #178A3C; }

.lc-btn-quiet { background: transparent; border-color: var(--lc-hairline); color: var(--lc-ink); }
.lc-btn-quiet:hover { border-color: var(--lc-green); color: var(--lc-green); }

/* On-dark treatments for CTA/testimonial bands (keeps lime scarce up top). */
.lc-btn-invert { background: var(--lc-on-dark); color: var(--lc-ink); }
.lc-btn-invert:hover { background: #fff; color: var(--lc-ink); }
.lc-btn-ghost { background: transparent; border-color: rgba(231,236,232,.28); color: var(--lc-on-dark); }
.lc-btn-ghost:hover { border-color: var(--lc-lime); color: var(--lc-lime); }

/* ---- Cards -------------------------------------------------------------- */
.lc-card {
  background: #fff;
  border: 1px solid var(--lc-hairline);
  border-radius: var(--lc-r-card);
  transition: border-color .2s cubic-bezier(.4,0,.2,1);
}
a.lc-card:hover,
.lc-card--hover:hover { border-color: var(--lc-green); }

/* ---- Dark band --------------------------------------------------------- */
.lc-band {
  background-color: var(--lc-ink);
  background-image:
    linear-gradient(to right, rgba(204,243,129,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(204,243,129,.05) 1px, transparent 1px);
  background-size: 48px 48px;
  border-radius: 20px;
  color: var(--lc-on-dark);
}
/* Grid-line texture only (no radius/colour) — for the footer block which
   keeps its own rounding and dark background. */
.lc-grid-dark {
  background-image:
    linear-gradient(to right, rgba(204,243,129,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(204,243,129,.05) 1px, transparent 1px);
  background-size: 48px 48px;
}

.lc-band .lc-h2, .lc-band .lc-h3, .lc-band .lc-display { color: var(--lc-on-dark); }
.lc-band .lc-sub { color: var(--lc-on-dark-muted); }
.lc-band .lc-eyebrow { color: var(--lc-on-dark-muted); }
.lc-band .lc-eyebrow span { color: var(--lc-lime); }
.lc-band .lc-stat { color: var(--lc-on-dark); }

/* ---- Navigation -------------------------------------------------------- */
/* Stays white per spec; loopchat-motion.js animates the background to white on
   scroll, so a white base here means no snap on the first scroll tick. */
.lc-nav {
  background: rgba(255,255,255,.95);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--lc-hairline);
}
.lc-nav-link { color: var(--lc-muted); transition: color .3s cubic-bezier(.4,0,.2,1); }
.lc-nav-link:hover { color: #1FA548; }
.lc-nav-link:hover { color: var(--lc-ink); }

/* ---- Mega menu --------------------------------------------------------- */
.lc-mega {
  background: #fff;
  border: 1px solid var(--lc-hairline);
  border-radius: var(--lc-r-panel);
  box-shadow: var(--lc-shadow-panel);
  max-width: min(96vw, 1000px);
}
/* audit #8: only the multi-column megas widen to ~960; the single-column
   panels (Resources, Partner) stay content-sized, as the reference's do. */
.lc-mega.grid { min-width: min(960px, 92vw); }
/* Hidden megas still occupy layout, and a wide panel under an edge item
   pushed scrollWidth to 1664 at a 1440 viewport. Clip the stray overflow. */
body.lcs-site { overflow-x: clip; }
.lc-mega-heading {
  font-family: var(--lc-font-mono);
  font-size: .6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--lc-faint);
}
.lc-mega-item { border-radius: 8px; transition: background-color .15s cubic-bezier(.4,0,.2,1); }
.lc-mega-item:hover { background: var(--lc-tint); }
.lc-mega-item-title { color: var(--lc-ink); }
.lc-mega-item-blurb { color: var(--lc-muted); }

/* Icon tiles are 1px hairline squares — no beige fills. */
.lc-icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border: 0;
  border-radius: 8px;
  color: #178A3C;
  background: rgba(31, 165, 72, .10);   /* audit #9: tinted chip, not a bare stroke */
  transition: border-color .15s ease;
}
.lc-mega-item:hover .lc-icon-tile { border-color: var(--lc-green); }

/* ---- Footer ------------------------------------------------------------ */
.lc-foot-heading {
  font-family: var(--lc-font-mono);
  font-size: .6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--lc-on-dark-muted);
}
.lc-foot-link { color: var(--lc-on-dark-muted); transition: color .15s cubic-bezier(.4,0,.2,1); }
.lc-foot-link:hover { color: var(--lc-lime); }
.lc-foot-wordmark { color: var(--lc-on-dark); }
.lc-foot-wordmark span { color: var(--lc-lime); }

/* ---- FAQ / accordion tweaks (structure lives in layout inline <style>) -- */
.lc-faq { background: #fff; border: 1px solid var(--lc-hairline); border-radius: var(--lc-r-card); }
.lc-faq-q { color: var(--lc-ink); font-size: 1.125rem; line-height: 1.556; font-weight: 500; }  /* measured: 18px/28 w500 */

/* ---- Hero orchestration diagram --------------------------------------- */
.lc-diagram { width: 100%; height: auto; max-width: 560px; }
.lc-diagram text { font-family: var(--lc-font-sans); }
.lc-diagram .lc-diagram-mono { font-family: var(--lc-font-mono); }

/* Solid channel/outcome paths flow toward the core; Voice path stays a
   static dash (it carries no .lc-flow-path class). Motion is opt-in. */
@media (prefers-reduced-motion: no-preference) {
  .lc-flow-path {
    stroke-dasharray: 24 8;
    animation: lc-flow 3s linear infinite;
  }
  .lc-core-ring { animation: lc-core-pulse 3s ease-in-out infinite; }
  @keyframes lc-flow { to { stroke-dashoffset: -32; } }
  @keyframes lc-core-pulse {
    0%, 100% { opacity: .55; }
    50%      { opacity: 1; }
  }
}

/* ==========================================================================
   Section anatomies
   --------------------------------------------------------------------------
   Geometry here is measured, not guessed: each block records the numbers the
   reference layout actually computes to at a 1440px viewport (see
   _build-kit/marketing/m-home*.json). Keeping the measurements in comments
   means a future change can be checked against them instead of re-derived.
   ========================================================================== */

/* ---- Audience toggle ----------------------------------------------------
   Two-tab pill above the hero. Track is a tinted capsule; the active tab is a
   white chip that carries its own shadow. Measured: 10px 20px per tab. */
.lc-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--lc-hairline);
  background: var(--lc-tint);
}
.lc-toggle button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  padding: 10px 20px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--lc-muted);
  font: inherit;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: color .2s cubic-bezier(.4,0,.2,1), background-color .2s cubic-bezier(.4,0,.2,1);
}
.lc-toggle button:hover { color: var(--lc-ink); }
.lc-toggle button[aria-selected="true"] {
  background: #fff;
  color: var(--lc-ink);
  box-shadow: 0 1px 2px rgba(14, 31, 24, .06);
}
/* The nowrap labels made the pill 370px wide, which overflows a 375px screen
   (386px right edge measured). Step the tabs down before that can happen. */
@media (max-width: 430px) {
  .lc-toggle button { padding: 8px 12px; font-size: .8125rem; gap: 6px; }
}

/* ---- Stats band ---------------------------------------------------------
   Three figures divided by rules rather than boxed in cards.
   Measured: 3 x 346px, 40px gap, 24px of padding left of each rule. */
.lc-stats-band {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
}
.lc-stats-band > * {
  padding-left: 24px;
  border-left: 3px solid #1FA548;   /* audit #13: accent rules */
}

/* ---- Pain grid ----------------------------------------------------------
   The problem cards. Measured: 2 x 592px with a 32px gap; the fifth card is
   allowed to sit alone on the last row rather than stretch. */
.lc-pain-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}
.lc-pain-card { display: flex; flex-direction: column; gap: 20px; height: 100%; }
.lc-pain-figure {
  /* Four fixed columns -- donut, loss, arrow, win -- so the figure always reads
     as one row; long labels wrap inside their own column instead of pushing
     the win stat onto a second line. */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  padding: 24px;
  border-radius: var(--lc-r-card);
  background: var(--lc-tint);
}
/* The loss reads as the muted state, the recovery as the brand state, so the
   pair can be scanned without reading the labels. */
.lc-pain-loss  { color: var(--lc-faint); }
.lc-pain-win   { color: var(--lc-green-2); }
.lc-pain-stat  { font-family: var(--lc-font-mono); font-size: 1.5rem; font-weight: 600; line-height: 1.1; }
.lc-pain-label { font-size: .8125rem; color: var(--lc-muted); margin-top: 4px; }

/* ---- Alternating rows ---------------------------------------------------
   Image one side, copy the other, swapping each row. Measured gap 64px. */
.lc-alt-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 64px;
  align-items: center;
}
.lc-alt-row:nth-child(even) > :first-child { order: 2; }
.lc-alt-media {
  border-radius: var(--lc-r-card);
  overflow: hidden;
  border: 1px solid var(--lc-hairline);
  background: var(--lc-tint);
}
.lc-alt-media img { display: block; width: 100%; height: auto; }

/* Four-point sparkle used as the bullet marker in those rows. */
.lc-sparkle-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lc-sparkle-list li { display: grid; grid-template-columns: 18px 1fr; gap: 12px; align-items: start; }
.lc-sparkle {
  width: 14px; height: 14px; margin-top: 5px; flex: none;
  background: currentColor;
  color: var(--lc-green-2);
  /* four-point star, so no image request for a 14px glyph */
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
}

/* ---- Coverage grid ------------------------------------------------------
   Six stages, icon over title over blurb, no card borders.
   Measured: 3 x 373px, 40px row gap / 48px column gap, 36px icon. */
.lc-cover-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 48px;
}
/* 36px is the measured coverage-glyph size, but as a descendant rule this
   outranks .lc-ico-sm, so an icon deliberately sized down inside a 40px
   .lc-icon-tile was being forced back up to 36px and filling the tile. The
   default now yields to any explicit size class. */
.lc-cover-grid .lc-ico, .lc-cover-icon { color: var(--lc-green-2); }
.lc-cover-grid .lc-ico:not(.lc-ico-sm):not(.lc-ico-lg),
.lc-cover-icon:not(.lc-ico-sm):not(.lc-ico-lg) { width: 36px; height: 36px; }

/* ---- Feature cards ------------------------------------------------------
   Product cards carrying a screenshot. Measured: 2 x 592px, 32px gap,
   8px radius, 24px padding, white on a tinted band. */
.lc-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}
.lc-feature-card {
  background: #fff;
  border: 1px solid var(--lc-hairline);
  border-radius: 8px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.lc-feature-card img { display: block; width: 100%; height: auto; border-radius: 6px; }

/* ---- Comparison table ---------------------------------------------------
   Option against problem. Measured split is roughly one third to two thirds.
   The final row is ours and is tinted so the eye lands on it last. */
.lc-compare { width: 100%; border-collapse: collapse; border: 1px solid var(--lc-hairline); border-radius: var(--lc-r-card); overflow: hidden; }
.lc-compare th {
  text-align: left;
  font-family: var(--lc-font-mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lc-faint);
  background: var(--lc-tint);
  padding: 14px 24px;
}
.lc-compare td { padding: 18px 24px; border-top: 1px solid var(--lc-hairline); color: var(--lc-muted); vertical-align: top; }
.lc-compare td:first-child { width: 33%; color: var(--lc-ink); font-weight: 600; }
.lc-compare tr.is-ours td { background: #F2FAF5; color: var(--lc-green-2); font-weight: 600; }
/* Column variant. On a three-way feature table the highlight runs down a column
   rather than across a row, so the cells carry the marker themselves. These need
   the .lc-compare prefix to outrank .lc-compare th/td above; a bare utility class
   loses to it on specificity, which is why this belongs here and not in markup. */
.lc-compare th.is-ours { background: #EAF6EF; color: var(--lc-green-2); }
.lc-compare td.is-ours { background: #F2FAF5; color: var(--lc-green-2); font-weight: 600; }

/* ---- Client logo strip -------------------------------------------------- */
.lc-logos { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 48px; }
.lc-logos img { height: 32px; width: auto; opacity: .65; filter: grayscale(1); transition: opacity .2s cubic-bezier(.4,0,.2,1), filter .2s cubic-bezier(.4,0,.2,1); }
.lc-logos img:hover { opacity: 1; filter: none; }

/* ---- Narrow viewports ---------------------------------------------------
   Every grid above collapses to a single column; the alternating rows drop
   their order swap so the image always leads its own copy. */
@media (max-width: 900px) {
  .lc-stats-band, .lc-pain-grid, .lc-alt-row, .lc-cover-grid, .lc-feature-grid { grid-template-columns: minmax(0, 1fr); }
  .lc-alt-row { gap: 32px; }
  .lc-alt-row:nth-child(even) > :first-child { order: 0; }
  .lc-stats-band > * { padding-left: 0; border-left: 0; padding-top: 16px; border-top: 1px solid var(--lc-hairline); }
  .lc-logos { gap: 28px; }
}

/* ---- Icons --------------------------------------------------------------
   blade-heroicons renders an inline <svg> stroked with currentColor, so a glyph
   takes the colour of the text around it and the whole set recolours from the
   tokens above. An unsized inline svg fills its flex parent, so a size class is
   required on every icon, not optional. */
.lc-ico { width: 24px; height: 24px; flex: none; display: inline-block; vertical-align: middle; }
.lc-ico-sm { width: 20px; height: 20px; }
.lc-ico-lg { width: 32px; height: 32px; }
.lc-ico-accent { color: var(--lc-green-2); }
.lc-ico-muted  { color: var(--lc-faint); }

/* Repeated section CTA: near-black pill with a small glossy coin glyph and a
   soft brand glow, the control the reference places after every section. */
.lc-btn-coin {
  background: #252525;              /* audit: neutral near-black, not green-tinted */
  color: #fff !important;
  border-color: #252525;
  border-radius: 999px;
  height: 56px;
  padding: 0 28px;
  font-size: 16px;
  font-weight: 600;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.1);   /* the reference's shadow-md */
  transition: background-color .3s cubic-bezier(.4,0,.2,1), border-color .3s cubic-bezier(.4,0,.2,1);
}
.lc-btn-coin:hover { background: #1FA548; border-color: #1FA548; }  /* hover reaches the brand colour */
.lc-btn-coin .lc-coin {
  width: 18px;
  height: 18px;
  flex: none;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #8CF79A, #1FA548 55%, #0E5D28);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.5);
}

/* Accordion open animation. The reference's FAQ eases open over ~240ms; a bare
   <details> snaps. interpolate-size lets height animate to auto; browsers
   without support simply keep the instant open. */
:root { interpolate-size: allow-keywords; }
details::details-content {
  height: 0;
  overflow: clip;
  transition: height .25s cubic-bezier(.4,0,.2,1), content-visibility .25s allow-discrete;
}
details[open]::details-content { height: auto; }

/* ---- Hero collage -------------------------------------------------------
   The reference's hero is a layered composition, not a flat screenshot: an
   icon rail, a revenue card, stat chips and a sparkline around the product.
   Built as live DOM in the same flat hairline language -- no shadows, no
   images -- so it stays crisp at any DPI and recolours from the tokens. */
.lc-collage { position: relative; min-height: 460px; }
.lc-collage-card {
  background: #fff;
  border: 1px solid var(--lc-hairline);
  border-radius: 12px;
}
.lc-collage-rail {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 10px;
}
.lc-collage-rail .lc-collage-card {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  color: var(--lc-green-2);
}
.lc-collage-main { position: absolute; left: 64px; right: 96px; top: 24px; }
.lc-collage-chip {
  position: absolute;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
}
.lc-collage-chip .lc-chip-num { font-family: var(--lc-font-mono); font-weight: 600; color: #1FA548; font-size: .9375rem; line-height: 1.1; }
.lc-collage-chip .lc-chip-label { font-size: .6875rem; color: var(--lc-muted); line-height: 1.25; max-width: 110px; }
.lc-collage-report { position: absolute; right: 0; bottom: 24px; width: 250px; padding: 18px; }
.lc-collage-spark { position: absolute; right: 12px; top: 10px; width: 150px; color: #1FA548; }

@media (prefers-reduced-motion: no-preference) {
  .lc-collage-chip { animation: lc-drift 7s ease-in-out infinite; }
  .lc-collage-chip:nth-of-type(odd) { animation-delay: -3.5s; }
  @keyframes lc-drift { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
}
@media (max-width: 1023px) {
  /* Below lg the floats would overlap the copy; the hero falls back to the
     plain framed screenshot, which the markup keeps as the base layer. */
  .lc-collage { min-height: 0; }
  .lc-collage-rail, .lc-collage-chip, .lc-collage-report, .lc-collage-spark { display: none; }
  .lc-collage-main { position: static; }
}

/* Light footer (audit #1). The footer markup reuses the dark-theme text
   classes; inside .lc-foot-light they resolve to the light palette instead,
   so the swap needed no per-line markup edits. */
.lc-foot-light { color: var(--lc-text); }
.lc-foot-light .lc-on-dark-text { color: var(--lc-ink); }
.lc-foot-light .lc-on-dark-muted-text { color: var(--lc-muted); }
.lc-foot-light .lc-foot-heading { color: var(--lc-faint); }
.lc-foot-light .lc-foot-link { color: var(--lc-muted); }
.lc-foot-light .lc-foot-link:hover { color: #1FA548; }
.lc-foot-light .lc-foot-wordmark { color: var(--lc-ink); }
.lc-foot-light .lc-foot-wordmark span { color: #1FA548; }

/* =====================================================================
   Reference pass 2026-08-30 — the reference platform nav / hover sheet / hero / video,
   the reference platform audience toggle + coin CTA. Measured values, see session log.
   ===================================================================== */
/* ---- Nav: 78px white bar, plain 16px links, square solid CTA --------- */
.lc-nav { background: #fff; border-bottom: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.lc-nav .lc-nav-link { color: #000; font-size: 16px; font-weight: 400; padding: 12px 15px; line-height: 24px; }
.lc-nav .lc-nav-link:hover, .lcs-mega.mega-open > .lc-nav-link { color: #1FA548; }
.lc-nav-cta { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 12px 24px;
  background: var(--lc-green); color: #fff !important; font-size: 16px; font-weight: 500; border-radius: 0;
  white-space: nowrap; transition: background-color .2s ease; }
.lc-nav-cta:hover { background: var(--lc-green-2); }

/* ---- Hover mega-menu as a full-width sheet under the bar ------------ */
.mega-panel.mega-sheet { position: fixed; left: 0; right: 0; top: 78px; width: 100vw; transform: translateY(6px); }
.mega-open .mega-panel.mega-sheet { transform: translateY(0); }
.lc-mega.lc-mega-sheet { max-width: none; border-radius: 0; border: 0; border-top: 1px solid var(--lc-hairline);
  box-shadow: 0 24px 40px -20px rgba(14,31,24,.18); padding: 40px 20px; display: flex; gap: 10px; }
.lc-mega-sheet > div { width: 295px; flex: none; margin: 0; }
.lc-mega-sheet .lc-mega-heading { font-family: var(--lc-font-sans); font-size: 14px; font-weight: 500; letter-spacing: 0;
  text-transform: uppercase; color: #475467; margin-bottom: 22px; }
.lc-mega-sheet .lc-mega-item { padding: 0; margin: 0 0 26px; gap: 15px; align-items: flex-start; border-radius: 0; background: transparent !important; }
.lc-mega-sheet .lc-icon-tile { width: 30px; height: 30px; margin: 0; background: transparent; color: #1B5741; border-radius: 0; }
.lc-mega-sheet .lc-icon-tile i { font-size: 22px; }
.lc-mega-sheet .lc-mega-item-title { font-size: 16px; font-weight: 600; color: #000; line-height: 24px; }
.lc-mega-sheet .lc-mega-item-blurb { font-size: 14px; line-height: 21px; color: #171923; margin-top: 4px; }
.lc-mega-sheet .lc-mega-item:hover .lc-mega-item-title { color: #1FA548; }

/* ---- Audience toggle (the reference platform pill, real links) --------------------- */
.lc-toggle { padding: 4px; gap: 0; border: 1px solid #E4E4E7; background: rgba(244,244,245,.8);
  box-shadow: 0 1px 2px rgba(0,0,0,.05); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.lc-toggle a, .lc-toggle button { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 999px;
  font-size: 16px; font-weight: 500; line-height: 1.2; color: #52525B; text-decoration: none; background: transparent; transition: color .2s ease; }
.lc-toggle a:hover, .lc-toggle button:hover { color: #18181B; }
.lc-toggle a[aria-selected="true"], .lc-toggle button[aria-selected="true"] { background: #fff; color: #18181B; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.lc-toggle .lc-shopify { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: #18181B; letter-spacing: -.01em; }

/* ---- Centered hero (reference site) ---------------------------------------- */
.lc-hero-center { text-align: center; display: flex; flex-direction: column; align-items: center; }
.lc-hero-center .lc-display { max-width: 1120px; margin: 0 auto; font-size: clamp(2.75rem, 5.6vw, 4.9rem); line-height: 1.04; font-weight: 500; }
.lc-hero-center .lc-sub { font-size: 22px; line-height: 1.45; color: rgba(14,31,24,.8); max-width: 1025px; margin-left: auto; margin-right: auto; }
.lc-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 26px; margin: 30px 0 38px; }
.lc-chip-pill { position: relative; display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 22px;
  border: 1px solid #DDE3DF; border-radius: 999px; background: #fff; font-size: 16px; font-weight: 500; color: var(--lc-ink); }
.lc-chip-pill + .lc-chip-pill::before { content: ""; position: absolute; left: -26px; top: 50%; width: 26px; height: 1px; background: #DDE3DF; }
.lc-chip-pill svg { width: 26px; height: 26px; flex: none; }
.lc-btn-dark { background: #000; color: #fff !important; border-color: #000; border-radius: 999px; height: 56px; padding: 0 28px; font-size: 16px; font-weight: 600; }
.lc-btn-dark:hover { background: #1FA548; border-color: #1FA548; }

/* ---- Coin CTA (the reference platform pattern, user's coin art) -------------------- */
.lc-btn-coin { padding: 0 20px 0 12px; gap: 8px; }
.lc-btn-coin:hover { background: #1FA548; border-color: #1FA548; }
.lc-btn-coin .lc-coin, .lc-coin { position: relative; width: 32px; height: 32px; flex: none; border-radius: 50%;
  background: url(../imgs/coin-dollar.png) center / cover no-repeat;
  box-shadow: 0 0 26px rgba(250,204,21,1), 0 0 12px rgba(255,247,173,.95), 0 8px 16px rgba(14,31,24,.38);
  outline: 1px solid rgba(254,240,138,.8); transition: transform .3s cubic-bezier(.4,0,.2,1); }
.lc-btn-coin .lc-coin::after { content: ""; position: absolute; left: 6px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.7); filter: blur(1px); }
.lc-btn-coin:hover .lc-coin { transform: scale(1.1) rotate(-8deg); }

/* ---- Video (reference site: holder → area → card, thumbnail + play) -------- */
.lc-video-holder { padding: 0 20px; }
.lc-video-area { max-width: 1400px; margin: 0 auto; padding-top: 40px; background: #fff; }
.lc-video-card { position: relative; width: 100%; max-width: 1258px; margin: 0 auto; overflow: hidden; background: #000; }
.lc-video-card video { display: block; width: 100%; height: auto; }
.lc-video-thumb { position: absolute; inset: 0; z-index: 5; cursor: pointer; transition: opacity .3s ease; }
.lc-video-thumb.is-hidden { opacity: 0; pointer-events: none; }
.lc-video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lc-video-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 100px; height: 100px; border-radius: 100%;
  background: rgba(14,31,24,.4); display: flex; align-items: center; justify-content: center; transition: transform .2s ease; }
.lc-video-thumb:hover .lc-video-play { transform: translate(-50%,-50%) scale(1.06); }
.lc-video-play svg { width: 35px; height: 35px; margin-left: 4px; }
@media (max-width: 768px) { .lc-video-play { width: 80px; height: 80px; } .lc-video-play svg { width: 25px; height: 25px; } }
@media (max-width: 479px) { .lc-video-play { width: 60px; height: 60px; } .lc-video-play svg { width: 20px; height: 20px; } }
/* hero headline: two lines at desktop, no orphan; video card holds 16:9 before metadata */
.lc-hero-center .lc-display { font-size: clamp(2.75rem, 5vw, 4.5rem); max-width: 1200px; }
.lc-video-card { aspect-ratio: 16 / 9; }
.lc-video-card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* top bar: no motion — hover sheet appears instantly */
.mega-panel.mega-sheet, .mega-open .mega-panel.mega-sheet { transition: none; transform: none; }
/* Audience switch: page-enter animation on every landing (measured: 0.55s, easeOutQuint-ish,
   from opacity 0 / -40px), pill state colours transition 0.2s. */
@keyframes lcPageEnter { 0% { opacity: 0; transform: translateY(-40px); } 100% { opacity: 1; transform: none; } }
.lc-page-enter { animation: lcPageEnter .55s cubic-bezier(.22, 1, .36, 1) both; }
@media (prefers-reduced-motion: reduce) { .lc-page-enter { animation: none; } }
.lc-toggle a, .lc-toggle button { transition: color .2s cubic-bezier(.4,0,.2,1), background-color .2s cubic-bezier(.4,0,.2,1); }
.lc-toggle a[aria-selected="true"] { box-shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1); }
/* Feature rows now carry vector illustrations (transparent) — no photo frame around them. */
.lc-alt-media { border: 0; background: transparent; border-radius: 0; overflow: visible; }

/* ---- Skeleton screens (partials/skeleton.blade.php) ------------------ */
.lc-sk { position: fixed; inset: 0; z-index: 70; background: #fff; overflow: hidden; opacity: 1; transition: opacity .3s ease; }
.lc-sk.is-done { opacity: 0; pointer-events: none; }
.lc-sk-b { display: block; position: relative; overflow: hidden; border-radius: 8px; background: #EEF1EE; }
.lc-sk-b::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.75) 50%, rgba(255,255,255,0) 100%);
  animation: lcShimmer 1.4s ease-in-out infinite; }
@keyframes lcShimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .lc-sk-b::after { animation: none; } .lc-sk { transition: none; } }
.lc-sk-b--pill { border-radius: 999px; }
.lc-sk-b--sq { border-radius: 0; }
.lc-sk-b--field { border-radius: 10px; }
.lc-sk-b--img { aspect-ratio: 16 / 10; border-radius: 16px; }
.lc-sk-b--video { aspect-ratio: 16 / 9; border-radius: 0; }
.lc-sk-nav { height: 78px; padding: 0 20px; max-width: 1440px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.lc-sk-nav-links { display: flex; align-items: center; gap: 24px; }
@media (max-width: 1023px) { .lc-sk-nav-links:first-of-type { display: none; } }
.lc-sk-page { padding: 40px 20px 0; }
.lc-sk-wrap { max-width: 1280px; margin: 0 auto; }
.lc-sk-wrap--narrow { max-width: 760px; }
.lc-sk-center { max-width: 1280px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.lc-sk-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.lc-sk-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; width: 100%; }
.lc-sk-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: center; width: 100%; }
.lc-sk-grid-2--flip > :first-child { order: 2; }
.lc-sk-card { border: 1px solid #E5E7E1; border-radius: 16px; padding: 24px; background: #fff; }
.lc-sk-faq { display: flex; align-items: center; justify-content: space-between; padding: 22px 0; border-bottom: 1px solid #E5E7E1; }
.lc-sk .mt-2 { margin-top: 8px } .lc-sk .mt-3 { margin-top: 12px } .lc-sk .mt-4 { margin-top: 16px } .lc-sk .mt-5 { margin-top: 20px }
.lc-sk .mt-6 { margin-top: 24px } .lc-sk .mt-7 { margin-top: 28px } .lc-sk .mt-8 { margin-top: 32px } .lc-sk .mt-10 { margin-top: 40px }
.lc-sk .mt-12 { margin-top: 48px } .lc-sk .mt-14 { margin-top: 56px } .lc-sk .mt-16 { margin-top: 64px }
@media (max-width: 767px) { .lc-sk-grid-3, .lc-sk-grid-2 { grid-template-columns: minmax(0, 1fr); } .lc-sk-grid-2--flip > :first-child { order: 0; } }

/* ---- Mobile top bar (fix 2026-08-31): the full-size CTA pushed the hamburger
   off-screen and its container swallowed the tap. Compact logo + CTA under 640px. */
@media (max-width: 639px) {
  .lc-nav img { height: 32px; }
  .lc-nav-cta { height: 38px; padding: 0 12px; font-size: 13px; }
}

/* ---- Mobile design pass (2026-08-31): the desktop-scaled hero, chips row,
   CTAs and stat digits overwhelmed a phone screen. Compact everything so the
   hero fits ~1.5 screens and rows read as designed. ---- */
@media (max-width: 767px) {
  .lc-hero-center .lc-display { font-size: clamp(1.9rem, 8.4vw, 2.6rem); line-height: 1.12; }
  .lc-hero-center .lc-sub { font-size: 17px; line-height: 1.55; }
  .lc-eyebrow { font-size: .65rem; letter-spacing: .08em; }
  .lc-toggle a, .lc-toggle button { padding: 8px 14px; font-size: 14px; }
  /* chips: 2x2 grid of compact pills, no connector lines */
  .lc-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; margin: 22px 0 26px; }
  .lc-chip-pill { height: 44px; padding: 0 10px; font-size: 13px; gap: 7px; justify-content: center; }
  .lc-chip-pill svg { width: 18px; height: 18px; }
  .lc-chip-pill + .lc-chip-pill::before { display: none; }
  .lc-btn-coin, .lc-btn-dark { height: 48px; padding-top: 0; padding-bottom: 0; font-size: 15px; }
  .lc-btn-coin .lc-coin { width: 26px; height: 26px; }
  .lc-stats-band .lc-h { font-size: 40px; }
  .lc-pain-card { gap: 12px; }
  .lc-video-holder { padding: 0 12px; }
}
/* Mobile: no equalizer backdrop behind the hero (owner request) — it reads as noise on a phone. */
@media (max-width: 767px) { #lc-eq { display: none !important; } }