/* Landing v3 — the Apple-style language (homepage / css/site-v3.css) applied to the shared LANDING TEMPLATE
   that ~46 pages carry inline (tool pages, *-alternative pages, service pages, contact, tools-privacy).
   A page opts in with <main class="lp3"> + this sheet linked right after <main>; its markup and copy stay.

   How it works: every block on those pages — including each page's own comparison tables — paints itself
   from the template's tokens (--ink, --blue, --paper-2, --line …). Redefining those tokens ON main.lp3
   re-palettes all of it; the rules below then retune type, buttons, tiles, bands and the FAQ.
   Specificity: the inline template rules are (0,1,x) — `.lp3 .x` beats them; headings need `.lp3.lp3`
   because theme-v2.css's `body.site-2026 h1/h2` is (0,1,2). Dark: html.dark .lp3 (Apple black). */

.lp3{
  /* secondary grey #636366, not #6e6e73: the template sets 11–12px notes in it on #f5f5f7 and on the
     blue-tinted "our column", where #6e6e73 measured 4.42:1 */
  --ink:#1d1d1f; --ink-2:#424245; --ink-3:#636366; --muted:#636366; --navy:#1d1d1f;
  --paper:#ffffff; --paper-2:#f5f5f7; --sand:#f5f5f7; --white:#ffffff; --soft:#f5f5f7;
  /* --blue is mostly TEXT in the template (labels, links, ticks): #0066cc reads 5.6:1 on white and 5.1:1 on
     #f5f5f7, where Apple's fill blue #0071e3 is 4.46:1. Fills that need #0071e3 are pinned below. */
  --blue:#0066cc; --blue-dark:#0055b3; --blue-light:rgba(0,113,227,.1);
  --link:#0066cc; --tint-ink:#0062c4;
  --green:#1a7f37; --amber:#b25000;
  --line:#d2d2d7; --line-2:#d2d2d7; --line-strong:#d2d2d7; --hair:rgba(0,0,0,.08);
  --r:14px; --r-lg:22px; --r-xl:28px;
  --t:background-color .18s, color .18s;
  --maxw:1120px;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue","Segoe UI",Roboto,Arial,sans-serif;
  font-size:17px; line-height:1.47; letter-spacing:-.011em; color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased; display:block;
}
.lp3{
  /* the same template under prefixed token names (Invoice --ivm-*, Project Manager --pmm-*) */
  --ivm-ink:var(--ink); --ivm-ink-3:var(--ink-3); --ivm-paper-2:var(--paper-2); --ivm-blue:var(--blue); --ivm-blue-light:var(--blue-light);
  --ivm-green:var(--green); --ivm-line:var(--line); --ivm-line-2:var(--line); --ivm-muted:var(--muted); --ivm-maxw:1120px;
  --pmm-ink:var(--ink); --pmm-ink-2:var(--ink-2); --pmm-ink-3:var(--ink-3); --pmm-paper:var(--paper); --pmm-paper-2:var(--paper-2);
  --pmm-blue:var(--blue); --pmm-blue-dark:var(--blue-dark); --pmm-blue-light:var(--blue-light); --pmm-amber:var(--amber); --pmm-green:var(--green);
  --pmm-line:var(--line); --pmm-line-2:var(--line); --pmm-line-strong:var(--line); --pmm-muted:var(--muted); --pmm-maxw:1120px;
}
html.dark .lp3{
  --ink:#f5f5f7; --ink-2:#d2d2d7; --ink-3:#a1a1a6; --muted:#a1a1a6; --navy:#f5f5f7;
  --paper:#000000; --paper-2:#161617; --sand:#161617; --white:#1d1d1f; --soft:#161617;
  --blue:#2997ff; --blue-dark:#64b5ff; --blue-light:rgba(41,151,255,.18);
  --link:#2997ff; --tint-ink:#64b5ff;
  --green:#30d158; --amber:#ffb340;
  --line:#424245; --line-2:#424245; --line-strong:#424245; --hair:rgba(255,255,255,.12);
}
/* the page ground + the shared chrome follow it, as on the homepage / Services (site-v3.css) */
body.site-2026:has(main.lp3){background:#fff}
html.dark body.site-2026:has(main.lp3){--v3-bg:#000;--v3-bg2:#161617;--v3-line:#424245;--v3-pop:#1d1d1f;background:#000 !important}
html.dark:has(main.lp3){background:#000 !important}

/* ── type ── */
.lp3 .display{font-family:inherit;font-weight:600;letter-spacing:-.02em}
/* font only — NO colour here: pages paint headings on their own dark panels (white on --ink); a blanket
   heading colour at (0,2,1) beat those and set them ink-on-ink */
.lp3.lp3 h1,.lp3.lp3 h2,.lp3.lp3 h3,.lp3.lp3 h4{font-family:inherit;text-transform:none}
.lp3.lp3 .hero h1{font-size:clamp(40px,5.4vw,64px);line-height:1.06;font-weight:600;letter-spacing:-.028em;max-width:19ch;text-wrap:balance;margin-bottom:18px}
.lp3.lp3 .h-sec,.lp3.lp3 h2.h-sec{font-size:clamp(32px,4vw,48px);line-height:1.08;font-weight:600;letter-spacing:-.022em;text-wrap:balance}
.lp3.lp3 .hero h1 em,.lp3.lp3 .h-sec em,.lp3.lp3 .cta-band h2 em{color:var(--ink-3);font-style:normal}
.lp3.lp3 h3{letter-spacing:-.015em}
.lp3 p{font-weight:400}
.lp3 .hero-sub{font-size:clamp(19px,2vw,23px);line-height:1.4;color:var(--ink-3);letter-spacing:-.012em;max-width:58ch;text-wrap:balance}
.lp3 .lead{font-size:clamp(18px,1.7vw,21px);line-height:1.45;color:var(--ink-3);letter-spacing:-.012em}
.lp3 .hero-note{font-size:14px;color:var(--ink-3)}
.lp3 .eyebrow{font-size:17px;font-weight:600;letter-spacing:-.01em;text-transform:none;color:var(--tint-ink);gap:0}
.lp3 .eyebrow::before{display:none}
.lp3 .cc-ey{font-size:15px;font-weight:600;letter-spacing:-.01em;text-transform:none;color:var(--tint-ink)}
.lp3 a:not([class]){color:var(--link)}

/* ── buttons: Apple pills — filled blue, and the tinted secondary ── */
.lp3 .btn{border-radius:980px;font-size:17px;font-weight:400;padding:11px 24px;min-height:46px;justify-content:center;letter-spacing:-.01em;box-shadow:none;transform:none}
.lp3 .btn-lg{padding:12px 26px;font-size:17px}
.lp3 .btn:hover{transform:none;box-shadow:none}
.lp3 .btn .arr{display:none}
.lp3 .btn-primary,html.dark .lp3 .btn-primary{background:#0071e3;color:#fff}
.lp3 .btn-primary:hover,html.dark .lp3 .btn-primary:hover{background:#0077ed;color:#fff}
.lp3 .btn-line,html.dark .lp3 .btn-line,.lp3 .btn-light,html.dark .lp3 .btn-light{background:var(--blue-light);color:var(--tint-ink);box-shadow:none}
.lp3 .btn-line:hover,html.dark .lp3 .btn-line:hover,.lp3 .btn-light:hover,html.dark .lp3 .btn-light:hover{background:rgba(0,113,227,.17);color:var(--tint-ink);box-shadow:none}
.lp3 .btn-ghost-light{background:var(--blue-light);color:var(--tint-ink);box-shadow:none}
.lp3 .btn-ghost-light:hover{background:rgba(0,113,227,.17);color:var(--tint-ink);box-shadow:none}

/* ── the free pill: a quiet green label, not a badge ── */
.lp3 .hero .free-pill,html.dark .lp3 .hero .free-pill,html.dark .lp3 .free-pill{background:rgba(26,127,55,.1);border:0;color:var(--green);border-radius:980px;font-size:14px;font-weight:600;letter-spacing:-.005em;padding:6px 14px}
html.dark .lp3 .hero .free-pill,html.dark .lp3 .free-pill{background:rgba(48,209,88,.14);color:var(--green)}
.lp3 .hero .free-pill{color:#146c2e}   /* #1a7f37 is 4.44:1 on its own 10% tint; this is 5.3:1 */

/* ── rhythm: generous sections, grey bands without rules ── */
.lp3 .wrap{max-width:var(--maxw)}
.lp3 .hero{padding:64px 0 48px}
.lp3 .section{padding:88px 0}
.lp3 .band,html.dark .lp3 .band,html.dark .lp3 .section.band{background:var(--paper-2);border:0}
.lp3 .section-head.center{margin-bottom:48px}

/* ── tiles: cards + steps are flat rounded tiles; white on a grey band, grey on white ── */
.lp3 .card,.lp3 .step,html.dark .lp3 .card,html.dark .lp3 .step{background:var(--paper-2);border:0;border-radius:var(--r-lg);padding:32px 28px;box-shadow:none}
.lp3 .band .card,.lp3 .band .step,html.dark .lp3 .band .card,html.dark .lp3 .band .step{background:var(--white)}
.lp3 .card:hover{transform:none;box-shadow:none;border-color:transparent}
.lp3 .card .c-ic{border-radius:50%;background:var(--blue-light);color:var(--tint-ink)}
.lp3.lp3 .card h3,.lp3.lp3 .step h3{font-size:21px;font-weight:600;line-height:1.2;margin-bottom:8px}
.lp3 .card p,.lp3 .step p{font-size:17px;line-height:1.5;color:var(--ink-3)}
.lp3 .step-n{font-family:inherit;font-weight:600;font-size:19px;border-radius:50%;background:var(--blue-light);color:var(--tint-ink)}

/* ── the cross-sell: a plain tile ── */
.lp3 .crosscta,html.dark .lp3 .crosscta{background:var(--paper-2);border:0;border-radius:var(--r-lg);padding:32px 36px}
.lp3 .band .crosscta,html.dark .lp3 .band .crosscta{background:var(--white)}
.lp3.lp3 .crosscta h3{font-size:24px;font-weight:600}
.lp3 .crosscta p{font-size:17px;color:var(--ink-3)}

/* ── FAQ: hairline-separated rows, like the homepage ── */
.lp3 .faq-item,html.dark .lp3 .faq-item{background:transparent;border:0;border-top:1px solid var(--line);border-radius:0;margin:0}
.lp3 .faq-item:last-child{border-bottom:1px solid var(--line)}
.lp3 .faq-item summary{padding:22px 4px;font-size:19px;font-weight:600;letter-spacing:-.012em;color:var(--ink)}
.lp3 .faq-item summary::after{color:var(--ink-3);font-weight:400}
.lp3 .faq-item .faq-body{padding:0 4px 24px;font-size:17px;line-height:1.55;color:var(--ink-3);max-width:70ch}
.lp3 .faq-item .faq-body a{color:var(--link);font-weight:400}

/* ── the closing band: a calm grey tile, dark type (Apple's closing sections are not navy slabs) ── */
.lp3 .cta-band,html.dark .lp3 .cta-band{background:var(--paper-2);border-radius:var(--r-xl);padding:64px 40px}
.lp3 .band .cta-band,html.dark .lp3 .band .cta-band{background:var(--white)}
.lp3 .cta-band::before{display:none}
.lp3.lp3 .cta-band h2{color:var(--ink);font-size:clamp(30px,3.6vw,44px);font-weight:600;letter-spacing:-.022em;line-height:1.1;text-wrap:balance}
.lp3 .cta-band p{color:var(--ink-3);font-size:19px}

/* service pages: the stats bar becomes a quiet grey tile (it painted itself with --ink — a black slab in
   light, and a WHITE one in dark once --ink is Apple's near-white); the hero panel's caps label goes */
.lp3 .metrics,html.dark .lp3 .metrics{background:var(--paper-2);border:0;border-radius:var(--r-lg);padding:30px 28px}
.lp3 .band .metrics,html.dark .lp3 .band .metrics{background:var(--white)}
.lp3 .metrics::before{display:none}
.lp3 .metric b{font-family:inherit;font-weight:600;font-size:clamp(28px,3vw,36px);letter-spacing:-.02em;color:var(--ink)}
.lp3 .metric b small{font-size:.6em;color:var(--ink-3)}
.lp3 .metric span{color:var(--ink-3);font-size:14px}
.lp3 .hv-panel .hv-title{font-size:15px;font-weight:600;letter-spacing:-.01em;text-transform:none;color:var(--tint-ink)}

/* every small caps label in the template reads in sentence case, the Apple way */
.lp3 :is(.vs-table thead th,.cq-pcmp thead th,.alt-card .k,.pcmp-badge,.contact-card .cc-label){text-transform:none;letter-spacing:-.005em;font-weight:600}

/* the few template FILLS that carry a white glyph keep Apple's fill blue (white on #0071e3 = 4.6:1) */
.lp3 :is(.pcmp-y,.toolcta .tc-ic,.wl-ic,.bc-ic),html.dark .lp3 :is(.pcmp-y,.toolcta .tc-ic,.wl-ic,.bc-ic){background:#0071e3;color:#fff}

/* comparison-table marks: the "✗" disc was white on #cfd6dc (1.47:1) — a grey disc, dark glyph;
   the Creative QA table's red "no" lifts to Apple's dark-mode red */
.lp3 .pcmp-n{background:#e8e8ed;color:var(--ink-2)}
html.dark .lp3 .pcmp-n{background:var(--white);color:var(--ink-3)}
html.dark .lp3 .cq-pcmp .n{color:#ff6961}

/* ── prefixed copies of the template (cng- campaign names, lvm- leave, sv- svg) and one-off pages ── */
.lp3 :is(.cng-btn-primary,.lvm-btn-primary,.sv-btn-primary,.pmm-btn-primary,.ivm-btn-primary),html.dark .lp3 :is(.cng-btn-primary,.lvm-btn-primary,.sv-btn-primary,.pmm-btn-primary,.ivm-btn-primary){background:#0071e3;color:#fff;border-radius:980px;box-shadow:none;transform:none}
.lp3 :is(.cng-btn-primary,.lvm-btn-primary,.sv-btn-primary,.pmm-btn-primary,.ivm-btn-primary):hover{background:#0077ed;color:#fff}
.lp3 :is(.cng-pcmp-n,.sv-pcmp-n){background:#e8e8ed;color:var(--ink-2)}
html.dark .lp3 :is(.cng-pcmp-n,.sv-pcmp-n){background:var(--white);color:var(--ink-3)}
.lp3 :is(.cng-pcmp-y,.sv-pcmp-y),html.dark .lp3 :is(.cng-pcmp-y,.sv-pcmp-y){background:#0071e3;color:#fff}
/* their closing bands, Security's closing block: grey tiles with dark type, like .cta-band */
.lp3 :is(.cng-cta-band,.lvm-cta-band,.sv-cta-band,.pmm-cta-band,.sec-cta),html.dark .lp3 :is(.cng-cta-band,.lvm-cta-band,.sv-cta-band,.pmm-cta-band,.sec-cta){background:var(--paper-2);border:0;border-radius:var(--r-xl);box-shadow:none}
.lp3 :is(.cng-cta-band,.lvm-cta-band,.sv-cta-band,.pmm-cta-band,.sec-cta)::before{display:none}
.lp3.lp3 :is(.cng-cta-band,.lvm-cta-band,.sv-cta-band,.pmm-cta-band,.sec-cta) :is(h2,h3){color:var(--ink);font-weight:600;letter-spacing:-.022em}
.lp3.lp3 :is(.cng-cta-band,.lvm-cta-band,.sv-cta-band,.pmm-cta-band,.sec-cta) p{color:var(--ink-3)}
.lp3.lp3 .sec-cta a,html.dark .lp3.lp3 .sec-cta a{background:#0071e3;color:#fff;font-weight:400;border-radius:980px}
.lp3 :is(.cng-cta-band,.lvm-cta-band,.sv-cta-band,.pmm-cta-band) :is(.cng-btn-light,.lvm-btn-light,.sv-btn-light,.pmm-btn-light,.cng-btn-ghost-light,.lvm-btn-ghost-light,.sv-btn-ghost-light,.pmm-btn-ghost-light){background:var(--blue-light);color:var(--tint-ink);box-shadow:none;border-radius:980px}
.lp3 :is(.cng-cta-band,.lvm-cta-band,.sv-cta-band,.pmm-cta-band) :is(.cng-cta-actions,.lvm-cta-actions,.sv-cta-actions,.pmm-cta-actions) > a:first-child{background:#0071e3;color:#fff}
/* fills of --blue that carry white type (about / why-us) keep Apple's fill blue */
.lp3 :is(.hv-badge,.step-num,.cmp thead th.col-us),html.dark .lp3 :is(.hv-badge,.step-num,.cmp thead th.col-us){background:#0071e3;color:#fff}
/* About: the founder pill's tinted label, and a link typed in the old blue */
.lp3 .founder-exp-pill{color:var(--tint-ink)}
.lp3 .career-linkedin{color:var(--link) !important}   /* the link sets #1159da inline */
/* the Outsource article's table header is filled with --ink — near-white in dark */
html.dark .lp3 .prose thead th{background:var(--white);color:var(--ink)}
/* dark-2026's navy on page-specific cards */
html.dark .lp3 :is(.adv-card,.adv-tag,.cbp-filter-item,.rel-card,.cng-plan-card,.lvm-plan,.sv-plan-card,.cng-crosscta,.lvm-crosscta,.sv-crosscta,.pmm-plan,.pmm-crosscta,.ivm-shot-badge){background:var(--paper-2);border-color:var(--line)}
html.dark .lp3 .toc{border-color:var(--line)}
html.dark .lp3.lp3.lp3 code{background:var(--white);color:var(--ink)}   /* prefixed faq bodies reach (0,3,1) */

/* White-label Previews types its greys (#55617a / #7b8699) — the theme grey reads in both modes */
.lp3 :is(.wl-hero p,.wl-note,.wl-card p,.wl-lede,.wl-step p){color:var(--ink-3)}
/* White-label Previews is its own small design (wl-*): bring its parts onto the same language */
.lp3 .wl-hero{padding:72px 0 48px}
.lp3.lp3 .wl-hero h1{font-size:clamp(38px,5.2vw,60px);line-height:1.06;font-weight:600;letter-spacing:-.028em;text-wrap:balance}
.lp3 .wl-hero p:not(.wl-note){font-size:clamp(18px,1.9vw,21px);line-height:1.45}
.lp3 .wl-eyebrow,html.dark .lp3 .wl-eyebrow{background:transparent;border:0;padding:0;font-size:17px;font-weight:600;letter-spacing:-.01em;text-transform:none;color:var(--tint-ink)}
.lp3 .wl-btn{border-radius:980px;font-weight:400;font-size:17px;padding:11px 24px;border:0}
.lp3 .wl-btn-p,html.dark .lp3 .wl-btn-p{background:#0071e3;color:#fff}
.lp3 .wl-btn-p:hover{background:#0077ed;color:#fff}
.lp3 .wl-btn-l,html.dark .lp3 .wl-btn-l{background:var(--blue-light);color:var(--tint-ink);border:0}
.lp3 .wl-sec{padding:72px 0}
.lp3.lp3 .wl-sec h2{font-size:clamp(28px,3.6vw,40px);font-weight:600;letter-spacing:-.022em;line-height:1.1}
.lp3 .wl-sec .wl-lede{font-size:17px}
.lp3 :is(.wl-card,.wl-step,.wl-honest),html.dark .lp3 :is(.wl-card,.wl-step,.wl-honest){border:0;border-radius:var(--r-lg);background:var(--paper-2);padding:28px 26px}
.lp3.lp3 :is(.wl-card,.wl-step) h3{font-size:19px;font-weight:600}
.lp3 :is(.wl-card,.wl-step) p{font-size:15px}
.lp3 .wl-rec,html.dark .lp3 .wl-rec{background:var(--white);border:0;border-radius:14px}
.lp3 .wl-rec span{text-transform:none;letter-spacing:0;font-weight:600}
.lp3 .wl-faq details,html.dark .lp3 .wl-faq details{border:0;border-top:1px solid var(--line);border-radius:0;background:transparent;margin:0;padding:20px 4px}
.lp3 .wl-faq details:last-child{border-bottom:1px solid var(--line)}
.lp3 .wl-faq summary{font-size:19px;font-weight:600;letter-spacing:-.012em}
.lp3 .wl-faq summary::after{color:var(--ink-3);font-weight:400}
.lp3 .wl-faq p{font-size:17px;color:var(--ink-3)}

/* Invoice: its red "✗" and its own "us" column in dark */
html.dark .lp3 .ivm-n{color:#ff6961}
html.dark .lp3 td.us{background:var(--blue-light)}

/* the closing band's FIRST action is the main one — filled, like every primary on the page */
.lp3 .cta-actions .btn:first-child,html.dark .lp3 .cta-actions .btn:first-child{background:#0071e3;color:#fff}
.lp3 .cta-actions .btn:first-child:hover,html.dark .lp3 .cta-actions .btn:first-child:hover{background:#0077ed;color:#fff}

/* dark-2026.css paints a list of generic names (.hero, .eyebrow, .metrics, th.us, form fields) with its
   navy surface (#14181e / #181c22) — on Apple black they read as stray panels */
html.dark .lp3 .hero,html.dark .lp3 .eyebrow{background:transparent}
html.dark .lp3 th.us{background:var(--blue-light);color:var(--ink)}
html.dark .lp3 :is(input,select,textarea){background:var(--white);border-color:var(--line);color:var(--ink)}
html.dark .lp3 code,html.dark .lp3 .faq-item .faq-body code{background:var(--white);color:var(--ink);border-color:var(--line)}
html.dark .lp3 .toolcta{border-color:var(--line)}

/* the reveal-on-scroll fade stays, but shorter and gentler */
.lp3 .reveal{transform:translateY(12px);transition:opacity .5s ease,transform .5s ease}
.lp3 .reveal.in{transform:none}

@media(max-width:720px){
  .lp3 .hero{padding:40px 0 32px}
  .lp3 .section{padding:64px 0}
  .lp3.lp3 .hero h1{font-size:clamp(34px,9.6vw,44px)}
  .lp3 .cta-band{padding:44px 22px}
  .lp3 .hero-actions .btn,.lp3 .cta-actions .btn{width:100%;max-width:340px}
}
@media(prefers-reduced-motion:reduce){.lp3 .reveal{transition:none;opacity:1;transform:none}}