.cloud-proof-page {
    background: #030507;
}

.cloud-proof-page::before {
    display: none;
}

.cloud-proof-page .cloud-proof-shell {
    width: min(1040px, calc(100% - 96px));
}

.cloud-proof-hero {
    position: relative;
    display: flex;
    min-height: 620px;
    align-items: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 84% 39%, rgba(247, 202, 132, 0.09), transparent 24%),
        radial-gradient(ellipse 72% 72% at 76% 47%, rgba(63, 139, 210, 0.08), transparent 68%),
        linear-gradient(180deg, #07101a 0%, #03070b 72%, #030507 100%);
}

.cloud-proof-hero__sun {
    position: absolute;
    top: 34%;
    right: 14%;
    width: 88px;
    height: 88px;
    border: 1px solid rgba(255, 246, 218, 0.62);
    border-radius: 50%;
    background: radial-gradient(circle at 39% 36%, #fffdf4 0 8%, #ffe7b4 42%, #eeb36a 78%, #b76a31 100%);
    box-shadow:
        0 0 28px rgba(255, 222, 167, 0.46),
        0 0 86px rgba(244, 179, 101, 0.24),
        0 0 190px rgba(69, 154, 230, 0.16);
    pointer-events: none;
}

.cloud-proof-hero__sun::before {
    content: '';
    position: absolute;
    inset: -110px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 218, 160, 0.14), transparent 64%);
}

.cloud-proof-hero .cloud-proof-shell {
    position: relative;
    z-index: 1;
    padding: 86px 0 82px;
}

.cloud-proof-hero__back {
    margin-bottom: 30px;
    color: #6f8194;
    font-size: 13px;
}

.cloud-proof-hero__back a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.18s ease;
}

.cloud-proof-hero__back a:hover,
.cloud-proof-hero__back a:focus-visible {
    color: #b7cce0;
}

.cloud-proof-hero__back .bx {
    font-size: 18px;
}

.cloud-proof-hero h1 {
    max-width: 980px;
    font-size: clamp(58px, 6.35vw, 82px);
    line-height: 0.98;
}

.cloud-proof-hero__lead {
    max-width: 780px;
    margin-top: 32px;
    color: #a7b4c8;
    font-size: 19px;
    line-height: 1.68;
}

.cloud-proof-section {
    position: relative;
    padding: 116px 0 128px;
    border-top: 1px solid rgba(161, 190, 221, 0.14);
    scroll-margin-top: 72px;
    background: #030507;
}

.cloud-proof-section:nth-of-type(even) {
    background: #05090e;
}

.cloud-proof-copy {
    max-width: 870px;
}

.cloud-proof-copy h2 {
    max-width: 940px;
    font-size: clamp(43px, 4.6vw, 62px);
    line-height: 1.01;
}

.cloud-proof-copy > p {
    max-width: 780px;
    margin-top: 28px;
    color: #a7b4c8;
    font-size: 17px;
    line-height: 1.72;
}

.cloud-diagram {
    position: relative;
    width: min(920px, 100%);
    min-height: 260px;
    margin: 64px 0 0;
    padding: 48px 52px;
    overflow: hidden;
    border-top: 1px solid rgba(118, 184, 255, 0.22);
    border-bottom: 1px solid rgba(118, 184, 255, 0.12);
    background:
        radial-gradient(circle at 50% 50%, rgba(46, 116, 181, 0.1), transparent 58%),
        rgba(6, 12, 20, 0.42);
}

.cloud-diagram::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.34;
    background-image: radial-gradient(circle, rgba(111, 167, 220, 0.14) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}

.cloud-diagram > * {
    position: relative;
    z-index: 1;
}

.cloud-diagram i {
    color: #83c2fb;
}

/* Shared cloud model */
.model-diagram {
    min-height: 390px;
    padding: 34px;
}

.model-diagram__frame {
    display: grid;
    min-height: 320px;
    padding: 42px 34px 32px;
    grid-template-columns: 290px minmax(80px, 1fr) 320px;
    grid-template-rows: 1fr;
    align-items: center;
    border: 2px solid rgba(112, 180, 241, 0.36);
    border-radius: 28px;
    background: rgba(5, 13, 22, 0.64);
    box-shadow: inset 0 0 56px rgba(46, 124, 196, 0.06);
}

