/* Theme: stock Bootstrap 5.3 (/webjars/bootstrap) themed through its CSS variables, with the palette the portal had
   when it loaded the two ~320 KB template bundles: a near-black page, grey text, white headings and a blue primary.
   Declared on both :root and [data-bs-theme=dark]: `_header.html`'s <header data-bs-theme="dark"> is inert against
   the old fake bundle (which has no such rule) but activates Bootstrap's own dark literals here unless matched. */
:root,
[data-bs-theme=dark] {
    color-scheme: dark;
    --bs-font-sans-serif: Roboto, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --bs-body-font-size: .9375rem;
    --bs-body-line-height: 1.6;
    --bs-border-radius: .6rem;
    --bs-border-radius-sm: .4rem;
    --bs-border-radius-lg: .6rem;
    --bs-body-bg: #16191c;
    --bs-body-bg-rgb: 22, 25, 28;
    --bs-body-color: #a7a6a8;
    --bs-body-color-rgb: 167, 166, 168;
    --bs-emphasis-color: #fff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-heading-color: #fff;
    --bs-secondary-color: #757476;
    --bs-secondary-color-rgb: 117, 116, 118;
    --bs-secondary-bg: #1e2126;
    --bs-secondary-bg-rgb: 30, 33, 38;
    --bs-tertiary-bg: #1a1d21;
    --bs-tertiary-bg-rgb: 26, 29, 33;
    --bs-border-color: #1e2126;
    --bs-border-color-translucent: #1e2126;
    --bs-light: #1a1d21;
    --bs-light-rgb: 26, 29, 33;
    --bs-dark: #1e2126;
    --bs-dark-rgb: 30, 33, 38;
    --bs-secondary: #292d34;
    --bs-secondary-rgb: 41, 45, 52;
    --bs-primary: #2787f5;
    --bs-primary-rgb: 39, 135, 245;
    --bs-link-color: #2787f5;
    --bs-link-color-rgb: 39, 135, 245;
    --bs-link-hover-color: #1f6cc4;
    --bs-link-hover-color-rgb: 31, 108, 196;
    --bs-primary-text-emphasis: #5ea8f8;
    --bs-primary-bg-subtle: #192a3d;
    --bs-primary-border-subtle: #1f4a7a;
}

.text-dark {
    color: #fff !important;
}

.lead {
    font-size: 1.125rem;
    font-weight: 400;
}

.btn-primary {
    --bs-btn-bg: #2787f5;
    --bs-btn-border-color: #2787f5;
    --bs-btn-hover-bg: #1f6cc4;
    --bs-btn-hover-border-color: #1f6cc4;
    --bs-btn-active-bg: #1f6cc4;
    --bs-btn-active-border-color: #1f6cc4;
    --bs-btn-disabled-bg: #2787f5;
    --bs-btn-disabled-border-color: #2787f5;
}

.btn-outline-primary {
    --bs-btn-color: #2787f5;
    --bs-btn-border-color: #2787f5;
    --bs-btn-hover-bg: #2787f5;
    --bs-btn-hover-border-color: #2787f5;
    --bs-btn-active-bg: #2787f5;
    --bs-btn-active-border-color: #2787f5;
}

.btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #292d34;
    --bs-btn-border-color: #292d34;
    --bs-btn-hover-bg: #34393f;
    --bs-btn-hover-border-color: #34393f;
    --bs-btn-active-bg: #34393f;
    --bs-btn-active-border-color: #34393f;
}

/* The bundle's "soft" button: primary text on a tint of it */
.btn-soft-primary {
    --bs-btn-color: #2787f5;
    --bs-btn-bg: #192a3d;
    --bs-btn-border-color: #192a3d;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #2787f5;
    --bs-btn-hover-border-color: #2787f5;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #1f6cc4;
    --bs-btn-active-border-color: #1f6cc4;
}

.form-control,
.form-select,
.input-group-text {
    --bs-border-color: var(--bs-secondary-bg);
}

