/* ==========================================================================
   home.css - the landing page only.

   site.css stays the shared stylesheet for the blog, docs, contact and legal
   pages. Everything here is scoped to body.lp (only index.html carries that
   class) so the dark landing page cannot leak into any other page. New
   components use the lp- prefix; the few shared pieces the page keeps (nav,
   video frame, FAQ, language modal) are overridden by name under body.lp.
   The footer already uses --forest-deep, so it needs no override at all.
   ========================================================================== */

/* Language names in the strip, the wall and the modal. Each face carries only
   the characters those names use, so all ten together are about 21 KB. Built
   by tools/subset-noto-fonts.py --fetch-lang-names. Bengali, Devanagari and
   Arabic already ship from site.css and are not repeated here. */
@font-face{font-family:'Noto Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/noto-sans-euro-v1.woff2) format('woff2');unicode-range:U+0020, U+0301, U+0306, U+0308, U+0388, U+0390, U+0395, U+03AC, U+03AE, U+03AF, U+03B1, U+03B7, U+03B9, U+03BA, U+03BB, U+03BD, U+03CA, U+040E, U+0411, U+041C, U+0420, U+0421, U+0423, U+0430, U+0433, U+0434, U+0435, U+0437, U+0438, U+0439, U+043A, U+043B, U+043D, U+043E, U+043F, U+0440, U+0441, U+0443, U+044A, U+044C, U+044F, U+0451, U+0453, U+0456, U+0457, U+045C, U+045E, U+049A, U+049B, U+04D1, U+04D3, U+04D7, U+04DF, U+04E5, U+04E7, U+04F0, U+04F1, U+1FB0, U+1FD0, U+FE00}
@font-face{font-family:'Noto Sans Thai';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/noto-sans-thai-v1.woff2) format('woff2');unicode-range:U+0020, U+0E17, U+0E22, U+0E44}
@font-face{font-family:'Noto Sans Tamil';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/noto-sans-tamil-v1.woff2) format('woff2');unicode-range:U+0020, U+0BA4, U+0BAE, U+0BB4, U+0BBF, U+0BCD}
@font-face{font-family:'Noto Sans Telugu';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/noto-sans-telugu-v1.woff2) format('woff2');unicode-range:U+0020, U+0C24, U+0C32, U+0C41, U+0C46, U+0C97}
@font-face{font-family:'Noto Sans Kannada';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/noto-sans-kannada-v1.woff2) format('woff2');unicode-range:U+0020, U+0C95, U+0CA1, U+0CA8, U+0CCD}
@font-face{font-family:'Noto Sans Malayalam';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/noto-sans-malayalam-v1.woff2) format('woff2');unicode-range:U+0020, U+0D02, U+0D2E, U+0D2F, U+0D32, U+0D33, U+0D3E}
@font-face{font-family:'Noto Sans Gujarati';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/noto-sans-gujarati-v1.woff2) format('woff2');unicode-range:U+0020, U+0A97, U+0AA4, U+0AAC, U+0AB0, U+0ABE, U+0AC0, U+0AC1}
@font-face{font-family:'Noto Sans Gurmukhi';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/noto-sans-gurmukhi-v1.woff2) format('woff2');unicode-range:U+0020, U+0A1C, U+0A2A, U+0A2C, U+0A3E, U+0A40, U+0A70}
@font-face{font-family:'Noto Sans JP';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/noto-sans-jp-v1.woff2) format('woff2');unicode-range:U+0020, U+4E2D, U+6587, U+65E5, U+672C, U+8A9E}
@font-face{font-family:'Noto Sans SC';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/noto-sans-jp-v1.woff2) format('woff2');unicode-range:U+0020, U+4E2D, U+6587, U+65E5, U+672C, U+8A9E}
@font-face{font-family:'Noto Sans KR';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/noto-sans-kr-v1.woff2) format('woff2');unicode-range:U+0020, U+1100, U+1101, U+1102, U+1103, U+1104, U+1105, U+1106, U+1107, U+1108, U+1109, U+110A, U+110B, U+110C, U+110D, U+110E, U+110F, U+1110, U+1111, U+1112, U+1161, U+1162, U+1163, U+1164, U+1165, U+1166, U+1167, U+1168, U+1169, U+116A, U+116B, U+116C, U+116D, U+AD6D, U+C5B4, U+D55C}

