/* RevMatic AI | home page only ( / ). Load after /assets/css/site.css.
   Everything here uses the shared tokens. Shared patterns (hero, picker, steps, band, apps strip, FAQ, closing
   band) come from site.css unchanged; the product lanes copy the Cue card from cue.css; this file adds the home-only pieces:
   1 hero push   2 picker foot   3 what we do list   4 product lanes   6 small helpers, and the hero grain.
   (Section 5, the section about Leo, is gone: Leo stays in the hero and closing lines and the About page.) */

/* ================================================================ 1 Hero: a slow push on the ocean view
   The video loop is locked off, so the page adds the camera move on its own clock. Both the photo and the
   video carry the same animation from first paint, so the crossfade between them never jumps.
   Off on phones (the photo is a band there), under reduced motion and with ?still (site.css). */
@keyframes home-push { from { transform: scale(1); } to { transform: scale(1.045); } }
@media (min-width: 768px) {
  .hero--home .hero__media img,
  .hero--home .hero__media video { transform-origin: 72% 55%; animation: home-push 26s ease-in-out infinite alternate; will-change: transform; }
}

/* the two cues under the hero: the example audits and the products (no new orange: they are quiet text links) */
.hero__foot .hero__cues { justify-self: center; display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 0 28px; }
.hero__cues--m { display: none; }
@media (max-width: 1023px) {
  .hero__foot .hero__cues { gap: 0 20px; }
  .hero__foot .hero__cues .hero__cue { font-size: 11px; }
}
@media (max-width: 767px) {
  .hero__cues--m { display: flex; flex-wrap: wrap; gap: 0 22px; margin-top: 10px; }
  .hero__cues--m .hero__cue--m { margin-top: 0; }
}

/* ================================================================ 2 Picker foot: the link to every business */
.pickfoot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 24px;
  margin-top: 18px; padding-top: 4px;
}
.pickfoot p { font: 400 15px/1.5 var(--font-text); color: var(--smoke); }
@media (min-width: 1180px) {
  .js .pickfoot { margin-left: calc(272px + 48px); }
}
@media (max-width: 767px) {
  .pickfoot { flex-direction: column; align-items: flex-start; margin-top: 14px; }
}

/* ================================================================ 3 What we do: eight groups as one numbered list
   Desktop: the head stays in view on the left while the list scrolls on the right. Each row is one link
   (the title's link stretches over the row); the outlined number fills with the afterglow on hover. */
