:root {
    --orange-600: #e8720c;
    --orange-500: #f28a1f;
    --orange-400: #f9a03f;
    --yellow-400: #fcd34d;
    --yellow-300: #fde68a;
    --yellow-200: #fef3c7;
    --yellow-100: #fffbeb;
    --white: #ffffff;
    --gray-50: #fafaf9;
    --gray-100: #f5f5f4;
    --gray-600: #57534e;
    --gray-700: #44403c;
    --gray-800: #292524;
    --gray-900: #1c1917;
}

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

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    background: var(--white);
    color: var(--gray-700);
    font-family: "DM Sans", Arial, sans-serif;
    line-height: 1.7;
}

/* Header */
header {
    position: relative;
    overflow: hidden;
    min-height: 330px;
    padding: 25px 40px 75px;
    text-align: center;
    background: linear-gradient(
        135deg,
        var(--orange-500) 0%,
        var(--orange-400) 45%,
        var(--yellow-400) 100%
    );
}

/* Decorative background circles */
header::before {
    content: "";
    position: absolute;
    top: -250px;
    right: -120px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.18) 0%,
        transparent 70%
    );
}

header::after {
    content: "";
    position: absolute;
    bottom: -250px;
    left: -100px;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.13) 0%,
        transparent 70%
    );
}

/* Logo link */
header > a {
    position: relative;
    z-index: 2;
    display: flex;
    width: fit-content;
    align-items: center;
    text-decoration: none;
}

/* Logo image */
header > a img {
    display: block;
    width: 180px;
    max-width: 100%;
    max-height: 80px;
    object-fit: contain;
}

/* Page heading */
header h1 {
    position: relative;
    z-index: 2;
    margin-top: 45px;
    margin-bottom: 14px;
    color: var(--white);
    font-family: "Quicksand", Arial, sans-serif;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -1px;
}

/* Effective-date lines */
header p {
    position: relative;
    z-index: 2;
    margin-bottom: 4px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
}

header p strong {
    color: var(--white);
}

/* White curved-looking bottom section */
header {
    border-radius: 0 0 50% 4% / 0 0 12% 4%;
}

/* Main terms container */
main {
    width: min(900px, calc(100% - 40px));
    margin: 0 auto;
    padding: 65px 20px 80px;
}

/* Individual sections */
main > section {
    margin-bottom: 48px;
}

/* Main section headings */
main > section > h2 {
    margin-bottom: 20px;
    padding: 12px 16px;
    border-left: 5px solid var(--orange-400);
    border-radius: 0 12px 12px 0;
    background: linear-gradient(
        90deg,
        var(--yellow-100) 0%,
        rgba(255, 251, 235, 0) 100%
    );
    color: var(--gray-800);
    font-family: "Quicksand", Arial, sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.35;
}

/* Subheadings such as 3.1, 3.2 and 7.1 */
main section h3 {
    margin-top: 28px;
    margin-bottom: 12px;
    color: var(--orange-600);
    font-family: "Quicksand", Arial, sans-serif;
    font-size: 18px;
    font-weight: 700;
}

/* Paragraphs */
main section p {
    margin-bottom: 14px;
    color: var(--gray-600);
    font-size: 15px;
}

/* Strong text */
main section strong {
    color: var(--gray-800);
    font-weight: 600;
}

/* Lists */
main section ul {
    margin: 16px 0 20px;
    padding: 0;
    list-style: none;
}

main section ul li {
    position: relative;
    margin-bottom: 10px;
    padding-left: 28px;
    color: var(--gray-600);
    font-size: 15px;
}

main section ul li::before {
    content: "";
    position: absolute;
    top: 9px;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--orange-400);
}

/* Give the refund section a highlighted box */
/* It is the seventh direct section inside main */
main > section:nth-of-type(7) {
    padding: 28px;
    border: 1px solid var(--yellow-300);
    border-radius: 16px;
    background: linear-gradient(
        135deg,
        var(--yellow-100),
        var(--yellow-200)
    );
}

main > section:nth-of-type(7) > h2 {
    background: var(--white);
}

/* Contact and grievance details */
address {
    margin-top: 18px;
    padding: 20px 24px;
    border-left: 4px solid var(--orange-400);
    border-radius: 0 12px 12px 0;
    background: var(--yellow-100);
    font-style: normal;
}

address p:last-child {
    margin-bottom: 0;
}

/* Links inside the Terms */
main a {
    color: var(--orange-600);
    font-weight: 500;
    text-decoration: none;
}

main a:hover {
    color: var(--orange-500);
    text-decoration: underline;
}

/* Footer */
footer {
    padding: 40px 20px;
    background: var(--gray-900);
    color: rgba(255, 255, 255, 0.65);
    text-align: center;
}

footer p {
    font-size: 13px;
}

footer a {
    color: var(--orange-400);
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

/* Tablet and mobile */
@media (max-width: 768px) {
    header {
        min-height: 280px;
        padding: 20px 20px 60px;
    }

    header > a img {
        width: 145px;
        max-height: 65px;
    }

    header h1 {
        margin-top: 40px;
        font-size: 34px;
    }

    main {
        width: 100%;
        padding: 45px 20px 60px;
    }

    main > section {
        margin-bottom: 38px;
    }

    main > section > h2 {
        font-size: 20px;
    }

    main section h3 {
        font-size: 17px;
    }

    main > section:nth-of-type(7) {
        padding: 20px;
    }
}

/* Small mobile screens */
@media (max-width: 480px) {
    header {
        min-height: 250px;
    }

    header > a img {
        width: 125px;
    }

    header h1 {
        margin-top: 32px;
        font-size: 29px;
    }

    header p {
        font-size: 13px;
    }

    main {
        padding-right: 16px;
        padding-left: 16px;
    }

    main > section > h2 {
        padding: 10px 13px;
        font-size: 19px;
    }

    main section p,
    main section ul li {
        font-size: 14px;
    }

    main > section:nth-of-type(7) {
        padding: 16px;
    }
}