/*
  The marketing pages' stylesheet: the landing and /cennik (context/changes/produkt-page, ported
  from the owner's design reference of 2026-10-23, theme "Szmaragd + limonka").

  Linked only by app/views/layouts/marketing.html.erb and layouts/auth.html.erb, after Tailwind. It lives in lib/assets so
  `stylesheet_link_tag :app` (every .css file under app/assets) never picks it up: the signed-in app
  shares the emerald palette through its own Tailwind tokens and keeps its own type (Geist).

  Isolation:
  - Every token is scoped to `.lp-root` (the marketing layout's body), never `:root` — the app
    already owns `--card` and friends there.
  - Every class is `lp-` prefixed and named by role (`lp-btn-primary`, `lp-section-dark`), never by
    colour: the palette gate over app/views/ would read a colour-named class as a raw palette class.
  - Element resets sit in Tailwind's `base` layer, after preflight, so any Tailwind utility in a
    shared partial (the flash alert) still wins over them. The `lp-` classes are unlayered.

  Layout follows the design: flex-wrap and auto-fit grids with clamp() sizes, so it reflows from
  320px to 1920px by itself. One breakpoint, the app's own `max-width: 47.99rem` (768px), swaps the
  nav for its hamburger and fits the calculator's figure on a phone.
*/

/* The marketing type, self-hosted (SIL OFL, vendor/assets/fonts/<family>/OFL.txt): Inter for text,
   Plus Jakarta Sans for headings and display figures, JetBrains Mono for eyebrows and meta lines. One variable file per subset, as
   fontsource ships them; propshaft rewrites these url()s to digested /assets paths. latin-ext
   carries the Polish letters. The signed-in app stays on Geist (vendor/assets/fonts/geist/). */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/inter/inter-latin-ext-wght-normal-65edaaef.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/inter/inter-latin-wght-normal-1f021a24.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/plus-jakarta-sans/plus-jakarta-sans-latin-ext-wght-normal-ff4456f1.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/plus-jakarta-sans/plus-jakarta-sans-latin-wght-normal-d2ff26bc.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("/assets/jetbrains-mono/jetbrains-mono-latin-ext-wght-normal-6168ff55.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("/assets/jetbrains-mono/jetbrains-mono-latin-wght-normal-7c88d0cc.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Tokens. The theme's eleven colours byte for byte, then the design's neutrals and status tones
   named by role. */
.lp-root {
  --lp-primary: #047857;
  --lp-deep: #065F46;
  --lp-tint: #E3F7EE;
  --lp-tint-strong: #B7E8D2;
  --lp-ink: #072A23;
  --lp-accent: #D4F57A;
  --lp-accent-ink: #1F2E05;
  --lp-soft: #F3F8F5;
  --lp-glow: #D6F5E7;
  --lp-glow-strong: #0E9F75;
  --lp-shadow: rgba(4, 120, 87, .40);

  --lp-paper: #FFFFFF;
  --lp-surface: #F4F6F5;
  --lp-cta-surface: #F3F4F3;
  --lp-footer-surface: #0D110F;
  --lp-line: #E5EAE7;
  --lp-line-soft: #EEF1EF;
  --lp-line-strong: #DCE2DF;
  --lp-line-nav: #E8ECEA;
  --lp-line-phone: #E2E6E4;
  --lp-line-dashed: #D3DAD6;
  /* The account pages (layouts/auth): a warm off-white form panel, an input border that holds 3:1
     against it, and the primary's focus halo. */
  --lp-auth-surface: #FAF9F6;
  --lp-line-input: #8A948F;
  --lp-focus-halo: rgba(4, 120, 87, .18);
  /* The password strength bar's middle tone; it and its label hold 4.5:1 against the panel. */
  --lp-strength-fair: #B45309;

  --lp-text-strong: #2E3833;
  --lp-text-nav: #3D4843;
  --lp-text-body: #4A5650;
  --lp-text-muted: #5F6B65;
  --lp-text-faint: #6B7670;
  --lp-text-dash: #8A948F;

  --lp-danger: #B42318;
  --lp-danger-ink: #8A1C12;
  --lp-danger-surface: #FDF1EF;
  --lp-danger-action: #C8322B;
  --lp-warn: #92400E;
  --lp-warn-surface: #FEF0C7;
  --lp-info: #1E40AF;
  --lp-info-surface: #DBE7FE;
  --lp-note-surface: #FFF9E6;

  --lp-on-dark: #FFFFFF;
  --lp-on-dark-muted: rgba(255, 255, 255, .78);
  --lp-on-dark-faint: rgba(255, 255, 255, .7);
  --lp-on-dark-fill: rgba(255, 255, 255, .08);
  --lp-on-dark-line: rgba(255, 255, 255, .14);

  --lp-shade-sm: 0 12px 30px -20px rgba(16, 24, 20, .2);
  --lp-shade-md: 0 16px 36px -22px rgba(16, 24, 20, .3);
  --lp-shade-phone: 0 30px 60px -28px rgba(16, 24, 20, .35);
  --lp-shade-float: 0 20px 40px -14px rgba(16, 24, 20, .28);

  /* Typography after the owner's reference site: Inter for text, Plus Jakarta Sans for headings
     and display figures. */
  --lp-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --lp-font-display: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --lp-mono: "JetBrains Mono", ui-monospace, monospace;
}

@layer base {
  .lp-root {
    margin: 0;
    background: var(--lp-paper);
    color: var(--lp-ink);
    font-family: var(--lp-font);
    /* The reference's Inter character variants. The fontsource subsets carry no cv tables, so
       these are inert today; they take effect if a fuller Inter file replaces them. */
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
    line-height: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  .lp-root h1,
  .lp-root h2,
  .lp-root h3 {
    margin: 0;
    font-family: var(--lp-font-display);
    font-weight: 700;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }

  .lp-root p { margin: 0; }

  .lp-root ul,
  .lp-root ol {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .lp-root a {
    color: inherit;
    text-decoration: none;
  }

  .lp-root a:hover { opacity: .92; }

  .lp-root button { font-family: inherit; }

  /* Preflight makes every svg display:block; the design's icons sit inline next to text. */
  .lp-root svg {
    display: inline-block;
    flex: none;
  }

  .lp-root :focus-visible {
    outline: 2px solid var(--lp-primary);
    outline-offset: 3px;
  }
}

html { scroll-padding-top: 96px; }

/* No section may push the page sideways; clip does not make main a scroll container, so nothing
   sticky or anchored changes. */
.lp-root > main { overflow-x: clip; }

/* Shared pieces. ------------------------------------------------------------------------------ */

.lp-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.lp-skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 50;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--lp-paper);
  border: 1px solid var(--lp-line);
  font-size: 14px;
  font-weight: 600;
}

.lp-skip-link:focus { top: 16px; }

.lp-wrap {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}

.lp-flash { padding-top: 24px; }

/* The PNG logo (805×159, logo_marketing.png: a dark-grey wordmark with a green ".pl"). Height per
   placement, width follows. */
.lp-logo {
  display: block;
  width: auto;
  max-width: 100%;
}

.lp-logo-nav { height: 26px; }

/* On the dark footer the design renders the wordmark white with a filter, so one file serves both
   places and stays legible. */
.lp-logo-footer {
  height: 32px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.lp-section { position: relative; }
.lp-section-soft { background: var(--lp-soft); }

.lp-container {
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(72px, 9vw, 112px) 24px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.lp-container-problem { gap: 44px; }
.lp-container-reasons { gap: clamp(64px, 8vw, 104px); }
.lp-container-how { gap: 48px; }
.lp-container-1000 { max-width: 1000px; }
.lp-container-820 { max-width: 820px; gap: 36px; }
.lp-container-centered { align-items: center; gap: 32px; }

.lp-raised { position: relative; }

.lp-section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.lp-section-head-problem { gap: 18px; max-width: 860px; }
.lp-section-head-modules { gap: 16px; max-width: 840px; }
/* One line on desktop (owner): "3 kliknięcia, 8 powiadomionych osób" is ~861px in Plus Jakarta Sans
   700 at 50px, so the head is wider than the old 820px. */
.lp-section-head-how { max-width: 880px; }
/* One line on desktop (owner, 2026-10-23): "Mniej do zapamiętania, mniej pustych terminów". */
.lp-section-head-wide { max-width: none; }

.lp-eyebrow {
  font-family: var(--lp-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--lp-primary);
}

.lp-eyebrow-accent { color: var(--lp-accent); }

.lp-h2 {
  font-size: clamp(32px, 4vw, 50px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.lp-h2-small {
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.lp-h3 {
  font-size: 21px;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.lp-h3-step {
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

/* A heading's coloured half is a bare <span> from the locale (title_html keys): the heading's own
   face and weight, only the colour changes (owner, 2026-10-25: no italic accent). */
.lp-accented span { color: var(--lp-primary); }
.lp-accented-lime span { color: var(--lp-accent); }

.lp-lead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--lp-text-body);
  text-wrap: pretty;
}

.lp-lead-narrow { max-width: 640px; }

.lp-body {
  font-size: 16px;
  line-height: 1.6;
  color: var(--lp-text-body);
}

.lp-strong { font-weight: 600; }
.lp-muted { color: var(--lp-text-body); }
.lp-muted-2 { color: var(--lp-text-muted); }

.lp-trial-note {
  font-size: 14px;
  color: var(--lp-text-muted);
}

/* Buttons. */
.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.lp-btn-lg {
  min-height: 56px;
  padding: 0 30px;
  font-size: 17px;
}

.lp-btn-primary {
  background: var(--lp-primary);
  color: var(--lp-on-dark);
  box-shadow: 0 12px 28px -6px var(--lp-shadow);
}

.lp-btn-outline {
  background: var(--lp-paper);
  color: var(--lp-ink);
  border: 1px solid var(--lp-line-strong);
  font-weight: 600;
}

.lp-btn-light {
  background: var(--lp-paper);
  color: var(--lp-ink);
}

.lp-btn-ink {
  background: var(--lp-ink);
  color: var(--lp-on-dark);
}

.lp-btn-accent {
  background: var(--lp-accent);
  color: var(--lp-accent-ink);
}

.lp-btn-ghost-ink {
  border: 1.5px solid var(--lp-ink);
  color: var(--lp-ink);
}

.lp-text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 15px;
  font-weight: 700;
  color: var(--lp-deep);
}

/* Pills and chips. */
.lp-pill-accent {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--lp-accent);
  color: var(--lp-accent-ink);
  font-size: 13px;
  font-weight: 700;
}

.lp-pill-small {
  align-self: flex-start;
  padding: 5px 11px;
  font-size: 12px;
}

.lp-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--lp-paper);
  border: 1px solid var(--lp-line);
  font-size: 14px;
  font-weight: 600;
  color: var(--lp-text-strong);
}

.lp-chip svg { color: var(--lp-primary); }

.lp-tag-pill {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--lp-tint);
  color: var(--lp-deep);
  font-size: 13px;
  font-weight: 700;
}

/* Status tags inside the illustrations. */
.lp-tag {
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.lp-tag-roomy { padding: 5px 10px; }
.lp-tag-tiny { font-size: 11px; }
.lp-tag-ok { color: var(--lp-deep); background: var(--lp-tint); }
.lp-tag-info { color: var(--lp-info); background: var(--lp-info-surface); }
.lp-tag-warn { color: var(--lp-warn); background: var(--lp-warn-surface); }
.lp-tag-accent { color: var(--lp-accent-ink); background: var(--lp-accent); }
.lp-tag-muted { color: var(--lp-text-body); background: var(--lp-surface); font-weight: 600; }

.lp-status-ok { font-weight: 700; color: var(--lp-primary); }
.lp-status-bad { font-weight: 700; color: var(--lp-danger); }
.lp-status-warn { font-weight: 700; color: var(--lp-warn); }

/* The small round check in front of a list item or in a table cell. */
.lp-check {
  display: inline-flex;
  flex: none;
  margin-top: 2px;
  color: var(--lp-primary);
}

.lp-checklist {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 15px;
  color: var(--lp-text-strong);
}

.lp-checklist li {
  display: flex;
  gap: 10px;
}

.lp-checklist-plan { gap: 12px; }

/* Avatars and the illustrations' fake buttons. */
.lp-avatar {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}

.lp-avatar-lg { width: 36px; height: 36px; }
.lp-avatar-light { background: var(--lp-paper); color: var(--lp-deep); }
.lp-avatar-dark { background: var(--lp-ink); color: var(--lp-on-dark); }
.lp-avatar-primary { background: var(--lp-primary); color: var(--lp-on-dark); font-size: 13px; font-weight: 600; }

.lp-avatar-free {
  border: 1px solid var(--lp-line-dashed);
  color: var(--lp-text-muted);
  font-size: 15px;
  font-weight: 400;
}

.lp-mini-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}

.lp-mini-btn-primary { background: var(--lp-primary); color: var(--lp-on-dark); }
.lp-mini-btn-muted { background: var(--lp-surface); color: var(--lp-ink); font-weight: 600; }
.lp-mini-btn-danger { background: var(--lp-danger-action); color: var(--lp-on-dark); }
.lp-mini-btn-wide { flex: 1; padding: 9px 0; }
.lp-mini-btn-tall { padding-top: 12px; padding-bottom: 12px; font-size: 14px; }
.lp-mini-btn-block { padding: 12px 0; font-size: 14px; }
.lp-mini-btn-xs { padding: 6px 12px; font-size: 12px; }
.lp-mini-btn-save { padding: 11px 20px; font-size: 14px; }

.lp-mini-actions {
  display: flex;
  gap: 8px;
}

.lp-bubble {
  font-size: 14px;
  line-height: 1.45;
  background: var(--lp-surface);
  border-radius: 12px;
  padding: 10px 12px;
}

.lp-bubble-small { font-size: 13px; }

.lp-grid-320 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 20px;
}

