/* Atesen Software landing layer, v3 "Cobalt Night" (AI-EKIP/TASARIM-SISTEMI-ATESEN.md), 29 Oct 2026.
   Loaded after the app stylesheet on every page. Landing parts use the lp- prefix; the app's own
   components keep their class names and are only re-skinned here (fonts, colours, buttons). */
@font-face { font-family: "Atesen Manrope"; src: url("fonts/manrope-latin.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Atesen Inter"; src: url("fonts/inter-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  color-scheme: light;
  --bg: #ffffff; --bg-subtle: #f5f7fb; --bg-inset: #eaeef7;
  --fg: #0e1424; --fg-muted: #45506a; --fg-subtle: #5b6681;
  --border: #e3e8f1; --border-strong: #cdd5e4;
  --accent: #2f5bea; --accent-hover: #2449cc; --accent-strong: #1d3fb3; --accent-soft: #eef2fe;
  --live: #05603a; --live-soft: #e3f6ec; --live-dot: #12b76a;
  --night: #0a1020; --night-2: #121a33; --night-line: rgb(255 255 255 / 10%); --night-fg: #f3f5fb; --night-muted: #aeb8d2;
  --stage: linear-gradient(160deg, #eef2fd 0%, #e4eafb 55%, #dfe5f8 100%); --stage-line: rgb(47 91 234 / 14%);
  --glow: 0 24px 60px -24px rgb(47 91 234 / 45%);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --font-sans: "Atesen Inter", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Atesen Manrope", "Manrope", "Atesen Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  /* the app stylesheet's own names, mapped onto the system */
  --ink: #0e1424; --muted: #5b6681; --line: #e3e8f1; --soft: #f5f7fb;
}

html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
body { margin: 0; font-family: var(--font-sans); color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; line-height: 1.55; }
::selection { background: #d9e3ff; color: var(--fg); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--font-display); color: var(--fg); text-wrap: balance; }
h1 { font-weight: 750; letter-spacing: -0.035em; line-height: 1.06; }
h2 { font-weight: 720; letter-spacing: -0.028em; line-height: 1.12; }
h3 { font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; }
p { text-wrap: pretty; }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); }
img { max-width: 100%; height: auto; display: block; }
.lp-wrap { max-width: 76rem; margin: 0 auto; padding: 0 24px; }
.lp-nw { white-space: nowrap; }
.lp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------------------------------------------------------- buttons */
.lp-btn, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 2.875rem; padding: 0 1.25rem; border-radius: 10px;
  background: linear-gradient(180deg, #3a66f0 0%, #2a52dd 100%); color: #fff; border: 1px solid rgb(14 20 36 / 8%);
  font: 650 0.975rem/1.2 var(--font-sans); letter-spacing: -0.005em; text-decoration: none; cursor: pointer; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 22%), 0 1px 2px rgb(14 20 36 / 18%), 0 6px 16px -8px rgb(47 91 234 / 70%);
  transition: background 0.18s var(--ease), transform 0.18s var(--ease), box-shadow 0.18s var(--ease), border-color 0.18s var(--ease);
  filter: none;
}
.btn { white-space: normal; text-align: center; max-width: 100%; }
.lp-btn:hover, .btn:hover { background: linear-gradient(180deg, #3460ee 0%, #2246c9 100%); color: #fff; transform: translateY(-1px); filter: none;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 22%), 0 2px 4px rgb(14 20 36 / 16%), 0 12px 28px -10px rgb(47 91 234 / 80%); }
.lp-btn:active, .btn:active { transform: translateY(0) scale(0.98); }
.lp-btn svg { width: 18px; height: 18px; flex: none; transition: transform 0.18s var(--ease); }
.lp-btn:hover svg.lp-arrow { transform: translateX(3px); }
.lp-btn-lg { min-height: 3.25rem; padding: 0 1.5rem; font-size: 1.0625rem; border-radius: 12px; }
.lp-btn-quiet, .btn.secondary {
  background: #fff; color: var(--fg); border: 1px solid var(--border-strong); box-shadow: 0 1px 2px rgb(14 20 36 / 6%);
}
.btn.ghost { background: #fff; color: var(--accent-strong); border: 1px solid var(--border-strong); box-shadow: 0 1px 2px rgb(14 20 36 / 6%); }
.btn.ghost:hover { background: var(--accent-soft); color: var(--accent-strong); border-color: #b9c3d6; box-shadow: none; }
.btn.mini { min-height: 2.1rem; padding: 0 0.8rem; font-size: 0.85rem; border-radius: 8px; }
.lp-btn-quiet:hover, .btn.secondary:hover { background: #f2f5fc; color: var(--fg); border-color: #b9c3d6; box-shadow: 0 6px 16px -10px rgb(14 20 36 / 35%); }
.lp-btn[aria-busy="true"], .btn:disabled { opacity: 0.65; cursor: progress; transform: none; }
.lp-btn-dark { background: rgb(255 255 255 / 8%); color: var(--night-fg); border: 1px solid rgb(255 255 255 / 26%); box-shadow: none; }
.lp-btn-dark:hover { background: rgb(255 255 255 / 15%); color: #fff; box-shadow: none; }
.lp-btn-white { background: #fff; color: var(--accent-strong); border-color: #fff; box-shadow: 0 10px 30px -12px rgb(0 0 0 / 50%); }
.lp-btn-white:hover { background: #eef2fe; color: var(--accent-strong); }

/* ----------------------------------------------------------------- header */
.lp-top { position: sticky; top: 0; z-index: 30; background: rgb(255 255 255 / 92%); border-bottom: 1px solid var(--border); }
@supports (backdrop-filter: blur(1px)) { .lp-top { -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); } }
.lp-top-in { display: flex; align-items: center; gap: 1.25rem; min-height: 64px; }
.lp-brand { display: flex; align-items: center; gap: 0.6rem; color: var(--fg); text-decoration: none; min-width: 0; }
.lp-brand img { width: 30px; height: 30px; border-radius: 8px; flex: none; }
.lp-brand b { font: 750 1.125rem/1 var(--font-display); letter-spacing: -0.02em; }
.lp-brand small { color: var(--fg-subtle); font-size: 0.8125rem; white-space: nowrap; }
.lp-brand:hover { color: var(--fg); }
.lp-nav { display: flex; align-items: center; gap: 0.15rem; margin-left: auto; }
.lp-nav a { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 0.8rem; border-radius: 999px; color: var(--fg-muted); text-decoration: none; font-size: 0.9375rem; font-weight: 550; white-space: nowrap; transition: color 0.18s var(--ease), background-color 0.18s var(--ease); }
.lp-nav a:hover { color: var(--fg); background: var(--bg-subtle); }
.lp-nav a[aria-current="page"] { color: var(--accent-strong); background: var(--accent-soft); }
.lp-top .lp-btn { min-height: 2.5rem; padding: 0 1rem; font-size: 0.9rem; }
.lp-top .lp-btn-quiet { margin-left: 0.25rem; }

/* ------------------------------------------------------------------- hero */
.lp-hero {
  position: relative; overflow: hidden; padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(3rem, 5vw, 4.5rem);
  background:
    radial-gradient(56rem 26rem at 88% -8%, rgb(47 91 234 / 15%), transparent 62%),
    radial-gradient(38rem 20rem at 6% 0%, rgb(112 84 245 / 8%), transparent 60%),
    linear-gradient(180deg, #f6f8fe 0%, #fff 78%);
  border-bottom: 1px solid var(--border);
}
.lp-hero .lp-wrap { max-width: 84rem; }
.lp-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.16fr); gap: clamp(2rem, 3.4vw, 3rem); align-items: center; }
.lp-hero .lp-stage { padding: clamp(10px, 1.4vw, 18px); }
.lp-chip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.85rem; border-radius: 999px; background: var(--accent-soft); border: 1px solid rgb(47 91 234 / 18%); color: var(--accent-strong); font-size: 0.8125rem; font-weight: 650; margin: 0 0 1.1rem; }
.lp-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--live-dot); box-shadow: 0 0 0 4px rgb(18 183 106 / 18%); flex: none; }
.lp-hero h1 { font-size: clamp(2.15rem, 1.4rem + 1.9vw, 2.95rem); margin: 0; }
.lp-hero .lp-btn-lg { padding: 0 1.25rem; }
.lp-accent { color: var(--accent); }
.lp-then { display: block; margin-top: 0.5rem; color: var(--fg); font-weight: 650; }
.lp-lede { color: var(--fg-muted); font-size: clamp(1.03rem, 0.98rem + 0.25vw, 1.15rem); line-height: 1.6; margin: 1.1rem 0 0; max-width: 36rem; }
.lp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 1.6rem; }
.lp-flow { order: 3; flex-basis: 100%; margin: 0; font-size: 0.875rem; color: var(--fg-muted); }
.lp-flow strong { color: var(--fg); }
.lp-price { margin: 1rem 0 0; font-size: 0.9375rem; color: var(--fg-muted); max-width: 36rem; }
.lp-price strong { color: var(--fg); }
.lp-price button { font: inherit; color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.lp-checks { list-style: none; padding: 0; margin: 1.1rem 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 1.25rem; font-size: 0.9rem; color: var(--fg-muted); max-width: 38rem; }
.lp-checks li { position: relative; padding-left: 1.5rem; line-height: 1.45; }
.lp-checks li::before { content: ""; position: absolute; left: 0; top: 0.12rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--live-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2305603a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.4'/%3E%3C/svg%3E") center / 0.8rem no-repeat; }
.lp-checks strong { color: var(--fg); font-weight: 650; }

/* ------------------------------------------------- product screen (frame) */
.lp-stage { position: relative; background: var(--stage); border-radius: 20px; padding: clamp(14px, 2.4vw, 26px); box-shadow: inset 0 0 0 1px var(--stage-line); }
.lp-frame { margin: 0; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px rgb(14 20 36 / 8%), 0 24px 48px -20px rgb(14 20 36 / 32%), 0 8px 18px -8px rgb(14 20 36 / 10%); }
.lp-hero .lp-frame { animation: lp-rise 0.8s var(--ease) both; }
.lp-bar { height: 36px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-bottom: 1px solid var(--border); background: #fbfcfe; font-size: 0.8125rem; color: var(--fg-subtle); }
.lp-dots { display: inline-flex; gap: 6px; margin-right: 6px; }
.lp-dots i { width: 9px; height: 9px; border-radius: 50%; background: #d6dbe6; }
.lp-bar svg { width: 13px; height: 13px; }
.lp-bar { white-space: nowrap; }
.lp-url { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lp-tag { flex: none; white-space: nowrap; margin-left: auto; background: var(--accent-soft); color: var(--accent-strong); border-radius: 999px; padding: 2px 9px; font-size: 0.72rem; font-weight: 650; }
.lp-frame img { width: 100%; }
.lp-ageing { margin-top: 0.7rem; background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 0.65rem 0.75rem; box-shadow: 0 1px 2px rgb(14 20 36 / 5%); }
.lp-ageing p { margin: 0 0 0.45rem; font-size: 0.8125rem; color: var(--fg-muted); }
.lp-ageing dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; margin: 0; }
.lp-ageing dl > div { background: var(--bg-subtle); border-radius: 8px; padding: 0.35rem 0.5rem; }
.lp-ageing dt { font-size: 0.72rem; color: var(--fg-subtle); }
.lp-ageing dd { margin: 0.1rem 0 0; font: 700 0.82rem/1.2 var(--font-sans); color: var(--fg); font-variant-numeric: tabular-nums; }
.lp-spread { max-width: 64rem; margin: 1.5rem auto 0; padding: 1rem 1.15rem; }
.lp-spread > p { font-size: 0.9rem; }
.lp-spread dl { grid-template-columns: repeat(9, minmax(0, 1fr)); }
.lp-spread .lp-spread-foot { margin: 0.6rem 0 0; color: var(--fg); }
@media (max-width: 40rem) { .lp-spread dl { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lp-cap { font-size: 0.875rem; color: var(--fg-subtle); margin: 0.85rem 0 0; text-align: center; }
@keyframes lp-rise { from { opacity: 0; transform: translateY(16px); } }

/* --------------------------------------------------------------- sections */
.lp-sec { padding: clamp(3.5rem, 7vw, 5.5rem) 0; }
.lp-sec-alt { background: var(--bg-subtle); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.lp-head { max-width: 44rem; margin-bottom: 2.25rem; }
.lp-head.lp-center { margin-left: auto; margin-right: auto; text-align: center; }
.lp-eyebrow { font-size: 0.8125rem; font-weight: 650; letter-spacing: 0.02em; color: var(--accent-strong); margin: 0 0 0.6rem; }
.lp-head h2 { font-size: clamp(1.65rem, 1.25rem + 1.3vw, 2.35rem); margin: 0; }
.lp-head p { margin: 0.9rem 0 0; color: var(--fg-muted); font-size: 1.0625rem; }

.lp-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; counter-reset: lp-step; }
.lp-steps li { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 1.4rem 1.4rem 1.5rem; box-shadow: 0 1px 2px rgb(14 20 36 / 5%); }
.lp-steps li::before { counter-increment: lp-step; content: counter(lp-step); display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong); font: 750 1rem/1 var(--font-display); margin-bottom: 0.9rem; }
.lp-steps h3 { font-size: 1.125rem; margin: 0; }
.lp-steps p { margin: 0.5rem 0 0; color: var(--fg-muted); font-size: 0.975rem; }

.lp-split { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
.lp-split + .lp-split { margin-top: clamp(3rem, 6vw, 4.5rem); }
.lp-split.lp-flip > :first-child { order: 2; }
.lp-split h3 { font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.6rem); margin: 0; }
.lp-split > div > p { color: var(--fg-muted); margin: 0.75rem 0 0; }
.lp-list { list-style: none; padding: 0; margin: 1.1rem 0 0; display: grid; gap: 0.8rem; }
.lp-list li { position: relative; padding-left: 1.75rem; color: var(--fg-muted); font-size: 0.975rem; }
.lp-list li::before { content: ""; position: absolute; left: 0; top: 0.2rem; width: 1.15rem; height: 1.15rem; border-radius: 6px; background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231d3fb3' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.4'/%3E%3C/svg%3E") center / 0.85rem no-repeat; }
.lp-list strong { color: var(--fg); }

.lp-wide { max-width: 64rem; margin: 0 auto; }
.lp-cols2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem 2rem; margin-top: 2rem; }
.lp-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.lp-card { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 1.35rem 1.4rem; box-shadow: 0 1px 2px rgb(14 20 36 / 5%); }
.lp-card h3 { font-size: 1.05rem; margin: 0; }
.lp-card p { margin: 0.5rem 0 0; color: var(--fg-muted); font-size: 0.95rem; }
.lp-card code { font-size: 0.875em; background: var(--bg-subtle); border: 1px solid var(--border); border-radius: 5px; padding: 0 4px; }

/* ----------------------------------------------------------- mid-page CTA */
.lp-mid { margin-top: 2.5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; padding: 1.35rem 1.5rem; border-radius: 16px; background: linear-gradient(180deg, #fff, #f7f9fe); border: 1px solid var(--border); box-shadow: var(--glow); }
.lp-mid p { margin: 0; color: var(--fg); font-weight: 650; font-size: 1.05rem; }
.lp-mid small { display: block; font-weight: 400; color: var(--fg-muted); font-size: 0.9rem; margin-top: 0.2rem; }
.lp-mid .lp-actions { margin: 0; }

/* -------------------------------------------------------- the free tool */
.lp-try { scroll-margin-top: 84px; }
.lp-tool { background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: clamp(1.25rem, 3vw, 2rem); box-shadow: 0 1px 2px rgb(14 20 36 / 5%), 0 30px 60px -40px rgb(14 20 36 / 30%); }
.lp-tool .drop { border-radius: 14px; border: 2px dashed #c3cde3; background: var(--bg-subtle); padding: 2.5rem 1.5rem; }
.lp-tool .drop:hover, .lp-tool .drop.over, .lp-tool .drop:focus-visible { border-color: var(--accent); background: var(--accent-soft); }
.lp-tool .drop-title { font: 700 1.15rem/1.3 var(--font-display); color: var(--accent-strong); }
.lp-tool .drop-title::before { content: ""; display: block; width: 44px; height: 44px; margin: 0 auto 0.6rem; border-radius: 12px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f5bea' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 13v8'/%3E%3Cpath d='m8 17 4-4 4 4'/%3E%3Cpath d='M20 16.6A5 5 0 0 0 18 7h-1.26A8 8 0 1 0 4 15.25'/%3E%3C/svg%3E") center / 24px no-repeat; box-shadow: 0 0 0 1px var(--border), 0 6px 14px -8px rgb(47 91 234 / 50%); }
.lp-hero-stack { grid-template-columns: minmax(0, 1fr); }
.lp-hero-stack .lp-hero-copy { max-width: 54rem; }
.lp-hero-stack .lp-lede, .lp-hero-stack .lp-price, .lp-hero-stack .lp-checks { max-width: 50rem; }
.lp-hero-stack > .lp-stage { max-width: 68rem; }
.lp-mini { width: 100%; border-collapse: collapse; font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.lp-mini th { background: none; position: static; text-align: right; font-weight: 600; color: var(--fg-subtle); padding: 0.2rem 0.25rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
.lp-mini td { text-align: right; padding: 0.3rem 0.25rem; border-bottom: 1px solid var(--border); white-space: nowrap; color: var(--fg); }
.lp-mini th:first-child, .lp-mini td:first-child { text-align: left; font-weight: 650; }
.lp-je { margin-top: 0.9rem; }
.lp-je .lp-mini { font-size: 0.875rem; max-width: 40rem; }
.lp-je .lp-mini th:nth-child(2), .lp-je .lp-mini td:nth-child(2) { text-align: left; color: var(--fg-muted); font-weight: 500; }
.lp-je .lp-je-total td { font-weight: 700; border-bottom: 0; }
@media (max-width: 40rem) { .lp-je .lp-mini { font-size: 0.78rem; } }
.lp-exc { margin-top: 0.8rem; }
.lp-exc-row { margin: 0 !important; background: #fff4f2; border: 1px solid #f6d5d0; border-radius: 10px; padding: 0.6rem 0.75rem; color: var(--fg) !important; font-size: 0.9rem !important; line-height: 1.5; }
.lp-exc-who { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 0.75rem; margin-bottom: 0.2rem; }
.lp-exc-who span { color: #b42318; font-size: 0.78rem; font-weight: 650; }
.lp-mini-note { margin: 0.45rem 0 0 !important; font-size: 0.75rem !important; color: var(--fg-subtle) !important; }
.lp-sample-callout { background: var(--accent-soft); border: 1px solid rgb(47 91 234 / 18%); border-radius: 12px; padding: 0.7rem 1rem; color: var(--fg); font-weight: 550; }
.lp-legal { max-width: 60rem; margin: 0 0 1.25rem; padding: 0.85rem 1.1rem; border-radius: 12px; background: #fff8e6; border: 1px solid #f1dca4; color: #5a4300; font-size: 0.9rem; line-height: 1.55; }
.lp-legal a { color: #5a4300; font-weight: 600; }
.lp-rules li { font-size: 0.95rem; }
.lp-sample-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.6rem 0.9rem; margin: 1rem 0 0.25rem; color: var(--fg-muted); font-size: 0.95rem; }
.lp-sample-row .btn { min-height: 2.6rem; }
.lp-sample-top { justify-content: flex-start; margin: 0 0 0.9rem; }
.lp-tool-steps { list-style: none; counter-reset: ts; display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 0 0 1.1rem; }
.lp-tool-steps li { counter-increment: ts; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.75rem 0.35rem 0.4rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong); font-size: 0.875rem; font-weight: 600; }
.lp-tool-steps li::before { content: counter(ts); display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: #fff; font: 750 0.8rem/1 var(--font-display); }
.lp-help { margin-top: 0.75rem; }
.lp-help > summary, .lp-tool details.card > summary { cursor: pointer; font-weight: 600; color: var(--fg); }
.lp-help > summary { font-size: 0.9rem; color: var(--accent-strong); }
.lp-help p { margin: 0.5rem 0 0; }
.lp-tool details.card:not([open]) > summary { color: var(--fg-muted); }
.lp-tool-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1rem; margin-bottom: 1rem; }
.lp-tool-head h2 { font-size: clamp(1.35rem, 1.15rem + 0.7vw, 1.75rem); margin: 0; }
.lp-tool-head p { margin: 0; color: var(--fg-subtle); font-size: 0.9rem; }

/* ---------------------------------------------------------------- pricing */
.lp-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; max-width: 56rem; margin: 0 auto; align-items: stretch; }
.lp-plans.lp-plans-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; }
.lp-plan { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 1.75rem 1.6rem; box-shadow: 0 1px 2px rgb(14 20 36 / 5%); }
.lp-plan-feat { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--glow); }
.lp-flag { position: absolute; top: -12px; left: 1.6rem; background: var(--accent); color: #fff; font-size: 0.75rem; font-weight: 650; padding: 0.3rem 0.65rem; border-radius: 999px; }
.lp-plan h3 { font-size: 1.2rem; margin: 0; }
.lp-plan > p { margin: 0.35rem 0 0; color: var(--fg-muted); font-size: 0.95rem; }
.lp-amount { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.4rem; margin: 1.1rem 0 0.2rem; color: var(--fg-subtle); font-size: 0.95rem; }
.lp-amount strong { font: 800 2.5rem/1 var(--font-display); letter-spacing: -0.035em; color: var(--fg); }
.lp-plan ul { list-style: none; padding: 0; margin: 1.1rem 0 1.5rem; display: grid; gap: 0.6rem; font-size: 0.95rem; color: var(--fg-muted); }
.lp-plan li { position: relative; padding-left: 1.6rem; }
.lp-plan li::before { content: ""; position: absolute; left: 0; top: 0.2rem; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: var(--live-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2305603a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.4'/%3E%3C/svg%3E") center / 0.8rem no-repeat; }
.lp-plan .lp-btn { width: 100%; margin-top: auto; }
.lp-plan .lp-btn + .lp-btn { margin-top: 0.6rem; }
.lp-fine { text-align: center; color: var(--fg-subtle); font-size: 0.9rem; margin: 1.5rem auto 0; max-width: 46rem; }
.lp-msg { text-align: center; color: #b42318; font-size: 0.9375rem; font-weight: 550; margin: 1rem 0 0; }
.lp-bought { max-width: 46rem; margin: 1.5rem auto 0; padding: 1.25rem 1.5rem; border-radius: 16px; background: var(--live-soft); border: 1px solid #b7e4cc; color: var(--live); }
.lp-bought h3 { color: var(--live); margin: 0 0 0.35rem; font-size: 1.1rem; }
.lp-bought p { margin: 0; color: #0b4a2e; }
.lp-bought code { background: #fff; border-radius: 6px; padding: 1px 6px; font-size: 0.9em; overflow-wrap: anywhere; }

/* -------------------------------------------------------------------- FAQ */
.lp-faq { max-width: 50rem; margin: 0 auto; border-top: 1px solid var(--border); }
.lp-faq details { border-bottom: 1px solid var(--border); padding: 1.1rem 0; }
.lp-faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; font: 650 1.05rem/1.4 var(--font-sans); color: var(--fg); }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: "+"; color: var(--fg-subtle); font-weight: 400; font-size: 1.3rem; line-height: 1; }
.lp-faq details[open] summary::after { content: "\2212"; }
.lp-faq details p { margin: 0.65rem 0 0; color: var(--fg-muted); }

/* --------------------------------------------------------- closing band */
.lp-band { position: relative; overflow: hidden; background: var(--night); color: var(--night-fg); border-radius: 24px; padding: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 4vw, 3rem); text-align: center; isolation: isolate; }
.lp-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(40rem 18rem at 80% 0%, rgb(47 91 234 / 38%), transparent 65%), radial-gradient(30rem 16rem at 10% 100%, rgb(112 84 245 / 22%), transparent 65%); }
.lp-band h2 { color: #fff; font-size: clamp(1.7rem, 1.25rem + 1.5vw, 2.5rem); margin: 0; }
.lp-band p { color: var(--night-muted); margin: 0.9rem auto 0; max-width: 38rem; }
.lp-band .lp-actions { justify-content: center; }
.lp-band .lp-trust { margin-top: 1.1rem; font-size: 0.875rem; color: var(--night-muted); }

/* ----------------------------------------------------------------- footer */
.lp-foot { background: var(--night); color: var(--night-muted); padding: 3.5rem 0 2rem; margin-top: clamp(3.5rem, 7vw, 5.5rem); font-size: 0.9375rem; }
.lp-foot-cols { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 2rem; }
.lp-foot .lp-brand { color: #fff; }
.lp-foot .lp-brand small { color: var(--night-muted); }
.lp-foot h2 { color: #fff; font: 700 0.8125rem/1.3 var(--font-sans); letter-spacing: 0.02em; margin: 0 0 0.8rem; }
.lp-foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.lp-foot a { color: var(--night-muted); text-decoration: none; }
.lp-foot a:hover { color: #fff; }
.lp-foot p { margin: 0.75rem 0 0; max-width: 28rem; }
.lp-foot-legal { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--night-line); color: #8d98b5; font-size: 0.8125rem; display: grid; gap: 0.35rem; }

/* ---------------------------------------------------- re-skin: app + docs */
.doc h1 { font-family: var(--font-display); letter-spacing: -0.03em; }
.doc h2 { font-family: var(--font-display); }
.doc { padding-top: clamp(2rem, 5vw, 3.5rem); }
main.wrap { min-height: 50vh; }
select { border-color: var(--border-strong); border-radius: 10px; }
.check { border-radius: 14px; font-family: var(--font-sans); }
.table-wrap { border-color: var(--border); border-radius: 14px; }
th { background: var(--bg-subtle); color: var(--fg); }
.link { color: var(--accent); }
.plan { border-color: var(--border); border-radius: 14px; background: var(--bg-subtle); }
.tier { border-radius: 16px; border-color: var(--border); }
.tier.pro { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--glow); }
.price { font-family: var(--font-display); letter-spacing: -0.03em; }
.cta { border-radius: 14px; }

/* ------------------------------------------- trust strip + app states (AI art) */
.lp-trust-strip { padding: clamp(1.75rem, 3vw, 2.5rem) 0; background: #fff; border-bottom: 1px solid var(--border); }
.lp-trust-in { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: center; }
.lp-trust-art { margin: 0; }
.lp-trust-art img { width: 200px; height: auto; display: block; }
.lp-trust-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem 1.25rem; }
.lp-trust-list li { display: flex; flex-direction: column; gap: 0.45rem; font-size: 0.85rem; line-height: 1.45; color: var(--fg-muted); }
.lp-trust-list img { width: 48px; height: 48px; border-radius: 12px; }
.lp-trust-list strong { display: block; color: var(--fg); font-size: 0.9rem; margin-bottom: 0.1rem; }
.lp-trust-list a { color: var(--accent-strong); overflow-wrap: anywhere; }
.lp-empty-art { display: block; width: 120px; height: auto; margin: 0 auto 0.5rem; mix-blend-mode: multiply; }
.lp-tool .drop:has(.lp-empty-art) .drop-title::before { display: none; }
.lp-sample-callout .lp-empty-art { width: 72px; margin: 0; }
.lp-ready { display: flex; align-items: center; gap: 0.9rem; margin: 0.4rem 0 1rem; padding: 0.65rem 0.9rem; border-radius: 12px; background: var(--live-soft); border: 1px solid #b7e4cc; }
.lp-ready img { width: 72px; height: auto; flex: none; mix-blend-mode: multiply; }
.lp-ready p { margin: 0; color: #0b4a2e; font-size: 0.95rem; }
.lp-ready strong { color: var(--live); }
@media (max-width: 64rem) { .lp-trust-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 40rem) {
  .lp-trust-in { grid-template-columns: minmax(0, 1fr); }
  .lp-trust-art { justify-self: center; }
  .lp-trust-art img { width: 160px; }
  .lp-trust-list { grid-template-columns: minmax(0, 1fr); gap: 0.85rem; }
  .lp-trust-list li { flex-direction: row; align-items: flex-start; gap: 0.75rem; }
  .lp-trust-list img { width: 40px; height: 40px; flex: none; }
}

.lp-info { background: #fff; padding: clamp(8px, 1.2vw, 14px); }
.lp-info img { display: block; width: 100%; height: auto; max-height: 600px; object-fit: contain; border-radius: 12px; }
.lp-proof .lp-stage { max-width: 64rem; margin: 0 auto; }
.lp-proof .lp-cap { text-align: center; }

/* ------------------------------------------------ image carousel + lightbox */
.lp-carousel { position: relative; }
.lp-car-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; border-radius: 12px; background: #fff; scrollbar-width: none; }
.lp-car-track::-webkit-scrollbar { display: none; }
.lp-car-slide { flex: 0 0 100%; scroll-snap-align: center; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #fff; }
.lp-car-slide img { display: block; width: 100%; height: auto; max-height: 560px; object-fit: contain; cursor: zoom-in; border-radius: 10px; }
.lp-car-slide figcaption { font-size: 0.8125rem; color: var(--fg-subtle); padding: 0.45rem 0.75rem 0.1rem; text-align: center; }
.lp-car-prev, .lp-car-next { position: absolute; top: calc(50% - 1rem); width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid var(--border-strong); background: rgb(255 255 255 / 95%); color: var(--fg); font: 600 1.6rem/1 var(--font-sans); cursor: pointer; display: grid; place-items: center; padding: 0 0 0.15rem; box-shadow: 0 6px 16px -8px rgb(14 20 36 / 45%); z-index: 2; }
.lp-car-prev { left: -0.5rem; } .lp-car-next { right: -0.5rem; }
.lp-car-prev:hover, .lp-car-next:hover { background: var(--accent-soft); color: var(--accent-strong); }
.lp-car-dots { display: flex; justify-content: center; gap: 0.35rem; margin-top: 0.65rem; }
.lp-car-dots button { width: 0.65rem; height: 0.65rem; border-radius: 999px; border: 0; padding: 0; background: #c3cde3; cursor: pointer; transition: width 0.2s var(--ease), background 0.2s var(--ease); }
.lp-car-dots button[aria-current="true"] { width: 1.5rem; background: var(--accent); }
.lp-lb { position: fixed; inset: 0; z-index: 1000; background: rgb(10 16 32 / 92%); display: flex; align-items: center; justify-content: center; padding: 3.5rem 3.5rem 3rem; }
.lp-lb[hidden] { display: none; }
.lp-lb-fig { margin: 0; display: flex; flex-direction: column; align-items: center; max-width: 100%; max-height: 100%; }
.lp-lb-fig img { max-width: min(100%, 1400px); max-height: calc(100vh - 8rem); width: auto; height: auto; background: #fff; border-radius: 10px; box-shadow: 0 30px 80px -30px rgb(0 0 0 / 60%); }
.lp-lb-cap { color: #dfe5f3; font-size: 0.9rem; margin-top: 0.75rem; text-align: center; }
.lp-lb-close, .lp-lb-prev, .lp-lb-next { position: absolute; width: 2.9rem; height: 2.9rem; border-radius: 50%; border: 1px solid rgb(255 255 255 / 30%); background: rgb(255 255 255 / 12%); color: #fff; font: 600 1.7rem/1 var(--font-sans); cursor: pointer; display: grid; place-items: center; padding: 0 0 0.15rem; }
.lp-lb-close { top: 0.85rem; right: 0.85rem; }
.lp-lb-prev { left: 0.85rem; top: calc(50% - 1.45rem); } .lp-lb-next { right: 0.85rem; top: calc(50% - 1.45rem); }
.lp-lb-close:hover, .lp-lb-prev:hover, .lp-lb-next:hover { background: rgb(255 255 255 / 24%); }
@media (max-width: 40rem) {
  .lp-car-prev { left: 0.15rem; } .lp-car-next { right: 0.15rem; }
  .lp-car-prev, .lp-car-next { width: 2.3rem; height: 2.3rem; font-size: 1.4rem; }
  .lp-lb { padding: 3.5rem 0.5rem 4.5rem; }
  .lp-lb-prev, .lp-lb-next { top: auto; bottom: 0.9rem; }
  .lp-lb-prev { left: calc(50% - 3.4rem); } .lp-lb-next { right: calc(50% - 3.4rem); }
}

.lp-by { color: var(--fg-subtle); font-size: 0.8125rem; text-decoration: none; white-space: nowrap; margin-left: -0.6rem; }
.lp-by:hover { color: var(--accent-strong); text-decoration: underline; }
.lp-foot .lp-by { color: var(--night-muted); margin-left: 0.5rem; }
.lp-allapps { margin: 1.5rem 0 0; }
.lp-allapps a { color: #fff; font-weight: 600; text-decoration: none; }
.lp-allapps a:hover { text-decoration: underline; }
.lp-step-art { display: block; width: 120px; height: auto; margin: 0 0 0.85rem; mix-blend-mode: multiply; }
@media (max-width: 40rem) { .lp-top .lp-by { display: none; } }

@media (max-width: 56rem) { .lp-top .lp-brand { margin-right: 0; } .lp-top .lp-by { margin-right: auto; } }

@media (max-width: 40rem) { .lp-top .lp-brand { margin-right: auto; } }

/* ------------------------------------------------------ plan comparison */
.lp-compare { max-width: 60rem; margin: 2.25rem auto 0; }
.lp-compare h3 { text-align: center; font-size: 1.2rem; margin: 0 0 0.9rem; }
.lp-compare-wrap { background: #fff; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; box-shadow: 0 1px 2px rgb(14 20 36 / 5%); }
.lp-compare table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 0.9rem; }
.lp-compare th, .lp-compare td { padding: 0.75rem 0.9rem; border-bottom: 1px solid var(--border); text-align: center; vertical-align: middle; background: none; position: static; color: var(--fg); }
.lp-compare tbody th { text-align: left; font-weight: 600; color: var(--fg-muted); width: 38%; }
.lp-compare thead th { font: 700 1rem/1.2 var(--font-display); background: var(--bg-subtle); }
.lp-compare tr:last-child > * { border-bottom: 0; }
.lp-compare .lp-cmp-feat { background: var(--accent-soft); }
.lp-compare thead .lp-cmp-feat { background: var(--accent); color: #fff; }
.lp-yes { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--live-soft); color: var(--live); font-weight: 800; }
.lp-no { color: #9aa6bf; font-weight: 700; }
@media (max-width: 40rem) {
  .lp-compare table { font-size: 0.8rem; }
  .lp-compare th, .lp-compare td { padding: 0.55rem 0.4rem; }
  .lp-compare tbody th { width: 34%; }
}
/* result table: row number + per-row check */
td.rowno { color: var(--fg-subtle); font-variant-numeric: tabular-nums; }
td.chk { font-weight: 700; white-space: nowrap; }
td.chk.ok { color: var(--live); }
td.chk.bad { color: #b42318; }
td.chk.none { color: var(--fg-subtle); }

/* round 3 (Gemini): table wrapping, clearer carousel controls, quieter ready art, free-limit rows, compact phone rows */
.lp-compare th, .lp-compare td { white-space: normal; overflow-wrap: anywhere; min-width: 0; }
.lp-car-dots button { width: 0.8rem; height: 0.8rem; }
.lp-car-dots button[aria-current="true"] { width: 1.8rem; }
.lp-car-prev, .lp-car-next { background: var(--accent); color: #fff; border-color: var(--accent); }
.lp-car-prev:hover, .lp-car-next:hover { background: var(--accent-hover); color: #fff; }
.lp-car-hint { margin: 0.45rem 0 0; text-align: center; font-size: 0.8125rem; color: var(--fg-subtle); }
.lp-ready img { width: 44px; }
#result:has(#plan:not([hidden])) #table tbody tr:nth-child(n+16) { opacity: 0.5; }
#result:has(#plan:not([hidden])) #table tbody tr:nth-child(n+16) td.chk::after { content: ' Firm plan'; font-weight: 600; font-size: 0.75rem; color: var(--accent-strong); }
@media (max-width: 600px) {
  #table tr { grid-template-columns: 2rem minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 2px 10px; padding: 8px 12px; margin-bottom: 6px; }
  #table td.rowno { grid-column: 1; grid-row: 1 / span 3; color: var(--fg-subtle); font-size: 0.8rem; }
  #table td.rowno::before, #table td.chk::before { content: none; }
  #table td.date { grid-column: 2 / 4; grid-row: 1; }
  #table td.chk { grid-column: 4; grid-row: 1; text-align: right; }
  #table td.desc { grid-column: 2 / -1; grid-row: 2; }
  #table td.out { grid-column: 2; grid-row: 3; } #table td.in { grid-column: 3; grid-row: 3; } #table td.bal { grid-column: 4; grid-row: 3; text-align: right; }
}

/* round 4 (Gemini): visible carousel hint, quieter ready box, balanced trust strip, plan links as buttons, no repeated price block on phones */
.lp-car-hint { font-size: 0.875rem; font-weight: 600; color: var(--accent-strong); }
.lp-ready { background: var(--bg-subtle); border-color: var(--border); }
.lp-ready p { color: var(--fg-muted); } .lp-ready strong { color: var(--fg); }
.lp-trust-in { grid-template-columns: 150px minmax(0, 1fr); }
.lp-trust-art img { width: 150px; }
.lp-trust-list img { width: 56px; height: 56px; }
#plan a[href="#pricing"], .plan a[href="#pricing"] { display: inline-flex; align-items: center; min-height: 2.2rem; padding: 0 0.85rem; border-radius: 8px; background: var(--accent); color: #fff; font-weight: 650; text-decoration: none; }
#plan a[href="#pricing"]:hover, .plan a[href="#pricing"]:hover { background: var(--accent-hover); color: #fff; }
@media (max-width: 40rem) { .lp-hero .lp-price, .lp-hero .lp-checks { display: none; } .lp-trust-in { grid-template-columns: minmax(0, 1fr); } .lp-trust-list img { width: 44px; height: 44px; } }

/* round 5 (Gemini): one price mention fewer, no repeated art in the trust strip, ends of the carousel, arrows clear of the image on phones, outline plan link */
@media (min-width: 40.0625rem) { .lp-hero .lp-flow { display: none; } }
.lp-trust-art { display: none; }
.lp-trust-in { grid-template-columns: minmax(0, 1fr); }
.lp-car-prev:disabled, .lp-car-next:disabled { opacity: 0.35; cursor: default; }
#plan a[href="#pricing"], .plan a[href="#pricing"] { background: #fff; color: var(--accent-strong); border: 1px solid var(--accent); }
#plan a[href="#pricing"]:hover, .plan a[href="#pricing"]:hover { background: var(--accent-soft); color: var(--accent-strong); }
@media (max-width: 40rem) {
  .lp-car-prev, .lp-car-next { top: auto; bottom: 1.45rem; width: 2.2rem; height: 2.2rem; font-size: 1.3rem; }
  .lp-car-prev { left: 0; } .lp-car-next { right: 0; }
  .lp-car-dots { min-height: 2.2rem; align-items: center; }
  .lp-hero { padding-top: 1.25rem; }
  .lp-hero h1 { font-size: 1.65rem; }
}

/* ------------------------------------------------------------ responsive */
@media (max-width: 64rem) {
  .lp-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .lp-hero-copy { max-width: 42rem; }
  .lp-split, .lp-split.lp-flip { grid-template-columns: minmax(0, 1fr); }
  .lp-split.lp-flip > :first-child { order: 0; }
}
@media (max-width: 56rem) {
  .lp-nav { display: none; }
  .lp-brand { margin-right: auto; }
  .lp-steps, .lp-grid3, .lp-plans, .lp-plans.lp-plans-3, .lp-cols2 { grid-template-columns: minmax(0, 1fr); }
  .lp-foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-foot-cols > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 40rem) {
  .lp-wrap { padding: 0 16px; }
  .lp-top-in { min-height: 58px; gap: 0.6rem; }
  .lp-brand small, .lp-top .lp-btn-quiet { display: none; }
  .lp-top .lp-btn { padding: 0 0.85rem; font-size: 0.85rem; }
  .lp-hero { padding-top: 1.75rem; }
  /* phone: the product result sits between the promise and the buy button, so it is on the first screen */
  .lp-hero-grid { gap: 0; }
  .lp-hero-copy { display: contents; }
  .lp-hero-copy > .lp-chip { order: 1; justify-self: start; }
  .lp-hero-copy > h1 { order: 2; }
  .lp-hero-copy > .lp-lede { order: 3; }
  .lp-hero-copy > .lp-actions { order: 4; }
  .lp-hero-grid > .lp-stage { order: 5; margin-top: 1.25rem; }
  .lp-actions .lp-flow { order: 3; text-align: center; }
  .lp-hero-copy > .lp-price { order: 6; }
  .lp-hero-copy > .lp-checks { order: 7; }
  .lp-hero h1 { font-size: 1.8rem; line-height: 1.1; }
  .lp-hero .lp-cap { margin-top: 0.6rem; font-size: 0.8125rem; }
  .lp-chip { font-size: 0.75rem; margin-bottom: 0.85rem; }
  .lp-lede { font-size: 1rem; margin-top: 0.85rem; }
  .lp-actions { margin-top: 1.25rem; }
  .lp-actions .lp-btn { width: 100%; }
  .lp-flow { order: 0; }
  .lp-checks { grid-template-columns: minmax(0, 1fr); }
  .lp-stage { border-radius: 16px; padding: 10px; }
  .lp-mid .lp-actions, .lp-mid .lp-btn { width: 100%; }
  .lp-band { border-radius: 18px; }
  .lp-band .lp-btn { white-space: normal; }
  .lp-foot-cols { grid-template-columns: minmax(0, 1fr); }
  .lp-d { display: none; }
}
@media (min-width: 40.0625rem) { .lp-m { display: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* round 6 (Gemini): calmer area under the hero buttons, phone carousel controls in their own row (never over the hint), plan row without a dangling separator */
.lp-hero .lp-checks { display: none; }
.lp-planrow { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
@media (max-width: 40rem) {
  .lp-carousel { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 0.5rem; }
  .lp-car-track { grid-column: 1 / -1; grid-row: 1; }
  .lp-car-prev, .lp-car-next { position: static; grid-row: 2; margin-top: 0.6rem; }
  .lp-car-prev { grid-column: 1; } .lp-car-next { grid-column: 3; }
  .lp-car-dots { grid-column: 2; grid-row: 2; margin-top: 0.6rem; }
  .lp-car-hint { grid-column: 1 / -1; grid-row: 3; }
  .lp-hero .lp-flow { font-size: 0.8125rem; }
}

/* round 7 (Gemini): desktop shows the same short line as phones (free part + refund) instead of the long price note, larger infographic on desktop, tighter phone hero so the whole infographic result is on the first screen */
@media (min-width: 40.0625rem) {
  .lp-hero .lp-flow { display: block; margin-top: 0.15rem; font-size: 0.9375rem; }
  .lp-hero .lp-flow .lp-d { display: none; }
  .lp-hero .lp-flow .lp-m { display: inline; }
  .lp-hero .lp-price { display: none; }
  .lp-hero .lp-car-slide img { max-height: 620px; }
}
@media (max-width: 40rem) {
  .lp-hero .lp-lede .lp-then { display: none; }
  .lp-hero { padding-top: 1rem; }
  .lp-hero .lp-chip { margin-bottom: 0.6rem; }
  .lp-hero .lp-lede { margin-top: 0.6rem; }
  .lp-hero .lp-actions { margin-top: 0.9rem; gap: 0.5rem; }
  .lp-hero-grid > .lp-stage { margin-top: 0.75rem; padding: 6px; }
  .lp-hero .lp-car-slide img { max-height: 380px; }
}
.lp-planrow .link + .link { margin-left: 0; }
@media (max-width: 40rem) {
  .lp-hero .lp-actions .lp-btn-lg { min-height: 3rem; padding-top: 0; padding-bottom: 0; }
  .lp-hero .lp-car-slide img { max-height: 360px; }
}

/* round 8 (Gemini): position pill on the carousel */
.lp-car-count { position: absolute; top: 0.6rem; right: 0.6rem; z-index: 2; padding: 0.2rem 0.6rem; border-radius: 999px; background: var(--accent); color: #fff; font: 600 0.75rem/1.4 var(--font-sans); pointer-events: none; box-shadow: 0 4px 12px -6px rgb(14 20 36 / 50%); }
.lp-car-count { top: -0.75rem; right: 0.9rem; }
@media (max-width: 40rem) { .lp-hero-grid > .lp-stage.lp-carousel { margin-top: 1.1rem; } }

/* round 9 (Gemini): thumbnail strip of the real screens instead of dots, a stronger position pill, app actions as secondary buttons */
.lp-has-thumbs .lp-car-dots { display: none; }
.lp-car-thumbs { display: flex; justify-content: center; gap: 0.45rem; margin-top: 0.7rem; flex-wrap: wrap; }
.lp-car-thumb { width: 4.25rem; height: 3rem; padding: 0; border: 2px solid var(--border); border-radius: 8px; background: #fff; overflow: hidden; cursor: pointer; opacity: 0.75; transition: opacity 0.2s var(--ease), border-color 0.2s var(--ease); }
.lp-car-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.lp-car-thumb:hover { opacity: 1; }
.lp-car-thumb[aria-current="true"] { border-color: var(--accent); opacity: 1; box-shadow: 0 0 0 2px var(--accent-soft); }
.lp-car-count { font-size: 0.8125rem; padding: 0.25rem 0.75rem; }
@media (max-width: 40rem) {
  .lp-car-thumbs { grid-column: 2; grid-row: 2; margin-top: 0.6rem; gap: 0.3rem; flex-wrap: nowrap; }
  .lp-car-thumb { width: 2.9rem; height: 2.2rem; border-radius: 6px; }
}
p.actions.lp-planrow { gap: 0.5rem; margin: 0.25rem 0 1rem; }
p.actions.lp-planrow .link { display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 0.85rem; border: 1px solid var(--border-strong, #c9d2e3); border-radius: 8px; background: #fff; color: var(--accent-strong, #1d4ed8); font-weight: 600; text-decoration: none; }
p.actions.lp-planrow .link:hover { background: var(--accent-soft, #eef3ff); }

/* round 10 (Gemini, Ageline): previews fully visible, compact file picker once a result is on screen, ageing table as cards on phones */
.lp-car-thumb { opacity: 1; }
.lp-tool:has(#results:not([hidden])) .drop .lp-empty-art, .lp-tool:has(#results:not([hidden])) .lp-sample-row, .lp-tool:has(#results:not([hidden])) .lp-help { display: none; }
.lp-tool:has(#results:not([hidden])) .drop { padding: 0.75rem 1rem; min-height: 0; }
@media (max-width: 40rem) {
  table.lp-cards thead { display: none; }
  table.lp-cards, table.lp-cards tbody, table.lp-cards tfoot { display: block; }
  table.lp-cards tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.35rem 0.75rem; padding: 0.75rem; border-bottom: 1px solid var(--line, #e3e8f2); }
  table.lp-cards td { display: block; border: 0; padding: 0; white-space: normal; text-align: left; min-width: 0; }
  table.lp-cards td[data-label]::before { content: attr(data-label); display: block; font-size: 0.6875rem; font-weight: 500; color: var(--fg-subtle, #64748b); }
  table.lp-cards td.name, table.lp-cards tfoot td:first-child { grid-column: 1 / -1; min-width: 0; font-weight: 650; }
  table.lp-cards td.stmt { grid-column: 1 / -1; }
  table.lp-cards td.stmt:empty { display: none; }
  table.lp-cards td.tot strong { color: var(--fg, #0e1424); }
  .table-wrap:has(> table.lp-cards) { overflow: visible; }
}
#results, #result { scroll-margin-top: 5rem; }
input[type="file"]::file-selector-button { font: inherit; font-weight: 600; color: var(--accent-strong, #1d4ed8); background: #fff; border: 1px solid var(--border-strong, #c9d2e3); border-radius: 8px; padding: 0.35rem 0.8rem; margin-right: 0.6rem; cursor: pointer; }
@media (max-width: 40rem) {
  table.lp-cards tr { position: relative; }
  table.lp-cards td.inc { position: absolute; top: 0.7rem; right: 0.75rem; }
  table.lp-cards td.inc::before { content: none; }
  table.lp-cards td.name { padding-right: 2rem; }
  table.lp-cards td:empty { display: none; }
  table.lp-cards tfoot td:first-child:empty + td { grid-column: 1 / -1; font-weight: 650; }
  table.lp-cards tfoot td:first-child:empty + td::before { content: none; }
}
/* routine "new lines" confirmation is a notice, not an error; calm once ticked; label text on one line */
#summary-confirm { background: #fff8eb; border-color: #f1d9a6; color: #6b4300; }
#summary-confirm:has(#confirm-ok:checked) { background: var(--bg-subtle, #f5f7fb); border-color: var(--border, #e3e8f2); color: var(--fg, #0e1424); }
#summary-confirm .confirm { display: block; position: relative; padding-left: 1.6rem; }
#summary-confirm .confirm input { position: absolute; left: 0; top: 0.2rem; margin: 0; }
@media (max-width: 40rem) {
  table.lp-cards { min-width: 0 !important; width: 100% !important; }
  table.lp-cards td.name::before { content: none; }
}
@media (max-width: 40rem) {
  table.lp-cards td.inc { position: static; grid-column: 4; grid-row: 1; justify-self: end; width: auto !important; }
  table.lp-cards td.inc + td.name { grid-column: 1 / 4; grid-row: 1; padding-right: 0; }
}

.table-wrap > table.lp-cards th, .table-wrap > table.lp-cards td { white-space: normal; }
/* round 11 (Gemini, Amortline): folded settings card, folded long notes, first cell of plain result tables as the card title */
.lp-fold.lp-folded > :not(h2):not(.lp-fold-btn) { display: none; }
.lp-fold-btn { display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 0.85rem; margin: 0.15rem 0 0.25rem; border: 1px solid var(--border-strong, #c9d2e3); border-radius: 8px; background: #fff; color: var(--accent-strong, #1d4ed8); font: inherit; font-weight: 600; cursor: pointer; }
.lp-fold-btn:hover { background: var(--accent-soft, #eef3ff); }
details.lp-more > summary { cursor: pointer; font-weight: 600; color: var(--fg, #0e1424); }
details.lp-more > span { display: block; margin-top: 0.35rem; }
@media (max-width: 40rem) {
  table.lp-cards:not(:has(td.inc, td.name)) tbody td:first-child { grid-column: 1 / -1; font-weight: 650; }
  table.lp-cards:not(:has(td.inc, td.name)) tbody td:first-child::before { content: none; }
  table.lp-cards input { max-width: 100%; }
}
/* round 12 (Gemini, Periodline): words never split inside the plan table, wrapping card cells, plan links as small pills, larger previews */
.lp-compare th, .lp-compare td { overflow-wrap: break-word; word-break: normal; }
@media (max-width: 40rem) {
  table.lp-cards tr { column-gap: 1rem; }
  table.lp-cards td, table.lp-cards td * { white-space: normal !important; overflow-wrap: break-word; }
}
a.locked { display: inline-flex; align-items: center; padding: 0.1rem 0.55rem; border: 1px solid var(--accent, #2563eb); border-radius: 999px; color: var(--accent-strong, #1d4ed8) !important; font-size: 0.75rem; font-weight: 600; text-decoration: none !important; white-space: nowrap; background: #fff; }
a.locked:hover { background: var(--accent-soft, #eef3ff); }
@media (min-width: 40.0625rem) { .lp-car-thumb { width: 5.5rem; height: 3.75rem; } }
@media (max-width: 40rem) {
  table.lp-cards td select, table.lp-cards td input:not([type="checkbox"]) { width: 100% !important; min-width: 0 !important; max-width: 100%; box-sizing: border-box; }
  #workers.lp-cards td:nth-child(2) { grid-column: 1 / -1; }
  #workers.lp-cards td:nth-child(6), #workers.lp-cards td:nth-child(7) { grid-column: span 2; }
}
/* round 13 (Gemini, Leaveproof): results first (downloads at the top of the pack), calm legal note, one Buy button per phone screen */
#pack-card { display: flex; flex-direction: column; }
#pack-card > * { order: 5; }
#pack-card > h2 { order: 0; }
#pack-card > .lp-ready { order: 1; }
#pack-card > .downloads { order: 2; margin-bottom: 0.75rem; }
#pack-card > #dl-msg { order: 3; }
.lp-legal { background: var(--bg-subtle, #f5f7fb); border-color: var(--border, #e3e8f2); color: var(--fg-muted, #475569); }
.lp-legal a { color: var(--accent-strong, #1d4ed8); }
@media (max-width: 40rem) {
  .lp-hero-cta-on .lp-top .lp-btn[data-buy], .lp-hero-cta-on .lp-top .lp-btn[data-plan] { display: none; }
  .lp-hero .lp-lede .lp-then.lp-then-keep { display: block; }
}
@media (max-width: 40rem) { table.lp-cards td[data-label]::before { font-size: 0.65rem; overflow-wrap: normal; word-break: normal; hyphens: manual; } }
/* round 14 (Gemini, Ageline r2): amounts never break inside a card, three roomier columns; phone header offers Pricing and FAQ while the hero Buy is on screen */
@media (max-width: 40rem) {
  table.lp-cards tr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  table.lp-cards td.num, table.lp-cards td.num * { white-space: nowrap !important; overflow-wrap: normal !important; font-variant-numeric: tabular-nums; }
  table.lp-cards td.inc { grid-column: 3; }
  table.lp-cards td.inc + td.name { grid-column: 1 / 3; }
  .lp-hero-cta-on .lp-top .lp-nav { display: flex; gap: 0.9rem; margin-left: auto; font-size: 0.875rem; }
  .lp-hero-cta-on .lp-top .lp-nav a:not([href$="#pricing"]):not([href$="#faq"]):not([href$="/pricing/"]):not([href$="/support/"]) { display: none; }
  .lp-hero-cta-on .lp-top .lp-by { display: none; }
}
/* round 15 (Gemini, Ageline r3): one short Buy label everywhere, bigger previews, lock icon on paid-plan links, no orphan words in tool buttons, enlarge hint on proof shots */
@media (max-width: 40rem) {
  .lp-hero .lp-actions .lp-btn .lp-m { display: none; }
  .lp-hero .lp-actions .lp-btn .lp-d { display: inline; }
}
@media (min-width: 40.0625rem) { .lp-car-thumb { width: 7rem; height: 4.75rem; } }
a.locked::before { content: ""; width: 0.7rem; height: 0.7rem; margin-right: 0.3rem; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center / contain no-repeat; }
.lp-tool .btn, .lp-tool button { text-wrap: balance; }
.lp-zoom-hint { position: absolute; right: 0.75rem; bottom: 0.75rem; z-index: 2; padding: 0.25rem 0.65rem; border-radius: 999px; background: rgb(14 20 36 / 78%); color: #fff; font-size: 0.75rem; font-weight: 600; pointer-events: none; }
/* round 16 (ChatGPT, Leaveproof): review-the-checks link and legend; plan comparison readable on phones (feature on its own line, plan values side by side) */
.lp-review { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; margin: 0.25rem 0 0.75rem; }
.lp-review .lp-legend { font-size: 0.8125rem; color: var(--fg-muted, #475569); }
#exceptions { scroll-margin-top: 5rem; }
@media (max-width: 40rem) {
  .lp-compare table, .lp-compare thead, .lp-compare tbody { display: block; width: 100%; }
  .lp-compare tr { display: flex; flex-wrap: wrap; }
  .lp-compare thead th:first-child { display: none; }
  .lp-compare thead th, .lp-compare tbody td { flex: 1 1 0; text-align: center; }
  .lp-compare tbody th { flex: 0 0 100%; padding-bottom: 0.15rem; border-bottom: 0; font-weight: 650; text-align: left; }
  .lp-compare tbody td { padding-top: 0.2rem; }
}
/* round 17 (Gemini u/5, Leaveproof): on phones the plan cards keep name, price and button; the comparison table below carries the details */
@media (max-width: 40rem) { .lp-plans:has(~ .lp-compare) .lp-plan ul { display: none; } }
/* autoplay round: thumbnail strip always visible under the slide; on phones it scrolls sideways */
.lp-car-thumbs { display: flex !important; }
@media (max-width: 40rem) {
  .lp-car-thumbs { justify-content: flex-start; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; min-width: 0; padding: 2px; scroll-snap-type: x proximity; }
  .lp-car-thumbs::-webkit-scrollbar { display: none; }
  .lp-car-thumb { flex: 0 0 auto; scroll-snap-align: center; }
}
/* first carousel slide: silent screen recording of the real tool */
.lp-car-slide video { display: block; width: 100%; height: auto; max-height: 560px; object-fit: contain; border-radius: 10px; background: #fff; }
@media (min-width: 40.0625rem) { .lp-hero .lp-car-slide video { max-height: 620px; } }
@media (max-width: 40rem) { .lp-hero .lp-car-slide video { max-height: 360px; } }

.lp-mobile-proof { display: none; }
@media (max-width: 40rem) {
  .lp-hero .lp-hero-gallery { display: none; }
  .lp-mobile-proof {
    display: block;
    order: 5;
    margin: 1.1rem 0 0;
    padding: 1rem;
    border: 1px solid var(--border-strong);
    border-radius: 16px;
    background: var(--bg);
    color: var(--fg);
    font-size: 0.875rem;
  }
  .lp-mobile-proof figcaption { color: var(--fg-muted); }
  .lp-mobile-proof p { margin: 0.25rem 0 0.75rem; font-size: 1.125rem; font-weight: 700; }
  .lp-mobile-proof dl { margin: 0; }
  .lp-mobile-proof dl > div { display: flex; justify-content: space-between; gap: 0.75rem; padding-block: 0.35rem; }
  .lp-mobile-proof dd { margin: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .lp-mobile-proof .lp-proof-total { margin-top: 0.35rem; padding-top: 0.625rem; border-top: 1px solid var(--border); font-weight: 700; }
  .lp-mobile-proof a { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent-strong); }

  .lp-home :is(.lp-chip, .lp-flag, .lp-compare table, .lp-trust-list li, .lp-tool .hint,
    .lp-hero .lp-flow, .lp-url, .lp-tag, .lp-zoom-hint, .lp-ageing p, .lp-ageing dt,
    .lp-ageing dd, .lp-ageing th, .lp-ageing td) { font-size: 0.875rem; }
  .lp-home #faq .lp-faq details { padding-block: 0.35rem; }
  .lp-home #faq .lp-faq summary { align-items: center; min-height: 44px; }
}
/* hero buttons: "Try free with the sample" is the main button; on phones both buttons sit side by side with short labels */
.lp-try-s { display: none; }
@media (max-width: 40rem) {
  .lp-hero .lp-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.5rem; }
  .lp-hero .lp-actions > .lp-flow { grid-column: 1 / -1; order: 3; }
  .lp-hero .lp-actions .lp-btn-lg { padding-left: 0.5rem; padding-right: 0.5rem; font-size: 0.95rem; white-space: nowrap; }
  .lp-hero .lp-actions .lp-btn-lg .lp-arrow { display: none; }
  .lp-try-l { display: none; }
  .lp-try-s { display: inline; }
}
@media (max-width: 40rem) { .lp-hero .lp-actions > :not(.lp-btn) { grid-column: 1 / -1; } }
/* Leaveproof result order: downloads, status, items to check, then the per-worker figures */
#pack-card > .settings { order: 4; }
#pack-card > #summary-line { order: 5; }
#pack-card > .lp-review { order: 6; }
#pack-card > h3 { order: 7; }
#pack-card > .table-wrap:has(#exceptions) { order: 8; }
#pack-card > .lp-notes-btn { order: 9; }
#pack-card > .lp-sum-btn { order: 10; }
#pack-card > .table-wrap:has(#summary) { order: 11; }
#pack-card > .table-wrap[hidden] { display: none; }
/* FOUNDING40 launch offer line; checkout.js removes every [data-founding] element after 30 Nov 2026 */
.lp-founding, .lp-plan > p.lp-founding { margin: 0.35rem 0 0; font-size: 0.95rem; font-weight: 600; line-height: 1.4; color: var(--accent-strong, var(--accent)); }
.lp-founding strong, .lp-price .lp-founding strong { font-weight: 800; color: inherit; }
