/* ==========================================
   CHEAPESTESSAY - MAIN STYLESHEET
   Combined styles for all sections
   ========================================== */

/* ==========================================
   CSS VARIABLES
   ========================================== */
:root {
    /* Colors from Figma Variables */
    --color-dark: #121827;
    --color-text: #585e65;
    --color-yellow: #fac115;
    --color-yellow-light: #fffbee;
    --color-navy-blue: #1e1437;
    --color-stroke: #ebedf0;
    --color-bg-blue: #e2eaff;
    --color-white: #fff;
    --color-button: #FDAC10;
    --color-green: #16a149;
    --color-gray-bg: #f9fafb;

    /* Typography */
    --font-fraunces: 'Fraunces', serif;
    --font-pacifico: 'Pacifico', cursive;
    --font-work-sans: 'Work Sans', sans-serif;
    --font-kanit: 'Kanit', sans-serif;
    --font-manrope: 'Manrope', sans-serif;

    /* Font aliases for sections */
    --font-heading: 'Fraunces', serif;
    --font-body: 'Work Sans', sans-serif;

    /* Spacing */
    --container-padding: 310px;
    --section-spacing: 120px;
    --section-gap: 68px;
    --heading-gap: 56px;
}

/* ==========================================
   RESET & BASE STYLES
   ========================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    /*overflow: auto;*/
}

body {
    font-family: var(--font-work-sans);
    background-color: var(--color-white);
    color: var(--color-dark);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button {
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
}

a {
    text-decoration: none;
    color: inherit;
}

/* ==========================================
   GLOBAL FOCUS STYLES FOR ACCESSIBILITY
   ========================================== */

/* Hide focus outline for mouse clicks (browsers that support :focus-visible) */
:focus:not(:focus-visible) {
    outline: none;
}

/* Global focus indicator for keyboard navigation (WCAG 2.1 AA) */
*:focus-visible {
    outline: 2px solid var(--color-yellow);
    outline-offset: 4px;
}

/* Skip link for screen readers */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--color-yellow);
    color: var(--color-dark);
    padding: 8px 16px;
    z-index: 10000;
    text-decoration: none;
    font-weight: 500;
    border-radius: 4px;
}

.skip-link:focus {
    top: 0;
}

/* Screen reader only text */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ==========================================
   HEADER SECTION
   ========================================== */
.site-header {
    background-color: var(--color-white);
    padding: 20px var(--container-padding);
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid var(--color-stroke);
    box-shadow: 0 1px 2px rgb(0 0 0 / 4%);
}

.header-container {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

/* Header Logo */
.header-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.logo-full {
    height: 40px;
    width: auto;
    display: block;
    transition: height 0.3s ease;
}

/* Header Navigation */
.header-nav {
    display: flex;
    align-items: center;
    gap: 36px;
    flex: 1;
    justify-content: center;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 5px;
    position: relative;
}

.nav-link {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
    transition: color 0.3s ease;
}

.nav-link:hover {
    color: var(--color-yellow);
}

.dropdown-icon {
    width: 8px;
    height: 8px;
    border-left: 2px solid var(--color-dark);
    border-bottom: 2px solid var(--color-dark);
    transform: rotate(-45deg);
    transition: transform 0.3s ease;
}

.has-dropdown:hover .dropdown-icon {
    transform: rotate(135deg);
}

/* Dropdown Menu */
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-white);
    border: 1px solid var(--color-stroke);
    border-radius: 12px;
    padding: 8px 0;
    min-width: 180px;
    box-shadow: 0 4px 12px rgb(0 0 0 / 10%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 100;
    margin-top: 8px;
}

.has-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
}

