/* ==========================================================================
   /consent/ — page-specific layout (Consent-cluster overview page).
   Links after site.css (tokens/buttons) + inner.css (shared inner-page bits)
   + pricing.css (switcher + plan cards). Only per-section arrangement and
   image sizing live here. Reuses inner.css components (.grad-head, .body-copy,
   .lead, .two-col, .ipanel) wherever the design matches.
   ========================================================================== */

/* Body offset: fixed 82px header + fixed 50px 2nd-level strip (>=1200px).
   Below 1200px the strip is hidden and the header collapses to the mobile bar. */
body { padding-top: 132px; }
@media screen and (max-width: 1199px) { body { padding-top: 60px; } }

/* Submenu active-item fallback (the partial's inline script also bolds it). */
#to-consent .submenu__link { font-weight: 900; }

/* ==========================================================================
   01 — Hero (dark red-gradient art; logo + centred title, illustration + copy)
   ========================================================================== */
.chero {
  /* reuse .ihero shell (position/veil/colour); swap in the consent hero art */
  /* background art inherited from .ihero (shared canonical /img/hero-bg.png) */
  padding: 81px 0 /* live lockup y≈215-219 */ 72px;
}
.chero-inner { position: relative; z-index: 1; }
.chero-brand {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin: 6px 0 10px;
}
.chero-brand img { height: 48px; width: auto; }
@media (max-width: 640px) { .chero-brand img { height: 35px; } }
.chero-title {
  text-align: center;
  font-size: clamp(36px, 5.6vw, 62px);
  line-height: 1.12; font-weight: 700; letter-spacing: -0.01em;
  color: #fff; margin: 0 0 40px;
}
.chero-title em { font-style: normal; color: var(--coral); display: block; }

.chero-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
}
.chero-illus img { width: 100%; height: auto; }

.chero-bullets { list-style: none; margin: 0 0 26px; padding: 0; }
.chero-bullets li {
  position: relative; padding-left: 22px; margin-bottom: 12px;
  font-size: 18px; line-height: 1.45; color: #fff;
}
.chero-bullets li::before { content: "•"; position: absolute; left: 2px; top: -1px; font-size: 20px; }
.chero-bullets a { color: #fff; text-decoration: underline; }

.chero-badges {
  display: inline-flex; align-items: center; gap: 22px;
  background: rgba(255,255,255,.08); border-radius: 16px;
  padding: 16px 26px; margin: 0 0 30px;
}
.chero-badges img { display: block; }
.chero-badges .b-gcpp { height: 40px; }
.chero-badges .b-cmp  { height: 52px; }
.chero-badges .b-tcf  { height: 44px; }

.chero-cta { display: flex; gap: 18px; flex-wrap: wrap; }
.chero-cta .pill-btn { border-radius: 70px; height: 56px; padding: 0 34px; font-size: 14px; }
.chero-cta .pill-btn--red { font-weight: 700; }

/* ==========================================================================
   02 — Trusted-by strip
   ========================================================================== */
.trusted { text-align: center; }
.trusted-head { color: var(--coral); font-size: 24px; font-weight: 700; margin: 0 0 26px; }
.trusted-logos {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 0;
}
/* 5 logos (851px of artwork) + 4 dividers must stay on one row inside the
   1152px .wrap content box, so 26px of side padding is the ceiling here. */
.trusted-logos li { list-style: none; padding: 0 26px; display: grid; place-items: center; }
.trusted-logos li + li { border-left: 1px solid #D7DEE8; }
/* Live (Tilda rec507306338) sizes every logo atom individually, so size by
   WIDTH here, not by a shared max-height. A uniform `max-height: 36px` blew
   the wide Quattroruote lockup up to 311px, overflowed the row and wrapped it
   onto a second line under El Cronista/azerion/CaughtOffside; it also left
   il Fatto Quotidiano at 0px, because that SVG carries only a viewBox (no
   width/height) and a height cap gives a grid item no resolvable width.
   Widths below are live's rendered widths. */
.trusted-logos img { width: auto; height: auto; max-height: 47px; }
.trusted-logos li:nth-child(1) img { width: 202px; }  /* El Cronista */
.trusted-logos li:nth-child(2) img { width: 128px; }  /* il Fatto Quotidiano */
.trusted-logos li:nth-child(3) img { width: 172px; }  /* azerion */
.trusted-logos li:nth-child(4) img { width: 177px; }  /* CaughtOffside */
.trusted-logos li:nth-child(5) img { width: 172px; }  /* Quattroruote */

/* ==========================================================================
   03 — Global Regulation Support
   ========================================================================== */
.regulation .ipanel { padding: 54px 60px; }
.regulation .two-col { gap: 40px; }
.regulation-cloud { width: 100%; height: auto; }

/* ==========================================================================
   04 — Flexible setup (Design / Vendor mgmt / Disclosures / Languages)
   ========================================================================== */
.flexsetup .two-col { gap: 40px; align-items: center; }
.feature-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 40px; }
.fgroup h3 { font-size: 21px; font-weight: 700; color: var(--navy); margin: 0 0 12px; }
.fgroup ul { list-style: none; margin: 0; padding: 0; }
.fgroup li {
  position: relative; padding-left: 22px; margin-bottom: 10px;
  font-size: 16px; line-height: 1.45; color: var(--body);
}
.fgroup li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--coral);
}
.flexsetup-visual img { width: 100%; height: auto; }