/* Nav. ----------------------------------------------------------------------------------------- */

.lp-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  padding: 14px 16px 0;
}

.lp-nav-bar {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  padding: 10px 10px 10px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  border-radius: 999px;
  /* Near-opaque instead of a backdrop blur: blurring what scrolls under a sticky bar repaints
     every frame and made the page stutter on scroll (measured: frames up to 33 ms, 18 ms without). */
  background: rgba(255, 255, 255, .97);
  border: 1px solid var(--lp-line-nav);
  box-shadow: 0 8px 30px -12px rgba(16, 24, 20, .18);
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

/* At the very top the bar sits on the hero with no panel of its own (owner, 2026-10-23);
   nav_scroll_controller.js adds this class only while scrollY is near 0, and the open mobile
   menu keeps its own white panel. */
/* The page's first section slides under the floating bar, so the hero's own background shows
   behind the transparent bar at the top. --lp-nav-h is the bar's rendered height (80px, 76px on
   phones); the section pads its content down by the same amount. */
.lp-root { --lp-nav-h: 80px; }
.lp-nav { margin-bottom: calc(-1 * var(--lp-nav-h)); }
/* The bar's height plus room to breathe under it (owner: more space under the menu). */
.lp-nav + main > section:first-child { padding-top: calc(var(--lp-nav-h) + 32px); }

@media (max-width: 47.99rem) {
  .lp-root { --lp-nav-h: 76px; }
  .lp-nav + main > section:first-child { padding-top: calc(var(--lp-nav-h) + 16px); }
}

.lp-nav-at-top .lp-nav-bar {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.lp-nav-logo {
  display: flex;
  align-items: center;
  border-radius: 4px;
}

.lp-nav-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 28px;
  font-size: 15.5px;
  font-weight: 600;
}

/* Ink and semi-bold so the links hold up on the transparent bar over the hero (owner). */
.lp-nav-link { color: var(--lp-ink); transition: color .15s ease; }
.lp-nav-link:hover { color: var(--lp-primary); opacity: 1; }

/* The current page's own link (Cennik on /cennik) reads in ink. */
.lp-nav-link[aria-current="page"],
.lp-menu-link[aria-current="page"] { color: var(--lp-ink); font-weight: 700; }

/* "Zaloguj się" and the CTA travel together at the bar's right end. */
.lp-nav-actions {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 15.5px;
  font-weight: 600;
}

.lp-nav-sign-in {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border-radius: 4px;
}

.lp-nav-cta {
  min-height: 44px;
  padding: 0 22px;
  font-size: 15px;
  box-shadow: 0 6px 18px -4px var(--lp-shadow);
}

.lp-nav-compact {
  display: none;
  align-items: center;
  gap: 14px;
}

/* A native <details> (details_menu_controller.js closes it on Escape and outside click). Static,
   so the panel positions against the whole bar, not the button. */
.lp-menu { position: static; }

.lp-hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--lp-line);
  background: var(--lp-paper);
  color: var(--lp-ink);
  cursor: pointer;
  list-style: none;
}

.lp-hamburger::-webkit-details-marker { display: none; }
.lp-hamburger::marker { content: ""; }

.lp-menu[open] .lp-hamburger { background: var(--lp-surface); }

