:root {
    color-scheme:dark;
    --bg:#070910;
    --text:#f5f7ff;
    --muted:#a0a9bd;
    --cyan:#72e6ff;
    --line:rgba(142,226,255,.16);
    font-family:Inter,"Helvetica Neue",Arial,sans-serif;
    color:var(--text);
    background:var(--bg)
}


* {
    box-sizing:border-box
}

body {
    margin:0;
    min-width:320px;
    background:radial-gradient(ellipse at 70% 40%,rgba(79,59,135,.1),transparent 55%),var(--bg)
}

a {
    color:inherit
}

button,input {
    font:inherit
}

a,button,summary,input {
    -webkit-tap-highlight-color:transparent
}

a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible {
    outline:2px solid var(--cyan);
    outline-offset:5px
}

.skip-link {
    position:fixed;
    top:12px;
    left:12px;
    z-index:5;
    padding:12px;
    background:var(--cyan);
    color:var(--bg);
    transform:translateY(-160%)
}

.skip-link:focus {
    transform:translateY(0)
}


.page-header,.page-footer {
    width:min(1200px,calc(100% - 80px));
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:space-between
}

.page-header {
    height:100px;
    border-bottom:1px solid var(--line)
}

.brand {
    display:flex;
    align-items:center;
    text-decoration:none;
    font-size:23px;
    font-weight:750;
    letter-spacing:-.8px
}

.brand img {
    margin-right:11px;
    image-rendering:auto
}

.brand span {
    color:var(--cyan)
}

.header-label,.eyebrow,.visual-index,.visual-tag,.note-label,.page-footer {
    font-family:"SFMono-Regular",Consolas,monospace;
    font-size:10px;
    letter-spacing:1.8px
}

.header-label {
    color:var(--muted)
}


.verification-shell {
    width:min(1200px,calc(100% - 80px));
    margin:48px auto;
    display:grid;
    grid-template-columns:1.05fr 1fr;
    min-height:670px;
    border:1px solid var(--line);
    border-radius:24px;
    overflow:hidden;
    background:rgba(12,16,27,.6)
}

.stack-visual {
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    isolation:isolate;
    overflow:hidden;
    background:#070910;
    border-right:1px solid var(--line);
    min-height:670px
}

.server-art {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:-2
}

.stack-visual:after {
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:linear-gradient(180deg,rgba(7,9,16,.75),transparent 25%,transparent 65%,#070910)
}

.visual-heading {
    display:flex;
    justify-content:space-between;
    gap:16px;
    padding:30px;
    color:var(--cyan)
}

.visual-index {
    color:#858ea2
}

.visual-caption {
    padding:32px;
    display:flex;
    flex-wrap:wrap;
    align-items:end;
    gap:18px
}

.caption-rule {
    width:28px;
    height:2px;
    background:var(--cyan);
    align-self:start;
    margin-top:12px
}

.visual-caption p {
    margin:0;
    font-size:28px;
    line-height:1.2;
    letter-spacing:-1px;
    color:#b3bdce
}

.visual-caption strong {
    color:var(--text);
    font-weight:650
}

.visual-tag {
    margin-left:auto;
    font-size:8px;
    line-height:1.8;
    color:var(--muted)
}


.verification-content {
    padding:48px 50px
}

.eyebrow {
    color:var(--cyan);
    display:flex;
    align-items:center;
    gap:9px;
    font-size:10px
}

.signal {
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--cyan);
    box-shadow:0 0 12px #72e6ff88
}

.mail-icon {
    width:46px;
    height:46px;
    margin-top:30px;
    display:grid;
    place-items:center;
    border:1px solid #72e6ff40;
    border-radius:13px;
    background:#72e6ff0a;
    color:var(--cyan)
}

.mail-icon svg {
    width:25px;
    height:25px
}

h1 {
    font-size:clamp(42px,4.5vw,62px);
    line-height:1.02;
    letter-spacing:-2.8px;
    margin:22px 0
}

