/* =========================================================================
   Letfold marketing — design layer v2 (2026-09-17)

   Loaded on every public page, after marketing.css, from layouts/marketing.blade.php.
   It restyles the SHARED building blocks (header, page hero, eyebrow, headings, cards, bento,
   metrics, logo strip, steps, pricing, compare table, testimonials, FAQ, CTA band, footer) in the
   same language as the homepage showcase: Letfold greens, hairline rings, soft depth, colour bands
   and motion on scroll. Nothing is removed from any page; this is a layer over the same content.

   Motion lives in marketing-v2.js and only ever adds classes. Without JavaScript, or with
   prefers-reduced-motion, every element is fully visible and still.
   ========================================================================= */
:root {
  --v2-green: #007657;
  --v2-leaf: #00a878;
  --v2-mint: #00cf93;
  --v2-aqua: #13b6d6;
  --v2-lime: #b9f36a;
  --v2-deep: #002826;
  --v2-deeper: #001b1a;
  --v2-ring: 0 0 0 1px rgba(7,42,42,.07);
  --v2-lift: 0 0 0 1px rgba(0,118,87,.18), 0 26px 60px -30px rgba(0,60,45,.38);
  --v2-muted: #566968;
}

/* ---------- Header: glass, lit on scroll ---------- */
.mkt-header {
  background: rgba(255,255,255,.72);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
}
.mkt-header.is-scrolled {
  background: rgba(255,255,255,.86);
  border-bottom-color: rgba(7,42,42,.08);
  box-shadow: 0 10px 30px -22px rgba(0,40,35,.35);
}
.mkt-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(0,168,120,.55), rgba(19,182,214,.45), transparent);
  transition: opacity .3s ease;
}
.mkt-header.is-scrolled::after { opacity: 1; }
@media (min-width: 880px) {
  .mkt-header__nav { gap: 4px; }
  .mkt-header__nav a { position: relative; padding: 8px 13px; border-radius: 999px; color: #1d3b3a; transition: background .2s ease, color .2s ease; }
  .mkt-header__nav a:hover { background: rgba(0,118,87,.07); color: var(--v2-green); }
  .mkt-header__nav a.is-current { color: var(--v2-green); }
  .mkt-header__nav a.is-current::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--v2-leaf); }
}