.lp-menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  padding: 8px 20px 20px;
  background: var(--lp-paper);
  border: 1px solid var(--lp-line);
  border-radius: 22px;
  box-shadow: 0 24px 48px -26px rgba(16, 24, 20, .3);
}

.lp-menu-link {
  display: block;
  padding: 14px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--lp-ink);
  border-bottom: 1px solid var(--lp-line-soft);
}

.lp-menu-cta {
  margin-top: 16px;
  min-height: 52px;
  width: 100%;
  font-size: 16px;
}

/* Hero. ---------------------------------------------------------------------------------------- */

.lp-hero {
  background: radial-gradient(900px 480px at 50% 0%, var(--lp-glow) 0%, rgba(255, 255, 255, 0) 70%), var(--lp-paper);
}

.lp-hero-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 72px 24px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
}

.lp-hero-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--lp-primary);
}

.lp-hero-kicker {
  font-size: 17px;
  font-weight: 600;
  color: var(--lp-text-body);
}

/* The page h1s track a little tighter than the h2s (-0.02em), as on the reference site. */
.lp-hero-title {
  font-size: clamp(38px, 6.2vw, 80px);
  line-height: 1.04;
  letter-spacing: -0.035em;
}

.lp-hero-lead {
  max-width: 600px;
  font-size: 20px;
  line-height: 1.6;
  color: var(--lp-text-body);
  text-wrap: pretty;
}

.lp-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  padding-top: 6px;
}

.lp-hero-how { padding: 0 24px 0 10px; }

.lp-hero-how-disc {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--lp-tint);
  color: var(--lp-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lp-hero-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.lp-hero-trust .lp-chip { padding: 8px 14px; }

.lp-hero-mock {
  position: relative;
  width: 100%;
  max-width: 860px;
  margin-top: 36px;
  padding-bottom: 56px;
  text-align: left;
}

.lp-hero-mock-card {
  background: var(--lp-paper);
  border: 1px solid var(--lp-line);
  border-radius: 26px;
  box-shadow: 0 2px 4px rgba(16, 24, 20, .04), 0 40px 80px -30px rgba(16, 24, 20, .28);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lp-hero-mock-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
}

.lp-hero-mock-day {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--lp-text-muted);
}

.lp-hero-mock-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border-radius: 14px;
}

.lp-hero-mock-row-booked { background: var(--lp-tint); }
.lp-hero-mock-row-free { border: 1px solid var(--lp-line); }
.lp-hero-mock-row-regular { background: var(--lp-surface); }

.lp-hero-mock-time {
  width: 46px;
  flex: none;
  font-size: 14px;
  color: var(--lp-text-body);
}

.lp-hero-mock-name {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
}

.lp-hero-mock-free {
  flex: 1;
  font-size: 15px;
  color: var(--lp-text-muted);
}

.lp-hero-mock-sms {
  position: absolute;
  right: 24px;
  bottom: 0;
  width: 240px;
  background: var(--lp-paper);
  border: 1px solid var(--lp-line);
  border-radius: 18px;
  box-shadow: 0 24px 50px -14px rgba(16, 24, 20, .32);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lp-hero-mock-sms-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--lp-text-nav);
}

.lp-hero-mock-sms-title svg { color: var(--lp-primary); }

/* Calculator. ---------------------------------------------------------------------------------- */

.lp-calc {
  background: var(--lp-paper);
  border: 1px solid var(--lp-line);
  border-radius: 32px;
  box-shadow: 0 40px 80px -40px rgba(16, 24, 20, .28);
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: 10px;
}

.lp-calc-controls {
  padding: clamp(22px, 4vw, 44px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 40px;
}

.lp-calc-field {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lp-calc-field-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
}

.lp-calc-label {
  font-size: 15px;
  font-weight: 500;
  color: var(--lp-text-body);
}

.lp-calc-value {
  font-family: var(--lp-font-display);
  font-size: 36px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.lp-range {
  width: 100%;
  height: 28px;
  margin: 0;
  accent-color: var(--lp-primary);
  cursor: pointer;
}

.lp-calc-scale {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--lp-text-faint);
}

.lp-calc-divider {
  height: 1px;
  background: var(--lp-line-soft);
}

.lp-calc-note {
  font-size: 13px;
  line-height: 1.5;
  color: var(--lp-text-faint);
}

.lp-calc-result {
  position: relative;
  overflow: hidden;
  min-height: 360px;
  padding: clamp(28px, 4vw, 48px);
  border-radius: 24px;
  background: var(--lp-ink);
  color: var(--lp-on-dark);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 36px;
}

.lp-calc-glow {
  position: absolute;
  width: 420px;
  height: 420px;
  right: -160px;
  top: -200px;
  border-radius: 999px;
  background: var(--lp-glow-strong);
  opacity: .5;
}

.lp-calc-result-body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lp-calc-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.lp-calc-result-label {
  font-size: 15px;
  color: var(--lp-on-dark-muted);
}

.lp-calc-result-head .lp-pill-small { align-self: center; }

.lp-calc-total {
  font-family: var(--lp-font-display);
  font-size: clamp(56px, 8vw, 92px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: .95;
  color: var(--lp-accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.lp-calc-line {
  font-size: 17px;
  color: rgba(255, 255, 255, .85);
}

.lp-calc-cta {
  position: relative;
  align-self: flex-start;
  min-height: 52px;
  padding: 0 26px;
  font-size: 16px;
}

.lp-calc-result :focus-visible { outline-color: var(--lp-accent); }

/* Brzmi znajomo? ------------------------------------------------------------------------------- */

.lp-story-card {
  background: var(--lp-paper);
  border: 1px solid var(--lp-line);
  border-radius: 24px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: var(--lp-shade-sm);
}

.lp-mono-meta {
  font-family: var(--lp-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--lp-text-faint);
}

.lp-story-mock {
  margin-top: auto;
  border-radius: 16px;
  background: var(--lp-surface);
}

.lp-story-mock-messages {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
}

.lp-sent-bubble {
  align-self: flex-end;
  max-width: 90%;
  font-size: 13px;
  line-height: 1.4;
  background: var(--lp-tint);
  color: var(--lp-deep);
  border-radius: 14px 14px 4px 14px;
  padding: 8px 11px;
}

.lp-sent-bubble-faded { opacity: .7; }

.lp-sent-progress {
  align-self: flex-end;
  font-size: 12px;
  font-weight: 600;
  color: var(--lp-text-faint);
}

.lp-story-mock-list {
  display: flex;
  flex-direction: column;
  padding: 4px 14px;
}

.lp-story-reply {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--lp-line);
  font-size: 13px;
}

.lp-story-reply:last-child { border-bottom: 0; }

.lp-story-mock-alert {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: var(--lp-danger-surface);
}

.lp-story-alert-icon {
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 999px;
  background: var(--lp-paper);
  color: var(--lp-danger);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lp-story-alert-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--lp-danger-ink);
}

.lp-story-alert-title { font-size: 13px; font-weight: 700; }
.lp-story-alert-reason { font-size: 12px; }

.lp-fix-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 26px;
  border-radius: 22px;
  background: var(--lp-tint);
}

.lp-fix-strip-text {
  display: flex;
  align-items: center;
  gap: 14px;
}

.lp-fix-strip-icon {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 999px;
  background: var(--lp-primary);
  color: var(--lp-on-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lp-fix-strip-copy {
  font-size: 17px;
  line-height: 1.5;
  color: var(--lp-ink);
}

.lp-fix-strip-copy strong { font-weight: 600; }

/* Dla kogo. ------------------------------------------------------------------------------------ */

.lp-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 16px;
}

.lp-tile {
  position: relative;
  overflow: hidden;
}

/* The tile's photo, already cropped to the tile's shape with the subject centred; cover only
   trims a sliver when the grid cell's ratio drifts. Sits under the fade and the label. */
.lp-tile-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.lp-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .25) 32%, rgba(0, 0, 0, 0) 55%);
}

.lp-tile-square {
  aspect-ratio: 1 / 1;
  border-radius: 22px;
}

.lp-tile-wide {
  aspect-ratio: 4 / 3;
  border-radius: 20px;
}

.lp-tile-wide::after {
  background: linear-gradient(to top, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .25) 34%, rgba(0, 0, 0, 0) 58%);
}