/* --------------------------------------------------------------- tokens -- */
body.lp {
  --lp-ground: #080B0A;
  --lp-panel: #101512;
  --lp-panel-2: #151C18;
  --lp-line: #1F2B25;
  --lp-accent: #35D28E;
  --lp-accent-deep: #1FA971;
  --lp-wash: rgba(53, 210, 142, .10);
  --lp-text: #E8F1EB;
  --lp-muted: #8DA398;
  --lp-dim: #5F7368;

  background: var(--lp-ground);
  color: var(--lp-text);
}

/* A soft light that stays with the page as you scroll, so no section is ever
   flat black. It sits on its own fixed layer; every section is position:
   relative (from site.css) and so paints above it. */
body.lp::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(46% 38% at 10% 16%, rgba(53, 210, 142, .11), transparent 72%),
    radial-gradient(42% 36% at 92% 54%, rgba(31, 169, 113, .09), transparent 72%),
    radial-gradient(40% 34% at 30% 88%, rgba(53, 210, 142, .07), transparent 74%);
  animation: lp-drift 30s ease-in-out infinite alternate;
}
@keyframes lp-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(0, -3%, 0) scale(1.08); }
}

body.lp .lang-pick summary { color: var(--lp-muted); }
body.lp .lang-pick summary:hover { color: var(--lp-text); }
body.lp .lang-pick ul {
  background: var(--lp-panel-2);
  border-color: var(--lp-line);
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .9);
}
body.lp .lang-pick ul a { color: var(--lp-text); }
body.lp .lang-pick ul a:hover { background: var(--lp-wash); }
body.lp .lang-pick ul a[aria-current="page"] { color: var(--lp-accent); }
body.lp .mobile-lang { border-top-color: var(--lp-line); }
body.lp .mobile-lang a { color: var(--lp-muted); }
body.lp .mobile-lang a[aria-current="page"] { color: var(--lp-accent); }

body.lp h1, body.lp h2, body.lp h3 { color: var(--lp-text); }
body.lp .eyebrow { color: var(--lp-accent); }
body.lp ::selection { background: rgba(53, 210, 142, .3); }

/* Sections only animate once JS is running, so the page is fully readable
   with scripting off and nothing is left parked at opacity 0. */
html.js body.lp .lp-reveal { opacity: 0; transform: translateY(26px); }
body.lp .lp-reveal { transition: opacity .72s cubic-bezier(.2,.7,.3,1), transform .72s cubic-bezier(.2,.7,.3,1); }
/* Same selector depth as the hidden rule above it, or the hidden rule wins on
   specificity and the section never appears. */
html.js body.lp .lp-reveal.in { opacity: 1; transform: none; }

/* Siblings in a row arrive one after another rather than all at once. */
body.lp .lp-steps > .lp-reveal:nth-child(2),
body.lp .lp-cards > .lp-reveal:nth-child(2) { transition-delay: .09s; }
body.lp .lp-steps > .lp-reveal:nth-child(3),
body.lp .lp-cards > .lp-reveal:nth-child(3) { transition-delay: .18s; }
body.lp .lp-cards > .lp-reveal:nth-child(4) { transition-delay: .27s; }
body.lp .lp-tiers > .lp-reveal:nth-child(2) { transition-delay: .1s; }
body.lp .qa.lp-reveal:nth-child(2) { transition-delay: .06s; }
body.lp .qa.lp-reveal:nth-child(3) { transition-delay: .12s; }
body.lp .qa.lp-reveal:nth-child(4) { transition-delay: .18s; }
body.lp .qa.lp-reveal:nth-child(5) { transition-delay: .24s; }

/* ------------------------------------------------------------------ nav -- */
body.lp header.nav .brand { color: var(--lp-text); }
body.lp header.nav .links a,
body.lp header.nav .mobile-menu a { color: var(--lp-muted); }
body.lp header.nav .links a:hover,
body.lp header.nav .mobile-menu a:hover { color: var(--lp-text); }
body.lp header.nav.scrolled {
  background: rgba(8, 11, 10, .84);
  box-shadow: 0 1px 0 var(--lp-line);
}
body.lp header.nav .btn-ghost { color: var(--lp-text); border-color: var(--lp-line); }
body.lp header.nav .btn-ghost:hover { border-color: var(--lp-accent-deep); background: var(--lp-panel); }
body.lp .mobile-menu { background: var(--lp-panel); border-color: var(--lp-line); }
body.lp .menu-toggle span { background: var(--lp-text); }

body.lp .btn-primary {
  background: var(--lp-accent);
  color: #04150E;
  box-shadow: 0 10px 30px -12px rgba(53, 210, 142, .7);
}
body.lp .btn-primary:hover {
  background: #4EE0A0;
  box-shadow: 0 14px 38px -12px rgba(53, 210, 142, .85);
}
body.lp .btn-ghost { color: var(--lp-text); border: 1.5px solid var(--lp-line); background: var(--lp-panel); }
body.lp .btn-ghost:hover { border-color: var(--lp-accent-deep); background: var(--lp-panel-2); }