h1 span {
    background:linear-gradient(100deg,var(--cyan),#aaa0ff);
    background-clip:text;
    color:transparent
}

.message {
    color:#c5cddd;
    font-size:15px;
    line-height:1.7;
    margin:0 0 12px
}

.access-note {
    font-size:12px;
    line-height:1.6;
    color:var(--muted);
    margin:0 0 24px
}

.delivery-note {
    padding:18px 20px;
    border-left:2px solid #9d7bff;
    background:linear-gradient(90deg,#9d7bff0d,transparent);
    display:grid;
    gap:9px
}

.note-label {
    font-size:8px;
    color:var(--muted);
    letter-spacing:1.3px
}

.sender {
    font-size:13px;
    overflow-wrap:anywhere
}

.expiry {
    font-size:11px;
    color:var(--muted)
}

.expiry span {
    color:#b9a4ff;
    margin-right:5px
}

.actions {
    margin-top:26px;
    display:grid;
    gap:10px
}

.button {
    min-height:48px;
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    border-radius:9px;
    padding:13px 17px;
    text-decoration:none;
    font-size:13px;
    font-weight:650;
    cursor:pointer;
    transition:background .15s,border-color .15s
}

.button-primary {
    color:#071016;
    background:var(--cyan);
    border:1px solid var(--cyan)
}

.button-primary:hover {
    background:#a1efff;
    border-color:#a1efff
}

.button-secondary {
    color:#dce4f4;
    background:#ffffff03;
    border:1px solid #ffffff24
}

.button-secondary:hover {
    background:#ffffff08;
    border-color:#72e6ff66
}

.resend summary {
    list-style:none
}

.resend summary::-webkit-details-marker {
    display:none
}

.expand-icon {
    font-size:19px;
    font-weight:400
}

.resend[open] .expand-icon {
    transform:rotate(45deg)
}

.resend-form {
    padding-top:18px;
    display:grid;
    gap:10px
}

.resend-form label {
    font-size:12px;
    color:#c5cddd
}

.resend-form input {
    width:100%;
    min-height:46px;
    padding:12px 14px;
    border:1px solid #ffffff30;
    border-radius:8px;
    background:#070910;
    color:var(--text)
}

.resend-form input::placeholder {
    color:#818ca3
}

.validation {
    font-size:12px;
    line-height:1.6;
    color:#ff9bb8
}

.validation-summary-valid {
    display:none
}

.validation ul {
    padding-left:18px;
    margin:0
}

.support {
    font-size:11px;
    color:var(--muted);
    margin:24px 0 0
}

.support a {
    margin-left:5px;
    text-underline-offset:3px
}

.support a:hover {
    color:var(--cyan)
}

.page-footer {
    padding-bottom:28px;
    color:#858fa4;
    font-size:9px;
    letter-spacing:1px
}


@media(min-width:1500px) {
    .verification-shell {
    margin-top:70px;
    margin-bottom:70px
}


}

@media(max-width:1000px) {
    .verification-content {
    padding:36px 30px
}

.visual-tag {
    display:none
}

.visual-heading {
    padding:24px;
    font-size:8px
}

.visual-heading .eyebrow {
    font-size:8px
}

.visual-caption {
    padding:24px
}

.verification-shell {
    grid-template-columns:1fr 1.1fr
}


}

@media(max-width:700px) {
    .page-header,.page-footer,.verification-shell {
    width:calc(100% - 32px)
}

.page-header {
    height:76px
}

.brand {
    font-size:21px
}

.header-label {
    font-size:8px;
    letter-spacing:1px
}

.verification-shell {
    margin:24px auto;
    grid-template-columns:1fr;
    border-radius:18px
}

.stack-visual {
    min-height:260px;
    border-right:0;
    border-bottom:1px solid var(--line)
}

.server-art {
    object-position:center 44%;
    opacity:.85
}

.visual-heading {
    padding:20px
}

.visual-caption {
    padding:20px
}

.visual-caption p {
    font-size:24px
}

.caption-rule {
    display:none
}

.verification-content {
    padding:30px 24px
}

h1 {
    font-size:48px
}

.mail-icon {
    margin-top:24px
}

.page-footer {
    font-size:8px;
    letter-spacing:.5px
}


}