.dropdown-link {
    display: block;
    padding: 10px 16px;
    color: var(--color-dark);
    text-decoration: none;
    font-family: var(--font-work-sans);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.dropdown-link:hover {
    background-color: var(--color-yellow-light);
    color: var(--color-dark);
}

/* Header Actions */
.header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.action-link {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
    transition: color 0.3s ease;
}

.action-link:hover {
    color: var(--color-yellow);
}

.btn-primary {
    background-color: var(--color-yellow);
    color: var(--color-dark);
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    padding: 16px 32px;
    border-radius: 50px;
    transition: all 0.3s ease;
    box-shadow: 0 1px 2px 0 rgb(16 24 40 / 5%);
}

.btn-primary:hover {
    background-color: #e8b314;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgb(250 193 21 / 30%);
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
}

.mobile-menu-toggle span {
    width: 24px;
    height: 2px;
    background-color: var(--color-dark);
    transition: all 0.3s ease;
}

/* ==========================================
   HERO SECTION
   ========================================== */
.hero-screen {
    background-color: var(--color-white);
    height: 732px;
    padding: 20px var(--container-padding);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-container {
    position: relative;
    width: 100%;
    max-width: 1300px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 23px;
}

/* Content Block (Left Side) */
.content-block {
    display: flex;
    flex-direction: column;
    gap: var(--section-gap);
    padding-top: 70px;
    flex: 0 1 auto;
    max-width: 600px;
}

.heading-section {
    display: flex;
    flex-direction: column;
    gap: var(--heading-gap);
}

.main-heading {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.main-heading h2, .main-heading.main-heading-serv h1{
    font-family: var(--font-fraunces);
    font-weight: 900;
    font-size: 68px;
    line-height: 1.2;
    color: var(--color-dark);
    display: flex;
    flex-direction: column;
    margin: 0;
}

.heading-line {
    display: block;
}

.heading-highlight {
    font-family: var(--font-pacifico);
    font-weight: 400;
    font-style: normal;
    color: var(--color-dark);
}

.subtitle {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 18px;
    line-height: 1.4;
    color: var(--color-text);
    margin: 0;
}

/* CTA Button */
.button-wrapper {
    display: flex;
    gap: 16px;
}

.cta-button {
    background-color: var(--color-yellow);
    color: var(--color-dark);
    font-family: var(--font-work-sans);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    padding: 16px 32px;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.cta-button:hover {
    background-color: #e8b314;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgb(250 193 21 / 30%);
}

/* Ratings Section */
.ratings-section {
    display: flex;
    flex-direction: row;
    gap: 32px;
    height: 41px;
    align-items: flex-start;
}

.rating-item {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.rating-logo {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.rating-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.rating-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rating-name {
    height: 13px;
}

.rating-name img {
    height: 100%;
    width: auto;
}

/* Individual rating widths */
.rating-sitejabber .rating-name {
    width: 69px;
}

.rating-trustpilot .rating-name {
    width: 61px;
    line-height: 13px;
    font-weight: 500;
}

.rating-cheapestessay .rating-name {
    width: 99px;
}

.rating-stars {
    display: flex;
    gap: 4px;
    align-items: center;
}

.rating-score {
    font-family: var(--font-kanit);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-navy-blue);
}

.ratings-section .stars {
    width: 86px;
    min-width: 86px;
    height: 18px;
    display: block;
    transform: translateY(-2px);
}

.ratings-section .stars img {
    width: 100%;
    height: 100%;
}

/* Image Block (Right Side) */
.image-block {
    position: relative;
    flex-shrink: 0;
    width: 694px;
    height: 730px;
    display: grid;
    grid-template-columns: max-content;
    grid-template-rows: max-content;
}


.hero-image {
    grid-area: 1 / 1;
    width: 694px;
    height: 730px;
    margin-top: 0;
    object-fit: cover;
}

/* Decorative Elements */
.decorative-arrow {
    position: absolute;
    left: 1146px;
    top: 58px;
    width: 136px;
    height: 125px;
    pointer-events: none;
}

.decorative-arrow img {
    width: 100%;
    height: 100%;
}

.decorative-idea {
    position: absolute;
    left: 623px;
    top: 353px;
    width: 160px;
    height: 160px;
    pointer-events: none;
}

.decorative-idea img {
    width: 100%;
    height: 100%;
}

.stats-card {
    position: absolute;
    left: 606px;
    top: 528px;
    width: 202px;
    height: 111px;
    background-color: var(--color-white);
    border: 1.012px solid var(--color-yellow);
    border-radius: 24.283px;
    padding: 20.236px;
    display: flex;
    gap: 8.094px;
    box-shadow: 0 2px 8px rgb(0 0 0 / 5%);
}

.stat-item {
    display: flex;
    flex-direction: column;
    line-height: 1.5;
}

.stat-papers {
    border-right: 1.012px solid var(--color-stroke);
    padding-right: 8.094px;
    width: 72px;
}

.stat-number {
    font-family: var(--font-work-sans);
    font-weight: 500;
    font-size: 28px;
    color: var(--color-dark);
}

.stat-label {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 14px;
    color: var(--color-dark);
}

.no-ai-card {
    position: absolute;
    left: 1107px;
    top: 189px;
    width: 193px;
    height: 142px;
    background-color: var(--color-white);
    border: 1px solid var(--color-yellow);
    border-radius: 24px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    box-shadow: 0 2px 8px rgb(0 0 0 / 5%);
}

.no-ai-icon {
    width: 38px;
    height: 38px;
    background-color: #74aa9d;
    border-radius: 4px;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.no-ai-content {
    display: flex;
    flex-direction: column;
    text-align: center;
    line-height: 1.5;
}

.no-ai-title {
    font-family: var(--font-work-sans);
    font-weight: 600;
    font-size: 16px;
    color: var(--color-dark);
}

.no-ai-subtitle {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 14px;
    color: var(--color-text);
}

/* ==========================================
   TYPES OF ASSIGNMENTS SECTION
   ========================================== */
.types-section {
    background-color: var(--color-white);
    padding: var(--section-spacing) var(--container-padding);
    position: relative;
}

.types-container {
    max-width: 1300px;
    margin: 0 auto;
    width: 100%;
}

/* Heading Section */
.heading-wrapper {
    text-align: center;
    margin-bottom: 48px;
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
}

.section-title {
    font-family: var(--font-fraunces);
    font-weight: 900;
    font-size: 48px;
    line-height: 1.2;
    color: var(--color-dark);
    margin: 0 0 24px;
}

.section-subtitle {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 20px;
    line-height: 1.4;
    color: var(--color-text);
    margin: 0;
}

/* Types Grid */
.types-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1300px;
    margin: 0 auto;
}

/* Type Card */
.type-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-stroke);
    border-radius: 24px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    transition: all 0.3s ease;
    min-height: 138px;
}

.type-card:hover {
    border-color: var(--color-yellow);
    box-shadow: 0 4px 16px rgb(250 193 21 / 15%);
    transform: translateY(-4px);
}

.card-content {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    width: 100%;
}

.card-icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    background-color: var(--color-yellow-light);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.card-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.card-icon-pen img {
    width: 25px;
    height: 25px;
}

.card-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.card-title {
    font-family: var(--font-fraunces);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.2;
    color: var(--color-dark);
    margin: 0;
}

.card-description {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-text);
    margin: 0;
}

/* ==========================================
   WRITERS SECTION
   ========================================== */
.writers-section {
    background: linear-gradient(to top, #fff, #f9fafb);
    padding: var(--section-spacing) var(--container-padding);
    position: relative;
}

.writers-container {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
}

/* Heading */
.writers-heading {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
    text-align: center;
}

.writers-title {
    font-family: var(--font-fraunces);
    font-weight: 900;
    font-size: 48px;
    line-height: 1.2;
    color: var(--color-dark);
    margin: 0;
}

.writers-subtitle {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 18px;
    line-height: 1.4;
    color: var(--color-text);
    margin: 0;
}

/* Content */
.writers-content {
    display: flex;
    flex-direction: column;
    gap: 48px;
    width: 1300px;
    max-width: 100%;
}

/* Filter */
.writers-filter {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: center;
}

.filter-btn {
    background-color: var(--color-white);
    border: 1px solid var(--color-text);
    border-radius: 50px;
    padding: 16px 32px;
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-btn-active {
    background-color: var(--color-dark);
    border-color: var(--color-dark);
    color: var(--color-white);
}

.filter-btn:hover {
    border-color: var(--color-yellow);
    transform: translateY(-2px);
}

.filter-badge {
    position: relative;
    width: 24px;
    height: 24px;
}

.filter-badge img {
    width: 100%;
    height: 100%;
}

.badge-count {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
}

.badge-count-yellow {
    color: var(--color-yellow);
}

/* Writer Cards */
.writer-cards {
    display: flex;
    gap: 20px;
    /*align-items: flex-start;*/
    transition: transform 0.4s ease-in-out; /* 400ms per task spec */
}

.writer-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-yellow);
    border-radius: 24px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex: 0 0 calc(33% - 15px);
    width: calc(33% - 15px);
    min-width: 280px;
    transition: all 0.3s ease;
}

.writer-card:hover {
    box-shadow: 0 8px 24px rgb(250 193 21 / 20%);
    transform: translateY(-4px);
}

/* Avatar */
.writer-avatar {
    position: relative;
    width: 100%;
    height: 200px;
    border-radius: 10px;
    overflow: hidden;
}

.writer-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.writer-discipline {
    position: absolute;
    top: 20px;
    right: 20px;
    background-color: var(--color-stroke);
    border-radius: 24px;
    padding: 4px 12px;
}

.writer-discipline span {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-dark);
}

/* Writer Info */
.writer-info {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.writer-details {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.writer-name-rating {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.writer-name {
    font-family: var(--font-fraunces);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.2;
    color: var(--color-dark);
    margin: 0;
    min-height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.writer-name a:hover{
    text-decoration: underline;
    text-decoration-color: #e8af00;
}

.writer-rating {
    display: flex;
    gap: 4px;
    align-items: center;
}

.rating-stars {
    display: flex;
    gap: 0;
    width: 100px;
    height: 20px;
}

.rating-stars img {
    width: 20px;
    height: 20px;
}

.rating-number {
    font-family: var(--font-work-sans);
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    color: var(--color-dark);
}

/* Stats */
.writer-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
}

.stat-box {
    background-color: rgb(235 237 240 / 20%);
    border-radius: 10px;
    padding: 8px 4px;
    width: calc(50% - 6px);
    text-align: center;
    line-height: 1.5;
}

.stat-value {
    font-family: var(--font-work-sans);
    font-weight: 600;
    font-size: 20px;
    color: var(--color-dark);
}

.stat-value-green {
    color: var(--color-green);
}

.stat-label {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    color: var(--color-text);
}

/* Hire Button */
.hire-btn {
    background-color: var(--color-yellow);
    border: none;
    border-radius: 50px;
    padding: 16px 32px;
    width: 100%;
    font-family: var(--font-work-sans);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.hire-btn:hover {
    background-color: #e8af00;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgb(250 193 21 / 30%);
}

/* View All Button */
.view-all-btn {
    background-color: var(--color-dark);
    border: none;
    border-radius: 50px;
    padding: 16px 32px;
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-white);
    cursor: pointer;
    transition: all 0.3s ease;
}

.view-all-btn:hover {
    background-color: #1f2937;
    transform: translateY(-2px);
}

/* Carousel Wrapper */
.writers-carousel-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.writers-carousel-controls {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 32px;
}

/* Writers Pagination Dots - Figma design */
.writers-pagination {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.writers-pagination .dot {
    width: 12px;
    height: 12px;
    min-width: 12px;
    min-height: 12px;
    padding: 0;
    background-color: var(--color-stroke); /* Inactive: light gray */
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.writers-pagination .dot.active,
.writers-pagination .dot[aria-current="true"] {
    background-color: var(--color-yellow); /* Active: yellow */
}

.writers-pagination .dot:hover:not(.active) {
    background-color: #d1d5db; /* Slightly darker gray on hover */
}

.writers-pagination .dot:focus {
    outline: none;
}

.writers-pagination .dot:focus-visible {
    outline: 2px solid var(--color-yellow);
    outline-offset: 2px;
}

.carousel-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--color-white);
    border: 1px solid var(--color-stroke);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--color-dark);
}

.carousel-btn:hover:not(:disabled) {
    background-color: var(--color-yellow);
    border-color: var(--color-yellow);
    transform: translateY(-2px);
}

.carousel-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* ==========================================
   CTA SECTION
   ========================================== */
.cta-section {
    padding: 0 var(--container-padding);
    position: relative;
}

.cta-container {
    max-width: 1300px;
    margin: 0 auto;
    background-color: var(--color-bg-blue);
    border-radius: 24px;
    padding: 119px 48px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
}

/* Gift Icon */
.cta-icon {
    width: 120px;
    height: 120px;
    transform: rotate(0.959deg);
}

.cta-icon img {
    width: 100%;
    height: 100%;
}

/* Heading */
.cta-heading {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
    text-align: center;
}

.cta-title {
    font-family: var(--font-fraunces);
    font-weight: 900;
    font-size: 48px;
    line-height: 1.2;
    color: var(--color-dark);
    margin: 0;
}


.cta-subtitle {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 18px;
    line-height: 1.4;
    color: var(--color-text);
    margin: 0;
    max-width: 1082px;
}

/* Form */
.cta-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    width: 668px;
    max-width: 100%;
}

.cta-input-wrapper {
    display: flex;
    gap: 16px;
    align-items: center;
}

.cta-input-field {
    width: 414px;
    max-width: 100%;
    position: relative;
}

.cta-input-field input {
    width: 100%;
    background-color: var(--color-white);
    border: 1px solid var(--color-yellow);
    border-radius: 50px;
    padding: 16px 14px;
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-text);
    outline: none;
    transition: all 0.3s ease;
}

.cta-input-field input:focus {
    border-color: var(--color-yellow);
    box-shadow: 0 0 0 3px rgb(250 193 21 / 10%);
}

.cta-input-field input::placeholder {
    color: var(--color-text);
}

/* ==========================================
   FORM VALIDATION ERROR STATES (WCAG 2.1 AA)
   ========================================== */

/* Error message styling */
.input-error {
    color: #dc2626; /* Red, 4.78:1 contrast ratio on white */
    font-size: 14px;
    font-family: var(--font-work-sans);
    font-weight: 400;
    margin-top: 8px;
    display: none; /* Hidden by default */
    line-height: 1.4;
    position: absolute;
    bottom: -20px;
    left: 0;
}
.cta_new .error-alert,.cta_newsl .error-alert, .contact__us-form .error, .partnership-form .error{
    color: #dc2626;
    font-size: 14px;
    font-family: var(--font-work-sans);
    font-weight: 400;
}

/* Input with error - red border */
input.input-error-state {
    border: 2px solid #dc2626 !important;
    background-color: #fff;
}

/* Show error message when input has error */
input.input-error-state + .input-error {
    display: block;
}

/* Maintain yellow focus outline even with error */
input.input-error-state:focus {
    border: 2px solid #dc2626 !important;
    box-shadow: 0 0 0 3px rgb(220 38 38 / 10%);
}

input.input-error-state:focus-visible {
    outline: 2px solid var(--color-yellow);
    outline-offset: 4px;
}

.cta-button {
    background-color: var(--color-yellow);
    border: none;
    border-radius: 50px;
    padding: 16px 32px;
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.cta-button:hover {
    background-color: #e8af00;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgb(250 193 21 / 30%);
}

.cta-disclaimer {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-text);
    text-align: center;
    margin: 0;
}

/* ==========================================
   TESTIMONIALS SECTION
   ========================================== */

.testimonials-section {
    padding: var(--section-spacing) var(--container-padding);
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
}

/* Heading */
.testimonials-heading {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
    text-align: center;
    width: 100%;
}

.testimonials-title {
    font-family: var(--font-fraunces);
    font-weight: 900;
    font-size: 48px;
    line-height: 1.2;
    color: var(--color-dark);
    margin: 0;
}

/* Main Container */
.testimonials-container {
    max-width: 1300px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* Review Platform Badges */
.review-badges {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    justify-content: center;
}

.review-badge {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    padding: 16px 20px;
    border-radius: 50px;
    border: 1px solid #dcddec;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: 166px;
}

.review-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgb(0 0 0 / 10%);
}

.review-badge.active {
    border-color: var(--color-yellow);
    box-shadow: 0 0 0 2px var(--color-yellow);
    background-color: #f9f9fb;
}

/*.review-badge-reviewsio {*/
/*    background-color: var(--color-white);*/
/*}*/

.badge-logo {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.badge-logo img {
    width: 100%;
    height: 100%;
    display: block;
}

.badge-info {
    position: relative;
    display: flex;
    align-items: center;
    line-height: 0;
}

.badge-info img {
    display: block;
}

.review-badge-sitejabber .badge-info img {
    width: 74.478px;
    height: 16px;
    object-fit: contain;
}

.review-badge-reviewsio .badge-info {
    position: relative;
    width: 100.148px;
    height: 16px;
}

.review-badge-reviewsio .badge-info .reviewsio-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100.148px;
    height: 16px;
    object-fit: contain;
}

.review-badge-reviewsio .badge-info .reviewsio-io {
    position: absolute;
    top: 39.744%;
    left: 99.928%;
    width: 12.678px;
    height: 9.111px;
    object-fit: contain;
}

/* Testimonials Cards Wrapper - Desktop Carousel */
.testimonials-cards-wrapper {
    overflow: hidden;
    width: 100%;
}

/* Testimonial Cards */
.testimonial-cards {
    display: none;
    gap: 20px;
    /*align-items: center;*/
    width: max-content;
    transition: transform 0.4s ease-out;
}

.testimonial-cards.active {
    display: flex;
}

.testimonial-card {
    flex: 0 0 420px;
    width: 420px;
    background-color: var(--color-white);
    border: 1px solid var(--color-yellow);
    border-radius: 24px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.testimonial-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.testimonial-name {
    display: flex;
    gap: 12px;
    align-items: center;
    max-width: 310.5px;
}

.testimonial-name p {
    font-family: var(--font-fraunces);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.2;
    color: var(--color-dark);
    margin: 0;
}

.testimonial-stars {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
}

.stars {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    align-items: center;
    justify-content: flex-end;
    width: 100px;
}

.stars img {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.testimonial-text {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    min-height: 340px;
}

.testimonial-text p {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-text);
    margin: 0;
}

.testimonial-date {
    display: flex;
    gap: 16px;
    align-items: flex-end;
    width: 100%;
    margin-top: auto;
}

.testimonial-date p {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
    margin: 0;
}

/* Footer */
.testimonials-footer {
    display: flex;
    flex-direction: column;
    gap: 48px;
    align-items: center;
    width: 100%;
}

.overall-rating {
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.overall-rating p {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
    text-align: center;
    margin: 0;
}

.testimonials-button {
    background-color: var(--color-dark);
    border: none;
    border-radius: 50px;
    padding: 16px 32px;
    width: 149px;
    font-family: var(--font-manrope);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-white);
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.testimonials-button:hover {
    background-color: #2a3040;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgb(18 24 39 / 30%);
}

/* ==========================================
   BENEFITS SECTION
   ========================================== */

.benefits-section {
    background-color: var(--color-white);
    padding: var(--section-spacing) 0;
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
    justify-content: center;
}

/* Heading */
.benefits-heading {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
}

.benefits-title-wrapper {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.benefits-title {
    font-family: var(--font-fraunces);
    font-weight: 900;
    font-size: 48px;
    line-height: 1.2;
    color: var(--color-dark);
    text-align: center;
    margin: 0;
}

.benefits-subtitle {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 18px;
    line-height: 1.4;
    color: var(--color-dark);
    text-align: center;
    width: 100%;
}

.benefits-subtitle p {
    margin: 0;
}

/* Benefits Cards Container */
.benefits-container {
    /*display: flex;*/
    /*flex-wrap: wrap;*/
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
}

.benefit-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-yellow);
    border-radius: 24px;
    padding: 32px;
    width: 640px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.benefit-header {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    justify-content: center;
    width: 279px;
}

.benefit-icon {
    width: 110px;
    height: 110px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.benefit-icon img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.benefit-title {
    font-family: var(--font-fraunces);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.2;
    color: var(--color-dark);
    text-align: center;
    margin: 0;
    width: 100%;
    white-space: nowrap;
}

.benefit-description {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
    text-align: center;
    margin: 0;
    width: 100%;
}

/* Buttons */
.benefits-buttons {
    display: flex;
    gap: 31px;
    align-items: center;
}

.benefits-button {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    padding: 16px 32px;
    border-radius: 50px;
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.benefits-button-primary {
    background-color: #fac00c;
    border: none;
    color: #0d1b3b;
}

.benefits-button-primary:hover {
    background-color: #e8af00;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgb(250 192 12 / 30%);
}

.benefits-button-secondary {
    background-color: var(--color-white);
    border: 1px solid var(--color-dark);
    color: #0d1b3b;
}

.benefits-button-secondary:hover {
    background-color: #f5f5f5;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgb(0 0 0 / 10%);
}

/* Guarantee Section */
.benefits-guarantee {
    border-top: 1px solid var(--color-yellow);
    padding: 32px 0 60px;
    width: 1300px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
}

.guarantee-text {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
    text-align: center;
    margin: 0;
    width: 100%;
}

.guarantee-items {
    display: flex;
    gap: 32px;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.guarantee-row {
    display: contents;
}

.guarantee-item {
    display: flex;
    gap: 8px;
    align-items: center;
}

.guarantee-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.guarantee-icon img {
    width: 100%;
    height: 100%;
    display: block;
}

.guarantee-label {
    font-family: var(--font-work-sans);
    font-weight: 600;
    font-size: 20px;
    line-height: 1.5;
    color: var(--color-dark);
    margin: 0;
}

/* ==========================================
   HOW IT WORKS SECTION
   ========================================== */

.how-it-works-section {
    background-color: var(--color-white);
    padding: var(--section-spacing) var(--container-padding);
    display: flex;
    gap: 32px;
    align-items: center;
    justify-content: center;
}

/* Reduced gap between testimonials and how-it-works on service page */
.testimonials-section + .how-it-works-section {
    padding-top: 40px;
}

/* Reduced gap between how-it-works and faq on service page */
.how-it-works-section + .faq-section {
    padding-top: 40px;
}

.how-it-works-container {
    flex: 1;
    display: flex;
    gap: 35px;
    align-items: center;
    max-width: 1300px;
}

/* Progress Bar */
.steps-container-inner {
    display: flex;
    gap: 35px;
    width: 100%;
}

.progress-bar-wrapper {
    display: flex;
    align-items: flex-start; /* Align to top */
    justify-content: center;
    padding-top: 10px; /* Adjust slightly to align with first line of text */
}

.progress-bar-track {
    background-color: #add1ff;
    width: 2px;
    min-height: 244px; /* Changed from height to min-height */
    height: 100%; /* To stretch if needed, though container is flex */
    border-radius: 8px;
    position: relative;
}

.progress-bar-fill {
    position: absolute;
    background-color: var(--color-dark);
    width: 2px;
    height: 25%;
    border-radius: 4px;
    top: 0;
    left: 0;
    transition: top 0.3s ease, height 0.3s ease;
}

/* Content */
.how-it-works-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: flex-start;
    width: 1300px;
    max-width: 1300px;
}

.how-it-works-title {
    font-family: var(--font-fraunces);
    font-weight: 900;
    font-size: 48px;
    line-height: 1.2;
    color: var(--color-dark);
    margin: 0;
}
.how-it-works-title-srv{
    max-width: 434px;
    margin-bottom: 32px;
}

/* Steps */
.steps-list {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
}

.step-item {
    display: flex;
    flex-direction: column;
    gap: 12px;
    color: var(--color-dark);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    opacity: 0.5;
}

.step-item:hover {
    opacity: 0.8;
}

.step-item.active {
    opacity: 1;
}

.step-title {
    margin: 0;
    padding: 0;
    transition: all 0.3s ease;
}

.step-title ol {
    font-family: var(--font-fraunces);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.2;
    color: var(--color-dark);
    margin: 0;
    padding: 0;
    list-style-position: inside;
}

.step-title ol li {
    padding-left: 0;
}

.step-description {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
    margin: 0;
    width: 457px;
    max-width: 100%;
    display: none;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}

.step-item.active .step-description {
    display: block;
    opacity: 1;
    transform: translateY(0);
    animation: slide-down 0.3s ease forwards;
}

@keyframes slide-down {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Order Form Screenshot */
.order-form-screenshot {
    width: 681px;
    height: 442px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.order-form-screenshot:before{
    position: absolute;
    content: '';
    width: 93%;
    height: 98.5%;
    background: #fac00c;
    border-radius: 20px;
    top: -8px;
    left: -22px;
}
.order-form-screenshot img {
    width: 100%;
    display: none;
    border: 1px solid #fac00c;
    border-radius: 20px;
    padding: 20px;
    z-index: 1;
    background-color: #fff;
}
.order-form-screenshot img.active {
    display: block;
}

/* ========================================== */

/* HOW IT WORKS SECTION - RESPONSIVE (992px) */

/* ========================================== */

@media (width >= 768px) and (width <= 1299px) {
    .how-it-works-section {
        padding: 60px 40px;
        flex-direction: column;
        gap: 24px;
    }

    .how-it-works-title {
        font-size: 36px;
        margin-bottom: 16px;
    }

    /* Hide progress bar for cleaner tablet layout */
    .progress-bar-wrapper {
        display: none;
    }

    .how-it-works-container {
        flex-direction: column;
        gap: 24px;
        width: 100%;
    }

    .how-it-works-content {
        gap: 24px;
        align-items: center;
        text-align: center;
    }

    .steps-container-inner {
        flex-direction: column;
        gap: 24px;
        width: 100%;
    }

    .steps-list {
        gap: 24px;
    }

    .step-item {
        gap: 8px;
    }

    .step-title ol {
        font-size: 20px;
    }

    .step-description {
        font-size: 15px;
        width: 100%;
        max-width: 100%;
    }

    /* Order form screenshot */
    .order-form-screenshot {
        width: 100%;
        height: auto;
        max-width: 500px;
        margin: 0 auto;
    }
}

/* ==========================================
   SERVICES SECTION
   ========================================== */

.services-section {
    background-color: var(--color-white);
    padding: var(--section-spacing) var(--container-padding);
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
}

/* Heading */
.services-heading {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
    text-align: center;
}

.services-title {
    font-family: var(--font-fraunces);
    font-weight: 900;
    font-size: 48px;
    line-height: 1.2;
    color: var(--color-dark);
    margin: 0;
}

.services-subtitle {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 18px;
    line-height: 1.4;
    color: var(--color-text);
    width: 682px;
    max-width: 100%;
}

.services-subtitle p {
    margin: 0;
}

/* Main Container */
.services-container {
    border: 1px solid var(--color-yellow);
    border-radius: 24px;
    padding: 60px 70px;
    display: flex;
    gap: 80px;
    align-items: center;
    justify-content: center;
    width: 1300px;
    max-width: 100%;
}

/* Left Content */
.services-left {
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: flex-start;
    justify-content: center;
    height: 216px;
}

.services-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
}

.services-title-row {
    display: flex;
    gap: 16px;
    align-items: center;
    width: 461px;
    max-width: 100%;
}

.services-icon {
    width: 61px;
    height: 61px;
    flex-shrink: 0;
}

.services-icon img {
    width: 100%;
    height: 100%;
}

.services-title-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.services-main-title {
    font-family: var(--font-fraunces);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.2;
    color: var(--color-dark);
    margin: 0;
}

.services-price {
    font-family: var(--font-work-sans);
    font-weight: 600;
    font-size: 20px;
    line-height: 1.5;
    color: var(--color-yellow);
    margin: 0;
}

.services-description {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-text);
    max-width: 461px;
}

.services-description p {
    margin: 0;
}

/* CTA Button */
.services-cta-button {
    background-color: var(--color-yellow);
    border: none;
    border-radius: 50px;
    padding: 16px 32px;
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.services-cta-button:hover {
    background-color: #e8af00;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgb(250 193 21 / 30%);
}

/* Right Content - Types */
.services-right {
    display: flex;
    flex-direction: column;
    gap: 36px;
    align-items: flex-start;
    justify-content: center;
    width: 493px;
}

/* Level Tabs */
.services-tabs {
    display: flex;
    width: 100%;
}

.services-tab {
    flex: 1;
    background-color: var(--color-white);
    border: none;
    border-bottom: 1px solid var(--color-stroke);
    padding: 8px 18px;
    font-family: var(--font-work-sans);
    font-weight: 600;
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-dark);
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.services-tab:hover {
    color: var(--color-yellow);
}

.services-tab-active {
    border-bottom: 1px solid var(--color-dark);
}

/* Service Tags */
.services-tags {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 100%;
}

.services-tag {
    background-color: var(--color-yellow-light);
    border: 1px solid var(--color-yellow);
    border-radius: 50px;
    padding: 10px 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.services-tag:hover {
    background-color: #fff;
    transform: translateY(-2px);
}

.services-tag span {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
    text-align: center;
    white-space: nowrap;
}

/* ========================================== */

/* SERVICES SECTION - RESPONSIVE (992px) */

/* ========================================== */

@media (width >= 768px) and (width <= 1299px) {
    .services-section {
        padding: 60px 40px;
        gap: 24px;
    }

    .services-title {
        font-size: 36px;
    }

    .services-subtitle {
        font-size: 16px;
        width: 100%;
    }

    /* Stack container vertically */
    .services-container {
        flex-direction: column;
        gap: 32px;
        padding: 40px;
        width: 100%;
    }

    /* Left content section */
    .services-left {
        height: auto;
        align-items: center;
        text-align: center;
        width: 100%;
    }

    .services-info {
        align-items: center;
        width: 100%;
    }

    .services-title-row {
        justify-content: center;
        width: 100%;
    }

    .services-icon {
        width: 50px;
        height: 50px;
    }

    .services-title-content {
        align-items: center;
        text-align: center;
    }

    .services-main-title {
        font-size: 20px;
    }

    .services-price {
        font-size: 18px;
    }

    .services-description {
        font-size: 15px;
        text-align: center;
    }

    .services-cta-button {
        font-size: 15px;
        padding: 14px 28px;
    }

    /* Right content section */
    .services-right {
        width: 100%;
        max-width: 500px;
        gap: 28px;
        align-items: center;
    }

    /* Service tags grid */
    .services-tags {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .services-tag {
        padding: 8px 16px;
    }

    .services-tag span {
        font-size: 14px;
    }
}

/* ==========================================
   SEO SECTION
   ========================================== */

.seo-section {
    background: linear-gradient(to bottom, #f9fafb, #fff);
    padding: var(--section-spacing) var(--container-padding);
    border-radius: 16px 16px 0 0;
}

.seo-outer-container {
    background-color: var(--color-bg-blue);
    border-radius: 24px;
    padding: 48px;
    max-width: 1300px;
    margin: 0 auto;
}

.seo-inner-container {
    background-color: var(--color-white);
    border-radius: 24px;
    padding: 48px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

/* Heading */
.seo-heading {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: center;
}

.seo-title {
    font-family: var(--font-fraunces);
    font-weight: 900;
    font-size: 48px;
    line-height: 1.2;
    color: var(--color-dark);
    text-align: center;
    margin: 0;
}

.seo-icon {
    width: 46px;
    height: 58px;
    flex-shrink: 0;
}

.seo-icon img {
    width: 100%;
    height: 100%;
}

/* Content */
.seo-content {
    display: flex;
    gap: 24px;
    padding-top: 24px;
    width: 100%;
    position: relative;
    max-height: 400px;
}

.seo-columns-wrapper {
    display: flex;
    gap: 24px;
    flex: 1;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.seo-columns-wrapper::-webkit-scrollbar {
    display: none;
}

.seo-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.seo-block {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.seo-block-title, .seo-block-text h2{
    font-family: var(--font-fraunces);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.2;
    color: var(--color-dark);
    margin: 0;
}
.seo-block-text h3{
    font-family: var(--font-fraunces);
    font-weight: 600;
    font-size: 20px;
    line-height: 1.2;
    color: var(--color-dark);
    margin: 0;
}
.seo-block-text h4{
    font-family: var(--font-fraunces);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.2;
    color: var(--color-dark);
    margin: 0;
}

.seo-block-text {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-text);
    column-count: 2;
    column-gap: 20px;
}

.seo-block-text p {
    margin: 0 0 16px;
}

.seo-block-text a{
    color: #e8b314;
}
.seo-block-text a:hover{
    text-decoration: underline;
}

.seo-block-text p:last-child {
    margin-bottom: 0;
}

.seo-list, .seo-block-text ul, .seo-block-text ol {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-text);
    margin: 0;
    padding-left: 24px;
}

.seo-list li, .seo-block-text ul li, .seo-block-text ol li {
    margin-bottom: 8px;
}

.seo-list li:last-child, .seo-block-text ul li:last-child, .seo-block-text ol li:last-child {
    margin-bottom: 0;
}

.seo-block-text table {
    border: 1px solid #5f6368;
    width: 100%;
    border-collapse: separate;
    margin: 0 0 16px;
}

.seo-block-text table td, .seo-block-text table tr {
    border: 1px solid #5f6368;
}

.seo-block-text table td {
    padding: 10px;
}

/* Progress Bar */
.seo-progress {
    position: relative;
    width: 8px;
    flex-shrink: 0;
    align-self: stretch;
}

.seo-progress-track {
    position: absolute;
    top: 0;
    left: 0;
    width: 8px;
    height: 100%;
    background-color: #ebefff;
    border-radius: 8px;
}

.seo-progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 8px;
    height: 97px;
    background-color: var(--color-dark);
    border-radius: 4px;
}

/* ========================================== */

/* SEO SECTION - RESPONSIVE (992px) */

/* ========================================== */

@media (width >= 768px) and (width <= 1299px) {
    .seo-section {
        padding: 60px 40px;
    }

    .seo-outer-container {
        padding: 32px;
        max-width: 100%;
    }

    .seo-inner-container {
        padding: 32px 20px;
        gap: 16px;
    }

    /* Heading */
    .seo-heading {
        gap: 12px;
        flex-wrap: wrap;
    }

    .seo-title {
        font-size: 36px;
    }

    .seo-icon {
        width: 38px;
        height: 48px;
    }

    /* Content area */
    .seo-content {
        flex-direction: column;
        gap: 20px;
        padding-top: 20px;
        max-height: none;
    }

    .seo-columns-wrapper {
        flex-direction: column;
        gap: 20px;
        overflow-y: visible;
    }

    .seo-column {
        gap: 24px;
    }

    .seo-block {
        gap: 10px;
    }

    .seo-block-title {
        font-size: 20px;
    }

    .seo-block-text {
        font-size: 15px;
        line-height: 1.6;
    }

    .seo-block-text p {
        margin: 0 0 12px;
    }

    .seo-list {
        font-size: 15px;
        padding-left: 20px;
    }

    .seo-list li {
        margin-bottom: 6px;
    }

    /* Hide progress bar on tablet */
    .seo-progress {
        display: none;
    }
}

/* ==========================================
   RESPONSIVE DESIGN
   ========================================== */

/* Large Desktop (1600px and below) */
@media (width >= 1300px) {
    :root {
        --container-padding: 80px;
        --section-spacing: 100px;
    }

    .main-heading h2, .main-heading.main-heading-serv h1 {
        font-size: 56px;
    }

    .decorative-arrow {
        left: 800px;
        top: 40px;
        transform: scale(0.8);
    }

    .decorative-idea {
        left: 500px;
        top: 320px;
        transform: scale(0.8);
    }

    .stats-card {
        left: 500px;
        top: 480px;
    }

    .no-ai-card {
        left: 800px;
        top: 150px;
    }
}

/* Tablet Landscape (1200px and below) */
@media (width >= 768px) and (width <= 1299px) {
    :root {
        --container-padding: 40px;
        --section-spacing: 80px;
    }

    .site-header {
        padding: 16px var(--container-padding);
    }

    .header-nav {
        gap: 24px;
    }

    .logo-full {
        height: 40px;
    }

    .main-heading h2, .main-heading.main-heading-serv h1 {
        font-size: 48px;
    }

    .subtitle {
        font-size: 18px;
    }

    /* Hero Section */
    .hero-screen {
        padding: 60px var(--container-padding);
    }

    .hero-container {
        gap: 40px;
    }

    .content-block {
        max-width: 500px;
    }

    .image-block {
        width: 450px;
        height: 522px;
    }

    .image-background {
        width: 450px;
        height: 454px;
    }

    .hero-image {
        width: 450px;
        height: 522px;
    }

    .decorative-arrow,
    .decorative-idea {
        display: none;
    }

    .stats-card {
        inset: auto 20px 80px auto;
        transform: scale(0.9);
    }

    .no-ai-card {
        left: auto;
        right: 20px;
        top: 80px;
        transform: scale(0.9);
    }

    .section-title {
        font-size: 40px;
    }

    .types-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .card-title {
        font-size: 22px;
    }

    /* Services Section */
    .services-container {
        gap: 40px;
        padding: 40px;
    }

    .services-title {
        font-size: 40px;
    }

    .services-right {
        width: 400px;
    }

    /* Writers Section */
    .writers-section {
        padding: 60px var(--container-padding);
    }

    .writer-cards {
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
    }

    .writer-card {
        width: calc(50% - 10px);
        min-width: 320px;
    }

    .writer-avatar {
        width: 100%;
        height: auto;
        aspect-ratio: 372 / 200;
    }

    .writer-stats {
        width: 100%;
    }

    .filters-row {
        flex-wrap: wrap;
        gap: 12px;
    }

    /* Benefits Section - Tablet (Node: 2165:5862) */
    .benefits-section {
        padding: 40px var(--container-padding);
        gap: 48px;
    }

    .benefits-heading {
        width: 728px;
        max-width: 100%;
        gap: 24px;
    }

    .benefits-title {
        font-size: 32px;
        line-height: 1.2;
        margin-bottom: 0;
    }

    .benefits-subtitle {
        font-size: 16px;
        line-height: 1.4;
    }

    .benefits-subtitle p {
        display: inline;
    }

    .benefits-container {
        display: flex;
        flex-direction: column;
        width: 728px;
        max-width: 100%;
        gap: 20px;
    }

    .benefit-card {
        width: 100%;
        max-width: none;
        min-width: auto;
        padding: 32px;
        gap: 12px;
    }

    .benefit-header {
        width: 279px;
    }

    .benefit-icon {
        width: 110px;
        height: 110px;
        margin-bottom: 0;
    }

    .benefit-title {
        font-size: 24px;
        white-space: normal;
        margin-bottom: 0;
    }

    .benefit-description {
        font-size: 16px;
        line-height: 1.5;
    }

    .benefits-buttons {
        flex-flow: row nowrap;
        justify-content: center;
        gap: 30px;
    }

    .benefits-button {
        width: auto;
        max-width: none;
    }

    .benefits-guarantee {
        width: 728px;
        max-width: 100%;
        padding: 32px 0 60px;
        gap: 32px;
    }

    .guarantee-items {
        flex-direction: column;
        gap: 32px;
    }

    .guarantee-row {
        display: flex;
        gap: 32px;
        align-items: center;
        justify-content: center;
    }

    .guarantee-label {
        font-size: 20px;
    }

    /* CTA Section */
    .cta-container {
        padding: 80px 40px;
    }

    .cta-title {
        font-size: 40px;
    }

    .cta-form {
        width: 100%;
        max-width: 600px;
    }

    .cta-input-field {
        width: 100%;
        max-width: 350px;
    }

    /* Testimonials Section */
    .testimonials-section {
        padding: 60px var(--container-padding);
    }

    .testimonials-title {
        font-size: 40px;
    }

    .review-badges {
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
    }

    .review-badge {
        width: auto;
        min-width: 150px;
    }

    /* SEO Section */
    .seo-section {
        padding: 60px var(--container-padding);
    }

    .seo-title {
        font-size: 40px;
    }

    .seo-outer-container {
        padding: 30px;
    }

    .seo-inner-container {
        padding: 30px 24px;
    }
}

/* Tablet Portrait (<768px) */
@media (width <= 767px) {
    .header-container {
        gap: 0; /* Remove gap, spacing controlled by individual elements */
    }
    .testimonial-text {
        min-height: auto;
    }
    .header-nav {
        display: none;
    }
    .seo-block-text {
        column-count: 1;
    }
    .mobile-menu-toggle {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 27px;
        height: 18px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 13px 13.5px; /* Expands to 44×44px touch target: (44-18)/2 = 13px vertical, (44-27)/2 = 13.5px horizontal */
        box-sizing: content-box; /* Ensure padding adds to dimensions, not subtracts from them */
        margin-left: 20px; /* 20px gap from button */
    }

    .mobile-menu-toggle span {
        display: block;
        width: 100%;
        height: 2px;
        background-color: var(--color-dark);
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

    .mobile-menu-toggle.active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .mobile-menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-toggle.active span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    .mobile-menu-overlay {
        display: block;
    }

    /* Keep header-actions visible but hide only the Log In link */
    .header-actions {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-left: auto; /* Push button and burger to the right */
    }

    .header-actions .action-link {
        display: none; /* Hide "Log In" link on tablet */
    }

    /* Exact button size from Figma for tablet: 169x56px */
    .header-actions .btn-primary {
        width: 169px;
        height: 56px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Hero Section - Single Column Layout */
    .hero-screen {
        padding: 60px var(--container-padding);
        height: auto; /* Remove fixed height for stacked layout */
    }

    .main-heading h2, .main-heading.main-heading-serv h1 {
        font-size: 48px; /* 0.75x scaling from 64px desktop */
    }

    .subtitle {
        font-size: 18px; /* Maintain readability */
    }

    .hero-container {
        flex-direction: column; /* Stack vertically */
        align-items: center; /* Center both blocks */
        text-align: center; /* Center text */
        gap: 32px;
    }

    .content-block {
        max-width: 600px; /* Optimal readability width */
        text-align: center; /* Ensure text centered */
        padding-top: 0; /* Remove top padding in stacked layout */
    }

    .ratings-section {
        gap: 24px; /* Reduced gap for tablet */
        justify-content: center; /* Center ratings */
    }

    .image-block {
        width: 400px;
        height: auto; /* Auto height for responsive image */
        max-width: 100%; /* Ensure no overflow */
        margin: 0 auto; /* Center the image block */
    }

    .image-background {
        width: 400px;
        height: auto; /* Auto height */
    }

    .hero-image {
        width: 400px;
        height: auto; /* Auto height for aspect ratio */
    }

    .stats-card,
    .no-ai-card {
        transform: scale(0.8); /* Slightly smaller for tablet */
    }

    .stats-card {
        right: 10px;
        bottom: 60px;
    }

    .no-ai-card {
        right: 10px;
        top: 60px;
    }

    .section-title {
        font-size: 36px;
    }

    .card-title {
        font-size: 20px;
    }

    /* Types Section - Tablet Responsive */
    .types-section {
        padding: 60px 40px;
    }

    .types-section .section-title {
        font-size: 36px; /* 0.75x scaling from 48px desktop */
    }

    .heading-wrapper {
        margin-bottom: 32px;
    }

    .types-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .card-icon {
        width: 56px;
        height: 56px;
    }

    .card-title {
        font-size: 18px;
    }

    .card-description {
        font-size: 15px;
    }

    /* Services Section */
    .services-container {
        flex-direction: column;
        gap: 40px;
    }

    .services-left {
        height: auto;
        width: 100%;
        align-items: center;
        text-align: center;
    }

    .services-info {
        align-items: center;
    }

    .services-title-row {
        flex-direction: column;
        width: 100%;
    }

    .services-right {
        width: 100%;
        max-width: 493px;
    }

    .services-title {
        font-size: 36px;
    }

    /* SEO Section */
    .seo-title {
        font-size: 36px;
    }

    .seo-content {
        flex-direction: column;
    }

    .seo-progress {
        display: none;
    }

    /* Writers Section */
    .writers-section {
        padding: 60px 40px;
    }

    .writers-heading {
        gap: 16px;
    }

    .writers-title {
        font-size: 36px;
    }

    .writers-subtitle {
        font-size: 16px;
    }

    .writers-content {
        width: 100%;
        gap: 32px;
    }

    /* Carousel - 2 cards visible */
    .writers-carousel-wrapper {
        overflow: hidden;
    }

    .writer-cards {
        display: flex;
        gap: 16px;
        transition: transform 0.3s ease-in-out;
        justify-content: flex-start;
    }

    .writer-card {
        flex: 0 0 calc(50% - 8px);
        width: calc(50% - 8px);
        min-width: unset;
        max-width: none;
    }

    .writer-avatar {
        width: 100%;
        height: 180px;
    }

    .writer-stats {
        width: 100%;
    }

    .stat-box {
        width: calc(50% - 6px);
    }

    /* Benefits Section */
    .benefits-section {
        padding: 60px 0;
    }

    .benefits-title {
        font-size: 36px;
        margin-bottom: 32px;
    }

    .benefits-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
        max-width: 1300px;
        margin: 0 auto;
        padding: 0 var(--container-padding);
    }

    .benefit-card {
        width: auto;
        max-width: none;
        padding: 24px;
    }

    .benefit-icon {
        width: 64px;
        height: 64px;
        margin-bottom: 16px;
    }

    .benefit-title {
        font-size: 20px;
        margin-bottom: 10px;
        white-space: normal;
    }

    .benefit-description {
        font-size: 15px;
    }

    .benefits-buttons {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    .benefits-button {
        width: 100%;
        max-width: 300px;
    }

    /* CTA Section */
    .cta-section {
        padding: 0 40px;
    }

    .cta-container {
        padding: 60px 48px;
    }

    .cta-title {
        font-size: 36px;
    }

    .cta-subtitle {
        font-size: 18px;
        margin-bottom: 24px;
    }

    .cta-heading {
        gap: 12px;
    }

    .cta-form {
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }

    .cta-input-wrapper {
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }

    .cta-input-field,
    .cta-button {
        width: 100%;
        max-width: 100%;
    }

    /* Testimonials Section - Single Card Slider */
    .testimonials-section {
        padding: 60px 40px;
    }

    .testimonials-title {
        font-size: 36px;
    }

    .testimonials-container {
        gap: 24px;
    }

    .testimonial-cards {
        position: relative;
        overflow: hidden;
        min-height: 300px;
    }

    .testimonial-card {
        flex: 0 0 100%;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.5s ease-in-out, visibility 0.5s;
        padding: 32px;
    }

    .testimonial-card.active {
        opacity: 1;
        visibility: visible;
        position: relative;
    }

    .testimonial-name p {
        font-size: 20px;
    }

    .testimonials-footer {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    /* Dot Navigation */
    .testimonials-dots {
        display: flex;
        justify-content: center;
        gap: 12px;
        margin-top: 24px;
    }

    .dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background-color: var(--color-stroke);
        border: none;
        cursor: pointer;
        transition: background-color 0.3s ease;
        padding: 0;
    }

    .dot.active {
        background-color: var(--color-yellow);
    }

    .dot:hover {
        background-color: var(--color-yellow);
        opacity: 0.7;
    }

    .dot:focus {
        outline: 2px solid var(--color-yellow);
        outline-offset: 2px;
    }

    /* ==========================================
       TESTIMONIALS SECTION - SLIDER MODE AT ≤768PX
       ========================================== */

    /* Hide review platform badges at tablet (slider replaces toggle) */
    .review-badges {
        display: none;
    }

    /* Slider container with overflow hidden */
    .testimonials-container {
        overflow: hidden;
        position: relative;
        width: 100%;
        max-width: 728px;
    }

    /* Show all testimonial cards in flex layout (override badge toggle) */
    .testimonial-cards {
        display: flex !important; /* Override badge toggle display:none */
        gap: 20px;
        transition: transform 400ms ease-in-out;
    }

    /* 2-card layout at tablet viewport */
    .testimonial-card {
        flex: 0 0 calc((100% - 20px) / 2); /* 2-card layout with 20px gap */
        min-width: 0; /* Prevent flex overflow */
    }

    /* Show pagination dots */
    .testimonials-pagination {
        display: flex !important;
        gap: 12px;
        justify-content: center;
        margin-top: 24px;
    }

    /* Pagination dot styles matching carousel pattern */
    .testimonial-dot {
        width: 12px;
        height: 12px;
        padding: 16px; /* Expands to 44×44px touch target */
        background-clip: content-box;
        background-color: var(--color-stroke);
        border-radius: 50%;
        border: none;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    .testimonial-dot.active,
    .testimonial-dot[aria-current="true"] {
        background-color: var(--color-yellow);
    }

    .testimonial-dot:hover:not(.active) {
        background-color: #d1d5db;
    }

    .testimonial-dot:focus {
        outline: 2px solid var(--color-yellow);
        outline-offset: 2px;
    }
}

/* Mobile Landscape (<768px) */
@media (width <= 767px) {
    :root {
        --container-padding: 20px;
        --section-spacing: 50px;
    }

    .site-header {
        padding: 12px var(--container-padding);
    }

    .logo-full {
        height: 36px;
    }

    .hero-screen {
        padding: 40px var(--container-padding);
        min-height: auto;
    }

    .hero-container {
        flex-direction: column;
        gap: 40px;
    }

    .content-block {
        max-width: 100%;
        padding-top: 0;
    }

    .main-heading h2, .main-heading.main-heading-serv h1 {
        font-size: 32px;
    }

    .subtitle br {
        display: none;
    }

    .image-block {
        width: 100%;
        max-width: 400px;
        height: auto;
        aspect-ratio: 614 / 712;
    }

    .image-background {
        width: 100%;
        height: auto;
    }

    .hero-image {
        width: 100%;
        height: 100%;
    }

    .stats-card,
    .no-ai-card {
        position: static;
        margin: 20px auto;
    }

    .section-title {
        font-size: 32px;
    }

    .section-subtitle br {
        display: none;
    }

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

    .type-card {
        padding: 20px;
    }

    .card-description br {
        display: none;
    }

    /* Services Section */
    .services-title {
        font-size: 32px;
    }

    .services-container {
        padding: 30px 20px;
    }

    .services-tags {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .services-description p {
        display: inline;
    }

    /* SEO Section */
    .seo-outer-container {
        padding: 24px;
    }

    .seo-inner-container {
        padding: 24px 16px;
    }

    .seo-heading {
        flex-direction: column;
        gap: 12px;
    }

    .seo-title {
        font-size: 32px;
    }

    .seo-block-title {
        font-size: 20px;
    }

    /* Writers Section - Tablet */
    .writers-title {
        font-size: 36px;
    }

    .writers-content {
        width: 100%;
    }

    .writers-filter {
        flex-wrap: wrap;
        justify-content: center;
    }

    .writer-cards {
        flex-wrap: wrap;
        justify-content: center;
    }

    .writer-card {
        width: calc(50% - 10px);
        min-width: 300px;
    }

    /* CTA Section - Tablet */
    .cta-title {
        font-size: 36px;
    }

    .cta-form {
        flex-direction: column;
        gap: 16px;
    }

    .cta-input,
    .cta-submit-btn {
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
    }

    /* Testimonials Section - Tablet */
    .testimonials-title {
        font-size: 36px;
    }

    .testimonials-cards {
        flex-wrap: wrap;
        justify-content: center;
    }

    .testimonial-card {
        width: calc(50% - 10px);
        min-width: 300px;
    }

    /* Benefits Section - Mobile */
    .benefits-title {
        font-size: 28px;
    }

    .benefits-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .benefit-card {
        padding: 20px;
    }

    .benefit-icon {
        width: 56px;
        height: 56px;
    }

    .benefit-title {
        font-size: 18px;
    }

    .benefit-description {
        font-size: 14px;
    }

    .trust-guarantees {
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
    }

    /* How It Works Section - Tablet/Mobile Accordion */
    .how-it-works-section {
        padding: 40px var(--container-padding);
        flex-direction: column;
        gap: 24px;
    }

    .how-it-works-title {
        font-size: 24px;
        text-align: center;
        width: 100%;
    }

    .how-it-works-title br {
        display: none;
    }

    .how-it-works-container {
        flex-direction: column;
        gap: 20px;
        width: 100%;
    }

    .how-it-works-content {
        width: 100%;
        gap: 20px;
        align-items: center;
    }

    /* Hide screenshot on tablet/mobile */
    .order-form-screenshot {
        display: none !important;
        width: 0;
        height: 0;
        overflow: hidden;
    }

    .progress-bar-wrapper {
        display: none !important;
    }

    .progress-bar-track {
        display: none;
    }

    .steps-container-inner {
        width: 100%;
        gap: 0;
    }

    .steps-list {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    /* Accordion style steps */
    .step-item {
        padding: 14px 16px;
        border: 1px solid var(--color-stroke);
        border-radius: 10px;
        margin-bottom: 10px;
        cursor: pointer;
        transition: border-color 0.3s ease, background-color 0.3s ease;
        flex-direction: column;
        gap: 0;
        opacity: 1;
    }

    .step-item:last-child {
        margin-bottom: 0;
    }

    .step-item .step-title,
    .step-item .step-title ol,
    .step-item .step-title ol li {
        color: var(--color-dark);
    }

    .step-item.active {
        border-color: var(--color-yellow);
        background-color: #fffbee;
    }

    .step-title {
        font-size: 15px;
        margin: 0;
    }

    .step-title ol {
        margin: 0;
        padding-left: 20px;
    }

    .step-description {
        display: none;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid var(--color-stroke);
        font-size: 13px;
        line-height: 1.5;
    }

    .step-item.active .step-description {
        display: block;
    }
}

/* Mobile Portrait (480px and below) */
@media (width <= 767px) {
    :root {
        --container-padding: 16px;
        --section-spacing: 32px;
    }

    h2 {
        font-size: 32px !important;
    }

    .hero-screen h2 {
        font-size: 36px !important;
    }

    .logo-full {
        height: 24px;
    }

    .nav-link,
    .action-link,
    .btn-primary {
        font-size: 14px;
    }

    .btn-primary {
        padding: 12px 24px;
    }

    .main-heading h2, .main-heading.main-heading-serv h1 {
        font-size: 28px;
    }

    .subtitle {
        font-size: 14px;
    }

    .cta-button {
        width: 100%;
        justify-content: center;
    }

    .section-title {
        font-size: 28px;
    }

    .section-subtitle {
        font-size: 14px;
    }

    .card-title {
        font-size: 18px;
    }

    .card-description {
        font-size: 14px;
    }

    /* Services Section */
    .services-heading {
        padding: 0 16px;
        box-sizing: border-box;
        max-width: 100%;
    }

    .services-title {
        font-size: 32px;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .services-main-title {
        font-size: 20px;
    }

    .services-price {
        font-size: 18px;
    }

    .services-tags {
        grid-template-columns: 1fr;
    }

    .services-tag {
        padding: 8px 16px;
    }

    .services-tag span {
        font-size: 14px;
    }

    .services-tabs {
        flex-direction: row;
        gap: 0;
    }

    .services-tab {
        border-bottom: 1px solid var(--color-stroke);
        padding: 8px 6px;
        font-size: 14px;
    }

    .services-tab-active {
        background-color: transparent;
        border-bottom: 1px solid var(--color-dark);
    }

    /* SEO Section */
    .seo-heading {
        flex-direction: row;
        gap: 8px;
    }

    .seo-title {
        font-size: 24px;
    }

    .seo-icon {
        width: 30px;
        height: 38px;
    }

    .seo-columns-wrapper {
        flex-direction: column;
    }

    .seo-outer-container {
        padding: 16px;
    }

    .seo-inner-container {
        padding: 20px 12px;
    }

    .seo-block-title {
        font-size: 18px;
    }

    .seo-block-text,
    .seo-list {
        font-size: 14px;
    }

    /* ==========================================
       WRITERS SECTION - MOBILE
       ========================================== */
    .writers-title {
        font-size: 32px;
        line-height: 1.18;
    }

    .writers-subtitle {
        font-size: 16px;
        line-height: 1.75;
    }

    .writers-content {
        width: 100%;
        gap: 32px;
    }

    .writers-filter {
        flex-direction: column;
        gap: 16px;
        width: 100%;
    }

    .filter-btn {
        width: 100%;
        padding: 16px 24px;
    }

    .writer-cards {
        flex-direction: column;
        gap: 20px;
        width: 100%;
    }

    .writer-card {
        width: 100%;
    }

    .writer-avatar {
        width: 100%;
        height: auto;
        aspect-ratio: 295 / 200;
    }

    .writer-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .writer-discipline {
        font-size: 12px;
    }

    .writer-name {
        font-size: 18px;
    }

    .writer-info {
        padding: 12px;
        width: 100%;
    }

    .writer-details {
        align-items: center;
        width: 100%;
    }

    .writer-name-rating {
        flex-direction: column;
        align-items: center;
        gap: 4px;
    }

    .writer-stats {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
        margin-top: 12px;
    }

    .stat-box {
        width: calc(50% - 4px);
        text-align: center;
        padding: 8px 4px;
        background-color: var(--color-gray-light, #f8f9fa);
        border-radius: 6px;
    }

    .stat-value {
        font-size: 14px;
    }

    .stat-label {
        font-size: 10px;
    }

    .hire-btn {
        width: 100%;
        margin-top: 16px;
    }

    .view-all-btn {
        width: 100%;
    }

    /* ==========================================
       CTA SECTION - MOBILE
       ========================================== */
    .cta-section {
        padding: var(--section-spacing) var(--container-padding);
    }

    .cta-container {
        text-align: center;
        padding: 32px 16px;
    }

    .cta-icon {
        width: 100px;
        height: 100px;
        margin: 0 auto 16px;
    }

    .cta-icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .cta-heading {
        margin-bottom: 24px;
    }

    .cta-title {
        font-size: 28px;
        line-height: 1.18;
        margin-bottom: 12px;
    }

    .cta-subtitle {
        font-size: 14px;
        line-height: 1.5;
    }

    .cta-form {
        width: 100%;
        max-width: none;
    }

    .cta-input-wrapper {
        flex-direction: column;
        gap: 12px;
        width: 100%;
        max-width: none;
    }

    .cta-input-field {
        width: 100%;
        max-width: none;
    }

    .cta-input-field input {
        width: 100%;
        padding: 16px 20px;
        box-sizing: border-box;
    }

    .cta-button {
        width: 100%;
        padding: 16px 24px;
        box-sizing: border-box;
    }

    .cta-disclaimer {
        font-size: 12px;
        text-align: center;
        margin-top: 12px;
    }

    .cta-disclaimer {
        font-size: 12px;
        text-align: center;
    }

    /* ==========================================
       TESTIMONIALS SECTION - MOBILE
       ========================================== */
    .testimonials-section {
        padding: var(--section-spacing) var(--container-padding);
    }

    .testimonials-heading {
        text-align: center;
        padding: 0 16px;
    }

    .testimonials-title {
        font-size: 28px;
        line-height: 1.18;
    }

    .testimonials-container {
        flex-direction: column;
        gap: 24px;
    }

    /* Review badges (Sitejabber, Reviews.io) */
    .review-badges {
        flex-direction: row;
        justify-content: center;
        gap: 12px;
    }

    .review-badge {
        width: auto;
    }

    /* Testimonial cards */
    .testimonial-cards {
        flex-direction: column;
        gap: 16px;
    }

    .testimonial-card {
        width: 100%;
        padding: 20px;
    }

    .testimonial-name p {
        font-size: 16px;
    }

    .testimonial-text p {
        font-size: 14px;
        line-height: 1.5;
    }

    .testimonial-date p {
        font-size: 12px;
    }

    /* Footer with rating and button */
    .testimonials-footer {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .overall-rating {
        flex-direction: column;
        gap: 8px;
        text-align: center;
        align-items: center;
    }

    .overall-rating p {
        font-size: 14px;
    }

    .testimonials-button {
        width: 100%;
        max-width: 343px;
    }

    /* ==========================================
       BENEFITS SECTION - MOBILE
       ========================================== */
    .benefits-section {
        padding: var(--section-spacing) var(--container-padding);
    }

    .benefits-heading {
        text-align: center;
    }

    .benefits-title {
        font-size: 28px;
        line-height: 1.18;
    }

    .benefits-subtitle {
        font-size: 14px;
        line-height: 1.75;
    }

    .benefits-subtitle p {
        display: inline;
    }

    .benefits-container {
        gap: 16px;
    }

    .benefit-card {
        width: 100%;
        padding: 24px 16px;
        text-align: center;
    }

    .benefit-header {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .benefit-icon {
        margin: 0 auto;
    }

    .benefit-title {
        font-size: 18px;
        text-align: center;
    }

    .benefit-description {
        font-size: 14px;
        text-align: center;
    }

    .benefits-buttons {
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }

    .benefits-button {
        width: 100%;
        justify-content: center;
    }

    .benefits-guarantee {
        display: none;
    }

    /* HOW IT WORKS - additional mobile tweaks */
    .how-it-works-section {
        padding: var(--section-spacing) var(--container-padding);
    }

    .how-it-works-title {
        font-size: 32px;
    }

    /* ==========================================
       HERO SECTION - MOBILE IMPROVEMENTS
       ========================================== */
    .hero-screen {
        height: auto;
        padding-top: 32px;
        padding-bottom: 32px;
        background: linear-gradient(to top, #fff, #f9fafb);
    }

    .hero-container {
        flex-direction: column;
        gap: 32px;
    }

    /* Flatten content-block so children can be reordered */
    .content-block {
        display: contents;
    }

    .heading-section {
        width: 100%;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        order: 1;
        gap: 16px;
    }

    .main-heading {
        gap: 12px;
    }

    .button-wrapper {
        margin-top: 8px;
    }

    .image-block {
        display: none;
    }

    .ratings-section {
        flex-flow: row wrap;
        justify-content: center;
        gap: 8px;
        order: 3;
        height: auto;
        width: 100%;
        margin-top: 8px;
    }

    .rating-item {
        width: auto;
        min-width: 100px;
        padding: 8px 12px;
    }

    .rating-item .rating-logo img {
        width: 24px;
        height: 24px;
    }

    .rating-item .rating-score {
        font-size: 12px;
    }

    .rating-item .rating-name img {
        height: 10px;
    }

    /* ==========================================
       TYPES SECTION - MOBILE IMPROVEMENTS
       ========================================== */
    .types-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .type-card {
        padding: 24px;
    }

    .type-card-content {
        flex-direction: row;
        align-items: flex-start;
        gap: 16px;
    }

    .card-icon {
        width: 50px;
        height: 50px;
        flex-shrink: 0;
    }
}

/* ==========================================
   FAQ SECTION
   ========================================== */
.faq-section {
    background-color: #fff;
    padding: 120px 0;
    width: 100%;
}

.faq-heading {
    text-align: center;
    margin-bottom: 48px;
    max-width: 682px;
    margin-left: auto;
    margin-right: auto;
}

.faq-title {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 48px;
    line-height: 1.2;
    color: var(--color-dark);
    margin-bottom: 24px;
    font-variation-settings: 'SOFT' 0, 'WONK' 1;
}

.faq-subtitle {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 18px;
    line-height: 1.4;
    color: var(--color-dark);
}

.faq-content {
    display: flex;
    gap: 20px;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px;
    align-items: flex-start;
}

/* Support Card */
.faq-support-card {
    background-color: #fffbee;
    border: 1px solid var(--color-yellow);
    border-radius: 24px;
    padding: 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    width: 481px;
    flex-shrink: 0;
}

.faq-support-image {
    width: 106px;
    height: 97px;
}

.faq-smiley {
    width: 100%;
    height: 100%;
    transform: rotate(-8deg);
}

.faq-support-text {
    text-align: center;
    color: var(--color-dark);
}

.faq-support-title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.2;
    margin-bottom: 24px;
    font-variation-settings: 'SOFT' 0, 'WONK' 1;
}

.faq-support-description {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 20px;
    line-height: 1.4;
}

.faq-support-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
}

.btn-faq-chat {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: var(--color-yellow);
    color: var(--color-dark);
    padding: 16px 32px;
    border-radius: 50px;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-faq-chat:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgb(250 193 21 / 30%);
}

.btn-dot {
    width: 8px;
    height: 8px;
    background-color: #22c55e;
    border-radius: 50%;
    animation: pulse-dot 1.5s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgb(34 197 94 / 70%);
    }

    50% {
        opacity: 0.6;
        box-shadow: 0 0 0 6px rgb(34 197 94 / 0%);
    }
}

.btn-faq-email {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-dark);
    color: #fff;
    padding: 16px 32px;
    border-radius: 50px;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-faq-email:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgb(18 24 39 / 30%);
}

/* Questions Column */
.faq-questions {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.faq-group {
    background-color: #fff;
    border: 1px solid var(--color-yellow);
    border-radius: 10px;
    padding: 24px;
}

.faq-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
}

.faq-group-icon {
    width: 32px;
    height: 32px;
}

.faq-group-title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.2;
    color: var(--color-dark);
    font-variation-settings: 'SOFT' 0, 'WONK' 1;
}

.faq-items {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.faq-item {
    padding: 0 12px;
}

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    text-align: left;
}

.faq-question-text {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 20px;
    line-height: 1.2;
    color: var(--color-dark);
    flex: 1;
    font-variation-settings: 'SOFT' 0, 'WONK' 1;
}

.faq-icon-toggle {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    padding: 4px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.faq-question:hover .faq-icon-toggle {
    background-color: #FEF2D6;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding-top 0.3s ease;
    padding-top: 0;
}

.faq-item-active .faq-answer {
    padding-top: 12px;
}

.faq-answer p, .faq-answer ol, .faq-answer ul {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-text);
}
.faq-answer ul, .faq-answer ol{
    margin-top: 10px;
    list-style: initial;
    list-style-position: inside;
}

/* FAQ Section Responsive */
@media (width >= 768px) and (width <= 1299px) {
    .faq-title {
        font-size: 40px;
    }

    .faq-content {
        gap: 24px;
    }

    .faq-support-card {
        max-width: 400px;
    }
}

@media (width >= 768px) and (width <= 1299px) {
    .faq-content {
        flex-direction: column;
        align-items: center;
        padding: 0 40px;
    }

    .faq-title {
        font-size: 36px;
    }

    .faq-support-card {
        width: 100%;
        max-width: 600px;
        padding: 32px;
        gap: 24px;
    }

    .faq-support-title {
        font-size: 20px;
    }

    .faq-support-description {
        font-size: 18px;
    }

    .faq-questions {
        width: 100%;
    }

    .faq-group {
        padding: 20px;
    }

    .faq-group-title {
        font-size: 20px;
    }

    .faq-items {
        gap: 12px;
    }

    /* CRITICAL: Touch-friendly accordion buttons (44x44px minimum) */
    .faq-question {
        padding: 12px 0;
        min-height: 44px;
    }

    .faq-question-text {
        font-size: 18px;
    }

    .faq-answer p {
        font-size: 15px;
    }

    /* Enhanced icon tap area */
    .faq-icon-toggle {
        padding: 8px;
    }

    /* Focus indicator for keyboard navigation */
    .faq-question:focus-visible {
        outline: 2px solid var(--color-yellow);
        outline-offset: 2px;
    }
}

@media (width <= 767px) {
    .faq-section {
        padding: 80px 0;
    }

    .faq-title {
        font-size: 36px;
    }

    .faq-subtitle {
        font-size: 16px;
    }

    .faq-support-card {
        padding: 32px 24px;
    }

    .faq-support-title {
        font-size: 20px;
    }

    .faq-support-description {
        font-size: 16px;
    }

    .faq-support-buttons {
        flex-direction: column;
        width: 100%;
    }

    .btn-faq-chat,
    .btn-faq-email {
        width: 100%;
        justify-content: center;
    }

    .faq-group-title {
        font-size: 20px;
    }

    .faq-question-text {
        font-size: 16px;
    }
}

@media (width <= 767px) {
    .faq-section {
        padding: 60px 0;
    }

    .faq-title {
        font-size: 28px;
    }

    .faq-heading {
        padding: 0 20px;
    }

    .faq-support-card {
        padding: 24px 16px;
    }

    .faq-group {
        padding: 16px;
    }

    .faq-item {
        padding: 0 8px;
    }
}

/* ==========================================
   ARTICLES SECTION
   ========================================== */
.articles-section {
    background-color: #fff;
    padding: 60px 0 120px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
}

.articles-heading {
    text-align: center;
    max-width: 682px;
}

.articles-title {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 48px;
    line-height: 1.2;
    color: var(--color-dark);
    margin-bottom: 24px;
    font-variation-settings: 'SOFT' 0, 'WONK' 1;
}

.articles-subtitle {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 18px;
    line-height: 1.4;
    color: var(--color-text);
}

.articles-grid {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: stretch;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
}

.article-card {
    background-color: #fff;
    border: 1px solid var(--color-yellow);
    border-radius: 10px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    cursor: pointer;
    width: 420px;
    flex-shrink: 0;
}

.article-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgb(0 0 0 / 10%);
}

.article-image {
    width: 100%;
    height: 200px;
    border-radius: 10px;
    overflow: hidden;
    background-color: #f4f6f8;
}

.article-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.article-content {
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.article-text {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f4f6f8;
}

.article-title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.2;
    color: var(--color-dark);
    font-variation-settings: 'SOFT' 0, 'WONK' 1;
}

.article-excerpt {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-text);
}

.article-meta {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: nowrap;
}

.article-author,
.article-date {
    display: flex;
    gap: 8px;
    align-items: center;
}

.meta-icon {
    width: 16px;
    height: 16px;
}

.article-author span,
.article-date span {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
}

.article-link {
    display: flex;
    gap: 8px;
    align-items: center;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
    text-decoration: none;
    transition: gap 0.2s ease, color 0.2s ease;
}

.article-link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

.article-card:hover .article-link {
    color: var(--color-yellow);
    gap: 12px;
}

.link-arrow {
    width: 16px;
    height: 8px;
    transition: filter 0.2s ease;
}

.article-card:hover .link-arrow {
    filter: invert(73%) sepia(97%) saturate(1057%) hue-rotate(358deg) brightness(103%) contrast(96%);
}

.btn-view-articles {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-dark);
    color: #fff;
    padding: 12px 24px;
    border-radius: 24px;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-view-articles:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgb(18 24 39 / 30%);
}

/* Articles Section Responsive */
@media (width >= 768px) and (width <= 1299px) {
    .articles-grid {
        flex-wrap: wrap;
    }

    .article-card {
        width: calc(50% - 10px);
        max-width: 420px;
    }

    .articles-title {
        font-size: 40px;
    }
}

@media (width >= 768px) and (width <= 1299px) {
    .articles-section {
        padding: 80px 0;
        gap: 24px;
    }

    .articles-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        padding: 0 40px;
    }

    .article-card {
        width: 100%;
        max-width: none;
    }

    .articles-title {
        font-size: 36px;
    }

    .article-title {
        font-size: 20px;
    }

    .article-excerpt {
        font-size: 15px;
    }
}

@media (width <= 767px) {
    .articles-section {
        padding: 80px 0;
        gap: 32px;
    }

    .articles-title {
        font-size: 36px;
    }

    .articles-subtitle {
        font-size: 16px;
        padding: 0 20px;
    }

    .article-title {
        font-size: 20px;
    }
}

@media (width <= 767px) {
    .articles-section {
        padding: 60px 0;
    }

    .articles-title {
        font-size: 28px;
    }

    .article-card {
        padding: 16px;
    }

    .article-image {
        height: 160px;
    }

}

/* ==========================================
   PARTNERSHIP PAGE
   ========================================== */
.partnership-hero {
    background-color: var(--color-white);
    padding: 0 0 120px;
}

.partnership-hero-container {
    max-width: 1300px;
    width: 100%;
    margin: 0 auto;
    padding: 0 80px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
}

.partnership-form-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 610px;
    flex-shrink: 0;
}

.partnership-form-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-yellow);
    border-radius: 24px;
    padding: 32px 48px;
}

.partnership-form-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
    margin-bottom: 32px;
}

.partnership-title {
    font-family: var(--font-fraunces);
    font-weight: 900;
    font-size: 48px;
    line-height: 1.2;
    color: var(--color-dark);
    margin: 0;
}

.partnership-subtitle {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 20px;
    line-height: 1.4;
    color: var(--color-dark);
    margin: 0;
}

.partnership-form {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.partnership-form-fields {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.form-field {
    width: 100%;
}

.partnership-input {
    width: 100%;
    height: 56px;
    padding: 10px 14px;
    background-color: var(--color-white);
    border: 1px solid var(--color-yellow);
    border-radius: 50px;
    font-family: var(--font-work-sans);
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
    outline: none;
    transition: border-color 0.2s ease;
}

.partnership-input::placeholder {
    color: var(--color-text);
}

.partnership-input:focus {
    border-color: #e5ad12;
}

.partnership-submit-btn {
    width: 100%;
    padding: 16px 32px;
    background-color: var(--color-yellow);
    border: none;
    border-radius: 50px;
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.partnership-submit-btn:hover {
    background-color: #e5ad12;
}

.partnership-image-wrapper {
    position: relative;
    width: 614px;
    flex-shrink: 0;
    display: grid;
}

.partnership-image-bg {
    grid-area: 1 / 1;
    background-color: var(--color-yellow-light);
    border-radius: 37px 37px 0 0;
    margin-top: 94px;
    height: calc(100% - 94px);
}

.partnership-image {
    grid-area: 1 / 1;
    width: 100%;
    height: auto;
    display: block;
    position: relative;
    z-index: 1;
}

/* ==========================================
   FAQ PAGE
   ========================================== */
.faq-hero {
    background-color: var(--color-white);
    padding: 0 0 80px;
}

.faq-hero-container {
    max-width: 1300px;
    width: 100%;
    margin: 0 auto;
    padding: 0 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.faq-hero-content {
    display: flex;
    flex-direction: column;
    gap: 32px;
    max-width: 514px;
    flex-shrink: 0;
}

.faq-hero-text {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.faq-hero-title {
    font-family: var(--font-fraunces);
    font-weight: 900;
    font-size: 64px;
    line-height: 1.2;
    color: var(--color-dark);
    margin: 0;
    display: flex;
    flex-direction: column;
}

.faq-hero-description {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 20px;
    line-height: 1.4;
    color: var(--color-text);
    margin: 0;
}

.faq-hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 32px;
    background-color: var(--color-yellow);
    border: none;
    border-radius: 50px;
    font-family: var(--font-work-sans);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
    width: fit-content;
}

.faq-hero-btn:hover {
    background-color: #e5ad12;
}

.faq-hero-image-wrapper {
    position: relative;
    flex-shrink: 0;
}

.faq-hero-image-bg {
    position: absolute;
    right: 60px;
    bottom: 0;
    width: 614px;
    height: 619px;
    background-color: var(--color-yellow-light);
    border-radius: 37px 37px 0 0;
    transform: scaleX(-1);
}

.faq-hero-image {
    position: relative;
    width: 759px;
    height: auto;
    display: block;
    z-index: 1;
    transform: scaleX(-1);
}

.faq-rating-badge {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background-color: var(--color-white);
    border: 1px solid var(--color-yellow);
    border-radius: 10px;
    z-index: 2;
}

.faq-rating-badge .badge-logo {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
}

.faq-rating-badge .badge-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.faq-rating-badge .badge-name {
    height: auto;
    max-height: 11px;
    max-width: 75px;
}

.faq-rating-badge .badge-name-group {
    display: flex;
    align-items: baseline;
    gap: 0;
}

.faq-rating-badge .badge-name-suffix {
    height: auto;
    max-height: 11px;
    max-width: 16px;
    padding-left: 2px;
}

.faq-rating-badge .badge-rating {
    display: flex;
    align-items: center;
    gap: 4px;
}

.faq-rating-badge .badge-score {
    font-family: var(--font-kanit);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-navy-blue);
}

.faq-rating-badge .badge-stars {
    width: 70px;
    height: 14px;
}

.faq-badge-sitejabber {
    left: 80px;
    bottom: 20px;
}

.faq-badge-cheapestessay {
    right: 80px;
    top: 300px;
    transform: translateY(-50%);
}

.faq-badge-reviewsio {
    right: 170px;
    bottom: 10px;
}

/* ==========================================
   FAQ SEARCH SECTION
   ========================================== */
.faq-search {
    background-color: var(--color-white);
    padding: 120px 0 0;
    width: 100%;
    display: flex;
    justify-content: center;
}

.faq-search-container {
    max-width: 1300px;
    width: 100%;
    padding: 0 80px;
    display: flex;
    justify-content: center;
}

.faq-search-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    width: 100%;
}

.faq-search-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
    width: 100%;
}

.faq-search-title {
    font-family: var(--font-fraunces);
    font-weight: 900;
    font-size: 48px;
    line-height: 1.2;
    color: var(--color-dark);
    margin: 0;
}

.faq-search-subtitle {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 20px;
    line-height: 1.4;
    color: var(--color-text);
    margin: 0;
}

.faq-search-form {
    display: flex;
    align-items: center;
    gap: 16px;
}

.faq-search-input-wrapper {
    width: 414px;
}

.faq-search-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--color-yellow);
    border-radius: 50px;
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
    background-color: var(--color-white);
    outline: none;
}

.faq-search-input::placeholder {
    color: var(--color-text);
}

.faq-search-input:focus {
    border-color: var(--color-yellow);
    box-shadow: 0 0 0 2px rgba(250, 193, 21, 0.2);
}

.faq-search-btn {
    padding: 16px 32px;
    background-color: var(--color-yellow);
    border: none;
    border-radius: 50px;
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.2s ease;
}

.faq-search-btn:hover {
    background-color: #e5ad12;
}

/* ==========================================
   FAQ CATEGORIES SECTION
   ========================================== */
.faq-categories {
    background-color: var(--color-white);
    padding: 48px 0 0;
    width: 100%;
    display: flex;
    justify-content: center;
}

.faq-categories-container {
    max-width: 1300px;
    width: 100%;
    padding: 0 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.faq-categories-subtitle {
    font-family: var(--font-fraunces);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.2;
    color: var(--color-text);
    text-align: center;
    margin: 0;
}

.faq-categories-grid {
    display: flex;
    gap: 20px;
    width: 100%;
}

.faq-category-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 32px;
    background-color: var(--color-white);
    border: 1px solid var(--color-yellow);
    border-radius: 24px;
    text-decoration: none;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.faq-category-card:hover {
    box-shadow: 0 4px 20px rgba(250, 193, 21, 0.3);
    transform: translateY(-2px);
}

.faq-category-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.faq-category-icon img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.faq-category-name {
    font-family: var(--font-fraunces);
    font-weight: 600;
    font-size: 20px;
    line-height: 1.2;
    color: var(--color-dark);
    text-align: center;
}

/* ==========================================
   FAQ PAGE - TESTIMONIALS SECTION OVERRIDES
   ========================================== */
#faq-testimonials-slider {
    display: flex !important;
    gap: 24px !important;
    width: 100% !important;
    justify-content: center !important;
    transform: none !important;
    transition: none !important;
    flex-wrap: nowrap !important;
}

#faq-testimonials-slider .app-testimonial-card {
    flex: 1 !important;
    min-width: 0 !important;
    max-width: 500px !important;
}

#faq-testimonial-prev,
#faq-testimonial-next {
    color: white;
}

#faq-testimonial-prev svg path,
#faq-testimonial-next svg path {
    stroke: white;
}

/* ==========================================
   CTA FOOTER SECTION
   ========================================== */
.cta-footer-section {
    background-color: #fff;
    padding: 100px 0;
    width: 100%;
    display: flex;
    justify-content: center;
}

.cta-footer-card {
    background-color: #fffbee;
    border: 1px solid var(--color-yellow);
    border-radius: 24px;
    padding: 48px;
    width: 100%;
    max-width: 1300px;
    margin: 0 20px;
    position: relative;
    overflow: visible;
    min-height: 200px;
}

.cta-footer-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 500px;
}

.cta-footer-title {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 48px;
    line-height: 1.2;
    color: var(--color-dark);
    font-variation-settings: 'SOFT' 0, 'WONK' 1;
}

.cta-footer-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cta-footer-input-group {
    display: flex;
    gap: 16px;
}

.cta-footer-input-wrapper {
    flex: 1;
    max-width: 414px;
    position: relative;
}

.cta-footer-input {
    width: 100%;
    height: 100%;
    padding: 10px 14px;
    border: 1px solid var(--color-yellow);
    border-radius: 50px;
    background-color: #fff;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cta-footer-input::placeholder {
    color: var(--color-text);
}

.cta-footer-input:focus {
    border-color: var(--color-dark);
    box-shadow: 0 0 0 2px rgb(250 193 21 / 30%);
}

.cta-footer-btn {
    background-color: var(--color-yellow);
    color: var(--color-dark);
    padding: 16px 32px;
    border: none;
    border-radius: 50px;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
}

.cta-footer-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgb(250 193 21 / 40%);
}

