/* =========================================================
   CIAO Travels · captains-club.html  (page-scoped, prefix .cc-)
   The Club on the website: ink hero with a member card drawn in
   CSS and the Club's own 3D icon renders (club/img/3d/), the six
   things you get, four steps, the levels on a departure board,
   and the way into the app. No Captain cut-out on this page.
   ========================================================= */

/* ---------- hero ---------- */
.cc-hero{position:relative;isolation:isolate;overflow:hidden;background:var(--ink);color:var(--white);padding:calc(var(--hdr) + clamp(30px,5vw,80px)) 0 clamp(60px,7vw,110px)}
.cc-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 70% at 78% 40%,rgba(253,182,28,.22),transparent 70%),radial-gradient(rgba(253,182,28,.16) 1.4px,transparent 1.6px) 0 0/14px 14px;-webkit-mask-image:linear-gradient(90deg,transparent 30%,#000 75%);mask-image:linear-gradient(90deg,transparent 30%,#000 75%)}
.cc-hero__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:center}
.cc-hero__k{font-size:.72rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--y)}
.cc-title{font-weight:900;text-transform:uppercase;letter-spacing:-.05em;line-height:.86;font-size:clamp(3.3rem,8.6vw,8rem);margin:.16em 0 .3em}
.cc-title .script{display:inline-block;font-size:.8em;line-height:1;transform:rotate(-5deg);margin-left:.06em;color:var(--y)}
.cc-hero .cc-hero__lead{color:#cfcfd6;max-width:46ch}
.cc-hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:28px}
.cc-link{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--white);text-decoration:underline;text-decoration-color:rgba(255,255,255,.4);text-underline-offset:5px}
.cc-link:hover{color:var(--y)}
.cc-hero .cc-hero__small{margin-top:18px;font-size:.84rem;color:var(--mist)}

