/* ============================================================
   TraceCare — public landing page ("/")
   Loaded only by templates/landing.html. Standalone: this page
   does not load styles.css, so the token block below must stay
   even though the app defines its own tokens.
   Mobile-first; desktop at min-width 760px.
   ============================================================ */

:root{
  --orange:#FF9D47; --pink:#F56098; --blue:#4E93EE; --green:#52C87F; --gray:#6B7280;
  --ink:#1F2A37; --soft:#4B5563;
  --orange-soft:#FFF1E4; --pink-soft:#FDE7F0; --blue-soft:#E7F0FD; --green-soft:#E4F6EB; --gray-soft:#F3F4F6;
  --orange-deep:#F08A2E; --pink-deep:#E84684; --blue-deep:#3B7FDD; --green-deep:#3FB76C;
  --blue-text:#2B6CB0;              /* AA-safe brand blue — ALL small blue text */
  --page:#FCFBF9; --card:#FFFFFF; --alt:#F9FAFB;
  --border:#ECEEF1; --border-strong:#DFE3E8;
  --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:24px; --pill:999px;
  --sh-xs:0 1px 2px rgba(31,42,55,.05);
  --sh-sm:0 2px 8px rgba(31,42,55,.06);
  --sh-md:0 6px 20px rgba(31,42,55,.08);
  --sh-lg:0 18px 50px rgba(31,42,55,.16);
  --sh-primary:0 6px 18px rgba(78,147,238,.28);
  --wash:linear-gradient(120deg,rgba(255,157,71,.10) 0%,rgba(245,96,152,.10) 35%,rgba(78,147,238,.10) 70%,rgba(82,200,127,.10) 100%);
}

/* standalone-page scaffold — the reference canvas frame provided this context */
html, body{ margin:0; padding:0; background:var(--page); }

/* ============ page scope ============ */
.lp-page{
  background:var(--page); color:var(--ink);
  font-family:'Poppins',ui-sans-serif,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow:hidden;
}
.lp-page *,.lp-page *::before,.lp-page *::after{ box-sizing:border-box; }
.lp-page :where(h1,h2,h3,h4,p){ margin:0; }
.lp-page img{ display:block; }
.lp-page a{ color:var(--blue-text); text-decoration:none; }
.lp-page a:hover{ color:var(--blue-deep); }
.lp-a-inline{ text-decoration:underline; text-underline-offset:2.5px; text-decoration-thickness:1px; }

/* one focus ring everywhere — same spec as the app redesign */
.lp-page a:focus-visible, .lp-page button:focus-visible, .lp-page summary:focus-visible{
  outline:3px solid rgba(78,147,238,.55); outline-offset:2px; box-shadow:none; border-radius:var(--r-sm);
}

