/* ===== IMPORTS ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

/* ===== RESET & BASE ===== */
* {
    font-weight: 400;
}

body {
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem; /* 14px */
    line-height: 20px;
    color: #111111;
    text-align: left;
    margin: 0;
    padding: 0;
    background: #FDFDFC;
}

/* ===== LAYOUT ===== */
.main-content {
    margin: 0 auto;
    padding: 70px 100px 70px;
    max-width: 550px;
    margin-top: 10px;
}



/* ===== TYPOGRAPHY ===== */
.name {
    font-weight: 500;
    margin-bottom: 5px;
}

.updated-date {
    color: #989897;
    margin-top: 0;
    margin-bottom: 10px;
}

h2 {
    font-size: 0.875rem;
    margin: 30px 0 10px 0;
    line-height: 20px;
    margin-bottom: -15px;
}

h3 {
    font-size: 0.875rem;
    color: #111111;
    margin: 30px 0 10px 0;
    line-height: 20px;
}

/* ===== LINKS ===== */
a {
    color: #2480ED;
    text-decoration: none;
}

.external-link::after {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 4px;
    vertical-align: text-top;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 5H5C3.89543 5 3 5.89543 3 7V12C3 13.1046 3.89543 14 5 14H10C11.1046 14 12 13.1046 12 12V8.5' stroke='%23989897' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7.5 9.5L14 3M14 3V7M14 3H10' stroke='%23989897' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

/* ===== TABLES ===== */
table {
    border-collapse: collapse;
    margin: 20px 0;
    width: 100%;
    table-layout: fixed;
}

th, td {
    padding: 10px 0;
    text-align: left;
    border-bottom: 1px solid #eee;
}

tr {
    cursor: pointer;
}

tr:not([onclick]) {
    cursor: default;
}

td:nth-child(1) {
    color: #989897;
    padding-right: 20px;
    width: 15%;
}

td:nth-child(2) {
    text-align: left;
    padding-left: 0;
    padding-right: 0;
    width: 45%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

td:nth-child(3) {
    color: #989897;
    text-align: right;
    width: 40%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== MEDIA COMPONENTS ===== */
.image-container {
    position: relative;
    overflow: hidden;
    border-radius: 0.5rem;
    background: #ffffff00;
    box-shadow: 0 0 1px #f2f2f2;
    margin: 2.5rem auto 0;
    width: auto;
    height: auto;
    max-width: 550px;
    box-sizing: border-box;
    border: 1px solid #F2F2F2;
    line-height: 0;
}

.image-container img {
    position: relative;
    width: auto;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    padding: 0;
    box-sizing: border-box;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* ===== SQUARE IMAGE CONTAINER ===== */
.image-container-square {
    position: relative;
    overflow: hidden;
    border-radius: 0.5rem;
    background: #ffffff00;
    box-shadow: 0 0 1px #f2f2f2;
    margin: 2.5rem auto 0;
    width: 100%;
    max-width: 550px;
    box-sizing: border-box;
    border: 1px solid #F2F2F2;
}

.image-container-square::before {
    content: "";
    display: block;
    padding-top: 100%;
}

.image-container-square img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    padding: 0;
    box-sizing: border-box;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* ===== OBJECT POSITION UTILITIES ===== */
.object-position-center {
    object-position: center center;
}

.object-position-left {
    object-position: left center !important;
}

.object-position-right {
    object-position: right center !important;
}

.object-position-top {
    object-position: center top !important;
}

.object-position-bottom {
    object-position: center bottom !important;
}

.object-position-top-left {
    object-position: left top !important;
}

.object-position-top-right {
    object-position: right top !important;
}

.object-position-bottom-left {
    object-position: left bottom !important;
}

.object-position-bottom-right {
    object-position: right bottom !important;
}

.image-caption {
    padding: 1rem 2rem 2rem;
    color: rgba(0, 0, 0, 0.4);
    font-size: 0.75rem;
    line-height: 1.2;
    letter-spacing: 0.00063rem;
    text-align: center;
}

.video-container {
    position: relative;
    overflow: hidden;
    border-radius: 0.5rem;
    background: #ffffff00;
    box-shadow: 0 0 1px #f2f2f2;
    margin: 2.5rem auto 0;
    width: auto;
    height: auto;
    max-width: 550px;
    box-sizing: border-box;
    border: 1px solid #F2F2F2;
    line-height: 0;
}

.video-container video {
    position: relative;
    width: auto;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    border-radius: 8px;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-playsinline: true;
}

.video-container video::-webkit-media-controls,
.video-container video::-webkit-media-controls-panel,
.video-container video::-webkit-media-controls-play-button,
.video-container video::-webkit-media-controls-start-playback-button {
    display: none !important;
}

.video-caption {
    padding: 1rem 2rem 2rem;
    color: rgba(0, 0, 0, 0.4);
    font-size: 0.75rem;
    line-height: 1.2;
    letter-spacing: 0.00063rem;
    text-align: center;
}

/* ===== MOBILE STYLES ===== */
@media screen and (max-width: 600px) {
    .main-content {
        padding: 20px 20px 20px;
        margin-top: 10px;
    }
}

/* ===== SAFARI iOS FIXES ===== */
@supports (-webkit-touch-callout: none) {
    .image-container, 
    .image-container-square,
    .video-container {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        will-change: transform;
    }
    
    .image-container::before, 
    .image-container-square::before,
    .video-container::before {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

/* ===== PHONE MOCKUP COMPONENT ===== */
.phone-container {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    margin: 40px auto 0;
    width: 100%;
    max-width: 550px;
    border: 1px solid #F2F2F2;
    box-shadow: 0 0 1px #f2f2f2;
    padding: 28px;
    box-sizing: border-box;
}

.phone-mockup {
    position: relative;
    width: 60%;
    max-width: 330px;
    margin: 0 auto;
}

.phone-mockup .screenshot {
    position: absolute;
    top: 4.5%;
    left: 50%;
    transform: translateX(-50%);
    width: 83.2%;
    height: auto;
    border-radius: 25px;
    z-index: 1;
}

.phone-mockup .phone {
    position: relative;
    width: 100%;
    height: auto;
    z-index: 10;
}