.cta-footer-hint {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
}

.cta-footer-image {
    position: absolute;
    right: 100px;
    bottom: 0;
    width: 492px;
    height: 403px;
    pointer-events: none;
}

.cta-footer-person {
    position: absolute;
    right: 51px;
    top: 42px;
    bottom: 0;
    width: 441px;
    height: auto;
    object-fit: contain;
}

.cta-footer-person-coupons {
    position: absolute;
    right: 51px;
    bottom: 0;
    width: 441px;
    height: auto;
    object-fit: contain;
}
.cta-footer-person{top:58px}

.cta-footer-dialog {
    position: absolute;
    left: 351px;
    top: 60px;
    width: 129px;
    height: 102px;
    transform: rotate(7deg);
}

/* CTA Footer Section Responsive */
@media (width >= 768px) and (width <= 1299px) {
    .cta-footer-image {
        right: 20px;
        width: 400px;
    }

    .cta-footer-person {
        width: 350px;
        height: auto;
    }
}

@media (width >= 768px) and (width <= 1299px) {
    .cta-footer-card {
        padding-bottom: 280px;
    }

    .cta-footer-content {
        max-width: 100%;
    }

    .cta-footer-image {
        position: absolute;
        right: 50%;
        transform: translateX(50%);
        top: auto;
        bottom: -50px;
        width: 350px;
        height: 300px;
    }

    .cta-footer-person {
        right: 30px;
        width: 300px;
        top: 7px;
    }

    .cta-footer-dialog {
        left: auto;
        right: -20px;
        top: 30px;
        width: 100px;
        height: 80px;
    }
}

@media (width >= 768px) and (width <= 1299px) {
    .cta-footer-section {
        padding: 80px 0;
    }

    .cta-footer-card {
        padding: 40px 32px;
        padding-bottom: 280px;
        margin: 0 40px;
    }

    .cta-footer-title {
        font-size: 36px;
    }

    .cta-footer-form {
        gap: 12px;
    }

    .cta-footer-input-group {
        flex-direction: column;
        gap: 12px;
    }

    .cta-footer-input-wrapper {
        max-width: 100%;
    }

    .cta-footer-input,
    .cta-footer-btn {
        width: 100%;
    }

    .cta-footer-btn {
        min-height: 44px;
        padding: 14px 32px;
    }

    .cta-footer-hint {
        font-size: 15px;
    }
}

@media (width <= 767px) {
    .cta-footer-section {
        padding: 80px 0;
    }

    .cta-footer-card {
        padding: 32px 24px;
        padding-bottom: 220px;
    }

    .cta-footer-title {
        font-size: 36px;
    }

    .cta-footer-input-group {
        flex-direction: column;
    }

    .cta-footer-input-wrapper {
        max-width: 100%;
    }

    .cta-footer-btn {
        width: 100%;
    }

    .cta-footer-image {
        width: 280px;
        height: 240px;
    }

    .cta-footer-person {
        width: 240px;
        bottom: 50px;
    }

    .cta-footer-dialog {
        left: auto;
        right: -10px;
        width: 80px;
        height: 80px;
    }
}

@media (width <= 767px) {
    .cta-footer-section {
        padding: 60px 0;
    }

    .cta-footer-card {
        padding: 24px 16px;
        padding-bottom: 250px;
        margin: 0 16px;
    }

    .cta-footer-title {
        font-size: 28px;
        text-align: center;
    }

    .cta-footer-input {
        height: 48px;
    }

    .cta-footer-btn {
        height: 48px;
        padding: 12px 24px;
    }

    .cta-footer-hint {
        font-size: 16px;
        text-align: center;
        margin-bottom: 24px;
    }

    .cta-footer-image {
        width: 300px;
        height: auto;
        bottom: 0;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }

    .cta-footer-person {
        width: 260px;
        position: relative;
        left: 50%;
        right: auto;
        bottom: 0;
        transform: translateX(-50%);
    }

    .cta-footer-dialog {
        left: auto;
        right: -5px;
        top: 20px;
        width: 60px;
        height: 48px;
    }
}

/* ==========================================
   FOOTER SECTION
   ========================================== */
.site-footer {
    background-color: var(--color-dark);
    padding: 60px 0;
    width: 100%;
}

.footer-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px 48px;
    border-bottom: 1px solid rgb(255 255 255 / 11%);
}

.footer-main {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.footer-options {
    display: flex;
    justify-content: space-between;
    gap: 40px;
}

.footer-contacts {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 372px;
    flex-shrink: 0;
}

.footer-logo {
    width: 278px;
    height: 33px;
}

.footer-contact-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.footer-contact-info p {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #fff;
}

.footer-language-select {
    position: relative;
    max-width: 320px;
    height: 56px;
}

.footer-select {
    width: 100%;
    max-width: 320px;
    height: 100%;
    padding: 10px 14px;
    padding-right: 40px;
    background-color: #fff;
    border: 1px solid var(--color-yellow);
    border-radius: 50px;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    color: var(--color-text);
    appearance: none;
    cursor: pointer;
}

.select-icon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    pointer-events: none;
}

.footer-columns {
    display: flex;
    gap: 70px;
}

.footer-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-column-title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 20px;
    line-height: 1.2;
    color: #fff;
    font-variation-settings: 'SOFT' 0, 'WONK' 1;
}

.footer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.footer-links li a {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #fff;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-links li a:hover {
    color: var(--color-yellow);
}

.footer-social-apps {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.footer-social {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-social-icons {
    display: flex;
    gap: 8px;
}

.social-icon {
    display: block;
    width: 32px;
    height: 32px;
    transition: transform 0.2s ease;
}

.social-icon:hover {
    transform: scale(1.1);
}

.social-icon img {
    width: 100%;
    height: 100%;
}

.footer-apps {
    display: flex;
    gap: 10px;
}

.app-badge {
    display: block;
    transition: transform 0.2s ease;
}

.app-badge:hover {
    transform: scale(1.05);
}

.app-badge img {
    height: 48px;
    width: auto;
}

/* Guarantee Section */
.footer-guarantee {
    display: flex;
    justify-content: center;
    gap: 32px;
    max-width: 1300px;
    margin: 0 auto;
    padding: 48px 20px;
}

.guarantee-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.guarantee-icon {
    width: 20px;
    height: 20px;
}

.guarantee-item span {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 20px;
    line-height: 1.5;
    color: #fff;
}

/* Payment Section */
.footer-payment {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px 48px;
    border-bottom: 1px solid rgb(255 255 255 / 11%);
}

.payment-title {
    font-family: var(--font-work-sans);
    font-weight: 500;
    font-size: 20px;
    line-height: 1.2;
    color: #fff;
    text-align: center;
}

.payment-icons {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    justify-content: center;
}

.payment-icon {
    width: 47px;
    height: 32px;
}

/* Trust Section */
.footer-trust {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 1300px;
    margin: 0 auto;
    padding: 48px 20px 0;
}

.footer-copyright {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-copyright p {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #fff;
}

.footer-copyright a {
    color: #fff;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-copyright a:hover {
    color: var(--color-yellow);
}

.footer-trust-text {
    text-align: right;
}

.footer-badges {
    display: flex;
    gap: 12px;
    align-items: center;
}

.dmca-badge {
    width: 79px;
    height: 38px;
    object-fit: contain;
}

.registered-badge {
    display: flex;
    align-items: center;
}

.copyright-icon {
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #fff;
}

.registered-text {
    background-color: #27b76f;
    padding: 10px 5px;
    font-family: var(--font-work-sans);
    font-weight: 500;
    font-size: 7px;
    line-height: 1.5;
    color: #fff;
    text-transform: uppercase;
}

/* Footer Responsive */
@media (width >= 768px) and (width <= 1299px) {
    .footer-options {
        flex-direction: column;
    }

    .footer-contacts {
        width: 100%;
        max-width: 400px;
    }

    .footer-columns {
        flex-wrap: wrap;
        gap: 40px;
    }

    .footer-column {
        min-width: 140px;
    }
}

@media (width >= 768px) and (width <= 1299px) {
    /* Reduce overall padding for tablet */
    .site-footer {
        padding: 48px 0;
    }

    /* Increase horizontal padding to 40px */
    .footer-container {
        padding: 0 40px 40px;
    }

    /* Adjust column layout for 2-column grid */
    .footer-columns {
        gap: 32px;
    }

    .footer-column {
        min-width: calc(50% - 16px);
    }

    /* Scale down typography */
    .footer-column-title {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .footer-links li a {
        font-size: 15px;
        display: block;
        padding: 11px 0;
    }

    /* Adjust contact info typography */
    .footer-contact-info p {
        font-size: 15px;
    }

    /* Scale guarantee section */
    .footer-guarantee {
        padding: 40px;
        gap: 24px;
    }

    .guarantee-item span {
        font-size: 18px;
    }

    /* Scale payment section */
    .footer-payment {
        padding: 0 40px 40px;
    }

    .payment-title {
        font-size: 18px;
    }

    /* Scale trust/copyright section */
    .footer-trust {
        padding: 40px 40px 0;
    }

    .footer-copyright p {
        font-size: 14px;
    }

    /* Adjust social icons (maintaining visibility) */
    .social-icon {
        width: 36px;
        height: 36px;
    }

    /* Scale app badges slightly */
    .app-badge img {
        height: 44px;
    }

    /* Ensure language selector remains touch-friendly */
    .footer-language-select {
        height: 48px;
    }

    .footer-select {
        font-size: 15px;
    }
}

@media (width >= 768px) and (width <= 1299px) {
    .footer-social-apps {
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;
    }

    .footer-copyright {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    .footer-trust-text {
        text-align: center;
    }
}

@media (width <= 767px) {
    .site-footer {
        padding: 40px 0;
    }

    .footer-columns {
        gap: 24px;
    }

    .footer-column {
        min-width: calc(50% - 12px);
    }

    .footer-guarantee {
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
    }

    .guarantee-item span {
        font-size: 16px;
    }

    .footer-apps {
        flex-direction: row;
    }
}

@media (width <= 767px) {
    .footer-column {
        min-width: 100%;
    }

    .footer-columns {
        gap: 32px;
    }

    .footer-guarantee {
        flex-direction: column;
        align-items: center;
    }

    .payment-icons {
        gap: 4px;
    }

    .payment-icon {
        width: 40px;
        height: 28px;
    }

    .footer-badges {
        flex-direction: row;
        align-items: center;
    }
}

/* ==========================================
   MOBILE MENU STYLES
   ========================================== */
.mobile-menu-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 50%);
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
    backdrop-filter: blur(4px);
    backdrop-filter: blur(4px); /* Safari support */
}

.mobile-menu-content {
    position: fixed;
    top: 0;
    right: 0;
    width: 80%;
    max-width: 320px;
    height: 100%;
    background-color: var(--color-white);
    padding: 24px;
    padding-top: 80px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    z-index: 100000;
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

.mobile-menu-overlay.active .mobile-menu-content {
    transform: translateX(0);
}

.mobile-menu-close {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px; /* Expands to 44×44px touch target: (44-24)/2 = 10px */
    box-sizing: content-box; /* Ensure padding adds to dimensions */
}

.mobile-menu-close span {
    position: absolute;
    width: 24px;
    height: 2px;
    background-color: var(--color-dark);
    left: 0;
    top: 50%;
}

.mobile-menu-close span:first-child {
    transform: rotate(45deg);
}

.mobile-menu-close span:last-child {
    transform: rotate(-45deg);
}

.mobile-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 0;
}

.mobile-nav-link {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 500;
    color: var(--color-dark);
    padding: 16px 0;
    border-bottom: 1px solid var(--color-stroke);
    transition: color 0.2s ease;
}

.mobile-nav-link:hover {
    color: var(--color-yellow);
}

/* Mobile Nav Item with Dropdown */
.mobile-nav-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-bottom: 1px solid var(--color-stroke);
}

.mobile-nav-item .mobile-nav-link {
    flex: 1;
    border-bottom: none;
}

.mobile-dropdown-toggle {
    background: none;
    border: none;
    padding: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
}

.mobile-dropdown-toggle .dropdown-arrow {
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--color-dark);
    border-bottom: 2px solid var(--color-dark);
    transform: rotate(45deg);
    transition: transform 0.3s ease;
}

.mobile-nav-item.open .mobile-dropdown-toggle .dropdown-arrow {
    transform: rotate(-135deg);
}

/* Mobile Dropdown Menu */
.mobile-dropdown-menu {
    width: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background-color: var(--color-yellow-light);
}

.mobile-nav-item.open .mobile-dropdown-menu {
    max-height: 300px;
}

.mobile-dropdown-link {
    display: block;
    padding: 12px 24px;
    color: var(--color-text);
    text-decoration: none;
    font-family: var(--font-work-sans);
    font-size: 16px;
    font-weight: 400;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.mobile-dropdown-link:hover {
    color: var(--color-dark);
    background-color: rgb(250 193 21 / 20%);
}

.mobile-menu-actions {
    margin-top: auto;
    padding-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mobile-action-link {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 500;
    color: var(--color-dark);
    text-align: center;
    padding: 12px;
}

.mobile-order-btn {
    width: 100%;
    text-align: center;
}

/* Mobile menu elements are hidden by default in their base styles */

/* They become visible via @media (min-width: 768px) and (max-width: 1299px) in the responsive section */

/* ==========================================
   MOBILE RESPONSIVE STYLES (375px)
   ========================================== */
@media (width <= 767px) {
    :root {
        --container-padding: 16px;
        --section-spacing: 32px;
        --section-gap: 32px;
        --heading-gap: 24px;
    }
}

/* ==========================================
   ACCESSIBILITY
   ========================================== */
.type-card:focus-within,
.btn-primary:focus,
.cta-button:focus {
    outline: 2px solid var(--color-yellow);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }

    .type-card:hover,
    .btn-primary:hover,
    .cta-button:hover {
        transform: none;
    }
}

/* ==========================================
   POLICY / TERMS OF USE SECTION
   ========================================== */
.policy-section {
    background-color: var(--color-white);
    padding: 48px 0 80px;
    width: 100%;
}

.policy-container {
    display: flex;
    gap: 20px;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px;
    align-items: flex-start;
}

/* Main Content */
.policy-content {
    flex: 1;
    max-width: 924px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.policy-header {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.policy-title {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 48px;
    line-height: 1.2;
    color: var(--color-dark);
    font-variation-settings: 'SOFT' 0, 'WONK' 1;
}

.policy-intro {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-text);
}

.policy-text-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.policy-subheading {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.2;
    color: var(--color-dark);
    margin-top: 8px;
    font-variation-settings: 'SOFT' 0, 'WONK' 1;
}

.policy-text {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-text);
}

.policy-definitions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.policy-definitions .policy-text {
    font-family: var(--font-manrope);
    font-weight: 500;
}

.policy-list {
    list-style: disc;
    margin-left: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.policy-list li {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-text);
}

/* Table of Contents Sidebar */
.table-of-contents {
    width: 356px;
    flex-shrink: 0;
    background-color: var(--color-white);
    border: 1px solid #dcddec;
    border-radius: 8px;
    padding: 24px;
    position: sticky;
    top: 120px;
}

.toc-header {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}

.toc-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 600;
    font-size: 24px;
    line-height: 1.2;
    color: var(--color-dark);
    text-align: center;
}

.toc-divider {
    width: 100%;
    height: 1px;
    background-color: #dcddec;
    margin-bottom: 16px;
}

.toc-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.toc-item {
    font-family: var(--font-manrope);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
    padding: 8px 12px;
    border-radius: 8px;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.toc-item:hover {
    background-color: #f9f9fb;
}

.toc-item-active,
.toc-item.active {
    background-color: #f9f9fb;
}

/* Policy Section Responsive */
@media (width >= 768px) and (width <= 1299px) {
    .policy-container {
        flex-direction: column;
    }

    .policy-content {
        max-width: 100%;
    }

    .table-of-contents {
        width: 100%;
        position: static;
        order: -1;
        margin-bottom: 24px;
    }

    .toc-nav {
        flex-flow: row wrap;
        gap: 8px;
    }

    .toc-item {
        padding: 6px 12px;
        font-size: 14px;
    }
}

@media (width <= 767px) {
    .policy-section {
        padding: 32px 0 60px;
    }

    .policy-title {
        font-size: 36px;
    }

    .policy-subheading {
        font-size: 20px;
    }

    .table-of-contents {
        display: none;
    }
}

@media (width <= 767px) {
    .policy-section {
        padding: 24px 0 48px;
    }

    .policy-title {
        font-size: 28px;
    }

    .policy-subheading {
        font-size: 18px;
    }

    .policy-list {
        margin-left: 20px;
    }
}

/* ==========================================
   ABOUT US PAGE STYLES
   ========================================== */

/* About Hero Section */
.about-hero {
    background-color: var(--color-white);
    padding: 20px 310px 0;
    width: 100%;
}

.about-hero-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    max-width: 1300px;
    margin: 0 auto;
}

.about-hero-content {
    display: flex;
    flex-direction: column;
    gap: 68px;
    max-width: 598px;
}

.about-hero-text-block {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.about-hero-heading {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.about-hero-title {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 72px;
    line-height: 1.2;
    color: var(--color-dark);
    margin: 0;
    font-variation-settings: 'SOFT' 0, 'WONK' 1;
}

.about-hero-text {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 20px;
    line-height: 1.4;
    color: var(--color-text);
    margin: 0;
}

.about-hero-cta {
    display: flex;
    gap: 16px;
}

.about-hero-ratings {
    display: flex;
    gap: 32px;
    align-items: flex-start;
}

.about-hero-ratings .rating-item {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.about-hero-ratings .rating-logo {
    width: 28px;
    height: 28px;
}

.about-hero-ratings .rating-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.about-hero-ratings .rating-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.about-hero-ratings .rating-name img {
    height: 13px;
    width: auto;
}

.about-hero-ratings .rating-stars {
    display: flex;
    gap: 4px;
    align-items: center;
}

.about-hero-ratings .rating-score {
    font-family: var(--font-kanit);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-navy-blue);
}

.about-hero-ratings .stars img {
    height: 18px;
    width: auto;
}

/* Hero Image */
.about-hero-image-wrapper {
    position: relative;
    flex-shrink: 0;
}

.about-hero-image-bg {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 618px;
    background-color: var(--color-yellow-light);
    border-radius: 36px 36px 0 0;
}

.about-hero-image {
    position: relative;
    width: 614px;
    height: auto;
    z-index: 1;
}

.about-hero-idea-icon {
    position: absolute;
    top: 160px;
    right: 43px;
    width: 122px;
    height: 122px;
    transform: rotate(2deg) scale(1.5);
    z-index: 2;
}

.about-hero-idea-icon img {
    width: 100%;
    height: 100%;
}

.about-hero-stats-badge {
    position: absolute;
    bottom: 25px;
    right: -20px;
    display: flex;
    gap: 8px;
    background: var(--color-white);
    border: 1px solid var(--color-yellow);
    border-radius: 24px;
    padding: 20px;
    z-index: 2;
}

.about-hero-stats-badge .stats-item {
    display: flex;
    flex-direction: column;
    padding-right: 8px;
    border-right: 1px solid var(--color-stroke);
}

.about-hero-stats-badge .stats-item:last-child {
    padding-right: 0;
    border-right: none;
}

.about-hero-stats-badge .stats-number {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 32px;
    line-height: 1.5;
    color: var(--color-dark);
}

.about-hero-stats-badge .stats-label {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
}

/* About Text Section */
.about-text-section {
    background-color: var(--color-white);
    padding: 120px 310px 60px;
    max-width: 1300px;
    margin: 0 auto;
}

.about-text-container {
    border: 1px solid var(--color-yellow);
    border-radius: 24px;
    padding: 70px;
}

.about-text-inner {
    display: flex;
    gap: 47px;
    align-items: flex-start;
}

.about-text-icon {
    flex-shrink: 0;
    width: 100px;
    height: 100px;
}

.about-text-icon img {
    width: 100%;
    height: 100%;
}

.about-text-content {
    display: flex;
    flex-direction: column;
    gap: 32px;
    max-width: 818px;
}

.about-text-title {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 48px;
    line-height: 1.2;
    color: var(--color-dark);
    margin: 0;
    font-variation-settings: 'SOFT' 0, 'WONK' 1;
}

.about-text-body {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.about-text-body p {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
    margin: 0;
}

/* About Numbers Section */
.about-numbers {
    background-color: var(--color-white);
    padding: 56px 310px 0;
}

.about-numbers-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.about-number-card {
    width: 380px;
    background-color: var(--color-yellow-light);
    border: 1px solid var(--color-yellow);
    border-radius: 10px;
    padding: 32px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
}

.about-number-card .number-value {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 36px;
    line-height: 1.2;
    color: var(--color-dark);
    font-variation-settings: 'SOFT' 0, 'WONK' 1;
}

.about-number-card .number-label {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 20px;
    line-height: 1.5;
    color: var(--color-text);
}

/* About Features Section */
.about-features {
    background-color: var(--color-white);
    padding: 120px 0 60px;
}

.about-features-header {
    text-align: center;
    padding: 0 310px;
    margin-bottom: 48px;
}

.about-features-title {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 48px;
    line-height: 1.2;
    color: var(--color-dark);
    margin: 0 0 24px;
    font-variation-settings: 'SOFT' 0, 'WONK' 1;
}

.about-features-subtitle {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 20px;
    line-height: 1.4;
    color: var(--color-dark);
    margin: 0;
}

.about-features-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    max-width: 1350px;
    margin: 0 auto;
    padding: 0 20px;
}

.about-feature-card {
    width: 420px;
    background-color: var(--color-white);
    border: 1px solid var(--color-yellow);
    border-radius: 24px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

.about-feature-icon {
    width: 123px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-feature-icon img {
    max-width: 100%;
    max-height: 100%;
}

.about-feature-title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.2;
    color: var(--color-dark);
    margin: 0;
    font-variation-settings: 'SOFT' 0, 'WONK' 1;
}

.about-feature-text {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
    margin: 0;
}

/* About Stats Cards Section */
.about-stats-cards {
    background-color: var(--color-white);
    padding: 60px 310px 0;
}

.about-stats-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.about-stat-card {
    width: 380px;
    background-color: var(--color-yellow-light);
    border: 1px solid var(--color-yellow);
    border-radius: 10px;
    padding: 32px 4px;
    text-align: center;
}

.about-stat-card .stat-text {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 20px;
    line-height: 1.5;
    color: var(--color-text);
    margin: 0;
}

/* About More Reasons Section */
.about-reasons {
    background-color: var(--color-white);
    padding: 120px 0 ;
    max-width: 1300px;
    margin: 0 auto;
}

.about-reasons-header {
    text-align: center;
    margin-bottom: 50px;
}

.about-reasons-title {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 48px;
    line-height: 1.2;
    color: var(--color-dark);
    margin: 0;
    font-variation-settings: 'SOFT' 0, 'WONK' 1;
}

.about-reasons-container {
    padding: 120px 310px 80px;
}

.about-reasons-content {
    position: relative;
    background-color: var(--color-yellow-light);
    border: 1px solid var(--color-yellow);
    border-radius: 24px;
    padding: 48px;
    height: 485px;
    overflow: visible;
}

.about-reasons-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 567px;
    position: absolute;
    left: 48px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

.about-reason-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-yellow);
    border-radius: 24px;
    padding: 24px;
}

.about-reason-card .reason-title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.2;
    color: var(--color-dark);
    margin: 0 0 12px;
    font-variation-settings: 'SOFT' 0, 'WONK' 1;
}

.about-reason-card .reason-text {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
    margin: 0;
}

.about-reasons-image {
    position: absolute;
    right: -100px;
    bottom: 0;
    width: 870px;
    height: auto;
    overflow: visible;
}

.about-reasons-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* ==========================================
   ABOUT US RESPONSIVE STYLES
   ========================================== */

@media (width >= 1300px) {
    .about-hero {
        padding: 20px 80px 0;
    }

    .about-text-section {
        padding: 80px 80px 40px;
    }

    .about-numbers {
        padding: 40px 80px 0;
    }

    .about-features-header {
        padding: 0 80px;
    }

    .about-stats-cards {
        padding: 40px 80px 0;
    }

    .about-reasons-container {
        padding: 80px 80px 60px;
    }
}

@media (width >= 1300px) {
    .about-hero-image {
        width: 500px;
    }

    .about-hero-stats-badge {
        right: 0;
    }

    .about-reasons-image {
        width: 700px;
    }
}

@media (width >= 1300px) {
    .about-feature-card {
        width: calc(33.333% - 14px);
    }
}

@media (width >= 768px) and (width <= 1299px) {
    .about-hero-container {
        flex-direction: column;
        align-items: flex-start;
    }

    .about-hero-image-wrapper {
        display: none;
    }

    .about-hero-content {
        max-width: 100%;
    }

    .about-text-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .about-text-content {
        max-width: 100%;
    }

    .about-number-card {
        width: calc(33.333% - 14px);
        min-width: 280px;
    }

    .about-stat-card {
        width: calc(33.333% - 14px);
        min-width: 280px;
    }

    .about-reasons-content {
        position: static;
        height: auto;
        overflow: hidden;
    }

    .about-reasons-image {
        display: none;
    }

    .about-reasons-list {
        position: static;
        transform: none;
        max-width: 100%;
    }
}

@media (width >= 768px) and (width <= 1299px) {
    .about-hero {
        padding: 20px 40px 40px;
    }

    .about-hero-title {
        font-size: 48px;
    }

    .about-hero-ratings {
        flex-wrap: wrap;
    }

    .about-text-section {
        padding: 60px 40px 30px;
    }

    .about-text-container {
        padding: 40px;
    }

    .about-text-title {
        font-size: 36px;
    }

    .about-numbers {
        padding: 30px 40px 0;
    }

    .about-number-card {
        width: calc(50% - 10px);
        min-width: 280px;
    }

    .about-features {
        padding: 60px 0 30px;
    }

    .about-features-header {
        padding: 0 40px;
    }

    .about-features-title {
        font-size: 36px;
    }

    .about-features-container {
        padding: 0 40px;
    }

    .about-feature-card {
        width: calc(50% - 10px);
    }

    .about-stats-cards {
        padding: 30px 40px 0;
    }

    .about-stat-card {
        width: calc(50% - 10px);
        min-width: 280px;
    }

    .about-reasons {
        padding: 60px 0 0;
    }

    .about-reasons-container {
        padding: 40px;
    }

    .about-reasons-title {
        font-size: 36px;
    }

    .about-reasons-content {
        padding: 32px;
    }

    .about-reasons-list {
        left: 32px;
    }
}

@media (width <= 767px) {
    .about-hero {
        padding: 20px 20px 40px;
    }

    .about-hero-title {
        font-size: 42px;
    }

    .about-hero-text {
        font-size: 16px;
    }

    .about-hero-content {
        gap: 40px;
    }

    .about-text-section {
        padding: 40px 20px 20px;
    }

    .about-text-container {
        padding: 24px;
    }

    .about-text-icon {
        width: 60px;
        height: 60px;
    }

    .about-text-title {
        font-size: 28px;
    }

    .about-numbers {
        padding: 20px 20px 0;
    }

    .about-number-card {
        width: 100%;
    }

    .about-features {
        padding: 40px 0 20px;
    }

    .about-features-header {
        padding: 0 20px;
    }

    .about-features-title {
        font-size: 28px;
    }

    .about-features-subtitle {
        font-size: 16px;
    }

    .about-features-container {
        padding: 0 20px;
    }

    .about-feature-card {
        width: 100%;
    }

    .about-stats-cards {
        padding: 20px 20px 0;
    }

    .about-stat-card {
        width: 100%;
    }

    .about-reasons {
        padding: 40px 0 0;
    }

    .about-reasons-container {
        padding: 20px;
    }

    .about-reasons-title {
        font-size: 28px;
    }

    .about-reasons-content {
        padding: 20px;
    }

    .about-reasons-list {
        left: 20px;
    }

    .about-reason-card {
        padding: 16px;
    }

    .about-reason-card .reason-title {
        font-size: 20px;
    }
}

@media (width <= 767px) {
    .about-hero-title {
        font-size: 32px;
    }

    .about-hero-text {
        font-size: 14px;
    }

    .about-hero-ratings {
        flex-direction: column;
        gap: 16px;
    }

    .about-text-title {
        font-size: 24px;
    }

    .about-number-card .number-value {
        font-size: 28px;
    }

    .about-features-title {
        font-size: 24px;
    }

    .about-feature-title {
        font-size: 20px;
    }

    .about-reasons-title {
        font-size: 24px;
    }
}

/* ==========================================
   REVIEWS PAGE STYLES
   ========================================== */

/* Reviews Hero Section */
.reviews-hero {
    background-color: var(--color-white);
    padding: 100px 310px 0;
    position: relative;
    overflow: hidden;
    max-width: 1300px;
    margin: 0 auto;
}

.reviews-hero-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    max-width: 1300px;
    margin: 0 auto;
}