.form-control,
.form-select,
.input-group-text,
.form-check-input {
    background-color: var(--bs-secondary-bg);
}

.form-control:focus,
.form-select:focus {
    border-color: rgba(39, 135, 245, .5);
    box-shadow: 0 0 0 .2rem rgba(39, 135, 245, .2);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}

.dropdown-menu {
    --bs-dropdown-font-size: var(--bs-body-font-size);
    --bs-dropdown-bg: var(--bs-body-bg);
    --bs-dropdown-border-width: 0;
    --bs-dropdown-box-shadow: 0 .5rem 1.875rem rgba(0, 0, 0, .2);
    box-shadow: var(--bs-dropdown-box-shadow);
}

.modal-content {
    --bs-modal-bg: var(--bs-body-bg);
    --bs-modal-box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, .3);
}

hr {
    color: var(--bs-border-color);
    opacity: 1;
}

.shadow {
    box-shadow: 0 .5rem 1.875rem rgba(0, 0, 0, .2) !important;
}

.accordion-button {
    --bs-accordion-btn-focus-box-shadow: none;
    --bs-accordion-bg: transparent;
    box-shadow: none;
}

.accordion-button:not(.collapsed) {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    box-shadow: inset 0 -2px 0 var(--bs-border-color);
}

/* Public web portal (proposal #58) - read-only public rooms */

body.portal {
    padding-top: 64px;
}

.navbar {
    border-bottom: 1px solid #432784;
}

.portal-container {
    padding-top: 1.5rem;
    padding-bottom: 2.5rem;
}

.portal-header-search {
    min-width: 12rem;
}

.portal-min-w-0 {
    min-width: 0;
}

.portal-break-words {
    overflow-wrap: anywhere;
}

.portal-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.portal-room-avatar {
    width: 96px;
    height: 96px;
    border-radius: 24px;
    object-fit: cover;
}

.portal-room-creator {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    max-width: 100%;
}

.portal-room-creator-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.portal-room-avatar-sm {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    object-fit: cover;
}

.portal-room-card {
    transition: transform .15s ease, box-shadow .15s ease;
}

.portal-room-card:hover,
.portal-room-card:focus-visible {
    transform: translateY(-2px);
}

@media (min-width: 992px) {
    .portal-room-summary {
        position: sticky;
        top: 80px;
    }
}

.portal-badges img {
    margin: 0 .25rem;
}

.portal-message {
    display: flex;
    gap: .75rem;
    padding: .75rem 0;
    border-bottom: 1px solid rgba(128, 128, 128, .2);
    scroll-margin-top: 80px;
}

.portal-message:target {
    background: rgba(13, 110, 253, .08);
    border-radius: .5rem;
}

.portal-message-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.portal-message-content {
    min-width: 0;
    flex-grow: 1;
}

.portal-message-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem;
    margin-bottom: .25rem;
}

.portal-message-time {
    font-size: .8rem;
    color: inherit;
    opacity: .65;
    text-decoration: none;
}

.portal-message-time:hover {
    opacity: 1;
    text-decoration: underline;
}

.portal-message-body {
    overflow-wrap: anywhere;
}

.portal-message-body ul,
.portal-message-body ol {
    margin-bottom: .25rem;
}

.portal-message-body pre {
    white-space: pre-wrap;
}

.portal-message-body-collapsed {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.portal-continue-reading {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-top: .35rem;
    padding: 0;
    border: 0;
    background: none;
    color: #2787f5;
    font-size: .85rem;
    font-weight: 500;
    cursor: pointer;
}

.portal-large-emoji {
    font-size: 300%;
}

.portal-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .5rem;
}

.portal-attachment-image img {
    max-width: 100%;
    max-height: 240px;
    border-radius: .5rem;
}

.portal-attachment-file {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    border: 1px dashed rgba(128, 128, 128, .5);
    border-radius: .5rem;
    font-size: .875rem;
    opacity: .8;
}