/* ----------------------------------------------------------------- hero -- */
.lp-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(53, 210, 142, .10);
}

/* The halo. Two soft green lights, one behind the headline and one behind the
   screenshot, breathing slowly out of phase so the glow never looks static. */
.lp-halo {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(10px);
}
.lp-halo-a {
  left: -16%; top: -30%;
  width: 900px; height: 900px;
  background: radial-gradient(circle, rgba(53,210,142,.22), rgba(53,210,142,.06) 42%, transparent 68%);
  animation: lp-breathe 11s ease-in-out infinite;
}
.lp-halo-b {
  right: -22%; top: 4%;
  width: 1000px; height: 1000px;
  background: radial-gradient(circle, rgba(31,169,113,.20), rgba(31,169,113,.05) 45%, transparent 70%);
  animation: lp-breathe 14s ease-in-out infinite reverse;
}
@keyframes lp-breathe {
  0%, 100% { transform: scale(1); opacity: .85; }
  50%      { transform: scale(1.12); opacity: 1; }
}

.lp-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 52px;
  align-items: center;
  padding-top: 76px;
  padding-bottom: 78px;
}

/* German compounds, Bengali conjuncts and long URLs all overflow a headline
   that has nowhere to break. This never fires on a word that fits. */
.lp-hero h1,
.lp-shead h2,
.lp-row h2,
.lp-step h3,
.lp-card h3,
.lp-ex-head h3 { overflow-wrap: break-word; }

.lp-hero h1 {
  font-size: clamp(34px, 4.3vw, 54px);
  line-height: 1.05;
  font-weight: 700;
  margin: 20px 0 20px;
  text-wrap: balance;
}
.lp-hero h1 .hl { color: var(--lp-accent); }

.lp-lead {
  color: var(--lp-muted);
  font-size: 18.5px;
  line-height: 1.62;
  max-width: 34em;
}
.lp-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.lp-hero .lp-cta-row .btn-primary { font-size: 17px; padding: 16px 44px; border-radius: 14px; }
.lp-hero .lp-cta-row .btn-primary .apple { width: 18px; height: 18px; }
.lp-fine { margin-top: 14px; font-size: 14px; line-height: 1.6; color: var(--lp-dim); }
/* Whether the visitor is on a Mac is known before first paint, so the two
   versions of this line swap with no flash. Only Chromium reports the macOS
   version (see lp-home.js), so on Safari and Firefox every Mac gets the short
   line, including the few still on macOS 14 or older. */
.lp-on-mac { display: none; }
html.mac .lp-on-mac { display: inline; }
html.mac .lp-any-os { display: none; }

.lp-hero-shot { position: relative; margin-inline-end: -18vw; }

/* Rim light around every screenshot, so the app art sits on the page instead
   of floating on it. */
.lp-shot {
  position: relative;
  border-radius: 13px;
  overflow: hidden;
  border: 1px solid var(--lp-line);
  background: #000;
  box-shadow:
    0 40px 90px -44px rgba(0, 0, 0, .95),
    0 0 0 1px rgba(53, 210, 142, .07),
    0 0 70px -30px rgba(53, 210, 142, .45);
}
.lp-shot img { width: 100%; height: auto; display: block; }
.lp-cap { margin-top: 12px; font-size: 13.5px; color: var(--lp-dim); }

/* ------------------------------------------------------- language strip -- */
body.lp .lang-strip {
  position: relative;
  margin-top: 8px;
  padding: 22px 0 4px;
  border-top: 1px solid var(--lp-line);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
body.lp .lang-track { display: flex; gap: 12px; width: max-content; }
body.lp .lang-chip {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 9px 15px;
  border: 1px solid var(--lp-line);
  border-radius: 11px;
  background: var(--lp-panel);
  white-space: nowrap;
}
body.lp .lang-chip .n { font-size: 15.5px; color: var(--lp-text); line-height: 1.35; }
body.lp .lang-chip .e {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--lp-dim);
}

/* -------------------------------------------------------------- section -- */
.lp-band { padding: 84px 0; border-bottom: 1px solid rgba(53, 210, 142, .10); }
.lp-band.tight { padding: 64px 0; }
/* Section headers are centred; the copy inside cards and rows stays left so
   it is still easy to read for people reading English as a second language. */
