/* ==========================================================================
   Ajugotowanie — landing page styles
   Design tokens and component classes come from the "Organic" design system
   the page was authored in. Layout rules below are written mobile-first so
   text never lands on top of a photo at any width.
   ========================================================================== */

/* — fonts, self-hosted so the page renders without a third-party request — */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/fonts/figtree-latin-ext.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: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/fonts/figtree-latin.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: 'Baloo 2';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/baloo2-latin-ext.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: 'Baloo 2';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/baloo2-latin.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 — */
:root {
  --color-bg: #f5ead8;
  --color-surface: #ebddc5;
  --color-text: #201e1d;
  --color-accent: #c67139;
  --color-accent-2: #7a8a5e;
  --color-divider: color-mix(in srgb, #201e1d 16%, transparent);

  --color-neutral-100: #f9f4ed;
  --color-neutral-800: #474238;
  --color-neutral-900: #2e2b25;

  --color-accent-100: #fff2eb;
  --color-accent-600: #b2622d;
  --color-accent-700: #8c491a;
  --color-accent-800: #643312;

  --color-accent-2-100: #f0fae1;
  --color-accent-2-400: #aebf92;
  --color-accent-2-600: #728157;
  --color-accent-2-700: #56633f;
  --color-accent-2-800: #3d472b;

  /* Body copy at three legibility steps. Kept above the muted floor the
     source used, so the small print still passes contrast on a phone. */
  --text-soft: color-mix(in srgb, var(--color-text) 84%, transparent);
  --text-muted: color-mix(in srgb, var(--color-text) 74%, transparent);

  --font-heading: "Baloo 2", system-ui, sans-serif;
  --font-body: "Figtree", system-ui, sans-serif;

  --radius-md: 16px;
  --radius-lg: 28px;

  /* Single source for the page gutter, so nothing can sit closer to the
     screen edge than this — including anything absolutely positioned. */
  --gutter: clamp(20px, 5vw, 48px);
  --measure: 1080px;
}

/* — base — */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  text-wrap: pretty;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.005em;
  margin: 0;
  /* Polish compounds are long; let them break rather than push the page wide. */
  overflow-wrap: break-word;
}

p { margin: 0; }
img { display: block; max-width: 100%; }
figure { margin: 0; }

a { color: var(--color-accent-700); text-underline-offset: 3px; }
a:hover { color: var(--color-accent-800); }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* — layout shell — */
.shell {
  max-width: var(--measure);
  margin: 0 auto;
  width: 100%;
  padding-inline: var(--gutter);
}

section { padding-block: clamp(32px, 5vw, 64px); }

/* — navigation — */
.nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 20px;
  padding-block: 16px;
  position: relative;
  z-index: 5;
  background: var(--color-bg);
}
.nav-brand {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 19px;
  margin-right: auto;
}
.nav-link {
  color: inherit;
  text-decoration: none;
  font-size: 15px;
  /* 44px tap target without changing the visual rhythm. */
  padding-block: 10px;
}
.nav-link:hover { color: var(--color-accent); }

/* — buttons — */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.25;
  color: var(--color-text);
  background: transparent;
  border: 1px solid transparent;
  padding: 13px 26px;
  min-height: 46px;
  border-radius: 999px;
  transition: background-color 0.15s ease;
}
.btn-sm { font-size: 14px; padding: 10px 20px; min-height: 42px; }
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); color: var(--color-bg); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { background: var(--color-accent-2-600); color: var(--color-bg); }
.btn-secondary:hover { background: var(--color-accent-2-700); color: var(--color-bg); }
.btn-block { width: 100%; }

/* — tags — */
.tag {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  letter-spacing: 0.02em;
  padding: 7px 16px;
  border-radius: 999px;
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); font-size: 12.5px; }
.tag-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* — typography helpers — */
.kicker {
  display: block;
  font-size: 13px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-accent-700);
  margin-bottom: 14px;
}
.h2 { font-size: clamp(28px, 3.6vw, 42px); line-height: 1.1; }
.h3 { font-size: clamp(21px, 2.4vw, 26px); line-height: 1.18; }
.lead { font-size: clamp(17px, 2vw, 19px); line-height: 1.65; }
.body { font-size: 17px; line-height: 1.7; color: var(--text-soft); }
.small { font-size: 15px; line-height: 1.6; color: var(--text-muted); }
.fine { font-size: 14px; line-height: 1.6; color: var(--text-muted); }
.measure { max-width: 62ch; }

/* — photo frames — */
.photo {
  border-radius: calc(1.4 * var(--radius-lg));
  overflow: hidden;
  background: var(--color-surface);
}
.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.photo-grid {
  display: grid;
  /* min() keeps a single column from ever exceeding the viewport on a
     320px-wide phone, which is what causes sideways scrolling. */
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 20px;
}
.photo-grid .photo { aspect-ratio: 4 / 5; }

/* — hero —
   Mobile-first: the photo is a block of its own, stacked under the copy, so
   no heading or paragraph can ever sit over it. The decorative corner crop
   is reintroduced only at widths where there is room for it beside the text. */