.reviews-hero-content {
    max-width: 632px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.reviews-hero-text {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.reviews-hero-title {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 64px;
    line-height: 1.2;
    color: var(--color-dark);
    margin: 0;
    font-variation-settings: 'SOFT' 0, 'WONK' 1;
}

.reviews-hero-subtitle {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 20px;
    line-height: 1.4;
    color: var(--color-text);
    margin: 0;
    max-width: 470px;
}

.reviews-hero-image-wrapper {
    position: relative;
    width: 614px;
    height: 712px;
    flex-shrink: 0;
}

.reviews-hero-blob {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 614px;
    height: 619px;
    background-color: var(--color-yellow-light);
    border-radius: 37px 37px 0 0;
}

.reviews-hero-image {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 614px;
    height: 712px;
    object-fit: contain;
    object-position: bottom;
}

/* Rating Badges */
.reviews-rating-badge {
    position: absolute;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background-color: var(--color-white);
    border: 1px solid var(--color-yellow);
    border-radius: 12px;
    padding: 15px;
    z-index: 2;
}

.rating-badge-logo {
    width: 35px;
    height: 35px;
    flex-shrink: 0;
}

.rating-badge-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.rating-badge-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
}

.rating-badge-name {
    height: 16px;
    width: auto;
    display: block;
}

/* CheapestEssay badge specific */
.reviews-rating-cheapestessay .rating-badge-name {
    width: 123px;
}

.rating-badge-stars {
    display: flex;
    align-items: center;
    gap: 5px;
}

.rating-badge-stars .rating-score {
    font-family: var(--font-kanit);
    font-weight: 500;
    font-size: 20px;
    color: var(--color-navy-blue);
}

.rating-badge-stars img {
    width: 106px;
    height: 22px;
}

.reviews-rating-cheapestessay {
    top: 183px;
    right: -93px;
    width: 214px;
    height: 75px;
    padding: 15px;
    box-sizing: border-box;
}

.reviews-rating-reviewsio {
    bottom: 35px;
    right: -123px;
    width: 214px;
    height: 76px;
    padding: 15px;
    box-sizing: border-box;
}

.reviews-rating-sitejabber {
    top: 500px;
    left: auto;
    right: 490px;
    width: 214px;
    height: 76px;
    padding: 15px;
    box-sizing: border-box;
}

/* Reviews Testimonials Section */
.reviews-testimonials {
    background-color: var(--color-white);
    padding: 120px 310px;
    max-width: 1300px;
    margin: 0 auto;
}

.reviews-testimonials-header {
    text-align: center;
    margin-bottom: 48px;
}

.reviews-testimonials-title {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 48px;
    line-height: 1.2;
    color: var(--color-dark);
    margin: 0 0 48px;
    font-variation-settings: 'SOFT' 0, 'WONK' 1;
}

.reviews-testimonials-subtitle{
    font-family: var(--font-work-sans);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--color-text);
    margin: 0 0 48px;
}

.reviews-overall-rating {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.overall-rating-label {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    color: var(--color-dark);
}

.overall-rating-stars {
    display: flex;
    gap: 0;
}

.overall-rating-stars img {
    width: 20px;
    height: 20px;
}

.overall-rating-text {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    color: var(--color-dark);
}

.reviews-testimonials-container {
    max-width: 1300px;
    margin: 0 auto;
}

.reviews-testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.review-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-stroke);
    border-radius: 24px;
    padding: 32px;
}

.review-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.review-card-author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.review-platform-icon {
    width: 28px;
    height: 28px;
}

.review-author-name {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 20px;
    color: var(--color-dark);
    font-variation-settings: 'SOFT' 0, 'WONK' 1;
}

.review-card-stars {
    display: flex;
    gap: 0;
}

.review-card-stars img {
    width: 20px;
    height: 20px;
}

.review-card-text {
    margin-bottom: 24px;
}

.review-card-text p {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
    margin: 0;
}

.review-card-text strong {
    display: block;
    margin-bottom: 8px;
}

.review-card-date {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    color: var(--color-text);
}

.reviews-testimonials-footer {
    text-align: center;
    margin-top: 48px;
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 55px;
    background-color: transparent;
    border: 1px solid var(--color-dark);
    border-radius: 50px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 16px;
    color: var(--color-dark);
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    background-color: var(--color-dark);
    color: var(--color-white);
}

/* CTA Expert Writers Section */
.reviews-cta-expert {
    background-color: var(--color-white);
    padding: 0 310px 60px;
    max-width: 1300px;
    margin: 0 auto;
}

.reviews-cta-expert-container {
    position: relative;
    background-color: var(--color-yellow-light);
    border: 1px solid var(--color-yellow);
    border-radius: 24px;
    padding: 48px;
    min-height: 486px;
    overflow: visible;
}

.reviews-cta-expert-content {
    max-width: 586px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.reviews-cta-expert-title {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 48px;
    line-height: 1.2;
    color: var(--color-dark);
    margin: 0;
    font-variation-settings: 'SOFT' 0, 'WONK' 1;
}

.reviews-cta-expert-text {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
    margin: 0 0 8px;
}

.reviews-cta-expert-content .btn-primary {
    width: 260px;
}

.reviews-cta-expert-image {
    position: absolute;
    right: -150px;
    bottom: 0;
    width: 870px;
    height: auto;
}

.reviews-cta-expert-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* SEO Section */
.reviews-seo {
    background-color: var(--color-white);
    padding: 120px 310px;
    max-width: 1300px;
    margin: 0 auto;
}

.reviews-seo-container {
    max-width: 1300px;
    margin: 0 auto;
}

.reviews-seo-content {
    background-color: var(--color-bg-blue);
    border-radius: 24px;
    padding: 48px;
}

.reviews-seo-inner {
    display: flex;
    gap: 16px;
    background-color: var(--color-white);
    border-radius: 16px;
    padding: 32px;
    max-height: 400px;
}

.reviews-seo-columns {
    flex: 1;
    display: flex;
    gap: 24px;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.reviews-seo-columns::-webkit-scrollbar {
    display: none;
}

.reviews-seo-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.reviews-seo-block h3 {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 24px;
    line-height: 1.2;
    color: var(--color-dark);
    margin: 0 0 12px;
    font-variation-settings: 'SOFT' 0, 'WONK' 1;
}

.reviews-seo-block p {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
    margin: 0 0 12px;
}

.reviews-seo-progress {
    position: relative;
    width: 8px;
    flex-shrink: 0;
    align-self: stretch;
}

.progress-bar-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 8px;
    height: 100%;
    background-color: #ebefff;
    border-radius: 8px;
}

.progress-bar-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 8px;
    height: 97px;
    background-color: var(--color-dark);
    border-radius: 4px;
    transition: top 0.1s ease;
}

/* ==========================================
   REVIEWS PAGE RESPONSIVE STYLES
   ========================================== */

@media (width >= 1300px) {
    .reviews-hero {
        padding: 80px 80px 0;
    }

    .reviews-testimonials {
        padding: 80px;
    }

    .reviews-cta-expert {
        padding: 0 80px 60px;
    }

    .reviews-seo {
        padding: 80px;
    }

    .reviews-rating-sitejabber {
        left: -280px;
    }
}

@media (width >= 1300px) {
    .reviews-hero-image-wrapper {
        width: 500px;
        height: 580px;
    }

    .reviews-hero-blob {
        width: 500px;
        height: 500px;
    }

    .reviews-hero-image {
        width: 500px;
        height: 580px;
    }

    .reviews-rating-cheapestessay {
        top: 150px;
        right: -50px;
    }

    .reviews-rating-reviewsio {
        bottom: 50px;
        right: -80px;
    }

    .reviews-rating-sitejabber {
        left: -180px;
    }

    .reviews-cta-expert-image {
        width: 600px;
        right: -100px;
    }
}

@media (width >= 768px) and (width <= 1299px) {
    .reviews-hero-container {
        flex-direction: column;
        align-items: flex-start;
    }

    .reviews-hero-image-wrapper {
        display: none;
    }

    .reviews-testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .reviews-cta-expert-image {
        display: none;
    }

    .reviews-cta-expert-content {
        max-width: 100%;
    }

    .reviews-seo-columns {
        flex-direction: column;
    }
}

@media (width >= 768px) and (width <= 1299px) {
    .reviews-hero {
        padding: 60px 40px 0;
    }

    .reviews-hero-title {
        font-size: 48px;
    }

    .reviews-testimonials {
        padding: 60px 40px;
    }

    .reviews-testimonials-title {
        font-size: 36px;
    }

    .reviews-cta-expert {
        padding: 0 40px 40px;
    }

    .reviews-cta-expert-title {
        font-size: 36px;
    }

    .reviews-seo {
        padding: 60px 40px;
    }

    .reviews-testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

@media (width <= 767px) {
    .reviews-hero {
        padding: 40px 20px 0;
    }

    .reviews-hero-title {
        font-size: 36px;
    }

    .reviews-hero-subtitle {
        font-size: 16px;
    }

    .reviews-testimonials {
        padding: 40px 20px;
    }

    .reviews-testimonials-title {
        font-size: 28px;
    }

    .reviews-testimonials-grid {
        grid-template-columns: 1fr;
    }

    .reviews-overall-rating {
        flex-direction: column;
        gap: 8px;
    }

    .reviews-cta-expert {
        padding: 0 20px 20px;
    }

    .reviews-cta-expert-title {
        font-size: 28px;
    }

    .reviews-cta-expert-container {
        padding: 32px;
    }

    .reviews-seo {
        padding: 40px 20px;
    }

    .reviews-seo-content {
        padding: 24px;
    }

    .reviews-seo-inner {
        padding: 20px;
        max-height: 350px;
    }
}

/* ==========================================
   CONTACTS PAGE STYLES
   ========================================== */

/* Contact Hero Section */
.contact-hero {
    background-color: var(--color-white);
    padding: 70px var(--container-padding);
    border-radius: 24px;
}

.contact-hero-container {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 56px;
}

.contact-hero-title {
    font-family: var(--font-fraunces);
    font-weight: 900;
    font-size: 56px;
    line-height: 1.2;
    color: var(--color-dark);
    text-align: center;
    margin: 0;
    font-variation-settings: 'SOFT' 0, 'WONK' 1;
}

.contact-cards {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: stretch;
}

.contact-card {
    width: 420px;
    background-color: var(--color-white);
    border: 1px solid var(--color-yellow);
    border-radius: 24px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.contact-card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 100%;
}

.contact-card-icon {
    width: 113px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-card-icon img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.contact-card-text {
    font-family: var(--font-fraunces);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.2;
    color: var(--color-dark);
    text-align: center;
    margin: 0;
    font-variation-settings: 'SOFT' 0, 'WONK' 1;
}

/* Dark Button */
.btn-dark {
    background-color: var(--color-dark);
    color: var(--color-white);
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    padding: 16px 32px;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 1px 2px 0 rgb(16 24 40 / 5%);
    min-width: 169px;
}

.btn-dark:hover {
    background-color: #1e2536;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgb(18 24 39 / 30%);
}

/* Contact Form Section */
.contact-form-section {
    background: linear-gradient(to bottom, #fffbee, #fff);
    padding: 70px var(--container-padding);
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-form-card {
    width: 694px;
    background-color: var(--color-white);
    border: 1px solid #e1e1e1;
    border-radius: 24px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.contact-form-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
    width: 100%;
}

.contact-form-title {
    font-family: var(--font-fraunces);
    font-weight: 900;
    font-size: 48px;
    line-height: 1.2;
    color: var(--color-dark);
    margin: 0;
    font-variation-settings: 'SOFT' 0, 'WONK' 1;
}

.contact-form-subtitle {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-text);
    margin: 0;
}

.contact-form-fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.contact-input-wrapper {
    width: 100%;
}

.contact-input {
    width: 100%;
    padding: 12px 20px;
    border: 1px solid #e1e1e1;
    border-radius: 24px;
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
    background-color: var(--color-white);
    transition: border-color 0.3s ease;
}

.contact-input::placeholder {
    color: var(--color-text);
}

.contact-input:focus {
    border-color: var(--color-yellow);

    /* Global focus outline applies from line 87-94 */
}

.contact-textarea-wrapper {
    width: 100%;
}

.contact-textarea {
    width: 100%;
    height: 149px;
    padding: 12px 20px;
    border: 1px solid #e1e1e1;
    border-radius: 24px;
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
    background-color: var(--color-white);
    resize: none;
    transition: border-color 0.3s ease;
}

.contact-textarea::placeholder {
    color: var(--color-text);
}

.contact-textarea:focus {
    border-color: var(--color-yellow);

    /* Global focus outline applies from line 87-94 */
}

.contact-submit-btn {
    width: 100%;
}

/* ==========================================
   CONTACTS PAGE RESPONSIVE STYLES
   ========================================== */

@media (width >= 1300px) {
    .contact-hero {
        padding: 70px 80px;
    }

    .contact-form-section {
        padding: 70px 80px;
    }
}

@media (width >= 768px) and (width <= 1299px) {
    .contact-cards {
        flex-wrap: wrap;
    }

    .contact-card {
        width: calc(50% - 10px);
        min-width: 300px;
    }

    .contact-form-card {
        width: 100%;
        max-width: 694px;
    }
}

@media (width >= 768px) and (width <= 1299px) {
    /* Contact Hero Section */
    .contact-hero {
        padding: 60px 40px;
    }

    .contact-hero-container {
        gap: 40px;
    }

    .contact-hero-title {
        font-size: 48px;
    }

    .contact-cards {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    .contact-card {
        width: 100%;
        max-width: 500px;
    }

    .contact-card-text {
        font-size: 20px;
    }

    /* Contact Form Section */
    .contact-form-section {
        padding: 60px 40px;
    }

    .contact-form-card {
        width: 100%;
        max-width: 600px;
        padding: 24px;
        gap: 20px;
    }

    .contact-form-title {
        font-size: 36px;
    }

    .contact-form-subtitle {
        font-size: 16px;
    }

    .contact-form-fields {
        gap: 14px;
    }

    .contact-textarea {
        height: 120px;
    }

    .contact-submit-btn {
        margin-top: 8px;
    }
}

@media (width <= 767px) {
    .contact-hero {
        padding: 40px 20px;
    }

    .contact-hero-container {
        gap: 40px;
    }

    .contact-hero-title {
        font-size: 32px;
    }

    .contact-card-text {
        font-size: 20px;
    }

    .contact-form-section {
        padding: 40px 20px;
    }

    .contact-form-card {
        padding: 24px;
    }

    .contact-form-title {
        font-size: 28px;
    }
}

@media (width <= 767px) {
    .contact-hero-title {
        font-size: 28px;
    }

    .contact-card {
        padding: 24px;
    }

    .contact-card-icon {
        width: 80px;
        height: 60px;
    }

    .contact-card-text {
        font-size: 18px;
    }

    .contact-form-title {
        font-size: 24px;
    }

    .contact-input,
    .contact-textarea {
        padding: 10px 16px;
        border-radius: 16px;
    }

    .contact-textarea {
        height: 120px;
    }

    .btn-dark {
        width: 100%;
    }
}

/* ==========================================
   COUPONS PAGE STYLES
   ========================================== */

/* ==========================================
   COUPONS HERO SECTION
   ========================================== */
.coupons-hero {
    background-color: var(--color-white);
    padding: 60px var(--container-padding);
    border-radius: 24px;
}

.coupons-hero-container {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.coupons-hero-title {
    font-family: var(--font-fraunces);
    font-weight: 900;
    font-size: 56px;
    line-height: 1.2;
    color: var(--color-dark);
    text-align: center;
    font-variation-settings: 'SOFT' 0, 'WONK' 1;
}

.coupons-hero-subtitle-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.coupons-hero-subtitle {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 20px;
    line-height: 1.4;
    color: var(--color-text);
    text-align: center;
}

.coupons-stats {
    display: flex;
    gap: 20px;
    padding-top: 24px;
    flex-wrap: wrap;
    justify-content: center;
}

.coupon-stat-card {
    background: var(--color-white);
    border: 1px solid #dadcde;
    border-radius: 10px;
    padding: 16px;
    display: flex;
    gap: 12px;
    align-items: center;
}

.coupon-stat-emoji {
    font-size: 36px;
    line-height: 1.4;
}

.coupon-stat-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.coupon-stat-value {
    font-family: var(--font-work-sans);
    font-weight: 600;
    font-size: 20px;
    line-height: 1.5;
    color: var(--color-dark);
}

.coupon-stat-label {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-text);
}

/* ==========================================
   COUPONS CARDS SECTION
   ========================================== */
.coupons-cards-section {
    padding: 0 var(--container-padding) 0;
}

.coupons-cards-container {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding-top: 24px;
}

.coupon-card {
    background: var(--color-white);
    border: 1px solid var(--color-yellow);
    border-radius: 24px;
    padding: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    width: calc(50% - 10px);
    min-height: 160px;
}

.coupon-card-badges {
    position: absolute;
    top: -12px;
    left: 32px;
    display: flex;
    gap: 8px;
}

.coupon-badge {
    padding: 8px 12px;
    border-radius: 10px;
    font-family: var(--font-work-sans);
    font-weight: 600;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
}

.coupon-badge-top {
    background: var(--color-green);
    color: var(--color-white);
}

.coupon-badge-available {
    background: #d0ffe1;
    border: 1px solid var(--color-green);
    color: var(--color-green);
}

.coupon-badge-expired {
    background: #ffd2d0;
    border: 1px solid #e05656;
    color: #e05656;
}

.coupon-card-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    max-width: 372px;
}

.coupon-card-name h3 {
    font-family: var(--font-fraunces);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.2;
    font-variation-settings: 'SOFT' 0, 'WONK' 1;
}

.coupon-card-name .discount-text {
    color: var(--color-dark);
}

.coupon-card-name .on-text {
    color: var(--color-text);
}

.coupon-card-text p {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-text);
}

.coupon-card-actions {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 163px;
}

.coupon-code-box {
    background: #fbfbfc;
    border: 1px solid #dadcde;
    border-radius: 10px;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
}

.coupon-code {
    font-family: var(--font-work-sans);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
}

.copy-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
}

.copy-btn:hover {
    opacity: 0.7;
}

.coupon-use-btn {
    background: var(--color-yellow);
    border-radius: 10px;
    padding: 8px 16px;
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
    text-align: center;
    cursor: pointer;
    border: none;
    height: 40px;
    box-shadow: 0 1px 2px 0 rgb(16 24 40 / 5%);
    transition: all 0.3s ease;
}

.coupon-use-btn:hover {
    background: #e8b314;
}

/* ==========================================
   COUPONS HOW IT WORKS SECTION
   ========================================== */
.coupons-how-it-works {
    padding: 120px var(--container-padding);
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.coupons-how-heading {
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
    text-align: center;
    max-width: 1300px;
    margin: 0 auto;
    width: 100%;
}

.coupons-how-title {
    font-family: var(--font-fraunces);
    font-weight: 900;
    font-size: 48px;
    line-height: 1.2;
    color: var(--color-dark);
    font-variation-settings: 'SOFT' 0, 'WONK' 1;
}

.coupons-how-subtitle {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 20px;
    line-height: 1.4;
    color: var(--color-text);
}

.coupons-how-container {
    display: flex;
    gap: 20px;
    max-width: 1300px;
    margin: 0 auto;
    width: 100%;
}

.coupons-how-card {
    background: var(--color-white);
    border: 1px solid var(--color-yellow);
    border-radius: 24px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
    justify-content: center;
    flex: 1;
    text-align: center;
}

.coupons-how-icon {
    width: 87px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.coupons-how-icon img {
    max-width: 100%;
    max-height: 100%;
}

.coupons-how-card-title {
    font-family: var(--font-fraunces);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.2;
    color: var(--color-dark);
    font-variation-settings: 'SOFT' 0, 'WONK' 1;
}

.coupons-how-card-text {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-text);
}

/* ==========================================
   COUPONS CTA NEWSLETTER SECTION
   ========================================== */
.coupons-cta-section {
    padding: 0 var(--container-padding);
}

.coupons-cta-container {
    max-width: 1300px;
    margin: 0 auto;
    background: var(--color-bg-blue);
    border-radius: 24px;
    padding: 119px 48px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
}

.coupons-cta-icon {
    width: 82px;
    height: 86px;
}

.coupons-cta-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.coupons-cta-heading {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
    text-align: center;
}

.coupons-cta-title {
    font-family: var(--font-fraunces);
    font-weight: 900;
    font-size: 48px;
    line-height: 1.2;
    color: var(--color-dark);
    font-variation-settings: 'SOFT' 0, 'WONK' 1;
}

.coupons-cta-subtitle {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 20px;
    line-height: 1.4;
    color: var(--color-text);
}

.coupons-cta-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
}

.coupons-cta-input-wrapper {
    display: flex;
    gap: 16px;
    align-items: center;
}

.coupons-cta-input {
    width: 414px;
    height: 56px;
    background: var(--color-white);
    border: 1px solid var(--color-yellow);
    border-radius: 50px;
    padding: 16px 14px;
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
}

.coupons-cta-input::placeholder {
    color: var(--color-text);
}

.coupons-cta-btn {
    background: var(--color-yellow);
    border-radius: 50px;
    padding: 16px 32px;
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.coupons-cta-btn:hover {
    background: #e8b314;
}

.coupons-cta-disclaimer {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-text);
    text-align: center;
}

/* ==========================================
   COUPONS TESTIMONIALS SECTION
   ========================================== */
.coupons-testimonials {
    padding: 120px var(--container-padding);
    display: flex;
    flex-direction: column;
    gap: 48px;
    align-items: center;
    border-radius: 24px;
}

.coupons-testimonials-heading {
    text-align: center;
    max-width: 1300px;
    width: 100%;
}

.coupons-testimonials-title {
    font-family: var(--font-fraunces);
    font-weight: 900;
    font-size: 48px;
    line-height: 1.2;
    color: var(--color-dark);
    font-variation-settings: 'SOFT' 0, 'WONK' 1;
}

.coupons-testimonials-container {
    max-width: 1300px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
}

.coupons-review-badges {
    display: flex;
    gap: 20px;
}

.coupons-review-badge {
    background: var(--color-white);
    border: 1px solid #dcddec;
    border-radius: 50px;
    padding: 16px 32px;
    display: flex;
    gap: 8px;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.coupons-review-badge.active {
    background: #f9f9fb;
}

.coupons-review-badge .badge-logo {
    width: 28px;
    height: 28px;
}

.coupons-review-badge .badge-text {
    height: 16px;
}

.coupons-testimonials-cards {
    display: flex;
    gap: 20px;
    width: 100%;
}

.coupons-testimonial-card {
    flex: 1;
    background: var(--color-white);
    border: 1px solid var(--color-yellow);
    border-radius: 24px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.coupons-testimonial-card .testimonial-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.coupons-testimonial-card .testimonial-name {
    font-family: var(--font-fraunces);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.2;
    color: var(--color-dark);
    font-variation-settings: 'SOFT' 0, 'WONK' 1;
}

.coupons-testimonial-card .testimonial-stars {
    display: flex;
    gap: 0;
}

.coupons-testimonial-card .testimonial-stars img {
    width: 20px;
    height: 20px;
}

.coupons-testimonial-card .testimonial-text {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-text);
}

.coupons-testimonial-card .testimonial-date {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
}

.coupons-testimonials-footer {
    display: flex;
    flex-direction: column;
    gap: 48px;
    align-items: center;
    width: 100%;
    max-width: 1300px;
}

.coupons-overall-rating {
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
}

.coupons-overall-rating span {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
}

.coupons-overall-rating .rating-stars {
    display: flex;
    gap: 0;
}

.coupons-overall-rating .rating-stars img {
    width: 20px;
    height: 20px;
}

.coupons-reviews-btn {
    background: var(--color-dark);
    border-radius: 50px;
    padding: 16px 32px;
    font-family: var(--font-manrope);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-white);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.coupons-reviews-btn:hover {
    background: #2a3347;
}

/* ==========================================
   COUPONS SEO SECTION
   ========================================== */
.coupons-seo-section {
    padding: 120px var(--container-padding);
    background: linear-gradient(to bottom, #f9fafb, #fff);
    border-radius: 16px 16px 0 0;
    overflow: hidden;
}

.coupons-seo-container {
    max-width: 1300px;
    margin: 0 auto;
    background: var(--color-bg-blue);
    border-radius: 24px;
    padding: 48px;
}

.coupons-seo-content {
    background: var(--color-white);
    border-radius: 24px;
    padding: 48px 24px;
}

.coupons-seo-columns {
    display: flex;
    gap: 24px;
    padding-top: 24px;
    max-height: 420px;
    overflow-y: auto;
    position: relative;
}

.coupons-seo-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.coupons-seo-block {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.coupons-seo-block h3 {
    font-family: var(--font-fraunces);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.2;
    color: var(--color-dark);
    font-variation-settings: 'SOFT' 0, 'WONK' 1;
}

.coupons-seo-block p {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-text);
}

.coupons-seo-block ul {
    list-style: disc;
    padding-left: 24px;
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-text);
}

.coupons-seo-block ul li {
    margin-bottom: 8px;
}

.coupons-seo-progress {
    width: 8px;
    position: relative;
    flex-shrink: 0;
}

.seo-progress-track {
    width: 8px;
    height: 100%;
    background: #ebefff;
    border-radius: 8px;
}

.seo-progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 8px;
    height: 97px;
    background: var(--color-dark);
    border-radius: 4px;
}

/* ==========================================
   COUPONS CTA CARD SECTION
   ========================================== */
.coupons-cta-card-section {
    padding: 60px var(--container-padding) 80px;
}

.coupons-cta-card {
    max-width: 1300px;
    margin: 0 auto;
    background: var(--color-yellow-light);
    border: 1px solid var(--color-yellow);
    border-radius: 24px;
    padding: 48px;
    display: flex;
    position: relative;
    min-height: 380px;
    overflow: hidden;
}

.coupons-cta-card-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 586px;
}

.coupons-cta-card-heading {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.coupons-cta-card-heading h2 {
    font-family: var(--font-fraunces);
    font-weight: 900;
    font-size: 48px;
    line-height: 1.2;
    color: var(--color-dark);
    font-variation-settings: 'SOFT' 0, 'WONK' 1;
}

.coupons-cta-card-heading p {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
}

.coupons-cta-card-buttons {
    display: flex;
    gap: 16px;
}

.cta-card-btn-primary {
    background: var(--color-yellow);
    border-radius: 50px;
    padding: 16px 32px;
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.cta-card-btn-primary:hover {
    background: #e8b314;
}

.cta-card-btn-secondary {
    background: transparent;
    border: 1px solid var(--color-yellow);
    border-radius: 50px;
    padding: 16px 32px;
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
    cursor: pointer;
    transition: all 0.3s ease;
}

.cta-card-btn-secondary:hover {
    background: var(--color-yellow);
}

.coupons-cta-card-image {
    position: absolute;
    right: 154px;
    bottom: 0;
    width: 441px;
    height: 403px;
}

.coupons-cta-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0 0 24px;
}

.cta-card-dialog {
    position: absolute;
    top: -23px;
    right: -15px;
    width: 141px;
    height: 117px;
    transform: rotate(7.25deg);
}

.cta-card-dialog img {
    width: 100%;
    height: 100%;
}

/* ==========================================
   COUPONS FAQ SECTION
   ========================================== */
.coupons-faq-section {
    background: var(--color-white);
    padding: 120px 0;
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
}

.coupons-faq-heading {
    text-align: center;
}

.coupons-faq-title {
    font-family: var(--font-fraunces);
    font-weight: 900;
    font-size: 48px;
    line-height: 1.2;
    color: var(--color-dark);
    font-variation-settings: 'SOFT' 0, 'WONK' 1;
}

.coupons-faq-container {
    max-width: 1300px;
    width: 100%;
    padding: 0 var(--container-padding);
    display: flex;
    gap: 20px;
}

.coupons-faq-support-card {
    width: 481px;
    background: var(--color-yellow-light);
    border: 1px solid var(--color-yellow);
    border-radius: 24px;
    padding: 48px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
    flex-shrink: 0;
}

.faq-support-icon {
    width: 106px;
    height: 97px;
}

.faq-support-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.faq-support-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    text-align: center;
}

.faq-support-content h3 {
    font-family: var(--font-fraunces);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.2;
    color: var(--color-dark);
    font-variation-settings: 'SOFT' 0, 'WONK' 1;
}

.faq-support-content p {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 20px;
    line-height: 1.4;
    color: var(--color-dark);
}

.faq-support-buttons {
    display: flex;
    gap: 16px;
}

.faq-btn-chat {
    background: var(--color-yellow);
    border-radius: 50px;
    padding: 16px 32px;
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.faq-btn-chat:hover {
    background: #e8b314;
}

.chat-indicator {
    width: 8px;
    height: 8px;
    background: var(--color-dark);
    border-radius: 50%;
}

.faq-btn-email {
    background: var(--color-dark);
    border-radius: 50px;
    padding: 16px 32px;
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-white);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.faq-btn-email:hover {
    background: #2a3347;
}

.coupons-faq-questions {
    flex: 1;
}

.coupons-faq-group {
    background: var(--color-white);
    border: 1px solid var(--color-yellow);
    border-radius: 10px;
    padding: 24px;
}

.coupons-faq-group .faq-group-header {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 24px;
}

.coupons-faq-group .faq-group-icon {
    width: 32px;
    height: 32px;
}

.coupons-faq-group .faq-group-header h3 {
    font-family: var(--font-fraunces);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.2;
    color: var(--color-dark);
    font-variation-settings: 'SOFT' 0, 'WONK' 1;
}

.coupons-faq-group .faq-items {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.coupons-faq-group .faq-item {
    padding: 0 12px;
}

.coupons-faq-group .faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    text-align: left;
}

.coupons-faq-group .faq-question span {
    font-family: var(--font-fraunces);
    font-weight: 600;
    font-size: 20px;
    line-height: 1.2;
    color: var(--color-dark);
    flex: 1;
    font-variation-settings: 'SOFT' 0, 'WONK' 1;
}

.coupons-faq-group .faq-icon-toggle {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.coupons-faq-group .faq-answer {
    padding-top: 12px;
}

.coupons-faq-group .faq-answer p {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-text);
}

/* ==========================================
   COUPONS PAGE RESPONSIVE STYLES
   ========================================== */
@media (width >= 1300px) {
    .coupons-hero,
    .coupons-cards-section,
    .coupons-how-it-works,
    .coupons-cta-section,
    .coupons-testimonials,
    .coupons-seo-section,
    .coupons-cta-card-section {
        padding-left: 80px;
        padding-right: 80px;
    }

    .coupons-faq-container {
        padding-left: 80px;
        padding-right: 80px;
    }
}

@media (width >= 768px) and (width <= 1299px) {
    .coupons-hero-title {
        font-size: 42px;
    }

    .coupons-how-container {
        flex-direction: column;
    }

    .coupons-cta-card-image {
        display: none;
    }

    .coupons-cta-card-content {
        max-width: 100%;
    }

    .coupons-faq-container {
        flex-direction: column;
    }

    .coupons-faq-support-card {
        width: 100%;
    }
}

@media (width >= 768px) and (width <= 1299px) {
    .coupon-card {
        width: 100%;
        flex-direction: column;
        gap: 24px;
        align-items: flex-start;
    }

    .coupon-card-content {
        max-width: 100%;
    }

    .coupon-card-actions {
        width: 100%;
    }

    .coupons-stats {
        flex-direction: column;
        gap: 12px;
    }

    .coupon-stat-card {
        width: 100%;
        max-width: 300px;
    }

    .coupons-testimonials-cards {
        flex-direction: column;
    }

    .coupons-cta-input-wrapper {
        flex-direction: column;
        width: 100%;
    }

    .coupons-cta-input {
        width: 100%;
    }
}

@media (width <= 767px) {
    .coupons-hero,
    .coupons-cards-section,
    .coupons-how-it-works,
    .coupons-cta-section,
    .coupons-testimonials,
    .coupons-seo-section,
    .coupons-cta-card-section {
        padding-left: 20px;
        padding-right: 20px;
    }

    .coupons-faq-container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .coupons-hero-title {
        font-size: 32px;
    }

    .coupons-hero-subtitle {
        font-size: 16px;
    }

    .coupons-how-title,
    .coupons-cta-title,
    .coupons-testimonials-title,
    .coupons-faq-title,
    .coupons-cta-card-heading h2 {
        font-size: 32px;
    }

    .coupons-cta-container {
        padding: 60px 24px;
    }

    .coupons-seo-columns {
        flex-direction: column;
    }

    .coupons-seo-progress {
        display: none;
    }

    .coupons-cta-card-buttons {
        flex-direction: column;
    }

    .cta-card-btn-primary,
    .cta-card-btn-secondary {
        width: 100%;
        text-align: center;
    }

    .faq-support-buttons {
        flex-direction: column;
        width: 100%;
    }

    .faq-btn-chat,
    .faq-btn-email {
        width: 100%;
        justify-content: center;
    }

    .coupons-overall-rating {
        flex-wrap: wrap;
        text-align: center;
    }
}

@media (width <= 767px) {
    .coupons-hero-title {
        font-size: 28px;
    }

    .coupon-card-name h3 {
        font-size: 20px;
    }

    .coupons-how-card-title,
    .coupons-testimonial-card .testimonial-name,
    .faq-support-content h3,
    .coupons-faq-group .faq-group-header h3 {
        font-size: 20px;
    }

    .coupons-faq-group .faq-question span {
        font-size: 16px;
    }

    .coupons-cta-card {
        padding: 24px;
    }

    .coupons-faq-support-card {
        padding: 24px;
    }
}

/* ==========================================
   SAMPLES PAGE STYLES
   ========================================== */

/* Samples Hero Section */
.samples-hero {
    padding: 0;
    background-color: var(--color-yellow-light);
    margin-bottom: 20px;
}

.samples-hero-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.samples-hero-content {
    text-align: center;
    padding: 30px 0;
    max-width: 1300px;
    margin: 0 auto;
}

.samples-hero-content h1 {
    font-family: var(--font-fraunces);
    font-size: 56px;
    font-weight: 900;
    color: var(--color-dark);
    line-height: 1.2;
    margin-bottom: 32px;
    font-variation-settings: 'SOFT' 0, 'WONK' 1;
}

.samples-hero-text p {
    font-family: var(--font-work-sans);
    font-size: 20px;
    font-weight: 400;
    color: var(--color-text);
    line-height: 1.4;
}

.samples-hero-text p:first-child {
    margin-bottom: 12px;
}

.samples-hero-count {
    color: var(--color-dark);
}

.samples-hero-count strong {
    font-weight: 500;
}

/* Samples Latest Section */
.samples-latest {
    padding: 0 0 48px;
}

.samples-latest-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 var(--container-padding);
    text-align: center;
}

.samples-latest-container h2 {
    font-family: var(--font-work-sans);
    font-size: 20px;
    font-weight: 500;
    color: var(--color-dark);
    margin-bottom: 24px;
}

.samples-empty-state {
    font-family: var(--font-work-sans);
    font-size: 20px;
    font-weight: 400;
    color: var(--color-text);
}

/* Samples Categories Section */
.samples-categories {
    padding: 0 0 120px;
}

.samples-categories-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.samples-categories-heading {
    text-align: center;
    margin-bottom: 48px;
}

.samples-categories-heading h2 {
    font-family: var(--font-fraunces);
    font-size: 48px;
    font-weight: 900;
    color: var(--color-dark);
    line-height: 1.2;
    margin-bottom: 24px;
    font-variation-settings: 'SOFT' 0, 'WONK' 1;
}

.samples-categories-heading p {
    font-family: var(--font-work-sans);
    font-size: 20px;
    font-weight: 400;
    color: var(--color-text);
    line-height: 1.4;
    max-width: 682px;
    margin: 0 auto;
}

/* Categories Grid */
.samples-categories-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 48px 46px; /* row-gap column-gap */
    align-items: start; /* Align categories to top */
}

/* Category Card */
.category-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.category-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 8px;
    background-color: var(--color-yellow-light);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.category-icon svg {
    width: 24px;
    height: 24px;
}

.category-content {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.category-header {
    margin-bottom: 12px;
}

.category-title {
    font-family: var(--font-work-sans);
    font-size: 20px;
    font-weight: 500;
    color: var(--color-dark);
    line-height: 1.2;
}

.category-count {
    font-weight: 400;
    color: var(--color-text);
}

.category-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
    /*max-height: 112px; !* 4 items × 28px (24px line + 4px gap) *!*/
    /*overflow: hidden;*/
    /*transition: max-height 0.3s ease;*/
}

/*.category-links.expanded {*/
/*    max-height: none;*/
/*}*/

.category-links li.hidden {
    display: none;
}

.category-links.expanded li.hidden {
    display: list-item;
}

.category-links li a {
    font-family: var(--font-work-sans);
    font-size: 16px;
    font-weight: 400;
    color: var(--color-text);
    text-decoration: none;
    display: block;
    line-height: 1.5;
    transition: color 0.2s ease;
}

.category-links li a:hover {
    color: var(--color-dark);
}

.show-more-btn {
    font-family: var(--font-work-sans);
    font-size: 16px;
    font-weight: 500;
    color: var(--color-dark);
    text-decoration: underline;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-top: 12px;
    text-align: left;
    display: inline-block;
    align-self: flex-start;
}

.show-more-btn:hover {
    color: var(--color-yellow);
}

/* Samples Popular Section */
.samples-popular {
    padding: 120px 0;
    background-color: var(--color-white);
}

.samples-popular-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.samples-popular-heading {
    text-align: center;
    margin-bottom: 56px;
}

.samples-popular-heading h2 {
    font-family: var(--font-fraunces);
    font-size: 48px;
    font-weight: 900;
    color: var(--color-dark);
    line-height: 1.2;
    margin-bottom: 24px;
    font-variation-settings: 'SOFT' 0, 'WONK' 1;
}

.samples-popular-heading p {
    font-family: var(--font-work-sans);
    font-size: 20px;
    font-weight: 400;
    color: var(--color-text);
    line-height: 1.4;
    max-width: 682px;
    margin: 0 auto;
}

/* Topics Grid */
.samples-topics-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    max-width: 1236px;
    margin: 0 auto;
}

/* Topic Pill */
.topic-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 294px;
    height: 44px;
    padding: 10px 20px;
    background-color: var(--color-yellow-light);
    border: 1px solid var(--color-yellow);
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.topic-pill:hover {
    background-color: var(--color-yellow);
}

.topic-pill:hover svg path,
.topic-pill:hover svg circle,
.topic-pill:hover svg rect,
.topic-pill:hover svg polygon {
    fill: white;
}

.topic-pill span {
    font-family: var(--font-work-sans);
    font-size: 16px;
    font-weight: 400;
    color: var(--color-dark);
}

.topic-arrow {
    width: 21px;
    height: 15px;
    flex-shrink: 0;
    object-fit: contain;
}

/* Samples CTA Order Section */
.samples-cta-order {
    padding: 0 0 120px;
}

.samples-cta-order-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.samples-cta-order-card {
    background-color: var(--color-bg-blue);
    border-radius: 24px;
    padding: 48px;
    text-align: center;
}

.samples-cta-order-card h2 {
    font-family: var(--font-fraunces);
    font-size: 48px;
    font-weight: 900;
    color: var(--color-dark);
    line-height: 1.2;
    margin-bottom: 16px;
    font-variation-settings: 'SOFT' 0, 'WONK' 1;
}

.samples-cta-order-card p {
    font-family: var(--font-work-sans);
    font-size: 16px;
    font-weight: 400;
    color: var(--color-text);
    line-height: 1.5;
    margin-bottom: 24px;
    max-width: 682px;
    margin-left: auto;
    margin-right: auto;
}

.samples-cta-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
}

.samples-cta-buttons .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 32px;
    background-color: var(--color-yellow);
    border-radius: 50px;
    font-family: var(--font-work-sans);
    font-size: 16px;
    font-weight: 500;
    color: var(--color-dark);
    text-decoration: none;
    transition: all 0.2s ease;
}

.samples-cta-buttons .btn-primary:hover {
    background-color: #e5ae14;
}

.btn-secondary-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 32px;
    background-color: transparent;
    border: 1px solid var(--color-dark);
    border-radius: 50px;
    font-family: var(--font-work-sans);
    font-size: 16px;
    font-weight: 500;
    color: var(--color-dark);
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-secondary-outline:hover {
    background-color: var(--color-dark);
    color: var(--color-white);
}

/* CTA Footer Dialog Bubble */
.cta-footer-dialog {
    position: absolute;
    top: -60px;
    right: 60px;
    transform: rotate(7.247deg);
}

.cta-footer-dialog .dialog-bubble {
    width: 140px;
    height: auto;
}

/* ==========================================
   SERVICE RELATED SECTION
   ========================================== */
.service-related {
    padding: 120px 0;
    background-color: var(--color-white);
}

.service-related-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.service-related-heading {
    text-align: center;
    margin-bottom: 56px;
}

.service-related-heading h2 {
    font-family: var(--font-fraunces);
    font-size: 48px;
    font-weight: 900;
    color: var(--color-dark);
    line-height: 1.2;
    margin-bottom: 24px;
    font-variation-settings: 'SOFT' 0, 'WONK' 1;
}

.service-related-heading p {
    font-family: var(--font-work-sans);
    font-size: 20px;
    font-weight: 400;
    color: var(--color-text);
    line-height: 1.4;
}

.service-related-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    max-width: 1300px;
    margin: 0 auto;
}

.service-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 309px;
    height: 44px;
    padding: 10px 20px;
    background-color: var(--color-yellow-light);
    border: 1px solid var(--color-yellow);
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.service-pill:hover {
    background-color: var(--color-yellow);
}
.service-pill:hover svg path {
    fill: #fff;
}

.service-pill span {
    font-family: var(--font-work-sans);
    font-size: 16px;
    font-weight: 400;
    color: var(--color-dark);
}

.service-arrow {
    width: 21px;
    height: 15px;
    flex-shrink: 0;
    object-fit: contain;
}

/* ==========================================
   SAMPLES PAGE RESPONSIVE STYLES
   ========================================== */
@media (width >= 1300px) {
    .samples-hero-container,
    .samples-latest-container,
    .samples-categories-container,
    .samples-popular-container,
    .samples-cta-order-container {
        padding: 0 80px;
    }
}

@media (width >= 768px) and (width <= 1299px) {
    .samples-categories-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 32px;
    }

    .samples-hero-content h1 {
        font-size: 48px;
    }

    .samples-categories-heading h2,
    .samples-popular-heading h2,
    .samples-cta-order-card h2 {
        font-size: 40px;
    }
}

@media (width >= 768px) and (width <= 1299px) {
    .samples-categories-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px;
    }

    .samples-topics-grid {
        gap: 16px;
    }

    .topic-pill {
        width: calc(50% - 8px);
    }

    .samples-hero-container,
    .samples-latest-container,
    .samples-categories-container,
    .samples-popular-container,
    .samples-cta-order-container {
        padding: 0 40px;
    }
}

@media (width <= 767px) {
    .samples-categories-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .samples-hero-content h1 {
        font-size: 36px;
    }

    .samples-categories-heading h2,
    .samples-popular-heading h2,
    .samples-cta-order-card h2 {
        font-size: 32px;
    }

    .samples-hero-text p,
    .samples-categories-heading p,
    .samples-popular-heading p {
        font-size: 16px;
    }

    .topic-pill {
        width: 100%;
    }

    .samples-cta-buttons {
        flex-direction: column;
        align-items: center;
    }

    .samples-cta-buttons .btn-primary,
    .btn-secondary-outline {
        width: 100%;
        max-width: 300px;
    }

    .samples-hero-container,
    .samples-latest-container,
    .samples-categories-container,
    .samples-popular-container,
    .samples-cta-order-container {
        padding: 24px;
    }

    .samples-categories,
    .samples-popular,
    .samples-cta-order {
        padding: 0;
    }

    .samples-cta-order-card {
        padding: 32px 24px;
    }

    .category-links {
        max-height: 140px;
    }
}

@media (width <= 767px) {
    .samples-hero-content h1 {
        font-size: 28px;
    }

    .samples-categories-heading h2,
    .samples-popular-heading h2,
    .samples-cta-order-card h2 {
        font-size: 24px;
    }

    .category-title {
        font-size: 18px;
    }

    .category-links li a {
        font-size: 14px;
    }

    .category-links {
        max-height: 150px;
    }
}

/* ==========================================
   SERVICE PAGE - BUY ESSAY
   ========================================== */

/* ==========================================
   SERVICE HERO SECTION
   ========================================== */
.service-hero {
    background-color: var(--color-white);
    padding: 20px var(--container-padding);
    min-height: 752px;
}

.service-hero-container {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 100px;
}

.service-hero-content {
    max-width: 586px;
    padding-top: 70px;
    display: flex;
    flex-direction: column;
    gap: 68px;
}

.service-hero-heading {
    display: flex;
    flex-direction: column;
    gap: 56px;
}

.service-hero-heading h1 {
    font-family: var(--font-fraunces);
    font-weight: 900;
    font-size: 56px;
    line-height: 1.2;
    color: var(--color-dark);
}

.service-hero-subtitle {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 20px;
    line-height: 1.4;
    color: var(--color-text);
}

.service-hero-cta {
    align-self: flex-start;
}

.service-hero-ratings {
    display: flex;
    gap: 32px;
    align-items: flex-start;
}

/* Service Hero Image Block */
.service-hero-image {
    position: relative;
    width: 614px;
    height: 712px;
    flex-shrink: 0;
}

.service-hero-image .hero-image-bg {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 618px;
    background-color: var(--color-bg-blue);
    border-radius: 36px 36px 0 0;
}

.service-hero-image .hero-woman-image {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom;
}

/* Stats Card */
.hero-stats-card {
    position: absolute;
    left: -69px;
    bottom: 206px;
    background: var(--color-white);
    border: 1px solid var(--color-yellow);
    border-radius: 24px;
    padding: 20px;
    display: flex;
    gap: 8px;
    z-index: 10;
    box-shadow: 0 4px 20px rgb(0 0 0 / 10%);
}

.hero-stats-card .stat-item {
    display: flex;
    flex-direction: column;
    line-height: 1.5;
}

.hero-stats-card .stat-item:first-child {
    padding-right: 8px;
    border-right: 1px solid var(--color-stroke);
}

.hero-stats-card .stat-value {
    font-family: var(--font-work-sans);
    font-weight: 500;
    font-size: 32px;
    color: var(--color-dark);
}

.hero-stats-card .stat-label {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    color: var(--color-dark);
}

/* No AI Card */
.hero-no-ai-card {
    position: absolute;
    right: 0;
    top: 88px;
    background: var(--color-white);
    border: 1px solid var(--color-yellow);
    border-radius: 24px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    z-index: 10;
    box-shadow: 0 4px 20px rgb(0 0 0 / 10%);
}

.no-ai-icon {
    width: 38px;
    height: 38px;
    background-color: #74aa9d;
    border-radius: 4px;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.no-ai-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.no-ai-text {
    display: flex;
    flex-direction: column;
    text-align: center;
    line-height: 1.5;
    font-size: 16px;
}

.no-ai-title {
    font-family: var(--font-work-sans);
    font-weight: 500;
    color: var(--color-dark);
}

.no-ai-subtitle {
    font-family: var(--font-work-sans);
    font-weight: 400;
    color: var(--color-text);
}

/* ==========================================
   FEATURES GRID SECTION
   ========================================== */
.features-section {
    background: linear-gradient(to bottom, #f9fafb, #fff);
    padding: 120px 0;
}

.features-container {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 48px;
    align-items: center;
}

.features-heading {
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.features-heading h2 {
    font-family: var(--font-fraunces);
    font-weight: 900;
    font-size: 48px;
    line-height: 1.2;
    color: var(--color-dark);
    white-space: pre-line;
}

.features-heading p {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 20px;
    line-height: 1.4;
    color: var(--color-dark);
}

.features-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    align-items: flex-start;
    width: 1300px;
    max-width: 100%;
    margin: 0 auto;
}

.feature-card {
    background: var(--color-white);
    border: 1px solid var(--color-yellow);
    border-radius: 24px;
    padding: 32px;
    width: 420px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.feature-icon-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.feature-icon {
    width: 110px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-icon img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.feature-card h3 {
    font-family: var(--font-fraunces);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.2;
    color: var(--color-dark);
    text-align: center;
}

.feature-card p {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
    text-align: center;
}

/* ==========================================
   TEXT + FREE FEATURES SECTION
   ========================================== */
.text-features-section {
    background-color: var(--color-white);
    padding: 0 var(--container-padding) 120px;
}

.text-features-container {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 109px;
}

.text-content {
    flex: 0 0 635px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.text-content h2 {
    font-family: var(--font-fraunces);
    font-weight: 900;
    font-size: 48px;
    line-height: 1.2;
    color: var(--color-dark);
}

.text-content p {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
}

/* Free Features Card */
.free-features-card {
    flex: 0 0 556px;
    border: 1px solid var(--color-yellow);
    border-radius: 24px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
}

.free-features-title {
    font-family: var(--font-fraunces);
    font-weight: 600;
    font-size: 32px;
    line-height: 1.3;
    color: var(--color-dark);
    text-align: center;
}

.free-features-title .strikethrough {
    text-decoration: line-through;
    color: var(--color-dark);
}

.free-features-title .free-badge {
    color: var(--color-green);
}

.features-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.feature-row {
    background-color: #fbfbfc;
    border-radius: 50px;
    padding: 4px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.original-price {
    background-color: var(--color-green);
    color: var(--color-white);
    font-family: var(--font-work-sans);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    padding: 4px 16px;
    border-radius: 50px;
    text-decoration: line-through;
    min-width: 95px;
    text-align: center;
}

.feature-name {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
    text-align: right;
}

.free-features-cta {
    width: 100%;
    text-align: center;
}

/* ==========================================
   VIDEO BLOCK SECTION
   ========================================== */
.video-section {
    background-color: var(--color-white);
    padding: 120px var(--container-padding);
    border-radius: 24px;
}

.video-container {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 102px;
}

.video-content {
    flex: 0 0 517px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.video-text {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.video-text h2 {
    font-family: var(--font-fraunces);
    font-weight: 900;
    font-size: 48px;
    line-height: 1.2;
    color: var(--color-dark);
}

.video-text p {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
}

.video-cta {
    width: 200px;
    height: 56px;
    text-align: center;
}

.video-thumbnail {
    position: relative;
    flex: 0 0 681px;
    height: 454px;
    background-color: var(--color-bg-blue);
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-wrapper {
    position: relative;
    flex: 0 0 681px;
    height: 454px;
    border-radius: 24px;
    overflow: hidden;
}

.video-wrapper iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.video-play-btn {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.video-play-btn:hover {
    transform: scale(1.1);
}

.video-play-btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ==========================================
   SERVICE PAGE RESPONSIVE STYLES
   ========================================== */
@media (width >= 1300px) {
    .service-hero {
        padding: 20px 80px;
    }

    .service-hero-container {
        gap: 60px;
    }


    .text-features-section {
        padding: 0 80px 120px;
    }

    .video-section {
        padding: 120px 80px;
    }
}

@media (width >= 768px) and (width <= 1299px) {
    .service-hero-container {
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }

    .service-hero-content {
        max-width: 100%;
        padding-top: 40px;
        align-items: center;
        text-align: center;
    }

    .service-hero-heading h1 {
        font-size: 48px;
    }

    .service-hero-cta {
        align-self: center;
    }

    .service-hero-ratings {
        justify-content: center;
        flex-wrap: wrap;
    }

    .service-hero-image {
        width: 100%;
        max-width: 500px;
        height: auto;
        aspect-ratio: 614/712;
    }

    .hero-stats-card {
        left: 0;
        bottom: 150px;
    }

    .hero-no-ai-card {
        right: 0;
        top: 0;
    }

    .features-grid {
        width: 100%;
        max-width: 860px;
    }

    .feature-card {
        width: 420px;
        max-width: calc(50% - 10px);
    }

    .text-features-container {
        flex-direction: column;
        gap: 40px;
    }

    .text-content {
        flex: none;
        width: 100%;
        text-align: center;
    }

    .free-features-card {
        flex: none;
        width: 100%;
        max-width: 556px;
    }

    .video-container {
        flex-direction: column;
        gap: 40px;
    }

    .video-content {
        flex: none;
        width: 100%;
        text-align: center;
        align-items: center;
    }

    .video-thumbnail {
        flex: none;
        width: 100%;
        height: auto;
        aspect-ratio: 681/454;
    }

    .video-wrapper {
        flex: none;
        width: 100%;
        height: auto;
        aspect-ratio: 16/9;
    }
}

@media (width >= 768px) and (width <= 1299px) {
    .service-hero {
        padding: 20px 40px;
        min-height: auto;
    }

    .service-hero-heading h1 {
        font-size: 40px;
    }

    .service-hero-subtitle {
        font-size: 18px;
    }

    .features-section {
        padding: 80px 0;
    }

    .features-heading h2,
    .text-content h2,
    .video-text h2 {
        font-size: 36px;
    }

    .features-heading p {
        font-size: 18px;
    }

    .features-grid {
        padding: 0 20px;
    }

    .text-features-section {
        padding: 0 40px 80px;
    }

    .video-section {
        padding: 80px 40px;
    }

    .free-features-title {
        font-size: 28px;
    }
}

@media (width <= 767px) {
    .service-hero {
        padding: 20px;
    }

    .service-hero-heading h1 {
        font-size: 32px;
    }

    .service-hero-content {
        gap: 40px;
    }

    .service-hero-heading {
        gap: 32px;
    }

    .service-hero-ratings {
        gap: 20px;
    }

    .service-hero-image {
        max-width: 400px;
    }

    .hero-stats-card,
    .hero-no-ai-card {
        display: none;
    }

    .features-section {
        padding: 60px 0;
    }

    .features-grid {
        flex-direction: column;
        align-items: center;
        max-width: 100%;
        width: 100%;
        padding: 0 20px;
    }

    .feature-card {
        width: 100%;
        max-width: 420px;
    }

    .features-heading h2,
    .text-content h2,
    .video-text h2 {
        font-size: 28px;
    }

    .text-features-section {
        padding: 0 20px 60px;
    }

    .video-section {
        padding: 60px 20px;
    }

    .free-features-title {
        font-size: 24px;
    }
}

@media (width <= 767px) {
    .service-hero-heading h1 {
        font-size: 28px;
    }

    .service-hero-subtitle {
        font-size: 16px;
    }

    .service-hero-ratings {
        flex-direction: column;
        align-items: center;
    }

    .features-heading h2,
    .video-text h2 {
        font-size: 24px;
    }

    .feature-card h3 {
        font-size: 20px;
    }
}

/* ==========================================
   ESSAY CATEGORY PAGE STYLES
   ========================================== */

/* Breadcrumb Navigation */
.breadcrumb {
    padding: 24px var(--container-padding) 0;
    max-width: 1300px;
    margin: 0 auto;
}

.breadcrumb-list {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    font-family: var(--font-work-sans);
    font-size: 20px;
    line-height: 1.4;
}

.breadcrumb-list a {
    color: var(--color-text);
    transition: color 0.2s ease;
}

.breadcrumb-list a:hover {
    color: var(--color-dark);
}

.breadcrumb-list .current {
    color: var(--color-dark);
}

.breadcrumb-list .separator {
    color: var(--color-text);
}

/* Essay Category Hero Section */
.essay-category-hero {
    padding: 70px var(--container-padding);
    max-width: 1300px;
    margin: 0 auto;
}

.essay-category-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    max-width: 1300px;
    margin: 0 auto;
}

.essay-category-content {
    flex: 0 0 616px;
    max-width: 616px;
    display: flex;
    flex-direction: column;
    gap: 56px;
}

.essay-category-heading {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.essay-category-heading h1 {
    font-family: var(--font-fraunces);
    font-weight: 900;
    font-size: 56px;
    line-height: 1.2;
    color: var(--color-dark);
    font-variation-settings: 'SOFT' 0, 'WONK' 1;
}

.essay-category-description {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.essay-category-description p {
    font-family: var(--font-work-sans);
    font-size: 20px;
    line-height: 1.4;
    color: var(--color-text);
}

.essay-category-description strong {
    font-weight: 500;
    color: var(--color-dark);
}

.essay-category-count h2 {
    font-family: var(--font-fraunces);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.2;
    color: var(--color-dark);
    margin-bottom: 12px;
    font-variation-settings: 'SOFT' 0, 'WONK' 1;
}

.essay-category-count p {
    font-family: var(--font-work-sans);
    font-size: 20px;
    line-height: 1.4;
    color: var(--color-text);
}

/* Sidebar */
.essay-category-sidebar {
    flex: 0 0 583px;
    max-width: 583px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* Related Topics Card */
.related-topics-card {
    padding: 24px;
    background: var(--color-white);
    border: 1px solid var(--color-yellow);
    border-radius: 24px;
}

.related-topics-card h3 {
    font-family: var(--font-fraunces);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.2;
    color: var(--color-dark);
    margin-bottom: 24px;
    font-variation-settings: 'SOFT' 0, 'WONK' 1;
}

.related-topics-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.topic-tag {
    padding: 10px 20px;
    background: var(--color-yellow-light);
    border: 1px solid var(--color-yellow);
    border-radius: 50px;
    font-family: var(--font-work-sans);
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
    transition: background 0.3s ease;
}

.topic-tag:hover {
    background: var(--color-yellow);
}

/* Plagiarism Checker Card */
.plagiarism-checker-card {
    padding: 24px;
    background: var(--color-yellow-light);
    border: 1px solid var(--color-yellow);
    border-radius: 24px;
}

.plagiarism-checker-content {
    display: flex;
    align-items: center;
    gap: 24px;
}

.plagiarism-icon {
    width: 61px;
    height: 61px;
    flex-shrink: 0;
}

.plagiarism-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.plagiarism-text h3 {
    font-family: var(--font-fraunces);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.2;
    color: var(--color-dark);
    margin-bottom: 16px;
    font-variation-settings: 'SOFT' 0, 'WONK' 1;
}

.check-link {
    font-family: var(--font-work-sans);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
    text-decoration: underline;
    transition: color 0.2s ease;
}

.check-link:hover {
    color: var(--color-text);
}

/* Blue CTA Section */
.cta-blue-section {
    padding: 0 var(--container-padding) 71px;
    max-width: 1300px;
    margin: 0 auto;
}

.cta-blue-container {
    max-width: 1300px;
    margin: 0 auto;
}

.cta-blue-card {
    background-color: var(--color-bg-blue);
    border-radius: 24px;
    padding: 48px;
    text-align: center;
}

.cta-blue-card h2 {
    font-family: var(--font-fraunces);
    font-size: 48px;
    font-weight: 900;
    color: var(--color-dark);
    line-height: 1.2;
    margin-bottom: 16px;
    font-variation-settings: 'SOFT' 0, 'WONK' 1;
}

.cta-blue-card p {
    font-family: var(--font-work-sans);
    font-size: 16px;
    font-weight: 400;
    color: var(--color-text);
    line-height: 1.5;
    margin-bottom: 24px;
    max-width: 682px;
    margin-left: auto;
    margin-right: auto;
}

.cta-blue-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
}

/* Essay SEO Content Section */
.essay-seo-content {
    padding: 0 var(--container-padding) 71px;
    max-width: 1300px;
    margin: 0 auto;
}

.essay-seo-container {
    max-width: 1300px;
    margin: 0 auto;
}

.essay-seo-content h2 {
    font-family: var(--font-fraunces);
    font-size: 28px;
    line-height: 1.3;
    color: var(--color-dark);
    margin-bottom: 24px;
    font-variation-settings: 'SOFT' 0, 'WONK' 1;
    font-weight: bold;
}

.essay-seo-content h3{
    font-family: var(--font-work-sans);
    font-size: 20px;
    line-height: 1.4;
    color: var(--color-dark);
    font-weight: bold;
}

.essay-seo-content h4{
    font-weight: bold;
}

.essay-seo-text {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-text);
}

.essay-seo-text .desc{
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.essay-seo-text p {
    margin-bottom: 0;
}

.essay-seo-text p:last-child {
    margin-bottom: 0;
}

.essay-seo-text a{
    color: #e8b314;
}

.essay-seo-text a:hover{
    text-decoration: underline;
}

/* CTA Talk Section (Yellow variant) */
.cta-talk-section {
    padding: 60px var(--container-padding) 80px;
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

.cta-talk-card {
    width: 100%;
    max-width: 1300px;
    padding: 48px;
    background: var(--color-yellow-light);
    border: 1px solid var(--color-yellow);
    border-radius: 24px;
    position: relative;
    overflow: visible;
    min-height: 200px;
}

.cta-talk-content {
    max-width: 600px;
}

.cta-talk-card h2 {
    font-family: var(--font-fraunces);
    font-weight: 900;
    font-size: 48px;
    line-height: 1.2;
    color: var(--color-dark);
    margin-bottom: 24px;
    font-variation-settings: 'SOFT' 0, 'WONK' 1;
}

.cta-talk-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cta-talk-input-group {
    display: flex;
    gap: 16px;
}

.cta-talk-input-wrapper {
    flex: 0 0 414px;
    max-width: 414px;
}

.cta-talk-input {
    width: 100%;
    height: 100%;
    padding: 10px 14px;
    background: var(--color-white);
    border: 1px solid var(--color-yellow);
    border-radius: 50px;
    font-family: var(--font-work-sans);
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cta-talk-input::placeholder {
    color: var(--color-text);
}

.cta-talk-input:focus {
    border-color: var(--color-dark);
    box-shadow: 0 0 0 2px rgb(250 193 21 / 30%);
}

.cta-talk-btn {
    padding: 16px 32px;
    background: var(--color-yellow);
    border-radius: 50px;
    font-family: var(--font-work-sans);
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
}

.cta-talk-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgb(250 193 21 / 40%);
}

.cta-talk-hint {
    font-family: var(--font-work-sans);
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
}

.cta-talk-image {
    position: absolute;
    right: 154px;
    bottom: 0;
    width: 441px;
    height: 403px;
    pointer-events: none;
}

.cta-talk-person {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: bottom;
}

.cta-talk-dialog {
    position: absolute;
    top: -40px;
    right: 500px;
    transform: rotate(7.247deg);
}

.cta-talk-dialog .dialog-bubble {
    width: 129px;
    height: auto;
}

/* ==========================================
   ESSAY CATEGORY PAGE RESPONSIVE STYLES
   ========================================== */
@media (width >= 1300px) {
    .breadcrumb,
    .essay-category-hero,
    .cta-blue-section,
    .essay-seo-content,
    .cta-talk-section {
        padding-left: 80px;
        padding-right: 80px;
        padding-left: 0;
        padding-right: 0;
    }
}

@media (width >= 768px) and (width <= 1299px) {
    .essay-category-container {
        flex-direction: column;
    }

    .essay-category-content,
    .essay-category-sidebar {
        flex: none;
        max-width: 100%;
        width: 100%;
    }

    .essay-category-heading h1 {
        font-size: 48px;
    }

    .cta-blue-card h2,
    .essay-seo-content h2,
    .cta-talk-card h2 {
        font-size: 40px;
    }

    .cta-talk-image {
        right: 50px;
        width: 350px;
    }

    .cta-talk-dialog {
        right: 350px;
    }
}

@media (width >= 768px) and (width <= 1299px) {
    .breadcrumb,
    .essay-category-hero,
    .cta-blue-section,
    .essay-seo-content,
    .cta-talk-section {
        padding-left: 40px;
        padding-right: 40px;
    }

    .breadcrumb-list {
        font-size: 16px;
    }

    .essay-category-description p,
    .essay-category-count p,
    .essay-seo-text {
        font-size: 16px;
    }

    .cta-talk-card {
        padding-bottom: 280px;
    }

    .cta-talk-content {
        max-width: 100%;
    }

    .cta-talk-image {
        position: absolute;
        right: 50%;
        transform: translateX(50%);
        top: auto;
        bottom: -50px;
        width: 350px;
        height: 300px;
    }

    .cta-talk-dialog {
        display: none;
    }
}

@media (width <= 767px) {
    .breadcrumb,
    .essay-category-hero,
    .cta-blue-section,
    .essay-seo-content,
    .cta-talk-section {
        padding-left: 20px;
        padding-right: 20px;
    }

    .essay-category-heading h1 {
        font-size: 36px;
    }

    .essay-category-count h2 {
        font-size: 20px;
    }

    .cta-blue-card h2,
    .essay-seo-content h2,
    .cta-talk-card h2 {
        font-size: 32px;
    }

    .related-topics-tags {
        gap: 12px;
    }

    .topic-tag {
        padding: 8px 16px;
        font-size: 14px;
    }

    .cta-talk-input-group {
        flex-direction: column;
    }

    .cta-talk-input-wrapper {
        flex: none;
        max-width: 100%;
    }

    .cta-blue-buttons {
        flex-direction: column;
        align-items: center;
    }

    .cta-blue-buttons .btn-primary,
    .cta-blue-buttons .btn-secondary-outline {
        width: 100%;
        max-width: 300px;
    }

    .cta-talk-card {
        padding: 32px 24px;
        padding-bottom: 250px;
    }

    .cta-talk-image {
        width: 280px;
        height: 250px;
    }
}

@media (width <= 767px) {
    .essay-category-heading h1 {
        font-size: 28px;
    }

    .cta-blue-card h2,
    .essay-seo-content h2,
    .cta-talk-card h2 {
        font-size: 24px;
    }

    .essay-category-content {
        gap: 32px;
    }

    .breadcrumb-list {
        font-size: 14px;
        flex-wrap: wrap;
    }

    .cta-talk-image {
        width: 220px;
        height: 200px;
    }
}

/* ==========================================
   BLOG PAGE STYLES
   ========================================== */

/* Blog Hero Section */
.blog-hero {
    background-color: var(--color-white);
    padding: 70px var(--container-padding);
}

.blog-hero-container {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.blog-hero-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    text-align: center;
    width: 100%;
}

.blog-hero-title {
    font-family: var(--font-fraunces);
    font-weight: 900;
    font-size: 56px;
    line-height: 1.2;
    color: var(--color-dark);
    margin: 0;
}

.blog-hero-subtitle {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 20px;
    line-height: 1.4;
    color: var(--color-text);
    margin: 0;
}

.blog-hero-search {
    display: flex;
    gap: 16px;
    align-items: center;
}

.blog-search-input-wrapper {
    width: 414px;
}

.blog-search-input {
    width: 100%;
    height: 56px;
    padding: 10px 14px;
    border: 1px solid var(--color-yellow);
    border-radius: 50px;
    font-family: var(--font-work-sans);
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
    background-color: var(--color-white);
    outline: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.blog-search-input::placeholder {
    color: var(--color-text);
}

.blog-search-input:focus {
    border-color: var(--color-yellow);
    box-shadow: 0 0 0 3px rgb(250 193 21 / 20%);
}

.blog-search-btn {
    background-color: var(--color-yellow);
    color: var(--color-dark);
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    padding: 16px 32px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.blog-search-btn:hover {
    background-color: #e8b314;
    transform: translateY(-2px);
}

/* Blog Content Section */
.blog-content {
    padding: 0 var(--container-padding) 70px;
}

.blog-content-container {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    gap: 32px;
    align-items: flex-start;
}

/* Blog Main (Articles Grid) */
.blog-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
}

.blog-articles-grid {
    display: grid;
    grid-template-columns: repeat(2, 420px);
    gap: 20px;
    justify-content: center;
}

/* Blog Article Card */
.blog-article-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-yellow);
    border-radius: 10px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 420px;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.blog-article-card:hover {
    box-shadow: 0 8px 24px rgb(250 193 21 / 15%);
    transform: translateY(-4px);
}

.blog-article-image {
    display: block;
    width: 372px;
    height: 200px;
    border-radius: 10px;
    overflow: hidden;
}

.blog-article-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.blog-article-image:hover img {
    transform: scale(1.05);
}

.blog-article-info {
    display: flex;
    flex-direction: column;
    gap: 26px;
    width: 100%;
}

.blog-article-text {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f4f6f8;
}

.blog-article-title-link {
    text-decoration: none;
}

.blog-article-title {
    font-family: var(--font-fraunces);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.2;
    color: var(--color-dark);
    margin: 0;
    transition: color 0.3s ease;
}

.blog-article-title-link:hover .blog-article-title {
    color: var(--color-yellow);
}

.blog-article-excerpt {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-text);
    margin: 0;
}

.blog-article-meta {
    display: flex;
    gap: 16px;
    align-items: center;
}

.blog-article-author,
.blog-article-date {
    display: flex;
    gap: 8px;
    align-items: center;
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-dark);
}

.blog-article-author .meta-icon,
.blog-article-date .meta-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.blog-article-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
    text-decoration: none;
    transition: color 0.3s ease;
}

.blog-article-link:hover {
    color: var(--color-yellow);
}

.blog-article-link .link-arrow {
    width: 16px;
    height: auto;
    transition: transform 0.3s ease;
}

.blog-article-link:hover .link-arrow {
    transform: translateX(4px);
}

/* Blog More Button */
.blog-more-wrapper {
    display: flex;
    justify-content: center;
}

.blog-more-btn {
    background-color: var(--color-yellow);
    color: var(--color-dark);
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    padding: 16px 48px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.blog-more-btn:hover {
    background-color: #e8b314;
    transform: translateY(-2px);
}

/* Blog Sidebar */
.blog-sidebar {
    width: 356px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* Blog Categories Box */
.blog-categories {
    background-color: var(--color-white);
    border: 1px solid var(--color-stroke);
    border-radius: 8px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.blog-categories-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.blog-categories-title {
    font-family: var(--font-fraunces);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.2;
    color: var(--color-navy-blue);
    margin: 0;
    text-align: center;
}

.blog-categories-divider {
    width: 100%;
    height: 1px;
    background-color: #dcddec;
}

.blog-categories-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.blog-categories-select {
    display: none;
    width: 100%;
    padding: 12px 20px;
    padding-right: 48px;
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
    background-color: var(--color-white);
    border: 1px solid #e1e1e1;
    border-radius: 24px;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 4.5L6 8L9.5 4.5' stroke='%23585e65' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 20px center;
    transition: border-color 0.3s ease;
}

.blog-categories-select:focus {
    border-color: var(--color-yellow);

    /* Global focus outline applies from line 87-94 */
}

.blog-category-item {
    font-family: var(--font-manrope);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-navy-blue);
    padding: 4px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.blog-category-item:hover {
    background-color: rgb(255 251 238 / 50%);
}

.blog-category-item.active {
    background-color: var(--color-yellow-light);
    padding: 8px 12px;
}

/* Blog CTA Card */
.blog-cta-card {
    background-color: var(--color-yellow-light);
    border: 1px solid var(--color-yellow);
    border-radius: 24px;
    padding: 48px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.blog-cta-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 100%;
}

.blog-cta-title {
    font-family: var(--font-fraunces);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.2;
    color: var(--color-dark);
    text-align: center;
    margin: 0;
}

.blog-cta-btn {
    width: 100%;
    background-color: var(--color-yellow);
    color: var(--color-dark);
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    padding: 16px 32px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    display: block;
    transition: all 0.3s ease;
}

.blog-cta-btn:hover {
    background-color: #e8b314;
    transform: translateY(-2px);
}

/* Blog Page Responsive Styles */
@media (width >= 1300px) {
    .blog-hero {
        padding: 60px 80px;
    }

    .blog-content {
        padding: 0 80px 60px;
    }
}

@media (width >= 1300px) {
    .blog-articles-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .blog-article-card {
        width: 100%;
    }

    .blog-article-image {
        width: 100%;
    }
}

@media (width >= 768px) and (width <= 1299px) {
    .blog-content-container {
        flex-direction: column;
    }

    .blog-sidebar {
        width: 100%;
        flex-flow: row wrap;
        gap: 24px;
    }

    .blog-categories {
        flex: 1;
        min-width: 300px;
    }

    .blog-cta-card {
        flex: 1;
        min-width: 300px;
    }
}

@media (width >= 768px) and (width <= 1299px) {
    .blog-hero-title {
        font-size: 42px;
    }

    .blog-hero-subtitle {
        font-size: 18px;
    }

    .blog-hero-search {
        flex-direction: column;
        width: 100%;
        max-width: 500px;
    }

    .blog-search-input-wrapper {
        width: 100%;
    }

    .blog-search-btn {
        width: 100%;
    }

    .blog-articles-grid {
        grid-template-columns: 1fr;
    }
}

@media (width <= 767px) {
    .blog-hero {
        padding: 40px 24px;
    }

    .blog-content {
        padding: 0 24px 40px;
    }

    .blog-hero-title {
        font-size: 32px;
    }

    .blog-hero-subtitle {
        font-size: 16px;
    }

    .blog-sidebar {
        flex-direction: column;
        order: -1;
    }

    .blog-categories {
        min-width: 100%;
        padding: 0;
        border: none;
        background: transparent;
    }

    .blog-categories-header {
        display: none;
    }

    .blog-categories-list {
        display: none;
    }

    .blog-categories-select {
        display: block;
    }

    .blog-cta-card {
        min-width: 100%;
    }

    .blog-article-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

@media (width <= 767px) {
    .blog-hero-title {
        font-size: 28px;
    }

    .blog-article-title {
        font-size: 20px;
    }

    .blog-categories-title,
    .blog-cta-title {
        font-size: 20px;
    }

    .blog-article-card {
        padding: 16px;
    }
}

/* ==========================================
   BLOG ARTICLE PAGE STYLES
   ========================================== */

/* Breadcrumbs */
.breadcrumbs {
    background-color: var(--color-white);
    padding: 24px var(--container-padding) 0;
    width: 100%;
}

.breadcrumbs-container {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.breadcrumb-item {
    font-family: var(--font-work-sans);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-text);
    transition: color 0.2s ease;
}

.breadcrumb-item:hover:not(.current) {
    color: var(--color-yellow);
}

.breadcrumb-item.current {
    color: var(--color-dark);
    pointer-events: none;
}

.breadcrumb-separator {
    font-family: var(--font-work-sans);
    font-size: 16px;
    color: var(--color-text);
}

/* Article Page Layout */
.article-page {
    background-color: var(--color-white);
    padding: 48px var(--container-padding) 80px;
    width: 100%;
}

.article-container {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    gap: 32px;
    align-items: flex-start;
}

/* Article Main Content */
.article-main {
    flex: 1;
    max-width: 860px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.article-title {
    font-family: var(--font-fraunces);
    font-size: 28px;
    line-height: 1.3;
    color: var(--color-dark);
    margin: 0;
    font-variation-settings: 'SOFT' 0, 'WONK' 1;
    font-weight: bold;
}

.article-hero-image {
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
}

.article-hero-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Article Meta (inside article main content) */
.article-main .article-meta {
    display: flex;
    align-items: center;
    gap: 24px;
}

.article-meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.article-meta-item .meta-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.article-meta-item span {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-text);
}

/* Article Body */
.article-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.article-body #ez-toc-container{
    display: none;
}

.article-body h2 {
    font-family: var(--font-fraunces);
    font-size: 28px;
    line-height: 1.3;
    color: var(--color-dark);
    margin: 24px 0 0;
    font-variation-settings: 'SOFT' 0, 'WONK' 1;
    scroll-margin-top: 120px;
    font-weight: bold;
}

.article-body h3 {
    font-family: var(--font-work-sans);
    font-size: 20px;
    line-height: 1.4;
    color: var(--color-dark);
    margin: 16px 0 0;
    font-weight: bold;
}

.article-body h4{
    font-weight: bold;
}

.article-body p {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-text);
    margin: 0;
}

.article-body ul {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-text);
    margin: 0;
    padding-left: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.article-body ul li {
    padding-left: 8px;
}

.article-body ol li{
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-text);
}
.article-body ol li:not(:first-child){
    margin-top: 8px;
}

.article-body a{
    color: #e8b314;
}
.article-body a:hover{
    text-decoration: underline;
}

.article-example {
    background-color: var(--color-gray-bg);
    padding: 16px 20px;
    border-radius: 8px;
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-dark);
    border-left: 3px solid var(--color-yellow);
}

/* Article Tables */
.article-table-wrapper {
    width: 100%;
    overflow-x: auto;
    margin: 16px 0;
}

.article-table {
    width: 100%;
    border-collapse: collapse;
}

.article-table th,
.article-table td {
    padding: 8px 16px;
    text-align: center;
    font-family: var(--font-work-sans);
    font-size: 16px;
    line-height: 1.5;
    border: 1px solid var(--color-yellow);
    color: var(--color-dark);
}

.article-table th {
    background-color: var(--color-yellow-light);
    font-weight: 500;
    font-size: 20px;
    line-height: 1.2;
}

.article-table td {
    font-weight: 400;
}

/* Two column table */
.article-table:not(.article-table-3col) th,
.article-table:not(.article-table-3col) td {
    width: 50%;
    text-align: center;
}

/* Three column table */
.article-table-3col th,
.article-table-3col td {
    text-align: left;
    vertical-align: top;
}

.article-table-3col th:first-child,
.article-table-3col td:first-child {
    width: 22%;
    font-weight: 600;
}

.article-table-3col th:nth-child(2),
.article-table-3col td:nth-child(2) {
    width: 24%;
}

.article-table-3col th:last-child,
.article-table-3col td:last-child {
    width: 54%;
}

/* Article Note */
.article-note {
    background-color: var(--color-yellow-light);
    padding: 16px 20px;
    border-radius: 8px;
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-dark);
    margin: 8px 0;
}

.article-note strong {
    font-weight: 500;
    color: var(--color-dark);
}

/* Article CTA Banner */
.article-cta-banner {
    background-color: var(--color-yellow-light);
    padding: 40px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    text-align: center;
    margin: 24px 0;
}

.article-cta-heading {
    font-family: var(--font-fraunces);
    font-weight: 600;
    font-size: 28px;
    line-height: 1.3;
    color: var(--color-dark);
    margin: 0;
    font-variation-settings: 'SOFT' 0, 'WONK' 1;
}

.article-cta-text {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text);
    margin: 0;
    max-width: 600px;
}

.article-cta-button {
    background-color: var(--color-yellow);
    color: var(--color-dark);
    font-family: var(--font-work-sans);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    padding: 16px 32px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-top: 8px;
}

.article-cta-button:hover {
    background-color: #e8b314;
    transform: translateY(-2px);
}

/* Article Author Card */
.article-author-card {
    border: 1px solid var(--color-yellow);
    border-radius: 24px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 19px;
    margin-top: 24px;
    background: #fff;
}

.author-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    align-items: flex-start;
}

.author-card-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.author-avatar {
    position: relative;
    flex-shrink: 0;
    width: 96px;
    height: 96px;
}

.author-avatar img:first-child {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
}

.author-verified {
    position: absolute;
    bottom: 0;
    left: 67px;
    width: 20px;
    height: 20px;
}

.author-name-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.author-name {
    font-family: var(--font-fraunces);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.2;
    color: var(--color-dark);
}

.author-name a:hover{
    text-decoration: underline;
    text-decoration-color: var(--color-yellow);
}

.author-title {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text);
}

.author-socials {
    display: flex;
    gap: 16px;
}

.author-socials__rate{
    background: rgba(235, 237, 240, 0.2);
    border-radius: 10px;
    padding: 4px 16px;
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    color: var(--color-text);
    font-weight: 500;
}
.author-socials__rate-number{
    font-size: 18px;
    font-weight: bold;
    color: #16a149;
}

.author-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
}

.author-social-link img {
    width: 20px;
    height: 20px;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.author-social-link:hover img {
    opacity: 1;
}

.author-bio {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
    margin: 0;
}

.author-hire-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 32px;
    background-color: var(--color-yellow);
    border-radius: 50px;
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
    text-decoration: none;
    transition: all 0.2s ease;
    align-self: flex-start;
}

.author-hire-btn:hover {
    background-color: #e5ad12;
}

/* Article Sidebar */
.article-sidebar {
    width: 408px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 110px;
}

/* Sidebar - Table of Contents */
.sidebar-toc {
    border: 1px solid var(--color-stroke);
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.toc-header {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toc-title {
    font-family: var(--font-fraunces);
    font-weight: 500;
    font-size: 24px;
    line-height: 1.4;
    color: var(--color-dark);
    margin: 0;
}

.toc-divider {
    height: 1px;
    background-color: var(--color-stroke);
}

.sidebar-toc #ez-toc-container {
    background: transparent;
    border: none;
    border-radius: unset;
    box-shadow: none;
    display: table;
    margin-bottom: 0;
    padding: 0;
    position: relative;
    width: auto;
}

.sidebar-toc #ez-toc-container ul{
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar-toc #ez-toc-container ul li a{
    font-family: var(--font-manrope);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.4;
    color: var(--color-text);
    padding: 8px 10px;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.2s ease;
    display: block;
}
.sidebar-toc #ez-toc-container ul li a:hover{
    color: var(--color-dark);
    background-color: var(--color-gray-bg);
}

/* TOC Toggle - hidden on desktop */
.toc-toggle {
    display: none;
}

.toc-items {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.toc-item {
    font-family: var(--font-manrope);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.4;
    color: var(--color-text);
    padding: 8px 10px;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.toc-item:hover {
    color: var(--color-dark);
    background-color: var(--color-gray-bg);
}

.toc-item.active {
    color: var(--color-dark);
    background-color: var(--color-yellow-light);
}

/* Sidebar - Free Features Card (Override for sidebar) */
.sidebar-features-card {
    flex: none;
    width: 100%;
    padding: 24px;
    gap: 24px;
    border-radius: 16px;
}

.sidebar-features-card .free-features-title {
    font-size: 24px;
}

.sidebar-features-card .original-price {
    font-size: 14px;
    padding: 4px 12px;
    min-width: 80px;
}

.sidebar-features-card .feature-name {
    font-size: 14px;
}

/* Related Articles Section */
.related-articles {
    background-color: var(--color-white);
    padding: 80px var(--container-padding);
    width: 100%;
}

.related-articles-container {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
}

.related-heading {
    font-family: var(--font-fraunces);
    font-weight: 900;
    font-size: 48px;
    line-height: 1.2;
    color: var(--color-dark);
    text-align: center;
    margin: 0;
    font-variation-settings: 'SOFT' 0, 'WONK' 1;
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    width: 100%;
}

.related-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 40px;
    border: 1px solid var(--color-stroke);
    border-radius: 50px;
    font-family: var(--font-work-sans);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
    text-decoration: none;
    transition: all 0.2s ease;
}

.related-button:hover {
    background-color: var(--color-yellow);
    border-color: var(--color-yellow);
}

/* Blog Article Page Responsive */
@media (width >= 1300px) {
    .breadcrumbs {
        padding: 24px 80px 0;
    }

    .article-page {
        padding: 48px 80px 80px;
    }

    .related-articles {
        padding: 80px;
    }
}

@media (width >= 768px) and (width <= 1299px) {
    .article-container {
        flex-direction: column;
    }

    .article-main {
        max-width: 100%;
    }

    .article-sidebar {
        width: 100%;
        position: static;
        flex-flow: row wrap;
        gap: 24px;
    }

    .sidebar-toc {
        flex: 1;
        min-width: 300px;
    }

    .sidebar-features {
        flex: 1;
        min-width: 300px;
    }

    .related-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (width >= 768px) and (width <= 1299px) {
    .article-title {
        font-size: 36px;
    }

    .related-heading {
        font-size: 36px;
    }

    .related-grid {
        grid-template-columns: 1fr;
    }
}

@media (width <= 767px) {
    .breadcrumbs {
        padding: 20px 24px 0;
    }

    .article-page {
        padding: 32px 24px 60px;
    }

    .related-articles {
        padding: 60px 24px;
    }

    .article-title {
        font-size: 28px;
    }

    .article-body h2 {
        font-size: 22px;
    }

    .article-cta-banner {
        padding: 24px;
    }

    .article-cta-heading {
        font-size: 22px;
    }

    .article-author-card {
        padding: 20px;
    }

    .author-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .author-avatar,
    .author-avatar img:first-child {
        width: 72px;
        height: 72px;
    }

    .author-verified {
        left: 52px;
    }

    .author-name {
        font-size: 20px;
    }

    .sidebar-toc {
        gap: 0;
    }

    .sidebar-toc,
    .sidebar-features {
        min-width: 100%;
    }

    /* TOC Toggle - visible on mobile */
    .toc-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        background: transparent;
        border: none;
        cursor: pointer;
        color: var(--color-dark);
        padding: 0;
        flex-shrink: 0;
    }

    .toc-toggle svg {
        transition: transform 0.3s ease;
    }

    .toc-header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        margin: 0;
    }

    .toc-divider {
        display: none;
    }

    /* TOC Collapsed state (default on mobile) */
    .sidebar-toc .toc-items {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }

    /* TOC Expanded state */
    .sidebar-toc.expanded .toc-items {
        max-height: 500px;
    }

    .sidebar-toc.expanded .toc-toggle svg {
        transform: rotate(180deg);
    }

    /* Moved sidebar styles */
    .article-sidebar.sidebar-moved {
        margin-bottom: 24px;
    }

    .related-heading {
        font-size: 28px;
    }

    .article-card-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

@media (width <= 767px) {
    .breadcrumbs-container {
        flex-wrap: nowrap;
    }

    .breadcrumb-item {
        font-size: 14px;
    }

    .breadcrumb-item.current {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 200px;
    }

    .article-title {
        font-size: 24px;
    }

    .article-meta {
        flex-flow: row wrap;
        align-items: center;
        gap: 16px;
    }

    .article-meta-item span {
        font-size: 14px;
    }

    .article-meta-item .meta-icon {
        width: 16px;
        height: 16px;
    }

    .article-body h2 {
        font-size: 20px;
    }

    .article-table th,
    .article-table td {
        padding: 12px 16px;
        font-size: 14px;
    }

    .article-cta-button {
        width: 100%;
    }

    .features-price-crossed {
        font-size: 28px;
    }

    .features-price-free {
        font-size: 20px;
    }
}

/* ==========================================
   HOW IT WORKS PAGE SECTION (Standalone Page)
   ========================================== */
.how-it-works-page-section {
    background-color: var(--color-white);
    padding: 60px var(--container-padding) 120px;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
}

.how-it-works-page-container {
    width: 100%;
    max-width: 1300px;
    display: flex;
    flex-direction: column;
    gap: 56px;
    align-items: center;
}

.how-it-works-page-title {
    font-family: var(--font-fraunces);
    font-weight: 900;
    font-size: 56px;
    line-height: 1.2;
    color: var(--color-dark);
    text-align: center;
    margin: 0;
}

.how-it-works-page-content {
    display: flex;
    gap: 36px;
    align-items: center;
    width: 100%;
    justify-content: space-between;
}

/* Steps Container */
.how-it-works-steps-container {
    flex: 1;
    display: flex;
    gap: 35px;
    align-items: flex-start;
}

/* Progress Bar */
.how-it-works-progress-bar {
    width: 2px;
    height: 272px;
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-shrink: 0;
}

.how-it-works-progress-bar .progress-track {
    background-color: #add1ff;
    width: 2px;
    height: 100%;
    border-radius: 8px;
    position: relative;
}

.how-it-works-progress-bar .progress-fill {
    position: absolute;
    background-color: var(--color-dark);
    width: 2px;
    height: 25%;
    border-radius: 4px;
    top: 0;
    left: 0;
    transition: height 0.3s ease;
}

/* Steps */
.how-it-works-steps {
    display: flex;
    flex-direction: column;
    gap: 32px;
    flex: 1;
}

.how-it-works-step {
    display: flex;
    flex-direction: column;
    gap: 12px;
    color: var(--color-dark);
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0.5;
}

.how-it-works-step:hover {
    opacity: 0.8;
}

.how-it-works-step.active {
    opacity: 1;
}

.how-it-works-step .step-title {
    margin: 0;
    padding: 0;
}

.how-it-works-step .step-title ol {
    font-family: var(--font-fraunces);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.2;
    color: var(--color-dark);
    margin: 0;
    padding: 0;
    list-style-position: inside;
}

.how-it-works-step .step-title ol li {
    padding-left: 0;
}

.how-it-works-step .step-description {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
    margin: 0;
    width: 457px;
    max-width: 100%;
    display: none;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}

.how-it-works-step.active .step-description {
    display: block;
    opacity: 1;
    transform: translateY(0);
    animation: slide-down 0.3s ease forwards;
}

/* Form Preview */
.how-it-works-form-preview {
    position: relative;
    flex-shrink: 0;
    width: 618px;
}

.how-it-works-form-preview .form-preview-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 618px;
    height: 441px;
    background-color: var(--color-yellow);
    border-radius: 24px;
}

.how-it-works-form-preview .form-preview-card {
    position: relative;
    margin-left: 21px;
    margin-top: 21px;
    background-color: var(--color-white);
    border: 1px solid var(--color-yellow);
    border-radius: 24px;
    padding: 24px;
    width: 660px;
    overflow: hidden;
}

.how-it-works-form-preview .form-preview-card img {
    width: 100%;
    height: auto;
    border-radius: 7px;
    display: block;
}

/* Active nav link style */
.nav-link.active {
    color: var(--color-yellow);
    font-weight: 500;
}

.mobile-nav-link.active {
    color: var(--color-yellow);
    font-weight: 500;
}

/* How It Works Page Responsive */
@media (width >= 1300px) {
    .how-it-works-page-section {
        padding: 60px var(--container-padding) 80px;
    }

    .how-it-works-page-title {
        font-size: 48px;
    }

    .how-it-works-form-preview {
        width: 500px;
    }

    .how-it-works-form-preview .form-preview-bg {
        width: 500px;
        height: 360px;
    }

    .how-it-works-form-preview .form-preview-card {
        width: 540px;
    }
}

@media (width >= 768px) and (width <= 1299px) {
    .how-it-works-page-content {
        flex-direction: column;
        gap: 48px;
    }

    .how-it-works-steps-container {
        width: 100%;
        max-width: 600px;
    }

    .how-it-works-form-preview {
        width: 100%;
        max-width: 600px;
    }

    .how-it-works-form-preview .form-preview-bg {
        width: 100%;
        height: 340px;
    }

    .how-it-works-form-preview .form-preview-card {
        width: calc(100% + 20px);
        margin-left: 15px;
        margin-top: 15px;
    }
}

@media (width <= 767px) {
    .how-it-works-page-section {
        padding: 40px var(--container-padding) 60px;
    }

    .how-it-works-page-title {
        font-size: 32px;
    }

    .how-it-works-page-container {
        gap: 32px;
    }

    .how-it-works-steps-container {
        gap: 20px;
    }

    .how-it-works-steps {
        gap: 0;
    }

    .how-it-works-progress-bar {
        height: auto;
        min-height: 200px;
    }

    .how-it-works-step .step-title ol {
        font-size: 20px;
    }

    .how-it-works-step .step-description {
        font-size: 14px;
        width: 100%;
    }

    .how-it-works-form-preview .form-preview-bg {
        height: 280px;
    }

    .how-it-works-form-preview .form-preview-card {
        padding: 16px;
    }
}

@media (width <= 767px) {
    .how-it-works-page-title {
        font-size: 28px;
    }

    .how-it-works-steps-container {
        gap: 16px;
    }

    .how-it-works-progress-bar {
        display: none;
    }

    .how-it-works-step .step-title ol {
        font-size: 18px;
    }

    .how-it-works-form-preview .form-preview-bg {
        height: 220px;
    }

    .how-it-works-form-preview .form-preview-card {
        margin-left: 10px;
        margin-top: 10px;
        padding: 12px;
    }
}

/* ==========================================
   COUPONS PAGE STYLES
   ========================================== */

/* Coupons Hero Section */
.coupons-hero {
    background-color: var(--color-white);
    padding: 60px var(--container-padding);
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.coupons-hero-container {
    max-width: 1300px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.coupons-hero-title {
    font-family: var(--font-fraunces);
    font-weight: 900;
    font-size: 56px;
    line-height: 1.2;
    color: var(--color-dark);
    text-align: center;
    margin: 0;
}

.coupons-hero-subtitle {
    text-align: center;
}

.coupons-hero-subtitle p {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 20px;
    line-height: 1.4;
    color: var(--color-text);
    margin: 0;
}

.coupons-stats {
    display: flex;
    gap: 20px;
    padding-top: 24px;
    flex-wrap: wrap;
    justify-content: center;
}

.coupons-stat-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background-color: var(--color-white);
    border: 1px solid #dadcde;
    border-radius: 10px;
}

.coupons-stat-card .stat-emoji {
    font-size: 36px;
    line-height: 1.4;
}

.coupons-stat-card .stat-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 120px;
}

.coupons-stat-card .stat-value {
    font-family: var(--font-work-sans);
    font-weight: 600;
    font-size: 20px;
    line-height: 1.5;
    color: var(--color-dark);
}

.coupons-stat-card .stat-label {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-text);
}

/* Coupons Grid Section */
.coupons-grid-section {
    padding: 24px var(--container-padding) 60px;
}

.coupons-grid {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.coupon-card {
    flex: 1 1 calc(50% - 10px);
    min-width: 300px;
    max-width: calc(50% - 10px);
    background-color: var(--color-white);
    border: 1px solid var(--color-yellow);
    border-radius: 24px;
    padding: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    gap: 20px;
}

.coupon-badges {
    position: absolute;
    top: -12px;
    left: 32px;
    display: flex;
    gap: 8px;
}

.coupon-badge {
    padding: 8px 12px;
    border-radius: 10px;
    font-family: var(--font-work-sans);
    font-weight: 600;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
}

.coupon-badge-top {
    background-color: #16a149;
    color: var(--color-white);
}

.coupon-badge-available {
    background-color: #d0ffe1;
    border: 1px solid #16a149;
    color: #16a149;
}

.coupon-badge-expired {
    background-color: #ffd2d0;
    border: 1px solid #e05656;
    color: #e05656;
}

.coupon-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 372px;
}

.coupon-title {
    font-family: var(--font-fraunces);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.2;
    margin: 0;
}

.coupon-title .discount-amount {
    color: var(--color-dark);
}

.coupon-title .discount-text {
    color: var(--color-text);
}

.coupon-description {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-text);
    margin: 0;
}

.coupon-actions {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 163px;
    flex-shrink: 0;
}

.coupon-code-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    height: 40px;
    background-color: #fbfbfc;
    border: 1px solid #dadcde;
    border-radius: 10px;
    cursor: pointer;
    position: relative;
    user-select: none;
    user-select: none;
    user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.coupon-code {
    font-family: var(--font-work-sans);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
}

.coupon-copy-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
}

.coupon-copy-btn:hover {
    opacity: 0.7;
}

.coupon-copy-btn img {
    width: 12px;
    height: 12px;
}

.coupon-use-btn {
    width: 100%;
    padding: 8px 16px;
    background-color: var(--color-yellow);
    border: none;
    border-radius: 10px;
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
    cursor: pointer;
    transition: opacity 0.2s ease;
    box-shadow: 0 1px 2px rgb(16 24 40 / 5%);
}

.coupon-use-btn:hover {
    opacity: 0.9;
}

/* Expired Coupon Styles */
.coupon-card-expired {
    border-color: #d1d5db;
}


.coupon-card-expired .coupon-code-field {
    background-color: #e5e7eb;
    border-color: #d1d5db;
    cursor: not-allowed;
    pointer-events: none;
}

.coupon-card-expired .coupon-code {
    color: #9ca3af;
}

.coupon-card-expired .coupon-copy-btn {
    opacity: 0.5;
    cursor: not-allowed;
}

.coupon-card-expired .coupon-use-btn {
    background-color: #e5e7eb;
    color: #9ca3af;
    cursor: not-allowed;
    pointer-events: none;
}

/* Coupons How It Works Section */
.coupons-how-it-works {
    padding: 120px var(--container-padding);
}