/* the drawn member card (decorative; the real one is in the app) */
.cc-hero__art{position:relative;min-height:clamp(320px,34vw,470px);display:grid;place-items:center}
.cc-card{position:relative;z-index:2;width:min(100%,400px);aspect-ratio:1.586;padding:clamp(18px,2.2vw,26px);border-radius:22px;background:var(--y);color:var(--ink);border:3px solid var(--ink);box-shadow:12px 12px 0 var(--white);rotate:-4deg;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr auto auto auto;column-gap:14px}
.cc-card__top{grid-column:1/-1;display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.cc-card__top b{font-weight:900;font-size:.95rem;letter-spacing:-.01em;text-transform:none}
.cc-card__tier{grid-column:1;align-self:end;font-weight:900;text-transform:uppercase;letter-spacing:-.03em;font-size:clamp(1.3rem,2.4vw,1.8rem);line-height:1;color:var(--ink)}
.cc-card__pts{grid-column:1;font-weight:700;font-size:.9rem;color:var(--y-ink)}
.cc-card__pts b{font-weight:900;font-size:1.5rem;color:var(--ink);letter-spacing:-.02em}
.cc-card__bar{grid-column:1;height:10px;border-radius:999px;background:rgba(11,11,12,.16);margin:6px 0;overflow:hidden}
.cc-card__bar i{display:block;width:60%;height:100%;border-radius:inherit;background:var(--ink)}
.cc-card__next{grid-column:1;font-size:.74rem;font-weight:600;color:var(--y-ink)}
.cc-card__next b{color:var(--ink)}
.cc-card__qr{grid-column:2;grid-row:2/6;align-self:end;width:clamp(70px,8vw,96px);aspect-ratio:1;border-radius:10px;background:var(--white);border:2px solid var(--ink);
  background-image:linear-gradient(90deg,var(--ink) 0 22%,transparent 22% 34%,var(--ink) 34% 44%,transparent 44% 56%,var(--ink) 56% 66%,transparent 66% 78%,var(--ink) 78%),
    linear-gradient(0deg,var(--white) 0 18%,transparent 18% 30%,var(--white) 30% 42%,transparent 42% 58%,var(--white) 58% 70%,transparent 70% 82%,var(--white) 82%);
  background-origin:content-box;padding:10px;background-blend-mode:normal}
.cc-float{position:absolute;z-index:3;width:clamp(84px,9vw,130px);height:auto;filter:drop-shadow(0 18px 22px rgba(0,0,0,.45))}
.cc-float--a{top:2%;left:4%;rotate:-10deg}
.cc-float--b{bottom:0;right:2%;width:clamp(96px,10vw,150px)}
.cc-float--c{top:4%;right:8%;width:clamp(64px,6.5vw,96px);rotate:12deg}
@media (prefers-reduced-motion:no-preference){
  .cc-float{animation:ccBob 5s ease-in-out infinite}
  .cc-float--b{animation-delay:-1.6s}.cc-float--c{animation-delay:-3.1s}
}
@keyframes ccBob{50%{translate:0 -10px}}

/* ---------- 1 · what you get ---------- */
.cc-tiles{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,26px)}
.cc-tile{position:relative;padding:clamp(20px,2.2vw,28px);padding-top:clamp(84px,8vw,104px);background:var(--white);border:3px solid var(--ink);border-radius:var(--r);box-shadow:7px 7px 0 var(--ink)}
.cc-tile img{position:absolute;top:-18px;left:16px;width:clamp(86px,8.4vw,110px);height:auto;filter:drop-shadow(0 10px 12px rgba(11,11,12,.22))}
.cc-tile .h3{margin-bottom:8px}
.cc-tile p{color:#33363d;line-height:1.6}
.cc-tile b{color:var(--ink);white-space:nowrap}
.cc-perks .op-cap{margin-bottom:clamp(52px,6vw,80px)}

/* ---------- 2 · how it works ---------- */
.cc-how .h2{margin-bottom:clamp(26px,3vw,40px);max-width:16ch}
.cc-steps{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px clamp(18px,3vw,40px)}
.cc-steps>li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start;padding:20px;border-radius:var(--r);background:var(--paper);border:3px solid var(--ink);box-shadow:6px 6px 0 var(--ink)}
.cc-steps__n{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--ink);color:var(--y);font-weight:900;font-size:1.1rem}
.cc-steps .h3{margin-bottom:6px}
.sec--y .cc-steps p{color:#33363d}

/* ---------- 3 · the levels ---------- */
.cc-tierlist{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,22px);counter-reset:lv}
.cc-tier{counter-increment:lv;position:relative;padding:22px 20px 24px;border-radius:var(--r);background:var(--ink-2);border:1.5px solid var(--ink-4)}
.cc-tier:last-child{background:var(--y);color:var(--ink);border-color:var(--y);box-shadow:8px 8px 0 var(--white)}
.cc-tier__min{font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.sec--ink .cc-tier .cc-tier__min{color:var(--mist)}
.cc-tier__min b{font-size:1.3rem;letter-spacing:-.02em;color:var(--y)}
.cc-tier__n{font-weight:900;text-transform:uppercase;letter-spacing:-.03em;font-size:clamp(1.4rem,2vw,1.8rem);line-height:1;margin:8px 0 14px}
.cc-tier ul{list-style:none;display:grid;gap:8px}
.cc-tier li li,.cc-tier ul li{position:relative;padding-left:18px;font-size:.92rem;line-height:1.45;color:#cfcfd6}
.cc-tier ul li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;border-radius:2px;background:var(--y);rotate:45deg}
.sec--ink .cc-tier:last-child .cc-tier__min,.cc-tier:last-child ul li{color:var(--y-ink)}
.cc-tier:last-child .cc-tier__min b{color:var(--ink)}
.cc-tier:last-child ul li::before{background:var(--ink)}
.sec--ink .cc-tiers__note{margin-top:clamp(26px,3vw,40px);font-size:.9rem;color:var(--mist)}
.cc-tiers__note a,.cc-end__links a{display:inline-flex;align-items:center;min-height:32px;font-weight:700;text-decoration:underline;text-underline-offset:4px}
.cc-tiers__note a{color:var(--y)}

/* ---------- 4 · the way in ---------- */
.cc-end__in{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
.cc-end__ic{width:clamp(84px,9vw,120px);height:auto}
.cc-end .h2{max-width:18ch}
.cc-end .lead{margin-inline:auto}
.cc-end__cta{margin-top:8px}
.cc-end__links{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 26px;margin-top:4px}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .cc-hero__grid{grid-template-columns:1fr}
  .cc-hero__art{min-height:0;padding:30px 0 10px}
  .cc-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cc-tierlist{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .cc-steps{grid-template-columns:1fr}
}
@media (max-width:640px){
  .cc-title{font-size:clamp(2.9rem,15vw,4.6rem)}
  .cc-tiles,.cc-tierlist{grid-template-columns:1fr}
  .cc-tiles{gap:34px}
  .cc-hero__art{padding:56px 0 52px}
  .cc-card{width:min(86%,400px);box-shadow:8px 8px 0 var(--white);rotate:-3deg}
  .cc-float--a{top:4px;left:0;width:76px}
  .cc-float--c{top:6px;right:6%;width:56px}
  .cc-float--b{bottom:0;right:0;width:82px}
  .cc-hero__cta .btn{width:100%}
}