.portal-message-footer {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .5rem;
    font-size: .85rem;
}

.portal-reaction {
    padding: .1rem .5rem;
    border: 1px solid rgba(128, 128, 128, .35);
    border-radius: 1rem;
}

.portal-comment-count {
    opacity: .75;
}

.portal-new-messages {
    position: fixed;
    left: 50%;
    top: 5rem;
    transform: translateX(-50%);
    z-index: 1030;
    box-shadow: 0 .25rem 1rem rgba(0, 0, 0, .3);
}

.portal-badge {
    font-size: .75rem;
    font-weight: 500;
    color: inherit;
    background-color: rgba(128, 128, 128, .22);
}

.portal-new-messages .portal-badge {
    background-color: rgba(255, 255, 255, .25);
}

/* Phase 2: home, static pages, contact */

.portal-hero {
    padding: 3rem 0 2.5rem;
    background: radial-gradient(ellipse at top, rgba(13, 110, 253, .16), transparent 70%);
}

.portal-suggest-box {
    position: relative;
}

.portal-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1040;
    margin-top: .25rem;
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .35);
}

.portal-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .5rem;
}

.portal-badges img {
    margin: 0;
}

.portal-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    font-size: 1.2rem;
    color: #2787f5;
    background: rgba(39, 135, 245, .15);
}

.portal-feature {
    transition: transform .15s ease, box-shadow .15s ease;
}

.portal-feature:hover,
.portal-feature:focus-within {
    transform: translateY(-3px);
}

.portal-principles li {
    margin-bottom: .75rem;
}

.portal-qr {
    image-rendering: pixelated;
}

.portal-site-footer {
    padding: 1.5rem 0 2.75rem;
    border-top: 1px solid rgba(128, 128, 128, .2);
}

.portal-site-footer a {
    color: inherit;
    opacity: .75;
    text-decoration: none;
}

.portal-site-footer a:hover {
    opacity: 1;
    text-decoration: underline;
}

/* honeypot: kept out of view without display:none, which some bots detect */
.portal-hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Country picker on the sign-in form (intl-tel-input): it wraps the field in its own element, which has to
   stretch like any other Bootstrap control, and its dropdown has to follow the page's colours rather than
   arriving as a white panel on the dark theme. */
.iti {
    display: block;
    width: 100%;
}

.iti__dropdown-content {
    background-color: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #212529);
    border: 1px solid rgba(128, 128, 128, .35);
    border-radius: .5rem;
}

.iti__search-input {
    background-color: transparent;
    color: inherit;
    border-bottom: 1px solid rgba(128, 128, 128, .35);
}

.iti__country.iti__highlight,
.iti__country:hover {
    background-color: rgba(39, 135, 245, .15);
}

.iti__dial-code {
    opacity: .7;
}

.card-body {
    border-radius: .375rem;
}

.table thead th {
    padding-left: 0.7em;
    padding-right: 0.7em;
}
.table tbody td {
    padding-left: 0.7em;
    padding-right: 0.7em;
}


/* Developer documentation (/developers/*.html): a sticky page list beside long reference pages full of code. */
.portal-docs-nav {
    position: sticky;
    top: 5rem;
}

.portal-docs-nav-home {
    display: block;
    margin-bottom: .5rem;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}

.portal-docs-nav .nav-link {
    padding: .3rem 0 .3rem .75rem;
    border-left: 2px solid #292d34;
    color: var(--bs-body-color);
    font-size: .9rem;
}

.portal-docs-nav .nav-link:hover {
    color: #fff;
}

.portal-docs-nav .nav-link.active {
    border-left-color: var(--bs-primary);
    color: #fff;
    font-weight: 500;
}

.portal-docs {
    min-width: 0;
}

.portal-docs h2 {
    margin-top: 2.25rem;
    font-size: 1.35rem;
    scroll-margin-top: 5rem;
}