.coupons-how-container {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.coupons-how-heading {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.coupons-how-title {
    font-family: var(--font-fraunces);
    font-weight: 900;
    font-size: 48px;
    line-height: 1.2;
    color: var(--color-dark);
    margin: 0;
}

.coupons-how-subtitle {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 20px;
    line-height: 1.4;
    color: var(--color-text);
    margin: 0;
}

.coupons-steps-container {
    display: flex;
    gap: 20px;
}

.coupons-step-card {
    flex: 1;
    background-color: var(--color-white);
    border: 1px solid var(--color-yellow);
    border-radius: 24px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
}

.coupons-step-icon {
    width: 87px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.coupons-step-icon img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.coupons-step-title {
    font-family: var(--font-fraunces);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.2;
    color: var(--color-dark);
    margin: 0;
}

.coupons-step-text {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-text);
    margin: 0;
}

/* Coupons CTA Footer Section - uses base .cta-footer styles */
.coupons-cta-description {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
    margin: 0;
    max-width: 500px;
}

.coupons-cta-buttons {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.coupons-btn-order {
    padding: 16px 32px;
    background-color: var(--color-yellow);
    border: none;
    border-radius: 50px;
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.coupons-btn-order:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgb(250 193 21 / 40%);
}

.coupons-btn-prices {
    padding: 16px 32px;
    background-color: transparent;
    border: 1px solid var(--color-yellow);
    border-radius: 50px;
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.coupons-btn-prices:hover {
    background-color: rgb(250 193 21 / 10%);
    transform: translateY(-2px);
}

.coupons-dialog-badge {
    position: absolute;
    top: -23px;
    left: 351px;
    transform: rotate(7.25deg);
}

.coupons-dialog-badge img {
    width: 129px;
    height: auto;
}

/* Coupons FAQ Section */
.coupons-faq .faq-title {
    text-align: center;
}

/* ========================================
   PROVIDER CTA SECTION
   ======================================== */
.provider-cta {
    background-color: var(--color-white);
    padding: 120px var(--container-padding);
}

.provider-cta-container {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
}

.provider-cta-heading {
    text-align: center;
}

.provider-cta-title {
    font-family: var(--font-fraunces);
    font-weight: 900;
    font-size: 48px;
    line-height: 1.2;
    color: var(--color-dark);
    margin: 0;
}

.provider-cta-cards {
    display: flex;
    gap: 20px;
    width: 100%;
    align-items: stretch;
}

.provider-cta-main-card {
    flex: 1;
    background-color: var(--color-yellow-light);
    border: 1px solid var(--color-yellow);
    border-radius: 24px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.provider-cta-icon {
    width: 111px;
    height: 103px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.provider-cta-icon img {
    width: 100%;
    height: auto;
    transform: rotate(-8deg);
}

.provider-cta-features {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
}

.provider-cta-feature {
    flex: 1 1 calc(33.333% - 14px);
    min-width: 272px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 4px 0;
}

.provider-cta-check {
    font-size: 20px;
    line-height: 1.5;
    flex-shrink: 0;
}

.provider-cta-feature-text {
    font-family: var(--font-work-sans);
    font-weight: 600;
    font-size: 20px;
    line-height: 1.5;
    color: var(--color-dark);
}

.provider-cta-btn {
    width: 100%;
    padding: 16px 32px;
    background-color: var(--color-yellow);
    border: none;
    border-radius: 50px;
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    display: block;
}

.provider-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgb(250 193 21 / 40%);
}

.provider-cta-services-card {
    background-color: var(--color-yellow-light);
    border: 1px solid var(--color-yellow);
    border-radius: 24px;
    padding: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.provider-cta-services {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.provider-cta-service {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 4px 12px;
}

.provider-cta-service-text {
    font-family: var(--font-work-sans);
    font-weight: 600;
    font-size: 20px;
    line-height: 1.5;
    color: var(--color-dark);
    min-width: 154px;
}

/* ========================================
   CHECKER HERO SECTION
   ======================================== */
.checker-hero {
    background-color: var(--color-white);
    padding: 70px var(--container-padding) 120px;
    border-radius: 24px;
}

.checker-hero-container {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
}

.checker-hero-heading {
    text-align: center;
}

.checker-hero-title {
    font-family: var(--font-fraunces);
    font-weight: 900;
    font-size: 56px;
    line-height: 1.2;
    color: var(--color-dark);
    margin: 0;
}

/* Stats Badges */
.checker-hero-stats {
    display: flex;
    gap: 20px;
    width: 790px;
    max-width: 100%;
}

.checker-hero-stat {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background-color: var(--color-white);
    border: 1px solid #dadcde;
    border-radius: 10px;
}

.checker-hero-stat-emoji {
    font-size: 36px;
    line-height: 1.4;
}

.checker-hero-stat-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.checker-hero-stat-value {
    font-family: var(--font-work-sans);
    font-weight: 600;
    font-size: 20px;
    line-height: 1.5;
    color: var(--color-dark);
}

.checker-hero-stat-label {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-text);
    white-space: nowrap;
}

/* Calculator Card */
.checker-hero-card {
    width: 954px;
    max-width: 100%;
    background-color: var(--color-white);
    border: 1px solid var(--color-yellow);
    border-radius: 16px;
    padding: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
}

.checker-hero-input-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.checker-hero-input {
    width: 100%;
    height: 381px;
    background-color: rgba(255, 255, 255, 0.14);
    border: 1px solid #dadcde;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.checker-hero-input-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.checker-hero-input-placeholder {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-text);
}

.checker-hero-input-info {
    width: 16px;
    height: 16px;
    opacity: 0.6;
    cursor: pointer;
}

.checker-hero-input-content {
    background-color: rgba(213, 214, 215, 0.15);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.checker-hero-input-text {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-text);
    text-align: center;
    margin: 0;
}

.checker-hero-input-text .text-medium {
    font-weight: 500;
}

.checker-hero-counter {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-text);
}

/* Features */
.checker-hero-features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px 24px;
    width: 722px;
    max-width: 100%;
}

.checker-hero-feature {
    display: flex;
    align-items: center;
    gap: 8px;
}

.checker-hero-feature-icon {
    width: 20px;
    height: 20px;
}

.checker-hero-feature span {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
}

/* Button */
.checker-hero-btn {
    width: 100%;
    background-color: var(--color-yellow);
    border: none;
    border-radius: 50px;
    padding: 16px 32px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.checker-hero-btn:hover {
    background-color: #e5ae12;
    transform: translateY(-1px);
}

.checker-hero-btn span {
    font-family: var(--font-work-sans);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
}

/* ========================================
   CHECKER HOW IT WORKS SECTION
   ======================================== */
.checker-how-it-works {
    background: linear-gradient(to bottom, #fafbfc, var(--color-white));
    padding: 120px var(--container-padding);
}

.checker-how-it-works-container {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
}

.checker-how-it-works-heading {
    text-align: center;
}

.checker-how-it-works-title {
    font-family: var(--font-fraunces);
    font-weight: 900;
    font-size: 48px;
    line-height: 1.2;
    color: var(--color-dark);
    margin: 0;
}

.checker-how-it-works-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    width: 100%;
}

.checker-how-it-works-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-yellow);
    border-radius: 24px;
    padding: 32px;
    width: 640px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.checker-how-it-works-card-title {
    font-family: var(--font-fraunces);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.2;
    color: var(--color-dark);
    margin: 0;
    display: flex;
    gap: 8px;
}

.checker-how-it-works-card-title .step-number {
    font-family: var(--font-fraunces);
    font-weight: 600;
}

.checker-how-it-works-card-text {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
    margin: 0;
}

.checker-how-it-works-bottom-text {
    display: flex;
    gap: 20px;
    width: 100%;
}

.checker-how-it-works-bottom-text p {
    flex: 1;
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
    margin: 0;
}

/* ========================================
   EVADE PLAGIARISM SECTION
   ======================================== */
.evade-plagiarism {
    background-color: var(--color-white);
    padding: 120px var(--container-padding);
}

.evade-plagiarism-container {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
}

.evade-plagiarism-heading {
    text-align: center;
}

.evade-plagiarism-title {
    font-family: var(--font-fraunces);
    font-weight: 900;
    font-size: 48px;
    line-height: 1.2;
    color: var(--color-dark);
    margin: 0;
}

.evade-plagiarism-cards {
    display: flex;
    gap: 20px;
    width: 100%;
}

.evade-plagiarism-card {
    flex: 1;
    background-color: var(--color-white);
    border: 1px solid var(--color-yellow);
    border-radius: 24px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.evade-plagiarism-icon {
    width: 110px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.evade-plagiarism-icon img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.evade-plagiarism-icon-arrow img {
    width: 96px;
    height: 110px;
}

.evade-plagiarism-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

.evade-plagiarism-card-title {
    font-family: var(--font-fraunces);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.2;
    color: var(--color-dark);
    margin: 0;
}

.evade-plagiarism-number {
    font-family: var(--font-fraunces);
    font-weight: 600;
}

.evade-plagiarism-card-text {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-text);
    margin: 0;
}

/* ========================================
   TABLET RESPONSIVE (<768px BREAKPOINT)
   Index.html Sections Only
   ======================================== */
@media (width <= 767px) {
    /* CSS Variable Overrides */
    :root {
        --container-padding: 20px;     /* Desktop: 310px/80px → Tablet: 20px */
        --section-spacing: 40px;       /* Desktop: 120px → Tablet: 40px */
        --heading-gap: 40px;           /* Desktop: 56px → Tablet: 40px */
    }

    /* ========================================
       TYPOGRAPHY SCALING (All Sections)
       ======================================== */

    /* Task I1.T2: Responsive font sizes for tablet viewport
       Typography scaling rationale:
       - H1 & H2 converge to 38px to maintain visual hierarchy without excessive line breaks near the 768px transition
       - Body text reduces to 16px for improved readability on tablet screens
       - H3 (24px) remains unchanged - already optimized for tablet
       - Line-height ratios preserved from desktop (1.2 for headings, 1.6 for body)
       - Accent text (Pacifico) scales proportionally to maintain visual balance
    */

    /* Hero Heading (H1): 68px → 38px */
    .main-heading h2, .main-heading.main-heading-serv h1 {
        font-size: 38px;
    }

    /* Section Titles (H2): 48px → 38px */
    .section-title,
    .writers-title,
    .cta-title,
    .testimonials-title,
    .benefits-title,
    .how-it-works-title,
    .services-title,
    .seo-title,
    .faq-title,
    .articles-title,
    .cta-footer-title {
        font-size: 38px;
    }

    /* Accent Text (Pacifico): Implicit 68px (inherited) → 18px */
    .heading-highlight {
        font-size: 18px;
    }

    /* Body Text: 18px → 16px (section-specific targeting for safety) */

    /* Note: .subtitle classes remain 18px (Body Large - no scaling per spec) */
    .hero-screen p,
    .types-section p,
    .writers-section p,
    .cta-section p,
    .testimonials-section p,
    .benefits-section p,
    .how-it-works-section p,
    .services-section p,
    .seo-section p,
    .faq-section p,
    .articles-section p,
    .cta-footer-section p,
    .footer p,
    .description,
    .card-text,
    .benefit-text,
    .step-description {
        font-size: 16px;
    }

    /* ========================================
       1. HEADER & MOBILE MENU
       ======================================== */

    /* Placeholder for Task I2.T1 (Mobile Menu Implementation) */

    /* Expected classes: .header, .burger-menu, .mobile-menu-panel, .mobile-menu-backdrop */

    /* ========================================
       2. HERO SECTION
       ======================================== */

    /* 2. Hero Section (Node: 2163:4478) */

    /* Hero Section Container - Proportional Flex Layout */
    .hero-screen {
        padding: 40px var(--container-padding); /* 40px vertical, 20px horizontal */
    }

    .hero-container {
        max-width: 728px;
        display: flex;
        flex-direction: row;
        gap: 8%;
    }

    /* Text Content Block - Left Column (46%) */
    .content-block {
        flex: 0 0 46%;
        max-width: none;
        padding-top: 0;
    }

    /* Image Block - Right Column (46%) */
    .image-block {
        flex: 0 0 46%;
        width: auto;
        max-width: none;
        height: auto;
    }

    /* Hero Image - Aspect Ratio Preservation */
    .hero-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* ========================================
       3. TYPES OF ASSIGNMENTS SECTION
       ======================================== */

    /* 3. Types of Assignments (Node: 2163:4605) */
    .types-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    /* ========================================
       4. WRITERS SECTION
       ======================================== */

    /* Placeholder for Task I2.T2 (Writers Carousel Implementation) */

    /* Expected classes: .writers-section, .carousel, .carousel-track, .carousel-controls */

    /* ========================================
       5. CTA SECTION
       ======================================== */

    /* Placeholder for Task I2.T4 (CTA Section Responsive Adaptation) */

    /* Expected classes: .cta-section, .cta-container, .cta-content */

    /* ========================================
       6. TESTIMONIALS SECTION
       ======================================== */

    /* Placeholder for Task I2.T3 (Testimonials Slider Implementation) */

    /* Expected classes: .testimonials-section, .slider, .slider-dots, .testimonial-card */

    /* ========================================
       7. BENEFITS SECTION
       ======================================== */

    /* 7. Benefits Section (Node: 2165:5862) */
    .benefits-container {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* ========================================
       8. HOW IT WORKS SECTION
       ======================================== */

    /* 8. How It Works Section (Node: 2165:5933) */

    .how-it-works-section {
        padding: var(--section-spacing) var(--container-padding); /* 40px vertical, 20px horizontal */
    }

    .how-it-works-page-content {
        display: flex;
        flex-direction: column; /* Vertical stacking */
        gap: 24px;
    }

    .how-it-works-steps-container {
        display: flex;
        flex-direction: row; /* Progress bar on left side */
        gap: 20px;
        width: 100%;
    }

    .how-it-works-progress-bar {
        width: 2px; /* Thin vertical line */
        flex-shrink: 0;
    }

    .progress-track {
        width: 2px;
        height: 100%;
    }

    .order-form-screenshot {
        max-width: 681px; /* Figma spec */
        width: 100%;
        margin: 0 auto; /* Center within container */
        order: 2; /* Place below steps */
    }

    .order-form-screenshot img {
        width: 100%;
        height: auto; /* Maintain aspect ratio */
    }

    /* ========================================
       9. SERVICES SECTION
       ======================================== */

    /* 9. Services Section (Node: 2165:5951) */

    .services-section {
        padding: var(--section-spacing) var(--container-padding); /* 40px vertical, 20px horizontal */
    }

    .services-tabs {
        display: flex;
        width: 100%;
    }

    .services-tab {
        flex: 1 1 33.33%; /* Equal width tabs */
        min-height: 44px; /* Touch target minimum */
        text-align: center;
    }

    .services-tags {
        display: flex;
        flex-wrap: wrap; /* Allow wrapping to multiple rows */
        gap: 8px; /* Consistent spacing */
    }

    /* ========================================
       10. SEO SECTION
       ======================================== */

    /* 10. SEO Section (Node: 2165:5992) */

    .seo-section {
        padding: var(--section-spacing) var(--container-padding); /* 40px vertical, 20px horizontal */
    }

    .seo-columns-wrapper {
        max-width: 632px; /* Figma spec constraint */
        max-height: 604px; /* Figma spec constraint */
        overflow-y: auto; /* Enable vertical scrolling */
    }

    /* Custom scrollbar styling (WebKit-specific) */
    .seo-columns-wrapper::-webkit-scrollbar {
        width: 6px;
    }

    .seo-columns-wrapper::-webkit-scrollbar-track {
        background: rgb(0 0 0 / 5%);
        border-radius: 3px;
    }

    .seo-columns-wrapper::-webkit-scrollbar-thumb {
        background: var(--color-stroke);
        border-radius: 3px;
    }

    .seo-columns-wrapper::-webkit-scrollbar-thumb:hover {
        background: var(--color-text);
    }

    /* ========================================
       11. FAQ SECTION
       ======================================== */

    /* FAQ Accordion - Touch Target Compliance */
    .faq-question {
        min-height: 44px; /* WCAG AAA minimum touch target for tablet/mobile */
    }

    /* ========================================
       12. ARTICLES SECTION
       ======================================== */

    /* 12. Articles Section (Node: 2165:6128) */

    .articles-section {
        padding: var(--section-spacing) var(--container-padding); /* 40px vertical, 20px horizontal */
    }

    .articles-grid {
        display: flex;
        flex-direction: column; /* Single column stack */
        gap: 20px;
    }

    .article-card {
        width: 100%;
        max-width: 728px; /* Tablet container width constraint */
        height: auto;
        margin: 0 auto; /* Center cards */
    }

    .article-image img {
        width: 100%;
        height: 380px; /* Fixed height from Figma spec */
        object-fit: cover; /* Preserve aspect ratio, crop if needed */
    }

    /* ========================================
       13. FOOTER CTA SECTION
       ======================================== */

    /* Placeholder for Task I2.T4 (Footer CTA Responsive Adaptation) */

    /* Expected classes: .cta-footer-section, .cta-footer-container */

    /* ========================================
       14. FOOTER
       ======================================== */

    /* 14. Footer (Node: 2165:6208) */
    .footer-columns {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    /* ========================================
       TOUCH TARGET VERIFICATION CHECKLIST
       ======================================== */

    /*
     * WCAG 2.1 Level AAA Touch Target Compliance (44×44px minimum)
     * All interactive elements at ≤767px viewport have been audited and verified.
     *
     * ✓ COMPLIANT ELEMENTS:
     *
     * 1. Mobile Menu Toggle (.mobile-menu-toggle) - Line 2771
     *    → 44×44px via padding: 13px 13.5px
     *    → Visual: 27×18px (3 bars), Touch: 44×44px
     *    → Method: Padding expansion with box-sizing: content-box
     *
     * 2. Mobile Menu Close (.mobile-menu-close) - Line 5739
     *    → 44×44px via padding: 10px
     *    → Visual: 24×24px (X icon), Touch: 44×44px
     *    → Method: Padding expansion with box-sizing: content-box
     *
     * 3. Testimonials Pagination Dots (.testimonial-dot) - Line 3243
     *    → 44×44px via padding: 16px
     *    → Visual: 12×12px, Touch: 44×44px
     *    → Method: Padding expansion with background-clip: content-box
     *
     * 4. FAQ Question Buttons (.faq-question) - Line 13561
     *    → min-height: 44px
     *    → Full-width buttons with guaranteed minimum height
     *    → Method: min-height constraint
     *
     * 5. Services Tab Buttons (.services-tab) - Line 13511
     *    → min-height: 44px
     *    → Full-width tabs with guaranteed minimum height
     *    → Method: min-height constraint
     *
     * 6. CTA Buttons (.btn-primary, .cta-button) - Line 236, 1174
     *    → 56px height (exceeds 44px minimum)
     *    → Native size via padding: 16px 32px
     *    → Method: No changes needed (already compliant)
     *
     * 7. Input Fields (.cta-input-field input) - Line 1150
     *    → 56px height (exceeds 44px minimum)
     *    → Native size via padding: 16px 14px + font-size: 16px × line-height: 1.5
     *    → Method: No changes needed (already compliant)
     *
     * 8. Writers Carousel Controls (.carousel-btn) - Line 1043
     *    → 48×48px (exceeds 44px minimum)
     *    → Prev/next buttons, no pagination dots
     *    → Method: No changes needed (already compliant)
     *
     * VERIFICATION METHOD:
     * - Chrome DevTools → Responsive mode → 767px viewport
     * - Inspect element → Computed tab → Verify width & height ≥44px
     * - Touch emulation → Test edge taps activate element
     * - axe DevTools → Zero touch target violations
     *
     * IMPLEMENTATION TECHNIQUES USED:
     * 1. Padding Expansion: Add transparent padding to expand hit area
     *    - Use background-clip: content-box to preserve visual size
     *    - Use box-sizing: content-box to add padding to dimensions
     * 2. Min-Height: Guarantee minimum height for full-width elements
     * 3. Native Compliance: Verify existing elements already meet minimum
     *
     * ADJACENT TARGET SEPARATION:
     * - Pagination dots: 12px gap (adequate)
     * - FAQ questions: 20px gap via .faq-questions { gap: 20px; }
     * - Tab buttons: Minimal gap (touch targets don't overlap)
     * - All separations meet 8px minimum requirement
     *
     * VISUAL FIDELITY:
     * - All element visual sizes match Figma specifications exactly
     * - Touch target expansion is invisible (padding technique)
     * - No visual changes to user interface
     *
     * Task I2.T6 Status: ✅ COMPLETE
     * All interactive elements meet WCAG 2.1 Level AAA requirements.
     */

}

/* Coupons Page Responsive */
@media (width >= 1300px) {
    .coupons-hero-title {
        font-size: 48px;
    }

    .coupons-how-title {
        font-size: 40px;
    }
}

@media (width >= 768px) and (width <= 1299px) {
    .coupon-card {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .coupons-steps-container {
        flex-direction: column;
    }

    .coupons-step-card {
        flex-direction: row;
        text-align: left;
        gap: 32px;
    }

    .coupons-step-icon {
        width: 80px;
        height: 80px;
        flex-shrink: 0;
    }

    .coupons-dialog-badge {
        left: 250px;
    }
}

@media (width <= 767px) {
    .coupons-hero {
        padding: 40px var(--container-padding);
    }

    .coupons-hero-title {
        font-size: 36px;
    }

    .coupons-hero-subtitle p {
        font-size: 16px;
    }

    .coupons-stats {
        flex-direction: column;
        width: 100%;
    }

    .coupons-stat-card {
        width: 100%;
        justify-content: center;
    }

    .coupon-card {
        flex-direction: column;
        align-items: flex-start;
        padding: 24px;
        padding-top: 32px;
    }

    .coupon-content {
        max-width: 100%;
    }

    .coupon-actions {
        width: 100%;
    }

    .coupons-how-it-works {
        padding: 60px var(--container-padding);
    }

    .coupons-how-title {
        font-size: 32px;
    }

    .coupons-how-subtitle {
        font-size: 16px;
    }

    .coupons-step-card {
        flex-direction: column;
        text-align: center;
    }

    .coupons-cta-buttons {
        flex-direction: column;
        width: 100%;
    }

    .coupons-btn-order,
    .coupons-btn-prices {
        width: 100%;
    }

    .coupons-dialog-badge {
        display: none;
    }

}

@media (width <= 767px) {
    .coupons-hero-title {
        font-size: 28px;
    }

    .coupon-title {
        font-size: 20px;
    }

    .coupons-how-title {
        font-size: 28px;
    }

    .coupons-step-title {
        font-size: 20px;
    }
}

/* ==========================================
   TOP WRITERS PAGE STYLES
   ========================================== */

/* Hero Section */
.tw-hero {
    background-color: var(--color-white);
    border-radius: 24px;
    padding: 70px 0 94px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.tw-hero-container {
    max-width: 1300px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 64px;
    align-items: center;
}

.tw-hero-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
    text-align: center;
    width: 100%;
}

.tw-hero-title {
    font-family: var(--font-fraunces);
    font-size: 56px;
    font-weight: 900;
    line-height: 1.2;
    color: var(--color-dark);
    margin: 0;
    font-variation-settings: 'SOFT' 0, 'WONK' 1;
}

.tw-hero-subtitle {
    font-family: var(--font-work-sans);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--color-text);
    margin: 0;
}

/* Rating Badges */
.tw-hero-ratings {
    display: flex;
    gap: 32px;
    align-items: flex-start;
}

.tw-rating-badge {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.tw-rating-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.tw-rating-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.tw-rating-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}

.tw-rating-name {
    height: 13px;
    display: flex;
    align-items: center;
}

.tw-rating-name img {
    height: 100%;
    width: auto;
}

/* Specific widths for rating service names */
.tw-rating-badge:nth-child(1) .tw-rating-name {
    width: 69px; /* Sitejabber */
}

.tw-rating-badge:nth-child(2) .tw-rating-name {
    width: 61px; /* Trustpilot */
    font-weight: 500;
}

.tw-rating-badge:nth-child(3) .tw-rating-name {
    width: 99px; /* CheapestEssay */
}

.tw-rating-stars {
    display: flex;
    gap: 4px;
    align-items: center;
}

.tw-rating-score {
    font-family: var(--font-kanit);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--color-navy-blue);
}

.tw-stars {
    width: 86px;
    height: 18px;
}

/* ==========================================
   WRITERS SECTION
   ========================================== */

.tw-writers {
    padding: 80px 0 120px;
    background-color: #f9f9fb;
}

.tw-writers-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.tw-writers-title {
    font-family: var(--font-fraunces);
    font-size: 48px;
    font-weight: 900;
    font-style: italic;
    line-height: 1.2;
    color: var(--color-dark);
    text-align: center;
    margin: 0 0 40px;
    font-variation-settings: 'SOFT' 0, 'WONK' 1;
}

/* Filter Tabs */
.tw-writers-filters {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-bottom: 48px;
}

.tw-filter-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background-color: var(--color-white);
    border: 1px solid var(--color-stroke);
    border-radius: 50px;
    font-family: var(--font-work-sans);
    font-size: 16px;
    font-weight: 400;
    color: var(--color-dark);
    cursor: pointer;
    transition: all 0.2s ease;
}

.tw-filter-tab:hover {
    border-color: var(--color-yellow);
}

.tw-filter-tab.tw-filter-tab-active {
    background-color: var(--color-dark);
    border-color: var(--color-dark);
    color: var(--color-white);
}

.tw-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    background-color: var(--color-stroke);
    border-radius: 50px;
    font-size: 14px;
    font-weight: 500;
}

.tw-filter-tab.tw-filter-tab-active .tw-filter-count {
    background-color: var(--color-yellow);
    color: var(--color-dark);
}

/* Writers Grid - Top Writers Page */
.tw-writers-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 48px;
}

.tw-writers-grid .writer-card {
    flex: 0 0 calc(33.333% - 13.33px);
    width: calc(33.333% - 13.33px);
}

/* Writer Bio - New element for top-writers page */
.writer-bio {
    font-family: var(--font-work-sans);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-text);
    margin: 12px 0 0;
    min-height: 110px;
}

/* Hidden cards - initially hidden */
.tw-hidden-card {
    display: none;
}

/* When expanded, show hidden cards */
.tw-writers-grid.expanded .tw-hidden-card {
    display: flex;
}

/* More Writers Button */
.tw-writers-more {
    display: flex;
    justify-content: center;
}

.tw-more-btn {
    padding: 14px 32px;
    background-color: var(--color-dark);
    border: none;
    border-radius: 50px;
    font-family: var(--font-work-sans);
    font-size: 16px;
    font-weight: 500;
    color: var(--color-white);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.tw-more-btn:hover {
    background-color: #2a3347;
}

/* Tablet: 2 columns for writers grid */
@media (width >= 768px) and (width <= 1299px) {
    .tw-writers-grid,
    .tw-writers-grid.writer-cards,
    .writer-cards.tw-writers-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
        width: 100% !important;
    }

    .tw-writers-grid .writer-card,
    .tw-writers-grid.writer-cards .writer-card,
    .writer-cards.tw-writers-grid .writer-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
}

/* ==========================================
   SAVINGS CTA SECTION
   ========================================== */

.tw-savings-cta {
    padding: 0 var(--container-padding) 80px;
}

.tw-savings-container {
    max-width: 1300px;
    margin: 0 auto;
    background-color: var(--color-yellow-light);
    border: 1px solid var(--color-yellow);
    border-radius: 24px;
    padding: 48px;
    display: flex;
    align-items: center;
    gap: 90px;
    position: relative;
}

/* Gift Illustration */
.tw-savings-gift {
    flex-shrink: 0;
    width: 174px;
}

.tw-savings-gift img {
    width: 100%;
    height: auto;
}

/* Content */
.tw-savings-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* Feature Pills Grid */
.tw-savings-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 16px;
}

.tw-savings-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background-color: var(--color-yellow-light);
    border: 1px solid var(--color-yellow);
    border-radius: 50px;
    white-space: nowrap;
}

.tw-savings-price {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 16px;
    background-color: #16a149;
    border-radius: 50px;
    font-family: var(--font-work-sans);
    font-size: 16px;
    font-weight: 500;
    color: var(--color-white);
    text-decoration: line-through;
    min-width: 95px;
}

.tw-savings-name {
    font-family: var(--font-work-sans);
    font-size: 16px;
    font-weight: 400;
    color: var(--color-dark);
    text-align: right;
}

/* Bottom Row */
.tw-savings-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.tw-savings-text {
    font-family: var(--font-fraunces);
    font-size: 24px;
    font-weight: 600;
    color: var(--color-dark);
    margin: 0;
    font-variation-settings: 'SOFT' 0, 'WONK' 1;
}

.tw-savings-amount {
    color: #16a149;
}

.tw-savings-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 32px;
    background-color: var(--color-yellow);
    border-radius: 50px;
    font-family: var(--font-work-sans);
    font-size: 16px;
    font-weight: 500;
    color: var(--color-dark);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s ease;
}

.tw-savings-btn:hover {
    background-color: #e5ac00;
}

/* ==========================================
   HOW WE SELECT WRITERS SECTION
   ========================================== */

.tw-selection {
    padding: 120px var(--container-padding);
}

.tw-selection-container {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

/* Header */
.tw-selection-header {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.tw-selection-title {
    font-family: var(--font-fraunces);
    font-size: 48px;
    font-weight: 900;
    line-height: 1.2;
    color: var(--color-dark);
    margin: 0;
    font-variation-settings: 'SOFT' 0, 'WONK' 1;
}

.tw-selection-subtitle {
    font-family: var(--font-work-sans);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--color-text);
    margin: 0;
}

/* Cards Grid */
.tw-selection-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* Single Card */
.tw-selection-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-yellow);
    border-radius: 24px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
}

.tw-selection-icon {
    width: 114px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tw-selection-icon img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.tw-selection-card-title {
    font-family: var(--font-fraunces);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-dark);
    margin: 0;
    font-variation-settings: 'SOFT' 0, 'WONK' 1;
}

.tw-selection-card-text {
    font-family: var(--font-work-sans);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-text);
    margin: 0;
}

/* ========================================
   WHAT WE DO SECTION (SERVICES) - TOP WRITERS PAGE
   ======================================== */
.tw-services {
    background-color: var(--color-white);
    padding: 120px 80px;
}

.tw-services-container {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 56px;
}

.tw-services-title {
    font-family: var(--font-fraunces);
    font-size: 48px;
    font-weight: 900;
    line-height: 1.2;
    color: var(--color-dark);
    margin: 0;
    text-align: center;
    font-variation-settings: 'SOFT' 0, 'WONK' 1;
}

/* Main Content Box */
.tw-services-box {
    width: 100%;
    border: 1px solid var(--color-yellow);
    border-radius: 24px;
    padding: 60px 70px;
    display: flex;
    gap: 80px;
    align-items: flex-start;
    justify-content: center;
}

/* Left Side - Info */
.tw-services-info {
    display: flex;
    flex-direction: column;
    gap: 32px;
    justify-content: center;
}

.tw-services-header {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tw-services-icon-title {
    display: flex;
    gap: 16px;
    align-items: center;
    max-width: 461px;
}

.tw-services-icon {
    width: 61px;
    height: 61px;
    flex-shrink: 0;
}

.tw-services-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.tw-services-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tw-services-heading {
    font-family: var(--font-fraunces);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-dark);
    margin: 0;
    font-variation-settings: 'SOFT' 0, 'WONK' 1;
}

.tw-services-price {
    font-family: var(--font-work-sans);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--color-yellow);
    margin: 0;
}

.tw-services-description {
    font-family: var(--font-work-sans);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-text);
    margin: 0;
}

.tw-services-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 32px;
    background-color: var(--color-yellow);
    border-radius: 50px;
    text-decoration: none;
    font-family: var(--font-work-sans);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-dark);
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: fit-content;
}

.tw-services-btn:hover {
    background-color: #e0ac13;
}

/* Right Side - Service Types */
.tw-services-types {
    display: flex;
    flex-direction: column;
    gap: 36px;
    width: 493px;
}

/* Tabs */
.tw-services-tabs {
    display: flex;
    width: 100%;
}

.tw-services-tab {
    flex: 1;
    padding: 8px 18px;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--color-stroke);
    font-family: var(--font-work-sans);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-dark);
    cursor: pointer;
    transition: border-color 0.3s ease;
}

.tw-services-tab.active {
    border-bottom: 1px solid var(--color-dark);
}

.tw-services-tab:hover:not(.active) {
    border-bottom-color: var(--color-dark);
}

/* Pills */
.tw-services-pills {
    width: 100%;
}

.tw-pills-group {
    display: none;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
    justify-content: flex-start;
}

.tw-pills-group.active {
    display: flex;
}

.tw-services-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    background-color: var(--color-yellow-light);
    border: 1px solid var(--color-yellow);
    border-radius: 50px;
    font-family: var(--font-work-sans);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-dark);
    white-space: nowrap;
}


/* ==========================================
   APP PAGE STYLES
   ========================================== */

/* App Hero Section */
.app-hero {
    background-color: #fff;
    padding: 60px 80px 0;
    text-align: center;
}

.app-hero-container {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.app-hero-title {
    font-family: var(--font-fraunces);
    font-size: 72px;
    font-weight: 900;
    line-height: 1.2;
    color: var(--color-dark);
    margin: 0;
}

.app-hero-subtitle {
    font-family: var(--font-work-sans);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--color-text);
    margin: 0;
}

.app-hero-form {
    display: flex;
    align-items: center;
    gap: 16px;
}

.app-hero-input-wrapper {
    width: 414px;
}

.app-hero-input {
    width: 100%;
    padding: 14px 20px;
    border: 1px solid var(--color-yellow);
    border-radius: 50px;
    font-family: var(--font-work-sans);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-dark);
    background-color: #fff;
    outline: none;
    transition: border-color 0.3s ease;
}

.app-hero-input::placeholder {
    color: var(--color-text);
}

.app-hero-input:focus {
    border-color: var(--color-dark);
}

.app-hero-btn {
    padding: 16px 32px;
    background-color: var(--color-yellow);
    border: none;
    border-radius: 50px;
    font-family: var(--font-work-sans);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-dark);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.app-hero-btn:hover {
    background-color: #e5ad12;
}

.app-hero-btn:active {
    transform: scale(0.98);
}

/* App Benefits Section */
.app-benefits {
    background-color: #fff;
    padding: 120px 80px;
}

.app-benefits-container {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
}

.app-benefits-title {
    font-family: var(--font-fraunces);
    font-size: 48px;
    font-weight: 900;
    line-height: 1.2;
    color: var(--color-dark);
    text-align: center;
    margin: 0;
}

.app-benefits-content {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    background-color: var(--color-yellow-light);
    border: 1px solid var(--color-yellow);
    border-radius: 24px;
    padding: 48px 140px;
    min-height: 500px;
}

.app-benefits-phone {
    position: absolute;
    left: 140px;
    top: 50%;
    transform: translateY(-50%);
    width: 326px;
    z-index: 2;
}