/* The design's flat greys, one per tile, in its order. */
.lp-tile-tone-1 { background: #8E8A84; }
.lp-tile-tone-2 { background: #7D7A75; }
.lp-tile-tone-3 { background: #9A948C; }
.lp-tile-tone-4 { background: #86827C; }
.lp-tile-tone-5 { background: #928D86; }
.lp-tile-tone-6 { background: #7F7B76; }
.lp-tile-tone-7 { background: #8A857F; }
.lp-tile-tone-8 { background: #96918A; }
.lp-tile-tone-group-1 { background: #8A857F; }
.lp-tile-tone-group-2 { background: #7F7B76; }
.lp-tile-tone-group-3 { background: #928D86; }

.lp-tile-label {
  position: absolute;
  z-index: 1;
  left: 22px;
  right: 22px;
  bottom: 20px;
  font-family: var(--lp-font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--lp-on-dark);
}

.lp-tile-label-small {
  left: 20px;
  right: 20px;
  bottom: 18px;
  font-size: 20px;
}

.lp-groups {
  background: var(--lp-paper);
  border: 1px solid var(--lp-line);
  border-radius: 26px;
  padding: clamp(22px, 3vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.lp-groups-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 720px;
}

.lp-groups-title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.lp-groups-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 14px;
}

/* Every tile is a link to its audience's page (/dla/<slug>): the <a> fills the tile, the fade
   lets clicks through, the photo leans in on hover and the arrow nudges. The focus ring sits on the
   tile itself, because the tile clips what is inside it. */
.lp-tile::after { pointer-events: none; }

.lp-tile-link {
  position: absolute;
  inset: 0;
  display: block;
  color: inherit;
  text-decoration: none;
}

.lp-tile-link:focus-visible { outline: none; }

/* The marketing links' hover dims every <a> (opacity .92), which washed the whole tile — photo,
   fade and name — into the grey tone behind it. A tile answers with the zoom instead. */
.lp-tile-link:hover { opacity: 1; }

/* Light photos (logopeda, kosmetyczka) still need the name to hold against them. */
.lp-tile-link .lp-tile-label { text-shadow: 0 1px 14px rgba(0, 0, 0, .45); }

.lp-tile:has(.lp-tile-link:focus-visible) {
  outline: 3px solid var(--lp-primary);
  outline-offset: 3px;
}

.lp-tile-photo { transition: transform .35s ease; }
.lp-tile-link:hover .lp-tile-photo { transform: scale(1.04); }

/* Pinned to the label's last line, right edge, so a two-line name never leaves it alone below. */
.lp-tile-link .lp-tile-label { padding-right: 32px; }

.lp-tile-arrow {
  position: absolute;
  right: 0;
  bottom: 2px;
  display: inline-flex;
  transition: transform .2s ease;
}

.lp-tile-link:hover .lp-tile-arrow { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .lp-tile-photo,
  .lp-tile-arrow { transition: none; }
  .lp-tile-link:hover .lp-tile-photo,
  .lp-tile-link:hover .lp-tile-arrow { transform: none; }
}

/* Per-audience landing page (/dla/<slug>, pages/audience). ------------------------------------- */

.lp-aud-hero {
  max-width: 1160px;
  margin: 0 auto;
  padding: 32px 24px 72px;
  display: grid;
  gap: 40px;
  align-items: center;
}

@media (min-width: 60rem) {
  .lp-aud-hero {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: 56px;
    padding-top: 48px;
  }
}

.lp-aud-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.lp-aud-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 15px;
  font-weight: 600;
  color: var(--lp-text-body);
  text-decoration: none;
}

.lp-aud-back:hover { color: var(--lp-deep); }
.lp-aud-back-arrow { display: inline-flex; transform: rotate(180deg); }

.lp-aud-title {
  font-size: clamp(36px, 5.2vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.lp-aud-lead {
  max-width: 560px;
  font-size: 19px;
  line-height: 1.6;
  color: var(--lp-text-body);
  text-wrap: pretty;
}

.lp-aud-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 6px;
}

.lp-aud-ctas-center { justify-content: center; }

.lp-aud-photo {
  position: relative;
  width: 100%;
  max-width: 520px;
  justify-self: center;
  overflow: hidden;
  border-radius: 28px;
  background: var(--lp-surface);
}

.lp-aud-photo-square { aspect-ratio: 1 / 1; }
.lp-aud-photo-wide { aspect-ratio: 4 / 3; }

.lp-aud-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lp-aud-gains {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 16px;
}

.lp-aud-gain {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
  border-radius: 22px;
  background: var(--lp-paper);
  border: 1px solid var(--lp-line);
}

.lp-aud-gain-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--lp-tint);
  color: var(--lp-primary);
}

/* "Dla kogo jeszcze": the landing's tiles, smaller — five across on a wide screen, two on a phone. */
.lp-aud-more {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(180px, calc(50% - 6px)), 1fr));
  gap: 12px;
}

.lp-aud-more-tile { border-radius: 18px; }

.lp-aud-more-tile .lp-tile-label {
  left: 16px;
  right: 16px;
  bottom: 14px;
  font-size: 17px;
}

/* Moduły. -------------------------------------------------------------------------------------- */

.lp-section-dark {
  overflow: hidden;
  background: var(--lp-ink);
  color: var(--lp-on-dark);
}

.lp-section-dark :focus-visible { outline-color: var(--lp-accent); }

.lp-modules-glow {
  position: absolute;
  width: 900px;
  height: 900px;
  left: 50%;
  top: -620px;
  margin-left: -450px;
  border-radius: 999px;
  background: var(--lp-glow-strong);
  opacity: .35;
}

.lp-h2-modules {
  font-size: clamp(30px, 3.8vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--lp-on-dark);
}

.lp-lead-on-dark {
  max-width: 620px;
  color: var(--lp-on-dark-muted);
}

.lp-core {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.lp-core-label {
  padding-right: 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--lp-on-dark-faint);
}

.lp-core-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.lp-core-chip {
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--lp-on-dark-fill);
  border: 1px solid var(--lp-on-dark-line);
  font-size: 14px;
  font-weight: 600;
}

/* The switcher: radios first, then the button column and the panel column, all siblings. */
.lp-modswitch {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 24px;
}

.lp-modswitch-tabs {
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lp-modswitch-tab {
  width: 100%;
  min-height: 72px;
  padding: 14px 16px;
  border: 1px solid var(--lp-on-dark-line);
  border-radius: 18px;
  background: var(--lp-on-dark-fill);
  color: var(--lp-on-dark);
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
}

.lp-modswitch-icon {
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 12px;
  background: rgba(255, 255, 255, .1);
  color: var(--lp-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lp-modswitch-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lp-modswitch-name {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.lp-modswitch-short {
  font-size: 13px;
  color: rgba(255, 255, 255, .72);
}

.lp-modswitch-chevron {
  display: none;
  color: var(--lp-primary);
}

.lp-modswitch-stage {
  flex: 2 1 520px;
  min-width: 0;
  display: flex;
}

.lp-modswitch-panel {
  display: none;
  flex: 1;
  flex-wrap: wrap;
  align-items: center;
  gap: 32px;
  padding: clamp(22px, 3.4vw, 40px);
  border-radius: 28px;
  background: var(--lp-paper);
  color: var(--lp-ink);
}

.lp-modswitch-panel :focus-visible { outline-color: var(--lp-primary); }

/* The checked radio's button turns white and shows its chevron; its panel is displayed. */
#lp-module-attendance:checked ~ .lp-modswitch-tabs .lp-modswitch-tab-attendance,
#lp-module-client-responses:checked ~ .lp-modswitch-tabs .lp-modswitch-tab-client-responses,
#lp-module-grades:checked ~ .lp-modswitch-tabs .lp-modswitch-tab-grades,
#lp-module-meeting-journal:checked ~ .lp-modswitch-tabs .lp-modswitch-tab-meeting-journal,
#lp-module-payments:checked ~ .lp-modswitch-tabs .lp-modswitch-tab-payments,
#lp-module-dashboard:checked ~ .lp-modswitch-tabs .lp-modswitch-tab-dashboard {
  background: var(--lp-paper);
  border-color: var(--lp-paper);
  color: var(--lp-ink);
  box-shadow: 0 16px 40px -16px rgba(0, 0, 0, .5);
}

#lp-module-attendance:checked ~ .lp-modswitch-tabs .lp-modswitch-tab-attendance .lp-modswitch-icon,
#lp-module-client-responses:checked ~ .lp-modswitch-tabs .lp-modswitch-tab-client-responses .lp-modswitch-icon,
#lp-module-grades:checked ~ .lp-modswitch-tabs .lp-modswitch-tab-grades .lp-modswitch-icon,
#lp-module-meeting-journal:checked ~ .lp-modswitch-tabs .lp-modswitch-tab-meeting-journal .lp-modswitch-icon,
#lp-module-payments:checked ~ .lp-modswitch-tabs .lp-modswitch-tab-payments .lp-modswitch-icon,
#lp-module-dashboard:checked ~ .lp-modswitch-tabs .lp-modswitch-tab-dashboard .lp-modswitch-icon {
  background: var(--lp-tint);
  color: var(--lp-primary);
}

#lp-module-attendance:checked ~ .lp-modswitch-tabs .lp-modswitch-tab-attendance .lp-modswitch-short,
#lp-module-client-responses:checked ~ .lp-modswitch-tabs .lp-modswitch-tab-client-responses .lp-modswitch-short,
#lp-module-grades:checked ~ .lp-modswitch-tabs .lp-modswitch-tab-grades .lp-modswitch-short,
#lp-module-meeting-journal:checked ~ .lp-modswitch-tabs .lp-modswitch-tab-meeting-journal .lp-modswitch-short,
#lp-module-payments:checked ~ .lp-modswitch-tabs .lp-modswitch-tab-payments .lp-modswitch-short,
#lp-module-dashboard:checked ~ .lp-modswitch-tabs .lp-modswitch-tab-dashboard .lp-modswitch-short {
  color: var(--lp-text-muted);
}

#lp-module-attendance:checked ~ .lp-modswitch-tabs .lp-modswitch-tab-attendance .lp-modswitch-chevron,
#lp-module-client-responses:checked ~ .lp-modswitch-tabs .lp-modswitch-tab-client-responses .lp-modswitch-chevron,
#lp-module-grades:checked ~ .lp-modswitch-tabs .lp-modswitch-tab-grades .lp-modswitch-chevron,
#lp-module-meeting-journal:checked ~ .lp-modswitch-tabs .lp-modswitch-tab-meeting-journal .lp-modswitch-chevron,
#lp-module-payments:checked ~ .lp-modswitch-tabs .lp-modswitch-tab-payments .lp-modswitch-chevron,
#lp-module-dashboard:checked ~ .lp-modswitch-tabs .lp-modswitch-tab-dashboard .lp-modswitch-chevron {
  display: flex;
}

#lp-module-attendance:checked ~ .lp-modswitch-stage .lp-modswitch-panel-attendance,
#lp-module-client-responses:checked ~ .lp-modswitch-stage .lp-modswitch-panel-client-responses,
#lp-module-grades:checked ~ .lp-modswitch-stage .lp-modswitch-panel-grades,
#lp-module-meeting-journal:checked ~ .lp-modswitch-stage .lp-modswitch-panel-meeting-journal,
#lp-module-payments:checked ~ .lp-modswitch-stage .lp-modswitch-panel-payments,
#lp-module-dashboard:checked ~ .lp-modswitch-stage .lp-modswitch-panel-dashboard {
  display: flex;
}

/* The radios are visually hidden, so keyboard focus is drawn on the button they label. */
#lp-module-attendance:focus-visible ~ .lp-modswitch-tabs .lp-modswitch-tab-attendance,
#lp-module-client-responses:focus-visible ~ .lp-modswitch-tabs .lp-modswitch-tab-client-responses,
#lp-module-grades:focus-visible ~ .lp-modswitch-tabs .lp-modswitch-tab-grades,
#lp-module-meeting-journal:focus-visible ~ .lp-modswitch-tabs .lp-modswitch-tab-meeting-journal,
#lp-module-payments:focus-visible ~ .lp-modswitch-tabs .lp-modswitch-tab-payments,
#lp-module-dashboard:focus-visible ~ .lp-modswitch-tabs .lp-modswitch-tab-dashboard {
  outline: 2px solid var(--lp-accent);
  outline-offset: 3px;
}

.lp-modswitch-copy {
  flex: 1 1 260px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lp-h3-panel {
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.lp-modswitch-demo {
  flex: 1 1 280px;
  min-width: 0;
  padding: 18px;
  border-radius: 22px;
  background: var(--lp-soft);
}

.lp-modules-note {
  text-align: center;
  font-size: 14px;
  color: rgba(255, 255, 255, .6);
}

/* The modules' illustrations. */
.lp-demo-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lp-demo-card {
  background: var(--lp-paper);
  border: 1px solid var(--lp-line);
  border-radius: 16px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lp-demo-card-tight { gap: 8px; }
.lp-demo-card-loose { gap: 12px; }
.lp-demo-card-chart { gap: 14px; }

.lp-demo-list {
  padding: 4px 14px;
  gap: 0;
}

.lp-demo-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.lp-demo-card-tight .lp-demo-row-head { padding-bottom: 6px; }

.lp-demo-title {
  font-size: 14px;
  font-weight: 600;
}

.lp-demo-small {
  font-size: 12px;
  color: var(--lp-text-muted);
}

.lp-demo-caption {
  font-size: 12px;
  font-weight: 600;
  color: var(--lp-text-muted);
}

.lp-demo-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--lp-surface);
  font-size: 13px;
}

.lp-demo-line-alert { background: var(--lp-danger-surface); }

.lp-demo-line-end {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lp-demo-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--lp-line-soft);
  font-size: 13px;
}

.lp-demo-list-row:last-child { border-bottom: 0; }
.lp-demo-list-row-head { padding: 12px 0; }
.lp-demo-list-row-roomy { padding: 11px 0; }

.lp-demo-person {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lp-demo-person-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lp-grade-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.lp-grade {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 0;
  border-radius: 10px;
  background: var(--lp-surface);
}

.lp-grade-value { font-size: 17px; font-weight: 600; }
.lp-grade-date { font-size: 11px; color: var(--lp-text-muted); }
.lp-grade-latest { background: var(--lp-tint); color: var(--lp-deep); }
.lp-grade-latest .lp-grade-date { color: var(--lp-deep); }

.lp-progress {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lp-progress-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
}

.lp-progress-track {
  height: 8px;
  border-radius: 999px;
  background: var(--lp-line-soft);
}

.lp-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--lp-primary);
}

/* Fixed illustration values from the design, not computed figures. */
.lp-progress-fill-78 { width: 78%; }
.lp-progress-fill-60 { width: 60%; }

.lp-demo-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lp-demo-field-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lp-text-muted);
}

.lp-demo-note {
  font-size: 13px;
  line-height: 1.5;
  color: var(--lp-text-strong);
  background: var(--lp-note-surface);
  border-radius: 10px;
  padding: 8px 10px;
}

.lp-chart {
  height: 130px;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding: 0 4px;
  border-bottom: 1px solid var(--lp-line);
}

.lp-chart-bar {
  flex: 1;
  border-radius: 8px 8px 0 0;
  background: var(--lp-tint-strong);
}

.lp-chart-bar-62 { height: 62%; }
.lp-chart-bar-74 { height: 74%; }
.lp-chart-bar-81 { height: 81%; }
.lp-chart-bar-90 { height: 90%; }
.lp-chart-bar-latest { background: var(--lp-primary); }

.lp-chart-axis {
  display: flex;
  gap: 12px;
  padding: 0 4px;
  font-size: 11px;
  color: var(--lp-text-muted);
}

.lp-chart-axis span {
  flex: 1;
  text-align: center;
}

/* Cztery powody. ------------------------------------------------------------------------------- */

.lp-reason {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 56px;
}

.lp-reason-flipped {
  flex-direction: row-reverse;
  flex-wrap: wrap-reverse;
}

.lp-reason-copy {
  flex: 1 1 420px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.lp-h3-reason {
  font-size: clamp(30px, 3.6vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.lp-reason-stage {
  flex: 1 1 420px;
  min-width: 0;
  display: flex;
  justify-content: center;
  padding: clamp(24px, 4vw, 44px);
  border-radius: 28px;
  background: var(--lp-paper);
  border: 1px solid var(--lp-line);
}

.lp-phone-card {
  width: 100%;
  background: var(--lp-paper);
  border: 1px solid var(--lp-line-soft);
  border-radius: 22px;
  box-shadow: var(--lp-shade-phone);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lp-phone-card-360 { max-width: 360px; }
.lp-phone-card-380 { max-width: 380px; }
.lp-phone-card-400 { max-width: 400px; }
.lp-phone-card-list { padding: 6px 18px; gap: 0; }
.lp-phone-card-form { padding: 22px; }

.lp-phone-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--lp-line-soft);
}

.lp-phone-card-sender {
  font-size: 14px;
  font-weight: 700;
}

.lp-sms-bubble {
  align-self: flex-start;
  max-width: 88%;
  font-size: 14px;
  line-height: 1.5;
  background: var(--lp-surface);
  border-radius: 16px 16px 16px 4px;
  padding: 12px 14px;
}

.lp-confirm-note {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--lp-tint);
  font-size: 13px;
  font-weight: 600;
  color: var(--lp-deep);
}

.lp-ledger-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid var(--lp-line-soft);
}

.lp-ledger-row:last-child { border-bottom: 0; }

.lp-ledger-head { font-size: 13px; }

.lp-ledger-title {
  font-size: 16px;
  font-weight: 700;
}

.lp-booking-person {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--lp-surface);
}