.lp-shead { max-width: 680px; margin: 0 auto; text-align: center; }
.lp-shead h2 { font-size: clamp(27px, 3.3vw, 39px); line-height: 1.1; margin: 14px 0 14px; text-wrap: balance; }
.lp-shead p { color: var(--lp-muted); font-size: 17.5px; }
.lp-shead.left { margin-inline-start: 0; text-align: start; }

/* ---------------------------------------------------------------- steps -- */
.lp-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--lp-line);
  border: 1px solid var(--lp-line);
  border-radius: 16px;
  overflow: hidden;
  margin-top: 44px;
}
.lp-step {
  background:
    radial-gradient(130% 100% at 50% -25%, rgba(53, 210, 142, .085), transparent 62%),
    var(--lp-panel);
  padding: 32px 28px 36px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);
}
.lp-step .n {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--lp-accent);
  margin-bottom: 18px;
}
.lp-step h3 { font-size: 20px; margin-bottom: 9px; line-height: 1.2; }
.lp-step p { color: var(--lp-muted); font-size: 15.5px; }

/* ----------------------------------------------------------- demo pair -- */
.lp-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 42px; }
.lp-panel {
  background: var(--lp-panel);
  border: 1px solid var(--lp-line);
  border-radius: 16px;
  padding: 24px 24px 26px;
  min-height: 210px;
}
.lp-panel.out {
  background: linear-gradient(180deg, rgba(53, 210, 142, .07), var(--lp-panel) 55%);
  border-color: rgba(53, 210, 142, .3);
}
.lp-plabel {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lp-dim);
  margin-bottom: 15px;
}
.lp-panel.out .lp-plabel { color: var(--lp-accent); }
.lp-say { font-size: 18px; line-height: 1.72; color: var(--lp-muted); transition: opacity .4s ease; }
.lp-panel.out .lp-say { color: var(--lp-text); }
.lp-say.fade { opacity: 0; }
.lp-chip {
  margin-inline-start: auto;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 11.5px;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--lp-muted);
  background: var(--lp-panel-2);
  border: 1px solid var(--lp-line);
  border-radius: 100px;
  padding: 3px 10px;
}

/* ------------------------------------------------------------ video --- */
body.lp .video-frame {
  border: 1px solid var(--lp-line);
  border-radius: 16px;
  background: #000;
  box-shadow: 0 40px 90px -44px rgba(0, 0, 0, .95), 0 0 80px -34px rgba(53, 210, 142, .4);
}
body.lp .video-note { color: var(--lp-dim); }

/* ------------------------------------------------------- feature rows --- */
.lp-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.22fr);
  gap: 54px;
  align-items: center;
}
.lp-row.flip { grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr); }
.lp-row.flip .lp-txt { order: 2; }
.lp-row.flip .lp-pic { order: 1; }
.lp-row h2 { font-size: clamp(26px, 3.1vw, 37px); line-height: 1.1; margin: 14px 0 16px; }
.lp-row p { color: var(--lp-muted); font-size: 17px; }
.lp-row p + p { margin-top: 14px; }

.lp-modelist {
  list-style: none;
  margin: 24px 0 0;
  display: grid;
  gap: 1px;
  background: var(--lp-line);
  border: 1px solid var(--lp-line);
  border-radius: 14px;
  overflow: hidden;
}
.lp-modelist li { background: var(--lp-panel); padding: 17px 20px; }
.lp-modelist b {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 16.5px;
  color: var(--lp-text);
  display: block;
  margin-bottom: 3px;
}
.lp-modelist span { color: var(--lp-muted); font-size: 15px; }

.lp-statline {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid var(--lp-line);
}
.lp-statline .k {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 32px;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--lp-accent);
  line-height: 1;
}
.lp-statline .v { font-size: 14px; color: var(--lp-dim); margin-top: 6px; }

/* -------------------------------------------------------------- cards --- */
.lp-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; }
.lp-card {
  background:
    radial-gradient(120% 100% at 50% -20%, rgba(53, 210, 142, .08), transparent 60%),
    var(--lp-panel);
  border: 1px solid var(--lp-line);
  border-radius: 16px;
  padding: 26px 24px 28px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 24px 60px -40px rgba(0, 0, 0, .9);
  transition: border-color .2s ease, transform .2s ease;
}
.lp-card:hover { border-color: rgba(53, 210, 142, .28); transform: translateY(-2px); }
.lp-card.wide {
  grid-column: span 2;
  padding: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr .92fr;
  align-items: center;
}
.lp-card.wide .lp-card-in { padding: 28px 26px; }
/* The image fills its half of the card and is cropped from the right, which
   keeps the app sidebar visible. Letterboxing on black left a bar that read
   as a rendering fault; the full window is one click away in the lightbox. */