/* ============ buttons & links ============ */
.lp-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:0 22px; border-radius:var(--r-md); border:1.5px solid transparent;
  font-family:inherit; font-size:14.5px; font-weight:500; line-height:1.2; cursor:pointer;
  white-space:nowrap;
  transition:background .18s ease, box-shadow .18s ease, transform .12s ease;
}
.lp-btn.lg{ min-height:52px; padding:0 28px; font-size:15.5px; }
.lp-btn:active{ transform:scale(.97); }
.lp-btn.primary{ background:var(--blue); color:#fff; box-shadow:var(--sh-primary); }
.lp-btn.primary:hover{ background:var(--blue-deep); }
.lp-btn.secondary{ background:#fff; color:var(--blue-text); border-color:var(--border-strong); }
.lp-btn.secondary:hover{ background:var(--blue-soft); border-color:var(--blue-soft); }
.lp-navlink{
  display:inline-flex; align-items:center; min-height:44px; padding:0 14px;
  border-radius:12px; font-size:14px; font-weight:500; color:var(--blue-text);
  white-space:nowrap;
  transition:background .18s ease;
}
.lp-navlink:hover{ background:var(--blue-soft); color:var(--blue-text); }

/* ============ nav ============ */
.lp-nav{ position:relative; z-index:2; }
.lp-nav-in{
  max-width:1160px; margin:0 auto; padding:12px 16px 12px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.lp-page .lp-lockup{ display:inline-flex; align-items:center; gap:9px; color:var(--ink); }
.lp-page a.lp-lockup{ min-height:44px; }   /* 44px touch floor; footer lockup is a span */
.lp-lockup img{ height:27px; width:auto; }
.lp-lockup b{ font-size:16.5px; font-weight:600; letter-spacing:-.01em; }
.lp-nav-actions{ display:flex; align-items:center; gap:6px; }

/* ============ hero ============ */
.lp-hero-wrap{ position:relative; background:var(--wash); }
.lp-hero-wrap::after{            /* soften the wash into the page below */
  content:''; position:absolute; inset:auto 0 0 0; height:120px; pointer-events:none;
  background:linear-gradient(180deg, rgba(252,251,249,0) 0%, var(--page) 100%);
}
.lp-hero{
  position:relative; z-index:1; text-align:center;
  max-width:760px; margin:0 auto; padding:56px 24px 72px;
}
.lp-h1{
  font-size:42px; line-height:1.16; font-weight:600; letter-spacing:-.015em;
  margin:0 auto 14px; max-width:11ch; text-wrap:balance;
}
.lp-grad-word{                    /* the single gradient accent is an underline; type stays ink for AA */
  position:relative; display:inline-block;
}
.lp-grad-word::after{
  content:''; position:absolute; left:1%; right:1%; bottom:.02em; height:.085em; border-radius:var(--pill);
  background:var(--gradient-brand,linear-gradient(90deg,#FF9D47 0%,#F56098 35%,#4E93EE 70%,#52C87F 100%));
}
.lp-sub{ font-size:15px; line-height:1.75; color:var(--soft); max-width:34em; margin:0 auto 26px; text-wrap:pretty; }
.lp-cta-row{ display:flex; justify-content:center; align-items:center; gap:12px; flex-wrap:wrap; }
/* --soft not --gray: gray composited on the hero wash lands 4.22-4.37:1, under AA */
.lp-quiet{ font-size:12.5px; line-height:1.6; color:var(--soft); margin-top:16px; }

/* ============ sections ============ */
.lp-section{ padding:48px 24px; }
.lp-section.on-white{ background:#fff; }
.lp-wrap{ max-width:1060px; margin:0 auto; }
.lp-head{ text-align:center; max-width:640px; margin:0 auto; }
.lp-kicker{ font-size:13px; font-weight:600; color:var(--blue-text); margin-bottom:10px; }
.lp-h2{ font-size:25px; line-height:1.28; font-weight:600; letter-spacing:-.01em; margin-bottom:12px; text-wrap:balance; }
.lp-lead{ font-size:14.5px; line-height:1.7; color:var(--soft); text-wrap:pretty; }

/* ============ how it works ============ */
.lp-steps{ display:grid; grid-template-columns:1fr; gap:14px; margin-top:24px; }
.lp-step{
  background:#fff; border-radius:var(--r-lg); box-shadow:var(--sh-sm);
  padding:18px 16px 16px; display:flex; flex-direction:column; gap:10px;
}
.lp-step-top{ display:flex; align-items:center; gap:12px; }
.lp-step-num{
  width:30px; height:30px; flex:none; border-radius:var(--pill);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:13.5px; font-weight:600;
}
.lp-step-num.n1{ background:var(--blue-soft);   color:var(--blue-text); }
.lp-step-num.n2{ background:var(--orange-soft); color:var(--orange-deep); }
.lp-step-num.n3{ background:var(--green-soft);  color:var(--green-deep); }
.lp-step h3{ font-size:16px; font-weight:600; line-height:1.3; }
.lp-step-body{ font-size:13.5px; line-height:1.65; color:var(--soft); }

/* vignettes — stylized compositions, not screenshots */
.lp-vig{ margin-top:auto; background:var(--alt); border-radius:var(--r-md); padding:12px; display:flex; flex-direction:column; gap:8px; }
.lpv-bub-u{
  align-self:flex-end; max-width:88%; background:var(--orange); color:#fff;
  border-radius:16px 16px 4px 16px; padding:10px 13px; font-size:12.5px; line-height:1.5;
}
.lpv-bub-a{
  align-self:flex-start; width:90%; background:#fff; border:1px solid var(--border);
  border-radius:4px 16px 16px 16px; padding:11px 12px; box-shadow:var(--sh-xs);
  display:flex; flex-direction:column; gap:7px;
}
.lpv-line{ height:8px; border-radius:var(--pill); background:#E3E8EE; }
.lpv-src{
  align-self:flex-start; margin-top:2px; font-size:10.5px; font-weight:600;
  color:var(--blue-text); background:var(--blue-soft); padding:4px 10px; border-radius:var(--pill);
}
.lpv-receipt{
  align-self:flex-start; display:inline-flex; align-items:center; gap:6px;
  background:var(--green-soft); color:var(--green-deep);
  font-size:11.5px; font-weight:500; line-height:1.35; padding:7px 12px; border-radius:var(--pill);
}
.lpv-receipt svg{ width:12px; height:12px; flex:none; }
.lpv-day{ font-size:10.5px; font-weight:600; color:var(--gray); margin-top:2px; }
.lpv-card{
  background:#fff; border:1px solid var(--border); border-radius:var(--r-md);
  padding:11px 12px; box-shadow:var(--sh-xs);
}
.lpv-card .t{ font-size:12.5px; font-weight:500; line-height:1.5; color:var(--ink); }
.lpv-chips{ display:flex; gap:7px; margin-top:8px; flex-wrap:wrap; }
.lpv-chip{
  font-size:11.5px; font-weight:500; color:var(--soft); background:#fff;
  border:1.5px solid var(--border-strong); border-radius:var(--pill); padding:6px 12px;
}
.lpv-sum .t{ font-weight:600; }
.lpv-sum .lines{ display:flex; flex-direction:column; gap:6px; margin-top:9px; }
.lpv-sum .lpv-line{ height:7px; }
.lpv-meta{ font-size:11px; color:var(--gray); margin-top:9px; }
.lpv-report{ display:flex; align-items:center; gap:11px; }
.lpv-report .ic{
  width:34px; height:34px; flex:none; border-radius:10px; background:var(--blue-soft);
  color:var(--blue-text); display:flex; align-items:center; justify-content:center;
}
.lpv-report .ic svg{ width:17px; height:17px; }
.lpv-report .t{ font-size:12.5px; font-weight:500; color:var(--ink); line-height:1.35; }
.lpv-report .d{ font-size:11px; color:var(--gray); margin-top:1px; }

/* ============ differentiator ============ */
.lp-foil{ font-size:13.5px; line-height:1.6; color:var(--gray); text-align:center; max-width:36em; margin:24px auto 0; }
.lp-trip{ display:flex; flex-direction:column; gap:18px; margin-top:24px; }
.lp-stage{
  display:grid; grid-template-columns:116px 1fr; gap:16px; align-items:center;
  background:#fff; border-radius:var(--r-lg); box-shadow:var(--sh-sm); padding:15px 16px;
}
.lp-stage-label{ font-size:13px; font-weight:600; color:var(--blue-text); margin-bottom:4px; }
.lp-stage-cap{ font-size:13px; line-height:1.6; color:var(--soft); text-wrap:pretty; }
.lp-ctaband{ text-align:center; margin-top:36px; }
.lp-ctaband .line{ font-size:14.5px; font-weight:500; color:var(--ink); margin-bottom:16px; }

/* ============ care team ============ */
.lp-roles{ display:grid; grid-template-columns:1fr; gap:12px; margin-top:28px; }
.lp-role{
  background:#fff; border-radius:16px; box-shadow:var(--sh-sm);
  display:flex; align-items:center; gap:13px; padding:15px 16px;
}
.lp-role-ic{ width:42px; height:42px; flex:none; border-radius:12px; display:flex; align-items:center; justify-content:center; }
.lp-role-ic svg{ width:21px; height:21px; }
.lp-role-ic.parent{ background:var(--orange-soft); color:var(--orange-deep); }
.lp-role-ic.rbt{ background:var(--blue-soft); color:var(--blue-text); }
.lp-role-ic.bcba{ background:var(--green-soft); color:var(--green-deep); }
.lp-role .rt{ font-size:14.5px; font-weight:600; }
.lp-role .rd{ font-size:12.5px; line-height:1.5; color:var(--soft); margin-top:1px; }
.lp-ext{ font-size:13px; line-height:1.6; color:var(--gray); text-align:center; margin-top:18px; }

/* ============ founder note ============ */
.lp-founder-card{
  max-width:640px; margin:0 auto; background:#fff; border-radius:var(--r-xl);
  box-shadow:var(--sh-md); padding:26px 24px;
  display:grid; grid-template-columns:56px 1fr; gap:18px; align-items:start;
}
.lp-founder-tile{
  /* photo-ready slot: swap the mark for a photo later, nothing else moves */
  width:56px; height:56px; border-radius:16px; background:var(--wash);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.lp-founder-tile img{ width:34px; height:auto; }
.lp-founder-k{ font-size:12.5px; font-weight:600; color:var(--blue-text); margin-bottom:8px; }
.lp-founder-body{ font-size:14.5px; line-height:1.75; color:var(--soft); text-wrap:pretty; }
.lp-sig{ display:flex; align-items:baseline; gap:9px; margin-top:16px; font-size:13px; font-weight:500; color:var(--ink); }

/* ============ pricing ============ */
.lp-price-card{
  max-width:440px; margin:28px auto 0; background:#fff; border-radius:var(--r-xl);
  box-shadow:var(--sh-md); padding:32px 26px 28px; text-align:center;
}
.lp-price-fig{ display:flex; align-items:baseline; justify-content:center; gap:7px; }
.lp-price-fig .num{ font-size:46px; font-weight:600; letter-spacing:-.02em; line-height:1; }
.lp-price-fig .per{ font-size:14px; color:var(--soft); }
.lp-price-list{ display:inline-flex; flex-direction:column; align-items:flex-start; gap:10px; margin:20px auto 24px; text-align:left; }
.lp-price-li{ display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--soft); }
.lp-price-li .ck{
  width:20px; height:20px; flex:none; border-radius:var(--pill); background:var(--green-soft);
  color:var(--green-deep); display:inline-flex; align-items:center; justify-content:center;
}
.lp-price-li .ck svg{ width:11px; height:11px; }
.lp-price-card .lp-btn{ width:100%; max-width:280px; }

/* ============ FAQ ============ */
.lp-faq{ max-width:620px; margin:26px auto 0; display:flex; flex-direction:column; gap:10px; }
.lp-qa{ background:#fff; border-radius:16px; box-shadow:var(--sh-sm); }
.lp-q{
  list-style:none; cursor:pointer; min-height:52px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 18px; font-size:14.5px; font-weight:500; color:var(--ink); line-height:1.4;
  border-radius:16px;
}
.lp-q::-webkit-details-marker{ display:none; }
.lp-q svg{ width:18px; height:18px; flex:none; color:var(--gray); transition:transform .18s ease; }
.lp-qa[open] .lp-q svg{ transform:rotate(180deg); }
.lp-a{ padding:0 18px 16px; font-size:13.5px; line-height:1.65; color:var(--soft); text-wrap:pretty; }

/* ============ footer ============ */
.lp-footer{ background:#fff; border-top:1px solid var(--border); padding:34px 24px 28px; }
.lp-footer-in{ max-width:1060px; margin:0 auto; display:flex; flex-direction:column; gap:22px; }
.lp-tagline{ font-size:12.5px; color:var(--gray); margin-top:10px; }
.lp-foot-links{ display:flex; flex-direction:column; align-items:flex-start; }
.lp-foot-links a{
  /* 44px floor per CLAUDE.md (README specced 42 and allows the pad-up) */
  display:inline-flex; align-items:center; min-height:44px; font-size:13.5px; font-weight:500;
}
.lp-foot-meta{ font-size:11.5px; color:var(--gray); line-height:1.7; }
.lp-foot-meta .patent{ opacity:.65; }

/* differentiator assembly — the real mark, deconstructed.
   Stage images are baked from tracecare-mark.png:
   full color = joined · flat-gray ghost = not yet joined · Year 1 is the
   untouched logo file. One plain <img> per stage; no runtime effects. */
.lp-asm{ display:block; width:116px; height:auto; }

/* micro-states are the page's only motion; still them for reduced-motion users */
@media (prefers-reduced-motion: reduce){
  .lp-page .lp-btn, .lp-page .lp-navlink, .lp-page .lp-q svg{ transition:none; }
  .lp-page .lp-btn:active{ transform:none; }
}

/* ============================================================
   DESKTOP
   ============================================================ */
@media (min-width: 760px){
  .lp-nav-in{ padding:18px 40px; }
  .lp-lockup img{ height:30px; }
  .lp-lockup b{ font-size:17.5px; }
  .lp-nav-actions{ gap:10px; }

  .lp-hero{ padding:88px 40px 96px; max-width:860px; }
  .lp-h1{ font-size:62px; max-width:12ch; }
  .lp-sub{ font-size:16.5px; max-width:38em; }
  .lp-quiet{ font-size:13px; }

  .lp-section{ padding:88px 40px; }
  .lp-h2{ font-size:33px; }
  .lp-lead{ font-size:16px; }
  .lp-head{ max-width:720px; }

  .lp-steps{ grid-template-columns:repeat(3,1fr); gap:22px; margin-top:40px; }
  .lp-step{ padding:24px 22px 20px; }

  .lp-foil{ font-size:15px; margin-top:30px; }
  .lp-trip{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:34px; }
  .lp-stage{ display:flex; flex-direction:column; text-align:center; gap:12px; padding:26px 18px 22px; }
  .lp-stage .lp-asm{ width:min(172px,100%); }
  .lp-stage-cap{ max-width:30ch; margin:0 auto; }
  .lp-ctaband{ margin-top:48px; }

  .lp-roles{ grid-template-columns:repeat(3,1fr); gap:20px; margin-top:36px; }
  .lp-role{ flex-direction:column; align-items:flex-start; gap:14px; padding:22px 20px; }

  .lp-founder-card{ padding:32px 34px; gap:22px; grid-template-columns:64px 1fr; }
  .lp-founder-tile{ width:64px; height:64px; }
  .lp-founder-tile img{ width:38px; }
  .lp-founder-body{ font-size:15px; }

  .lp-price-card{ margin-top:36px; padding:40px 36px 34px; }
  .lp-price-fig .num{ font-size:54px; }

  .lp-faq{ margin-top:34px; }
  .lp-q{ font-size:15px; padding:16px 20px; }
  .lp-a{ padding:0 20px 18px; font-size:14px; }

  .lp-footer{ padding:44px 40px 36px; }
  .lp-footer-in{ flex-direction:row; justify-content:space-between; align-items:flex-start; gap:40px; }
  .lp-foot-links{ flex-direction:row; gap:26px; }
  .lp-foot-meta{ text-align:right; }
}