.what { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.what__head { min-width: 0; }
.what__head .h2 { margin-bottom: 18px; }
.what__more { margin-top: 18px; }
.svcs { position: relative; isolation: isolate; min-width: 0; border-top: 1px solid var(--line); }
.svcs__item {
  position: relative; display: grid; grid-template-columns: 84px minmax(0, 1fr) 20px; gap: 0 18px; align-items: start;
  padding: 24px 12px 24px 0; border-bottom: 1px solid var(--line);
  transition: background-color 0.25s;
}
.svcs__item::before {
  content: ""; position: absolute; inset: 0 -14px; z-index: -1; pointer-events: none; opacity: 0; border-radius: 12px;
  background: linear-gradient(90deg, rgba(140, 112, 255, 0.10), rgba(140, 112, 255, 0) 75%);
  transition: opacity 0.25s;
}
.svcs__item:hover::before { opacity: 1; }
.svcs__num {
  font-family: var(--font-display); font-weight: 800; font-stretch: 108%; font-size: 46px; line-height: 0.82;
  letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 1.1px rgba(187, 169, 255, 0.5);
  transition: -webkit-text-stroke-color 0.2s;
}
.svcs__item:hover .svcs__num, .svcs__item:focus-within .svcs__num {
  background: var(--afterglow); -webkit-background-clip: text; background-clip: text; -webkit-text-stroke-color: transparent;
}
.svcs__t { min-width: 0; }
.svcs__name {
  font-family: var(--font-display); font-weight: 800; font-stretch: 104%; letter-spacing: -0.015em;
  font-size: clamp(1.2rem, 0.98rem + 0.62vw, 1.6rem); line-height: 1.12; color: var(--platinum);
}
.svcs__name a { color: inherit; }
.svcs__name a::after { content: ""; position: absolute; inset: 0; }
.svcs__name a:focus-visible { outline: none; }
.svcs__name a:focus-visible::after { outline: 2px solid var(--plasma-soft); outline-offset: 2px; border-radius: 10px; }
.svcs__line { margin-top: 8px; max-width: 38em; font: 400 15.5px/1.55 var(--font-text); color: var(--ink-70); }
.svcs__item .arr { margin-top: 5px; color: var(--plasma-soft); transition: transform 0.18s var(--ease-out); }
.svcs__item:hover .arr { transform: translateX(3px); }
@media (min-width: 1024px) {
  .what { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; }
  .what__head { position: sticky; top: calc(var(--stick) + 16px); transition: top 0.4s var(--ease-out); }
  [data-hdr="up"] .what__head { top: calc(var(--header-h) + 24px); }
}
@media (min-width: 1280px) {
  .what { gap: 104px; }
}
@media (max-width: 767px) {
  .what { gap: 22px; }
  .what__head .h2 { margin-bottom: 14px; }
  .what__more { margin-top: 10px; }
  .svcs__item { grid-template-columns: 40px minmax(0, 1fr) 16px; gap: 0 12px; padding: 18px 0 19px; }
  .svcs__item::before { inset: 0 -8px; }
  .svcs__num { font-size: 26px; -webkit-text-stroke-width: 1px; line-height: 0.9; }
  .svcs__name { font-size: 18.5px; line-height: 1.18; letter-spacing: -0.01em; font-stretch: 100%; }
  .svcs__line { margin-top: 6px; font-size: 15px; line-height: 1.5; }
  .svcs__item .arr { margin-top: 2px; }
}

/* ================================================================ 4 Product lanes (2026-10-01)
   The home page's own showing of the products: Smooth Flow, Investor Desk and the Cue line, one card each, every card
   in its product's own accent (never on a button). The card copies .cuecard and the list copies .cuelist from cue.css
   value for value, so the home page needs no extra stylesheet; a change there is mirrored here by hand.
   Each accent is used only for its own product: the kicker number, the name on hover, the checks, the top hairline,
   the glow and the screen's halo. */
.lanes {
  --cue-roof: #63E2C6; --cue-gold: #E8C96A;
  /* Smooth Flow: the blue its own page set (smooth-flow.css section 1), copied here value for value.
     Investor Desk: its page sets no accent yet, so this green holds the place; copy the final hex here when it does,
     and keep it clearly apart from the Smooth Flow blue, the two Cue colors and the Book orange. */
  --sf-acc: #50B8E8; --sf-acc-rgb: 80, 184, 232;
  --id-acc: #9BE08A; --id-acc-rgb: 155, 224, 138;
  display: grid; gap: 24px;
}
.lane {
  --acc: var(--plasma-soft); --acc-rgb: 140, 112, 255;
  position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr);
  border-radius: var(--r-card); border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, rgba(30, 24, 41, 0.9) 0%, rgba(20, 16, 29, 0.96) 100%);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.4);
}
.lane--sf { --acc: var(--sf-acc); --acc-rgb: var(--sf-acc-rgb); }
.lane--id { --acc: var(--id-acc); --acc-rgb: var(--id-acc-rgb); }
.lane::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(55% 75% at 82% 40%, rgba(var(--acc-rgb), 0.16), rgba(var(--acc-rgb), 0) 72%);
}
.lane--flip::before { background: radial-gradient(55% 75% at 18% 40%, rgba(var(--acc-rgb), 0.16), rgba(var(--acc-rgb), 0) 72%); }
/* the Cue card carries both of its Cues: teal on the left of the glow, gold on the right */
.lane--cue::before {
  background:
    radial-gradient(40% 60% at 72% 55%, rgba(99, 226, 198, 0.13), rgba(99, 226, 198, 0) 72%),
    radial-gradient(40% 60% at 92% 45%, rgba(232, 201, 106, 0.13), rgba(232, 201, 106, 0) 72%);
}
.lane::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, rgba(var(--acc-rgb), 0), rgba(var(--acc-rgb), 0.85), rgba(var(--acc-rgb), 0)); }
.lane--cue::after { background: linear-gradient(90deg, rgba(99, 226, 198, 0), rgba(99, 226, 198, 0.8) 45%, rgba(232, 201, 106, 0.8) 60%, rgba(232, 201, 106, 0)); }
.lane__copy { padding: clamp(26px, 1rem + 2.4vw, 56px); min-width: 0; }
.lane__k { letter-spacing: 0.1em; color: var(--smoke); }
.lane__n { margin-right: 10px; color: var(--acc); }
.lane--cue .lane__n { background: linear-gradient(90deg, var(--cue-roof), var(--cue-gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lane__name { margin-top: 14px; font-family: var(--font-display); font-weight: 800; font-stretch: 108%; font-size: var(--fs-h2); line-height: 1; letter-spacing: -0.022em; color: var(--platinum); }
.lane__name a { display: inline-block; padding: 7px 0; color: var(--platinum); transition: color 0.18s; }
.lane__name a:hover { color: var(--acc); }
.lane--cue .lane__name a:hover { color: var(--cue-roof); }
.lane__line { margin-top: 14px; max-width: 22em; font: 400 clamp(1.35rem, 1.1rem + 0.7vw, 1.75rem)/1.22 var(--font-sig); font-style: italic; color: var(--platinum); text-wrap: balance; }
.lane__p { margin-top: 16px; max-width: 36em; font: 400 16.5px/1.62 var(--font-text); color: var(--ink-88); }
.lane__pts { margin-top: 22px; gap: 10px; }
.lane .chk { color: var(--acc); }
.lane__ctas { margin-top: 28px; gap: 12px 28px; }

/* the product sample: a photo of the product's own world, dimmed, with a sample screen floating over it. The sample
   is HTML (copy word for word from that product's own page), so it stays sharp at every width and takes the accent. */
.lane__media { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; min-height: 300px; margin: 0; padding: 32px 20px; overflow: hidden; }
.lane__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--pos, 50% 50%); opacity: 0.32; }
.lane__media::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(20, 16, 29, 0.92) 0%, rgba(20, 16, 29, 0.35) 40%, rgba(20, 16, 29, 0.55) 100%);
}
.lane__shot { position: relative; display: block; width: min(420px, 100%); }
.lshot {
  padding: 18px 18px 20px; border-radius: 18px; border: 1px solid rgba(243, 240, 248, 0.16);
  background: linear-gradient(180deg, rgba(22, 17, 31, 0.94), rgba(11, 10, 16, 0.96));
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 70px rgba(var(--acc-rgb), 0.2);
  transition: transform 0.6s var(--ease-out);
}
.lane:hover .lshot { transform: translateY(-6px); }
.lshot__bar { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); font-size: 11px; letter-spacing: 0.1em; color: var(--smoke); }
.lshot__bar span:first-child { color: var(--acc); }
.lshot__hi { margin-top: 16px; font: 400 26px/1.1 var(--font-sig); font-style: italic; color: var(--platinum); }
.lshot__sub { margin-top: 6px; font: 400 15px/1.45 var(--font-text); color: var(--ink-78); }
.lshot__list { display: grid; gap: 10px; margin-top: 16px; padding: 0; list-style: none; }
.lshot--id .lshot__list { gap: 0; margin-top: 4px; }
/* Smooth Flow: a drafted follow-up, waiting for your yes */
.lcard { padding: 12px 14px 13px; border-radius: 12px; border: 1px solid rgba(var(--acc-rgb), 0.28); background: rgba(var(--acc-rgb), 0.05); }
.lcard__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; font-size: 10.5px; letter-spacing: 0.07em; color: var(--smoke); }
.lcard__tag { color: var(--acc); }
.lcard__txt { margin-top: 7px; font: 400 14.5px/1.45 var(--font-text); color: var(--platinum); }
/* Investor Desk: one match in the morning email, the fit score in a ring */
.lrow { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.lrow:last-child { border-bottom: 0; padding-bottom: 2px; }
.lrow__score { position: relative; display: grid; place-items: center; width: 44px; height: 44px; }
.lrow__score svg { position: absolute; inset: 0; width: 44px; height: 44px; transform: rotate(-90deg); }
.lrow__bg { fill: none; stroke: rgba(243, 240, 248, 0.12); stroke-width: 3; }
.lrow__fg { fill: none; stroke: var(--acc); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 119.38; }
.lrow__score b { position: relative; font: 600 15px/1 var(--font-text); color: var(--platinum); }
.lrow__t { font: 600 15.5px/1.3 var(--font-text); color: var(--platinum); }
.lrow__f { margin-top: 2px; font: 400 13.5px/1.4 var(--font-text); color: var(--smoke); }
.lrow__why { margin-top: 6px; font: 400 14px/1.45 var(--font-text); color: var(--ink-78); }
.lrow__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.lrow__tags span { padding: 4px 8px; border-radius: 999px; border: 1px solid rgba(var(--acc-rgb), 0.35); font-size: 10.5px; letter-spacing: 0.06em; color: var(--acc); }

/* the Cue line: its two phones side by side, each with its own glow */
.lane__pair { align-items: flex-end; gap: 0; padding: 32px 20px 0; }
.lane__pair::before { display: none; }
.lane__ph { position: relative; display: block; width: min(210px, 44%); }
.lane__ph--roof { --ph-rgb: 99, 226, 198; z-index: 1; margin-right: -14px; transform: translateY(18px); }
.lane__ph--gold { --ph-rgb: 232, 201, 106; }
.lane__ph img {
  display: block; width: 100%; aspect-ratio: 390 / 600; object-fit: cover; object-position: top;
  border: 8px solid #0b0a0e; border-bottom: 0; border-radius: 32px 32px 0 0;
  box-shadow: 0 0 0 1px rgba(243, 240, 248, 0.16), 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 60px rgba(var(--ph-rgb), 0.24);
  transition: transform 0.6s var(--ease-out);
}
.lane:hover .lane__ph img { transform: translateY(-6px); }

@media (min-width: 1024px) {
  .lane { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); min-height: 480px; }
  .lane--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .lane--flip .lane__media { order: -1; }
  .lane__copy { align-self: center; }
  .lane__media { padding: 40px 32px; }
  .lane__pair { padding: 48px 24px 0; }
  .lane__media:not(.lane__pair)::before { background: linear-gradient(90deg, rgba(20, 16, 29, 0.9) 0%, rgba(20, 16, 29, 0.25) 45%, rgba(20, 16, 29, 0.5) 100%); }
  .lane--flip .lane__media::before { background: linear-gradient(270deg, rgba(20, 16, 29, 0.9) 0%, rgba(20, 16, 29, 0.25) 45%, rgba(20, 16, 29, 0.5) 100%); }
}
@media (max-width: 1023px) {
  .lane__media { border-top: 1px solid var(--line); }
  .lane__pair { border-top: 0; }
  .lane__ph img { aspect-ratio: 390 / 440; }
}
@media (max-width: 767px) {
  .lane__name { font-size: 31px; }
  .lane__ctas { flex-direction: column; align-items: stretch; gap: 6px; }
  .lane__ctas .btn { width: 100%; }
  .lane__ctas .textlink { align-self: flex-start; }
  .lane__media { min-height: 0; padding: 24px 16px; }
  .lane__shot { width: 100%; max-width: 420px; }
  .lshot { padding: 16px 14px 16px; }
  .lshot__hi { font-size: 24px; }
  .lane__pair { padding: 24px 16px 0; }
  .lane__ph { width: min(170px, 46%); }
  .lane__ph img { aspect-ratio: 390 / 320; border-width: 6px; border-radius: 26px 26px 0 0; }
  .lane__ph--roof { transform: translateY(12px); }
}
@media (prefers-reduced-motion: reduce) {
  .lshot, .lane__ph img { transition: none; }
  .lane:hover .lshot, .lane:hover .lane__ph img { transform: none; }
}