/* ==========================================================================
   Shared: coral-dot bullet list (reused in 05/07/08)
   ========================================================================== */
.dot-list { list-style: none; margin: 0; padding: 0; }
.dot-list li {
  position: relative; padding-left: 24px; margin-bottom: 16px;
  font-size: 17px; line-height: 1.45; color: var(--body);
}
.dot-list li:last-child { margin-bottom: 0; }
.dot-list li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 9px; height: 9px; border-radius: 50%; background: var(--coral);
}

/* ==========================================================================
   05 — Reporting
   ========================================================================== */
.reporting .two-col { gap: 40px; align-items: center; }
.reporting-visual img { width: 100%; height: auto; }
.reporting .ipanel { padding: 40px 44px; }

/* ==========================================================================
   06 — Activate Consent Mode v2
   ========================================================================== */
.cmv2-head { position: relative; }
.cmv2-head .badge-cmp { position: absolute; top: 0; right: 0; height: 96px; }
.cmv2-head .body-copy { max-width: 780px; }
.cmv2-head .body-copy a { color: var(--body); text-decoration: underline; }
.cmv2-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 34px 0 22px; }
.cmv2-card { background: var(--tint); border-radius: 20px; padding: 30px 30px 34px; }
.cmv2-card img { height: 88px; width: auto; margin: 0 0 26px; }
.cmv2-card h3 { font-size: 22px; font-weight: 700; color: var(--navy); margin: 0 0 10px; }
.cmv2-card p { font-size: 16px; line-height: 1.5; color: var(--body); margin: 0; }
.cmv2-golive {
  display: grid; grid-template-columns: auto 1fr; gap: 34px; align-items: center;
  background: var(--tint); border-radius: 20px; padding: 30px 40px;
}
.cmv2-golive img { width: 200px; height: auto; }
.cmv2-golive p { font-size: 18px; line-height: 1.55; color: var(--body); margin: 0; max-width: 640px; }

/* ==========================================================================
   07 — Paywall Integration
   ========================================================================== */
.paywall .two-col { gap: 40px; align-items: center; }
.paywall .ipanel { padding: 40px 44px; }
.paywall-visual img { width: 100%; height: auto; }

/* ==========================================================================
   08 — Flexible Vendor Management
   ========================================================================== */
.vendormgmt .two-col { gap: 40px; align-items: center; }
.vendormgmt-visual img { width: 100%; height: auto; }
.vendormgmt .ipanel { padding: 40px 44px; }

/* ==========================================================================
   09 — Easy Implementation (central card ringed by floating logo pills)
   ========================================================================== */
/* The live block is a Tilda T396 artboard: a fixed 1200px design grid with
   every pill, the card and the 4px white connector bars placed at absolute
   pixel coordinates. The rebuild approximated it with percentages and had no
   connectors at all, so nothing lined up. We reproduce the original grid 1:1.

   Mechanism: `.easyimpl-stage` carries `font-size: 1px` (scaled down below
   1260px so the whole diagram shrinks instead of overflowing) and every
   coordinate below is expressed in `em`, i.e. the exact Tilda pixel value on
   the 1200 grid. Coordinates are the live values minus 110px (the artboard's
   top padding). The seven connector bars are painted as background gradients
   on the stage itself — they sit behind the opaque white card and pills
   exactly as the z-ordering does on the live page, with no extra markup. */