.model-diagram__cluster-label {
    position: absolute;
    top: -14px;
    left: 24px;
    display: inline-flex;
    min-height: 28px;
    padding: 0 11px;
    align-items: center;
    gap: 7px;
    border: 1px solid rgba(105, 176, 238, 0.32);
    border-radius: 999px;
    background: #07111c;
    color: #91b4d2;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.model-diagram__cluster-label i {
    font-size: 15px;
}

.model-diagram__applications {
    display: grid;
    gap: 22px;
}

.model-diagram__application {
    padding: 18px 20px;
    border: 2px solid rgba(107, 171, 228, 0.34);
    border-radius: 20px;
    background: #09121e;
}

.model-diagram__application strong {
    color: #b9ccdd;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.model-diagram__application > div {
    display: flex;
    margin-top: 12px;
    gap: 9px;
}

.model-diagram__application > div span {
    display: flex;
    width: 52px;
    height: 46px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(108, 177, 238, 0.26);
    border-radius: 12px;
    background: #0c1b2b;
}

.model-diagram__application i {
    font-size: 21px;
}

.model-diagram__connections {
    display: grid;
    align-self: stretch;
    padding: 38px 0;
    grid-template-rows: 1fr 1fr;
    align-items: center;
}

.model-diagram__connections span {
    position: relative;
    height: 8px;
    background: linear-gradient(90deg, rgba(82, 164, 237, 0.28), #59acf5);
    box-shadow: 0 0 22px rgba(62, 156, 239, 0.19);
}

.model-diagram__connections span::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -1px;
    width: 15px;
    height: 15px;
    border-top: 5px solid #59acf5;
    border-right: 5px solid #59acf5;
    transform: translateY(-50%) rotate(45deg);
}