/* the Cue list, copied from cue.css section 3 so the markup is the same as on /apps/ */
.cuelist { display: grid; gap: 8px; margin-top: 22px; list-style: none; padding: 0; }
.cuelist__i { --acc: var(--plasma-soft); --acc-rgb: 140, 112, 255; }
.cuelist__i--roof { --acc: var(--cue-roof); --acc-rgb: 99, 226, 198; }
.cuelist__i--gold { --acc: var(--cue-gold); --acc-rgb: 232, 201, 106; }
.cuelist__i a {
  position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; min-height: 56px; padding: 15px 44px 15px 38px;
  border-radius: var(--r-btn); border: 1px solid var(--line); background: rgba(7, 6, 11, 0.3); color: var(--ink-78);
  transition: border-color 0.18s, background-color 0.18s;
}
.cuelist__i a::before {
  content: ""; position: absolute; left: 16px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%;
  background: var(--acc); box-shadow: 0 0 10px rgba(var(--acc-rgb), 0.8);
}
.cuelist__i--next a::before { background: none; box-shadow: none; border: 1px dashed var(--plasma-soft); }
.cuelist__i b { font: 600 17px/1.3 var(--font-text); color: var(--platinum); }
.cuelist__i span { font: 400 15px/1.4 var(--font-text); color: var(--smoke); }
.cuelist__i .arr { position: absolute; right: 16px; top: 50%; width: 16px; height: 16px; margin-top: -8px; color: var(--acc); transition: transform 0.25s var(--ease-out); }
.cuelist__i a:hover { border-color: rgba(var(--acc-rgb), 0.55); background: rgba(var(--acc-rgb), 0.07); }
.cuelist__i a:hover .arr { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .cuelist__i a:hover .arr { transform: none; } }

.lanes__more { margin-top: clamp(28px, 1rem + 1.8vw, 44px); }

/* ================================================================ 6 Small helpers */
.more-row { margin-top: clamp(28px, 1rem + 1.8vw, 44px); }

/* a fine, still film grain over the photo and the loop: it settles the texture the generator left on the water */
.hero--home .hero__media::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 1.4 -0.2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* phone widths: no sample label under 12px (2026-10-06) */
@media (max-width: 767px) {
  .hero__foot .hero__cues .hero__cue { font-size: 12px; }
  .lshot__bar, .lcard__top, .lrow__tags span { font-size: 12px; }
}