/* Harbor Continuum — retention ribbon + personalized expedition memory */
:root{
  --hc-ink:#243746;
  --hc-paper:rgba(247,243,235,.96);
  --hc-line:rgba(44,62,80,.12);
  --hc-sage:#52796F;
  --hc-gold:#c4a574;
  --hc-ease:cubic-bezier(.22,.61,.36,1);
}

.harbor-continuum{
  position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));
  z-index:46;opacity:0;transform:translateY(18px);pointer-events:none;
  transition:opacity .45s var(--hc-ease),transform .45s var(--hc-ease);
}
.harbor-continuum:not(.is-away){opacity:1;transform:none;pointer-events:auto;animation:hc-rise .7s .15s var(--hc-ease) both}
.harbor-continuum.is-away{opacity:0;transform:translateY(18px);pointer-events:none}
body.has-harbor-dock .harbor-continuum{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
body.has-harbor-continuum{padding-bottom:calc(118px + env(safe-area-inset-bottom,0px))}
body.has-harbor-dock.has-harbor-continuum{padding-bottom:calc(176px + env(safe-area-inset-bottom,0px))}

.hc-ribbon{
  position:relative;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px 18px;
  padding:16px 18px 15px;border-radius:4px;border:1px solid rgba(242,235,224,.14);
  background:
    linear-gradient(135deg,rgba(196,165,116,.16),transparent 42%),
    linear-gradient(165deg,rgba(26,40,56,.94),rgba(36,58,52,.95));
  box-shadow:0 18px 48px rgba(8,12,18,.34);
  backdrop-filter:blur(16px) saturate(1.1);-webkit-backdrop-filter:blur(16px) saturate(1.1);
  color:#f2ebe0;
}
.hc-ribbon::before{
  content:'';position:absolute;left:18px;right:18px;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(196,165,116,.7),transparent);
}
.hc-ribbon-copy{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;gap:6px;padding-right:18px}
.hc-kicker{
  font-family:var(--font-brand,inherit);font-size:9px;font-weight:500;
  letter-spacing:.18em;text-transform:lowercase;color:rgba(196,165,116,.92);
}
.hc-whisper{
  font-family:var(--font-brand,inherit);font-size:clamp(1rem,3.6vw,1.18rem);font-weight:500;
  letter-spacing:-.02em;line-height:1.25;color:#f7f3eb;
}
.hc-live{
  font-size:11px;font-weight:300;color:rgba(214,228,216,.72);letter-spacing:.02em;
}
.harbor-continuum.has-live .hc-live::before{
  content:'';display:inline-block;width:6px;height:6px;margin-right:7px;border-radius:50%;
  background:#7cb87a;box-shadow:0 0 0 3px rgba(124,184,122,.18);vertical-align:middle;
  animation:hc-pulse 2.2s ease infinite;
}
.hc-ribbon-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.hc-primary,.hc-secondary{
  display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 16px;
  border-radius:4px;text-decoration:none;font-family:var(--font-brand,inherit);
  font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:lowercase;transition:transform .2s,background .25s,border-color .25s,color .25s;
}
.hc-primary{background:#f2ebe0;color:#223746;border:1px solid transparent}
.hc-primary:hover{background:#fff;text-decoration:none;transform:translateY(-1px)}
.hc-secondary{background:transparent;color:rgba(242,235,224,.78);border:1px solid rgba(242,235,224,.18)}
.hc-secondary:hover{border-color:rgba(196,165,116,.55);color:#f2ebe0;text-decoration:none}
.hc-dismiss{
  position:absolute;top:8px;right:8px;width:28px;height:28px;border:0;border-radius:4px;
  background:transparent;color:rgba(242,235,224,.45);font-size:18px;cursor:pointer;line-height:1;
}
.hc-dismiss:hover,.hc-dismiss:focus-visible{color:#f2ebe0;outline:none;background:rgba(255,255,255,.06)}

/* Expedition personalization */
.hc-exp-lead{
  display:grid;gap:8px;margin:0 0 18px;padding:18px 18px 16px;border-radius:4px;
  border:0.5px solid rgba(82,121,111,.22);
  background:
    linear-gradient(135deg,rgba(196,165,116,.1),transparent 46%),
    linear-gradient(165deg,rgba(82,121,111,.08),rgba(255,255,255,.35));
  animation:hc-rise .8s var(--hc-ease) both;
}
.hc-exp-lead-k{font-size:10px;letter-spacing:.18em;text-transform:lowercase;color:var(--hc-sage)}
.hc-exp-lead strong{
  font-family:var(--font-brand,inherit);font-size:clamp(1.2rem,3.5vw,1.55rem);font-weight:500;
  letter-spacing:-.025em;color:var(--ink,#1a2838);line-height:1.2;
}
.hc-exp-lead span{font-size:13px;font-weight:300;color:var(--stone,#5f6d7e);line-height:1.55;max-width:42ch}
.hc-exp-lead .btn-primary{justify-self:start;margin-top:4px}

.ex-card.hc-exp-card,.hc-exp-card{position:relative}
.ex-card.is-walked,.hc-exp-card.is-walked{border-color:rgba(82,121,111,.35)}
.ex-card.is-next,.hc-exp-card.is-next{
  border-color:rgba(196,165,116,.55)!important;
  box-shadow:0 12px 36px rgba(44,62,80,.08),0 0 0 1px rgba(196,165,116,.18);
}
.hc-exp-mark,.hc-exp-next{
  position:absolute;top:12px;right:12px;z-index:2;padding:5px 9px;border-radius:4px;
  font-size:9px;font-weight:500;letter-spacing:.12em;text-transform:lowercase;
  background:rgba(26,40,56,.82);color:#f2ebe0;
}
.hc-exp-next{background:rgba(82,121,111,.92);color:#f7f3eb}
.ex-card.featured .hc-exp-mark,.ex-card.featured .hc-exp-next{top:14px;right:14px}

/* Homepage hero continuum chip */
.hc-hero-chip{
  display:flex;flex-direction:column;align-items:flex-start;gap:4px;max-width:340px;
  margin-top:14px;padding:14px 16px;border-radius:4px;text-decoration:none;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
  color:#fff;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:transform .25s var(--hc-ease),background .25s,border-color .25s;
  animation:hc-rise .9s .2s var(--hc-ease) both;
}
.hc-hero-chip:hover{transform:translateY(-2px);background:rgba(255,255,255,.16);border-color:rgba(196,165,116,.45);text-decoration:none;color:#fff}
.hc-hero-chip-k{font-size:9px;letter-spacing:.18em;text-transform:lowercase;color:rgba(196,165,116,.95)}
.hc-hero-chip strong{font-family:var(--font-brand,inherit);font-size:1.05rem;font-weight:500;letter-spacing:-.02em}
.hc-hero-chip em{font-style:normal;font-size:12px;font-weight:300;color:rgba(255,255,255,.72);line-height:1.45}

/* Demo post-walk continuum echo */
.hc-demo-echo{
  position:absolute;left:12px;right:12px;bottom:calc(78px + env(safe-area-inset-bottom,0px));
  z-index:260;opacity:0;transform:translateY(16px);pointer-events:none;
  transition:opacity .4s var(--hc-ease),transform .4s var(--hc-ease);
}
.hc-demo-echo.in{opacity:1;transform:none;pointer-events:auto}
.hc-demo-echo-inner{
  padding:16px 16px 14px;border-radius:4px;border:1px solid rgba(196,165,116,.28);
  background:linear-gradient(165deg,rgba(247,243,235,.98),rgba(232,238,235,.98));
  box-shadow:0 16px 40px rgba(8,12,18,.22);color:var(--hc-ink);
}
.hc-demo-echo-inner .hc-kicker{color:#8a7451}
.hc-demo-echo-inner strong{
  display:block;margin:4px 0 6px;font-family:var(--font-brand,inherit);
  font-size:1.05rem;font-weight:500;letter-spacing:-.02em;color:#1f3340;
}
.hc-demo-echo-inner p{margin:0 0 12px;font-size:12.5px;font-weight:300;line-height:1.5;color:#5f6d7e}
.hc-demo-echo-inner .hc-primary{width:100%;border:0;cursor:pointer;margin-bottom:6px}
.hc-dismiss-text{
  width:100%;border:0;background:transparent;color:#7a8a99;font:400 11px/1 var(--font-brand,inherit);
  letter-spacing:.06em;text-transform:lowercase;cursor:pointer;padding:8px 0;
}

@keyframes hc-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes hc-pulse{0%,100%{opacity:.45}50%{opacity:1}}

@media(min-width:720px){
  .harbor-continuum{left:50%;right:auto;width:min(720px,calc(100vw - 48px));transform:translate(-50%,18px)}
  .harbor-continuum:not(.is-away){transform:translate(-50%,0)}
  .harbor-continuum.is-away{transform:translate(-50%,18px)}
  body.has-harbor-dock .harbor-continuum{bottom:24px}
  body.has-harbor-continuum,body.has-harbor-dock.has-harbor-continuum{padding-bottom:0}
}
@media(prefers-reduced-motion:reduce){
  .harbor-continuum,.hc-exp-lead,.hc-hero-chip,.hc-demo-echo,.harbor-continuum.has-live .hc-live::before{animation:none!important}
  .harbor-continuum,.hc-demo-echo{transition:none}
}