.portal-docs h3 {
    margin-top: 1.5rem;
    font-size: 1.05rem;
    scroll-margin-top: 5rem;
}

.portal-docs pre {
    padding: 1rem;
    border: 1px solid #292d34;
    border-radius: var(--bs-border-radius-sm);
    background: var(--bs-tertiary-bg);
    color: #d7d6d8;
    font-size: .8125rem;
    line-height: 1.5;
}

.portal-docs pre code {
    color: inherit;
}

.portal-docs .table {
    font-size: .875rem;
}

.portal-docs .table td:first-child {
    white-space: nowrap;
}

.portal-docs-pager {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 3rem;
    padding-top: 1rem;
    border-top: 1px solid #292d34;
}

@media (max-width: 991.98px) {
    .portal-docs-nav {
        position: static;
    }

    .portal-docs-nav .nav {
        gap: .25rem 1rem;
    }

    .portal-docs-nav .nav-link {
        padding: .2rem 0;
        border-left: 0;
    }

    .portal-docs-nav .nav-link.active {
        text-decoration: underline;
        text-underline-offset: .3rem;
    }

    .portal-docs .table td:first-child {
        white-space: normal;
    }
}


/* The site administrator's calls-per-day chart on an app's page: plain CSS bars, no chart library. */
.portal-bars {
    display: flex;
    align-items: stretch;
    gap: .35rem;
    height: 9rem;
}

.portal-bar {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    min-width: 0;
    text-align: center;
    font-size: .7rem;
}

.portal-bar-count {
    min-height: 1rem;
    color: var(--bs-body-color);
}

.portal-bar-track {
    display: flex;
    flex: 1 1 auto;
    align-items: flex-end;
    border-bottom: 1px solid #292d34;
}

.portal-bar-fill {
    display: flex;
    align-items: flex-end;
    width: 100%;
    min-height: 1px;
    border-radius: .2rem .2rem 0 0;
    background: var(--bs-primary);
}

.portal-bar-failed {
    width: 100%;
    background: #dc3545;
}

.portal-bar-label {
    margin-top: .2rem;
    color: var(--bs-secondary-color);
}

/* Home page (proposal 91): hero with three phones, bento cards, the key steps, the "what our server stores" split and
   the feature grid. Pictures are HTML so their text is translated; animations stop under prefers-reduced-motion. */
.ph {
    --ph-card: #1e2126;
    --ph-card-2: #23272d;
    --ph-line: #2a2f36;
    --ph-green: #20c997;
    --ph-mint: #4ee0a9;
    --ph-radius: 1.25rem;
}

.ph-section {
    padding: 4rem 0;
}

.ph-band {
    background: var(--bs-tertiary-bg);
}

.ph-eyebrow {
    display: inline-block;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--bs-primary);
    margin-bottom: .6rem;
}

.ph-eyebrow-pink {
    color: #fe6571;
}

.ph-section-title {
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    font-weight: 700;
    text-align: center;
}

.ph-section-sub {
    max-width: 40rem;
    margin: .75rem auto 2.5rem;
    text-align: center;
}

.ph-card {
    background: var(--ph-card);
    border: 1px solid var(--ph-line);
    border-radius: 1rem;
    padding: 1.4rem;
}

.ph-icon {
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: .75rem;
    font-size: 1.15rem;
}

.ph-feature {
    transition: transform .2s ease, border-color .2s ease;
}

.ph-feature:hover {
    transform: translateY(-4px);
    border-color: #34506f;
}

/* Hero */
.ph-hero {
    padding: 3.5rem 0 4rem;
    background: radial-gradient(ellipse at 30% 0%, rgba(39, 135, 245, .20), transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(32, 201, 151, .12), transparent 55%);
}

