.gobii-card-base {
  background-color: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(6px);
  border-radius: 1rem;
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.08);
}

.gobii-card-hoverable {
    overflow: hidden;
    border-radius: 0.75rem;
    border: 1px solid rgb(226 232 240 / 1);
    background-color: rgb(255 255 255 / 0.8);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    transform: translateY(0);
    transition-property: box-shadow, transform;
    transition-duration: 150ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.gobii-card-hoverable:hover {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    transform: translateY(-0.125rem);
}

.contact-option-card {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    background: linear-gradient(145deg, rgb(252 253 255 / 0.94), rgb(237 244 255 / 0.9));
    border: 1px solid rgb(99 102 241 / 0.14);
    box-shadow: 0 20px 40px -24px rgb(99 102 241 / 0.45);
    transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease, background 200ms ease;
}

.contact-option-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top, rgb(79 70 229 / 0.16), transparent 60%);
    opacity: 0;
    transition: opacity 200ms ease;
}

.contact-option-card > * {
    position: relative;
    z-index: 1;
}

.contact-option-card:hover {
    transform: translateY(-2px);
    border-color: rgb(79 70 229 / 0.26);
    box-shadow: 0 24px 48px -28px rgb(79 70 229 / 0.55);
    background: linear-gradient(145deg, rgb(255 255 255 / 0.96), rgb(232 240 255 / 0.93));
}

.contact-option-card:hover::before {
    opacity: 1;
}

.contact-option-card.is-disabled {
    border-color: rgb(203 213 225 / 0.6);
    box-shadow: none;
    background: linear-gradient(145deg, rgb(248 250 252 / 0.9), rgb(237 242 247 / 0.85));
}

.contact-option-card.is-disabled::before {
    opacity: 0;
}

.contact-option-card.is-disabled .contact-option-card__accent {
    opacity: 0.2 !important;
}

/* Allow long URLs in prose content (e.g., blog references) to wrap on mobile. */
.prose {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.prose a,
.prose li,
.prose p {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Keep Markdown tables readable without widening the surrounding blog prose. */
.prose .blog-table-scroll {
    width: calc(100vw - 3rem);
    max-width: 48rem;
    margin: 2.5rem 50%;
    overflow-x: auto;
    transform: translateX(-50%);
    border: 1px solid rgb(226 232 240);
    border-radius: 0.75rem;
    background: white;
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.05);
    -webkit-overflow-scrolling: touch;
}

.prose .blog-table-scroll--wide {
    max-width: 72rem;
}

.prose .blog-table-scroll table {
    width: 100%;
    min-width: 38rem;
    margin: 0;
}

.prose .blog-table-scroll--wide table {
    min-width: 64rem;
}

.prose .blog-table-scroll th,
.prose .blog-table-scroll td {
    padding: 0.875rem 1rem;
    overflow-wrap: normal;
    word-break: normal;
    vertical-align: top;
}

.prose .blog-table-scroll th {
    background: rgb(248 250 252);
}

.prose .blog-table-scroll th:first-child,
.prose .blog-table-scroll td:first-child {
    min-width: 9rem;
}

.prose .blog-table-scroll tbody tr:last-child td {
    border-bottom-width: 0;
}

@media (max-width: 640px) {
    .prose .blog-table-scroll {
        width: calc(100vw - 2rem);
        margin-top: 2rem;
        margin-bottom: 2rem;
    }
}