.model-diagram__cloud {
    display: flex;
    min-height: 238px;
    padding: 28px 24px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    border: 3px solid #5aacf5;
    border-radius: 32px;
    background: linear-gradient(145deg, #153e69, #091a2c);
    box-shadow: 0 0 62px rgba(57, 148, 234, 0.2);
}

.model-diagram__cloud .logo-mark {
    width: 40px;
    height: 40px;
}

.model-diagram__cloud strong {
    color: #edf7ff;
    font-size: 19px;
}

.model-diagram__capabilities {
    display: grid;
    width: 100%;
    margin-top: 12px;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
}

.model-diagram__capabilities span {
    display: flex;
    min-height: 34px;
    padding: 0 7px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(137, 196, 248, 0.16);
    border-radius: 9px;
    background: rgba(4, 15, 26, 0.28);
    color: #a1c5e3;
    font-size: 9px;
    font-weight: 700;
    text-align: center;
}

/* Request continuity */
.request-diagram {
    display: grid;
    grid-template-columns: 128px 1fr 142px 1fr 128px;
    grid-template-rows: 36px 142px;
    align-items: center;
}

.request-diagram__step {
    display: flex;
    width: 122px;
    height: 122px;
    grid-row: 2;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    border: 2px solid rgba(117, 177, 232, 0.42);
    border-radius: 28px;
    background: #09111c;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);
}

.request-diagram__step:nth-of-type(1) {
    grid-column: 1;
}

.request-diagram__step--record {
    width: 136px;
    height: 136px;
    grid-column: 3;
    border-color: #55aefc;
    background: linear-gradient(145deg, #12345a, #0a1c31);
    box-shadow: 0 0 42px rgba(57, 148, 234, 0.16);
}

.request-diagram__step:last-of-type {
    grid-column: 5;
}

.request-diagram__step i {
    font-size: 34px;
}

.request-diagram__step span {
    color: #dceafa;
    font-size: 13px;
    font-weight: 700;
}

.request-diagram__track {
    height: 6px;
    grid-row: 2;
    overflow: hidden;
    background: rgba(85, 174, 252, 0.22);
}

.request-diagram__track:nth-of-type(2) {
    grid-column: 2;
}

.request-diagram__track:nth-last-of-type(2) {
    grid-column: 4;
}

.request-diagram__track span {
    display: block;
    width: 72%;
    height: 100%;
    background: linear-gradient(90deg, #3e97e7, #85c9ff);
    box-shadow: 0 0 18px rgba(91, 179, 255, 0.52);
}

.request-diagram__restart {
    display: flex;
    grid-column: 4;
    grid-row: 1;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #8295aa;
    font-size: 11px;
}

.request-diagram__restart i {
    font-size: 18px;
}

/* Competing state changes */
.ticket-diagram {
    display: grid;
    grid-template-columns: 124px 1fr 170px 1fr 146px;
    grid-template-rows: 92px 28px 92px;
    align-items: center;
}

.ticket-diagram__buyer,
.ticket-diagram__outcome {
    display: flex;
    min-height: 74px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    border: 2px solid rgba(117, 177, 232, 0.28);
    border-radius: 18px;
    background: #09111c;
    color: #bdccdc;
    font-size: 12px;
}

.ticket-diagram__buyer:first-child {
    grid-column: 1;
    grid-row: 1;
}

.ticket-diagram__buyer:nth-of-type(5) {
    grid-column: 1;
    grid-row: 3;
}

.ticket-diagram__buyer i {
    font-size: 26px;
}

.ticket-diagram__path {
    height: 5px;
    grid-column: 2;
    background: linear-gradient(90deg, rgba(85, 174, 252, 0.25), #5aaef6);
}

.ticket-diagram__path--top {
    grid-row: 1;
}

.ticket-diagram__path--bottom {
    grid-row: 3;
}

.ticket-diagram__ticket {
    display: flex;
    width: 152px;
    height: 152px;
    grid-column: 3;
    grid-row: 1 / 4;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border: 3px solid #5caef5;
    border-radius: 50%;
    background: linear-gradient(145deg, #153d68, #091a2d);
    box-shadow: 0 0 48px rgba(63, 151, 233, 0.2);
}

.ticket-diagram__ticket i {
    font-size: 28px;
}

.ticket-diagram__ticket strong {
    margin: 2px 0 -2px;
    color: #fff;
    font-family: var(--font-display);
    font-size: 35px;
    line-height: 1;
}

.ticket-diagram__ticket span {
    color: #8fa7bd;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
}

.ticket-diagram__outcome {
    grid-column: 5;
    position: relative;
}

.ticket-diagram__outcome::before {
    content: '';
    position: absolute;
    right: 100%;
    width: 100%;
    height: 5px;
    background: rgba(85, 174, 252, 0.42);
}

.ticket-diagram__outcome--accepted {
    grid-row: 1;
    border-color: rgba(83, 201, 160, 0.55);
    color: #9de1c7;
}

.ticket-diagram__outcome--accepted i {
    color: #70d8b2;
    font-size: 25px;
}

.ticket-diagram__outcome--rejected {
    grid-row: 3;
    border-color: rgba(214, 116, 126, 0.38);
    color: #c99aa0;
}

.ticket-diagram__outcome--rejected::before {
    background: rgba(190, 103, 114, 0.32);
}

.ticket-diagram__outcome--rejected i {
    color: #d47984;
    font-size: 25px;
}

/* Independent progress */
.lanes-diagram {
    display: grid;
    grid-template-columns: 196px 1fr;
    gap: 14px 42px;
    align-items: center;
}

.lanes-diagram__source {
    display: flex;
    min-height: 180px;
    grid-row: 1 / 4;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    border: 3px solid #4fa6f4;
    border-radius: 30px;
    background: linear-gradient(145deg, #12375e, #09192a);
    color: #ddecfa;
    font-size: 13px;
    font-weight: 700;
}

.lanes-diagram__source i {
    font-size: 40px;
}

.lanes-diagram__lane {
    display: grid;
    min-height: 58px;
    padding: 0 18px;
    grid-template-columns: 100px 1fr 32px;
    gap: 16px;
    align-items: center;
    border-radius: 16px;
    background: rgba(13, 25, 40, 0.9);
}

.lanes-diagram__lane strong {
    color: #b9c9d8;
    font-size: 12px;
}

.lanes-diagram__lane i {
    font-size: 22px;
}

.lanes-diagram__lane--paused i {
    color: #d8a158;
}

.lane-progress {
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(105, 151, 192, 0.13);
}

.lane-progress::after {
    content: '';
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #377fc2, #74b9f4);
}

.lane-progress--full::after {
    width: 92%;
}

.lane-progress--short::after {
    width: 38%;
    background: linear-gradient(90deg, #8c663d, #d19c58);
}

/* Independent scaling */
.scale-diagram {
    display: grid;
    grid-template-columns: 170px 180px 1fr;
    grid-template-rows: 1fr 26px;
    align-items: center;
}

.scale-diagram__work {
    display: flex;
    width: 154px;
    height: 154px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    border: 3px solid #55aaf6;
    border-radius: 50%;
    background: linear-gradient(145deg, #12375e, #09192a);
    color: #ddecfa;
    font-size: 13px;
    font-weight: 700;
}

.scale-diagram__work i {
    font-size: 38px;
}

.scale-diagram__fan {
    position: relative;
    width: 100%;
    height: 190px;
}

.scale-diagram__fan::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 52%;
    height: 6px;
    background: linear-gradient(90deg, #4b9ce7, #6db9fa);
}

.scale-diagram__fan span {
    position: absolute;
    left: 48%;
    width: 58%;
    height: 5px;
    transform-origin: left center;
    background: linear-gradient(90deg, #6db9fa, rgba(109, 185, 250, 0.4));
}

.scale-diagram__fan span:nth-child(1) { top: 49%; transform: rotate(-34deg); }
.scale-diagram__fan span:nth-child(2) { top: 50%; transform: rotate(-12deg); }
.scale-diagram__fan span:nth-child(3) { top: 50%; transform: rotate(12deg); }
.scale-diagram__fan span:nth-child(4) { top: 51%; transform: rotate(34deg); }

.scale-diagram__workers {
    display: grid;
    grid-template-columns: repeat(2, 92px);
    gap: 14px;
}

.scale-diagram__workers span {
    display: flex;
    width: 92px;
    height: 76px;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(104, 179, 245, 0.48);
    border-radius: 18px;
    background: #0a1522;
}

.scale-diagram__workers i {
    font-size: 29px;
}

.scale-diagram > strong {
    grid-column: 3;
    justify-self: start;
    color: #8094a8;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Replay */
.replay-diagram {
    min-height: 280px;
    padding-top: 66px;
}

.replay-diagram__timeline {
    position: absolute;
    top: 98px;
    right: 88px;
    left: 88px;
    height: 6px;
    background: rgba(86, 169, 244, 0.3);
}

.replay-diagram__timeline span {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #3d8ed7, #80c6ff);
    box-shadow: 0 0 22px rgba(76, 160, 236, 0.3);
}

.replay-diagram ol {
    display: grid;
    margin: 0;
    padding: 0;
    grid-template-columns: repeat(5, 1fr);
    list-style: none;
}

.replay-diagram li {
    display: flex;
    min-height: 76px;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
}

.replay-diagram li > span,
.replay-diagram li > i {
    display: flex;
    width: 58px;
    height: 58px;
    align-items: center;
    justify-content: center;
    border: 3px solid #5faef3;
    border-radius: 50%;
    background: #0b1928;
    color: #cfe7fb;
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
}

.replay-diagram li.is-failed > i {
    border-color: #c76672;
    background: #2b1118;
    color: #e18a95;
    font-size: 28px;
}

.replay-diagram li small {
    margin-top: 9px;
    color: #c57b85;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.replay-diagram__fix,
.replay-diagram__return {
    position: absolute;
    display: flex;
    bottom: 42px;
    align-items: center;
    gap: 7px;
    color: #9fb1c2;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.replay-diagram__fix {
    left: 47%;
}

.replay-diagram__return {
    right: 25%;
}

.replay-diagram__fix i,
.replay-diagram__return i {
    font-size: 22px;
}

/* Protected data */
.privacy-diagram {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) 120px minmax(200px, 1fr);
    gap: 28px;
    align-items: center;
}

.privacy-diagram__record {
    display: grid;
    min-height: 164px;
    padding: 24px;
    align-content: center;
    gap: 10px;
    border: 2px solid rgba(103, 171, 231, 0.34);
    border-radius: 22px;
    background: #09121e;
}

.privacy-diagram__record strong {
    color: #dce9f5;
    font-size: 16px;
}

.privacy-diagram__record > span {
    color: #8294a6;
    font-family: var(--font-mono);
    font-size: 11px;
}

.privacy-diagram__record .is-protected,
.privacy-diagram__record .is-redacted {
    display: flex;
    width: fit-content;
    padding: 5px 10px;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    background: rgba(87, 164, 230, 0.11);
    color: #9dc9ed;
}

.privacy-diagram__record .is-redacted {
    background: rgba(77, 188, 145, 0.1);
    color: #8ed1b7;
}

.privacy-diagram__record .is-redacted i {
    color: #69cda8;
}

.privacy-diagram__action {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 7px;
    color: #8ba0b4;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.privacy-diagram__action::before,
.privacy-diagram__action::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 34px;
    height: 5px;
    background: rgba(93, 173, 243, 0.45);
}

.privacy-diagram__action::before { right: calc(100% + 8px); }
.privacy-diagram__action::after { left: calc(100% + 8px); }

.privacy-diagram__action i {
    font-size: 29px;
}

/* Private application */
.edge-diagram {
    display: grid;
    grid-template-columns: 112px 1fr 210px 66px 168px;
    gap: 18px;
    align-items: center;
}

.edge-diagram__public,
.edge-diagram__application,
.edge-diagram__cloud {
    display: flex;
    min-height: 116px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 7px;
    border-radius: 24px;
    background: #09121e;
    color: #b8c9d8;
    font-size: 12px;
}

.edge-diagram__public {
    border: 2px solid rgba(105, 165, 219, 0.3);
}

.edge-diagram__public i,
.edge-diagram__application i {
    font-size: 32px;
}

.edge-diagram__cloud {
    min-height: 170px;
    border: 3px solid #59acf5;
    background: linear-gradient(145deg, #143b65, #091a2c);
    color: #e2effb;
    font-size: 14px;
}

.edge-diagram__cloud i {
    font-size: 48px;
}

.edge-diagram__arrow {
    height: 7px;
    background: linear-gradient(90deg, rgba(84, 167, 241, 0.26), #59acf5);
}

.edge-diagram__arrow::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -1px;
    width: 14px;
    height: 14px;
    border-top: 4px solid #59acf5;
    border-right: 4px solid #59acf5;
    transform: translateY(-50%) rotate(45deg);
}

.edge-diagram__wall {
    height: 220px;
    border-left: 4px solid rgba(98, 174, 241, 0.46);
}

.edge-diagram__wall::before,
.edge-diagram__wall::after,
.edge-diagram__wall span {
    content: '';
    position: absolute;
    left: 8px;
    width: 20px;
    height: 4px;
    background: rgba(98, 174, 241, 0.32);
}

.edge-diagram__wall::before { top: 25%; }
.edge-diagram__wall span { top: 50%; }
.edge-diagram__wall::after { top: 75%; }

.edge-diagram__application {
    border: 2px solid rgba(103, 171, 231, 0.36);
}

.edge-diagram__application::before {
    content: '';
    position: absolute;
    right: 100%;
    width: 54px;
    height: 5px;
    background: linear-gradient(90deg, rgba(83, 166, 239, 0.18), #52a7ef);
}

.edge-diagram__application small {
    color: #71869a;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.13em;
}

/* Bounded capacity */
.capacity-diagram {
    display: grid;
    grid-template-columns: 1fr 260px 1fr;
    grid-template-rows: 1fr 32px;
    gap: 18px 34px;
    align-items: center;
}

.capacity-diagram__incoming {
    display: grid;
    max-width: 236px;
    grid-template-columns: repeat(4, 34px);
    gap: 12px;
    justify-content: center;
}

.capacity-diagram__incoming span {
    width: 34px;
    height: 34px;
    border: 3px solid rgba(91, 171, 243, 0.62);
    border-radius: 9px;
    background: #0c1b2b;
}

.capacity-diagram__incoming::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    width: 54px;
    height: 7px;
    background: #58aaf3;
    transform: translateY(-50%);
}

.capacity-diagram__gate {
    padding: 26px;
    border: 3px solid #5db1fa;
    border-radius: 24px;
    background: linear-gradient(145deg, #12375e, #091a2c);
    box-shadow: 0 0 42px rgba(57, 148, 234, 0.14);
}

.capacity-diagram__gate strong {
    display: block;
    margin-bottom: 14px;
    color: #e0edfa;
    font-size: 13px;
}

.capacity-diagram__gate > div {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 7px;
}

.capacity-diagram__gate span {
    height: 42px;
    border-radius: 7px;
    background: linear-gradient(180deg, #7dc3fc, #3e8fd8);
}

.capacity-diagram__gate span.is-empty {
    border: 2px solid rgba(111, 177, 235, 0.22);
    background: rgba(5, 13, 22, 0.58);
}

.capacity-diagram__application {
    display: flex;
    min-height: 116px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 7px;
    border: 2px solid rgba(103, 171, 231, 0.36);
    border-radius: 24px;
    background: #09121e;
    color: #b8c9d8;
    font-size: 12px;
}

.capacity-diagram__application::before {
    content: '';
    position: absolute;
    right: 100%;
    width: 36px;
    height: 7px;
    background: #58aaf3;
}

.capacity-diagram__application i {
    font-size: 34px;
}

.capacity-diagram__held {
    display: flex;
    grid-column: 1;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #879caf;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.capacity-diagram__held i {
    color: #d8a158;
    font-size: 18px;
}

/* Current state and history */
.history-diagram {
    display: grid;
    grid-template-columns: 230px 1fr minmax(360px, 1.5fr);
    align-items: center;
}

.history-diagram__now {
    display: flex;
    min-height: 172px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border: 3px solid #5aacf5;
    border-radius: 28px;
    background: linear-gradient(145deg, #153c65, #091a2c);
    box-shadow: 0 0 42px rgba(61, 149, 230, 0.16);
}

.history-diagram__now small {
    color: #7fa6c8;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

.history-diagram__now strong {
    margin-top: 9px;
    color: #eef7ff;
    font-size: 21px;
}

.history-diagram__now span {
    margin-top: 5px;
    color: #8ed1b7;
    font-size: 12px;
}

.history-diagram__link {
    height: 7px;
    background: linear-gradient(90deg, #5aacf5, rgba(90, 172, 245, 0.26));
}

.history-diagram__events {
    display: grid;
    margin: 0;
    padding: 0;
    grid-template-columns: repeat(3, 1fr);
    list-style: none;
}

.history-diagram__events::before {
    content: '';
    position: absolute;
    top: 44px;
    right: 12%;
    left: 12%;
    height: 6px;
    background: rgba(97, 175, 244, 0.4);
}

.history-diagram__events li {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 11px;
    color: #8ea1b4;
    font-size: 11px;
}

.history-diagram__events i {
    display: flex;
    width: 58px;
    height: 58px;
    align-items: center;
    justify-content: center;
    border: 3px solid rgba(95, 174, 243, 0.58);
    border-radius: 50%;
    background: #0a1725;
    color: #88c7ff;
    font-size: 25px;
}

/* References */
.cloud-proof-sources {
    padding: 92px 0 106px;
    border-top: 1px solid rgba(161, 190, 221, 0.14);
    background: #05090e;
}

.cloud-proof-sources h2 {
    color: #eaf2fb;
    font-family: var(--font-body);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.025em;
}

.cloud-proof-sources p {
    max-width: 720px;
    margin-top: 14px;
    color: #8797a8;
    font-size: 14px;
    line-height: 1.65;
}

.cloud-proof-sources nav {
    display: flex;
    margin-top: 30px;
    flex-wrap: wrap;
    gap: 12px 26px;
}

.cloud-proof-sources a {
    color: #9fcdf3;
    font-size: 13px;
    text-decoration: underline;
    text-decoration-color: rgba(99, 170, 230, 0.34);
    text-underline-offset: 5px;
}

.cloud-proof-sources a:hover,
.cloud-proof-sources a:focus-visible {
    color: #d7edff;
}

@media (max-width: 900px) {
    .cloud-proof-page .cloud-proof-shell {
        width: min(100% - 56px, 920px);
    }

    .cloud-diagram {
        padding-right: 34px;
        padding-left: 34px;
    }

    .request-diagram {
        grid-template-columns: 108px 1fr 124px 1fr 108px;
    }

    .model-diagram__frame {
        grid-template-columns: 250px minmax(64px, 1fr) 278px;
    }

    .request-diagram__step {
        width: 102px;
        height: 102px;
    }

    .request-diagram__step--record {
        width: 118px;
        height: 118px;
    }

    .ticket-diagram {
        grid-template-columns: 104px 1fr 142px 1fr 122px;
    }

    .ticket-diagram__ticket {
        width: 132px;
        height: 132px;
    }

    .edge-diagram {
        grid-template-columns: 98px 1fr 180px 52px 142px;
        gap: 12px;
    }
}

@media (max-width: 720px) {
    .cloud-proof-page .cloud-proof-shell {
        width: min(100% - 36px, 640px);
    }

    .cloud-proof-hero {
        min-height: 560px;
    }

    .cloud-proof-hero .cloud-proof-shell {
        padding: 70px 0 66px;
    }

    .cloud-proof-hero__sun {
        top: auto;
        right: 32px;
        bottom: 46px;
        width: 66px;
        height: 66px;
        opacity: 0.72;
    }

    .cloud-proof-hero h1 {
        font-size: clamp(46px, 13vw, 62px);
    }

    .cloud-proof-hero__lead {
        margin-top: 26px;
        font-size: 17px;
        line-height: 1.62;
    }

    .cloud-proof-section {
        padding: 82px 0 92px;
    }

    .cloud-proof-copy h2 {
        font-size: clamp(38px, 10.6vw, 50px);
    }

    .cloud-proof-copy > p {
        margin-top: 24px;
        font-size: 16px;
    }

    .cloud-diagram {
        min-height: 0;
        margin-top: 46px;
        padding: 38px 22px;
    }

    .model-diagram {
        padding: 30px 16px;
    }

    .model-diagram__frame {
        width: 100%;
        min-height: 0;
        padding: 42px 18px 24px;
        grid-template-columns: 1fr;
        grid-template-rows: auto 62px auto;
        gap: 0;
    }

    .model-diagram__cluster-label {
        left: 16px;
    }

    .model-diagram__applications {
        width: min(310px, 100%);
        margin: 0 auto;
        gap: 14px;
    }

    .model-diagram__application {
        padding: 15px 16px;
    }

    .model-diagram__application > div {
        margin-top: 10px;
    }

    .model-diagram__application > div span {
        width: 46px;
        height: 42px;
    }

    .model-diagram__connections {
        width: 100%;
        height: 62px;
        padding: 0;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        justify-items: center;
    }

    .model-diagram__connections span {
        width: 8px;
        height: 100%;
        grid-column: 1;
        grid-row: 1;
        background: linear-gradient(180deg, rgba(82, 164, 237, 0.28), #59acf5);
    }

    .model-diagram__connections span + span {
        display: none;
    }

    .model-diagram__connections span::after {
        top: auto;
        right: 50%;
        bottom: -1px;
        transform: translateX(50%) rotate(135deg);
    }

    .model-diagram__cloud {
        width: min(310px, 100%);
        min-height: 210px;
        margin: 0 auto;
    }

    .request-diagram {
        grid-template-columns: 1fr;
        grid-template-rows: 96px 42px 112px 34px 42px 96px;
        justify-items: center;
    }

    .request-diagram__step,
    .request-diagram__step:nth-of-type(1),
    .request-diagram__step--record,
    .request-diagram__step:last-of-type {
        width: 92px;
        height: 92px;
        grid-column: 1;
    }

    .request-diagram__step:nth-of-type(1) { grid-row: 1; }
    .request-diagram__step--record { width: 108px; height: 108px; grid-row: 3; }
    .request-diagram__step:last-of-type { grid-row: 6; }

    .request-diagram__track,
    .request-diagram__track:nth-of-type(2),
    .request-diagram__track:nth-last-of-type(2) {
        width: 6px;
        height: 42px;
        grid-column: 1;
    }

    .request-diagram__track:nth-of-type(2) { grid-row: 2; }
    .request-diagram__track:nth-last-of-type(2) { grid-row: 5; }
    .request-diagram__track span { width: 100%; height: 72%; }
    .request-diagram__restart { grid-column: 1; grid-row: 4; }

    .ticket-diagram {
        grid-template-columns: 96px 116px 106px;
        grid-template-rows: 88px 88px;
        gap: 22px 12px;
        justify-content: center;
    }

    .ticket-diagram__buyer,
    .ticket-diagram__outcome {
        min-height: 70px;
    }

    .ticket-diagram__buyer:first-child { grid-column: 1; grid-row: 1; }
    .ticket-diagram__buyer:nth-of-type(5) { grid-column: 1; grid-row: 2; }
    .ticket-diagram__ticket { width: 112px; height: 112px; grid-column: 2; grid-row: 1 / 3; }
    .ticket-diagram__outcome { grid-column: 3; }
    .ticket-diagram__outcome--accepted { grid-row: 1; }
    .ticket-diagram__outcome--rejected { grid-row: 2; }
    .ticket-diagram__path { display: none; }
    .ticket-diagram__outcome::before { display: none; }

    .lanes-diagram {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .lanes-diagram__source {
        min-height: 112px;
        grid-row: auto;
        flex-direction: row;
        border-radius: 22px;
    }

    .lanes-diagram__lane {
        min-height: 56px;
        grid-template-columns: 82px 1fr 24px;
        gap: 10px;
        padding: 0 14px;
    }

    .scale-diagram {
        grid-template-columns: 1fr;
        grid-template-rows: auto 66px auto 22px;
        justify-items: center;
    }

    .scale-diagram__work {
        width: 124px;
        height: 124px;
    }

    .scale-diagram__fan {
        width: 6px;
        height: 66px;
        background: #5aacf5;
    }

    .scale-diagram__fan::before,
    .scale-diagram__fan span {
        display: none;
    }

    .scale-diagram__workers {
        grid-column: 1;
        grid-template-columns: repeat(2, 84px);
    }

    .scale-diagram__workers span {
        width: 84px;
        height: 68px;
    }

    .scale-diagram > strong {
        grid-column: 1;
        justify-self: center;
    }

    .replay-diagram {
        padding: 50px 10px 96px;
    }

    .replay-diagram__timeline {
        top: 79px;
        right: 34px;
        left: 34px;
    }

    .replay-diagram li > span,
    .replay-diagram li > i {
        width: 48px;
        height: 48px;
    }

    .replay-diagram__fix { bottom: 44px; left: 35%; }
    .replay-diagram__return { right: 16%; bottom: 44px; }

    .privacy-diagram {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .privacy-diagram__record {
        min-height: 136px;
    }

    .privacy-diagram__action {
        min-height: 56px;
    }

    .privacy-diagram__action::before,
    .privacy-diagram__action::after {
        display: none;
    }

    .edge-diagram {
        grid-template-columns: 1fr;
        gap: 18px;
        justify-items: center;
    }

    .edge-diagram__public,
    .edge-diagram__application {
        width: 160px;
    }

    .edge-diagram__cloud {
        width: 214px;
        min-height: 150px;
    }

    .edge-diagram__arrow {
        width: 7px;
        height: 50px;
        background: linear-gradient(180deg, rgba(84, 167, 241, 0.26), #59acf5);
    }

    .edge-diagram__arrow::after {
        top: auto;
        right: 50%;
        bottom: -1px;
        transform: translateX(50%) rotate(135deg);
    }

    .edge-diagram__wall {
        width: 240px;
        height: 18px;
        border-top: 4px solid rgba(98, 174, 241, 0.46);
        border-left: 0;
    }

    .edge-diagram__wall::before,
    .edge-diagram__wall::after,
    .edge-diagram__wall span,
    .edge-diagram__application::before {
        display: none;
    }

    .capacity-diagram {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
        gap: 24px;
        justify-items: center;
    }

    .capacity-diagram__incoming::after,
    .capacity-diagram__application::before {
        display: none;
    }

    .capacity-diagram__gate {
        width: min(280px, 100%);
    }

    .capacity-diagram__application {
        width: 180px;
    }

    .capacity-diagram__held {
        grid-column: 1;
        grid-row: 2;
    }

    .history-diagram {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .history-diagram__now {
        width: 220px;
    }

    .history-diagram__link {
        width: 7px;
        height: 54px;
        background: linear-gradient(180deg, #5aacf5, rgba(90, 172, 245, 0.26));
    }

    .history-diagram__events {
        width: 100%;
    }

    .cloud-proof-sources {
        padding: 76px 0 86px;
    }

    .cloud-proof-sources nav {
        flex-direction: column;
        gap: 15px;
    }
}

@media (max-width: 420px) {
    .cloud-proof-page .cloud-proof-shell {
        width: min(100% - 28px, 640px);
    }

    .cloud-proof-hero h1 {
        font-size: 44px;
    }

    .cloud-proof-copy h2 {
        font-size: 37px;
    }

    .cloud-diagram {
        padding-right: 14px;
        padding-left: 14px;
    }

    .ticket-diagram {
        grid-template-columns: 82px 100px 88px;
        gap: 16px 6px;
    }

    .ticket-diagram__ticket {
        width: 98px;
        height: 98px;
    }

    .ticket-diagram__buyer,
    .ticket-diagram__outcome {
        padding: 6px;
        font-size: 10px;
    }

    .replay-diagram li > span,
    .replay-diagram li > i {
        width: 42px;
        height: 42px;
        border-width: 2px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cloud-proof-page [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}