.ct-share { min-height: calc(100svh - 205px); padding: clamp(24px, 5vw, 78px) 20px 52px; background: #f5f8f6; color: #07313b; }
.ct-share-frame { max-width: 1080px; min-height: 570px; margin: 0 auto; display: grid; grid-template-columns: minmax(250px, .95fr) minmax(280px, 1.05fr); overflow: hidden; border-radius: 36px; background: #fff; box-shadow: 0 24px 90px rgba(5, 47, 57, .12); }
.ct-share-art { position: relative; min-height: 490px; overflow: hidden; background: linear-gradient(145deg, #072f3c, #0c8590 62%, #052c39); }
.ct-share-art::before { content: ''; position: absolute; inset: -10%; opacity: .27; background: repeating-radial-gradient(ellipse at 20% 40%, transparent 0 29px, #8ce7e5 30px 31px, transparent 32px 60px); transform: rotate(-12deg); }
.ct-share-ring { position: absolute; width: 63%; aspect-ratio: 1; border: 1px solid rgba(226, 255, 249, .33); border-radius: 50%; }
.ct-share-ring.ring-one { top: 7%; right: -18%; }
.ct-share-ring.ring-two { bottom: -24%; left: -20%; width: 86%; }
.ct-share-route { position: absolute; width: 82%; height: 42%; left: 9%; top: 34%; border-top: 5px solid #a3f1e8; border-radius: 45% 55% 0 0; transform: rotate(-22deg); filter: drop-shadow(0 0 16px #a3f1e8); }
.ct-share-dot { position: absolute; display: block; width: 22px; height: 22px; border: 5px solid #fff; border-radius: 50%; background: #f47d68; box-shadow: 0 0 0 9px rgba(255, 255, 255, .16); }
.ct-share-dot.dot-one { top: 42%; left: 17%; }
.ct-share-dot.dot-two { top: 44%; right: 19%; }
.ct-share-content { display: flex; flex-direction: column; justify-content: center; padding: clamp(30px, 5vw, 76px); }
.ct-share-kicker { margin: 0 0 42px; color: #137b81; font-size: .72rem; letter-spacing: .17em; font-weight: 800; }
.ct-share-kicker span { padding: 0 .4rem; color: #97aeb1; }
.ct-share-location { margin: 0 0 7px; color: #477178; font-size: .92rem; font-weight: 700; }
#ct-share-title { margin: 0; color: #07313b; font-family: inherit; font-size: clamp(2.5rem, 4.6vw, 5.3rem); line-height: 1.04; letter-spacing: -.055em; overflow-wrap: anywhere; }
.ct-share-description { max-width: 39rem; margin: 24px 0 35px; color: #48666c; font-size: clamp(1rem, 1.35vw, 1.17rem); line-height: 1.65; }
.ct-share-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.ct-share-actions a, .ct-share-actions button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 18px; border-radius: 15px; font: inherit; font-size: .92rem; font-weight: 700; text-decoration: none; cursor: pointer; }
.ct-share-primary { border: 1px solid #066470; background: #076f79; color: #fff !important; }
.ct-share-secondary { border: 1px solid #b9d2d2; background: #f4faf8; color: #075a66; }
.ct-share-actions :focus-visible, .ct-share-below a:focus-visible { outline: 3px solid #f47d68; outline-offset: 3px; }
.ct-share-note { margin: 25px 0 0; color: #607a80; font-size: .79rem; line-height: 1.5; overflow-wrap: anywhere; }
.ct-share-below { max-width: 1080px; margin: 22px auto 0; display: flex; justify-content: space-between; gap: 15px; color: #607a80; font-size: .7rem; font-weight: 750; letter-spacing: .09em; }
.ct-share-below a { color: #056f7a; font-size: .84rem; letter-spacing: 0; text-decoration: underline; }
@media (max-width: 730px) { .ct-share { padding: 14px 14px 40px; } .ct-share-frame { grid-template-columns: 1fr; border-radius: 24px; } .ct-share-art { min-height: 190px; } .ct-share-content { padding: 28px 24px 34px; } .ct-share-kicker { margin-bottom: 26px; } .ct-share-description { margin: 18px 0 27px; } .ct-share-below { flex-wrap: wrap; padding: 0 8px; } }
@media (prefers-reduced-motion: no-preference) { .ct-share-frame { animation: ct-arrive .48s ease-out both; } @keyframes ct-arrive { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } }