/* =========================================================
   ar-pilot.css
   Design tokens for the 6 German free-trial pages.
   Mirrors the Spanish reference PDF (light hero, phone-mockup
   insight, gradient CTA, comparison table, reviews carousel).
   Drop this file into /assets/css/ar-pilot.css on production
   OR copy the rules into newstyle.css.
   ========================================================= */

:root{
  --arp-orange:#FF7A1A;
  --arp-orange-soft:#FFE5D1;
  --arp-pink:#FE0979;
  --arp-pink-soft:#FFE6EB;
  --arp-blue:#5B6CFF;
  --arp-blue-soft:#E8EEFF;
  --arp-text:#0E1430;
  --arp-muted:#5C627A;
  --arp-card:#F4F7FF;
  --arp-tiktok-cyan:#00F2FE;
  --arp-tiktok-red:#FE2C55;
  --arp-tiktok-teal:#25F4EE;
  --arp-radius:18px;
  --arp-shadow:0 12px 36px rgba(14,20,48,.06);
}

/* ---------- HERO ---------- */
.ar-pilot-hero{ background:#E8F3FF; padding:64px 0 88px; }
.ar-pilot-hero__badge{
  display:inline-block; padding:8px 16px; border-radius:999px;
  background:var(--arp-pink-soft); color:var(--arp-pink);
  font-weight:700; font-size:14px; margin-bottom:18px;
}
.ar-pilot-hero__h1{
  font-size:48px; line-height:1.15; font-weight:800; color:var(--arp-text);
  letter-spacing:-.5px; margin:6px auto 12px; max-width:980px;
}
.ar-pilot-hero__h1-accent{
  background:linear-gradient(135deg,#FF7A1A,#FE0979);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.ar-pilot-hero__rocket{ display:inline-block; width:54px; vertical-align:middle; margin-left:8px; }
.ar-pilot-hero__sub{
  max-width:760px; margin:14px auto 0; color:var(--arp-text);
  font-size:17px; line-height:1.6;
}
.ar-pilot-hero__grid{ justify-content:center; gap:24px; }
.ar-pilot-hero__brand,
.ar-pilot-hero__form{
  background:#fff; border-radius:var(--arp-radius);
  padding:30px 28px; box-shadow:var(--arp-shadow);
  border:1px solid rgba(255,122,26,.18);
}
.ar-pilot-hero__brand{ display:flex; flex-direction:column; align-items:flex-start; }
.ar-pilot-hero__logo{ height:36px; margin-bottom:18px; }
.ar-pilot-hero__bullets{ list-style:none; padding:0; margin:0; }
.ar-pilot-hero__bullets li{
  font-size:16px; color:var(--arp-text); padding:8px 0;
}
.ar-pilot-hero__bullets li i{ color:var(--arp-pink); margin-right:8px; }
.ar-pilot-hero__rating{ margin-top:18px; }
.ar-pilot-hero__rating-stars i{ color:#FFB400; font-size:17px; }
.ar-pilot-hero__rating-score{ font-weight:800; margin-left:8px; color:var(--arp-text); }
.ar-pilot-hero__rating-text{ color:var(--arp-muted); font-size:14px; margin-top:6px; }

.ar-pilot-hero__form-h{ font-size:24px; font-weight:800; color:var(--arp-text); margin-bottom:6px; }
.ar-pilot-hero__form-sub{ color:var(--arp-muted); margin-bottom:18px; }
.ar-pilot-hero__form .form-label{ font-size:14px; font-weight:600; color:var(--arp-text); margin-bottom:6px; }
.ar-pilot-hero__form .form-control{
  padding:12px 14px; border-radius:10px; border:1px solid #DDE2EE;
  background:#F4F7FF; font-size:15px;
}
.ar-pilot-hero__form .primary-btn{
  background:linear-gradient(135deg,#FF7A1A,#FE0979);
  border:0; color:#fff; font-weight:700;
  padding:14px 16px; border-radius:12px; font-size:16px;
}
.ar-pilot-hero__form .primary-btn:hover{ filter:brightness(1.05); }

/* ---------- GENERIC SECTION ---------- */
.ar-pilot-section{ padding:64px 0; }
.ar-pilot-section__h2{ font-size:34px; font-weight:800; color:var(--arp-text); }
.ar-pilot-prose p{ font-size:16px; line-height:1.7; color:var(--arp-text); margin-bottom:14px; }
.ar-pilot-prose ul, .ar-pilot-prose ol{ padding-left:22px; }

/* ---------- PHONE-MOCKUP MECHANIC ---------- */
.ar-pilot-mech{ padding:64px 0; background:#fff; }
.ar-pilot-mech--dark{ /* keep light hue, the dark mockup lives inside */ }
.ar-pilot-mech__title{ font-size:30px; font-weight:800; color:var(--arp-text); line-height:1.25; }
.ar-pilot-mech__title-accent{
  background:linear-gradient(135deg,#FF7A1A,#FE0979);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.ar-pilot-mech__phone{ position:relative; max-width:360px; margin:0 auto; }
.ar-pilot-mech__phone-frame{
  background:#0E1430; border-radius:38px; padding:22px 14px;
  box-shadow:0 30px 60px rgba(14,20,48,.18);
}
.ar-pilot-mech__phone-screen{ background:#0E1430; color:#fff; text-align:center; padding:18px 14px 28px; border-radius:24px; }
.ar-pilot-mech__phone-tab{ color:#fff; font-weight:700; border-bottom:3px solid var(--arp-pink); display:inline-block; padding-bottom:6px; margin-bottom:18px; }
.ar-pilot-mech__phone-circle{
  width:90px; height:90px; border-radius:50%; margin:0 auto 12px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:18px;
}
.ar-pilot-mech__phone-handle{ font-size:14px; opacity:.85; }
.ar-pilot-mech__phone-count{ font-size:30px; font-weight:800; margin-top:6px; color:#fff; }
.ar-pilot-mech__phone-label{ font-size:11px; letter-spacing:1.5px; opacity:.7; margin-bottom:14px; }
.ar-pilot-mech__phone-cta{ width:80%; border:0; padding:10px 0; border-radius:999px; color:#fff; font-weight:700; }
.ar-pilot-mech__phone-foot{
  margin-top:18px; background:#0E1430; color:#fff; font-weight:800;
  border-radius:999px; padding:10px 16px; font-size:13px; text-align:center;
}
.ar-pilot-mech__phone-icon{
  position:absolute; display:flex; align-items:center; gap:8px;
  background:#fff; padding:8px 12px; border-radius:50px;
  box-shadow:var(--arp-shadow); font-size:11px; font-weight:700;
  color:var(--arp-text);
}
.ar-pilot-mech__phone-icon i{ width:32px; height:32px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center; color:#fff; font-size:14px; }
.ar-pilot-mech__phone-icon--tl{ top:36px; left:-22px; }
.ar-pilot-mech__phone-icon--tl i{ background:#16A34A; }
.ar-pilot-mech__phone-icon--tr{ top:36px; right:-22px; }
.ar-pilot-mech__phone-icon--tr i{ background:var(--arp-pink); }
.ar-pilot-mech__phone-icon--bl{ bottom:80px; left:-22px; }
.ar-pilot-mech__phone-icon--bl i{ background:#0E1430; }
.ar-pilot-mech__phone-icon--br{ bottom:80px; right:-22px; }
.ar-pilot-mech__bubble{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:50%; background:var(--arp-pink); color:#fff;
  font-weight:800; font-size:14px; line-height:1;
}
.ar-pilot-mech__bubble small{ font-size:9px; font-weight:600; }
.ar-pilot-mech__callout{
  display:flex; gap:14px; align-items:flex-start;
  background:var(--arp-pink-soft); border:1px solid #FFD2DC; border-radius:14px;
  padding:18px; margin-bottom:18px;
}
.ar-pilot-mech__callout-icon{
  width:42px; height:42px; border-radius:50%; background:var(--arp-pink);
  color:#fff; display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.ar-pilot-mech__callout-h{ font-weight:800; color:var(--arp-text); }
.ar-pilot-mech__callout-sub{ color:var(--arp-muted); font-size:14px; }
.ar-pilot-mech__prose p{ color:var(--arp-text); margin-bottom:12px; line-height:1.65; }
.ar-pilot-mech__result{ display:flex; gap:14px; align-items:center; padding:16px 18px; border-radius:14px; color:#fff; }
.ar-pilot-mech__result-icon{ font-size:28px; color:#fff; }
.ar-pilot-mech__result-h{ font-weight:800; }
.ar-pilot-mech__result-text{ opacity:.95; }

/* ---------- THREE-PILLAR DIFF ---------- */
.ar-pilot-diff{ padding:64px 0; background:#fff; }
.ar-pilot-diff__card{
  background:#fff; border:1px solid #E6EAF5; border-radius:var(--arp-radius);
  padding:28px; text-align:center; height:100%;
}
.ar-pilot-diff__icon{
  width:64px; height:64px; border-radius:50%; color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:24px; margin-bottom:14px;
}
.ar-pilot-diff__card h4{ font-weight:800; color:var(--arp-text); margin-bottom:10px; }
.ar-pilot-diff__card p{ color:var(--arp-muted); font-size:15px; }
.ar-pilot-diff__stats{
  margin-top:34px; padding:30px; border-radius:var(--arp-radius);
  color:#fff; display:flex; gap:24px; align-items:center;
}
.ar-pilot-diff__stats-num{ font-size:64px; font-weight:800; line-height:1; }
.ar-pilot-diff__stats-text{ font-size:17px; line-height:1.5; opacity:.95; }

/* ---------- 4-STEP HOW ---------- */
.ar-pilot-steps .ar-pilot-step{
  background:#fff; border:1px solid #E6EAF5; border-radius:var(--arp-radius);
  padding:24px; height:100%; text-align:left;
}
.ar-pilot-step__num{
  width:42px; height:42px; border-radius:12px; color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:800; margin-bottom:12px;
}
.ar-pilot-step h5{ font-weight:800; color:var(--arp-text); }
.ar-pilot-step p{ color:var(--arp-muted); font-size:15px; }

/* ---------- ALGORITHMIC MECHANIC (dark inverted) ---------- */
.ar-pilot-mech-prose{
  background:linear-gradient(135deg,#0E1430,#16203F);
  padding:64px 0; color:#fff;
}
.ar-pilot-mech-prose__body p{ color:rgba(255,255,255,.88); line-height:1.7; margin-bottom:14px; }
.ar-pilot-mech-prose__h{ font-weight:800; margin-top:18px; }
.ar-pilot-mech-prose__quote{ font-style:italic; font-weight:600; margin-top:8px; }
.ar-pilot-mech-prose__critical{
  border-left:4px solid var(--arp-pink); background:rgba(254,9,121,.12);
  padding:14px 18px; border-radius:0 12px 12px 0; margin-top:18px;
}

/* ---------- TWO-CARD INSIGHTS ---------- */
.ar-pilot-insights{ padding:64px 0; background:#F8FAFF; }
.ar-pilot-insights__card{
  background:#fff; border-radius:var(--arp-radius); padding:34px;
  box-shadow:var(--arp-shadow);
}
.ar-pilot-insights__tag{ display:inline-block; padding:4px 12px; border-radius:999px; font-size:12px; font-weight:700; margin-bottom:10px; }
.ar-pilot-insights__h{ font-weight:800; color:var(--arp-text); margin-bottom:14px; font-size:24px; }
.ar-pilot-insights__h em{ color:var(--arp-blue); font-style:normal; font-weight:800; }
.ar-pilot-insights__body p{ color:var(--arp-text); line-height:1.65; margin-bottom:10px; }
.ar-pilot-insights__gauge{
  background:#F4F7FF; border:1px dashed #DDE2EE; padding:18px; border-radius:14px; text-align:center;
}
.ar-pilot-insights__gauge svg{ max-width:240px; }
.ar-pilot-insights__gauge-cap{ font-weight:700; color:var(--arp-text); margin-top:8px; }
.ar-pilot-insights__bots{
  background:#F4F7FF; border:1px dashed #DDE2EE; padding:18px; border-radius:14px;
}
.ar-pilot-insights__bots-bad,
.ar-pilot-insights__bots-good{
  background:#fff; padding:12px; border-radius:10px; margin-bottom:10px;
}
.ar-pilot-insights__bots-bad{ border:1px dashed #E63946; }
.ar-pilot-insights__bots-good{ border:1px solid var(--arp-tiktok-cyan); }
.ar-pilot-insights__bots-tag{ font-size:10px; font-weight:800; letter-spacing:1px; color:var(--arp-muted); margin-bottom:6px; }
.ar-pilot-insights__bots-row{ display:flex; gap:10px; align-items:center; color:var(--arp-text); }
.ar-pilot-insights__bots-row span{ width:36px; height:36px; border-radius:50%; background:#0E1430; color:#fff; display:inline-flex; align-items:center; justify-content:center; font-weight:800; }
.ar-pilot-insights__bots-cap{ font-size:11px; font-weight:800; color:var(--arp-text); text-align:center; margin-top:6px; }

/* ---------- COMPARISON TABLE  (Master Command spec — .cmp-section / .cmp-buzz) ---------- */
.cmp-section{ max-width:920px; margin:0 auto; padding:0 12px; }
.cmp-buzz{
  position:relative;
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  background:#fff;
  border-radius:var(--arp-radius);
  overflow:hidden;
  box-shadow:var(--arp-shadow);
}
.cmp-cell{
  padding:18px 22px;
  display:flex; align-items:center; gap:10px;
  border-bottom:1px solid #F0F2F8;
  background:#fff;
  font-size:15px; color:var(--arp-text);
  position:relative; z-index:2;
}
.cmp-h-empty,
.cmp-h-us,
.cmp-h-others{
  background:transparent;
  border-bottom:1px solid #F0F2F8;
  min-height:90px;
  justify-content:center;
}
.cmp-h-us img{ display:block; max-height:44px; width:auto; }
.others-pill{
  display:inline-block; padding:6px 16px; border-radius:999px;
  background:#F4F7FF; color:var(--arp-muted);
  font-weight:700; font-size:13px;
}
.cmp-feat{ font-weight:700; }
.cmp-feat i{ color:var(--arp-orange); width:22px; text-align:center; font-size:16px; }
.cmp-us{ color:var(--arp-text); font-weight:600; }
.cmp-us .check{
  width:26px; height:26px; border-radius:50%;
  background:#16A34A; color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.cmp-others{ color:var(--arp-muted); }
.cmp-others .cross{
  width:26px; height:26px; border-radius:50%;
  background:#E63946; color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.cmp-buzz > .cmp-cell:nth-last-child(3),
.cmp-buzz > .cmp-cell:nth-last-child(4),
.cmp-buzz > .cmp-cell:nth-last-child(5){ border-bottom:0; }
.cmp-frame{
  position:absolute;
  top:90px;       /* header height */
  left:calc((100% / 3.4) * 1.4);  /* start of "us" column */
  width:calc(100% / 3.4);
  height:calc(100% - 90px);
  border:2px solid var(--arp-orange);
  border-radius:var(--arp-radius);
  pointer-events:none;
  z-index:1;
  box-sizing:border-box;
}
.cmp-highlight{
  position:absolute;
  top:0;
  left:calc((100% / 3.4) * 1.4);
  width:calc(100% / 3.4);
  height:100%;
  background:linear-gradient(180deg, rgba(255,122,26,.05) 0%, rgba(255,122,26,.02) 100%);
  pointer-events:none;
  z-index:0;
}

/* ---------- VERGLEICHS-MATRIX (rich card: ribbon + VS divider + 2-col grid) ---------- */
.ar-pilot-matrix{ padding:64px 0; background:#F8FAFF; }
.ar-pilot-matrix__badge{ display:inline-block; padding:6px 14px; border-radius:999px; font-weight:700; font-size:13px; margin-bottom:10px; }
.ar-pilot-matrix__sub{ color:var(--arp-muted); max-width:760px; margin:8px auto 0; }

.ar-pilot-matrix__block{
  position:relative;
  background:#fff;
  border:1px solid #E6EAF5;
  border-left:0;
  padding:34px 34px 34px 88px !important;
  border-radius:18px;
  box-shadow:var(--arp-shadow);
  margin-bottom:24px;
  overflow:hidden;
}
.ar-pilot-matrix__block-ribbon{
  position:absolute;
  top:0; left:0; bottom:0;
  width:62px;
  display:flex; align-items:center; justify-content:center;
  border-radius:18px 0 0 18px;
}
.ar-pilot-matrix__block-num{
  color:#fff;
  font-weight:900;
  font-size:28px;
  letter-spacing:1px;
  writing-mode:vertical-rl;
  text-orientation:mixed;
  transform:rotate(180deg);
  text-shadow:0 1px 2px rgba(0,0,0,.18);
}
.ar-pilot-matrix__block-head{
  display:flex; align-items:center; gap:14px;
  margin-bottom:22px;
}
.ar-pilot-matrix__block-icon{
  width:46px; height:46px; border-radius:12px; color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:20px; flex-shrink:0;
  box-shadow:0 4px 12px rgba(14,20,48,.12);
}
.ar-pilot-matrix__block-h{
  font-weight:800; font-size:22px;
  margin:0;
  line-height:1.25;
}

.ar-pilot-matrix__cmp{
  display:grid !important;
  grid-template-columns: 1fr 60px 1fr !important;
  gap:16px;
  align-items:stretch;
}
.ar-pilot-matrix__cmp-side{
  padding:18px 18px 20px;
  border-radius:14px;
  position:relative;
}
.ar-pilot-matrix__cmp-side--bad{
  background:linear-gradient(180deg, #FFF1F2 0%, #FFFFFF 100%);
  border:1px dashed #FCA5A5;
}
.ar-pilot-matrix__cmp-side--good{
  background:linear-gradient(180deg, #ECFDF5 0%, #FFFFFF 100%);
  border:1px solid #BBF7D0;
}
.ar-pilot-matrix__cmp-side-head{
  display:flex; align-items:center; gap:10px;
  margin-bottom:10px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(14,20,48,.06);
}
.ar-pilot-matrix__cmp-icon{
  width:30px; height:30px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff; font-size:14px;
  flex-shrink:0;
}
.ar-pilot-matrix__cmp-icon--bad{ background:#E63946; }
.ar-pilot-matrix__cmp-icon--good{ background:#16A34A; }
.ar-pilot-matrix__cmp-label{
  font-weight:800;
  font-size:13px;
  letter-spacing:0.4px;
  text-transform:uppercase;
}
.ar-pilot-matrix__cmp-label--bad{ color:#991B1B; }
.ar-pilot-matrix__cmp-side p{
  color:var(--arp-text);
  line-height:1.65;
  font-size:14.5px;
  margin:0;
}

.ar-pilot-matrix__cmp-divider{
  position:relative;
  display:flex; align-items:center; justify-content:center;
}
.ar-pilot-matrix__cmp-divider:before{
  content:"";
  position:absolute;
  top:0; bottom:0; left:50%;
  width:2px;
  background:linear-gradient(180deg, transparent, #E6EAF5 25%, #E6EAF5 75%, transparent);
  transform:translateX(-50%);
}
.ar-pilot-matrix__cmp-divider span{
  position:relative;
  z-index:2;
  width:48px; height:48px; border-radius:50%;
  background:#fff;
  border:2px solid #E6EAF5;
  color:var(--arp-text);
  font-weight:900;
  font-size:13px;
  letter-spacing:1px;
  display:inline-flex; align-items:center; justify-content:center;
}

@media (max-width:768px){
  .ar-pilot-matrix__block{ padding:24px 20px 24px 74px !important; }
  .ar-pilot-matrix__block-ribbon{ width:48px; }
  .ar-pilot-matrix__block-num{ font-size:22px; }
  .ar-pilot-matrix__cmp{ grid-template-columns:1fr !important; gap:14px; }
  .ar-pilot-matrix__cmp-divider{ height:48px; }
  .ar-pilot-matrix__cmp-divider:before{
    top:50%; left:0; right:0; width:auto; height:2px;
    background:linear-gradient(90deg, transparent, #E6EAF5 25%, #E6EAF5 75%, transparent);
    transform:translateY(-50%);
  }
}
@media (max-width:768px){
  .ar-pilot-matrix__cmp{ grid-template-columns:1fr; }
  .cmp-buzz{ grid-template-columns:1.2fr 1fr 1fr; font-size:13px; }
  .cmp-cell{ padding:14px 12px; }
  .cmp-frame,.cmp-highlight{ display:none; }
}

/* ---------- REVIEWS CAROUSEL ---------- */
.ar-pilot-reviews{ padding:64px 0; background:#FFF8F1; }
.ar-pilot-reviews__badge{ display:inline-block; padding:6px 14px; border-radius:999px; background:var(--arp-orange-soft); color:var(--arp-orange); font-weight:700; font-size:13px; }
.reviews-carousel{ margin:24px -8px 0; }
.reviews-slide{ padding:0 10px; }
.reviews-card{
  background:#fff; border-radius:var(--arp-radius); padding:22px;
  border:1px solid #F0EAE0; box-shadow:var(--arp-shadow); height:100%;
}
.reviews-head{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.reviews-avatar{
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800;
}
.reviews-name{ font-weight:800; color:var(--arp-text); }
.reviews-role{ font-size:13px; color:var(--arp-muted); }
.reviews-stars i{ color:#FFB400; font-size:14px; }
.reviews-text{ color:var(--arp-text); font-size:14px; line-height:1.55; margin-top:8px; }
.slick-prev, .slick-next{ background:#fff !important; border:1px solid #E6EAF5; border-radius:10px; padding:6px 12px; color:var(--arp-text); font-weight:700; }
.slick-prev:before, .slick-next:before{ display:none; }

/* ---------- FINAL CTA ---------- */
.ar-pilot-finalcta{
  border:2px dashed var(--arp-pink); background:var(--arp-pink-soft);
  padding:32px; border-radius:var(--arp-radius); text-align:center;
}
.ar-pilot-finalcta__h{ font-weight:800; color:var(--arp-text); margin-bottom:18px; }
.ar-pilot-finalcta__btn{
  display:inline-block; color:#fff; padding:14px 32px;
  border-radius:999px; font-weight:800; text-decoration:none;
}
.ar-pilot-finalcta__btn:hover{ color:#fff; filter:brightness(1.05); }

@media (max-width:768px){
  .ar-pilot-hero__h1{ font-size:32px; }
  .ar-pilot-hero__brand,.ar-pilot-hero__form{ padding:22px; }
  .cmp-buzz{ font-size:13px; }
  .ar-pilot-diff__stats{ flex-direction:column; text-align:center; }
}