/* Small custom layer on top of the real GeneratePress styles (blog/podcast/category lists). */

/* Remove the 32px offset GeneratePress reserved for the (now-removed) WP admin bar. */
#sticky-navigation,
#mobile-header {
  margin-top: 0 !important;
}

/* Embedded Kit (ConvertKit) exit-intent form — our global button/input theme
   (Livvic font, 8px radius, themed hover) was leaking into it. Scope it back so
   the form renders the way it's designed in Kit. (`body` prefix raises specificity
   above the GeneratePress button rule so these win.) */
.formkit-modal .formkit-form button.formkit-submit {
  font-family: inherit !important;
  font-size: inherit !important;
  letter-spacing: normal !important;
  padding: 12px 24px !important;
  margin-bottom: 0 !important;
  border-radius: 10px !important; /* matches Kit's own rounding */
}
.formkit-modal .formkit-form button.formkit-submit > span { padding: 0 !important; }
.formkit-modal .formkit-form button.formkit-submit:hover,
.formkit-modal .formkit-form button.formkit-submit:focus {
  color: #ffffff !important;
  background-color: #016a58 !important; /* slightly darker than Kit's #007a66 */
}
/* Kit's form ships a 2px dashed border + 50px radius (the old style we dropped)
   — swap it for our clean solid card look. */
.formkit-modal .formkit-form {
  border: 1px solid #d6ede4 !important;
  border-radius: 20px !important;
}
.formkit-modal .formkit-form .formkit-input {
  font-family: inherit !important;
  font-size: inherit !important;
  border-radius: 8px !important; /* our global forces 5px on inputs */
}
/* Close (×) button: strip the grey box our theme gave it — plain icon, subtle hover */
.formkit-modal .formkit-close {
  background: transparent !important;
  border: 0 !important;
  border-radius: 50% !important;
  padding: 0 !important;
  box-shadow: none !important;
  font-family: inherit !important;
  color: inherit !important;
}
.formkit-modal .formkit-close:hover,
.formkit-modal .formkit-close:focus {
  background: rgba(0, 57, 48, 0.08) !important;
  color: inherit !important;
}
/* Higher specificity so the circular shape beats our global button radius */
.seva-modal.formkit-modal .formkit-close { border-radius: 50% !important; }

/* Dropdown submenu: the nav is right-aligned, so the "Usługi" item sits at the
   right edge and its submenu (opened with left:auto) spilled off-screen to the
   right. Right-align the open submenu so it opens inward, inside the viewport. */
.main-navigation:not(.toggled) ul li.sfHover > ul,
.main-navigation:not(.toggled) ul li:hover > ul {
  left: auto;
  right: 0;
}

/* ---- Homepage polish (scoped to the Automatyzacje landing page) ---- */
/* #1 Even vertical rhythm: normalise the wildly-varying section padding (was 0–96px). */
body.home .home-hero-inner,   /* hero */
body.home .home-problems-inner,   /* problems */
body.home .home-services-inner,   /* services */
body.home .home-process,   /* process */
body.home .home-for-whom,   /* dla kogo */
body.home .home-contact-grid,   /* contact */
body.home .home-testimonials-inner {  /* testimonials */
  padding-top: 72px;
  padding-bottom: 72px;
}

