/* HeyBuddy — Sesje i Ceny / Sessions & Pricing — page styles */
/* PAGE HERO */
    .page-hero {
      padding: clamp(3rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3rem);
    }
    .page-title {
      font-family: var(--font-serif);
      font-size: clamp(1.75rem, 3.5vw, 2.75rem);
      font-weight: 400; 
      line-height: 1.15; 
      color: var(--c-text); 
      margin-bottom: 1rem;
    }
    .page-title em {font-style: normal; color: var(--c-accent-dark); }
    .page-intro {
      font-family: var(--font-sans);
      font-size: 1rem;
      color: var(--c-text-muted);
      max-width: 66ch;
      line-height: 1.7;
    }

    /* PACKAGES */
    .packages {
      padding: var(--section-gap) 0;
    }
    .pkg-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
      margin-top: 2.5rem;
    }
    .pkg-card {
      background: #fff;
      border: 1px solid var(--c-border);
      border-radius: var(--radius);
      padding: 2rem 1.75rem 1.75rem;
      display: flex;
      flex-direction: column;
      gap: 0;
    }
    .pkg-illustration {
      margin-bottom: 1.25rem;
    }
    .pkg-illustration svg {
      height: 80px;
      width: auto;
    }
    .pkg-name {
      font-family: var(--font-serif);
      font-size: 1.75rem;
      font-weight: 400;
      color: var(--c-text);
      margin-bottom: 0.25rem;
    }
    .pkg-price {
      font-size: 1.1rem;
      font-weight: 600;
      color: var(--c-text);
      margin-bottom: 0.2rem;
    }
    .pkg-deposit {
      font-size: 0.875rem;
      color: var(--c-text-light);
      margin-bottom: 1.5rem;
    }
    .pkg-sep {
      height: 1px;
      background: var(--c-border);
      margin-bottom: 1.25rem;
    }
    .pkg-features {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      flex: 1;
      margin-bottom: 1.5rem;
    }
    .pkg-feature {
      display: flex;
      align-items: baseline;
      gap: 0.6rem;
      font-size: 1rem;
      color: var(--c-text-muted);
      line-height: 1.5;
    }
    .pkg-feature::before {
      content: '';
      display: block;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--c-accent);
      flex-shrink: 0;
      margin-top: 0.45rem;
    }
    .pkg-feature.extra {
      color: var(--c-text-light);
      font-size: 0.925rem;
    }
    .pkg-feature.extra::before {
      background: var(--c-accent-warm);
    }

    /* Button outline - desktop */
    .btn-outline {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.4rem;
      padding: 0.625rem 1.25rem;
      border: 1.5px solid var(--c-accent-dark);
      border-radius: 100px;
      color: var(--c-accent-dark);
      font-family: var(--font-sans);
      font-size: 0.925rem;
      font-weight: 600;
      background: transparent;
      cursor: pointer;
      text-decoration: none;
      transition: background 0.2s, color 0.2s, transform 0.15s;
      width: 100%;
    }
    .btn-outline:hover {
      background: var(--c-accent-dark);
      color: #fff;
      transform: translateY(-1px);
    }
    .btn-outline:focus-visible {
      outline: 2px solid var(--c-focus);
      outline-offset: 3px;
    }

    /* PROCESS */
    .process {
      padding: var(--section-gap) 0;
      background: var(--c-bg-alt);
    }
    .process-steps {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
      margin-top: 2.5rem;
    }
    .step {
      padding: 1.5rem;
      background: var(--c-bg);
      border-radius: var(--radius);
      border: 1px solid var(--c-border);
    }
    .step-num {
      font-family: var(--font-serif);
      font-size: 2rem;
      font-weight: 400;
      color: var(--c-accent);
      opacity: 0.7;
      line-height: 1;
      margin-bottom: 0.75rem;
    }
    .step-title {
      font-size: 0.875rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--c-text);
      margin-bottom: 0.5rem;
    }
    .step-desc {
      font-size: 1rem;
      color: var(--c-text-muted);
      line-height: 1.7;
    }

    /* EDYCJA CYTAT */
    .process-quote {
      margin-top: 3rem;
      font-family: var(--font-sans);
      font-size: 1rem;
      color: var(--c-text);
      line-height: 1.7;
      max-width: 64ch;
    }

    /* FAQ */
    .faq {
      padding: var(--section-gap) 0;
    }
    .faq-list {
      margin-top: 2rem;
      display: flex;
      flex-direction: column;
      max-width: 65ch;
    }
    .faq-item {
      padding: 1.25rem 0;
      border-bottom: 1px solid var(--c-border);
    }
    .faq-item:first-child { border-top: 0; }
    .faq-item:last-child { border-bottom: 0; }
    .faq-q {
      font-size: 1rem;
      font-weight: 600;
      color: var(--c-text);
      margin-bottom: 0.5rem;
    }
    .faq-a {
      font-size: 1rem;
      color: var(--c-text-muted);
      line-height: 1.8;
    }
    .faq-a ul {
      margin-left: 1.5rem !important;
      padding: 0;
      list-style: disc;
    }
    .faq-images {
      display: flex;
      flex-direction: row;
      gap: 2rem;
      margin-top: .5rem;
    }
    .faq-images svg {
      width: auto;
      height: 6rem;
    }

    /* RESPONSIVE */
    @media (max-width: 1024px) {
      .btn-outline {
        background: var(--c-cta-bg);
        color: #fff;
        border-color: var(--c-cta-bg);
      }
      .btn-outline:hover {
        background: #2a3624;
        border-color: #2a3624;
      }
    }
    @media (max-width: 860px) {
      .pkg-grid { grid-template-columns: 1fr; max-width: 480px; }
      .process-steps { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 500px) {
      .process-steps { grid-template-columns: 1fr; }
      .faq-list { max-width: 100%; }
    }
    /* ════════════════════════════════════════════════
       PREMIUM HANG-TAG PAKIETY
       ════════════════════════════════════════════════ */
    :root{
      --tag-paper-1:#FCF8F0; --tag-paper-2:#F1E9D7;
      --tag-line:rgba(70,52,28,.16); --tag-line-soft:rgba(70,52,28,.09);
      --hand:"Caveat", cursive;
      --tilt-mag:0deg; --swing:1.3deg; --lift:-1.1rem;
      --feat-1:#FFFDF6; --feat-2:#EFE7D2;
    }
    .packages .pkg-grid{
      display:grid; grid-template-columns:repeat(3,1fr);
      gap:clamp(1.5rem,2.6vw,2.4rem);
      margin-top:3.75rem; padding-top:2.5rem;
      align-items:start;
    }
    .pkg{
      position:relative; display:flex;
      background:none; border:0; border-radius:0; padding:0;
      rotate:var(--tilt,0deg); transform-origin:50% -4px;
      transition:rotate .6s cubic-bezier(.33,1,.5,1), translate .45s ease;
      z-index:1;
    }
    .pkg:nth-child(1){ --tilt:calc(-1 * var(--tilt-mag)); }
    .pkg:nth-child(2){ --tilt:0deg; }
    .pkg:nth-child(3){ --tilt:var(--tilt-mag); }
    .pkg--featured{ translate:0 var(--lift); z-index:3; }
    @media (prefers-reduced-motion:no-preference){
      .pkg:hover{ animation:tag-swing 1s cubic-bezier(.36,.07,.19,.97) both; z-index:5; }
    }
    .packages.no-swing .pkg:hover{ animation:none; }
    .packages.equal .pkg-grid{ align-items:stretch; }
    @keyframes tag-swing{
      0%{ rotate:var(--tilt); }
      30%{ rotate:calc(var(--tilt) + var(--swing)); }
      60%{ rotate:calc(var(--tilt) - var(--swing) * 0.6); }
      82%{ rotate:calc(var(--tilt) + var(--swing) * 0.27); }
      100%{ rotate:var(--tilt); }
    }

    /* cord */
    .tag-string{
      position:absolute; left:50%; top:-36px; transform:translateX(-50%);
      z-index:4; pointer-events:none;
      filter:drop-shadow(0 1.5px 1px rgba(70,52,28,.16));
    }
    .tag-string svg{ display:block; }

    /* ivory paper */
    .tag-paper{
      position:relative; isolation:isolate; flex:1;
      display:flex; flex-direction:column;
      padding:3.5rem 1.9rem 1.7rem;
      background:linear-gradient(168deg, var(--tag-paper-1) 0%, var(--tag-paper-2) 100%);
      clip-path:polygon(0 30px, 30px 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 0 100%);
      filter:drop-shadow(0 14px 22px rgba(70,52,28,.13)) drop-shadow(0 2px 4px rgba(70,52,28,.08));
    }
    .pkg--featured .tag-paper{
      background:linear-gradient(168deg, var(--feat-1) 0%, var(--feat-2) 100%);
      filter:drop-shadow(0 22px 34px rgba(70,52,28,.2)) drop-shadow(0 3px 6px rgba(70,52,28,.12));
    }

    /* brass grommet */
    .tag-hole{
      position:absolute; top:13px; left:50%; transform:translateX(-50%);
      width:19px; height:19px; border-radius:50%;
      background:
        radial-gradient(circle at 50% 50%, var(--c-bg) 0 5.5px, rgba(0,0,0,0) 6px),
        radial-gradient(circle at 50% 36%, #ecd6a4, #bd9657 55%, #886734 100%);
      box-shadow:inset 0 1px 1px rgba(255,255,255,.5), inset 0 -1px 1px rgba(80,55,25,.5), 0 1px 2px rgba(70,45,20,.32);
      z-index:6;
    }

    /* faint paper grain */
    .tag-grain{
      position:absolute; inset:0;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.42 0 0 0 0 0.3 0 0 0 0 0.15 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-size:220px 220px; opacity:.26; mix-blend-mode:multiply;
      pointer-events:none; z-index:-1;
    }
    /* double letterpress hairline frame */
    .tag-frame{
      position:absolute; inset:15px;
      border:1px solid var(--tag-line); border-radius:2px;
      pointer-events:none; z-index:-1;
    }
    .tag-frame::after{
      content:""; position:absolute; inset:3px;
      border:1px solid var(--tag-line-soft); border-radius:1px;
    }

    /* refined vertical brass label (featured) */
    .tag-stamp{
      position:absolute; top:50%; right:12px; transform:translateY(-50%);
      writing-mode:vertical-rl; rotate:180deg;
      font-family:var(--font-sans); font-weight:600; font-size:.58rem;
      letter-spacing:.26em; text-transform:uppercase;
      color:#9a7536; opacity:.85; z-index:7; white-space:nowrap; pointer-events:none;
    }

    /* head: dog + name side by side */
    .tag-head{ display:flex; align-items:center; gap:.85rem; margin-bottom:1.15rem; }
    .tag-head .pkg-illustration{
      margin:0; flex:0 0 58px; width:58px;
      display:flex; align-items:center; justify-content:center;
    }
    .tag-head .pkg-illustration svg{ max-height:54px; width:auto; height:auto; }
    .tag-head .pkg-illustration--buddy svg{ max-height:64px; width:auto; height:auto; }
    .tag-paper .pkg-illustration svg path{ fill:#2d2820 !important; }
    .pkg-name{
      font-family:var(--font-serif); font-size:1.85rem; font-weight:500;
      line-height:1; color:var(--c-text); margin:0;
    }

    /* price + handwritten deposit */
    .tag-price{
      display:flex; flex-direction:column; gap:.28rem;
      padding-bottom:1.1rem; margin-bottom:1.1rem;
      border-bottom:1px solid var(--tag-line);
    }
    .pkg-price{
      font-family:var(--font-serif); font-size:1.7rem; font-weight:600;
      color:var(--c-text); line-height:1; margin:0;
    }
    .pkg-price.is-individual{ font-size:1.4rem; font-weight:500; color:var(--c-text-muted); }
    .pkg-deposit{
      font-family:var(--font-serif); font-size:1.125rem; line-height:1.25;
      color:var(--c-text-muted); margin:0;
    }

    /* comparative spec rows */
    .pkg-specs{ display:flex; flex-direction:column; flex:1; margin:0 0 1.1rem; }
    .spec{
      display:flex; flex-direction:column; gap:.2rem;
      padding:.8rem 0; border-bottom:1px solid var(--tag-line-soft);
    }
    .spec:first-child{ padding-top:0; }
    .spec:last-child{ border-bottom:0; }
    .spec-label{
      font-family:var(--font-sans); font-size:12px; font-weight:600;
      letter-spacing:.1em; text-transform:uppercase; color:var(--c-text-muted);
    }
    .spec-value{ font-family:var(--font-sans); font-size:16px; color:var(--c-text); line-height:1.45; }
    .spec-note{ display:block; margin-top:.3rem; font-size:14px; line-height:1.4; color:var(--c-text-muted); }
    .spec-dim{ color:var(--c-text-muted); }

    .pkg-foot{
      font-family:var(--hand); font-size:1.05rem; line-height:1.15;
      color:var(--c-text-light); margin:0 0 1.1rem;
    }

    /* ghost CTA */
    .tag-cta{
      margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:.5rem;
      padding-top:1rem; border-top:1px solid var(--tag-line);
      color:var(--c-accent-dark); text-decoration:none;
      font-family:var(--font-sans); font-weight:600; font-size:.74rem;
      letter-spacing:.15em; text-transform:uppercase;
      transition:color .2s;
    }
    .tag-cta-arrow{ font-size:1.05rem; transition:transform .25s ease; }
    .tag-cta:hover{ color:#8f3a18; }
    .tag-cta:hover .tag-cta-arrow{ transform:translateX(5px); }
    .tag-cta:focus-visible{ outline:2px solid var(--c-focus); outline-offset:4px; border-radius:2px; }
    .pkg--featured .tag-cta{ color:#9d3f1a; }

    @media (max-width:860px){
      .packages .pkg-grid{ grid-template-columns:1fr; max-width:440px; margin-inline:auto; padding-top:1.5rem; }
      .pkg, .pkg--featured{ rotate:0deg !important; translate:0 !important; }
      .tag-stamp{ writing-mode:horizontal-tb; rotate:0deg; top:20px; right:auto; left:18px; transform:none; }
    }
    /* ── JAK TO DZIAŁA — zygzakowata ścieżka ── */
    .flow{ margin:3.25rem auto 0; padding:0; max-width:860px; position:relative; }
    .flow-step{ position:relative; width:46%; display:flex; flex-direction:column; gap:.45rem; }
    .flow-step.left{ margin-right:auto; align-items:flex-start; text-align:left; }
    .flow-step.right{ margin-left:auto; align-items:flex-end; text-align:right; }
    .flow-head{ display:block; margin-bottom:.15rem; }
    .flow-num{ display:block; font-family:var(--font-serif); font-size:2.0rem; font-weight:500; line-height:1.25; color:var(--c-accent); opacity:.5; margin-bottom:.1rem; }
    .flow-title{ display:block; font-family:var(--font-serif); font-size:1.5rem; font-weight:500; color:var(--c-text); line-height:1.15; margin:0; }
    .flow-desc{ font-size:1rem; color:var(--c-text-muted); line-height:1.7; max-width:40ch; text-wrap:pretty; margin:0; }
    .flow-link{ width:100%; height:88px; }
    .flow-link svg{ display:block; width:100%; height:100%; overflow:visible; }
    @media (max-width:760px){
      .flow{ max-width:480px; }
      .flow-step,
      .flow-step.left,
      .flow-step.right{ width:100%; margin:0; align-items:flex-start; text-align:left; padding-left:0; }
      .flow-link{ display:block; height:2.1rem; }
      .flow-link svg{ display:none; }
    }
    /* ── WARIANT: KARTY PRZYPIĘTE PINEZKĄ (papier czerpany) ── */
    .tag-pin{ display:none; }
    .paper-sheet{ display:none; }
    .packages.style-pin .tag-string,
    .packages.style-pin .tag-hole,
    .packages.style-pin .tag-frame{ display:none; }
    .packages.style-pin .tag-grain{ opacity:.18; }
    .packages.style-pin .tag-paper{ clip-path:none; background:transparent; filter:none; padding-top:3.1rem; }
    .packages.style-pin .paper-sheet{
      display:block; position:absolute; inset:0; z-index:-2;
      background:
        repeating-linear-gradient(0deg, rgba(120,98,55,.016) 0 1px, transparent 1px 5px),
        repeating-linear-gradient(90deg, rgba(120,98,55,.02) 0 1px, transparent 1px 26px),
        linear-gradient(180deg, #fefdfb 0%, #f7f3ec 100%);
      filter: url(#deckle) drop-shadow(0 14px 20px rgba(70,52,28,.12)) drop-shadow(0 2px 4px rgba(70,52,28,.07));
    }
    .packages.style-pin .pkg--featured .tag-paper{ background:transparent; filter:none; }
    .packages.style-pin .pkg--featured .paper-sheet{
      background:
        repeating-linear-gradient(0deg, rgba(120,98,55,.016) 0 1px, transparent 1px 5px),
        repeating-linear-gradient(90deg, rgba(120,98,55,.02) 0 1px, transparent 1px 26px),
        linear-gradient(180deg, #fffdf6 0%, #f6efe0 100%);
      filter: url(#deckle) drop-shadow(0 20px 30px rgba(70,52,28,.17)) drop-shadow(0 3px 6px rgba(70,52,28,.1));
    }
    .packages.style-pin .pkg--featured{ translate:0 -.7rem; }
    .packages.style-pin .tag-pin{
      display:block; position:absolute; top:-12px; left:50%;
      transform:translateX(-50%) rotate(var(--pin-rot,-7deg)); z-index:7; pointer-events:none;
      filter:drop-shadow(0 3px 3px rgba(70,52,28,.25));
    }
    .packages.style-pin .pkg:nth-child(1) .tag-pin{ --pin-rot:-15deg; left:45%; }
    .packages.style-pin .pkg:nth-child(2) .tag-pin{ --pin-rot:9deg; left:53%; }
    .packages.style-pin .pkg:nth-child(3) .tag-pin{ --pin-rot:-4deg; left:48%; }
    .packages.style-pin .pkg{ transform-origin:50% -2px; }
    .packages.style-pin .pkg:hover{ animation:pin-wobble .9s cubic-bezier(.36,.07,.19,.97) both; }
    @keyframes pin-wobble{
      0%{ rotate:0deg; } 25%{ rotate:.7deg; } 55%{ rotate:-.5deg; } 80%{ rotate:.25deg; } 100%{ rotate:0deg; }
    }

/* ── BEFORE / AFTER SLIDER ── */
.before-after { padding: var(--section-gap) 0; background: var(--c-bg); }
.ba-lead { margin-top:.5rem; font-family:var(--font-sans); font-size:1rem; color:var(--c-text-muted); max-width:52ch; }
.ba-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:2.5rem; }
.compare { position:relative; overflow:hidden; border-radius:var(--radius); aspect-ratio:3/2; background:var(--c-border); cursor:ew-resize; user-select:none; touch-action:none; --pos:50%; }
.compare img { display:block; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.compare-after-wrap { position:absolute; inset:0; clip-path:inset(0 calc(100% - var(--pos)) 0 0); }
.compare-lbl { position:absolute; top:.7rem; background:rgba(0,0,0,.42); color:#fff; font-family:var(--font-sans); font-size:.68rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; padding:.25rem .6rem; border-radius:3px; pointer-events:none; z-index:2; }
.compare-lbl-after { left:.7rem; }
.compare-lbl-before { right:.7rem; }
.compare-handle { position:absolute; top:0; bottom:0; left:var(--pos); transform:translateX(-50%); width:2px; background:rgba(255,255,255,.9); pointer-events:none; z-index:3; }
.compare-btn { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:38px; height:38px; border-radius:50%; background:#fff; border:none; box-shadow:0 2px 10px rgba(0,0,0,.28); display:flex; align-items:center; justify-content:center; color:var(--c-text); pointer-events:none; z-index:4; }
.compare-btn svg { width:18px; height:18px; }
.compare-caption { margin-top:.6rem; font-family:var(--font-serif); font-size:.9rem; color:var(--c-text-light); text-align:center; }
@media (max-width:860px){ .ba-grid { grid-template-columns:1fr; max-width:500px; } }