.lp-booking-slot {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 2px solid var(--lp-primary);
}

.lp-booking-slot-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--lp-primary);
}

.lp-booking-slot-value {
  font-size: 15px;
  font-weight: 700;
}

.lp-steps-meter {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.lp-steps-meter span {
  height: 6px;
  border-radius: 999px;
}

.lp-steps-meter-done { background: var(--lp-primary); }
.lp-steps-meter-todo { background: var(--lp-tint-strong); }

.lp-form-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--lp-text-muted);
}

.lp-form-input {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--lp-line-strong);
  font-size: 14px;
}

.lp-form-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 4px;
  font-size: 13px;
}

/* Jak to działa. ------------------------------------------------------------------------------- */

.lp-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 22px;
  align-items: start;
}

.lp-step {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 26px;
  border-radius: 26px;
  background: var(--lp-soft);
}

.lp-step-head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.lp-step-number {
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 16px;
  background: var(--lp-primary);
  color: var(--lp-on-dark);
  font-family: var(--lp-font-display);
  font-size: 24px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lp-step-card {
  background: var(--lp-paper);
  border: 1px solid var(--lp-line);
  border-radius: 18px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--lp-shade-md);
}

.lp-step-card-list { padding: 6px 16px; gap: 0; }

.lp-week-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lp-week-day {
  width: 52px;
  flex: none;
  font-size: 12px;
  color: var(--lp-text-muted);
}