.hero { padding-block: clamp(32px, 5vw, 72px) clamp(28px, 4vw, 48px); }
.hero-copy { max-width: 58ch; }
.hero h1 {
  font-size: clamp(32px, 5.6vw, 70px);
  line-height: 1.08;
  margin: 0;
  max-width: 18ch;
}
.hero-lead {
  font-size: clamp(17px, 2vw, 18px);
  line-height: 1.65;
  max-width: 56ch;
  margin: 24px 0 0;
  color: var(--text-soft);
}
.hero .tag-row { margin-top: 26px; }
.hero-photo {
  margin-top: 32px;
  border-radius: calc(1.4 * var(--radius-lg));
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }

/* — split section (copy + portrait photo) — */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 4vw, 52px);
  align-items: center;
}
.split-panel {
  background: var(--color-surface);
  border-radius: calc(1.8 * var(--radius-lg));
  padding: clamp(24px, 4vw, 48px);
}
.split-photo {
  aspect-ratio: 4 / 5;
  max-width: 320px;
  width: 100%;
  justify-self: center;
}

/* — panels — */
.panel {
  border-radius: calc(1.8 * var(--radius-lg));
  padding: clamp(24px, 4vw, 52px);
}
.panel-accent { background: var(--color-accent-100); }
.panel-accent-2 { background: var(--color-accent-2-100); }

/* — card grids — */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 20px;
  margin-top: 36px;
}
.card {
  border-radius: calc(1.4 * var(--radius-lg));
  padding: clamp(24px, 3vw, 28px);
}
.card-accent { background: var(--color-accent-100); }
.card-accent-2 { background: var(--color-accent-2-100); }
.card h3 { font-size: 22px; margin: 0 0 10px; }
.card p { font-size: 16px; line-height: 1.6; color: var(--text-soft); }

/* — numbered day list — */
.days { list-style: none; margin: 0; padding: 0; }
.days li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px solid var(--color-divider);
}
.days li:last-child { border-bottom: 0; }
.days .num {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 22px;
  color: var(--color-accent);
  min-width: 2.2ch;
}
.days .txt { font-size: 17px; line-height: 1.5; }

/* — pricing — */
.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 24px;
  align-items: stretch;
}
.plan {
  display: flex;
  flex-direction: column;
  border-radius: calc(1.6 * var(--radius-lg));
  padding: clamp(26px, 3vw, 40px);
  background: var(--color-surface);
}
.plan-featured {
  background: var(--color-accent-2-100);
  border: 2px solid var(--color-accent-2-400);
}
.plan .tag { align-self: flex-start; }
.plan h3 { margin: 18px 0 6px; }
.plan-price {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(34px, 4vw, 40px);
  margin: 6px 0 18px;
  color: var(--color-accent-800);
}
.plan-featured .plan-price { color: var(--color-accent-2-800); }
.plan p:not(.plan-price) { font-size: 16px; line-height: 1.6; color: var(--text-soft); }
.plan .grow { flex: 1; }
.plan .btn { margin-top: 26px; }

/* — quotes — */
.quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 24px;
}
.quotes-small {
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 20px;
}
blockquote {
  margin: 0;
  background: var(--color-surface);
  border-radius: calc(1.4 * var(--radius-lg));
  padding: clamp(24px, 3vw, 36px);
  font-size: 16.5px;
  line-height: 1.65;
}
.quotes-small blockquote {
  background: var(--color-accent-2-100);
  border-radius: calc(1.2 * var(--radius-lg));
  padding: 26px;
  font-size: 16px;
  line-height: 1.6;
}

/* — closing call to action — */
.cta {
  background: var(--color-accent-2-100);
  border-radius: calc(2 * var(--radius-lg));
  padding: clamp(28px, 5vw, 64px);
}
.cta h2 { font-size: clamp(28px, 3.8vw, 46px); line-height: 1.08; }
.cta-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
/* Below the two-button breakpoint each CTA spans the row: full-width targets
   are easier to hit and stop the long Polish labels from wrapping raggedly. */
@media (max-width: 560px) {
  .cta-actions .btn { width: 100%; }
}

.stack > * + * { margin-top: 20px; }
.stack-sm > * + * { margin-top: 16px; }

footer {
  padding: 8px 0 40px;
  font-size: 14px;
  color: var(--text-muted);
}

/* ==========================================================================
   Wider viewports — layouts that only make sense once there is room.
   ========================================================================== */

@media (min-width: 700px) {
  .hero-photo { aspect-ratio: 16 / 9; }
}

@media (min-width: 860px) {
  .split { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
}

@media (min-width: 940px) {
  /* The hero photo returns to its decorative top-right corner crop. The copy
     column is capped short of it, so the two never share horizontal space. */
  .hero { position: relative; overflow: hidden; }
  .hero-photo {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    width: clamp(220px, 26vw, 320px);
    height: clamp(220px, 26vw, 320px);
    aspect-ratio: auto;
    border-radius: 0 0 0 100%;
    z-index: 1;
  }
  .hero-copy {
    position: relative;
    z-index: 2;
    /* Reserve the photo's width plus breathing room. */
    padding-right: clamp(250px, 29vw, 360px);
    max-width: none;
  }
  .hero h1 { max-width: 16ch; }
}