/* ---------- Buttons: gradient, with a light sweep ---------- */
.mkt-btn--primary, .mkt-btn--accent {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(135deg, #00a878 0%, #007657 55%, #00604a 100%);
}
.mkt-btn--primary::after, .mkt-btn--accent::after {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg); transition: left .7s ease;
}
.mkt-btn--primary:hover::after, .mkt-btn--accent:hover::after { left: 120%; }
.mkt-btn--primary:hover, .mkt-btn--accent:hover { background: linear-gradient(135deg, #00b784 0%, #007c5c 55%, #00553f 100%); }
.mkt-btn--ghost:hover { background: rgba(0,118,87,.06); color: var(--v2-green); }
.mkt-btn--secondary { box-shadow: inset 0 0 0 1px rgba(7,42,42,.1); background: #fff; }
.mkt-btn--secondary:hover { background: #f3faf7; box-shadow: inset 0 0 0 1px rgba(0,118,87,.3); color: var(--v2-green); }

/* ---------- Page heroes (every page but the homepage): the colour band ---------- */
.mkt-gradient-bg { background: #fff; }
.mkt-gradient-bg::before {
  content: ""; position: absolute; z-index: -1; left: -10%; right: -10%; top: -40%; height: 92%;
  transform: skewY(-6deg); transform-origin: 0 100%;
  background:
    radial-gradient(38% 60% at 88% 78%, rgba(185,243,106,.75) 0%, rgba(185,243,106,0) 70%),
    radial-gradient(40% 70% at 68% 92%, rgba(0,200,150,.7) 0%, rgba(0,200,150,0) 72%),
    radial-gradient(36% 60% at 100% 96%, rgba(19,182,214,.6) 0%, rgba(19,182,214,0) 70%),
    radial-gradient(48% 70% at 34% 90%, rgba(125,232,201,.55) 0%, rgba(125,232,201,0) 70%),
    linear-gradient(120deg, #f2fcf8 0%, #bff0dd 45%, #5fd6ae 72%, #1aa8a0 100%);
  background-size: 140% 140%;
  opacity: .92;
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
}
.mkt-gradient-bg::after {
  content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(7,42,42,.09) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(60% 70% at 50% 60%, #000 0%, transparent 75%);
  mask-image: radial-gradient(60% 70% at 50% 60%, #000 0%, transparent 75%);
}
.mkt-hero-bgimage::before, .mkt-hero-bgimage::after { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .mkt-gradient-bg::before { animation: v2-band 20s ease-in-out infinite alternate; }
}
@keyframes v2-band { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }
/* Solid ink: gradient-clipped text cut off descenders at this tight line-height. */
.mkt-gradient-bg .mkt-h1 { color: #072a2a; }

/* ---------- Eyebrow: a label, not a pill ---------- */
.mkt-eyebrow {
  gap: 9px; padding: 6px 12px 6px 8px; border-radius: 999px;
  background: rgba(255,255,255,.7); color: var(--v2-green);
  box-shadow: inset 0 0 0 1px rgba(0,118,87,.18);
}
.mkt-eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--v2-mint), var(--v2-green));
  box-shadow: 0 0 0 3px rgba(0,207,147,.2);
}
.mkt-eyebrow--dark { background: rgba(255,255,255,.08); color: #9ff2d3; box-shadow: inset 0 0 0 1px rgba(159,242,211,.25); }

/* ---------- Section rhythm ---------- */
.mkt-section--soft {
  background:
    radial-gradient(60% 40% at 100% 0%, rgba(0,207,147,.06), transparent 70%),
    radial-gradient(50% 40% at 0% 100%, rgba(19,182,214,.05), transparent 70%),
    #f6faf8;
}
.mkt-section .mkt-h2 { color: #072a2a; }
.mkt-section .mkt-lead { color: #4f6464; }

/* ---------- Cards: one family ---------- */
.mkt-card, .mkt-uk-card, .mkt-step, .mkt-bento-card, .mkt-plan, .mkt-sol-card {
  border-radius: 18px;
  box-shadow: var(--v2-ring), 0 1px 2px rgba(7,42,42,.04);
  position: relative;
}
.mkt-card--lift:hover, .mkt-uk-card:hover, .mkt-step:hover, .mkt-bento-card:hover, .mkt-plan:hover, .mkt-sol-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--v2-lift);
}
/* Cursor spotlight (marketing-v2.js sets --mx/--my). */
.v2-spot { overflow: hidden; isolation: isolate; }
.v2-spot::after {
  content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s ease;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(0,207,147,.13), transparent 60%);
}
.v2-spot:hover::after { opacity: 1; }
.mkt-uk-card__icon, .mkt-bento-card__icon, .mkt-step__icon {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 8px 18px -12px var(--icon-fg, #007657);
  transition: transform .45s cubic-bezier(.2,.7,.2,1);
}
.mkt-uk-card:hover .mkt-uk-card__icon, .mkt-bento-card:hover .mkt-bento-card__icon, .mkt-step:hover .mkt-step__icon { transform: translateY(-2px) rotate(-6deg) scale(1.06); }

/* Bento: each card gets a drifting colour field in its own palette */
.mkt-bento-card { overflow: hidden; isolation: isolate; }
.mkt-bento-card::before {
  content: ""; position: absolute; z-index: -1; right: -30%; bottom: -45%; width: 75%; height: 85%; border-radius: 50%;
  background: radial-gradient(closest-side, var(--icon-bg, #dcfce7), transparent);
  opacity: .9; transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.mkt-bento-card:hover::before { transform: scale(1.35) translate(-8%, -8%); }
.mkt-bento__item--lg .mkt-bento-card::before { width: 95%; height: 70%; bottom: -30%; right: -25%; }

/* Steps: numbered, joined by a line that draws itself */
.mkt-step__num-label, .mkt-flow__num {
  display: inline-block; font-weight: 800; letter-spacing: .08em;
  background: linear-gradient(90deg, var(--v2-green), var(--v2-aqua));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@media (min-width: 768px) {
  .mkt-steps-grid, .mkt-flow { position: relative; }
  .mkt-steps-grid::before, .mkt-flow::before {
    content: ""; position: absolute; z-index: 0; left: 8%; right: 8%; top: 52px; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, rgba(0,168,120,0), rgba(0,168,120,.55) 20%, rgba(19,182,214,.55) 80%, rgba(19,182,214,0));
    transform-origin: left; transform: scaleX(var(--v2-draw, 1)); transition: transform 1.4s cubic-bezier(.2,.7,.2,1);
  }
  .v2-js .mkt-steps-grid:not(.v2-in)::before, .v2-js .mkt-flow:not(.v2-in)::before { --v2-draw: 0; }
  .mkt-steps-grid > *, .mkt-flow > * { position: relative; z-index: 1; }
}

/* Solution cards: art zooms and a sheen crosses it */
.mkt-sol-card__art { transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.mkt-sol-card:hover .mkt-sol-card__art { transform: scale(1.06); }
.mkt-sol-card__art::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%);
  transition: transform 1s ease;
}
.mkt-sol-card:hover .mkt-sol-card__art::after { transform: translateX(100%); }

/* ---------- Metrics: big gradient numbers ---------- */
.mkt-metric__value {
  font-size: clamp(2.2rem, 4.2vw, 3.4rem);
  background: linear-gradient(180deg, #072a2a 10%, #007657 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mkt-metric__label { color: var(--v2-muted); }
.mkt-metrics-grid > div { position: relative; padding: 8px 0; }
@media (min-width: 768px) {
  .mkt-metrics-grid > div + div::before { content: ""; position: absolute; left: -16px; top: 18%; bottom: 18%; width: 1px; background: linear-gradient(180deg, transparent, rgba(7,42,42,.14), transparent); }
}

/* ---------- Logo strip: fades at both edges ---------- */
.mkt-logo-strip { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.mkt-logo-strip__item { color: #3f5655; transition: color .25s ease; }
.mkt-logo-strip:hover .mkt-logo-strip__track { animation-play-state: paused; }
.mkt-logo-strip__item:hover { color: var(--v2-green); }

/* ---------- Product frames: depth ---------- */
.mkt-preview-frame, .mkt-screenshot {
  box-shadow: 0 0 0 1px rgba(7,42,42,.07), 0 60px 110px -50px rgba(0,50,40,.5), 0 24px 50px -30px rgba(0,50,40,.35) !important;
  will-change: transform;
}
.mkt-preview-tabs { padding: 5px; gap: 2px; margin-inline: auto; width: max-content; max-width: 100%; border-radius: 999px; background: #fff; box-shadow: var(--v2-ring), 0 8px 24px -18px rgba(0,40,35,.35); }
.mkt-preview-tab { border: 0 !important; background: transparent !important; }
.mkt-preview-tab.is-active { background: linear-gradient(135deg, #00a878, #007657) !important; color: #fff !important; box-shadow: 0 8px 18px -10px rgba(0,118,87,.8); }

/* ---------- Pricing ---------- */
.mkt-plan--featured { background: linear-gradient(180deg, #ffffff 0%, #f1fbf7 100%); }
.mkt-plan--featured::before {
  background: conic-gradient(from var(--v2-angle, 0deg), #00cf93, #13b6d6, #b9f36a, #007657, #00cf93);
}
@property --v2-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@media (prefers-reduced-motion: no-preference) {
  .mkt-plan--featured::before { animation: v2-spin 6s linear infinite; }
}
@keyframes v2-spin { to { --v2-angle: 360deg; } }
.mkt-plan__badge { background: linear-gradient(135deg, #00a878, #007657); box-shadow: 0 8px 18px -8px rgba(0,118,87,.8); }
.mkt-plan__price { background: linear-gradient(180deg, #072a2a, #007657); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mkt-plan__price-suffix { -webkit-text-fill-color: var(--v2-muted); }

/* ---------- Compare table (homepage + compare pages) ---------- */
.v2-compare { box-shadow: var(--v2-ring), 0 30px 60px -40px rgba(0,50,40,.35); border: 0 !important; border-radius: 18px !important; }
.v2-compare table td:nth-child(2), .v2-compare table th:nth-child(2) {
  background: linear-gradient(180deg, rgba(0,207,147,.1), rgba(0,207,147,.06)) !important;
  border-left: 0 !important; box-shadow: inset 2px 0 0 #00a878, inset -2px 0 0 #00a878;
}
.v2-compare table td:nth-child(2) { color: #00674c !important; }
.v2-compare table tr:last-child td:nth-child(2) { box-shadow: inset 2px 0 0 #00a878, inset -2px 0 0 #00a878, inset 0 -2px 0 #00a878; }
.v2-compare table thead th:nth-child(2) { box-shadow: inset 2px 0 0 #00a878, inset -2px 0 0 #00a878, inset 0 2px 0 #00a878; }
.v2-compare table tbody tr { transition: background .2s ease; }
.v2-compare table tbody tr:hover { background: #f4faf8 !important; }

/* ---------- Testimonials ---------- */
.mkt-tst-grid .mkt-card { padding-top: 34px; overflow: hidden; }
.mkt-tst-grid .mkt-card::before {
  content: "\201C"; position: absolute; top: -26px; right: 14px; font-family: Georgia, serif; font-size: 150px; line-height: 1;
  background: linear-gradient(180deg, rgba(0,207,147,.35), rgba(19,182,214,.08)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mkt-tst-grid .mkt-card > div:first-child { color: var(--v2-leaf) !important; }

/* ---------- FAQ ---------- */
.mkt-faq__item { border-top: 0; margin-bottom: 10px; padding: 0; border-radius: 16px; background: #fff; box-shadow: var(--v2-ring); transition: box-shadow .3s ease; }
.mkt-faq__item:hover { box-shadow: 0 0 0 1px rgba(0,118,87,.2), 0 16px 34px -26px rgba(0,50,40,.4); }
.mkt-faq__item.is-open { box-shadow: 0 0 0 1px rgba(0,118,87,.28), 0 20px 40px -30px rgba(0,50,40,.45); }
.mkt-faq__q { padding: 18px 20px; }
.mkt-faq__a { margin: 0; padding: 0 20px 20px; }
.mkt-faq__chevron { border-radius: 50%; background: #f1f7f5; color: var(--v2-green); width: 28px; height: 28px; transition: transform .3s ease, background .3s ease, color .3s ease; }
.mkt-faq__item.is-open .mkt-faq__chevron { background: var(--v2-green); color: #fff; }

/* ---------- CTA band: deep green with a live aurora ---------- */
.mkt-cta-band { padding: clamp(56px, 8vw, 96px) clamp(20px, 5vw, 56px); box-shadow: 0 50px 100px -50px rgba(0,40,35,.7); }
.mkt-cta-band::after { background: radial-gradient(80% 90% at 50% 120%, #00644c 0%, rgba(0,100,76,0) 60%), linear-gradient(180deg, #003a35 0%, #001b1a 100%); }
.v2-aurora { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .95; }
.mkt-cta-band .mkt-h2 { color: #fff; }
.mkt-cta-band .mkt-btn--inv { box-shadow: 0 16px 40px -16px rgba(0,207,147,.8); }

/* ---------- Footer ---------- */
.mkt-footer { position: relative; background: linear-gradient(180deg, #002826 0%, #001414 100%) !important; overflow: hidden; }
.mkt-footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, #00cf93, #13b6d6, #b9f36a, transparent);
}
.mkt-footer::after {
  content: ""; position: absolute; left: 50%; top: -220px; width: 900px; height: 440px; margin-left: -450px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0,207,147,.14), transparent);
}
.mkt-footer .mkt-container { position: relative; z-index: 1; }
.mkt-footer a { transition: color .2s ease; }
.mkt-footer a:hover { color: #7ff0c9 !important; }

/* ---------- Scroll reveal (classes from marketing-v2.js) ---------- */
.v2-js .v2-pre { opacity: 0; transform: translateY(28px) scale(.98); }
.v2-in { transition: opacity .85s cubic-bezier(.2,.7,.2,1) var(--v2-delay, 0s), transform .95s cubic-bezier(.2,.7,.2,1) var(--v2-delay, 0s); }

@media (prefers-reduced-motion: reduce) {
  .v2-js .v2-pre { opacity: 1; transform: none; }
  .mkt-gradient-bg::before, .mkt-plan--featured::before { animation: none !important; }
}

/* ---------- Tool lead forms: name, email and button stack on a phone ----------
   The three-column grid could not shrink below its inputs' natural width, so the deposit calculator
   page was 539px wide on a 390px phone (found 2026-09-17, already live before v2). */
.v2-leadform input { min-width: 0; width: 100%; box-sizing: border-box; }
@media (max-width: 520px) {
  .v2-leadform { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ---------- /vs/{slug} price boxes ----------
   Long price labels could not wrap inside two fixed columns, so the page was 446px wide on a 390px
   phone (found 2026-09-17, already live before v2). */
.v2-vs-prices > div { overflow-wrap: anywhere; box-shadow: var(--v2-ring), 0 20px 40px -32px rgba(0,50,40,.4); border: 0 !important; }
.v2-vs-prices .v2-vs-us { background: linear-gradient(160deg, #eafaf4 0%, #d3f5e8 100%) !important; box-shadow: 0 0 0 2px #00a878, 0 24px 50px -30px rgba(0,118,87,.55); }
@media (max-width: 520px) { .v2-vs-prices { grid-template-columns: minmax(0, 1fr) !important; } }

/* ---------- Font swap without layout shift ----------
   Fonts load without blocking paint, so text first renders in a system font and reflows when Inter
   arrives (Lighthouse CLS 0.108 on /features, 2026-09-17). A local Arial scaled to Inter's metrics
   keeps line breaks the same through the swap. Values are the widely used Inter/Arial overrides. */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial'), local('ArialMT'), local('Helvetica');
  ascent-override: 90.2%;
  descent-override: 22.48%;
  line-gap-override: 0%;
  size-adjust: 107.4%;
}
.mkt-body { font-family: 'Inter', 'Inter Fallback', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif; }

/* ---------- Blog: typographic covers and guides by topic (2026-09-17) ---------- */
.v2-textcover {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; aspect-ratio: 16/9;
  padding: 20px 22px; overflow: hidden; text-decoration: none; isolation: isolate;
  background: linear-gradient(135deg, #003f38 0%, #007657 55%, #00a878 100%);
}
.v2-textcover::before {
  content: ""; position: absolute; z-index: -1; right: -20%; top: -40%; width: 80%; height: 120%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(185,243,106,.45), transparent); transition: transform .8s ease;
}
.v2-textcover::after {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px); background-size: 18px 18px;
  -webkit-mask-image: linear-gradient(200deg, #000, transparent 70%); mask-image: linear-gradient(200deg, #000, transparent 70%);
}
article:hover .v2-textcover::before { transform: translate(-10%, 10%) scale(1.15); }
.v2-textcover__label { align-self: flex-start; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.14); color: #bff5dd; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.v2-textcover__title { color: #fff; font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: clamp(19px, 2.2vw, 24px); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }

.v2-topics { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 0 0 40px; }
@media (min-width: 700px) { .v2-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .v2-topics { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.v2-topics__col { padding: 18px 18px 14px; border-radius: 16px; background: #fff; box-shadow: var(--v2-ring), 0 1px 2px rgba(7,42,42,.04); }
.v2-topics__title { margin: 0 0 10px; font-size: 13px !important; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--v2-green) !important; }
.v2-topics ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.v2-topics a { display: block; padding: 6px 8px; margin: 0 -8px; border-radius: 8px; font-size: 14px; line-height: 1.35; color: #1d3b3a; text-decoration: none; transition: background .2s ease, color .2s ease; }
.v2-topics a:hover { background: #f1f8f5; color: var(--v2-green); }