.app-phone-image {
    width: 100%;
    height: auto;
    display: block;
}

.app-benefits-list {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 600px;
}

.app-benefit-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px 32px;
    background-color: #fff;
    border: 1px solid var(--color-yellow);
    border-radius: 24px;
}

.app-benefit-icon {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.app-benefit-icon img {
    max-width: 100%;
    max-height: 100%;
}

.app-benefit-text {
    font-family: var(--font-fraunces);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-dark);
    margin: 0;
}

/* App Interface Section */
.app-interface {
    background-color: #fff;
    padding: 80px;
}

.app-interface-container {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
}

.app-interface-title {
    font-family: var(--font-fraunces);
    font-size: 48px;
    font-weight: 900;
    line-height: 1.2;
    color: var(--color-dark);
    text-align: center;
    margin: 0;
}

.app-interface-title .highlight {
    color: var(--color-yellow);
}

.app-interface-phones {
    display: flex;
    justify-content: center;
    gap: 24px;
    width: 100%;
}

.app-interface-phone {
    width: 280px;
    border-radius: 40px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
}

.app-interface-phone img {
    width: 100%;
    height: auto;
    display: block;
}

/* App Testimonials Section */
.app-testimonials {
    background-color: var(--color-navy-blue);
    padding: 80px;
}

.app-testimonials-container {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
}

.app-testimonials-title {
    font-family: var(--font-fraunces);
    font-size: 48px;
    font-weight: 900;
    line-height: 1.2;
    color: #fff;
    text-align: center;
    margin: 0;
}

.app-testimonials-cards {
    display: flex;
    justify-content: center;
    gap: 24px;
    width: 100%;
}

.app-testimonial-card {
    flex: 1;
    max-width: 500px;
    padding: 32px;
    background-color: #fff;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.app-testimonial-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.app-testimonial-name {
    font-family: var(--font-fraunces);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-dark);
    margin: 0;
}

.app-testimonial-stars {
    display: flex;
    gap: 4px;
}

.app-testimonial-stars img {
    width: 20px;
    height: 20px;
}

.app-testimonial-text {
    font-family: var(--font-work-sans);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-text);
    margin: 0;
}

.app-testimonial-date {
    font-family: var(--font-work-sans);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-text);
    margin: 0;
}

.app-testimonials-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.pagination-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.pagination-dot.active {
    background-color: var(--color-yellow);
}

/* App Download CTA Section */
.app-download-cta {
    background-color: var(--color-navy-blue);
    padding: 60px 80px;
}

.app-download-cta-container {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.app-download-cta-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.app-download-cta-title {
    font-family: var(--font-fraunces);
    font-size: 40px;
    font-weight: 900;
    line-height: 1.2;
    color: var(--color-yellow);
    margin: 0;
}

.app-download-cta-subtitle {
    font-family: var(--font-work-sans);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #fff;
    margin: 0;
    max-width: 500px;
}

.app-download-badges {
    display: flex;
    gap: 16px;
}

.app-badge-link {
    display: block;
    transition: transform 0.2s ease;
}

.app-badge-link:hover {
    transform: scale(1.05);
}

.app-badge {
    height: 48px;
    width: auto;
}

.app-download-cta-image {
    flex-shrink: 0;
}

.app-cta-person {
    max-width: 400px;
    height: auto;
    display: block;
}


/* ==========================================
   APP PAGE - HERO SECTION
   ========================================== */
.app-hero-section {
    background-color: var(--color-white);
    padding: 60px var(--container-padding) 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.app-hero-container {
    background-color: var(--color-white);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1300px;
    border-radius: 24px;
}

.app-hero-content {
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.app-hero-text {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
    text-align: center;
    width: 100%;
}

.app-hero-title {
    font-family: var(--font-fraunces);
    font-weight: 900;
    font-size: 72px;
    line-height: 1.2;
    color: var(--color-dark);
    margin: 0;
}

.app-hero-subtitle {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 20px;
    line-height: 1.4;
    color: var(--color-text);
    margin: 0;
}

.app-hero-form {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: center;
    position: relative;
}

.app-hero-form .app-hero-msg.errorMsg{
    position: absolute;
    left: 0;
    bottom: -20px;
}

.app-hero-form #email-error{
    position: absolute;
    left: 0;
    bottom: -20px;
    color: #dc2626;
    font-size: 14px;
    font-family: var(--font-work-sans);
    font-weight: 400;
}

.app-hero-input-wrapper {
    display: flex;
    flex-direction: column;
    width: 414px;
}

.app-hero-input {
    background-color: var(--color-white);
    border: 1px solid var(--color-yellow);
    border-radius: 50px;
    padding: 10px 14px;
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
    width: 100%;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.app-hero-input::placeholder {
    color: var(--color-text);
}

.app-hero-input:focus {
    border-color: var(--color-yellow);
    box-shadow: 0 0 0 3px rgba(250, 193, 21, 0.2);
}

.app-hero-btn {
    background-color: var(--color-yellow);
    color: var(--color-dark);
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    padding: 16px 32px;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.app-hero-btn:hover {
    background-color: #e5ae13;
    transform: translateY(-1px);
}

.app-hero-btn:active {
    transform: translateY(0);
}

/* ==========================================
   APP PAGE - REASONS SECTION
   ========================================== */
.app-reasons-section {
    background-color: var(--color-white);
    padding: 120px 0;
    display: flex;
    flex-direction: column;
    gap: 50px;
    align-items: center;
}

.app-reasons-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.app-reasons-title {
    font-family: var(--font-fraunces);
    font-weight: 900;
    font-size: 48px;
    line-height: 1.2;
    color: var(--color-dark);
    text-align: center;
    width: 100%;
    max-width: 1300px;
    margin: 0;
}

.app-reasons-cta {
    position: relative;
    padding: 120px 0;
    display: flex;
    justify-content: center;
    overflow: visible;
}

.app-reasons-container {
    background-color: var(--color-yellow-light);
    border: 1px solid var(--color-yellow);
    border-radius: 24px;
    width: 1300px;
    height: 380px;
    position: relative;
    overflow: visible;
}

.app-reasons-iphone {
    position: absolute;
    left: 140px;
    bottom: 0;
    width: 326px;
    z-index: 2;
}

.iphone-img {
    width: 100%;
    height: auto;
    display: block;
}

.app-reasons-cards {
    position: absolute;
    right: 140px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 600px;
}

.app-reason-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-yellow);
    border-radius: 24px;
    padding: 24px 32px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.app-reason-icon {
    flex-shrink: 0;
    width: 56px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.reason-icon-img {
    width: auto;
    height: 50px;
    display: block;
}

.app-reason-text {
    font-family: var(--font-fraunces);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.2;
    color: var(--color-dark);
    margin: 0;
}

/* ==========================================
   APP PAGE - INTERFACE SECTION
   ========================================== */
.app-interface-section {
    background-color: var(--color-white);
    padding: 0 var(--container-padding) 120px;
    display: flex;
    flex-direction: column;
    gap: 104px;
    align-items: center;
}

.app-interface-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.app-interface-title {
    font-family: var(--font-fraunces);
    font-weight: 900;
    font-size: 48px;
    line-height: 1.2;
    color: var(--color-dark);
    text-align: center;
    margin: 0;
}

.app-interface-phones {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1300px;
}

.app-interface-phone {
    width: 256px;
    flex-shrink: 0;
}

.interface-phone-img {
    width: 100%;
    height: auto;
    display: block;
}

/* ==========================================
   APP PAGE - TESTIMONIALS SECTION
   ========================================== */
.app-testimonials-section {
    background: linear-gradient(180deg, #fafbfc 0%, #ffffff 100%);
    padding: 120px var(--container-padding);
    display: flex;
    flex-direction: column;
    gap: 48px;
    align-items: center;
    border-radius: 24px;
}

.app-testimonials-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.app-testimonials-title {
    font-family: var(--font-fraunces);
    font-weight: 900;
    font-size: 48px;
    line-height: 1.2;
    color: var(--color-dark);
    text-align: center;
    margin: 0;
}

.app-testimonials-container {
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
    width: 100%;
    max-width: 1300px;
}

.app-testimonials-title{color:var(--color-dark)}

.app-testimonials-cards {
    display: flex;
    gap: 20px;
    align-items: stretch;
    width: 100%;
}

.app-testimonial-card {
    flex: 1;
    background-color: var(--color-white);
    border: 1px solid var(--color-yellow);
    border-radius: 24px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.app-testimonial-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.app-testimonial-name {
    font-family: var(--font-fraunces);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.2;
    color: var(--color-dark);
    margin: 0;
}

.app-testimonial-stars {
    display: flex;
    align-items: center;
    gap: 0;
}

.app-testimonial-stars .star {
    width: 20px;
    height: 20px;
    display: inline-block;
}

.app-testimonial-stars .star.filled {
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 1.5L12.39 6.36L17.77 7.13L13.89 10.91L14.82 16.27L10 13.77L5.18 16.27L6.11 10.91L2.23 7.13L7.61 6.36L10 1.5Z' fill='%23FAC115' stroke='%23FAC115' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.app-testimonial-text {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-text);
    margin: 0;
    flex-grow: 1;
}

.app-testimonial-date {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
    margin: 0;
}

.app-testimonials-nav {
    display: flex;
    gap: 12px;
    align-items: center;
}

.app-testimonial-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.app-testimonial-btn.prev {
    background-color: var(--color-dark);
}

.app-testimonial-btn.next {
    background-color: var(--color-yellow);
}

.app-testimonial-btn:hover {
    transform: scale(1.05);
}

.app-testimonial-btn.prev:hover {
    background-color: #2a3444;
}

.app-testimonial-btn.next:hover {
    background-color: #e5ae13;
}

/* ==========================================
   APP PAGE - CTA SECTION
   ========================================== */
.app-cta-section {
    padding: 80px var(--container-padding);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.app-cta-container {
    background-color: var(--color-yellow-light);
    border: 1px solid var(--color-yellow);
    border-radius: 24px;
    padding: 48px;
    width: 100%;
    max-width: 1300px;
    position: relative;
    min-height: 280px;
    overflow: visible;
}

.app-cta-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 584px;
}

.app-cta-title {
    font-family: var(--font-fraunces);
    font-weight: 900;
    font-size: 48px;
    line-height: 1.2;
    color: var(--color-dark);
    margin: 0;
}

.app-cta-text {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
    margin: 0;
}

.app-cta-person {
    position: absolute;
    right: 153px;
    bottom: 0;
    width: 441px;
}

.app-cta-person-img {
    width: 100%;
    height: auto;
    display: block;
}

.app-cta-dialog {
    position: absolute;
    right: 92px;
    top: -70px;
    width: 140px;
    height: 117px;
    transform: rotate(7.25deg);
}

.app-cta-dialog-img {
    width: 100%;
    height: auto;
}

/* APP CTA Section Responsive - Mobile */
@media (width <= 767px) {
    .app-cta-section {
        padding: 60px 0;
        padding-bottom: 180px;
    }

    .app-cta-container {
        padding: 32px 24px;
        padding-bottom: 50px;
        margin: 0 16px;
        width: auto;
    }

    .app-cta-content {
        max-width: 100%;
        text-align: center;
        align-items: center;
    }

    .app-cta-title {
        font-size: 28px;
        text-align: center;
    }

    .app-cta-text {
        text-align: center;
    }

    .cta-footer-image {
        position: absolute;
        bottom: 0;
        left: 50%;
        right: auto;
        transform: translate(-50%, 75%);
        width: 240px;
    }
}

/* ==========================================
   SERVICES PAGE STYLES
   ========================================== */

/* Services Hero Section */
.services-hero {
    background-color: var(--color-white);
    padding: 70px 0 94px;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.services-hero-container {
    max-width: 1300px;
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--container-padding);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 64px;
}

.services-hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
    width: 100%;
}

.services-hero-title {
    font-family: var(--font-fraunces);
    font-weight: 900;
    font-size: 56px;
    line-height: 1.2;
    color: var(--color-dark);
    margin: 0;
}

.services-hero-subtitle {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 20px;
    line-height: 1.4;
    color: var(--color-text);
}

.services-hero-subtitle p {
    margin: 0;
}

.services-hero-subtitle strong {
    font-weight: 400;
    color: var(--color-dark);
}

.services-hero-ratings {
    display: flex;
    gap: 32px;
    align-items: flex-start;
}

.rating-badge {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.rating-badge-logo {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.rating-badge-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.rating-badge-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}

.rating-badge:nth-child(2) .rating-badge-name{
    font-weight: 500;
    line-height: 16px;
}

.rating-badge-name img {
    height: 13px;
    width: auto;
    display: block;
}

.rating-badge-stars {
    display: flex;
    gap: 4px;
    align-items: center;
}

.rating-value {
    font-family: var(--font-kanit);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-navy-blue);
}

.rating-badge-stars .stars-icon {
    width: 86px;
    height: 18px;
}

/* Services List Section */
.services-list {
    background-color: var(--color-white);
    padding: 0 0 90px;
}

.services-list-container {
    max-width: 1300px;
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--container-padding);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
}

.services-list-title {
    font-family: var(--font-fraunces);
    font-weight: 900;
    font-size: 48px;
    line-height: 1.2;
    color: var(--color-dark);
    text-align: center;
    margin: 0;
}

/* Services Accordion */
.services-accordion {
    width: 100%;
    max-width: 872px;
    background-color: var(--color-white);
    border: 1px solid var(--color-yellow);
    border-radius: 10px;
    padding: 24px;
}

.accordion-item {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-top: 12px;
}
.accordion-item.accordion-item-npt{
    padding-top: 0;
}

.accordion-item:not(.active):not(.no-border) {
    border-bottom: 1px solid var(--color-stroke);
    padding-bottom: 12px;
}

.accordion-item:not(.active) {
    gap: 0;
}

.accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.accordion-title {
    font-family: var(--font-fraunces);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.2;
    color: var(--color-dark);
    margin: 0;
}

.accordion-toggle {
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.accordion-toggle img {
    width: 24px;
    height: 24px;
}

.accordion-item .icon-minus {
    display: none;
}

.accordion-item .icon-plus {
    display: block;
}

.accordion-item.active .icon-minus {
    display: block;
}

.accordion-item.active .icon-plus {
    display: none;
}

.accordion-content {
    display: none;
}

.accordion-item.active .accordion-content {
    display: block;
}

/* Service Tags */
.service-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 16px;
    padding-bottom: 24px;
}

.service-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 20px;
    background-color: var(--color-yellow-light);
    border: 1px solid var(--color-yellow);
    border-radius: 50px;
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.service-tag:hover,
.service-tag.active {
    background-color: #fff1c4;
}

/* ==========================================
   SERVICES CTA SECTION
   ========================================== */
.services-cta {
    padding: 60px 0 0;
}

.services-cta-container {
    max-width: 1300px;
    margin: 0 20px;
    overflow: visible;
}

@media (min-width: 1340px) {
    .services-cta-container {
        margin: 0 auto;
    }
}

.services-cta-card {
    position: relative;
    background-color: var(--color-yellow-light);
    border: 1px solid var(--color-yellow);
    border-radius: 24px;
    padding: 48px;
    overflow: visible;
    min-height: 320px;
}

.services-cta-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 586px;
}

.services-cta-text {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.services-cta-title {
    font-family: var(--font-fraunces);
    font-weight: 900;
    font-size: 48px;
    line-height: 1.2;
    color: var(--color-dark);
    margin: 0;
}

.services-cta-description {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
    margin: 0;
}

.services-cta-buttons {
    display: flex;
    align-items: flex-start;
}

.services-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 32px;
    background-color: var(--color-yellow);
    border-radius: 50px;
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.services-cta-btn:hover {
    background-color: #e5ad12;
}

.services-cta-image {
    position: absolute;
    left: 580px;
    bottom: 0;
    right: 0;
    z-index: 1;
    pointer-events: none;
}

.services-cta-image img {
    width: auto;
    height: auto;
    max-width: 800px;
    display: block;
}

/* ==========================================
   SERVICES BENEFITS SECTION
   ========================================== */
.services-benefits {
    padding: 120px 0;
    background-color: var(--color-white);
}

.services-benefits-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 80px;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.services-benefits-header {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.services-benefits-title {
    font-family: var(--font-fraunces);
    font-weight: 900;
    font-size: 48px;
    line-height: 1.2;
    color: var(--color-dark);
    margin: 0;
}

.services-benefits-subtitle {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 20px;
    line-height: 1.4;
    color: var(--color-text);
    margin: 0;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.services-benefits-cards {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.benefit-card {
    flex: 1;
    /*max-width: 420px;*/
    background-color: var(--color-white);
    border: 1px solid var(--color-yellow);
    border-radius: 24px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
}

.benefit-title {
    font-family: var(--font-fraunces);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.2;
    color: var(--color-dark);
    margin: 0;
}

.benefit-text {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-text);
    margin: 0;
}

/* ==========================================
   FREE FEATURES SECTION
   ========================================== */
.free-features-ms {
    padding: 80px 0;
    background-color: var(--color-white);
}

.free-features-container-ms {
    max-width: 1300px;
    margin: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 48px;
    align-items: center;
}

@media (min-width: 1340px) {
    .free-features-container-ms {
        margin: 0 auto;
    }
}

.free-features-title-ms {
    font-family: var(--font-fraunces);
    font-weight: 900;
    font-size: 48px;
    line-height: 1.2;
    color: var(--color-dark);
    text-align: center;
    margin: 0;
}

.free-features-card-ms {
    flex: 0 0 300px;
    gap: 32px;
    position: relative;
    width: 100%;
    background-color: var(--color-yellow-light);
    border: 1px solid var(--color-yellow);
    border-radius: 24px;
    padding: 32px 48px;
    padding-left: 270px;
    display: flex;
    align-items: center;
}

.free-features-icon-ms {
    position: absolute;
    left: 47px;
    top: 45px;
    width: 174px;
    height: 183px;
}

.free-features-icon-ms img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.free-features-content-ms {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.free-features-grid-ms {
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
    justify-content: center;
}

.free-features-column-ms {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex-shrink: 0;
}

.feature-pill-ms {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background-color: var(--color-yellow-light);
    border: 1px solid var(--color-yellow);
    border-radius: 50px;
    /*width: fit-content;*/
    min-width: 280px;
}

.feature-price-ms {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 16px;
    background-color: #16a149;
    border-radius: 50px;
    font-family: var(--font-work-sans);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: white;
    text-decoration: line-through;
    min-width: 95px;
}

.feature-name-ms {
    flex: 1;
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
    white-space: nowrap;
}

.free-features-footer-ms {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 22px;
}

.free-features-savings-ms {
    font-family: var(--font-fraunces);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.2;
    color: var(--color-dark);
    margin: 0;
}

.savings-amount-ms {
    color: #16a149;
}

.free-features-btn-ms {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 32px;
    background-color: var(--color-yellow);
    border-radius: 50px;
    font-family: var(--font-work-sans);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.free-features-btn-ms:hover {
    background-color: #e5ad12;
}

/* ==========================================
   PRICES CALCULATOR SECTION
   ========================================== */
.prices-section {
    background-color: var(--color-white);
    padding: 70px var(--container-padding) 94px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.prices-container {
    max-width: 1300px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
}

/* Prices Heading */
.prices-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
}

.prices-title {
    font-family: var(--font-fraunces);
    font-weight: 900;
    font-size: 56px;
    line-height: 1.2;
    color: var(--color-dark);
    margin: 0;
}

.prices-subtitle {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 20px;
    line-height: 1.4;
    color: var(--color-text);
    margin: 0;
}

/* Calculator Card */
.prices-calculator {
    background-color: var(--color-white);
    border: 1px solid var(--color-yellow);
    border-radius: 16px;
    padding: 32px;
    width: 100%;
    max-width: 1000px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.calculator-title {
    font-family: var(--font-fraunces);
    font-weight: 900;
    font-size: 48px;
    line-height: 1.2;
    color: var(--color-dark);
    margin: 0;
    text-align: center;
}

/* Calculator Form */
.calculator-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Select Wrapper */
.calculator-select-wrapper {
    position: relative;
    width: 100%;
    height: 56px;
}

.calculator-select {
    width: 100%;
    height: 100%;
    padding: 10px 44px 10px 20px;
    background-color: var(--color-white);
    border: 1px solid var(--color-yellow);
    border-radius: 50px;
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-text);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.calculator-select:focus {
    border-color: var(--color-dark);
    box-shadow: 0 0 0 2px rgba(250, 193, 21, 0.2);
}

.calculator-select:hover {
    border-color: #e5ad12;
}

.calculator-select-icon {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    pointer-events: none;
}

/* Price Row */
.calculator-price-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
    padding-top: 8px;
}

.calculator-price-label {
    font-family: var(--font-fraunces);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.2;
    color: var(--color-text);
}

.calculator-price-values {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.calculator-discount {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.discount-badge {
    background-color: var(--color-green);
    color: var(--color-white);
    font-family: var(--font-work-sans);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    padding: 2px 8px;
    border-radius: 50px;
}

.calculator-discount .original-price {
    font-family: var(--font-work-sans);
    font-weight: 500;
    font-size: 20px;
    line-height: 1.2;
    color: var(--color-text);
    text-decoration: line-through;
    background: none;
    padding: 0;
}

.calculator-final-price {
    display: flex;
    align-items: center;
    gap: 6px;
}

.fire-icon {
    font-size: 24px;
    line-height: 1;
}

.final-price {
    font-family: var(--font-fraunces);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.2;
    color: var(--color-dark);
}

/* Submit Button */
.calculator-submit {
    width: 100%;
    padding: 16px 32px;
    background-color: var(--color-yellow);
    border: none;
    border-radius: 50px;
    font-family: var(--font-work-sans);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.calculator-submit:hover {
    background-color: #e5ad12;
}

.calculator-submit:active {
    transform: scale(0.98);
}

/* ==========================================
   SITEMAP SECTION
   ========================================== */
.sitemap-section {
    background-color: var(--color-white);
    padding: 70px var(--container-padding) 94px;
}

.sitemap-container {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 82px;
}

/* Sitemap Heading */
.sitemap-heading {
    display: flex;
    flex-direction: column;
    gap: 24px;
    text-align: center;
}

.sitemap-title {
    font-family: var(--font-fraunces);
    font-weight: 900;
    font-size: 56px;
    line-height: 1.2;
    color: var(--color-dark);
    margin: 0;
}

.sitemap-subtitle {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 20px;
    line-height: 1.4;
    color: var(--color-text);
    margin: 0;
}

/* Sitemap Grid */
.sitemap-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.sitemap-column {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* Sitemap Category */
.sitemap-category {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.sitemap-category-header {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 8px;
    position: relative;
}

/* Connecting line between icon and diamond (passes through junction) */
.sitemap-category-icon::after {
    content: '';
    position: absolute;
    left: 72px;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 1px;
    background-color: #BBC9E3;
}

/* Diamond shape between line and title */
.sitemap-category-header::before {
    content: '';
    position: absolute;
    left: 112px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 8px;
    height: 8px;
    border: 1px solid #BBC9E3;
    background-color: var(--color-white);
    z-index: 1;
}

.sitemap-category-icon {
    width: 72px;
    height: 72px;
    background-color: var(--color-white);
    border: 1px solid #BBC9E3;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}

.sitemap-category-icon img {
    width: 40px;
    height: 40px;
}

.sitemap-category-title {
    font-family: var(--font-fraunces);
    font-weight: 900;
    font-size: 24px;
    line-height: 1.2;
    color: var(--color-dark);
    margin: 0;
    margin-left: 56px;
}

/* Sitemap Links - Flowchart Style */
.sitemap-links {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-left: 88px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 16px;
    padding-bottom: 8px;
}

/* Vertical line - starts exactly from the horizontal line junction */
.sitemap-links::before {
    content: '';
    position: absolute;
    left: 0;
    top: -44px;
    bottom: 24px;
    width: 1px;
    background-color: #BBC9E3;
}

.sitemap-links li {
    position: relative;
    padding-left: 48px;
    display: flex;
    align-items: center;
}

/* Horizontal branch line - doesn't touch the button */
.sitemap-links li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 1px;
    background-color: #BBC9E3;
}

/* Vertical tick at the end of branch */
.sitemap-links li::after {
    content: '';
    position: absolute;
    left: 32px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 12px;
    background-color: #BBC9E3;
}

.sitemap-links a {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
    text-decoration: none;
    background-color: var(--color-yellow-light);
    border: 1px solid var(--color-yellow);
    border-radius: 50px;
    padding: 10px 20px;
    display: inline-block;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.sitemap-links a:hover {
    background-color: var(--color-yellow);
    border-color: var(--color-yellow);
    color: var(--color-dark);
    text-decoration: none;
}


/* ==========================================
   WRITER PROFILE SECTION
   ========================================== */
.writer-profile-section-ls {
    background-color: var(--color-white);
    padding: 60px var(--container-padding) 80px;
}

.writer-profile-container-ls {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

/* Writer Card (Left Column) */
.writer-card-ls {
    flex: 0 0 888px;
    background: var(--color-white);
    border: 1px solid var(--color-yellow);
    border-radius: 24px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.writer-header-ls {
    display: flex;
    gap: 24px;
}

.writer-avatar-ls {
    width: 266px;
    height: 214px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
}

.writer-avatar-ls img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.writer-info-ls {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
    justify-content: center;
}

.writer-name-rating-ls {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.writer-name-ls {
    display: flex;
    align-items: center;
    gap: 2px;
}

.writer-name-ls h1 {
    font-family: var(--font-fraunces);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.2;
    color: var(--color-dark);
    margin: 0;
}

.verified-badge-ls {
    width: 24px;
    height: 24px;
}

.writer-rating-ls {
    display: flex;
    align-items: center;
    gap: 4px;
}

.writer-rating-ls .stars-ls {
    display: flex;
    gap: 0;
}

.writer-rating-ls .star-ls {
    width: 20px;
    height: 20px;
}

.rating-number-ls {
    font-family: var(--font-work-sans);
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    color: var(--color-dark);
}

.writer-about-ls {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.about-title-ls {
    font-family: var(--font-fraunces);
    font-weight: 600;
    font-size: 20px;
    line-height: 1.2;
    color: var(--color-dark);
    margin: 0;
}

.about-text-ls {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #000;
    margin: 0;
}

/* Writer Stats */
.writer-stats-ls {
    display: flex;
    gap: 12px;
}

.stat-item-ls {
    flex: 1;
    background: rgba(235, 237, 240, 0.2);
    border-radius: 10px;
    padding: 8px 4px;
    text-align: center;
    display: flex;
    flex-direction: column;
}

.stat-value-ls {
    font-family: var(--font-work-sans);
    font-weight: 600;
    font-size: 20px;
    line-height: 1.5;
    color: var(--color-dark);
}

.stat-value-ls.stat-green-ls {
    color: #16a149;
}

.stat-label-ls {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-text);
}

/* Reviews Section */
.writer-reviews-ls {
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
}

.reviews-title-ls {
    font-family: var(--font-fraunces);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.2;
    color: var(--color-dark);
    margin: 0;
    width: 100%;
}

.reviews-count-ls {
    font-size: 20px;
}

.reviews-grid-ls {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    width: 100%;
}

.review-card-ls {
    background: var(--color-white);
    border: 1px solid var(--color-stroke);
    border-radius: 24px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.review-header-ls {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.reviewer-name-ls {
    font-family: var(--font-fraunces);
    font-weight: 600;
    font-size: 20px;
    line-height: 1.2;
    color: var(--color-dark);
}

.review-stars-ls {
    display: flex;
    gap: 0;
}

.review-stars-ls .star-ls {
    width: 20px;
    height: 20px;
}

.review-text-ls {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-text);
    margin: 0;
}

.review-date-ls {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
}

.btn-more-reviews-ls {
    background: var(--color-white);
    border: 1px solid var(--color-dark);
    border-radius: 50px;
    padding: 16px 32px;
    font-family: var(--font-work-sans);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-more-reviews-ls:hover {
    background-color: var(--color-yellow-light);
}

/* Writer Sidebar (Right Column) */
.writer-sidebar-ls {
    flex: 1;
    background: var(--color-white);
    border: 1px solid var(--color-yellow);
    border-radius: 24px;
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
}

.sidebar-title-ls {
    font-family: var(--font-fraunces);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.2;
    color: var(--color-dark);
    margin: 0;
    text-align: center;
    width: 100%;
}

.sidebar-features-ls {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.sidebar-feature-ls {
    background: #fbfbfc;
    border-radius: 50px;
    padding: 4px 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.feature-check-ls {
    font-size: 20px;
}

.feature-text-ls {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
}

.btn-hire-ls {
    background: var(--color-yellow);
    border: none;
    border-radius: 50px;
    padding: 16px 32px;
    font-family: var(--font-work-sans);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
    cursor: pointer;
    width: 100%;
    transition: background-color 0.2s ease;
    text-align: center;
}

.btn-hire-ls:hover {
    background-color: #e5ae13;
}


.fa-css:after{
    content: ' Kastellorizou, 3A, Aglantzia, Nicosia, 2108, Cyprus';
}

/* ==========================================
   GUARANTEES HERO SECTION
   ========================================== */
.guarantees-hero {
    background-color: var(--color-white);
    padding: 0 var(--container-padding);
    overflow: hidden;
}

.guarantees-hero-container {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    min-height: 712px;
}

.guarantees-hero-content {
    flex: 0 0 632px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.guarantees-hero-text {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.guarantees-hero-title {
    font-family: var(--font-fraunces);
    font-weight: 900;
    font-size: 64px;
    line-height: 1.2;
    color: var(--color-dark);
    margin: 0;
}

.guarantees-hero-description {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.guarantees-hero-description p {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 20px;
    line-height: 1.4;
    color: var(--color-text);
    margin: 0;
}

.guarantees-hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-yellow);
    border-radius: 50px;
    padding: 16px 32px;
    font-family: var(--font-work-sans);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
    text-decoration: none;
    transition: background-color 0.2s ease;
    width: fit-content;
}

.guarantees-hero-btn:hover {
    background-color: #e5ae13;
}

/* Hero Image Section */
.guarantees-hero-image-wrapper {
    position: relative;
    flex: 0 0 614px;
    height: 712px;
}

.guarantees-hero-image-bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 619px;
    background-color: var(--color-yellow-light);
    border-radius: 37px 37px 0 0;
}

.guarantees-hero-image {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom;
    z-index: 1;
}

/* Rating Badges */
.guarantees-badge {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background-color: var(--color-white);
    border: 1px solid var(--color-yellow);
    border-radius: 12px;
    z-index: 2;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.guarantees-badge .badge-logo {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.guarantees-badge .badge-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.guarantees-badge .badge-name {
    height: auto;
    max-height: 14px;
    max-width: 100px;
}

.guarantees-badge .badge-name-group {
    display: flex;
    align-items: baseline;
    gap: 0;
}

.guarantees-badge .badge-name-suffix {
    height: auto;
    max-height: 10px;
    max-width: 14px;
    padding-left: 1px;
}

.guarantees-badge .badge-rating {
    display: flex;
    align-items: center;
    gap: 5px;
}

.guarantees-badge .badge-score {
    font-family: var(--font-kanit);
    font-weight: 500;
    font-size: 18px;
    line-height: 1.5;
    color: var(--color-navy-blue);
}

.guarantees-badge .badge-stars {
    width: 90px;
    height: 18px;
}

/* Badge Positions */
.guarantees-badge-cheapestessay {
    top: 190px;
    right: -60px;
}

.guarantees-badge-sitejabber {
    bottom: 180px;
    left: 10px;
}

.guarantees-badge-reviewsio {
    bottom: 100px;
    right: -40px;
}

/* ==========================================
   GUARANTEES FEATURES SECTION
   ========================================== */
.guarantees-features {
    background-color: var(--color-white);
    padding: 120px var(--container-padding);
}

.guarantees-features-container {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 48px;
    align-items: center;
}

.guarantees-features-heading {
    text-align: center;
}

.guarantees-features-title {
    font-family: var(--font-fraunces);
    font-weight: 900;
    font-size: 48px;
    line-height: 1.2;
    color: var(--color-dark);
    margin: 0;
}

.guarantees-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 100%;
}

.guarantee-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-yellow);
    border-radius: 24px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
}

.guarantee-card .guarantee-icon {
    width: 110px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.guarantee-card .guarantee-icon img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.guarantee-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.guarantee-title {
    font-family: var(--font-fraunces);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.2;
    color: var(--color-dark);
    margin: 0;
}

.guarantee-description {
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
    margin: 0;
}

.cta-footer-success,.cta-newsletter-success{
    display: none;
}
.cta-footer-success-title,.cta-newsletter-success-title{
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 30px;
    line-height: 1.2;
    color: var(--color-dark);
    font-variation-settings: 'SOFT' 0, 'WONK' 1;
}
.cta-footer-success-link,.cta-newsletter-success-link{
    margin-top: 10px;
}
.cta-footer-success-link a,.cta-newsletter-success-link a{
    background-color: var(--color-yellow);
    color: var(--color-dark);
    padding: 16px 32px;
    border: none;
    border-radius: 50px;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
    display: block;
    max-width: 260px;
    text-align: center;
}
.cta-newsletter-success-link a{
    margin: 0 auto;
}
.cta-footer-success-link a:hover,.cta-newsletter-success-link a:hover{
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgb(250 193 21 / 40%);
}

.text-cont__text.error-page{
    background-color: var(--color-white);
    padding: 100px 20px 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.error-page-container {
    position: relative;
    width: 100%;
    max-width: 1300px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 23px;
    flex-direction: column;
}
.error-page-title{
    font-family: var(--font-fraunces);
    font-weight: 900;
    line-height: 1.2;
    color: var(--color-dark);
    display: flex;
    flex-direction: column;
    margin: 0;
    font-size: 56px;
}
.error-page-sub__title{
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 18px;
    line-height: 1.4;
    color: var(--color-text);
    margin: 0;
}
.error-page-btns{
    display: flex;
    gap: 16px;
}
.error-page__banner-info_btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: var(--color-yellow);
    border: 1px solid var(--color-yellow);
    border-radius: 50px;
    padding: 16px 32px;
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}
.error-page__banner-info_btn:hover{
    background-color: white;
}
.error-page__banner-info_btn2{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: white;
    border: 1px solid var(--color-yellow);
    border-radius: 50px;
    padding: 16px 32px;
    font-family: var(--font-work-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}
.error-page__banner-info_btn2:hover{
    background-color: var(--color-yellow);
}
.contact-card-text-addr:after{
    content: attr(data-addr);
}

.nr--stars-box {
    display: flex;
    align-items: center;
    gap: 6px;
}

.nr--stars {
    position: relative;
    width: 100px;
    height: 20px;
    background: url("/wp-content/themes/cheapestessay/assets/writers/star-empty.svg") repeat-x;
    background-size: 20px 20px;
}

.nr--stars-fill {
    height: 100%;
    background: url("/wp-content/themes/cheapestessay/assets/writers/star-filled.svg") repeat-x;
    background-size: 20px 20px;
}