/* The landing page, /free-screenshot-editor (E08). Plain CSS on the shadcn tokens. There is no script. It loads after tokens.css,
   shadcn.css and site.css, not after editor.css: this page has no editor.
   The look: a big hero with the animated demo, a strip of facts, a bento grid whose pictures are drawn in CSS (no image
   files, so nothing to download and nothing to block the first paint), a dark Premium section, and accordions for the
   FAQ and the full table. The tile pictures are decoration (aria-hidden); the words beside them carry the meaning.
   Motion is CSS only and has three safety rules:
   1. The base style of every animated part is its finished state. Without motion (prefers-reduced-motion, or a browser
      that cannot run the animation) the picture is a complete, still image.
   2. A person can pause the animation (the checkbox "Pause animation"). It stops the hero.
   3. Only transform, opacity and a few small paints move. Nothing moves outside the hero except a small rise when a
      card scrolls into view, and a lift on hover. Both are a bonus (the rise needs scroll-driven animation support).
      Nothing else runs for a long time, so nothing else needs a pause control.
   There is no content-visibility on the sections: it gives a section a guessed height until it is drawn, so the page
   height changes while a visitor scrolls (a jump, and "End" does not reach the bottom the first time). */

.lp { --lp-a: #667eea; --lp-b: #ec4899; --lp-grad: linear-gradient(100deg, var(--lp-a), var(--lp-b)); --lp-premium-text: #be185d; background: var(--background); color: var(--foreground); }
.lp .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lp { --lp-premium-text: #f9a8d4; } }
.lp .ico { width: 20px; height: 20px; flex: none; }
.lp a:not(.btn) { color: var(--foreground); text-decoration-line: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in oklab, var(--foreground) 40%, transparent); }
.lp a:not(.btn):hover { text-decoration-color: var(--foreground); }
.lp a:not(.btn):focus-visible { border-radius: var(--radius-sm); box-shadow: var(--focus-ring); }

/* ---- the header: it stays on top while the page scrolls ---- */
html:has(.lp-page) { scroll-padding-top: 76px; }
@media (prefers-reduced-motion: no-preference) { html:has(.lp-page) { scroll-behavior: smooth; } }
.lp-page .page-header { position: sticky; top: 0; z-index: 30; background: color-mix(in oklab, var(--background) 78%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); }
.lp-nav { display: flex; gap: 2px; }
.lp-nav a { padding: 8px 14px; border-radius: 9999px; color: var(--muted-foreground); font-size: 14px; font-weight: 500; text-decoration: none; }
.lp-nav a:hover { background: var(--accent); color: var(--foreground); }
.lp-nav a:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.lp-wrap { position: relative; max-width: 72rem; margin: 0 auto; padding: 0 24px; }
.lp-sec { padding: 96px 0; }
.lp-center { text-align: center; }
.lp-head { max-width: 44rem; margin: 0 auto 48px; text-align: center; }
.lp-head .lp-sub { margin: 14px auto 0; }
.lp-h { margin: 0; font-size: clamp(28px, 3.8vw, 44px); font-weight: 650; line-height: 1.08; letter-spacing: -0.035em; text-wrap: balance; }
.lp-xl { margin: 0; font-size: clamp(40px, 5vw, 64px); font-weight: 700; line-height: 1.03; letter-spacing: -0.045em; text-wrap: balance; }
.lp-sub { max-width: 46rem; margin: 0; color: var(--muted-foreground); font-size: 18px; line-height: 1.6; text-wrap: pretty; }
.lp-lead { max-width: 30rem; margin: 22px 0 0; color: var(--muted-foreground); font-size: 20px; line-height: 1.55; }
.lp-kicker { display: inline-block; margin: 0 0 16px; padding: 4px 14px; border: 1px solid var(--border); border-radius: 9999px; background: var(--card); color: var(--lp-premium-text); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.lp-btn { height: 48px; padding: 0 26px; border-radius: 12px; font-size: 15px; font-weight: 600; text-decoration: none; }
/* The main button has a colour gradient. Both ends keep white text above a 4.5:1 contrast (indigo 600 and pink 600). */
.lp .btn.primary.lp-btn { background: linear-gradient(135deg, #4f46e5, #db2777); color: #fff; box-shadow: 0 10px 28px -10px color-mix(in oklab, #db2777 70%, transparent); }
.lp .btn.primary.lp-btn:hover:not(:disabled) { background: linear-gradient(135deg, #4f46e5, #db2777); color: #fff; filter: brightness(1.1); }
.lp-after { margin: 32px 0 0; }
.lp-more { margin-top: 28px; }

/* ---- hero ---- */
.lp-hero { position: relative; isolation: isolate; overflow: hidden; padding: 64px 0 56px; }
.lp-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(color-mix(in oklab, var(--foreground) 16%, transparent) 1px, transparent 1.3px); background-size: 24px 24px; -webkit-mask-image: radial-gradient(75% 65% at 50% 25%, #000, transparent 78%); mask-image: radial-gradient(75% 65% at 50% 25%, #000, transparent 78%); pointer-events: none; }
.lp-orb { position: absolute; width: 38rem; height: 38rem; border-radius: 50%; opacity: 0.3; pointer-events: none; animation: lp-drift 20s ease-in-out infinite alternate; }
.lp-orb-1 { left: -14rem; top: -16rem; background: radial-gradient(closest-side, var(--lp-a), transparent); }
.lp-orb-2 { right: -16rem; bottom: -18rem; background: radial-gradient(closest-side, var(--lp-b), transparent); animation-direction: alternate-reverse; animation-duration: 26s; }
@keyframes lp-drift { to { transform: translate3d(4rem, 3rem, 0) scale(1.12); } }
.lp-hero-grid { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.lp-badge { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 24px; padding: 7px 16px; border: 1px solid var(--border); border-radius: 9999px; background: color-mix(in oklab, var(--background) 82%, transparent); font-size: 13px; font-weight: 500; }
.lp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 0 color-mix(in oklab, var(--success) 60%, transparent); animation: lp-ping 2.4s ease-out infinite; }
@keyframes lp-ping { 70%, 100% { box-shadow: 0 0 0 9px transparent; } }
.lp-grad { background: linear-gradient(100deg, var(--lp-a), var(--lp-b), var(--lp-a)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: lp-shift 7s linear infinite alternate; }
@keyframes lp-shift { to { background-position: 100% 0; } }
@media (forced-colors: active) { .lp-grad, .lp-step::before { background: none; color: CanvasText; } }
.lp-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
/* The glow behind the hero and behind the last call is a colour, so grey text on it needs more contrast than on a plain ground.
   Measured on the rendered pixels (2026-11-14): the hero caption had 4.2:1. These greys keep every text above 4.5:1. */
.lp-hero, .lp-final-card { --muted-foreground: oklch(0.42 0 0); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lp-hero, :root:not([data-theme="light"]) .lp-final-card { --muted-foreground: oklch(0.8 0 0); } }

/* The facts under the hero. A value on top, its label below (in the HTML the label comes first, as a list of terms should). The cells
   are cut by a 1 px gap on a line-coloured background, so every column count draws clean lines. */
.lp-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; margin: 64px 0 0; overflow: hidden; border: 1px solid var(--border); border-radius: 20px; background: var(--border); }
.lp-stats > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 4px; padding: 20px 22px; background: var(--card); }
.lp-stats dd { margin: 0; font-size: clamp(18px, 2vw, 24px); font-weight: 650; line-height: 1.15; letter-spacing: -0.02em; }
.lp-stats dt { color: var(--muted-foreground); font-size: 13px; }

/* ---- the animated demo ----
   One loop of 14 seconds. Percent marks in the keyframes are seconds / 14:
   0-18 frame (the window shrinks and gets a title bar), 24-45 background (three gradients), 47-69 annotate (hide, note, arrow),
   70-95 export (watermark, button, click, flash). 95-100 resets. */
.lp-demo { position: relative; margin: 0; }
.lp-stage { --d: 14s; container-type: inline-size; position: relative; aspect-ratio: 6 / 5; overflow: hidden; isolation: isolate; border: 1px solid var(--border); border-radius: 20px; background: var(--muted); box-shadow: var(--shadow-lg); user-select: none; }
.lp-stage > * { position: absolute; }
.lp-bg { inset: 0; }
.lp-bg-1 { background: linear-gradient(135deg, #ff9a8b, #ff6a88, #ff99ac); }
.lp-bg-2 { background: linear-gradient(135deg, #2193b0, #6dd5ed); opacity: 0; }
.lp-bg-3 { background: linear-gradient(135deg, #667eea, #764ba2); opacity: 0; }

.lp-tabs { left: 23cqw; top: 2.4cqw; z-index: 5; display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; width: 54cqw; height: 5.2cqw; border-radius: 9999px; background: rgba(17, 17, 17, 0.84); color: #fff; font-size: max(1.75cqw, 7.5px); font-weight: 600; text-align: center; }
.lp-tabs span { position: relative; z-index: 1; }
.lp-ind { position: absolute; left: 0.5cqw; top: 0.5cqw; bottom: 0.5cqw; width: 12.5cqw; border-radius: 9999px; background: rgba(255, 255, 255, 0.24); transform: translateX(40.5cqw); }

.lp-window { left: 12cqw; top: 12cqw; z-index: 2; width: 76cqw; height: 56cqw; overflow: hidden; border-radius: 1.8cqw; background: #fff; box-shadow: 0 2.4cqw 6cqw rgba(0, 0, 0, 0.3); }
.lp-titlebar { display: flex; align-items: center; gap: 1cqw; height: 5.4cqw; padding: 0 2cqw; background: #f1f2f4; }
.lp-titlebar i { width: 1.5cqw; height: 1.5cqw; border-radius: 50%; background: #ff5f57; }
.lp-titlebar i:nth-child(2) { background: #febc2e; }
.lp-titlebar i:nth-child(3) { background: #28c840; }
.lp-url { flex: 1; max-width: 34cqw; height: 3cqw; margin-left: 2cqw; padding: 0 1.4cqw; border-radius: 1cqw; background: #fff; color: #6b7280; font-size: max(1.5cqw, 6.5px); line-height: 3cqw; }
.lp-shot { position: relative; height: 50.6cqw; background: #f8fafc; color: #111827; }
.lp-shot > * { position: absolute; }
.lp-ttl { left: 2.4cqw; top: 2cqw; font-size: max(2cqw, 8px); font-weight: 700; }
.lp-kpi { top: 7cqw; width: 22.4cqw; height: 10cqw; border: 0.2cqw solid #e5e7eb; border-radius: 1.2cqw; background: #fff; }
.lp-kpi:nth-of-type(1) { left: 2.4cqw; }
.lp-kpi:nth-of-type(2) { left: 27.2cqw; }
.lp-kpi:nth-of-type(3) { left: 52cqw; }
.lp-kpi i, .lp-row i { position: absolute; border-radius: 0.8cqw; }
.lp-kpi .l { left: 1.6cqw; top: 1.8cqw; width: 8cqw; height: 1.2cqw; background: #cbd5e1; }
.lp-kpi .v { left: 1.6cqw; top: 4.6cqw; width: 12cqw; height: 3cqw; background: #0f172a; }
.lp-chart { left: 2.4cqw; top: 19.6cqw; display: flex; align-items: flex-end; gap: 2.6cqw; width: 44cqw; height: 28cqw; padding: 2cqw 2.2cqw 2.2cqw; border: 0.2cqw solid #e5e7eb; border-radius: 1.2cqw; background: #fff; }
.lp-chart i { flex: 1; height: calc(20cqw * var(--h)); border-radius: 0.8cqw 0.8cqw 0.3cqw 0.3cqw; background: #c7d2fe; }
.lp-chart i.hot { background: #6366f1; }
.lp-list { left: 49cqw; top: 19.6cqw; width: 24.2cqw; height: 28cqw; padding: 1.6cqw; border: 0.2cqw solid #e5e7eb; border-radius: 1.2cqw; background: #fff; }
.lp-row { position: relative; height: 6.2cqw; border-bottom: 0.2cqw solid #eef0f3; }
.lp-row .l { left: 0; top: 1.4cqw; width: 9cqw; height: 1.2cqw; background: #cbd5e1; }
.lp-row .v { left: 0; top: 3.4cqw; width: 14cqw; height: 1.2cqw; background: #94a3b8; }
.lp-mail { position: absolute; left: 0; top: 2cqw; color: #334155; font-size: max(1.55cqw, 6.5px); font-weight: 500; white-space: nowrap; }
.lp-hide { left: 50.4cqw; top: 27.8cqw; z-index: 3; width: 21.4cqw; height: 5.6cqw; border-radius: 0.8cqw; background: repeating-conic-gradient(#64748b 0 25%, #94a3b8 0 50%) 0 0 / 1.4cqw 1.4cqw; transform-origin: 0 50%; }

.lp-arrow { inset: 0; z-index: 4; width: 100%; height: 100%; overflow: visible; }
.lp-line { fill: none; stroke: #c62828; stroke-width: 1; stroke-linecap: round; stroke-dasharray: 1 2; stroke-dashoffset: 0; } /* "1 2": while the arrow is hidden no dash of length 0 is left at its end (it would show as a dot) */
.lp-head { fill: none; stroke: #c62828; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.lp-note { left: 57cqw; top: 24.2cqw; z-index: 4; padding: 0.9cqw 1.9cqw; border-radius: 9999px; background: #c62828; color: #fff; font-size: max(1.8cqw, 7.5px); font-weight: 700; white-space: nowrap; box-shadow: 0 0.6cqw 1.6cqw rgba(0, 0, 0, 0.25); transform-origin: 0 100%; }
.lp-wm { right: 3.5cqw; bottom: 2.6cqw; z-index: 4; padding: 0.55cqw 1.1cqw; border-radius: 0.8cqw; background: rgba(0, 0, 0, 0.42); color: #fff; font-size: max(1.6cqw, 7px); font-weight: 600; }
.lp-exp { left: 50%; bottom: 5cqw; z-index: 6; display: grid; place-items: center; height: 6.6cqw; padding: 0 3cqw; border-radius: 9999px; background: #111; color: #fff; font-size: max(2cqw, 8px); font-weight: 600; box-shadow: 0 1cqw 3cqw rgba(0, 0, 0, 0.3); transform: translateX(-50%); }
.lp-exp span { display: inline-flex; grid-area: 1 / 1; align-items: center; gap: 1cqw; white-space: nowrap; }
.lp-exp .ico { width: 2.4cqw; height: 2.4cqw; }
.lp-exp-b { opacity: 0; }
.lp-flash { inset: 0; z-index: 7; background: #fff; opacity: 0; pointer-events: none; }
.lp-cur { left: 0; top: 0; z-index: 8; width: 3.4cqw; height: 3.4cqw; filter: drop-shadow(0 0.2cqw 0.4cqw rgba(0, 0, 0, 0.35)); transform: translate(52cqw, 72cqw); }

.lp-stage .lp-bg-1 { animation: lp-b1 var(--d) ease-in-out infinite; }
.lp-stage .lp-bg-2 { animation: lp-b2 var(--d) ease-in-out infinite; }
.lp-stage .lp-bg-3 { animation: lp-b3 var(--d) ease-in-out infinite; }
.lp-stage .lp-ind { animation: lp-ind var(--d) ease-in-out infinite; }
.lp-stage .lp-window { animation: lp-win var(--d) ease-in-out infinite; }
.lp-stage .lp-titlebar { animation: lp-title var(--d) ease-in-out infinite; }
.lp-stage .lp-hide { animation: lp-hide var(--d) ease-in-out infinite; }
.lp-stage .lp-line { animation: lp-line var(--d) ease-in-out infinite; }
.lp-stage .lp-head { animation: lp-head var(--d) ease-in-out infinite; }
.lp-stage .lp-note { animation: lp-note var(--d) ease-in-out infinite; }
.lp-stage .lp-wm { animation: lp-wm var(--d) ease-in-out infinite; }
.lp-stage .lp-exp { animation: lp-exp var(--d) ease-in-out infinite; }
.lp-stage .lp-exp-a { animation: lp-exp-a var(--d) ease-in-out infinite; }
.lp-stage .lp-exp-b { animation: lp-exp-b var(--d) ease-in-out infinite; }
.lp-stage .lp-flash { animation: lp-flash var(--d) ease-in-out infinite; }
.lp-stage .lp-cur { animation: lp-cur var(--d) ease-in-out infinite; }

@keyframes lp-b1 { 0%, 19% { opacity: 0; } 26%, 94% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes lp-b2 { 0%, 30% { opacity: 0; } 36%, 94% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes lp-b3 { 0%, 40% { opacity: 0; } 45%, 94% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes lp-ind { 0%, 22% { transform: translateX(0); } 24%, 45% { transform: translateX(13.5cqw); } 47%, 68% { transform: translateX(27cqw); } 70%, 95% { transform: translateX(40.5cqw); } 99%, 100% { transform: translateX(0); } }
@keyframes lp-win {
  0%, 7%   { transform: scale(1.2); border-radius: 0; box-shadow: 0 0 0 rgba(0, 0, 0, 0); }
  18%, 94% { transform: scale(1); border-radius: 1.8cqw; box-shadow: 0 2.4cqw 6cqw rgba(0, 0, 0, 0.3); }
  100%     { transform: scale(1.2); border-radius: 0; box-shadow: 0 0 0 rgba(0, 0, 0, 0); }
}
@keyframes lp-title { 0%, 7% { transform: translateY(-100%); opacity: 0; } 18%, 94% { transform: none; opacity: 1; } 100% { transform: translateY(-100%); opacity: 0; } }
@keyframes lp-hide { 0%, 50% { transform: scaleX(0); } 56%, 94% { transform: scaleX(1); } 99%, 100% { transform: scaleX(0); } }
@keyframes lp-line { 0%, 60% { stroke-dashoffset: 1; } 66%, 94% { stroke-dashoffset: 0; } 99%, 100% { stroke-dashoffset: 1; } }
@keyframes lp-head { 0%, 65% { opacity: 0; } 67%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes lp-note { 0%, 56% { opacity: 0; transform: scale(0.5); } 60% { opacity: 1; transform: scale(1.1); } 62%, 94% { opacity: 1; transform: scale(1); } 98%, 100% { opacity: 0; transform: scale(0.5); } }
@keyframes lp-wm { 0%, 71% { opacity: 0; } 75%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes lp-exp {
  0%, 72%  { opacity: 0; transform: translate(-50%, 160%) scale(1); }
  78%, 82% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  83%      { opacity: 1; transform: translate(-50%, 0) scale(0.94); }
  85%, 94% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  98%, 100% { opacity: 0; transform: translate(-50%, 160%) scale(1); }
}
@keyframes lp-exp-a { 0%, 84% { opacity: 1; } 86%, 94% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes lp-exp-b { 0%, 84% { opacity: 0; } 86%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes lp-flash { 0%, 83% { opacity: 0; } 85% { opacity: 0.55; } 89%, 100% { opacity: 0; } }
@keyframes lp-cur {
  0%   { transform: translate(86cqw, 74cqw); }
  6%   { transform: translate(28.6cqw, 4.2cqw); }
  18%  { transform: translate(40cqw, 36cqw); }
  23%  { transform: translate(42.1cqw, 4.2cqw); }
  38%  { transform: translate(86cqw, 40cqw); }
  46%  { transform: translate(55.6cqw, 4.2cqw); }
  50%  { transform: translate(62cqw, 47cqw); }
  56%  { transform: translate(83.4cqw, 48.4cqw); }
  59%  { transform: translate(63cqw, 27cqw); }
  62%  { transform: translate(57.4cqw, 32.4cqw); }
  66%  { transform: translate(44.2cqw, 40.6cqw); }
  70%  { transform: translate(69cqw, 4.2cqw); }
  78%  { transform: translate(49cqw, 73.6cqw); }
  83%  { transform: translate(49cqw, 73.6cqw); }
  94%  { transform: translate(62cqw, 80cqw); }
  100% { transform: translate(86cqw, 74cqw); }
}

.lp-pause-input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.lp-pause { display: inline-flex; margin-top: 12px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 9999px; background: var(--card); color: var(--foreground); font-size: 13px; font-weight: 500; cursor: pointer; }
.lp-pause:hover { background: var(--accent); }
.lp-off { display: none; }
.lp-pause-input:checked ~ .lp-pause .lp-off { display: inline; }
.lp-pause-input:checked ~ .lp-pause .lp-on { display: none; }
.lp-pause-input:focus-visible ~ .lp-pause { box-shadow: var(--focus-ring); }
.lp-pause-input:checked ~ .lp-stage * { animation-play-state: paused; }
.lp-hero:has(.lp-pause-input:checked) * { animation-play-state: paused; }
.lp-cap { margin-top: 10px; color: var(--muted-foreground); font-size: 13px; line-height: 1.5; }

/* The hero demo gets a soft glow of the brand colours behind it. */
.lp-demo { isolation: isolate; }
.lp-demo::before { content: ""; position: absolute; inset: 10% -3% -5%; z-index: -1; border-radius: 40px; background: var(--lp-grad); opacity: 0.32; filter: blur(56px); }

/* ---- the free tools: a bento grid ----
   Six tiles on a 12-column grid: 7+5, 5+7, 6+6. Each has a picture drawn in CSS and a short line of text. */
.lp-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.lp-tile, .lp-use, .lp-card, .lp-step { transition: translate 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.lp-tile:hover, .lp-use:hover, .lp-card:hover { translate: 0 -3px; border-color: color-mix(in oklab, var(--foreground) 22%, var(--border)); box-shadow: var(--shadow-lg); }
.lp-tile { grid-column: span 6; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border); border-radius: 24px; background: var(--card); }
.lp-tile-frames, .lp-tile-annotate { grid-column: span 7; }
.lp-tile-backgrounds, .lp-tile-sizes { grid-column: span 5; }
.lp-txt { padding: 22px 26px 26px; }
.lp-txt h3 { margin: 0 0 6px; font-size: 18px; font-weight: 600; letter-spacing: -0.015em; }
.lp-txt p { margin: 0; color: var(--muted-foreground); font-size: 15px; line-height: 1.55; }
.lp-vis { display: flex; align-items: center; justify-content: center; gap: 12px; height: 204px; padding: 20px; overflow: hidden; border-bottom: 1px solid var(--border); background: color-mix(in oklab, var(--muted) 75%, var(--card)); }

/* Frames: three small windows on a gradient (light, dark, a card with no bar). */
.lp-vis-frames { gap: 14px; background: linear-gradient(135deg, #ff9a8b, #ff6a88 50%, #c471ed); }
.lp-mw { position: relative; flex: none; width: 31%; max-width: 150px; aspect-ratio: 11 / 8; overflow: hidden; border-radius: 10px; background: #fff; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28); }
.lp-mw::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 17%; background: radial-gradient(circle at 9px 50%, #ff5f57 2.6px, transparent 3.2px), radial-gradient(circle at 18px 50%, #febc2e 2.6px, transparent 3.2px), radial-gradient(circle at 27px 50%, #28c840 2.6px, transparent 3.2px), var(--bar, #f1f2f4); }
.lp-mw::after { content: ""; position: absolute; inset: 17% 0 0 0; background: linear-gradient(var(--ln, #e5e7eb), var(--ln, #e5e7eb)) 10% 22% / 52% 8% no-repeat, linear-gradient(var(--ln, #e5e7eb), var(--ln, #e5e7eb)) 10% 44% / 78% 8% no-repeat, linear-gradient(var(--ac, #c7d2fe), var(--ac, #c7d2fe)) 10% 70% / 38% 16% no-repeat; }
.lp-mw-dark { --bar: #111827; --ln: #374151; --ac: #4f46e5; background: #1f2937; translate: 0 -10px; }
.lp-mw-card { border-radius: 18px; }
.lp-mw-card::before { display: none; }
.lp-mw-card::after { inset: 0; }

/* Backgrounds: eight swatches. The colours are copied from ui/backgrounds.js (sunset, ocean, violet, mint, candy, sky, ember, midnight). The last is a colour wheel: your own colour. */
.lp-vis-backgrounds { display: grid; grid-template-columns: repeat(4, 52px); grid-auto-rows: 52px; align-content: center; justify-content: center; gap: 10px; }
.lp-sw { align-self: stretch; border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); }
.lp-sw:nth-child(1) { background: linear-gradient(135deg, #ff9a8b, #ff6a88, #ff99ac); }
.lp-sw:nth-child(2) { background: linear-gradient(135deg, #2193b0, #6dd5ed); }
.lp-sw:nth-child(3) { background: linear-gradient(135deg, #667eea, #764ba2); }
.lp-sw:nth-child(4) { background: linear-gradient(135deg, #11998e, #38ef7d); }
.lp-sw:nth-child(5) { background: linear-gradient(135deg, #f093fb, #f5576c); }
.lp-sw:nth-child(6) { background: linear-gradient(135deg, #4facfe, #00f2fe); }
.lp-sw:nth-child(7) { background: linear-gradient(135deg, #f12711, #f5af19); }
.lp-sw:nth-child(8) { border-radius: 50%; background: conic-gradient(#f43f5e, #f59e0b, #84cc16, #06b6d4, #6366f1, #d946ef, #f43f5e); }

/* Sizes: the five export shapes. Every shape has the same area, so the tall and the wide ones look equally big. The ratios and the pixel sizes come from the Go data. */
.lp-vis-sizes { gap: 8px; container-type: inline-size; }
.lp-shape { display: grid; flex: none; place-items: center; width: 56px; width: calc(sqrt(var(--w) / var(--h)) * 14cqw); aspect-ratio: var(--w) / var(--h); border: 1.5px solid color-mix(in oklab, var(--foreground) 55%, transparent); border-radius: 8px; background: var(--card); color: var(--muted-foreground); font-size: 11px; font-weight: 600; }

/* Annotate: a small screenshot with a hidden area, an arrow and a note. */
.lp-vis-annotate { background: linear-gradient(135deg, #667eea, #764ba2); }
.lp-mini { position: relative; width: min(100%, 340px); height: 156px; overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3); }
.lp-mini i { position: absolute; left: 6%; height: 9px; border-radius: 5px; background: #e5e7eb; }
.lp-mini i.a { top: 15%; width: 30%; background: #cbd5e1; }
.lp-mini i.b { top: 31%; width: 58%; }
.lp-px { position: absolute; left: 6%; top: 54%; width: 46%; height: 24px; border-radius: 5px; background: repeating-conic-gradient(#64748b 0 25%, #94a3b8 0 50%) 0 0 / 8px 8px; }
.lp-mini-arrow { position: absolute; right: 7%; top: 30%; width: 42%; height: auto; overflow: visible; fill: none; stroke: #c62828; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.lp-mini em { position: absolute; right: 8%; top: 12%; padding: 3px 11px; border-radius: 9999px; background: #c62828; color: #fff; font-size: 11px; font-style: normal; font-weight: 700; white-space: nowrap; }

/* Layout: three sliders. */
.lp-vis-layout { flex-direction: column; gap: 18px; }
.lp-sl { display: flex; align-items: center; gap: 14px; width: min(100%, 300px); color: var(--muted-foreground); font-size: 12px; font-weight: 500; }
.lp-sl span { width: 58px; }
.lp-sl b { position: relative; flex: 1; height: 6px; border-radius: 9999px; background: color-mix(in oklab, var(--foreground) 14%, transparent); }
.lp-sl i { position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 100%); border-radius: inherit; background: var(--lp-grad); }
.lp-sl i::after { content: ""; position: absolute; right: -8px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; background: #fff; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4); }

/* Export: the two ways out. */
.lp-xbtn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 9999px; background: linear-gradient(135deg, #4f46e5, #db2777); color: #fff; font-size: 14px; font-weight: 600; box-shadow: 0 10px 24px -8px rgba(79, 70, 229, 0.6); }
.lp-xbtn-2 { border: 1px solid var(--border); background: var(--card); color: var(--foreground); box-shadow: var(--shadow-xs); }

/* ---- how it works ---- */
.lp-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.lp-step { padding: 28px 28px 30px; border: 1px solid var(--border); border-radius: 24px; background: var(--card); }
.lp-step::before { content: counter(step); counter-increment: step; display: block; margin-bottom: 20px; background: var(--lp-grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 60px; font-weight: 700; line-height: 1; letter-spacing: -0.05em; }
.lp-step h3 { margin: 0 0 6px; font-size: 19px; font-weight: 600; letter-spacing: -0.015em; }
.lp-step p { margin: 0; color: var(--muted-foreground); font-size: 16px; line-height: 1.55; }

/* ---- use cases ---- */
.lp-uses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.lp-use { padding: 26px; border: 1px solid var(--border); border-radius: 20px; background: var(--card); }
.lp-use h3 { margin: 18px 0 4px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.lp-use p { margin: 0; color: var(--muted-foreground); font-size: 15px; line-height: 1.55; }
.lp-ico { display: inline-grid; flex: none; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: linear-gradient(135deg, #4f46e5, #db2777); color: #fff; }
.lp-ico .ico { width: 22px; height: 22px; }
.lp-ico-lg { width: 60px; height: 60px; border-radius: 18px; }
.lp-ico-lg .ico { width: 30px; height: 30px; }

/* ---- Premium: a dark section in both colour schemes ----
   The tokens are set again inside the section, so every component in it (cards, buttons, the table) draws for a dark ground
   without a second set of rules. The text colours keep a contrast of 7:1 or more on this ground. */
.lp-premium { --background: #09090b; --foreground: #fafafa; --card: rgba(255, 255, 255, 0.045); --card-foreground: #fafafa; --muted: rgba(255, 255, 255, 0.08); --muted-foreground: #a1a1aa; --accent: rgba(255, 255, 255, 0.1); --accent-foreground: #fafafa; --border: rgba(255, 255, 255, 0.13); --input: rgba(255, 255, 255, 0.16); --ring: #71717a; --primary: #fafafa; --primary-foreground: #09090b; --lp-premium-text: #f9a8d4; position: relative; isolation: isolate; overflow: hidden; background: #09090b; color: #fafafa; color-scheme: dark; }
.lp-premium::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(42rem 26rem at 12% 0%, rgba(102, 126, 234, 0.34), transparent 70%), radial-gradient(38rem 24rem at 92% 100%, rgba(236, 72, 153, 0.28), transparent 70%); pointer-events: none; }
.lp-pgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.lp-pgrid > li:first-child { grid-column: span 2; } /* eleven cards + one double card = three full rows of four */
.lp-card { padding: 22px; border: 1px solid var(--border); border-radius: 20px; background: var(--card); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.lp-card h3 { margin: 0 0 6px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.lp-card p { margin: 0; color: var(--muted-foreground); font-size: 15px; line-height: 1.55; }
.lp-status { display: inline-block; margin-bottom: 14px; padding: 3px 10px; border: 1px solid var(--border); border-radius: 9999px; font-size: 12px; font-weight: 600; }
.lp-available { border-color: rgba(74, 222, 128, 0.4); background: rgba(34, 197, 94, 0.14); color: #bbf7d0; }
.lp-soon { background: var(--muted); color: #e4e4e7; }
.lp-planned { border-style: dashed; color: var(--muted-foreground); }
.lp-is-planned { background: rgba(255, 255, 255, 0.02); }
.lp-note-text { margin: 18px 0 0; color: var(--muted-foreground); font-size: 14px; }

/* The two accordions (the full table and the FAQ) share one plus sign. It turns into a cross when the part is open. */
.lp-compare > summary, .lp-q > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 24px; cursor: pointer; list-style: none; font-size: 16px; font-weight: 600; line-height: 1.4; }
.lp-compare > summary::-webkit-details-marker, .lp-q > summary::-webkit-details-marker { display: none; }
.lp-compare > summary::after, .lp-q > summary::after { content: ""; flex: none; width: 18px; height: 18px; background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat; transition: rotate 0.2s ease; }
.lp-compare[open] > summary::after, .lp-q[open] > summary::after { rotate: 45deg; }
.lp-compare > summary:focus-visible, .lp-q > summary:focus-visible { border-radius: 20px; outline: none; box-shadow: var(--focus-ring); }
.lp-compare { margin-top: 32px; overflow: hidden; border: 1px solid var(--border); border-radius: 20px; background: var(--card); }
.lp-compare[open] > summary { border-bottom: 1px solid var(--border); }
.lp-table-wrap { overflow-x: auto; }
.lp-table-wrap:focus-visible { box-shadow: var(--focus-ring); outline: none; }
.lp-table { width: 100%; min-width: 42rem; border-collapse: collapse; font-size: 14px; }
.lp-table th, .lp-table td { padding: 12px 16px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; line-height: 1.5; }
.lp-table thead th { background: var(--muted); font-weight: 600; }
.lp-table tbody th { width: 22%; font-weight: 600; }
.lp-table td:last-child { background: color-mix(in oklab, var(--lp-b) 7%, transparent); }
.lp-table tbody:last-of-type tr:last-child > * { border-bottom: 0; }
.lp-table .lp-group th { padding: 10px 16px; background: var(--muted); color: var(--muted-foreground); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.lp-table .lp-group + tr > * { border-top: 0; }
.lp-cmp-note { display: block; margin-top: 2px; color: var(--muted-foreground); font-size: 13px; font-weight: 400; }

/* ---- privacy ---- */
.lp-privacy { display: flex; align-items: center; gap: 28px; max-width: 60rem; margin: 0 auto; padding: 32px 36px; border: 1px solid var(--border); border-radius: 28px; background: linear-gradient(135deg, color-mix(in oklab, var(--lp-a) 9%, var(--card)), color-mix(in oklab, var(--lp-b) 7%, var(--card))); }
.lp-privacy .lp-h { margin: 0 0 8px; font-size: clamp(22px, 2.6vw, 30px); }
.lp-privacy .lp-sub { font-size: 16px; }

/* ---- FAQ ---- */
.lp-faq { display: grid; gap: 10px; max-width: 52rem; margin: 0 auto; }
.lp-q { border: 1px solid var(--border); border-radius: 20px; background: var(--card); transition: border-color 0.2s ease; }
.lp-q:hover, .lp-q[open] { border-color: color-mix(in oklab, var(--foreground) 22%, var(--border)); }
.lp-q p { margin: 0; padding: 0 24px 22px; color: var(--muted-foreground); font-size: 16px; line-height: 1.65; }

/* ---- the last call ---- */
.lp-final { padding: 24px 24px 96px; }
.lp-final-card { max-width: 60rem; padding: 80px 32px; overflow: hidden; border: 1px solid var(--border); border-radius: 32px; background: radial-gradient(34rem 18rem at 15% 0%, color-mix(in oklab, var(--lp-a) 22%, transparent), transparent 70%), radial-gradient(34rem 18rem at 90% 100%, color-mix(in oklab, var(--lp-b) 22%, transparent), transparent 70%), var(--card); }
.lp-final-card .lp-sub { margin: 16px auto 28px; }
.lp-final-card .fine { margin-top: 22px; }

/* A card rises a little when it comes into view. Browsers without scroll-driven animation skip it. */
@keyframes lp-rise { from { transform: translateY(28px); } to { transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .lp-rise { animation: lp-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
  }
}

@media (max-width: 1000px) {
  .lp-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lp-pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .lp-wrap { padding: 0 16px; }
  .lp-sec { padding: 60px 0; }
  .lp-head { margin-bottom: 32px; }
  .lp-hero { padding: 36px 0 40px; }
  .lp-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .lp-stats { margin-top: 40px; }
  .lp-bento { grid-template-columns: minmax(0, 1fr); }
  .lp-vis { height: 160px; padding: 16px; }
  .lp-tile, .lp-tile-frames, .lp-tile-annotate, .lp-tile-backgrounds, .lp-tile-sizes { grid-column: auto; }
  .lp-steps { grid-template-columns: minmax(0, 1fr); }
  .lp-uses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-privacy { flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px; }
  .lp-final { padding: 8px 16px 60px; }
  .lp-final-card { padding: 52px 20px; }
  .lp-nav { display: none; }
}
@media (max-width: 600px) {
  .lp-uses { grid-template-columns: minmax(0, 1fr); }
  .lp-pgrid { grid-template-columns: minmax(0, 1fr); }
  .lp-pgrid > li:first-child { grid-column: auto; }
  .lp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-lead { font-size: 18px; }
  .lp-sub { font-size: 16px; }
}

/* No motion: every animated part shows its finished state (that is its base style), and the pause control is not needed. */
@media (prefers-reduced-motion: reduce) {
  .lp *, .lp *::before, .lp *::after { animation: none !important; transition: none !important; }
  .lp-pause { display: none; }
  .lp-tile:hover, .lp-use:hover, .lp-card:hover { translate: none; }
}