.lp-week-pill {
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--lp-surface);
  font-size: 12px;
  font-weight: 600;
}

.lp-week-row-changed .lp-week-day { font-weight: 700; color: var(--lp-primary); }
.lp-week-row-changed .lp-week-pill { background: var(--lp-tint); color: var(--lp-deep); font-weight: 700; }

.lp-dialog-body {
  font-size: 13px;
  line-height: 1.5;
  color: var(--lp-text-body);
}

.lp-dialog-strong {
  font-weight: 700;
  color: var(--lp-ink);
}

.lp-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 2px;
}

.lp-dialog-actions .lp-mini-btn { padding: 8px 14px; }

.lp-step-footnote {
  padding: 10px 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--lp-text-muted);
}

/* Porównanie. ---------------------------------------------------------------------------------- */

.lp-compare-scroll {
  overflow-x: auto;
  background: var(--lp-paper);
  border: 1px solid var(--lp-line);
  border-radius: 24px;
  box-shadow: 0 20px 50px -30px rgba(16, 24, 20, .25);
}

.lp-compare {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 15px;
}

.lp-compare-corner {
  padding: 20px 24px;
  text-align: left;
  border-bottom: 1px solid var(--lp-line);
}

.lp-compare-col {
  padding: 20px 16px;
  font-weight: 600;
  color: var(--lp-text-body);
  border-bottom: 1px solid var(--lp-line);
}

.lp-compare-col-ours {
  font-weight: 700;
  color: var(--lp-on-dark);
  background: var(--lp-primary);
  border-bottom: 0;
}

.lp-compare-label {
  padding: 16px 24px;
  text-align: left;
  font-weight: 600;
  border-bottom: 1px solid var(--lp-line-soft);
}

.lp-compare-cell {
  text-align: center;
  font-size: 14px;
  color: var(--lp-text-dash);
  border-bottom: 1px solid var(--lp-line-soft);
}

.lp-compare-cell-ours { background: var(--lp-tint); }
.lp-compare-cell-ours .lp-check { margin-top: 0; vertical-align: middle; }

/* Cennik (the landing's section, and the shared plan card /cennik reuses). --------------------- */

.lp-plans {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 20px;
  align-items: stretch;
}

.lp-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 34px;
  border-radius: 28px;
  background: var(--lp-paper);
  border: 1px solid var(--lp-line);
}

.lp-plan-featured {
  border: 2px solid var(--lp-primary);
  box-shadow: 0 30px 70px -30px var(--lp-shadow);
}

.lp-plan-badge {
  position: absolute;
  top: -14px;
  left: 34px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--lp-primary);
  color: var(--lp-on-dark);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
}

.lp-plan-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lp-plan-subtitle {
  font-size: 15px;
  color: var(--lp-text-body);
}

.lp-plan-price-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lp-plan-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

.lp-plan-amount {
  font-family: var(--lp-font-display);
  font-size: 56px;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.lp-plan-period {
  font-size: 15px;
  color: var(--lp-text-muted);
}

.lp-plan-note {
  font-size: 14px;
  font-weight: 600;
  color: var(--lp-primary);
}

.lp-plan-cta {
  margin-top: auto;
  width: 100%;
  min-height: 52px;
  font-size: 16px;
}

.lp-plan-cta.lp-btn-primary { box-shadow: 0 12px 26px -8px var(--lp-shadow); }

/* FAQ. ----------------------------------------------------------------------------------------- */

.lp-faq {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lp-faq-item {
  overflow: hidden;
  border-radius: 18px;
  background: var(--lp-paper);
  border: 1px solid var(--lp-line);
}

.lp-faq-question {
  min-height: 64px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 17px;
  font-weight: 600;
  color: var(--lp-ink);
  cursor: pointer;
  list-style: none;
  border-radius: 18px;
}

.lp-faq-question::-webkit-details-marker { display: none; }
.lp-faq-question::marker { content: ""; }
.lp-faq-question:focus-visible { outline-offset: -3px; }

.lp-faq-toggle {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 999px;
  background: var(--lp-tint);
  color: var(--lp-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lp-faq-plus { display: flex; }
.lp-faq-minus { display: none; }

.lp-faq-item[open] .lp-faq-toggle {
  background: var(--lp-primary);
  color: var(--lp-on-dark);
}

.lp-faq-item[open] .lp-faq-plus { display: none; }
.lp-faq-item[open] .lp-faq-minus { display: flex; }

.lp-faq-answer {
  padding: 0 22px 22px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--lp-text-body);
}

/* The closing trial card. ---------------------------------------------------------------------- */

.lp-cta-section .lp-container { padding-top: 0; }

.lp-cta {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  border-radius: 32px;
  background: var(--lp-cta-surface);
  color: var(--lp-ink);
}

.lp-cta-copy {
  flex: 1 1 440px;
  min-width: 0;
  padding: clamp(36px, 6vw, 72px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
}

.lp-cta-title {
  font-size: clamp(34px, 4.4vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.lp-cta-text {
  max-width: 460px;
  font-size: 19px;
  line-height: 1.55;
  color: var(--lp-text-nav);
}

.lp-cta-button { margin-top: 6px; }

.lp-cta-art {
  position: relative;
  flex: 1 1 380px;
  min-width: 0;
  min-height: 420px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 48px 24px 0;
}

.lp-cta-phone {
  width: 100%;
  max-width: 330px;
  padding: 12px 12px 0;
  border: 1px solid var(--lp-line-phone);
  border-bottom: 0;
  border-radius: 36px 36px 0 0;
  background: var(--lp-paper);
  box-shadow: var(--lp-shade-phone);
}

.lp-cta-screen {
  padding: 16px 14px 18px;
  border-radius: 26px 26px 0 0;
  background: var(--lp-paper);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lp-cta-screen-head { padding-bottom: 6px; }

.lp-cta-day {
  font-size: 15px;
  font-weight: 600;
}

.lp-cta-slot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--lp-surface);
}

.lp-cta-slot-first { background: var(--lp-tint); }

.lp-cta-slot-time {
  width: 36px;
  flex: none;
  font-size: 12px;
  color: var(--lp-text-body);
}

.lp-cta-slot-name {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
}

.lp-cta-slot-status {
  font-size: 11px;
  font-weight: 700;
  color: var(--lp-deep);
}

.lp-cta-float {
  position: absolute;
  left: clamp(8px, 3vw, 32px);
  top: clamp(56px, 8vw, 96px);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--lp-paper);
  border: 1px solid var(--lp-line-phone);
  box-shadow: 0 20px 40px -18px rgba(16, 24, 20, .35);
}

.lp-cta-float-icon {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--lp-accent);
  color: var(--lp-accent-ink);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lp-cta-float-title {
  font-size: 13px;
  font-weight: 700;
}

/* Footer. -------------------------------------------------------------------------------------- */

.lp-footer {
  background: var(--lp-footer-surface);
  color: var(--lp-on-dark);
}

.lp-footer :focus-visible { outline-color: var(--lp-accent); }

.lp-footer-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(56px, 7vw, 88px) 24px 36px;
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.lp-footer-main {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 56px 48px;
}

.lp-footer-brand {
  flex: 1 1 280px;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.lp-footer-tagline {
  font-size: 16px;
  line-height: 1.6;
  color: var(--lp-on-dark-faint);
}

.lp-footer-cta {
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  font-size: 15px;
}

.lp-footer-columns {
  flex: 2 1 520px;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 40px 32px;
}

.lp-footer-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  font-size: 16px;
}

.lp-footer-heading {
  font-weight: 600;
  color: var(--lp-on-dark);
}

.lp-footer-link {
  color: var(--lp-on-dark-faint);
  border-radius: 4px;
}

.lp-footer-link:hover { color: var(--lp-on-dark); }

.lp-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 24px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 14px;
  color: rgba(255, 255, 255, .55);
}

/* Cookie banner. Rendered only while no choice is stored; hidden with [hidden]. ---------------- */

.lp-cookie {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 380px;
  max-width: calc(100vw - 48px);
  padding: 22px;
  border-radius: 22px;
  background: var(--lp-paper);
  border: 1px solid var(--lp-line);
  box-shadow: 0 24px 50px -14px rgba(16, 24, 20, .32);
}

.lp-cookie-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--lp-ink);
}

.lp-cookie-text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--lp-text-body);
}