.lp-card.wide img {
  width: 100%;
  height: 100%;
  min-height: 250px;
  object-fit: cover;
  object-position: left center;
  border-inline-start: 1px solid var(--lp-line);
}
.lp-card.wide { align-items: stretch; }
.lp-card h3 { font-size: 18.5px; margin-bottom: 8px; display: flex; align-items: center; gap: 9px; line-height: 1.25; }
.lp-card p { color: var(--lp-muted); font-size: 15.5px; }
.lp-card p + p { margin-top: 12px; }
.lp-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--lp-accent);
  border: 1px solid rgba(53, 210, 142, .3);
  border-radius: 6px;
  padding: 2px 7px;
}

/* ------------------------------------------------------------- cleanup --- */
.lp-cleanup {
  margin-top: 42px;
  border: 1px solid var(--lp-line);
  border-radius: 18px;
  background: var(--lp-panel);
  overflow: hidden;
}
.lp-cleanup-row { padding: 26px 28px 28px; }
.lp-cleanup-row.out {
  background: linear-gradient(180deg, rgba(53, 210, 142, .08), var(--lp-panel) 70%);
  border-top: 1px solid var(--lp-line);
}
.lp-cleanup-tag {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lp-dim);
  margin-bottom: 12px;
}
.lp-cleanup-row.out .lp-cleanup-tag { color: var(--lp-accent); }
.lp-cleanup-text {
  font-size: clamp(18px, 2.1vw, 23px);
  line-height: 1.62;
  text-wrap: pretty;
}
.lp-cleanup-text.raw { color: var(--lp-muted); }
/* The words Lipo drops stay on the page, struck through, so the reader can see
   exactly what cleanup did rather than take it on trust. */
.lp-cleanup-text.raw s {
  color: var(--lp-dim);
  text-decoration: line-through;
  text-decoration-color: rgba(220, 110, 110, .75);
  text-decoration-thickness: 2px;
}
.lp-cleanup-text.clean { color: var(--lp-text); }
.lp-cleanup-text.clean b {
  color: var(--lp-accent);
  font-weight: 700;
  background: var(--lp-wash);
  border-radius: 3px;
  padding: 0 2px;
}

/* The arrow sits on the seam between the two rows. */
.lp-cleanup-mid { position: relative; height: 0; }
.lp-cleanup-arrow {
  position: absolute;
  inset-inline-start: 28px;
  top: -17px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--lp-panel-2);
  border: 1px solid var(--lp-line);
  color: var(--lp-accent);
  z-index: 1;
}
.lp-cleanup-arrow svg { width: 17px; height: 17px; }

.lp-cleanup-key {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
  padding: 14px 28px 16px;
  border-top: 1px solid var(--lp-line);
  background: var(--lp-ground);
  font-size: 13.5px;
  color: var(--lp-dim);
}
.lp-cleanup-key i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-inline-end: 8px; vertical-align: middle; }
.lp-cleanup-key .k-cut { background: rgba(220, 110, 110, .8); }
.lp-cleanup-key .k-add { background: var(--lp-accent); }
.lp-cleanup-key .lp-cleanup-note { margin-inline-start: auto; }