.ph-hero-title {
    font-size: clamp(2rem, 4.6vw, 3.3rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.15;
}

.ph-hero-title em {
    font-style: normal;
    background: linear-gradient(90deg, var(--ph-mint), var(--bs-primary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.ph-lead {
    font-size: 1.125rem;
    margin: 1.1rem 0 1.6rem;
    max-width: 34rem;
}

.ph-badges .portal-badges {
    justify-content: flex-start;
}

.ph-pills {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1.4rem;
}

.ph-pills > span {
    font-size: .8rem;
    padding: .3rem .7rem;
    border-radius: 99px;
    background: var(--ph-card);
    border: 1px solid var(--ph-line);
}

.ph-pills i {
    color: var(--ph-green);
    margin-right: .35rem;
}

/* Phones */
.ph-phone {
    position: relative;
    flex: none;
    width: 300px;
    height: 610px;
    overflow: hidden;
    border: 10px solid #050607;
    border-radius: 42px;
    background: #111418;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 0 1px var(--ph-line);
}

.ph-notch {
    position: absolute;
    top: 8px;
    left: 50%;
    z-index: 3;
    width: 90px;
    height: 22px;
    transform: translateX(-50%);
    border-radius: 99px;
    background: #050607;
}

.ph-screen {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 40px 12px 12px;
}

.ph-appbar {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 6px 4px 10px;
    border-bottom: 1px solid var(--ph-line);
}

.ph-appbar b {
    display: block;
    color: #fff;
    font-size: .85rem;
}

.ph-appbar small {
    font-size: .7rem;
}

.ph-ok {
    color: var(--ph-green);
}

.ph-av {
    display: grid;
    place-items: center;
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
}

.ph-bubble {
    max-width: 80%;
    padding: 8px 11px;
    border-radius: 14px;
    font-size: .8rem;
    line-height: 1.35;
    background: var(--ph-card-2);
    color: #dfe2e6;
}

.ph-bubble b {
    color: #fff;
}

.ph-bubble.ph-wide {
    max-width: 100%;
}

.ph-bubble.ph-me {
    align-self: flex-end;
    background: var(--bs-primary);
    color: #fff;
}

.ph-bubble.ph-paid {
    background: #1c2a22;
    border: 1px solid #24412f;
}

.ph-bubble.ph-paid i {
    color: #f5b82e;
}

.ph-locked {
    margin-top: auto;
    padding: 6px;
    border-radius: 10px;
    text-align: center;
    font-size: .7rem;
    color: var(--ph-green);
    background: rgba(32, 201, 151, .08);
}

.ph-trio {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: 440px;
    perspective: 1400px;
}

.ph-trio .ph-phone {
    width: 200px;
    height: 410px;
    border-width: 8px;
    border-radius: 34px;
}

.ph-trio .ph-screen {
    padding: 32px 10px 10px;
}

.ph-trio-center {
    z-index: 2;
    transform: translateY(-14px);
}

.ph-trio-left {
    transform: rotateY(22deg) translateX(34px) scale(.88);
    opacity: .85;
}

.ph-trio-right {
    transform: rotateY(-22deg) translateX(-34px) scale(.88);
    opacity: .85;
}

.ph-float {
    animation: ph-float 6s ease-in-out infinite;
}

.ph-float-2 {
    animation-delay: -2s;
}

.ph-float-3 {
    animation-delay: -4s;
}

@keyframes ph-float {
    50% {
        margin-bottom: 12px;
    }
}

/* Bento cards */
.ph-bento {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(200px, auto);
    gap: 1rem;
}

.ph-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 1.4rem;
    border-radius: var(--ph-radius);
    border: 1px solid var(--ph-line);
    background: var(--ph-card);
}

.ph-tile p {
    margin: 0 0 .75rem;
    font-size: .875rem;
}

.ph-tile-title {
    font-size: 1.1rem;
    margin-bottom: .4rem;
}

.ph-tile-title-lg {
    font-size: 1.4rem;
    margin-bottom: .5rem;
}

.ph-tile-text-wide {
    max-width: 48ch;
}

.ph-w2 {
    grid-column: span 2;
}

.ph-w4 {
    grid-column: span 4;
}

.ph-h2 {
    grid-row: span 2;
}

.ph-glow-green {
    background: radial-gradient(ellipse at 100% 100%, rgba(32, 201, 151, .22), transparent 60%), var(--ph-card);
}

.ph-glow-blue {
    background: radial-gradient(ellipse at 0% 100%, rgba(39, 135, 245, .25), transparent 60%), var(--ph-card);
}

.ph-glow-gold {
    background: radial-gradient(ellipse at 100% 0%, rgba(245, 184, 46, .18), transparent 60%), var(--ph-card);
}

.ph-glow-purple {
    background: radial-gradient(ellipse at 100% 100%, rgba(139, 92, 246, .25), transparent 60%), var(--ph-card);
}

.ph-promise {
    justify-content: center;
    background: linear-gradient(135deg, #2a1520, var(--ph-card) 60%);
}

.ph-promise-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.4rem;
}

.ph-promise-row div {
    color: #fff;
    font-weight: 700;
}

.ph-promise-row i {
    margin-right: .5rem;
}

.ph-vault {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    margin-top: auto;
}

.ph-vault ul,
.ph-checks {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: .85rem;
}

.ph-vault li,
.ph-checks li {
    margin: .3rem 0;
}

.ph-vault li i,
.ph-checks li i {
    width: 1.3rem;
    color: var(--ph-green);
}

.ph-lock {
    display: grid;
    place-items: center;
    flex: none;
    width: 96px;
    height: 96px;
    border-radius: 28px;
    border: 1px solid #24412f;
    background: #0f2a20;
    font-size: 2.6rem;
    color: var(--ph-mint);
    animation: ph-pulse 2.6s infinite;
}

@keyframes ph-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(78, 224, 169, .35);
    }
    70% {
        box-shadow: 0 0 0 18px rgba(78, 224, 169, 0);
    }
}

.ph-scramble {
    margin-top: .9rem;
    overflow: hidden;
    white-space: nowrap;
    font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .75rem;
    color: var(--ph-mint);
    opacity: .8;
}

.ph-scramble span {
    display: inline-block;
    animation: ph-marquee 14s linear infinite;
}

@keyframes ph-marquee {
    to {
        transform: translateX(-50%);
    }
}

.ph-test-coins {
    color: #f5b82e;
}

.ph-convert {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-top: auto;
}

.ph-coin {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    color: #fff;
    font-weight: 800;
    font-size: 1.1rem;
}

.ph-eth {
    background: #627eea;
}

.ph-btc {
    background: #f7931a;
}

.ph-usd {
    background: var(--ph-green);
    font-size: .8rem;
}

.ph-flow {
    position: relative;
    flex: 1;
    height: 4px;
    overflow: hidden;
    border-radius: 4px;
    background: linear-gradient(90deg, #627eea, #f7931a);
}

.ph-flow-2 {
    background: linear-gradient(90deg, #f7931a, var(--ph-green));
}

.ph-flow::after {
    content: "";
    position: absolute;
    top: 0;
    left: -30%;
    width: 30%;
    height: 100%;
    background: rgba(255, 255, 255, .8);
    animation: ph-run 1.6s linear infinite;
}

@keyframes ph-run {
    to {
        left: 100%;
    }
}

.ph-slash {
    margin-top: auto;
    padding: .6rem .75rem;
    border: 1px solid var(--ph-line);
    border-radius: .75rem;
    background: var(--bs-body-bg);
    font-size: .8rem;
}

.ph-typed {
    display: inline-block;
    width: 0;
    overflow: hidden;
    white-space: nowrap;
    vertical-align: bottom;
    color: #fff;
    border-right: 2px solid var(--bs-primary);
    animation: ph-type 4s steps(18) infinite;
}

@keyframes ph-type {
    40%, 90% {
        width: 18ch;
    }
    100% {
        width: 0;
    }
}

.ph-appcard {
    margin-top: .6rem;
    padding: .6rem .75rem;
    border: 1px solid #3b2d63;
    border-radius: .75rem;
    background: #251b3f;
    color: #ddd6fe;
}

.ph-wave {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 46px;
    margin-top: auto;
}

.ph-wave i {
    display: block;
    width: 6px;
    border-radius: 4px;
    background: var(--ph-green);
    animation: ph-bar 1.1s ease-in-out infinite;
}

.ph-wave i:nth-child(2n) {
    animation-delay: .2s;
}

.ph-wave i:nth-child(3n) {
    animation-delay: .45s;
}

@keyframes ph-bar {
    0%, 100% {
        height: 10px;
    }
    50% {
        height: 42px;
    }
}

/* The key steps */
.ph-step {
    position: relative;
    height: 100%;
    padding-top: 2rem;
}

.ph-step-number {
    position: absolute;
    top: -.9rem;
    left: 1.4rem;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--ph-green);
    color: #06281c;
    font-weight: 800;
}

.ph-step-icon {
    font-size: 1.9rem;
    color: var(--ph-green);
}

/* What you see / what our server stores */
.ph-sealed {
    border-block: 1px solid var(--ph-line);
    background: radial-gradient(ellipse at 70% 30%, rgba(32, 201, 151, .10), transparent 60%), #121417;
}

.ph-sealed-title {
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    margin-bottom: .9rem;
}

.ph-split {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.1rem;
    padding-top: 34px;
}

.ph-label {
    position: absolute;
    z-index: 5;
    padding: 4px 10px;
    border-radius: 99px;
    font-size: .75rem;
    font-weight: 700;
}

.ph-label-you {
    top: 0;
    left: 16%;
    background: var(--bs-primary);
    color: #fff;
}

.ph-label-us {
    top: 64px;
    right: 2%;
    border: 1px solid #24412f;
    background: #0c0e10;
    color: var(--ph-mint);
}

.ph-arrow {
    color: var(--bs-secondary-color);
    font-size: 1.4rem;
    animation: ph-nudge 1.8s ease-in-out infinite;
}

@keyframes ph-nudge {
    50% {
        transform: translateX(6px);
        color: var(--ph-mint);
    }
}

.ph-server {
    width: 250px;
    padding: .9rem;
    border: 1px solid var(--ph-line);
    border-radius: 18px;
    background: #0c0e10;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}

.ph-server-head {
    margin-bottom: .6rem;
    font-size: .75rem;
    color: var(--bs-secondary-color);
}

.ph-server-row {
    margin-bottom: .5rem;
    padding: .5rem;
    border: 1px dashed #24412f;
    border-radius: 10px;
    background: rgba(78, 224, 169, .04);
}

.ph-server-row:last-child {
    margin-bottom: 0;
}

.ph-server-meta {
    display: flex;
    justify-content: space-between;
    margin-bottom: .25rem;
    font-size: .65rem;
    color: var(--bs-secondary-color);
}

.ph-cipher {
    word-break: break-all;
    font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .72rem;
    color: var(--ph-mint);
    animation: ph-flicker 2.6s steps(1) infinite;
}

@keyframes ph-flicker {
    50% {
        opacity: .55;
    }
}

.ph-developers {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
}

@media (max-width: 991.98px) {
    .ph-bento {
        grid-template-columns: repeat(2, 1fr);
    }

    .ph-w4 {
        grid-column: span 2;
    }

    .ph-trio-side {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .ph-section {
        padding: 3rem 0;
    }

    .ph-bento {
        grid-template-columns: 1fr;
    }

    .ph-w2,
    .ph-w4,
    .ph-h2 {
        grid-column: auto;
        grid-row: auto;
    }

    .ph-server,
    .ph-arrow {
        display: none;
    }

    .ph-label-us {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ph *,
    .ph *::before,
    .ph *::after {
        animation: none !important;
        transition: none !important;
    }

    .ph-typed {
        width: auto;
    }
}