.lp-cookie-link {
  color: var(--lp-deep);
  font-weight: 700;
}

.lp-cookie-link:hover { text-decoration: underline; }

.lp-cookie-actions {
  display: flex;
  gap: 10px;
}

.lp-cookie-btn {
  flex: 1;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.lp-cookie-btn-necessary {
  background: var(--lp-surface);
  color: var(--lp-ink);
  border: 1px solid var(--lp-line);
}

.lp-cookie-btn-accept {
  background: var(--lp-primary);
  color: var(--lp-on-dark);
  border: 1px solid var(--lp-primary);
}

/* /cennik. ------------------------------------------------------------------------------------- */

.lp-pricing-header {
  background: radial-gradient(900px 480px at 50% 0%, var(--lp-glow) 0%, rgba(255, 255, 255, 0) 70%), var(--lp-paper);
}

.lp-pricing-header-inner { padding: 72px 24px 8px; }

.lp-pricing-title {
  font-size: clamp(38px, 5vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.035em;
}

.lp-pricing-card-section .lp-container { padding-top: 40px; }

.lp-pricing-card {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}

.lp-price-pill {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--lp-tint);
  color: var(--lp-deep);
  /* An h2 for the outline, a pill to the eye: text type, not the heading face. */
  font-family: var(--lp-font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: normal;
  white-space: nowrap;
}

.lp-pricing-extra {
  font-size: 14px;
  color: var(--lp-text-body);
}

.lp-pricing-trial-note { text-align: center; }

.lp-modules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 20px;
}

.lp-module {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 26px;
  border-radius: 24px;
  background: var(--lp-paper);
  border: 1px solid var(--lp-line);
  box-shadow: var(--lp-shade-sm);
}

.lp-module-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--lp-tint);
  color: var(--lp-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lp-module-price { margin-top: auto; }

.lp-modules-grid-note {
  text-align: center;
  font-size: 14px;
  color: var(--lp-text-muted);
}

/* Account pages (layouts/auth): sign-in, sign-up, password reset. ----------------------------- */

/* The owner's other product lays these out as a split screen: the form column on the left, a
   visual panel filling the rest of the viewport on the right. Below 1024px the panel is hidden
   and the form takes the full width. */
.lp-auth {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
}

.lp-auth-column {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--lp-auth-surface);
}

.lp-auth-main {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 16px 24px;
}

.lp-auth-block {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.lp-auth-logo-link {
  align-self: flex-start;
  display: inline-flex;
  border-radius: 4px;
}

.lp-auth-logo { height: 32px; }

.lp-auth-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.lp-root .lp-auth-title {
  font-size: clamp(28px, 6vw, 34px);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--lp-ink);
}

.lp-auth-lead {
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--lp-text-body);
}

.lp-auth-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.lp-auth-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lp-auth-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--lp-text-strong);
}

.lp-auth-required {
  margin-left: 3px;
  color: var(--lp-danger);
}

/* 16px text so iOS Safari does not zoom on focus; the border holds 3:1 against the panel. */
.lp-auth-input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--lp-line-input);
  border-radius: 12px;
  background: var(--lp-paper);
  color: var(--lp-ink);
  font: inherit;
  font-size: 16px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.lp-root .lp-auth-input:focus-visible {
  outline: none;
  border-color: var(--lp-primary);
  box-shadow: 0 0 0 3px var(--lp-focus-halo);
}

.lp-auth-input[aria-invalid="true"] { border-color: var(--lp-danger); }

.lp-root .lp-auth-input[aria-invalid="true"]:focus-visible {
  border-color: var(--lp-danger);
  box-shadow: 0 0 0 3px var(--lp-danger-surface);
}

.lp-auth-password { position: relative; }

.lp-auth-input-password { padding-right: 48px; }

/* Shipped `hidden` until password_visibility_controller.js connects. */
.lp-auth-toggle {
  position: absolute;
  top: 0;
  right: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--lp-text-muted);
  cursor: pointer;
}

.lp-auth-toggle[hidden] { display: none; }
.lp-auth-toggle:hover { color: var(--lp-ink); }

.lp-auth-toggle-icon {
  width: 18px;
  height: 18px;
}

.lp-root .lp-auth-toggle-hide { display: none; }
.lp-root .lp-auth-toggle[aria-pressed="true"] .lp-auth-toggle-show { display: none; }
.lp-root .lp-auth-toggle[aria-pressed="true"] .lp-auth-toggle-hide { display: inline-block; }

.lp-auth-hint {
  font-size: 13px;
  line-height: 18px;
  color: var(--lp-text-muted);
}

.lp-auth-error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 13px;
  line-height: 18px;
  color: var(--lp-danger);
}

.lp-auth-error-icon {
  width: 14px;
  height: 14px;
  margin-top: 2px;
}

/* The strength hint under a new password (auth/_password_strength). The meter ships `hidden`
   until password_strength_controller.js connects; the controller only toggles classes: is-met on
   a checklist item, is-level-0 to is-level-6 on the bar, is-weak, is-fair or is-strong on the
   meter. */
.lp-auth-strength {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.lp-auth-strength-meter {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lp-auth-strength-meter[hidden] { display: none; }

.lp-auth-strength-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  line-height: 18px;
  color: var(--lp-text-muted);
}

.lp-auth-strength-label { font-weight: 600; }

.lp-auth-strength-track {
  height: 6px;
  border-radius: 999px;
  background: var(--lp-line);
  overflow: hidden;
}

.lp-auth-strength-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--lp-line-input);
  transition: width .3s ease, background-color .3s ease;
}

.lp-auth-strength-fill.is-level-1 { width: 16.66%; }
.lp-auth-strength-fill.is-level-2 { width: 33.33%; }
.lp-auth-strength-fill.is-level-3 { width: 50%; }
.lp-auth-strength-fill.is-level-4 { width: 66.66%; }
.lp-auth-strength-fill.is-level-5 { width: 83.33%; }
.lp-auth-strength-fill.is-level-6 { width: 100%; }

.lp-auth-strength-meter.is-weak .lp-auth-strength-fill { background: var(--lp-danger); }
.lp-auth-strength-meter.is-weak .lp-auth-strength-label { color: var(--lp-danger); }
.lp-auth-strength-meter.is-fair .lp-auth-strength-fill { background: var(--lp-strength-fair); }
.lp-auth-strength-meter.is-fair .lp-auth-strength-label { color: var(--lp-strength-fair); }
.lp-auth-strength-meter.is-strong .lp-auth-strength-fill { background: var(--lp-primary); }
.lp-auth-strength-meter.is-strong .lp-auth-strength-label { color: var(--lp-primary); }

