*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{
    height:100%;
    scroll-behavior:smooth;
}

::selection{
    background:var(--teal);
    color:white;
}

body{
    background:var(--paper);
    color:var(--ink);
    font-family:var(--font-body);
    -webkit-font-smoothing:antialiased;

    min-height:100vh;

    display:flex;
    flex-direction:column;
}

/* =========================================
   ECG
========================================= */

.vitals{
    width:100%;
    height:44px;
}

.vitals svg{
    width:100%;
    height:100%;
    display:block;
}

.vitals path{
    fill:none;
    stroke:var(--teal);
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-dasharray:1400;
    stroke-dashoffset:1400;
    animation:
        draw 2.4s ease-out forwards,
        pulse 3.4s ease-in-out 2.4s infinite;
}

/* =========================================
   Main
========================================= */

main{
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:32px;

    animation:fadeUp .8s ease-out;
}

/* =========================================
   Name
========================================= */

.eyebrow{

    font-size:15px;

    font-weight:600;

    letter-spacing:.22em;

    text-transform:uppercase;

    color:#216b66;

    margin-bottom:26px;

}

/* =========================================
   Heading
========================================= */

h1{
    font-family:var(--font-heading);
    font-weight:500;
    font-size:clamp(2.2rem,7vw,4.2rem);
    line-height:1.04;
    letter-spacing:-.01em;
    margin-bottom:26px;
    max-width:14ch;
}

h1 em{
    color:var(--teal);
    font-style:italic;
}

/* =========================================
   Button
========================================= */

/* .enter{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-family:var(--font-heading);
    font-size:19px;
    font-weight:500;
    color:var(--ink);
    text-decoration:none;
    border:1px solid var(--ink);
    border-radius:var(--radius-full);
    padding:14px 30px;
    margin-bottom:44px;
    transition:all var(--transition-fast);
    width:100%;
    max-width:320px;
} */
 .enter{
    position:relative;

    display:flex;
    justify-content:center;
    align-items:center;

    width:320px;
    height:72px;

    font-family:var(--font-heading);
    font-size:19px;
    font-weight:500;

    color:var(--ink);
    text-decoration:none;

    border:1px solid var(--ink);
    border-radius:var(--radius-full);

    transition:all var(--transition-fast);
    
    cursor:pointer;
}

.enter .arrow{
    position:absolute;
    right:32px;
    transition:transform var(--transition-fast);

}

.enter:hover{
    background:var(--ink);
    color:var(--paper);
    gap:16px;
    transform:translateY(-2px);
    box-shadow:0 12px 30px rgba(0,0,0,.12);
}

.enter .arrow{
    transition:transform var(--transition-fast);
}

.enter:hover .arrow{
    transform:translateX(6px);
}

.enter:focus-visible{
    outline:3px solid var(--teal);
    outline-offset:4px;
}

/* =========================================
   Currently
========================================= */

.currently{
    max-width:420px;
    border-top:1px solid var(--line);
    padding-top:16px;
    color:var(--muted);
    font-size:12.5px;
    line-height:1.7;
}

.currently .label{
    color:var(--gold);
    text-transform:uppercase;
    letter-spacing:.1em;
    margin-right:8px;
}

.currently .dot{
    width:6px;
    height:6px;
    display:inline-block;
    border-radius:50%;
    background:var(--teal);
    margin-right:8px;
    animation:blink 2.6s ease-in-out infinite;
}

/* =========================================
   Footer
========================================= */

footer{
    text-align:center;
    padding:22px;
    color:var(--muted);
    font-size:11px;
    letter-spacing:.06em;
}