.packages-page main { padding-top: 92px; }

.packages-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 87% 11%, rgba(8, 174, 189, .28), transparent 28%),
    radial-gradient(circle at 12% 100%, rgba(26, 103, 165, .26), transparent 30%),
    linear-gradient(135deg, #061827, #0a2943 72%, #07536b);
}

.packages-hero::before {
  content: "";
  width: 540px;
  height: 540px;
  position: absolute;
  top: -315px;
  right: 4%;
  border: 1px solid rgba(131, 224, 230, .14);
  border-radius: 50%;
}

.packages-hero-grid {
  min-height: 720px;
  padding: clamp(80px, 9vw, 128px) 0;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(410px, .78fr);
  gap: clamp(60px, 9vw, 125px);
  align-items: center;
}

.packages-hero h1 {
  max-width: 790px;
  margin: 0;
  font-size: clamp(51px, 5.9vw, 84px);
  line-height: .97;
  letter-spacing: -.058em;
}

.packages-hero h1 em { color: #83e0e6; font-style: normal; }

.packages-hero-copy > p:not(.seo-kicker) {
  max-width: 730px;
  margin: 28px 0 0;
  color: rgba(255, 255, 255, .70);
  font-size: clamp(18px, 1.55vw, 22px);
}

.package-ladder { position: relative; padding: 22px 0 0 32px; }

.package-ladder::before {
  content: "";
  position: absolute;
  top: 54px;
  bottom: 88px;
  left: 4px;
  border-left: 1px dashed rgba(131, 224, 230, .42);
}

.ladder-card {
  min-height: 118px;
  margin-bottom: 14px;
  padding: 23px 24px;
  position: relative;
  display: grid;
  grid-template-columns: 49px 1fr;
  gap: 18px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 20px;
  box-shadow: 0 22px 55px rgba(0, 0, 0, .17);
}

.ladder-card::before {
  content: "";
  width: 11px;
  height: 11px;
  position: absolute;
  top: 50%;
  left: -34px;
  background: #83e0e6;
  border: 5px solid #0a2943;
  border-radius: 50%;
  transform: translateY(-50%);
}

.ladder-card-one { margin-right: 56px; background: rgba(255, 255, 255, .075); }
.ladder-card-two { margin-left: 28px; margin-right: 28px; background: rgba(14, 107, 148, .31); }
.ladder-card-three { margin-left: 56px; background: linear-gradient(135deg, rgba(8, 174, 189, .30), rgba(22, 99, 161, .34)); }

.ladder-card > span {
  width: 49px;
  height: 49px;
  display: grid;
  place-items: center;
  color: #071b2d;
  background: #83e0e6;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 900;
}

.ladder-card small, .ladder-card strong { display: block; }
.ladder-card small { color: rgba(255, 255, 255, .55); font-size: 10px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.ladder-card strong { margin-top: 4px; font-size: 23px; line-height: 1.1; }
.package-ladder > p { margin: 25px 0 0 56px; color: rgba(255, 255, 255, .55); font-size: 13px; }
.package-ladder > p strong { color: #83e0e6; }

.package-jump { background: #fff; border-bottom: 1px solid rgba(7, 27, 45, .10); box-shadow: 0 12px 28px rgba(7, 27, 45, .04); }
.package-jump .container { display: grid; grid-template-columns: repeat(4, 1fr); }
.package-jump a { min-height: 86px; padding: 20px 22px; display: flex; gap: 12px; align-items: center; justify-content: center; border-right: 1px solid rgba(7, 27, 45, .10); font-size: 13px; font-weight: 820; text-align: center; transition: color .2s ease, background .2s ease; }
.package-jump a:first-child { border-left: 1px solid rgba(7, 27, 45, .10); }
.package-jump a:hover, .package-jump a:focus-visible { color: #063f7b; background: #f3f8f9; }
.package-jump span { color: #08aebd; font-size: 10px; font-weight: 900; }

.package-intro, .comparison-section, .extras-section { padding: clamp(90px, 10vw, 140px) 0; }
.package-intro { background: #f1f5f6; }
.comparison-section { background: #fff; }
.extras-section { background: #eef4f5; }

.package-section-heading {
  margin-bottom: 55px;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, .63fr);
  gap: clamp(55px, 8vw, 110px);
  align-items: end;
}

.package-section-heading h2, .extras-copy h2, .package-cta h2 {
  margin: 0;
  font-size: clamp(40px, 4.7vw, 68px);
  line-height: 1.01;
  letter-spacing: -.052em;
}

.package-section-heading > p { margin: 0 0 5px; color: #60707a; font-size: clamp(17px, 1.35vw, 20px); }

.package-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; align-items: stretch; }

.package-card {
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(7, 27, 45, .11);
  border-radius: 26px;
  box-shadow: 0 24px 64px rgba(7, 27, 45, .08);
}

.package-card header { min-height: 330px; padding: 31px 31px 29px; position: relative; overflow: hidden; color: #fff; }
.package-card header::after { content: ""; width: 180px; height: 180px; position: absolute; right: -88px; bottom: -84px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 50%; }
.package-card-one header { background: linear-gradient(145deg, #0b3552, #071b2d); }
.package-card-two header { background: linear-gradient(145deg, #09537a, #0a2943); }
.package-card-three header { background: radial-gradient(circle at 100% 0, rgba(131, 224, 230, .25), transparent 38%), linear-gradient(145deg, #0a6476, #0a2943); }

.package-icon { width: 62px; height: 62px; margin-bottom: 42px; display: grid; place-items: center; color: #83e0e6; background: rgba(131, 224, 230, .10); border: 1px solid rgba(131, 224, 230, .28); border-radius: 18px; }
.package-icon svg { width: 38px; height: 38px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.package-number { color: #83e0e6; font-size: 10px; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.package-card header p { margin: 6px 0 0; color: rgba(255, 255, 255, .52); font-size: 11px; font-weight: 820; letter-spacing: .12em; text-transform: uppercase; }
.package-card h3 { margin: 10px 0 0; font-size: clamp(30px, 2.8vw, 42px); line-height: 1; letter-spacing: -.045em; }
.package-card header strong { max-width: 340px; margin-top: 15px; display: block; color: rgba(255, 255, 255, .69); font-size: 14px; line-height: 1.5; }

.package-card-body { padding: 31px; display: flex; flex: 1; flex-direction: column; }
.package-summary { min-height: 78px; margin: 0 0 24px; color: #52636e; font-size: 15px; }
.package-features { margin: 0; padding: 0; list-style: none; }
.package-features li { padding: 12px 0 12px 27px; position: relative; border-top: 1px solid rgba(7, 27, 45, .10); color: #26343d; font-size: 13px; line-height: 1.48; }
.package-features li::before { content: "✓"; position: absolute; top: 12px; left: 1px; color: #08aebd; font-size: 13px; font-weight: 900; }
.package-fit { margin-top: 26px; padding: 19px; background: #eff7f8; border-radius: 16px; }
.package-fit small { display: block; color: #078d9b; font-size: 9px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.package-fit p { margin: 6px 0 0; color: #465761; font-size: 12px; line-height: 1.5; }
.package-link { margin-top: auto; padding-top: 26px; display: flex; align-items: center; justify-content: space-between; color: #063f7b; font-size: 13px; font-weight: 850; }
.package-link span { width: 34px; height: 34px; display: grid; place-items: center; color: #071b2d; background: #83e0e6; border-radius: 50%; }
.package-note { margin: 30px 0 0; padding: 20px 23px; color: #566873; background: rgba(255, 255, 255, .76); border-left: 4px solid #08aebd; border-radius: 0 14px 14px 0; font-size: 13px; }

.package-chain { padding: clamp(90px, 10vw, 140px) 0; color: #fff; background: radial-gradient(circle at 86% 5%, rgba(8, 174, 189, .23), transparent 29%), #071b2d; }
.package-section-heading-light > p { color: rgba(255, 255, 255, .62); }
.chain-steps { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; list-style: none; }
.chain-steps li { min-height: 265px; padding: 26px 24px; position: relative; background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .13); border-radius: 20px; }
.chain-steps li:not(:last-child)::after { content: "→"; width: 34px; height: 34px; position: absolute; z-index: 2; top: 50%; right: -24px; display: grid; place-items: center; color: #071b2d; background: #83e0e6; border: 5px solid #071b2d; border-radius: 50%; transform: translateY(-50%); font-weight: 900; }
.chain-steps span, .chain-steps strong, .chain-steps small { display: block; }
.chain-steps span { color: #83e0e6; font-size: 10px; font-weight: 900; letter-spacing: .15em; }
.chain-steps strong { margin-top: 76px; font-size: 23px; line-height: 1.1; }
.chain-steps small { margin-top: 10px; color: rgba(255, 255, 255, .57); font-size: 12px; line-height: 1.55; }

.comparison-scroll { overflow-x: auto; border: 1px solid rgba(7, 27, 45, .12); border-radius: 24px; box-shadow: 0 18px 48px rgba(7, 27, 45, .07); }
.comparison-table { width: 100%; min-width: 860px; border-collapse: collapse; background: #fff; }
.comparison-table th, .comparison-table td { padding: 17px 20px; border-bottom: 1px solid rgba(7, 27, 45, .09); text-align: center; }
.comparison-table thead th { min-width: 180px; padding-top: 24px; padding-bottom: 24px; color: #fff; background: #0a2943; font-size: 14px; line-height: 1.3; }
.comparison-table thead th:first-child { min-width: 310px; color: rgba(255, 255, 255, .62); text-align: left; }
.comparison-table thead span { margin-bottom: 6px; display: block; color: #83e0e6; font-size: 9px; letter-spacing: .14em; }
.comparison-table tbody th { color: #2f404b; font-size: 13px; font-weight: 720; text-align: left; }
.comparison-table tbody tr:nth-child(even) { background: #f6f9fa; }
.comparison-table tbody tr:last-child th, .comparison-table tbody tr:last-child td { border-bottom: 0; }
.comparison-table b { width: 28px; height: 28px; display: inline-grid; place-items: center; color: #07546a; background: #dff7f8; border-radius: 50%; font-size: 13px; }
.comparison-table i { color: #a4b0b7; font-style: normal; }
.comparison-hint { margin: 13px 0 0; display: none; color: #687985; font-size: 12px; }

.extras-grid { display: grid; grid-template-columns: minmax(0, .68fr) minmax(520px, 1fr); gap: clamp(60px, 9vw, 125px); align-items: start; }
.extras-copy { position: sticky; top: 125px; }
.extras-copy > p:not(.seo-kicker) { margin: 25px 0 30px; color: #60707a; font-size: 18px; }
.package-choice-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.package-button-secondary { color: #063f7b; background: #fff; border: 1px solid rgba(6, 63, 123, .28); }
.package-button-secondary:hover, .package-button-secondary:focus-visible { color: #fff; background: #063f7b; border-color: #063f7b; }
.extras-list { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; list-style: none; }
.extras-list li { min-height: 102px; padding: 21px; display: grid; grid-template-columns: 33px 1fr; gap: 14px; align-items: center; background: #fff; border: 1px solid rgba(7, 27, 45, .10); border-radius: 17px; color: #26353f; font-size: 13px; font-weight: 760; }
.extras-list span { width: 33px; height: 33px; display: grid; place-items: center; color: #063f7b; background: #dff7f8; border-radius: 50%; font-size: 9px; font-weight: 900; }

.package-cta { padding: clamp(85px, 10vw, 130px) 0; color: #fff; background: linear-gradient(118deg, rgba(7, 27, 45, .985), rgba(6, 71, 94, .92)), url("../assets/clydonic-vor-ort-v2.webp") center / cover no-repeat; }
.package-cta-inner { display: grid; grid-template-columns: 1fr auto; gap: 60px; align-items: end; }
.package-cta p:not(.seo-kicker) { max-width: 760px; margin: 23px 0 0; color: rgba(255, 255, 255, .67); font-size: 18px; }
.package-cta-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.package-cta-actions > a:not(.button) { color: #d7eef0; font-size: 13px; font-weight: 750; }

@media (max-width: 1120px) {
  .packages-hero-grid { grid-template-columns: 1fr .72fr; gap: 50px; }
  .package-grid { grid-template-columns: 1fr; }
  .package-card { display: grid; grid-template-columns: minmax(300px, .72fr) 1fr; }
  .package-card header { min-height: 100%; }
  .package-summary { min-height: 0; }
  .chain-steps { grid-template-columns: repeat(2, 1fr); }
  .chain-steps li::after { display: none; }
}

@media (max-width: 860px) {
  .packages-page main { padding-top: 78px; }
  .packages-hero-grid, .package-section-heading, .extras-grid, .package-cta-inner { grid-template-columns: 1fr; }
  .packages-hero-grid { min-height: 0; padding: 80px 0 90px; }
  .package-ladder { max-width: 590px; }
  .package-jump .container { grid-template-columns: repeat(2, 1fr); }
  .package-jump a:nth-child(2) { border-right: 0; }
  .package-jump a:nth-child(-n+2) { border-bottom: 1px solid rgba(7, 27, 45, .10); }
  .package-section-heading > p { margin: -25px 0 0; }
  .extras-copy { position: static; }
  .package-choice-actions { align-items: stretch; flex-direction: column; }
  .package-choice-actions .button { width: 100%; white-space: normal; }
  .comparison-hint { display: block; }
  .package-cta-actions { align-items: stretch; }
}

@media (max-width: 680px) {
  .packages-hero h1 { font-size: clamp(39px, 11vw, 49px); }
  .package-ladder { padding-left: 21px; }
  .package-ladder::before { left: 1px; }
  .ladder-card { min-height: 100px; padding: 18px; grid-template-columns: 42px 1fr; }
  .ladder-card::before { left: -25px; }
  .ladder-card-one, .ladder-card-two, .ladder-card-three { margin-left: 0; margin-right: 0; }
  .ladder-card > span { width: 42px; height: 42px; }
  .ladder-card strong { font-size: 20px; }
  .package-ladder > p { margin-left: 0; }
  .package-jump a { min-height: 75px; padding: 14px 10px; flex-direction: column; gap: 3px; font-size: 11px; }
  .package-card { display: flex; }
  .package-card header { min-height: 315px; }
  .package-card-body, .package-card header { padding-left: 23px; padding-right: 23px; }
  .chain-steps, .extras-list { grid-template-columns: 1fr; }
  .chain-steps li { min-height: 230px; }
  .extras-list li { min-height: 84px; }
}