.lp-auth-strength-rules {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-auth-strength-rule {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  line-height: 18px;
  color: var(--lp-text-muted);
  transition: color .15s ease;
}

.lp-auth-strength-rule[data-rule="special"] { grid-column: 1 / -1; }

.lp-auth-strength-rule.is-met { color: var(--lp-primary); }

.lp-auth-strength-icon {
  flex: none;
  width: 12px;
  height: 12px;
}

/* One icon and one hidden state text per item, for whichever state it is in. */
.lp-root .lp-auth-strength-icon-met,
.lp-root .lp-auth-strength-state-met { display: none; }
.lp-root .lp-auth-strength-rule.is-met .lp-auth-strength-icon-unmet,
.lp-root .lp-auth-strength-rule.is-met .lp-auth-strength-state-unmet { display: none; }
.lp-root .lp-auth-strength-rule.is-met .lp-auth-strength-icon-met { display: inline-block; }
.lp-root .lp-auth-strength-rule.is-met .lp-auth-strength-state-met { display: inline; }

/* "Nie pamiętasz hasła?" under the password, at the row's end. */
.lp-auth-row {
  display: flex;
  justify-content: flex-end;
  margin-top: -8px;
}

.lp-auth-row .lp-auth-link {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
}

.lp-auth-link {
  border-radius: 4px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--lp-primary);
  text-underline-offset: 3px;
}

.lp-root .lp-auth-link:hover {
  color: var(--lp-deep);
  text-decoration: underline;
  opacity: 1;
}

/* An input or a button; either may wrap its label at text zoom. */
.lp-auth-submit {
  width: 100%;
  min-height: 52px;
  margin-top: 4px;
  padding: 10px 24px;
  font-size: 16px;
  line-height: 1.3;
  text-align: center;
  white-space: normal;
  transition: background-color .15s ease;
}

.lp-auth-submit.lp-btn-primary { border: 0; }
.lp-auth-submit.lp-btn-primary:hover { background: var(--lp-deep); opacity: 1; }

.lp-auth-alt {
  text-align: center;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--lp-text-body);
}

.lp-auth-note {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--lp-ink);
}

.lp-auth-note-muted { color: var(--lp-text-muted); }

.lp-auth-note-center {
  text-align: center;
  font-size: 13.5px;
}

.lp-auth-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 24px;
  padding: 0 16px 24px;
}

.lp-auth-footer-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border-radius: 4px;
  font-size: 13.5px;
  color: var(--lp-text-muted);
  text-underline-offset: 3px;
}

.lp-root .lp-auth-footer-link:hover {
  color: var(--lp-ink);
  text-decoration: underline;
  opacity: 1;
}

/* Sign-up's "Akceptuję regulamin" (owner request 2026-10-24). The whole row is the target, at
   least 44px high; the native box keeps its own focus ring and takes the brand colour. */
.lp-auth-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  padding-top: 2px;
}

.lp-auth-checkbox {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--lp-primary);
  cursor: pointer;
}

.lp-auth-check-label {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--lp-text-body);
  cursor: pointer;
}

/* Signup profile: Gabinet vs Szkoła (2026-10-30). Two large radio cards, 44px+ tap. */
.lp-auth-profiles {
  gap: 10px;
}

.lp-auth-profile-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lp-auth-profile {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  padding: 14px 16px;
  border: 1px solid var(--lp-line);
  border-radius: 16px;
  background: var(--lp-surface, #fff);
  cursor: pointer;
}

.lp-auth-profile:has(.lp-auth-radio:checked) {
  border-color: var(--lp-primary);
  box-shadow: 0 0 0 1px var(--lp-primary);
}

.lp-auth-radio {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--lp-primary);
  cursor: pointer;
}

.lp-auth-profile-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.lp-auth-profile-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--lp-ink);
}

.lp-auth-profile-body {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--lp-text-body);
}

.lp-auth-link-inline {
  font-size: inherit;
  text-decoration: underline;
}

/* The terms of service (pages/terms): a reading column under a header like the pricing page's.
   Paragraphs are a real ordered list; the browser numbers them. */
.lp-legal-header {
  background: radial-gradient(900px 480px at 50% 0%, var(--lp-glow) 0%, rgba(255, 255, 255, 0) 70%), var(--lp-paper);
}

.lp-legal-header-inner { padding: 72px 24px 8px; }

.lp-legal-title {
  font-size: clamp(38px, 5vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.035em;
}

.lp-legal {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 24px clamp(72px, 9vw, 112px);
  font-size: 16px;
  line-height: 1.65;
  color: var(--lp-text-body);
}

.lp-legal-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lp-root .lp-legal-h2 {
  font-size: clamp(20px, 2.4vw, 24px);
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--lp-ink);
  text-wrap: balance;
}

.lp-root .lp-legal-points {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-left: 28px;
  list-style: decimal;
}

.lp-legal-points > li { padding-left: 4px; }
.lp-legal-points > li::marker { font-weight: 600; color: var(--lp-ink); }

.lp-root .lp-legal-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  padding-left: 22px;
  list-style: disc;
}

.lp-legal-terms {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
}

.lp-legal-terms dt {
  font-weight: 600;
  color: var(--lp-ink);
}

.lp-legal-terms dd { margin: 0; }

.lp-legal-link {
  border-radius: 4px;
  font-weight: 600;
  color: var(--lp-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lp-root .lp-legal-link:hover {
  color: var(--lp-deep);
  opacity: 1;
}

/* The visual panel: the hero's soft emerald and its product mockup. Decorative (aria-hidden). It
   sticks at the viewport's height while a long form (sign-up) scrolls past it. */
.lp-auth-visual { display: none; }

@media (min-width: 64rem) {
  .lp-auth-column {
    flex: 0 0 40%;
    min-width: 460px;
  }

  .lp-auth-main { padding: 56px clamp(40px, 5vw, 88px) 32px; }

  .lp-auth-visual {
    position: sticky;
    top: 0;
    flex: 1 1 60%;
    min-width: 0;
    height: 100vh;
    height: 100dvh;
    display: flex;
    overflow: hidden;
    background:
      radial-gradient(70% 55% at 30% 15%, var(--lp-paper) 0%, rgba(255, 255, 255, 0) 70%),
      radial-gradient(60% 50% at 85% 90%, var(--lp-tint-strong) 0%, rgba(183, 232, 210, 0) 70%),
      var(--lp-glow);
  }

  .lp-auth-visual-inner {
    width: 100%;
    max-width: 600px;
    margin: auto;
    padding: 48px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  /* One line, no period (owner): smaller and unbreakable rather than wrapped. */
  .lp-auth-visual-motto {
    white-space: nowrap;
    font-family: var(--lp-font-display);
    font-size: clamp(26px, 2.6vw, 40px);
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--lp-ink);
  }

  .lp-auth-visual-lead {
    max-width: 440px;
    font-size: 17px;
    line-height: 1.5;
    color: var(--lp-text-body);
  }

  .lp-auth-visual .lp-hero-mock {
    max-width: 540px;
    margin-top: 24px;
  }
}

/* Below 768px. --------------------------------------------------------------------------------- */

@media (max-width: 47.99rem) {
  .lp-nav-bar { padding: 8px 8px 8px 18px; }

  .lp-nav-links,
  .lp-nav-actions { display: none; }

  .lp-nav-compact { display: flex; }

  /* Moduły on a phone: the six buttons stacked put the chosen module's card several screens below
     them. Instead they become one swipeable strip of compact pills (icon + name, no short line, no
     chevron) running edge to edge, with the card straight underneath. Still the radios — only the
     layout changes; the next pill peeking at the edge says there is more to swipe. */
  .lp-modswitch { gap: 16px; }

  .lp-modswitch-tabs {
    flex: 1 1 100%;
    flex-direction: row;
    gap: 8px;
    margin: 0 -24px;
    padding: 2px 24px 6px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 24px;
    scrollbar-width: none;
  }

  .lp-modswitch-tabs::-webkit-scrollbar { display: none; }

  .lp-modswitch-tab {
    width: auto;
    flex: none;
    min-height: 48px;
    padding: 6px 16px 6px 6px;
    gap: 10px;
    border-radius: 999px;
    scroll-snap-align: start;
  }

  .lp-modswitch-icon {
    width: 36px;
    height: 36px;
    border-radius: 999px;
  }

  .lp-modswitch-name {
    font-size: 15px;
    white-space: nowrap;
  }

  /* !important: the checked tab shows its short line and chevron through #id:checked rules above,
     which no class selector here can outweigh. */
  .lp-modswitch-tabs .lp-modswitch-short,
  .lp-modswitch-tabs .lp-modswitch-chevron { display: none !important; }

  .lp-modswitch-stage { flex: 1 1 100%; }

  .lp-modswitch-panel { gap: 24px; }

  /* 92px would not fit a phone's result card; 11vw keeps "176 000 zł" inside it at 320px. */
  .lp-calc-total { font-size: clamp(36px, 11vw, 56px); }

  .lp-cookie {
    left: 14px;
    right: 14px;
    bottom: 14px;
    width: auto;
    max-width: none;
    padding: 18px;
  }
}