.easyimpl-stage {
  position: relative;
  --u: min(1px, calc((100vw - 60px) / 1200));
  font-size: var(--u);
  width: 1200em; height: 590em;
  margin: 0 auto;
  /* 7 connector bars, #fff on the --tint band, 4px thick (Tilda values) */
  background-image:
    linear-gradient(#fff, #fff), linear-gradient(#fff, #fff),
    linear-gradient(#fff, #fff), linear-gradient(#fff, #fff),
    linear-gradient(#fff, #fff), linear-gradient(#fff, #fff),
    linear-gradient(#fff, #fff);
  background-repeat: no-repeat;
  background-size:
    4em 100em,  4em 100em,          /* top verticals: Flutter, iOS       */
    685em 4em, 685em 4em,           /* horizontals: GTM/WP, RN/Android   */
    4em 100em,  4em 100em, 4em 100em; /* bottom: bubble, TYPO3, Drupal   */
  background-position:
    503.5em 48em,  685.5em 48em,
    260.5em 207em, 267.5em 308em,
    419.5em 435em, 597.5em 432em, 776.5em 432em;
}
.easyimpl-card {
  /* anchored on the card's centre (100em + 383em/2) rather than its top edge:
     with the EN copy this lands exactly on the live 100em/383em box, and the
     longer ES/IT/PT copy then grows symmetrically instead of running into the
     bottom row of pills */
  position: absolute; top: 291.5em; left: 320em; transform: translateY(-50%);
  width: 563em; min-height: 383em;
  background: #fff; border-radius: 45em; padding: 48em 46em 45em;
  text-align: center; z-index: 2;
}
/* `em` on these two resolves against their own font-size, so their vertical
   rhythm is written against the stage unit `--u` instead. */
.easyimpl-card .grad-head {
  text-align: center; font-size: 45em; line-height: 1.2;
  letter-spacing: normal;                 /* live title is not tightened */
  margin: 0 0 calc(20 * var(--u));
}
.easyimpl-card p {
  font-size: 16em; line-height: 1.5; color: var(--body);
  margin: 0 0 calc(24 * var(--u));
}
.easyimpl-card p:last-child { margin-bottom: 0; }
.easyimpl-card a { color: var(--body); text-decoration: underline; }

.logo-pill {
  position: absolute; z-index: 3;
  display: inline-flex; align-items: center; justify-content: center;
  height: 58em; background: #fff; border-radius: 45em;
}
.logo-pill img { width: auto; max-width: 86%; display: block; }
/* placement + logo scale around the card (desktop) — live Tilda geometry */
.lp-flutter { left: 435em; top:   1em; width: 137em; }
.lp-ios     { left: 620em; top:   0em; width: 136em; }
.lp-gtm     { left:  50em; top: 180em; width: 218em; }
.lp-rn      { left:  50em; top: 280em; width: 218em; }
.lp-wp      { left: 931em; top: 180em; width: 218em; }
.lp-android { left: 931em; top: 281em; width: 218em; }
.lp-bubble  { left: 354em; top: 532em; width: 136em; }
.lp-typo3   { left: 532em; top: 532em; width: 136em; }
.lp-drupal  { left: 710em; top: 532em; width: 137em; }
.lp-flutter img { height: 23em; }
.lp-ios     img { height: 32em; }
.lp-gtm     img { height: 17em; }
.lp-rn      img { height: 20em; }
.lp-wp      img { height: 29em; }
.lp-android img { height: 21em; }
.lp-bubble  img { height: 19em; }
.lp-typo3   img { height: 21em; }
.lp-drupal  img { height: 20em; }

/* ==========================================================================
   10 — Fully Integrated
   ========================================================================== */
.fullyint-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.fi-card {
  background: var(--tint); border-radius: 20px; padding: 34px 24px 30px;
  text-align: center;
}
.fi-card img { height: 66px; width: auto; margin: 0 auto 22px; }
.fi-card p { font-size: 17px; font-weight: 700; line-height: 1.35; color: var(--navy); margin: 0; }

/* ==========================================================================
   11–13 — Plans & Pricing (band + switcher + cards, one tinted area)
   ========================================================================== */
.pricing .pricing-title { text-align: center; margin: 0 0 30px; }
.pricing .price-switch-wrap { text-align: center; margin: 0 0 34px; }

/* ==========================================================================
   14 — Get started CTA
   ========================================================================== */
.cta-panel { text-align: center; padding: 48px 24px 56px; }
.cta-panel img { width: 210px; height: auto; margin: 0 auto 14px; }
.cta-head {
  font-size: clamp(34px, 6vw, 62px); line-height: 1.1; font-weight: 800;
  color: var(--navy); margin: 0 0 14px; letter-spacing: -0.01em;
}
.cta-sub { font-size: 18px; color: var(--body); margin: 0 0 28px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media screen and (max-width: 980px) {
  .two-col { grid-template-columns: 1fr; gap: 32px; }
  .chero-grid { grid-template-columns: 1fr; gap: 26px; }
  .chero-illus { order: -1; }
  .feature-groups { gap: 22px 30px; }
  .cmv2-cards { grid-template-columns: 1fr; gap: 16px; }
  .cmv2-golive { grid-template-columns: 1fr; text-align: center; gap: 20px; }
  .cmv2-golive img { margin: 0 auto; }
  .cmv2-head .badge-cmp { position: static; display: block; height: 84px; margin: 0 0 18px; }
  .fullyint-cards { grid-template-columns: repeat(2, 1fr); }
  /* stack visuals above copy where the image leads */
  .reporting .reporting-visual, .vendormgmt .vendormgmt-visual { order: -1; }
}

@media screen and (max-width: 860px) {
  .chero { padding: 26px 0 44px; }
  .chero-title { font-size: clamp(30px, 8vw, 42px); margin: 0 0 24px; }
  .chero-bullets li { font-size: 16px; }
  .chero-badges { gap: 16px; padding: 12px 18px; flex-wrap: wrap; }
  .chero-badges .b-gcpp { height: 32px; } .chero-badges .b-cmp { height: 42px; } .chero-badges .b-tcf { height: 36px; }
  /* long ES labels ("Pruébelo gratis ahora"): the global nowrap made the
     shrunk flex button spill outside the viewport, clipping the text — let
     the label wrap to a second line inside the pill instead */
  .chero-cta .pill-btn { flex: 1; min-width: 150px; white-space: normal; height: auto; min-height: 56px; padding: 8px 18px; text-align: center; }
  .regulation .ipanel { padding: 30px 24px; }
  .feature-groups { grid-template-columns: 1fr; }
  .trusted-logos li { padding: 12px 20px; }
  .trusted-logos li + li { border-left: 0; }
}

/* Easy Implementation: collapse the absolute ring into stacked rows.
   Mirrors the live page's ≤639px layout — Flutter/iOS + GTM/WordPress above
   the card, then bubble/TYPO3/Drupal and React Native/Android below it. The
   connector bars are dropped here (Tilda re-places them with a third set of
   coordinates; a stacked wrap makes them meaningless). */
@media screen and (max-width: 900px) {
  .easyimpl-stage {
    font-size: 1px; width: 100%; height: auto; background-image: none;
    display: flex; flex-direction: column; align-items: center; gap: 16px;
  }
  .easyimpl-card {
    position: static; transform: none;
    width: 100%; max-width: 560px; min-height: 0; order: 2;
    padding: 34px 28px; border-radius: 30px;
  }
  .easyimpl-card .grad-head { font-size: clamp(30px, 8vw, 40px); margin: 0 0 18px; }
  .easyimpl-card p { font-size: 16px; margin: 0 0 18px; }
  .logo-pill { position: static; width: auto; height: 52px; padding: 0 22px; }
  .logo-pill img { max-width: none; }
  .easyimpl-logos-top, .easyimpl-logos-bottom {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 14px;
    max-width: 100%;
  }
  .easyimpl-logos-top { order: 1; }
  .easyimpl-logos-bottom { order: 3; }
  /* live mobile order in the lower group */
  .lp-bubble { order: 1; } .lp-typo3 { order: 2; } .lp-drupal { order: 3; }
  .lp-rn { order: 4; } .lp-android { order: 5; }
}
@media screen and (min-width: 901px) {
  .easyimpl-logos-top, .easyimpl-logos-bottom { display: contents; }
}

@media screen and (max-width: 560px) {
  .fullyint-cards { grid-template-columns: 1fr; max-width: 380px; margin: 0 auto; }
}