/* ==========================================================================
   PRICING — Desktop (1280px – 1920px)
   Reusable pricing cards component, same pattern as brief/menu/404:
   own file, since prices will keep changing and will eventually be
   managed from an admin panel. Ported from the old site's pricing
   CSS — same positions, converted from px to rem (÷10), !important
   dropped. Positioned inside contact-main via "bottom" (matching the
   flex row's own flex-end alignment), same spot as the old page.
   ========================================================================== */

.price-cards-group {
    position: absolute;
    left: 21.5rem;
    bottom: 50.2rem;
    display: flex;
    align-items: flex-end;
    gap: 3rem;
    z-index: 1;
}

.price-card {
    position: relative;
    width: 35rem;
    height: 49.7rem;
    flex: none;
}

.price-card.is-dark {
    height: 58.5rem;
}

#priceCardBrandbook {
    height: 71.7rem;
}

.price-card-custom {
    height: 36.7rem;
}

.price-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 35rem;
    height: 49.7rem;
    display: block;
    z-index: 0;
    pointer-events: none;
}

.price-card-bg-guideline { width: 35rem; height: 58.5rem; }
.price-card-bg-brandbook { width: 35rem; height: 71.7rem; }
.price-card-bg-custom    { width: 35rem; height: 36.7rem; }

.custom-input-box {
    position: absolute;
    left: 4rem;
    bottom: 4.5rem;
    width: 27rem;
    height: 13.7rem;
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.5);
    border-radius: 1rem;
    box-sizing: border-box;
    z-index: 1;
}

.custom-input-textarea {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 1.5rem 4.5rem 3rem 1.5rem;
    box-sizing: border-box;
    border: none;
    outline: none;
    background: transparent;
    resize: none;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 500;
    color: #000000;
    font-size: 1.5rem;
    line-height: 1.5rem;
    letter-spacing: -0.05em;
}

.custom-input-textarea::placeholder {
    color: rgba(0, 0, 0, 0.3);
    font-family: 'Atyp Display', sans-serif;
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 1.5rem;
    letter-spacing: -0.05em;
    opacity: 1;
}

.custom-send-btn {
    position: absolute;
    right: 1.5rem;
    bottom: 1rem;
    width: 3rem;
    height: 3rem;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: opacity 0.3s ease, transform 0.15s ease;
    z-index: 2;
}

.custom-send-btn:hover {
    opacity: 0.5;
}

.custom-send-btn:active {
    transform: scale(0.85);
}

.custom-send-btn img {
    width: 100%;
    height: 100%;
    display: block;
}

.custom-char-count {
    position: absolute;
    right: 5rem;
    bottom: 18.5rem;
    width: 8.2rem;
    text-align: right;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400;
    color: #000000;
    font-size: 1rem;
    line-height: 1rem;
    letter-spacing: -0.05em;
    z-index: 1;
}

.price-card-title {
    position: absolute;
    left: 4rem;
    top: 4.8rem;
    margin: 0;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 600;
    color: #6F6C90;
    font-size: 2.5rem;
    line-height: 2.5rem;
    letter-spacing: -0.08em;
    z-index: 1;
}

.price-card-amount {
    position: absolute;
    left: 4rem;
    top: 10.4rem;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 600;
    color: #000000;
    font-size: 5.4rem;
    line-height: 5.4rem;
    letter-spacing: -0.06em;
    z-index: 1;
}

/* "left" is set by JS (5px from the price's right edge) — this is
   just the fallback/starting value and the transition. */
.price-card-suffix {
    position: absolute;
    left: 16.8rem;
    top: 13rem;
    transition: left 0.3s ease;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 600;
    color: #6F6C90;
    font-size: 1.8rem;
    line-height: 1.8rem;
    letter-spacing: -0.06em;
    z-index: 1;
}

/* Dark theme card (Guideline) — black platform art, white text. */
.price-card.is-dark .price-card-title  { color: rgba(255, 255, 255, 0.6); }
.price-card.is-dark .price-card-amount { color: #ffffff; }
.price-card.is-dark .price-card-suffix { color: rgba(255, 255, 255, 0.6); }
.price-card.is-dark .price-item-text   { color: #ffffff; }

.price-item {
    position: absolute;
    left: 0;
    width: 35rem;
    height: 2rem;
    display: block;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    text-align: left;
    font: inherit;
    z-index: 1;
}

button.price-item.is-toggle {
    cursor: pointer;
}

/* Same 4.4rem step for every card. */
.price-row-1  { top: 21.2rem; }
.price-row-2  { top: 25.6rem; }
.price-row-3  { top: 30rem; }
.price-row-4  { top: 34.4rem; }
.price-row-5  { top: 38.8rem; }
.price-row-6  { top: 43.2rem; }
.price-row-7  { top: 47.6rem; }
.price-row-8  { top: 52rem; }
.price-row-9  { top: 56.4rem; }
.price-row-10 { top: 60.8rem; }
.price-row-11 { top: 65.2rem; }

.price-mark {
    position: absolute;
    left: 4rem;
    top: 0;
    width: 2rem;
    height: 2rem;
    display: block;
    opacity: 0.5;
}

.price-item.is-toggle .price-mark { opacity: 1; }
.price-item.is-toggle.is-off .price-mark { opacity: 0.5; }

.price-mark .mark-off {
    position: absolute;
    top: 0;
    left: 0;
    width: 2rem;
    height: 2rem;
    display: block;
}

.price-mark .mark-on {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1.4rem;
    height: 1rem;
    display: block;
    transition: opacity 0.2s ease;
}

.price-item-text {
    position: absolute;
    left: 8rem;
    top: 0.3rem;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400;
    color: #000000;
    font-size: 1.4rem;
    line-height: 1.4rem;
    letter-spacing: -0.05em;
    white-space: nowrap;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.price-item.is-toggle.is-off .mark-on { display: none; }
.price-item.is-toggle.is-off .price-item-text {
    opacity: 0.5;
    text-decoration: line-through;
}

/* Direction buttons under the cards (25.2x6rem) — same
   grow-shadow-margin trick as .ct-direction-btn. */
.price-btn {
    position: absolute;
    width: 25.2rem;
    height: 6rem;
    overflow: visible;
    display: block;
    z-index: 1;
}

.price-btn img {
    position: absolute;
    left: -0.621rem;
    top: -0.621rem;
    width: 26.6rem;
    height: 7.3rem;
    display: block;
}

.price-btn--branding { left: 39.6rem; bottom: 33.8rem; }
.price-btn--web      { left: 68.8rem; bottom: 33.8rem; }
.price-btn--product  { right: 68.8rem; bottom: 33.8rem; }
.price-btn--digital  { right: 39.6rem; bottom: 33.8rem; }

.price-btn.is-active {
    opacity: 1;
    cursor: pointer;
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

.price-btn.is-active:hover {
    transform: translateY(-0.5rem);
}

.price-btn.is-disabled {
    opacity: 0.2;
    cursor: default;
    pointer-events: none;
}