/* ==========================================================================
   ptagroup — PPC Audit landing page  (/ppcaudit)
   All classes prefixed .pta-*, all rules scoped under .pta-lp
   Nothing here can leak into the theme, and the theme cannot leak in.
   ========================================================================== */

/* FONT
   The Axtra theme already loads Montserrat site-wide, so this file does NOT
   declare @font-face. It just asks for the family by name.

   If the theme's Montserrat is missing weights 800/900, enable self-hosting:
   define( 'PTA_PPCAUDIT_SELF_HOST_FONT', true );  in wp-config.php
   That loads fonts.css alongside this file. See README.md. */
  /* tokens live on the wrapper, not :root — so they cannot leak into the theme */
  .pta-lp{
    /* overridden by fonts.css when PTA_PPCAUDIT_SELF_HOST_FONT is on */
    --pta-font:'Montserrat','Segoe UI',Arial,sans-serif;
    --pta-black:#121212;
    --pta-orange:#fb8907;
    --pta-white:#ffffff;
    --pta-dim:#ffffff;          /* body text on dark — no grey anywhere */
    --pta-line-dark:#3a3a3a;
    --pta-cream:#f4f2ec;
    --pta-line-light:#e6e4e0;
    --pta-line-panel:#f1f1f1;
    /* muted meta text: footer, consent, fine print.
       #a3a3a3 on #121212 is 7.3:1; #767676 on white is 4.6:1. */
    --pta-meta-on-dark:#a3a3a3;
    --pta-meta-on-light:#767676;
  }
  .pta-lp, .pta-lp *{box-sizing:border-box;margin:0;padding:0;}
  .pta-lp{-webkit-font-smoothing:antialiased;}
  .pta-lp, .pta-lp *{
    /* the theme sets a global `* { font-family }`, which would otherwise win
       over inheritance from the wrapper — this outranks it */
    font-family:var(--pta-font);
  }
  .pta-lp{
    background:var(--pta-cream);
    color:var(--pta-black);
    line-height:1.5;
	overflow-x:clip;
  }
  .pta-lp a{color:inherit;text-decoration:none;}

  /* in-page anchor navigation */
  .pta-lp{scroll-behavior:smooth;}
  .pta-lp [id]{scroll-margin-top:24px;}
  @media (prefers-reduced-motion:reduce){.pta-lp{scroll-behavior:auto;}}
  .pta-lp img{max-width:100%;display:block;}
  .pta-lp ul{list-style:none;}

  .pta-container{
    width:100%;
    max-width:1136px;      /* 1088 content + 2*24 padding */
    margin:0 auto;
    padding:0 24px;
  }

  .pta-lp h1,.pta-lp h2,.pta-lp h3,.pta-lp h4{
    font-weight:900;
    letter-spacing:-0.02em;
    line-height:1.08;
  }
  .pta-dot{color:var(--pta-orange);}

  /* ---------- buttons ---------- */
  .pta-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    font-family:inherit;
    font-weight:800;
    letter-spacing:.06em;
    text-transform:uppercase;
    border:2px solid transparent;
    border-radius:2px;
    cursor:pointer;
    transition:background .15s ease,color .15s ease;
    white-space:nowrap;
  }
  .pta-btn:focus-visible{outline:2px solid var(--pta-orange);outline-offset:3px;}
  .pta-btn .pta-arw{flex:none;margin-top:1px;}

  /* header size */
  .pta-btn-sm{height:37px;padding:0 20px;font-size:13px;}
  /* hero size */
  .pta-btn-lg{height:49px;min-width:242px;padding:0 26px;font-size:15px;}

  .pta-btn-primary{background:var(--pta-orange);color:var(--pta-white);}
  /* The theme's header link colour outranks .pta-btn-primary (one class), so
     the header CTA rendered black. The `a` raises us above it. The arrow is
     stroke:currentColor, so it follows. .pta-btn-lg keeps its black label. */
  .pta-lp a.pta-btn-sm.pta-btn-primary,
  .pta-lp a.pta-btn-sm.pta-btn-primary:hover,
  .pta-lp a.pta-btn-sm.pta-btn-primary:focus{color:var(--pta-white);}
  .pta-btn-primary:hover{background:#e57a04;}
  /* large orange buttons use a black label (per design) */
  .pta-btn-lg.pta-btn-primary{color:#000;}
  .pta-btn-ghost{background:transparent;color:var(--pta-white);border-color:var(--pta-white);}
  .pta-btn-ghost:hover{background:var(--pta-white);color:var(--pta-black);}

  /* ---------- brand ---------- */
  .pta-brand{display:inline-flex;align-items:center;line-height:1;}
  .pta-brand .pta-logo{display:block;width:auto;height:33px;flex:none;}
  .pta-footer-brand .pta-brand .pta-logo{height:30px;}

  /* orange petal mark used as section marker */
  .pta-petal{
    width:56px;height:56px;
    background:url('../img/deco-petal.png?v=2') no-repeat center/contain;
    display:block;
  }
  .pta-petal.pta-sm{width:24px;height:24px;}

  /* ---------- eyebrow ---------- */
  .pta-eyebrow{
    font-size:13px;
    font-weight:700;
    letter-spacing:.01em;
    line-height:1;
    color:#000;
  }
  .pta-eyebrow .pta-dash{color:var(--pta-orange);margin-right:5px;}
  .pta-eyebrow.pta-light,.pta-section-dark .pta-eyebrow,.pta-hero .pta-eyebrow{color:var(--pta-white);}

  /* ================= HEADER ================= */
  .pta-site-header{background:var(--pta-black);}
  .pta-nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:32px;
    height:66px;
  }
  .pta-nav-links{
    display:flex;
    gap:18px;              /* design: 18px ink gap */
    margin-left:auto;
    margin-right:0;        /* the button's own padding supplies the 30px */
  }
  .pta-nav-links a{
    font-size:12px;        /* design: word widths measure 0.82x of 15px */
    font-weight:600;
    color:var(--pta-white);
  }
  .pta-nav-links a:hover{color:var(--pta-orange);}

  /* ================= HERO ================= */
  .pta-hero{
    background:var(--pta-black);
    color:var(--pta-white);
    padding:106px 0 60px;
  }
  .pta-hero-grid{
    display:grid;
    grid-template-columns:598px 1fr;
    gap:64px;
  }
  .pta-hero-copy .pta-petal{margin-bottom:29px;}
  .pta-hero-copy .pta-eyebrow{margin-bottom:17px;}
  .pta-hero h1{
    font-size:72px;
    line-height:1.11;
    margin-bottom:21px;
  }
  .pta-hero-lead{
    font-size:19px;
    line-height:1.42;
    color:var(--pta-white);
    max-width:504px;
    margin-bottom:41px;
  }
  .pta-hero-ctas{display:flex;gap:40px;flex-wrap:wrap;}

  /* right column: photo */
  .pta-hero-visual{
    position:relative;
    align-self:start;          /* design: photo top sits level with the petal */
    display:flex;
    flex-direction:column;
    align-items:center;        /* badges centre under the photo */
  }
  /* shrink-wraps the image, so the decoration below can be positioned as a
     percentage of the PHOTO rather than of the whole column */
  .pta-hero-photo{position:relative;margin-top:5px;}
  .pta-hero-photo img{display:block;width:auto;height:auto;max-width:100%;max-height:526px;}
  .pta-qm{position:absolute;z-index:2;pointer-events:none;}
  .pta-qm img{display:block;width:100%;height:auto;}
  /* /ppcaudit question marks — % of the photo box in the design. a and c are
     rotated anticlockwise; b sits upright in the asset's own orientation. */
  .pta-qm-a{top:34%;left:1%;width:16%;transform:rotateZ(-40deg);}
  .pta-qm-b{top:23%;left:80%;width:29%;}
  .pta-qm-c{top:78%;left:-15%;width:22%;transform:rotateZ(-45deg);}
  /* /ppckampane uses magnifiers instead of question marks.
     Widths/offsets measured as a % of the photo box in the design:
     20% @ 68%/21%, 22% @ 23%/13%, 50% @ 47%/49%. */
  /* /ppckampane magnifiers — % of the 435x595 photo box in the design.
     l2 is mirrored: in the design its handle points down-left. */
  .pta-qm-l1{top:29%;left:67%;width:23%;}
  .pta-qm-l2{top:53%;left:-13%;width:22%;transform:scaleX(-1);}
  .pta-qm-l3{top:71%;left:48%;width:47%;}

  /* ---------- stats strip ---------- */
  /* stats sit inside .pta-hero-copy — as a sibling of .pta-hero-grid they had
     to wait for the tallest column (photo + badges), which left dead space */
  .pta-hero-bottom{margin-top:54px;}   /* design: buttons -> divider = 54px */
  .pta-hero-bottom > .pta-stats{
    border-top:1px solid var(--pta-line-dark);
    padding-top:35px;                  /* design: divider -> figures = 36px */
    max-width:598px;
  }
  .pta-stats{
    display:grid;
    grid-template-columns:184px 200px 1fr;
  }
  .pta-stat .pta-num{
    font-size:68px;
    font-weight:900;
    line-height:1;
    letter-spacing:-0.03em;
    margin-bottom:20px;
  }
  .pta-stat .pta-num .pta-unit{
    font-size:28px;
    font-weight:500;
    letter-spacing:0;
  }
  .pta-stat .pta-num .pta-unit.pta-sp{margin-left:6px;}
  .pta-stat .pta-label{
    font-size:14px;
    font-weight:400;
    line-height:1.57;
    color:var(--pta-white);
    max-width:172px;
  }
  /* sits directly under the photo, centred on it (measured: centres within
     5px in the design, 60px below the photo) */
  .pta-partner-badges{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:22px;
    margin-top:60px;
    max-width:280px;
  }
  .pta-partner-badges .pta-pb{flex:none;width:auto;object-fit:contain;}
  .pta-pb-google{height:97px;}
  .pta-pb-heureka{height:104px;}
  .pta-pb-mergado{height:70px;}

  @media (max-width:1100px){
    .pta-hero-grid{grid-template-columns:1fr;gap:48px;}
    .pta-hero h1{font-size:56px;}
    .pta-hero-visual{min-height:420px;max-width:480px;}
  }
@media (max-width:760px){
    .pta-nav-links{display:none;}
    .pta-nav{gap:16px;height:60px;}
    .pta-brand .pta-logo{height:26px;}
    .pta-nav .pta-btn-sm{
      height:34px;padding:0 14px;
      font-size:11px;letter-spacing:.04em;gap:7px;
    }

    .pta-hero{padding-top:56px;}
    .pta-hero h1{font-size:38px;}
    .pta-hero-lead{font-size:16px;}
    .pta-hero-ctas{gap:14px;}

    .pta-btn-lg{
      min-width:0;
      width:100%;
      height:auto;
      min-height:49px;
      padding:12px 18px;
      font-size:13px;
      letter-spacing:.04em;
      white-space:normal;
      text-align:center;
    }

    .pta-stats{grid-template-columns:1fr 1fr;gap:32px 24px;}
    .pta-stat .pta-num{font-size:52px;}
    .pta-hero-visual{min-height:340px;max-width:100%;}
    .pta-qm-c{left:-6%;}
    .pta-qm-l2{left:-5%;}
  }

  @media (max-width:400px){
    .pta-brand .pta-logo{height:23px;}
    .pta-nav .pta-btn-sm .pta-arw{display:none;}
  }

  /* ================= (sections below hero — to be refined next) ================= */
  section.pta-block{padding:100px 0;}
  .pta-section-dark{background:var(--pta-black);color:var(--pta-white);}
  .pta-section-cream{background:var(--pta-cream);}
  .pta-section-white{background:var(--pta-white);}
  .pta-section-head h2{font-size:58px;line-height:1;margin-bottom:32px;}
  .pta-block h2 + p,.pta-block h2 + .pta-eyebrow{margin-top:32px;}
  .pta-block h2{font-size:56px;line-height:1;margin-bottom:32px;}
  .pta-section-head p:not(.pta-eyebrow){font-size:19px;line-height:1.42;max-width:640px;color:#000;}
  /* the eyebrow is a <p> too, so the rule above was inflating it to 19px in
     every section that has a .pta-section-head — hence the inconsistent sizes */
  .pta-section-head p.pta-eyebrow{font-size:13px;line-height:1;max-width:none;}
  .pta-section-dark .pta-section-head p{color:var(--pta-white);}
  /* /ppcaudit's white strip is the shorter of the two: measured 240px tall in
     the design (34 above the eyebrow, 42 under it, 72 below the logos).
     /ppckampane's dark strip is ~305px and keeps the original padding — see
     .pta-is-dark further down. */
  .pta-awards-strip{background:var(--pta-white);padding:34px 0 72px;overflow:hidden;}
  .pta-awards-strip .pta-eyebrow{color:#000;margin-bottom:42px;}
  .pta-awards-marquee{position:relative;overflow:hidden;
    mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);}
  /* two identical halves; each logo carries its own trailing margin so
     translateX(-50%) lands exactly on the seam with no gap or jump */
  .pta-awards-track{display:flex;align-items:center;width:max-content;
    animation:pta-award-scroll 60s linear infinite;will-change:transform;}
  .pta-awards-track img{height:80px;width:auto;flex:none;margin-right:64px;}
  .pta-awards-marquee:hover .pta-awards-track{animation-play-state:paused;}
  @keyframes pta-award-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
  @media (prefers-reduced-motion:reduce){
    .pta-awards-marquee{mask-image:none;-webkit-mask-image:none;}
    .pta-awards-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center;row-gap:36px;}
    .pta-awards-track img.pta-rep{display:none;}
  }
  .pta-two-col{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center;margin-bottom:60px;}
  /* the design places these at 1:1 of the exported artwork — do not upscale */
  .pta-icon-illustration{margin-left:auto;display:flex;align-items:center;justify-content:flex-end;}
  .pta-icon-illustration img{display:block;width:auto;height:auto;max-width:100%;}
  .pta-cards-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--pta-line-light);border-left:1px solid var(--pta-line-light);}
  .pta-section-dark .pta-cards-grid{border-color:var(--pta-line-dark);}
  .pta-card{padding:30px 32px 34px;border-right:1px solid var(--pta-line-light);border-bottom:1px solid var(--pta-line-light);}
  .pta-section-dark .pta-card{border-color:var(--pta-line-dark);}
  .pta-card .pta-num{color:var(--pta-orange);font-weight:800;font-size:20px;line-height:1;margin-bottom:3px;display:block;}
  /* same specificity as the rule above, so this has to come after it */
  .pta-cards-grid .pta-num{font-weight:700;}
  .pta-card h3{font-size:22px;font-weight:700;line-height:1.2;margin-bottom:12px;}
  .pta-card p{font-size:14px;line-height:1.55;color:#000;font-weight:400;}
  .pta-section-dark .pta-card p{color:var(--pta-white);}
  .pta-wide-head .pta-two-col{grid-template-columns:1fr 240px;gap:60px;align-items:end;}
  .pta-wide-head .pta-section-head p{max-width:805px;}
  /* This section runs its heading tighter to the paragraph than the rest of
     the page: ~20px glyph-to-glyph in the design against the 37px the shared
     32px margin produced. Scoped by id, because #vysledky on /ppckampane also
     carries .pta-wide-head and keeps the normal spacing. Both the h2's
     margin-bottom and the adjacent p's margin-top have to move — they collapse
     to whichever is larger. */
  #ako-prebieha .pta-section-head h2{margin-bottom:16px;}
  #ako-prebieha .pta-section-head h2 + p{margin-top:16px;}
  .pta-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:47px;border-top:2px solid var(--pta-orange);padding-top:40px;}
  .pta-step .pta-num{color:var(--pta-orange);font-weight:800;font-size:20px;line-height:1;display:block;margin-bottom:8px;}
  .pta-step h3{font-size:22px;font-weight:700;line-height:1.2;margin-bottom:12px;}
  .pta-step p{font-size:14px;line-height:1.55;color:var(--pta-white);font-weight:400;}
  .pta-bonus-bar{margin-top:66px;background:#141312;border-left:2px solid var(--pta-orange);padding:44px 30px;display:grid;grid-template-columns:148px 1fr;gap:0;align-items:start;}
  .pta-bonus-bar .pta-label{color:var(--pta-orange);font-weight:900;font-size:20px;letter-spacing:.02em;}
  .pta-bonus-bar p{color:var(--pta-white);font-size:19px;line-height:1.42;}
  .pta-output-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;}
  .pta-dashboard-placeholder{display:flex;align-items:center;align-self: center}
  .pta-dashboard-placeholder img{display:block;width:auto;height:auto;max-width:100%;}
  .pta-output-list{margin-top:24px;}
  .pta-output-item{display:flex;gap:16px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--pta-line-light);font-size:16px;font-weight:500;color:#000;}
  .pta-output-item .pta-num{color:var(--pta-orange);font-weight:800;min-width:24px;}
  .pta-form-grid{display:grid;grid-template-columns:502px 1fr;gap:53px;align-items:start;}
  /* Design: the first field's label starts where the petal ends (~46px down).
     This lives on a wrapper WE own rather than on CF7's markup — CF7's output
     structure varies by version and plugin, so targeting .wpcf7 was fragile. */
  .pta-form-col{padding-top:46px;}
  @media (max-width:900px){ .pta-form-col{padding-top:0;} }
  .pta-form-title{font-size:50px;font-weight:900;line-height:1.17;letter-spacing:-.02em;margin-bottom:32px;}
  .pta-accent{color:var(--pta-orange);}
  .pta-form-lead{color:var(--pta-white);font-size:19px;line-height:1.42;margin-bottom:32px;max-width:400px;}
  .pta-checklist{display:flex;flex-direction:column;gap:30px;}
  .pta-checklist li{display:flex;gap:12px;align-items:center;font-size:15px;}
  .pta-check-icon{color:var(--pta-orange);font-weight:900;font-size:20px;line-height:1;}
  .pta-form-field{margin-bottom:30px;}
  .pta-form-field label{display:block;font-size:14px;margin-bottom:6px;}
  .pta-form-field .pta-req{color:var(--pta-orange);}
  .pta-form-field input,.pta-form-field textarea{width:100%;background:transparent;border:none;border-bottom:1px solid var(--pta-line-dark);color:var(--pta-white);font-family:inherit;font-size:15px;padding:6px 0;outline:none;}
  .pta-form-field input::placeholder,.pta-form-field textarea::placeholder{color:#666;}
  .pta-form-field input:focus,.pta-form-field textarea:focus{border-color:var(--pta-orange);}
  .pta-form-row{display:grid;grid-template-columns:1fr 1fr;gap:30px;}
  .pta-consent{font-size:12px;color:var(--pta-meta-on-dark);margin:20px 0 0;line-height:1.6;}
  .pta-consent a{text-decoration:underline;font-size:inherit;font-weight:inherit;}
  /* ================= FOOTER ================= */
  .pta-site-footer{background:var(--pta-black);color:var(--pta-white);border-top:1px solid #262626;padding:110px 0 100px;}
  .pta-footer-grid{display:grid;grid-template-columns:282px 278px 1fr;gap:40px;align-items:start;}
  .pta-footer-brand .pta-brand{font-size:21px;}
  .pta-footer-tagline{color:var(--pta-meta-on-dark);font-size:13px;line-height:1.5;max-width:250px;margin-top:42px;}
  .pta-footer-nav{display:flex;flex-direction:column;gap:27px;}
  .pta-footer-nav a{font-size:14px;font-weight:600;color:var(--pta-white);}
  .pta-footer-nav a:hover{color:var(--pta-orange);}
  .pta-footer-cta{margin-top:65px;}
  .pta-footer-contact h4{font-size:16px;font-weight:800;letter-spacing:0;margin-bottom:39px;}
  .pta-footer-contact p{font-size:14px;font-weight:400;color:var(--pta-meta-on-dark);margin-bottom:15px;}
  .pta-footer-contact a:hover{color:var(--pta-orange);}
  .pta-footer-contact a.phone {color: var(--pta-white)}
  .pta-footer-badges{display:flex;align-items:center;gap:30px;margin-top:81px;}
  .pta-footer-badges img{width:auto;flex:none;object-fit:contain;}
  @media (max-width:900px){
    .pta-footer-grid{grid-template-columns:1fr;gap:48px;}
    .pta-site-footer{padding:64px 0;}
    .pta-footer-cta,.pta-footer-badges,.pta-footer-tagline{margin-top:28px;}
    .pta-footer-contact h4{margin-bottom:20px;}
  }
  @media (max-width:900px){
    .pta-two-col,.pta-output-grid,.pta-form-grid{grid-template-columns:1fr;}
    .pta-cards-grid{grid-template-columns:1fr;}
    .pta-steps{grid-template-columns:1fr;gap:36px;}
    .pta-section-head h2,.pta-block h2{font-size:34px;}
    .pta-form-title{font-size:32px;}
    .pta-card h3,.pta-step h3{font-size:20px;}
    .pta-section-head p:not(.pta-eyebrow),.pta-hero-lead,.pta-form-lead,.pta-bonus-bar p{font-size:17px;}
    .pta-form-row{grid-template-columns:1fr;}
    .pta-icon-illustration{margin:0 auto;}
    .pta-bonus-bar{grid-template-columns:1fr;gap:16px;padding:28px 24px;}
    .pta-wide-head .pta-two-col{grid-template-columns:1fr;}
  }
  @media (prefers-reduced-motion:reduce){.pta-lp, .pta-lp *{transition:none!important;animation:none!important;}}


/* ==========================================================================
   LIGHT HEADER / HERO  (used by /ppckampane)
   ========================================================================== */
  .pta-logo-main{fill:var(--pta-white);}
  .pta-logo-accent{fill:var(--pta-orange);}
  .pta-is-light .pta-logo-main{fill:var(--pta-black);}
  .pta-is-light .pta-brand{color:var(--pta-black);}

  .pta-site-header.pta-is-light{background:var(--pta-white);}
  .pta-site-header.pta-is-light .pta-nav-links a{color:var(--pta-black);}
  .pta-site-header.pta-is-light .pta-nav-links a:hover{color:var(--pta-orange);}

  .pta-hero.pta-is-light{background:var(--pta-white);color:var(--pta-black);}
  /* six-line headline needs tighter leading than the two-line one on /ppcaudit
     (measured: 73px type on a 72px pitch) */
  .pta-hero h1.pta-h1-tight{font-size:73px;line-height:1.0;}
  @media (max-width:760px){
    .pta-hero h1.pta-h1-tight{font-size:38px;line-height:1.1;}
    /*.pta-hero h1.pta-h1-tight br{display:none;}*/ /* let it wrap naturally */
  }
  .pta-hero.pta-is-light .pta-eyebrow{color:var(--pta-black);}
  .pta-hero.pta-is-light .pta-hero-lead{color:var(--pta-black);}
  .pta-hero.pta-is-light .pta-stat .pta-num,
  .pta-hero.pta-is-light .pta-stat .pta-label{color:var(--pta-black);}
  .pta-hero.pta-is-light .pta-hero-bottom > .pta-stats{border-top-color:var(--pta-line-light);}
  .pta-hero.pta-is-light .pta-hero-photo{margin-top:40px;}
  .pta-hero.pta-is-light .pta-hero-photo img{max-height:595px;}

  /* dark outline button for light backgrounds */
  .pta-btn-outline{background:transparent;color:var(--pta-black);border-color:var(--pta-black);}
  .pta-btn-outline:hover{background:var(--pta-black);color:var(--pta-white);}

  /* wider stat captions than /ppcaudit */
  /* measured from the design: column offsets 0 / 212 / 418 within the 598px
     text column, figures at 46px, and the figure must never wrap */
  .pta-stats-wide{grid-template-columns:228px 206px 1fr;gap:0;}
  .pta-stats-wide .pta-num{font-size:46px;white-space:nowrap;margin-bottom:16px;}
  .pta-stats-wide .pta-num .pta-unit{font-size:22px;}
  /* The "+" is the one light glyph in the figure: measured 20px tall with a
     ~3px stroke against 34px digits, i.e. nearly full size but at weight 400,
     not the 800 it inherits from .pta-unit. It also centres on the digits'
     cap height, which sits ~0.11em above where vertical-align:middle lands. */
  .pta-stats-wide .pta-num .pta-plus{
    font-size:.96em;font-weight:400;letter-spacing:0;
    margin-left:3px;vertical-align:middle;
    position:relative;top:-.11em;}
  .pta-stats-wide .pta-label{max-width:150px;}

  /* dark awards strip */
  .pta-awards-strip.pta-is-dark{background:var(--pta-black);padding:70px 0 110px;}
  .pta-awards-strip.pta-is-dark .pta-eyebrow{color:var(--pta-white);margin-bottom:30px;}

/* ==========================================================================
   4-UP CARD GRID + EXPANDABLE DETAIL
   ========================================================================== */
  /* full-width section head, for sections with no illustration */
  .pta-head-full{margin-bottom:60px;}
  .pta-head-full h2{max-width:none;}
  .pta-head-full p{max-width:520px;}

  /* /ppckampane sets its headings tighter than /ppcaudit
     (measured: h2 58px on a 58px pitch, card headings on a 22px pitch) */
  .pta-lp-kampane h1,
  .pta-lp-kampane h2,
  .pta-lp-kampane h3{line-height:1.05;}
  .pta-lp-kampane .pta-block h2,
  .pta-lp-kampane .pta-section-head h2{font-size:58px;line-height:1.0;}
  .pta-lp-kampane .pta-card h3,
  .pta-lp-kampane .pta-step h3{line-height:1.05;}
  @media (max-width:900px){
    .pta-lp-kampane .pta-block h2,
    .pta-lp-kampane .pta-section-head h2{font-size:34px;}
  }

  .pta-deco-pencil{display:block;width:238px;height:auto;margin:26px 0 0;}

  .pta-cards-4{grid-template-columns:repeat(4,1fr);}
  /* equal-height cards so every "+ zobraziť detaily" sits on the same line */
  .pta-cards-4 .pta-card{display:flex;flex-direction:column;}
  .pta-cards-4 .pta-card .pta-num{margin-bottom:10px;}   /* gap under "01" */
  .pta-cards-4 .pta-card-more{margin-top:auto;}
  .pta-card-panel{background:var(--pta-white);border-color:var(--pta-line-panel);}
  .pta-card-panel .pta-card{border-color:var(--pta-line-panel);}

  .pta-card-more{padding-top:22px;}
  .pta-card-more summary{
    display:inline-flex;align-items:center;gap:6px;
    color:var(--pta-orange);font-size:13px;font-weight:500;
    cursor:pointer;list-style:none;
  }
  .pta-card-more summary::-webkit-details-marker{display:none;}
  /* inherits summary's weight (500) — in the design the + is the same
     hairline as the label it sits next to, not a bold marker */
  .pta-card-more summary::before{content:'+';}
  .pta-card-more[open] summary::before{content:'–';}
  .pta-card-more summary:hover{text-decoration:underline;}
  .pta-card-more summary:focus-visible{outline:2px solid var(--pta-orange);outline-offset:3px;}
  .pta-card-more ul{margin-top:14px;display:flex;flex-direction:column;gap:8px;}
  .pta-card-more li{
    position:relative;padding-left:16px;font-size:13px;line-height:1.5;color:#000;}
  .pta-card-more li::before{
    content:'';position:absolute;left:0;top:8px;width:5px;height:5px;
    border-radius:50%;background:var(--pta-orange);}

/* ==========================================================================
   STEPS FOOTER — divider, centred CTA, fine print
   ========================================================================== */
  .pta-steps-footer{
    margin-top:56px;padding-top:44px;border-top:1px solid #2b2b2b;text-align:center;}
  .pta-steps-footer .pta-fineprint{
    margin-top:18px;font-size:13px;color:var(--pta-meta-on-dark);}

/* ==========================================================================
   RESULT CARDS — big orange figure + caption + tag
   ========================================================================== */
  .pta-result .pta-figure{
    color:var(--pta-orange);font-size:56px;font-weight:900;line-height:1;
    letter-spacing:-.03em;display:flex;align-items:baseline;gap:9px;}
  .pta-result .pta-figure .pta-unit{
    font-size:26px;font-weight:400;letter-spacing:0;
    color:var(--pta-black);   /* design: "%" and "/mes" are black, not orange */
  }
  .pta-result .pta-figure-label{
    margin-top:10px;font-size:14px;font-weight:600;color:#000;}
  .pta-result p{margin-top:18px;}
  .pta-result .pta-tag{
    margin-top:22px;font-size:13px;color:var(--pta-meta-on-light);}

/* ==========================================================================
   FORM — select control
   ========================================================================== */
  .pta-lp .wpcf7 select{
    width:100%;font-family:inherit;font-size:15px;color:var(--pta-white);
    background:#1a1a1a;border:1px solid var(--pta-line-dark);border-radius:3px;
    padding:16px;min-height:58px;outline:none;
    -webkit-appearance:none;appearance:none;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 16px center;
  }
  .pta-lp .wpcf7 select:focus{border-color:var(--pta-orange);}

  @media (max-width:1100px){
    .pta-cards-4{grid-template-columns:repeat(2,1fr);}
  }
  @media (max-width:760px){
    .pta-cards-4{grid-template-columns:1fr;}
    .pta-stats-wide{grid-template-columns:1fr;gap:28px;}
    .pta-result .pta-figure{font-size:44px;}
  }


/* ==========================================================================
   Contact Form 7 overrides
   CF7 wraps every field in <span class="wpcf7-form-control-wrap">, which is
   inline by default and collapses the full-width inputs. This is the fix.
   ========================================================================== */
.pta-lp .wpcf7{margin:0;padding:0;}
.pta-lp .wpcf7-form-control-wrap{display:block;position:static;}
.pta-lp .wpcf7-form-control-wrap[data-name="rozpocet"]{margin-top:15px;}
.pta-lp .wpcf7 input[type=text],
.pta-lp .wpcf7 input[type=email],
.pta-lp .wpcf7 input[type=tel],
.pta-lp .wpcf7 input[type=url],
.pta-lp .wpcf7 textarea{
  width:100%;background:transparent;border:none;
  border-bottom:1px solid var(--pta-line-dark);
  color:var(--pta-white);font-family:inherit;font-size:15px;
  padding:4px 0;outline:none;border-radius:0;box-shadow:none;
}
.pta-lp .wpcf7 textarea{resize:vertical;min-height:74px;}
.pta-lp .wpcf7 input:focus,
.pta-lp .wpcf7 textarea:focus{border-bottom-color:var(--pta-orange);}
.pta-lp .wpcf7 input::placeholder,
.pta-lp .wpcf7 textarea::placeholder{color:#8a8a8a;opacity:1;}

/* validation + response messages, in brand colours */
.pta-lp .wpcf7-not-valid-tip{color:var(--pta-orange);font-size:12px;font-weight:600;margin-top:7px;}
.pta-lp .wpcf7 .wpcf7-not-valid{border-bottom-color:var(--pta-orange);}
.pta-lp .wpcf7-response-output{
  margin:24px 0 0;padding:14px 18px;font-size:14px;line-height:1.5;
  border:2px solid var(--pta-orange);color:var(--pta-white);background:#141312;
}
.pta-lp .wpcf7 form.sent .wpcf7-response-output{border-color:#3fbf6a;}

/* CF7's submit button + its ajax spinner */
.pta-lp .wpcf7 input[type=submit]{
  -webkit-appearance:none;appearance:none;
  display:inline-flex;align-items:center;justify-content:center;
  height:49px;min-width:242px;padding:0 26px;
  font-family:inherit;font-size:15px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;background:var(--pta-orange);color:#000;
  border:2px solid transparent;border-radius:2px;cursor:pointer;
  transition:background .15s ease;
}
.pta-lp .wpcf7 input[type=submit]:hover{background:#e57a04;}
.pta-lp .wpcf7 input[type=submit]:focus-visible{outline:2px solid var(--pta-orange);outline-offset:3px;}
.pta-lp .wpcf7-spinner{margin:0 0 0 12px;vertical-align:middle;}

/* CF7's auto-formatter wraps [submit] in a <p> of its own, and the theme's
   paragraph margins then stack around the button — measured 4px above it on
   /ppcaudit (design: 46) and 49px below it on /ppckampane (design: 22). Zero
   that one <p> so the gap either side comes from our rules alone. */
.pta-lp .wpcf7 form > p:has(input[type=submit]){margin:0;}

/* honeypot — must stay invisible but not display:none (bots skip those) */
.pta-lp .pta-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden;}


/* ==========================================================================
   PAGE-SPECIFIC OVERRIDES — keep this block LAST
   --------------------------------------------------------------------------
   These share specificity with the base rules above (.pta-lp-kampane and
   .pta-lp are both one class), so they only win by coming later in the file.
   Anything page-specific belongs here, not next to the component it modifies.
   ========================================================================== */

/* /ppcaudit: the consent line sits ABOVE the submit, in white (not the muted
   grey used elsewhere on dark), with a measured 46px gap down to the button.
   :not(.pta-lp-kampane) because /ppcaudit has no page class of its own. */
.pta-lp:not(.pta-lp-kampane) .pta-consent{
  color:var(--pta-white);
  margin:20px 0 46px;
}
/* the theme's link colour is more specific than .pta-lp a{color:inherit} */
.pta-lp:not(.pta-lp-kampane) .pta-consent a{color:inherit;}


/* /ppckampane: submit is centred in the column, consent sits beneath it.
   Measured from the wireframe: 388px wide, centre aligned with the fields. */
.pta-lp-kampane .wpcf7 input[type=submit]{
  display:block;
  width:100%;
  max-width:390px;
  margin:50px auto 0;
}
/* No top margin of its own — the gap above the button carries the spacing.
   Still needs the CF7 <p> reset above, or the theme re-adds a margin here. */
.pta-lp-kampane .pta-consent{
  text-align:center;
  margin:0 auto;
}

/* /ppckampane hero CTAs are content-width with a 10px gap, not the equal
   242px pair used on /ppcaudit (measured: 327px + 10 + 190px). */
.pta-lp-kampane .pta-hero-ctas{gap:10px;}
.pta-lp-kampane .pta-hero-ctas .pta-btn-lg{min-width:0;}

@media (max-width:760px){
  .pta-lp-kampane .pta-hero-ctas .pta-btn-lg{width:100%;}
}