/* #2 Problem columns as subtle cards with a colour-matched top accent. */
body.home .home-problem-card--tools,
body.home .home-problem-card--errors,
body.home .home-problem-card--limits {
  background: #ffffff;
  border: 1px solid #e6efec;
  border-radius: 12px;
  padding: 28px 24px !important;
  box-shadow: 0 6px 20px rgba(16, 22, 21, 0.05);
  height: 100%;
}
body.home .home-problem-card--tools { border-top: 3px solid #1eb89f; } /* narzędzia – teal */
body.home .home-problem-card--errors { border-top: 3px solid #e87ba0; } /* błędy – pink */
body.home .home-problem-card--limits { border-top: 3px solid #e0c04a; } /* ograniczenia – gold */

/* #3 Unify the over-rounded (50px) dashed panels to the clean card style, keeping colours:
   yellow highlight, "Dla kogo" boxes, and the three testimonials. */
body.home .home-highlight-box,   /* yellow highlight */
body.home .home-for-whom-yes,   /* dla kogo – yes (mint) */
body.home .home-for-whom-no,   /* dla kogo – no (pink) */
body.home .home-testimonial {   /* testimonials */
  border-radius: 12px !important;
  border-width: 1px !important;
  border-style: solid !important;
  box-shadow: 0 6px 20px rgba(16, 22, 21, 0.05);
}
body.home .home-highlight-box { border-color: #efe2a6 !important; }
body.home .home-for-whom-yes { border-color: #cfeee6 !important; }
body.home .home-for-whom-no { border-color: #f4dbe3 !important; }
body.home .home-testimonial { border-color: #e6efec !important; }

/* #4 Service rows: give them the same soft-card treatment + rounded images. */
body.home .home-service-row--funnel {
  border-radius: 12px !important;
  box-shadow: 0 6px 20px rgba(16, 22, 21, 0.05);
  border: 1px solid #e6efec;
}
body.home .home-service-row--funnel img {
  border-radius: 8px;
}

/* #5 FAQ: clean white cards instead of dashed pills. */
body.home .faq-item {
  background: #ffffff !important;
  border: 1px solid #e6efec !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 14px rgba(16, 22, 21, 0.04);
  margin-bottom: 14px;
}

.content-list {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  display: grid;
  gap: 2rem;
}
.content-list .entry-title {
  font-family: 'Livvic', sans-serif;
  font-weight: 700;
  font-size: 1.3rem;
  text-decoration: none;
  display: inline-block;
}
.content-list p {
  margin: 0.35rem 0 0;
}
.entry-meta {
  color: #5c6360;
  font-size: 0.95rem;
}
.prose .entry-meta a {
  text-decoration: none;
}
/* podcast embed */
.prose iframe {
  max-width: 100%;
  border-radius: 12px;
}

/* =====================================================================
   Homepage mobile polish (scoped to the Automatyzacje landing page)
   ===================================================================== */

/* --- Underline highlight: hug the text on wrapped lines ---
   The yellow/green marker is a background gradient on an inline <span>.
   By default (box-decoration-break: slice) the highlight on a wrapped line
   stretches to the container edge (e.g. "niestandardowych" ran full-width).
   Clone makes each line fragment paint only under its own text. */
.underline-yellow span,
.underline-green span,
.underline-pink span {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* --- Step headings: keep the number in a gutter without a flex container ---
   `.step-heading` was display:flex, which blockifies the highlighted text
   span to a full-width block, so its underline gradient painted across the
   whole (wrapped) line ("Dostajesz prostą dokumentację"). Use a block +
   absolutely-positioned number instead: the text stays inline and the
   highlight hugs each line, while the number still sits in a left gutter. */
.home .step-heading {
  display: block;
  position: relative;
  padding-left: 3.3rem;
}
.home .step-heading .step-num {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
}

@media (max-width: 767px) {
  /* #1 Contact section overflowed the viewport: the 41px title
     ("...zautomatyzować?") set a min-content wider than the screen, forcing
     the grid track past the right edge. Shrink the title, let it wrap, and
     allow the grid track to collapse below its content width. */
  body.home .home-contact-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  body.home .home-contact-title {
    font-size: 28px;
    overflow-wrap: break-word;
    hyphens: auto;
  }

  /* #3 Service titles were display:flex on mobile, which blockified the
     underlined text span and stretched its highlight full-width on the
     wrapped line ("...niestandardowych"). No icon here, so inline-block is
     enough and lets the highlight hug the text. */
  body.home .home-service-title {
    display: inline-block;
  }

  /* Hero: drop the bottom padding on mobile so the portrait sits flush with
     the bottom of the section (ends where the mint background ends). */
  body.home .home-hero-inner {
    padding-bottom: 0;
  }

  /* #2 Testimonial highlight ("Ela zupełnie odmieniła..."): move the heart
     from hanging off the bottom to peeking over the top-right corner of the
     tile. (Offsets are relative to .home-highlight-content, which sits 35px
     inside the box, so negative values reach past the box edge.) */
  body.home .home-highlight-mark {
    top: -46px;
    right: -30px;
    bottom: auto;
    left: auto;
  }

  /* #5 Tighten the oversized vertical rhythm on mobile.
     Section wrappers shipped 64px top/bottom padding and the highlight block
     had 96px margins, stacking into ~130–165px dead zones between sections. */
  body.home .home-problems-inner,
  body.home .home-services-inner,
  body.home .home-highlight-inner,
  body.home .home-process,
  body.home .home-for-whom,
  body.home .home-contact-inner,
  body.home .home-testimonials-inner {
    padding-top: 44px;
    padding-bottom: 44px;
  }
  body.home .home-highlight {
    margin-top: 32px;
    margin-bottom: 32px;
  }
}

/* Section "band" background: the pale grey-green (--elements-pale-light /
   #eff4f3) read muddy next to the fresh mint body and teal accents. Swap the
   three banded sections to a soft, clean on-brand mint. (Only the section
   backgrounds — the variable is still used for subtle card borders.) */
body.home .home-services,
body.home .home-testimonials,
body.home .home-contact-form {
  background-color: #e8f7f1;
}

/* #4 Centre the "Jak wygląda współpraca" CTA (it was left-aligned because
   the button is inline-flex inside a left-aligned block). */
body.home .home-process-cta {
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

/* Small breathing room when the hero CTA jumps to the problems section. */
body.home #problemy {
  scroll-margin-top: 24px;
}

/* --- CTA icons follow the button text colour on hover ---
   The .primary buttons turn their text green on hover (--text-green-medium)
   but the icons kept their hard-coded white. Drive the icons from the text
   colour so they turn green too. */

/* Process & testimonials arrows are vector outlines with stroke="#ffffff";
   route stroke through currentColor (white normally, green on hover). */
body.home .home-process-cta .icon svg,
body.home .home-testimonials-cta .icon svg,
body.home .home-faq-cta-btn .icon svg {
  color: inherit;
  fill: none;
}
body.home .home-process-cta .icon svg path,
body.home .home-testimonials-cta .icon svg path,
body.home .home-faq-cta-btn .icon svg path {
  stroke: currentColor;
}

/* The hero arrow's masked fill was converted to a <rect fill="currentColor">
   in the markup, so it inherits the button text colour automatically — white
   normally, green on hover. No extra rule needed here. */

/* =====================================================================
   "About" page (o-mnie) — mirrors the homepage design language: Livvic/
   Figtree type, soft solid-border cards, green as an ACCENT on a clean
   white page (no dashed borders, no coloured section bands).
   ===================================================================== */
.about-page {
  --about-card-shadow: 0 6px 20px rgba(16, 22, 21, 0.05);
  /* Consistent content widths by role: text column, callout card, wide grid. */
  --w-text: 680px;
  --w-block: 760px;
  --w-grid: 920px;
  background: #ffffff;
  color: var(--text-green-dark);
  overflow-x: clip;
}
.about-page :where(h1, h2, h3) {
  font-family: 'Livvic', sans-serif;
  color: #101615;
  line-height: 1.15;
}

/* White sections; whitespace (not colour) separates them */
.about-band { width: 100%; }
/* The intro section right after the hero keeps a soft mint so the hero's
   gradient flows smoothly into it before the page turns white. */
.about-band--intro { background: #eaf7f2; }
.about-inner {
  max-width: 960px;
  margin-inline: auto;
  padding: 64px 20px;
}

/* Eyebrow pill */
.about-eyebrow {
  display: inline-block;
  background: #e3fff9;
  color: var(--accent-s);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 700;
  border: 1px solid rgba(134, 209, 195, 0.35);
  border-radius: 8px;
  padding: 7px 12px;
  margin-bottom: 18px;
}

/* Hero — centred, portrait used as a prominent avatar */
.about-hero {
  background-image: linear-gradient(180deg, #ffffff 0%, #eaf7f2 100%);
  text-align: center;
}
.about-hero-inner {
  max-width: var(--w-block);
  margin-inline: auto;
  padding: 56px 20px 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.about-avatar {
  width: clamp(168px, 46vw, 208px);
  aspect-ratio: 1;
  border-radius: 50%;
  margin-bottom: 26px;
  padding: 6px;
  background: #ffffff;
  box-shadow: 0 16px 38px rgba(0, 57, 48, 0.16);
  outline: 2px solid #d7f0e8;
  outline-offset: -2px;
}
.about-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.about-hero h1 {
  font-size: clamp(32px, 6vw, 50px);
  margin: 0 0 14px;
}
.about-lead {
  font-size: clamp(17px, 2.2vw, 20px);
  color: #101615;
  margin: 0 auto;
  max-width: 40ch;
}

/* Readable prose column */
.about-prose { max-width: var(--w-text); margin-inline: auto; }
.about-prose p { font-size: 17px; line-height: 1.7; margin: 0 0 1.1em; }
.about-prose a { color: var(--accent-green); font-weight: 700; }

.about-h2 {
  font-size: clamp(26px, 4vw, 38px);
  text-align: center;
  max-width: var(--w-text);
  margin: 0 auto 12px;
}
.about-sub {
  text-align: center;
  max-width: var(--w-text);
  margin: 0 auto 40px;
  font-size: 17px;
  line-height: 1.6;
}

/* Pull-quote — clean solid-border card (no dashed) */
.about-quote {
  max-width: var(--w-block);
  margin: 0 auto;
  background: #fffae6;
  color: var(--text-yellow-dark);
  border: 1px solid #efe3a8;
  border-radius: 20px;
  padding: 40px 44px;
  text-align: center;
  box-shadow: var(--about-card-shadow);
}
.about-quote p {
  font-family: 'Livvic', sans-serif;
  font-weight: 700;
  font-size: clamp(19px, 3vw, 26px);
  line-height: 1.3;
  margin: 0;
}

/* Areas — mint chips with a green check (stand out on the white section) */
.about-areas {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: var(--w-grid);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.about-areas li {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #eef9f5;
  border: 1px solid #d6ede4;
  border-radius: 14px;
  padding: 15px 18px;
  font-size: 16px;
  font-weight: 600;
  color: #101615;
}
.about-check {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--accent-green);
  color: #ffffff;
}
.about-check svg { width: 16px; height: 16px; fill: currentColor; }

/* Tools image card (the portfolio link sits below it, as its own line) */
.about-tools {
  max-width: var(--w-block);
  margin: 44px auto 0;
  background: #ffffff;
  border: 1px solid #e6efec;
  border-radius: 20px;
  box-shadow: var(--about-card-shadow);
  padding: 28px;
  text-align: center;
}
.about-tools img { max-width: 100%; height: auto; }
.about-tools-note {
  max-width: var(--w-block);
  margin: 20px auto 0;
  text-align: center;
  font-size: 17px;
  color: var(--text-green-dark);
}
.about-tools-note a { color: var(--accent-green); font-weight: 700; }

/* Fun-fact cards ("smaczki") — uniform, calm cards. The emoji sits in a soft
   mint circle (matching the checklist chips above) and carries the personality,
   so there are no repeating accent colours competing with it. */
.about-facts {
  max-width: var(--w-grid);
  margin: 44px auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.fact-card {
  background: #ffffff;
  border: 1px solid #e6efec;
  border-radius: 16px;
  padding: 24px 22px;
  box-shadow: var(--about-card-shadow);
}
.fact-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #eaf7f2;
  font-size: 23px;
  line-height: 1;
  margin-bottom: 16px;
}
.fact-card p { margin: 0; font-size: 16px; line-height: 1.55; color: #101615; }

/* Contact CTA card (dark, like the home contact box) */
.about-cta {
  max-width: var(--w-block);
  margin-inline: auto;
  background: #101615;
  color: var(--base-3);
  border-radius: 24px;
  padding: 48px 40px;
  text-align: center;
}
.about-cta h2 { color: #ffffff; font-size: clamp(24px, 3.5vw, 34px); margin: 0 0 14px; }
.about-cta p { color: #d7e4e0; font-size: 17px; line-height: 1.6; max-width: 60ch; margin: 0 auto 28px; }
/* CTA button reuses the global .primary style; its arrow uses currentColor so
   it turns green with the text on hover, like the home buttons. */
.about-page .primary { margin-bottom: 0; }
.about-page .primary .icon { display: inline-flex; line-height: 0; }
.about-page .primary .icon svg { width: 1.05em; height: 1.05em; }

@media (max-width: 767px) {
  .about-inner { padding: 48px 16px; }
  .about-hero-inner { padding: 36px 16px 44px; }
  .about-areas { grid-template-columns: 1fr; }
  .about-facts { grid-template-columns: 1fr; }
  .about-quote { border-radius: 18px; padding: 30px 24px; }
  .about-cta { padding: 40px 24px; border-radius: 20px; }
}

/* =====================================================================
   Single article pages (blog post, podcast episode, portfolio case study)
   — mint header band + a readable, styled prose column.
   ===================================================================== */
.article-page { background: #ffffff; color: var(--text-green-dark); overflow-x: clip; }

.article-hero {
  background-image: linear-gradient(180deg, #eaf7f2 0%, #ffffff 100%);
  text-align: center;
}
.article-hero-inner {
  max-width: 760px;
  margin-inline: auto;
  padding: 60px 20px 40px;
}
.article-eyebrow {
  display: inline-block;
  background: #e3fff9;
  color: var(--accent-s);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid rgba(134, 209, 195, 0.35);
  border-radius: 8px;
  padding: 6px 11px;
  margin-bottom: 18px;
}
a.article-eyebrow { text-decoration: none; transition: background-color 0.15s ease; }
a.article-eyebrow:hover { background: #cdf5eb; }
.article-hero h1 {
  font-family: 'Livvic', sans-serif;
  color: #101615;
  font-size: clamp(28px, 5vw, 44px);
  line-height: 1.18;
  margin: 0;
}
.article-meta { margin: 16px 0 0; font-size: 14px; color: #7c8a85; }
/* Document pages (legal): the header already shows the title, so hide the
   content's own leading heading to avoid a duplicate. */
.article-dedupe .prose > h1:first-child,
.article-dedupe .prose > h2:first-child { display: none; }

/* Prose column */
.article-body { padding: 8px 20px 72px; }
.article-body .prose {
  max-width: 720px;
  margin-inline: auto;
  font-size: 17px;
  line-height: 1.75;
  color: #2f3a36;
}
.article-body .prose > *:first-child { margin-top: 0; }
.article-body .prose p { margin: 0 0 1.15em; }
.article-body .prose a { color: var(--accent-green); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.article-body .prose a:hover { color: var(--text-green-medium); }
.article-body .prose h2 {
  font-family: 'Livvic', sans-serif;
  color: #101615;
  font-size: clamp(23px, 3.4vw, 30px);
  line-height: 1.25;
  margin: 1.9em 0 0.5em;
}
.article-body .prose h3 {
  font-family: 'Livvic', sans-serif;
  color: #101615;
  font-size: clamp(19px, 2.6vw, 23px);
  margin: 1.6em 0 0.4em;
}
.article-body .prose h4 { font-family: 'Livvic', sans-serif; color: #101615; font-size: 18px; margin: 1.4em 0 0.4em; }
.article-body .prose ul,
.article-body .prose ol { margin: 0 0 1.15em; padding-left: 1.4em; }
.article-body .prose li { margin-bottom: 0.5em; }
.article-body .prose img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid #e6efec;
  box-shadow: 0 6px 20px rgba(16, 22, 21, 0.06);
  margin: 1.6em auto;
}
.article-body .prose blockquote {
  margin: 1.6em 0;
  padding: 4px 0 4px 22px;
  border-left: 4px solid var(--accent-green);
  color: #46554f;
  font-style: italic;
}
.article-body .prose blockquote p:last-child { margin-bottom: 0; }
.article-body .prose code {
  background: #eef4f2;
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 0.9em;
}
.article-body .prose pre {
  background: #101615;
  color: #eef4f2;
  border-radius: 12px;
  padding: 18px 20px;
  overflow-x: auto;
  margin: 1.4em 0;
}
.article-body .prose pre code { background: none; padding: 0; color: inherit; }
.article-body .prose hr { border: none; border-top: 1px solid #e6efec; margin: 2em 0; }
.article-body .prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.4em 0;
  font-size: 15px;
  display: block;
  overflow-x: auto;
}
.article-body .prose th,
.article-body .prose td {
  border: 1px solid #e6efec;
  padding: 9px 13px;
  text-align: left;
  vertical-align: top;
}
.article-body .prose th { background: #f2faf7; font-weight: 700; }
/* podcast / video embeds */
.article-body .prose iframe {
  max-width: 100%;
  border-radius: 12px;
  margin: 0 0 1.6em;
}

@media (max-width: 767px) {
  .article-hero-inner { padding: 40px 16px 28px; }
  .article-body { padding: 8px 16px 56px; }
}

/* =====================================================================
   Listing pages (Blog, Podcast) — same design language: Livvic/Figtree
   type, soft mint header fading to white, uniform white cards.
   ===================================================================== */
.list-page {
  background: #ffffff;
  color: var(--text-green-dark);
  overflow-x: clip;
}
.list-page :where(h1, h2) {
  font-family: 'Livvic', sans-serif;
  color: #101615;
  line-height: 1.15;
}

/* Header — mint fading into the white body */
.list-hero {
  background-image: linear-gradient(180deg, #eaf7f2 0%, #ffffff 100%);
  text-align: center;
}
.list-hero-inner {
  max-width: 720px;
  margin-inline: auto;
  padding: 66px 20px 52px;
}
.list-hero h1 { font-size: clamp(34px, 6vw, 52px); margin: 0 0 14px; }
.list-lead {
  font-size: clamp(16px, 2.2vw, 19px);
  color: #101615;
  margin: 0 auto;
  max-width: 48ch;
  line-height: 1.55;
}

.list-body { background: #ffffff; }

/* Contact page form */
.kontakt-form { max-width: 640px; margin: 0 auto; }
.kontakt-form iframe { width: 100%; border: 0; min-height: 320px; }

/* Inline contact form inside a dark CTA card */
.about-cta-form {
  max-width: 640px;
  margin-inline: auto;
  background: #ffffff;
  border-radius: 16px;
  padding: 24px 24px 16px;
  text-align: left;
}
.about-cta-form iframe { width: 100%; border: 0; display: block; }

/* 404 page */
.notfound {
  min-height: 62vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-image: linear-gradient(180deg, #eaf7f2 0%, #ffffff 100%);
  padding: 64px 20px 72px;
}
.notfound-inner { max-width: 620px; }
.notfound .notfound-num {
  font-family: 'Livvic', sans-serif;
  font-weight: 900;
  font-size: clamp(96px, 22vw, 184px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--accent-green);
  margin: 0;
  max-width: none;
}
.notfound h1 {
  font-family: 'Livvic', sans-serif;
  font-size: clamp(26px, 5vw, 40px);
  color: #101615;
  margin: 6px 0 14px;
}
.notfound p { font-size: 17px; line-height: 1.6; color: #46554f; margin: 0 auto 28px; max-width: 46ch; }

/* Thank-you / confirmation / funnel pages — short, centred, friendly */
.thanks {
  min-height: 58vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-image: linear-gradient(180deg, #eaf7f2 0%, #ffffff 100%);
  padding: 64px 20px 72px;
}
.thanks-inner { max-width: 600px; }
.thanks-inner :where(h1, h2) {
  font-family: 'Livvic', sans-serif;
  color: #101615;
  line-height: 1.18;
  margin: 0 0 16px;
}
.thanks-inner h1 { font-size: clamp(28px, 5vw, 42px); }
.thanks-inner h2 { font-size: clamp(24px, 4.5vw, 34px); }
.thanks-inner h2:not(:first-child),
.thanks-inner h3 { margin-top: 1.4em; }
.thanks-inner p { font-size: 17px; line-height: 1.65; color: #46554f; margin: 0 auto 1.1em; }
.thanks-inner > *:last-child { margin-bottom: 0; }
.thanks-inner a { color: var(--accent-green); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.thanks-inner strong { color: #101615; }
.thanks-inner ul, .thanks-inner ol { text-align: left; display: inline-block; margin: 0 auto 1.1em; padding-left: 1.3em; }
.thanks-inner li { margin-bottom: 0.5em; }
.thanks-inner img {
  max-width: 100%;
  height: auto;
  border-radius: 14px;
  margin: 8px auto 20px;
  display: block;
}
.notfound-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: center;
  margin-top: 28px;
}
.notfound-links a { color: var(--accent-green); font-weight: 600; text-decoration: none; }
.notfound-links a:hover { text-decoration: underline; }
.list-inner {
  max-width: 960px;
  margin-inline: auto;
  padding: 8px 20px 80px;
}

/* Post / episode cards */
.post-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
.post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: #ffffff;
  border: 1px solid #e6efec;
  border-radius: 18px;
  padding: 26px;
  box-shadow: 0 6px 20px rgba(16, 22, 21, 0.05);
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.post-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(16, 22, 21, 0.09);
  border-color: #d6ede4;
}
/* Makes the whole card clickable while leaving the category chip as its own link */
.post-cardlink { text-decoration: none; color: inherit; }
.post-cardlink::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: 18px; }
.post-cat {
  display: inline-block;
  background: #e3fff9;
  color: var(--accent-s);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: 1px solid rgba(134, 209, 195, 0.35);
  border-radius: 8px;
  padding: 5px 10px;
  margin-bottom: 14px;
}
a.post-cat { position: relative; z-index: 2; text-decoration: none; transition: background-color 0.15s ease; }
a.post-cat:hover { background: #cdf5eb; }
/* Category archive: back-to-blog link */
.cat-back {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--accent-green);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}
.cat-back:hover { text-decoration: underline; }
/* Play badge for podcast cards (mint circle, matches the fact/check badges) */
.post-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #eaf7f2;
  color: var(--accent-green);
  margin-bottom: 16px;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.post-icon svg { width: 19px; height: 19px; fill: currentColor; margin-left: 2px; }
.post-card:hover .post-icon { background: var(--accent-green); color: #ffffff; }
.post-title {
  font-family: 'Livvic', sans-serif;
  font-weight: 700;
  font-size: 21px;
  line-height: 1.28;
  margin: 0 0 10px;
  color: #101615;
}
.post-card:hover .post-title { color: var(--accent-green); }
.post-desc {
  margin: 0 0 18px;
  font-size: 15.5px;
  line-height: 1.6;
  color: #46554f;
}
.post-date { margin-top: auto; font-size: 13px; color: #7c8a85; }

@media (max-width: 767px) {
  .list-hero-inner { padding: 44px 16px 36px; }
  .list-inner { padding: 8px 16px 56px; }
  .post-grid { grid-template-columns: 1fr; }
  .post-card { padding: 22px; }
}

/* Portfolio — a gallery of framed 16:9 thumbnails with a caption */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}
.portfolio-card { display: block; text-decoration: none; color: inherit; }
.portfolio-thumb {
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #e6efec;
  box-shadow: 0 6px 20px rgba(16, 22, 21, 0.05);
  background: #eaf7f2;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.portfolio-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
.portfolio-card:hover .portfolio-thumb {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(16, 22, 21, 0.1);
}
.portfolio-card:hover .portfolio-thumb img { transform: scale(1.04); }
.portfolio-card-title {
  font-family: 'Livvic', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  margin: 16px 0 0;
  color: #101615;
}
.portfolio-card:hover .portfolio-card-title { color: var(--accent-green); }

@media (max-width: 767px) {
  .portfolio-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* =====================================================================
   Service landing page (Jednoosobowy dział techniczny) — same design
   language as the home page: hero, cards, dark CTA, etc.
   ===================================================================== */

/* Hero — text left, portrait right, on a soft mint gradient */
.svc-hero { background-image: linear-gradient(180deg, #eaf7f2 0%, #ffffff 100%); }
.svc-hero-inner {
  max-width: 1040px;
  margin-inline: auto;
  padding: 60px 20px 56px;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 44px;
  align-items: center;
}
.svc-hero h1 { font-size: clamp(34px, 6vw, 54px); margin: 0 0 16px; }
/* Keep "dział techniczny" on one line (don't split the two words) */
.svc-hero h1 .underline-green { white-space: nowrap; }
.svc-hero-lead { font-size: clamp(17px, 2.2vw, 20px); color: #101615; margin: 0 0 26px; max-width: 46ch; }
.svc-hero-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-bottom: 22px; }
.svc-trust { font-size: 15px; color: #46554f; margin: 0; }
.svc-hero-img { justify-self: center; max-width: 380px; }
.svc-hero-img img { width: 100%; height: auto; display: block; }

.about-page .secondary-link {
  color: var(--accent-green);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color 0.15s ease;
}
.about-page .secondary-link:hover { border-bottom-color: var(--accent-green); }

/* Tool circles row */
.svc-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-top: 28px;
}
.svc-tools img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  box-shadow: 0 3px 10px rgba(16, 22, 21, 0.08);
}

/* TAK / NIE two-column */
.svc-yesno {
  max-width: var(--w-grid);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
.svc-yn {
  border-radius: 20px;
  padding: 30px 30px 26px;
  box-shadow: var(--about-card-shadow);
}
.svc-yn--yes { background: var(--bg-green-light); border: 1px solid #cfeee6; }
.svc-yn--no { background: #fff6f9; border: 1px solid #f4dbe3; }
.svc-yn h3 { font-size: 21px; margin: 0 0 18px; }
.svc-yn--yes h3 { color: var(--text-green-medium); }
.svc-yn--no h3 { color: #d43f66; }
.svc-yn-item { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; font-size: 15.5px; line-height: 1.5; color: #2f3a36; }
.svc-yn-item:last-child { margin-bottom: 0; }
.svc-yn-mark { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; margin-top: 1px; }
.svc-yn--yes .svc-yn-mark { background: var(--accent-green); color: #fff; }
.svc-yn--no .svc-yn-mark { background: #f4506f; color: #fff; }
.svc-yn-mark svg { width: 14px; height: 14px; fill: currentColor; }

/* Testimonial highlight (avatar + quote) — clean solid card */
.svc-highlight {
  max-width: var(--w-block);
  margin: 0 auto;
  background: #fffae6;
  border: 1px solid #efe3a8;
  border-radius: 20px;
  padding: 36px 40px;
  text-align: center;
  box-shadow: var(--about-card-shadow);
}
.svc-highlight img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; margin-bottom: 16px; }
.svc-highlight-quote { font-family: 'Livvic', sans-serif; font-weight: 700; font-size: clamp(19px, 3vw, 24px); line-height: 1.3; color: var(--text-yellow-dark); margin: 0 0 10px; }
.svc-highlight-text { font-size: 16px; line-height: 1.6; color: #5b5426; margin: 0; }

/* Generic card grid (services + "z kim pracuję") */
.svc-grid {
  max-width: var(--w-grid);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.svc-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; }
.svc-card {
  background: #ffffff;
  border: 1px solid #e6efec;
  border-radius: 16px;
  padding: 26px 24px;
  box-shadow: var(--about-card-shadow);
}
.svc-card h3 { font-size: 19px; margin: 0 0 10px; color: #101615; }
.svc-card p { margin: 0; font-size: 15.5px; line-height: 1.6; color: #46554f; }

/* Colourful icon on the "z kim pracuję" cards */
.svc-who-icon { display: inline-block; margin-bottom: 14px; }
.svc-who-icon svg { width: 52px; height: auto; display: block; }

/* Icon badge on the terms cards */
.svc-term-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #ffffff;
  color: var(--accent-green);
  margin-bottom: 12px;
  font-size: 24px;
  box-shadow: inset 0 0 0 1px #d6ede4;
}
.svc-term-icon svg { width: 1em; height: 1em; }

/* Terms / pricing — 4 compact cards with an accent value */
.svc-terms {
  max-width: var(--w-grid);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.svc-term {
  background: var(--bg-green-light);
  border: 1px solid #d6ede4;
  border-radius: 16px;
  padding: 26px 22px;
  text-align: center;
}
.svc-term-emoji { font-size: 26px; display: block; margin-bottom: 10px; }
.svc-term h3 { font-size: 17px; margin: 0 0 6px; color: var(--text-green-dark); }
.svc-term p { margin: 0; font-size: 14.5px; line-height: 1.5; color: #46554f; }
/* Pricing: two wider cards instead of four */
.svc-terms--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 700px; }
.svc-terms--2 .svc-term { text-align: left; padding: 28px 26px; }
.svc-terms--2 .svc-term p { font-size: 15px; }
.svc-price-note { text-align: center; font-size: 15px; color: #46554f; margin: 26px auto 0; max-width: 640px; }

/* Testimonials */
.svc-testimonials {
  max-width: var(--w-grid);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
.svc-testimonial {
  background: #ffffff;
  border: 1px solid #e6efec;
  border-radius: 18px;
  padding: 28px;
  box-shadow: var(--about-card-shadow);
}
.svc-testimonial-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.svc-testimonial-head img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; }
.svc-testimonial-name { font-family: 'Livvic', sans-serif; font-weight: 700; color: #101615; }
.svc-testimonial-site { font-size: 13px; color: #7c8a85; }
.svc-testimonial p { margin: 0 0 0.9em; font-size: 15px; line-height: 1.6; color: #46554f; }
.svc-testimonial p:last-child { margin-bottom: 0; }

/* FAQ accordion — matches the home page (white card + green circle marker) */
.svc-faq { max-width: 800px; margin: 0 auto; }
.svc-faq details {
  background: #ffffff;
  border: 1px solid #e6efec;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(16, 22, 21, 0.04);
  margin-bottom: 14px;
  padding: 14px 24px 14px 20px;
}
.svc-faq summary {
  display: list-item;
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 0 0 0 44px;
  font-family: 'Figtree', sans-serif;
  font-weight: 400;
  font-size: 20px;
  color: var(--text-green-dark);
}
.svc-faq summary::-webkit-details-marker { display: none; }
.svc-faq summary::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  width: 24px;
  height: 26px;
  background: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='24' height='24' rx='12' fill='%23003930'/%3E%3Cpath d='M12.026 12.6863C12.04 14.374 12.0512 16.0618 12.0702 17.7494C12.0741 18.0859 12.1011 18.4227 12.1348 18.7577C12.141 18.8131 12.1641 18.8655 12.2013 18.9079C12.2384 18.9502 12.2878 18.9807 12.343 18.9952C12.4313 19.0227 12.5566 18.927 12.575 18.8128C12.5929 18.702 12.6205 18.5918 12.6274 18.4804C12.6716 17.7692 12.7341 17.0582 12.7472 16.3464C12.7742 14.8841 12.7809 13.4213 12.7826 11.9587C12.7843 10.5709 12.7666 9.18321 12.7632 7.79546C12.7627 7.5727 12.7914 7.3497 12.8118 7.12725C12.8155 7.1125 12.823 7.09889 12.8335 7.08769C12.844 7.07648 12.8573 7.06804 12.872 7.06312C12.9073 7.05912 12.9666 7.06927 12.9793 7.09211C13.2169 7.5186 13.4668 7.93974 13.6788 8.37855C14.172 9.39865 14.7768 10.3556 15.3836 11.3119C15.4833 11.469 15.5846 11.6337 15.7825 11.6971C15.8185 11.7086 15.8802 11.7266 15.8923 11.7119C15.9424 11.6595 15.9784 11.5957 15.9972 11.5264C16.0061 11.4525 15.9938 11.3776 15.9618 11.3102C15.8508 11.0712 15.7351 10.834 15.6107 10.6015C14.7216 8.93996 13.8273 7.28113 12.9407 5.6183C12.6063 4.99109 12.2821 4.69311 11.547 5.44596C11.3352 5.66287 11.1236 5.8823 10.9352 6.11817C10.0605 7.21211 9.19111 8.31002 8.32709 9.41188C8.21571 9.56341 8.11659 9.72317 8.03062 9.88971C7.97019 9.99835 8.00608 10.1071 8.07849 10.2009C8.15829 10.3042 8.3903 10.3683 8.4923 10.3326C8.71875 10.2535 8.8849 10.096 9.03535 9.92676C9.61454 9.2753 10.1895 8.6203 10.7604 7.96178C11.1334 7.53387 11.501 7.1014 11.8748 6.67416C11.8933 6.65311 11.9505 6.65201 11.9849 6.66063C11.9998 6.66624 12.0131 6.6753 12.0236 6.68701C12.0342 6.69873 12.0416 6.71276 12.0454 6.7279C12.0604 6.95121 12.0795 7.17496 12.0783 7.39845C12.0688 9.16126 12.0569 10.924 12.0426 12.6867L12.026 12.6863Z' fill='white'/%3E%3C/svg%3E") no-repeat;
  background-size: 24px 26px;
}
.svc-faq details > *:not(summary) { font-size: 15.5px; line-height: 1.6; color: #46554f; }
.svc-faq details > p:first-of-type { margin-top: 14px; }
.svc-faq details p:last-child { margin-bottom: 6px; }
.svc-faq details ul { margin: 8px 0 6px; padding-left: 1.2em; }
.svc-tools-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 18px; }
.svc-tools-tags span {
  background: #eef9f5;
  border: 1px solid #d6ede4;
  border-radius: 8px;
  padding: 5px 11px;
  font-size: 13.5px;
  color: var(--text-green-dark);
}

/* Mini-bio */
.svc-bio-inner {
  max-width: var(--w-block);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 40px;
  align-items: center;
}
.svc-bio-img img { width: 100%; height: auto; border-radius: 20px; display: block; }
.svc-bio h2 { font-size: clamp(26px, 4vw, 34px); margin: 0 0 16px; }
.svc-bio p { margin: 0 0 1em; font-size: 16px; line-height: 1.65; color: #2f3a36; }

@media (max-width: 900px) {
  .svc-hero-inner { grid-template-columns: 1fr; text-align: center; gap: 28px; }
  .svc-hero h1, .svc-hero-lead { max-width: none; margin-inline: auto; }
  .svc-hero-cta, .svc-tools { justify-content: center; }
  .svc-hero-img { order: -1; max-width: 300px; }
  .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-terms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-bio-inner { grid-template-columns: 1fr; text-align: center; gap: 24px; justify-items: center; }
  .svc-bio-img { max-width: 220px; }
}
@media (max-width: 767px) {
  .svc-hero-inner { padding: 40px 16px 40px; }
  .svc-yesno, .svc-grid, .svc-grid--2, .svc-testimonials { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .svc-terms { grid-template-columns: 1fr; }
}

/* Icons (replaces GenerateBlocks .gb-shape) */
.icon { line-height: 0; }