/* Public landing page (templates/public/home.html). Scoped under .lp; all class names are lp-* so they never collide with the app styles. Light only. */
/* Outfit (SIL OFL, static/fonts/OFL-Outfit.txt), self-hosted: CSP allows fonts from 'self' only. */
@font-face { font-family: "Outfit"; src: url("../fonts/Outfit-latin-variable.fdf9c509a809.woff2") format("woff2"); font-weight: 500 700; font-style: normal; font-display: swap; }

  /* Sketch 009: one direction, real screenshots of the demo app (sample data).
     Locks: light page, one accent (deep teal), buttons are pills, containers 24px, screenshot frames 14px. */
  .lp {
    --ink: #0d1c1b; --muted: #50625f; --line: #dbe4e1; --page: #f3f6f5; --white: #fff;
    --teal-950: #04201e; --teal-900: #08403b; --teal-700: #0d5c55; --teal-500: #1b9a8c; --teal-100: #d7efe9; --teal-50: #ebf6f3;
    --display: 'Outfit', system-ui, sans-serif; --body: 'IBM Plex Sans', system-ui, sans-serif;
    --amber: #ffb224; --amber-hover: #ffc34d; --amber-ink: #2a1a00;
    --shadow: 0 30px 60px -24px rgb(5 41 38 / .45), 0 8px 18px -8px rgb(5 41 38 / .25);
  }
  :where(.lp) *, :where(.lp) *::before, :where(.lp) *::after { box-sizing: border-box; }
  html:has(.lp) { scroll-behavior: smooth; }
  .lp { color-scheme: light; background: var(--page); color: var(--ink); font: 400 17px/1.55 var(--body); -webkit-font-smoothing: antialiased; overflow-x: clip; }
  :where(.lp) :is(h1, h2, h3, p, ul) { margin: 0; } :where(.lp) ul { padding: 0; list-style: none; }
  :where(.lp) img { display: block; max-width: 100%; height: auto; }
  :where(.lp) a { color: inherit; }
  .lp-wrap { max-width: 1240px; margin: 0 auto; padding: 0 28px; }

  /* buttons: pills */
  .lp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 52px; padding: 0 26px; border-radius: 999px; font: 600 16px var(--display); letter-spacing: .005em; text-decoration: none; white-space: nowrap; border: 1.5px solid transparent; cursor: pointer; transition: transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s; }
  .lp-btn:hover { transform: translateY(-2px); } .lp-btn:active { transform: translateY(0) scale(.98); }
  .lp-btn-cta { background: var(--amber); color: var(--amber-ink); box-shadow: 0 1px 0 #fff6 inset, 0 14px 28px -12px rgb(255 178 36 / .75); }
  .lp-btn-cta:hover { background: var(--amber-hover); }
  .lp-btn-white { background: #fff; color: var(--teal-900); }
  .lp-btn-line { color: #fff; border-color: #ffffff66; } .lp-btn-line:hover { background: #ffffff14; }
  .lp-btn-teal { background: var(--teal-700); color: #fff; }
  .lp-btn-ghost { color: var(--ink); border-color: #0d1c1b33; } .lp-btn-ghost:hover { background: #fff; }
  .lp-btn-sm { height: 42px; padding: 0 20px; font-size: 15px; }

  /* nav */
  .lp-nav { display: flex; align-items: center; gap: 28px; height: 76px; }
  .lp-logo { display: flex; align-items: center; gap: 10px; font: 600 20px var(--display); text-decoration: none; letter-spacing: -.01em; }
  .lp-logo svg { width: 34px; height: 34px; padding: 7px; border-radius: 10px; background: var(--teal-700); color: #fff; }
  .lp-links { display: flex; gap: 6px; } .lp-links a { padding: 8px 14px; border-radius: 999px; text-decoration: none; color: var(--muted); font-size: 15.5px; } .lp-links a:hover { color: var(--ink); background: #fff; }
  .lp-nav .lp-end { margin-left: auto; display: flex; gap: 10px; }

  /* hero */
  .lp-hero { position: relative; border-radius: 32px; background: radial-gradient(900px 520px at 78% 8%, #14867a 0%, rgb(20 134 122 / 0) 62%), radial-gradient(700px 500px at 0% 100%, #0b5a53 0%, rgb(11 90 83 / 0) 60%), var(--teal-950); color: #fff; overflow: hidden; display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.2fr); gap: 20px; padding: 76px 0 0 64px; min-height: 640px; }
  .lp-hero::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(#ffffff0d 1px, transparent 1px), linear-gradient(90deg, #ffffff0d 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(600px 400px at 70% 30%, #000, transparent); pointer-events: none; }
  .lp-hero .lp-copy { position: relative; z-index: 2; padding-bottom: 80px; align-self: center; }
  .lp-hero h1 { font: 700 clamp(2.8rem, 5.4vw, 4.9rem)/1.02 var(--display); letter-spacing: -.035em; max-width: 9.5ch; }
  .lp-hero h1 span { color: #8fe3d4; }
  .lp-hero .lp-sub { font-size: 20px; line-height: 1.5; color: #d3ebe6; max-width: 31ch; margin: 24px 0 34px; }
  .lp-hero .lp-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
  .lp-hero .lp-shots { position: relative; z-index: 1; align-self: end; min-height: 540px; }
  .lp-frame { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); border: 1px solid #ffffff33; }
  .lp-frame .lp-bar { height: 34px; background: #eef2f1; display: flex; align-items: center; gap: 6px; padding: 0 14px; } .lp-frame .lp-bar .lp-dot { width: 10px; height: 10px; border-radius: 50%; background: #c9d3d0; }
  .lp-hero .lp-main { position: absolute; left: 0; top: 56px; width: 128%; transform: perspective(1800px) rotateY(-9deg) rotateX(2deg); transform-origin: left center; }
  .lp-phone { position: absolute; z-index: 3; right: 36px; bottom: -38px; width: 210px; border-radius: 34px; background: #0b1514; padding: 9px; box-shadow: var(--shadow); } .lp-phone img { border-radius: 26px; }
  .lp-sample { position: absolute; z-index: 4; left: 0; bottom: 14px; font-size: 12.5px; color: #9fd0c7; }
  .lp-in { animation: rise .9s cubic-bezier(.16,1,.3,1) both; } .lp-in.d1 { animation-delay: .08s; } .lp-in.d2 { animation-delay: .18s; } .lp-in.d3 { animation-delay: .3s; }
  @keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

  /* proof strip */
  .lp-truths { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 26px 0 8px; }
  .lp-truths li { display: flex; gap: 12px; align-items: center; font: 500 16px/1.3 var(--display); }
  .lp-truths svg { flex: none; width: 42px; height: 42px; padding: 10px; border-radius: 14px; background: var(--teal-100); color: var(--teal-700); }

  /* stat */
  .lp-band { background: radial-gradient(900px 420px at 15% 0%, #0d5c5588, transparent 60%), var(--teal-950); color: #fff; margin: 40px calc(50% - 50vw) 0; padding: 0; }
  .lp-band .lp-stat { max-width: 1240px; margin: 0 auto; padding-left: 28px; padding-right: 28px; }
  .lp-stat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; padding-top: 112px; padding-bottom: 112px; }
  .lp-stat .lp-big { font: 700 clamp(7rem, 17vw, 13rem)/.85 var(--display); letter-spacing: -.06em; color: var(--amber); }
  .lp-stat .lp-big small { font-size: .4em; letter-spacing: 0; }
  .lp-stat p.lead { font: 600 clamp(1.5rem, 2.5vw, 2.1rem)/1.2 var(--display); letter-spacing: -.02em; max-width: 24ch; margin-top: 18px; }
  .lp-stat .lp-src { font-size: 13.5px; color: #9cc7bf; margin-top: 14px; }
  .lp-says li { font: 500 clamp(1.4rem, 2.6vw, 2.2rem)/1.2 var(--display); letter-spacing: -.02em; padding: 18px 0; border-top: 1px solid #ffffff26; color: #fff; }
  .lp-says li:last-child { border-bottom: 1px solid #ffffff26; } .lp-says li:nth-child(2) { padding-left: 36px; } .lp-says li:nth-child(3) { padding-left: 72px; color: #8fe3d4; }

  /* sticky story */
  .lp-story { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 56px; padding: 40px 0 96px; }
  .lp-story h2 { font: 700 clamp(2.2rem, 4vw, 3.3rem)/1.05 var(--display); letter-spacing: -.03em; max-width: 13ch; }
  .lp-steps { margin-top: 36px; }
  .lp-step { min-height: 56vh; display: flex; flex-direction: column; justify-content: center; padding: 20px 0; border-top: 1px solid var(--line); transition: opacity .4s; }
  .lp-js .lp-step { opacity: .38; }
  .lp-js .lp-step.lp-on { opacity: 1; }
  .lp-step h3 { font: 700 2.1rem/1.08 var(--display); letter-spacing: -.025em; margin: 8px 0 12px; }
  .lp-step p { color: var(--muted); max-width: 40ch; }
  .lp-step .lp-tag { display: inline-flex; gap: 8px; align-items: center; width: fit-content; padding: 6px 14px 6px 8px; border-radius: 999px; background: var(--teal-100); color: var(--teal-900); font: 600 14px var(--display); }
  .lp-step .lp-tag svg { width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: var(--teal-700); color: #fff; }
  .lp-step .lp-m { display: none; margin-top: 18px; }
  .lp-step .lp-more { margin-top: 20px; width: fit-content; } .lp-step .lp-more.lp-btn { height: 46px; font-size: 15px; padding: 0 22px; }
  .lp-sticky { position: sticky; top: 96px; align-self: start; height: 560px; }
  .lp-sticky .lp-frame { position: absolute; inset: 0 0 auto 0; opacity: 0; transform: translateY(18px) scale(.985); transition: opacity .55s, transform .55s cubic-bezier(.16,1,.3,1); box-shadow: 0 40px 70px -30px rgb(5 41 38 / .5), 0 0 0 1px var(--line); border: 0; }
  .lp-sticky .lp-frame.lp-on { opacity: 1; transform: none; }
  .lp-sticky .lp-glow { position: absolute; inset: 30px -40px -30px 40px; background: radial-gradient(closest-side, var(--teal-100), transparent); z-index: -1; }

  /* bento */
  .lp-bento-wrap { padding: 20px 0 96px; }
  .lp-bento-wrap h2 { font: 700 clamp(2.2rem, 4vw, 3.3rem)/1.05 var(--display); letter-spacing: -.03em; max-width: 16ch; margin-bottom: 36px; }
  .lp-bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }
  .lp-cell { border-radius: 24px; padding: 32px; position: relative; overflow: hidden; min-width: 0; }
  .lp-cell h3 { font: 700 1.6rem/1.1 var(--display); letter-spacing: -.02em; margin-bottom: 8px; } .lp-cell p { max-width: 36ch; }
  .lp-c-aging { grid-column: span 7; grid-row: span 2; background: var(--white); border: 1px solid var(--line); min-height: 560px; }
  .lp-c-aging .lp-frame { position: absolute; left: 32px; right: -70px; top: 150px; box-shadow: var(--shadow); border-color: var(--line); }
  .lp-c-msg { grid-column: span 5; background: var(--teal-900); color: #fff; min-height: 300px; }
  .lp-c-msg p { color: #bfe0d9; }
  .lp-c-msg .lp-frame { position: absolute; left: 32px; right: -60px; bottom: -150px; border: 0; }
  .lp-c-phone { grid-column: span 5; background: var(--teal-100); min-height: 340px; display: grid; grid-template-columns: 1fr 150px; gap: 8px; }
  .lp-c-phone .lp-ph-wrap { align-self: end; margin: 0 -8px -60px 0; border-radius: 28px 28px 0 0; background: #0b1514; padding: 8px 8px 0; box-shadow: var(--shadow); } .lp-c-phone .lp-ph-wrap img { border-radius: 21px 21px 0 0; }
  .lp-c-data { grid-column: span 12; background: var(--white); border: 1px solid var(--line); display: flex; align-items: center; gap: 24px; justify-content: space-between; flex-wrap: wrap; }
  .lp-c-data h3 { margin: 0; } .lp-c-data .lp-ic { width: 64px; height: 64px; border-radius: 20px; background: var(--teal-100); color: var(--teal-700); display: grid; place-items: center; flex: none; } .lp-c-data .lp-ic svg { width: 32px; height: 32px; }
  .lp-c-data .lp-row { display: flex; gap: 20px; align-items: center; } .lp-c-data p { color: var(--muted); }


  /* try the demo */
  .lp-try { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; background: linear-gradient(135deg, var(--teal-100), #fff 80%); border: 1px solid var(--line); border-radius: 32px; padding: 56px 56px; margin: 0 0 96px; }
  .lp-try h2 { font: 700 clamp(2rem, 3.4vw, 2.9rem)/1.06 var(--display); letter-spacing: -.03em; max-width: 14ch; } .lp-try p { color: var(--muted); margin-top: 14px; max-width: 38ch; }
  .lp-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .lp-roles a { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; text-decoration: none; transition: transform .2s cubic-bezier(.16,1,.3,1), border-color .2s, box-shadow .2s; }
  .lp-roles a:hover { transform: translateY(-3px); border-color: var(--teal-700); box-shadow: 0 16px 30px -18px rgb(5 41 38 / .5); }
  .lp-roles .lp-av { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--teal-700); color: #fff; display: grid; place-items: center; font: 600 15px var(--display); }
  .lp-roles b { display: block; font: 600 17px/1.2 var(--display); } .lp-roles small { display: block; color: var(--muted); font-size: 14px; line-height: 1.3; margin-top: 2px; } .lp-roles a > svg { margin-left: auto; color: var(--teal-700); }
  /* sticky call to action on phones */
  .lp-mbar { display: none; position: sticky; bottom: 0; z-index: 60; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgb(4 32 30 / .94); backdrop-filter: blur(10px); gap: 10px; }
  .lp-mbar .lp-btn { flex: 1; height: 48px; }

  /* how it works */
  .lp-how { padding: 20px 0 100px; } .lp-how h2 { font: 700 clamp(2.2rem, 4vw, 3.3rem)/1.05 var(--display); letter-spacing: -.03em; margin-bottom: 40px; }
  .lp-how li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; align-items: baseline; padding: 30px 0; border-top: 1px solid var(--line); }
  .lp-how li:nth-child(2) { margin-left: 8%; } .lp-how li:nth-child(3) { margin-left: 16%; }
  .lp-how li:last-child { border-bottom: 1px solid var(--line); }
  .lp-how b { font: 700 clamp(1.8rem, 3.4vw, 2.8rem)/1.05 var(--display); letter-spacing: -.025em; } .lp-how p { color: var(--muted); font-size: 18px; max-width: 42ch; }

  /* pilot */
  .lp-pilot { border-radius: 32px; background: radial-gradient(700px 400px at 100% 0%, #14867a66, transparent 60%), var(--teal-950); color: #fff; padding: 72px 64px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
  .lp-pilot h2 { font: 700 clamp(2.1rem, 3.8vw, 3.2rem)/1.06 var(--display); letter-spacing: -.03em; max-width: 14ch; margin-bottom: 28px; }
  .lp-pilot li { display: flex; gap: 14px; padding: 15px 0; border-top: 1px solid #ffffff22; font-size: 18px; color: #e0f1ee; } .lp-pilot li:last-child { border-bottom: 1px solid #ffffff22; }
  .lp-pilot li > svg { flex: none; color: #8fe3d4; margin-top: 3px; width: 22px; height: 22px; }

  /* faq */
  .lp-faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; padding: 100px 0; } .lp-faq h2 { font: 700 clamp(2.2rem, 4vw, 3.3rem)/1.05 var(--display); letter-spacing: -.03em; }
  .lp details { border-top: 1px solid var(--line); padding: 22px 0; } .lp details:last-child { border-bottom: 1px solid var(--line); }
  .lp summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; font: 600 1.25rem/1.25 var(--display); } .lp summary::-webkit-details-marker { display: none; }
  .lp summary::after { content: '+'; font-size: 1.8rem; line-height: 1; color: var(--teal-700); transition: transform .25s; } .lp details[open] .lp summary::after { transform: rotate(45deg); }
  .lp details p { color: var(--muted); margin-top: 12px; max-width: 56ch; }

  /* final cta + footer */
  .lp-final { text-align: center; padding: 40px 0 110px; } .lp-final h2 { font: 700 clamp(2.6rem, 6vw, 5rem)/1 var(--display); letter-spacing: -.04em; max-width: 12ch; margin: 0 auto 30px; } .lp-final .lp-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
  .lp footer { border-top: 1px solid var(--line); padding: 34px 0 56px; color: var(--muted); font-size: 15px; } .lp footer .lp-wrap { display: flex; flex-wrap: wrap; gap: 28px; justify-content: space-between; }

  /* scroll reveal: opacity and transform only */
  .lp-js .lp-rv { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); } .lp-rv.lp-on { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) { .lp-js .lp-rv, .lp-in, .lp-js .lp-step, .lp-sticky .lp-frame { animation: none; transition: none; opacity: 1; transform: none; } .lp-sticky .lp-frame:not(.lp-on) { opacity: 0; } }

  /* narrow screens (also used by the phone toggle via .lp-phone) */
  @media (max-width: 900px) {
    .lp-hero { grid-template-columns: 1fr; padding: 44px 0 0 24px; min-height: 0; } .lp-hero .lp-copy { padding-bottom: 36px; } .lp-hero .lp-shots { min-height: 360px; margin-right: 0; }
    .lp-hero .lp-main { width: 130%; } .lp-phone { width: 130px; right: 14px; bottom: -22px; border-radius: 24px; padding: 6px; } .lp-phone img { border-radius: 18px; }
    .lp-links { display: none; } .lp-nav .lp-btn-ghost, .lp-nav .lp-hide-sm { display: none; } .lp-logo { white-space: nowrap; } .lp-truths { grid-template-columns: 1fr 1fr; } .lp-stat { grid-template-columns: 1fr; gap: 40px; padding: 64px 0; }
    .lp-says li:nth-child(n) { padding-left: 0; } .lp-story { grid-template-columns: 1fr; } .lp-sticky { display: none; } .lp-step { min-height: 0; opacity: 1; padding: 36px 0; } .lp-step .lp-m { display: block; }
    .lp-bento { grid-template-columns: 1fr; } .lp-c-aging, .lp-c-msg, .lp-c-phone, .lp-c-data { grid-column: auto; grid-row: auto; } .lp-c-aging { min-height: 420px; } .lp-c-msg { min-height: 340px; } .lp-cell { padding: 24px; }
    .lp-how li, .lp-faq, .lp-pilot { grid-template-columns: 1fr; gap: 14px; } .lp-how li:nth-child(n) { margin-left: 0; } .lp-pilot { padding: 40px 24px; gap: 32px; } .lp-faq { gap: 28px; padding: 64px 0; }
    .lp-wrap { padding: 0 16px; } .lp-try { grid-template-columns: 1fr; padding: 32px 22px; gap: 28px; } .lp-roles { grid-template-columns: 1fr; } .lp-mbar { display: flex; } .lp-band .lp-stat { padding-left: 16px; padding-right: 16px; }
}