/* -------------------------------------------------------- time-saved bars - */
.lp-bars {
  border: 1px solid var(--lp-line);
  border-radius: 16px;
  background:
    radial-gradient(120% 90% at 50% -15%, rgba(53, 210, 142, .075), transparent 62%),
    var(--lp-panel);
  padding: 26px 26px 24px;
  display: grid;
  gap: 20px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);
}
.lp-bar-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 9px;
}
.lp-bar-head span { font-size: 14.5px; color: var(--lp-muted); }
.lp-bar-head b {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 26px;
  letter-spacing: -.02em;
  color: var(--lp-text);
  font-variant-numeric: tabular-nums;
}
.lp-bar-row.good .lp-bar-head b { color: var(--lp-accent); }
.lp-bar { height: 12px; border-radius: 7px; background: var(--lp-panel-2); overflow: hidden; }
.lp-bar i { display: block; height: 100%; border-radius: 7px; background: #33413A; }
.lp-bar-row.good .lp-bar i { background: linear-gradient(90deg, var(--lp-accent-deep), var(--lp-accent)); }
.lp-bar-note { margin-top: 7px; font-size: 13px; color: var(--lp-dim); }
.lp-saved {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  padding-top: 22px;
  border-top: 1px solid var(--lp-line);
}
.lp-saved-cell {
  display: grid;
  gap: 6px;
  padding: 16px 18px 15px;
  border-radius: 12px;
  background: var(--lp-panel-2);
  border: 1px solid var(--lp-line);
}
.lp-saved-cell.money {
  background:
    radial-gradient(120% 100% at 50% -20%, rgba(53, 210, 142, .16), transparent 62%),
    var(--lp-panel-2);
  border-color: rgba(53, 210, 142, .28);
}
.lp-saved span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lp-accent);
}
.lp-saved b {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 36px;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--lp-text);
  font-variant-numeric: tabular-nums;
}
.lp-saved-cell.money b { color: var(--lp-accent); }
.lp-saved em { font-style: normal; font-size: 13px; color: var(--lp-dim); }
.lp-saved-week { font-size: 14.5px; color: var(--lp-muted); line-height: 1.55; }
.lp-saved-week b { color: var(--lp-text); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------- only-in-Lipo tag - */
.lp-only {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--lp-accent);
  background: var(--lp-wash);
  border: 1px solid rgba(53, 210, 142, .3);
  border-radius: 6px;
  padding: 3px 8px;
  white-space: nowrap;
  vertical-align: middle;
}
.lp-claim .lp-only { margin-inline-end: 8px; }
.lp-row p.lp-claim { color: var(--lp-text); margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--lp-line); }
.lp-claim strong {
  display: block;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--lp-text);
  text-wrap: balance;
}
.lp-claim span { display: block; margin-top: 8px; font-size: 17px; color: var(--lp-accent); }


/* -------------------------------------------------- cleanup example rail - */
.lp-ex-wrap { margin-top: 40px; position: relative; }
.lp-ex-scroller {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.lp-ex-scroller::-webkit-scrollbar { display: none; }
.lp-ex-track { display: flex; align-items: stretch; gap: 18px; width: max-content; padding: 2px; }
.lp-ex {
  scroll-snap-align: start;
  width: 600px;
  max-width: 86vw;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--lp-line);
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% -15%, rgba(53, 210, 142, .08), transparent 60%),
    var(--lp-panel);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 24px 60px -42px rgba(0, 0, 0, .9);
}
.lp-ex-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 24px 16px;
  border-bottom: 1px solid var(--lp-line);
}
.lp-ex-head h3 { font-size: 17.5px; }
.lp-ex-mode {
  margin-inline-start: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--lp-accent);
  border: 1px solid rgba(53, 210, 142, .3);
  border-radius: 6px;
  padding: 3px 8px;
  white-space: nowrap;
}
.lp-ex-body { padding: 22px 24px 10px; }
.lp-ex-body.out {
  padding-bottom: 24px;
  flex: 1;
  background: linear-gradient(180deg, rgba(53, 210, 142, .07), transparent 80%);
  border-top: 1px solid var(--lp-line);
  position: relative;
}
.lp-ex-tag {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lp-dim);
  margin-bottom: 10px;
}
.lp-ex-body.out .lp-ex-tag { color: var(--lp-accent); }
.lp-ex-text { font-size: 17.5px; line-height: 1.65; }
.lp-ex-text.raw { color: var(--lp-muted); }
.lp-ex-text.raw s {
  color: var(--lp-dim);
  text-decoration: line-through;
  text-decoration-color: rgba(220, 110, 110, .75);
  text-decoration-thickness: 2px;
}
.lp-ex-text.clean { color: var(--lp-text); }
.lp-ex-text.clean b {
  color: var(--lp-accent);
  font-weight: 700;
  background: var(--lp-wash);
  border-radius: 3px;
  padding: 0 2px;
}
.lp-ex-text.clean code {
  font-family: 'JetBrains Mono', monospace;
  font-size: .88em;
  background: var(--lp-panel-2);
  border: 1px solid var(--lp-line);
  border-radius: 5px;
  padding: 1px 5px;
}
.lp-ex-arrow {
  position: absolute;
  inset-inline-start: 24px;
  top: -15px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--lp-panel-2);
  border: 1px solid var(--lp-line);
  color: var(--lp-accent);
}
.lp-ex-arrow svg { width: 15px; height: 15px; }

.lp-ex-foot {
  display: flex;
  align-items: center;
  gap: 10px 22px;
  flex-wrap: wrap;
  margin-top: 18px;
  font-size: 13.5px;
  color: var(--lp-dim);
}
.lp-ex-foot i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-inline-end: 8px; vertical-align: middle; }
.lp-ex-foot .k-cut { background: rgba(220, 110, 110, .8); }
.lp-ex-foot .k-add { background: var(--lp-accent); }
.lp-ex-btns { margin-inline-start: auto; display: flex; gap: 8px; }
.lp-ex-btn {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--lp-line);
  background: var(--lp-panel);
  color: var(--lp-text);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: border-color .16s ease, opacity .16s ease;
}
.lp-ex-btn:hover:not(:disabled) { border-color: var(--lp-accent-deep); }
.lp-ex-btn:disabled { opacity: .35; cursor: default; }
.lp-ex-btn:focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 2px; }
.lp-ex-btn svg { width: 17px; height: 17px; }

/* ---------------------------------------------------- savings calculator - */
.lp-save-inputs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--lp-line);
}
.lp-save-inputs label { min-width: 0; white-space: nowrap; }
.lp-save-inputs label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--lp-muted);
  background: var(--lp-panel-2);
  border: 1px solid var(--lp-line);
  border-radius: 10px;
  padding: 8px 12px;
}
.lp-save-inputs input {
  width: 3.6em;
  min-width: 0;
  flex: 1 1 auto;
  margin-inline-start: auto;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--lp-text);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--lp-line);
  padding: 2px 2px 3px;
  text-align: end;
}
.lp-save-inputs input:focus { outline: none; border-bottom-color: var(--lp-accent); }
.lp-save-inputs input::-webkit-outer-spin-button,
.lp-save-inputs input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.lp-save-inputs input[type=number] { -moz-appearance: textfield; }
.lp-save-inputs .unit { color: var(--lp-dim); font-size: 13px; }

/* ------------------------------------------------------------ pricing --- */
.lp-tiers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 42px auto 0; max-width: 840px; }
.lp-tier {
  background:
    radial-gradient(120% 90% at 50% -15%, rgba(53, 210, 142, .07), transparent 60%),
    var(--lp-panel);
  border: 1px solid var(--lp-line);
  border-radius: 18px;
  padding: 30px 28px 32px;
  display: flex;
  flex-direction: column;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);
}
.lp-tier.hi {
  border-color: rgba(53, 210, 142, .42);
  background: linear-gradient(180deg, rgba(53, 210, 142, .07), var(--lp-panel) 48%);
  box-shadow: 0 0 70px -34px rgba(53, 210, 142, .7);
}
.lp-tier .tn { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 19px; }
.lp-tier .price {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 42px;
  letter-spacing: -.03em;
  margin: 10px 0 2px;
  font-variant-numeric: tabular-nums;
}
.lp-tier .price small { font-family: 'Instrument Sans', sans-serif; font-size: 15px; font-weight: 500; color: var(--lp-muted); letter-spacing: 0; }
.lp-tier ul { list-style: none; margin: 22px 0 26px; display: grid; gap: 11px; }
.lp-tier li { display: flex; gap: 10px; font-size: 15.5px; color: var(--lp-muted); }
.lp-tier li svg { flex: none; margin-top: 3px; }
.lp-tier .btn { margin-top: auto; justify-content: center; }
.lp-trialnote { margin-top: 12px; font-size: 13.5px; color: var(--lp-dim); text-align: center; }
/* "Already used your trial? Subscribe" must read as a link, not a second note. */
.lp-trialnote a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(53, 210, 142, 0.6); }
.lp-trialnote a:hover, .lp-trialnote a:focus-visible { color: #35D28E; text-decoration-color: #35D28E; }
.lp-tier-foot { margin-top: 22px; font-size: 14.5px; color: var(--lp-dim); text-align: center; }

body.lp .feat-tip-btn {
  background: var(--lp-panel-2);
  border-color: var(--lp-line);
  color: var(--lp-muted);
}
body.lp .feat-tip-btn:hover { border-color: var(--lp-accent-deep); color: var(--lp-accent); }
body.lp .feat-tip-pop {
  background: var(--lp-panel-2);
  border-color: var(--lp-line);
  color: var(--lp-muted);
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .9);
}
body.lp .beta {
  color: var(--lp-accent);
  background: none;
  border: 0;
  padding: 0;
}

/* ---------------------------------------------------------------- FAQ --- */
body.lp .faq { border-top: 1px solid var(--lp-line); margin: 40px auto 0; max-width: 820px; }
body.lp .qa { border-bottom: 1px solid var(--lp-line); background: transparent; }
body.lp .qa button { color: var(--lp-text); background: transparent; }
body.lp .qa .ans, body.lp .qa .ans p { color: var(--lp-muted); }
body.lp .qa .ans strong { color: var(--lp-text); }
body.lp .qa .plus::before, body.lp .qa .plus::after { background: var(--lp-accent); }
body.lp .faq-lang-link { color: var(--lp-accent); }

/* --------------------------------------------------------- compare/prose - */
.lp-prose { max-width: 780px; }
.lp-prose p { color: var(--lp-muted); font-size: 17px; }
.lp-prose p + p { margin-top: 16px; }
.lp-prose a { color: var(--lp-accent); text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------- final -- */
.lp-final { position: relative; overflow: hidden; padding: 96px 0 104px; text-align: center; }
.lp-final .lp-halo-c {
  position: absolute;
  left: 50%; top: -42%;
  width: 1000px; height: 1000px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(53,210,142,.20), rgba(53,210,142,.05) 45%, transparent 70%);
  animation: lp-breathe 13s ease-in-out infinite;
  pointer-events: none;
}
.lp-final h2 { position: relative; font-size: clamp(28px, 3.7vw, 44px); line-height: 1.08; max-width: 23ch; margin: 0 auto 18px; }
.lp-final p { position: relative; color: var(--lp-muted); font-size: 17.5px; max-width: 46ch; margin: 0 auto; }
.lp-final .lp-cta-row { position: relative; justify-content: center; margin-top: 28px; }
/* Rotating headline: every line sits in the same grid cell, so the block is
   as tall as the longest line and nothing below it moves when they swap. */
.lp-final h2.lp-rotate { display: grid; max-width: 26ch; }
.lp-rot {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s cubic-bezier(.2, .7, .3, 1), transform .55s cubic-bezier(.2, .7, .3, 1);
  text-wrap: balance;
}
.lp-rot.in { opacity: 1; transform: none; }
.lp-rot em { font-style: normal; color: var(--lp-accent); }

/* ------------------------------------------------------- language modal -- */
body.lp .lang-modal-panel { background: var(--lp-panel); border: 1px solid var(--lp-line); color: var(--lp-text); }
body.lp .lang-modal-backdrop { background: rgba(4, 8, 6, .78); }
body.lp .lang-modal-close { color: var(--lp-muted); background: var(--lp-panel-2); border: 1px solid var(--lp-line); }
body.lp .lang-modal-close:hover { color: var(--lp-text); border-color: var(--lp-accent-deep); }
body.lp .lang-modal-sub { color: var(--lp-muted); }
body.lp .lang-modal-sub strong { color: var(--lp-text); }
body.lp .lang-modal-item { background: var(--lp-panel-2); border: 1px solid var(--lp-line); }
body.lp .lang-modal-native { color: var(--lp-text); }
body.lp .lang-modal-label { color: var(--lp-dim); }

/* ------------------------------------------------------------- lightbox - */
/* The overlay itself is styled by js/zoom.js, shared with the blog. */
.lp-zoom { cursor: zoom-in; }
.lp-zoom:focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 3px; }

/* ------------------------------------------------------------ responsive - */
@media (max-width: 980px) {
  /* minmax(0, 1fr), never a bare 1fr: a bare fr track takes its minimum from
     the content, so the bleeding hero screenshot widens the track and pushes
     the whole page past the viewport. */
  .lp-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 38px; padding-top: 52px; padding-bottom: 56px; }
  .lp-hero-shot { margin-inline-end: -24px; }
  .lp-steps, .lp-cards, .lp-tiers, .lp-pair { grid-template-columns: minmax(0, 1fr); }
  .lp-row, .lp-row.flip { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .lp-row.flip .lp-txt, .lp-row.flip .lp-pic { order: initial; }
  .lp-card.wide { grid-column: auto; grid-template-columns: minmax(0, 1fr); }
  .lp-card.wide img { border-inline-start: 0; border-top: 1px solid var(--lp-line); max-height: 240px; padding: 16px; }
  .lp-halo-a, .lp-halo-b { width: 620px; height: 620px; }
}
@media (max-width: 620px) {
  .lp-band { padding: 60px 0; }
  .lp-ex-btns { margin-inline-start: 0; }
  .lp-cleanup-row { padding: 22px 20px 24px; }
  .lp-cleanup-key { padding: 14px 20px 16px; }
  .lp-cleanup-key .lp-cleanup-note { margin-inline-start: 0; }
  .lp-cleanup-arrow { inset-inline-start: 20px; }
  .lp-saved, .lp-save-inputs { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  body.lp .lp-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .lp-halo-a, .lp-halo-b, .lp-final .lp-halo-c { animation: none !important; }
  body.lp .lang-track { animation: none !important; }
  .lp-say { transition: none !important; }
  .lp-rot { transition: none !important; }
}