/*
Theme Name: HANAKOGANEI KENMOKU TABLE TENNIS CLUB
Theme URI: https://example.com/ace-tt-school
Author: Antigravity
Author URI: https://example.com
Description: A premium, dynamic WordPress theme for Ace Table Tennis School.
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: custom-theme, premium, sports
Text Domain: ace-tt-school
*/

:root {
    /* Premium Colors */
    --color-primary: #052020;
    /* Deepest Forest Green */
    --color-primary-light: #0F3D3E;
    --color-accent: #FF4500;
    /* Energetic Orange */
    --color-accent-glow: rgba(255, 69, 0, 0.4);
    --color-bg-dark: #020F0F;
    --color-bg-light: #F4F7F7;

    --color-text: #E0E0E0;
    --color-text-dark: #333333;
    --color-text-muted: #A0A0A0;

    --color-white: #FFFFFF;
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);

    /* Typography */
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Noto Sans JP', sans-serif;

    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 5rem;
    --spacing-xl: 10rem;

    /* Transitions */
    --transition-fast: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base Reset */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    /* v84: Increased base font size for better visibility */
    font-size: 17.5px;
}

body {
    font-family: var(--font-body);
    color: var(--color-text-dark);
    /* v84: Increased line-height for readability */
    line-height: 1.9;
    background-color: var(--color-bg-light);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition-fast);
}

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

ul {
    list-style: none;
}

/* Utility Classes */
.container {
    width: 88%;
    max-width: 1200px;
    margin: 0 auto;
}

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

.text-white {
    color: var(--color-white) !important;
}

.bg-dark {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.block {
    display: block;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 1rem 2.5rem;
    border-radius: 0;
    /* Premium look often embraces sharp or slightly rounded, going with standard buttons here */
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: 0.1em;
    font-size: 0.9rem;
    text-transform: uppercase;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all var(--transition-fast);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn-primary,
.btn-accent {
    background: var(--color-accent);
    color: var(--color-white);
    box-shadow: 0 4px 20px var(--color-accent-glow);
}

.btn-primary::before,
.btn-accent::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: 0.5s;
    z-index: -1;
}

.btn-primary:hover::before,
.btn-accent:hover::before {
    left: 100%;
}

.btn-primary:hover,
.btn-accent:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--color-accent-glow);
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--color-white);
    color: var(--color-white);
}

.btn-outline:hover {
    background: var(--color-white);
    color: var(--color-text-dark);
}

/* Header */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: var(--color-primary);
    /* Force Navy */
    transition: all 0.4s ease;
    height: auto;
    /* Allow growth */
    min-height: 100px;
    /* Ensure sufficient base height */
    display: flex;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 1rem 0;
    /* Add vertical breathing room */
}

.header.scrolled {
    background: rgba(12, 31, 64, 0.95);
    /* Navy with slight transparency */
    backdrop-filter: blur(10px);
    padding: 0.5rem 0;
    /* Slightly compact on scroll */
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 2rem;
}

/* v98: Enforce 2-Row Header on Tablet/Desktop */
@media (min-width: 768px) {
    .header-container {
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 15px;
        /* Spacing between Logo/Title and Menu */
    }

    .nav {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    /* Ensure Nav Links have enough padding */
    .nav-list {
        gap: 2.5rem;
        padding-top: 5px;
        justify-content: center;
    }
}

.logo {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--color-white);
    /* White text */
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 15px;
    /* Removed pill container styles */
}

.logo-img-wrapper {
    background: white;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.logo:hover .logo-img-wrapper {
    transform: scale(1.05);
}

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

.logo-text {
    display: inline-block;
}

/* Ensure logo works on light sections if header sticky changes color, 
   but for this design we assume dark header overlays hero or becomes dark-glass */
.header.scrolled .logo {
    color: var(--color-white);
}

.nav-list {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    /* v40: Reduced gap for larger text */
}

.nav-link {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    /* v40: Increased size (approx +5px from 0.85rem) */
    font-weight: 700;
    /* v40: Bold */
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--color-accent);
    transition: width 0.3s ease;
}

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

.nav-link:hover::after {
    width: 100%;
}

/* Mobile Menu */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1001;
}

.bar {
    display: block;
    width: 25px;
    height: 2px;
    background: var(--color-white);
    margin: 6px 0;
    transition: 0.3s;
}

/* v63: FORCE REMOVE ALL ACCENTS FROM MIDDLE CARD */
.concept-card:nth-child(2) {
    border-bottom: none !important;
    background: #ffffff !important;
}

.concept-card:nth-child(2)::before,
.concept-card:nth-child(2)::after {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    border: none !important;
}

/* Hero Section */
.hero {
    position: relative;
    height: 100vh;
    min-height: 700px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--color-white);
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.hero-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(5, 32, 32, 0.85) 0%, rgba(5, 32, 32, 0.4) 60%, rgba(5, 32, 32, 0.8) 100%);
}

.hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: slowZoom 20s infinite alternate;
}

@keyframes slowZoom {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.1);
    }
}

.hero-content {
    /* v35: Center Overlay */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 800px;
    z-index: 2;
    text-align: center;
}

.hero-title {
    font-family: var(--font-heading);
    /* v85: Fixed responsive sizes + Wrapping Allowed */
    font-size: 2.5rem;
    /* Mobile default ~43px */
    font-weight: 800;
    line-height: 1.1;
    /* Slightly tighter for potential multi-line */
    letter-spacing: -0.02em;
    margin-bottom: 2rem;
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);

    /* v85: Allow wrapping */
    white-space: normal;

    /* v80: Safety for overflow */
    width: 100%;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
}

@media (min-width: 768px) {
    .hero-title {
        /* v99: Reduced font size by ~10pt (approx from 4rem to 3.2rem) */
        font-size: clamp(1.8rem, 4vw, 3.2rem);
        max-width: 90%;
        margin-left: auto;
        margin-right: auto;
        line-height: 1.2;
    }
}

.hero-subtext {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    line-height: 2.0;
    /* v60: Increased line height */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.hero-title .block {
    display: block;
    /* v77: Remove gradient, strictly White */
    color: #ffffff !important;
    background: none !important;
    -webkit-text-fill-color: #ffffff !important;
}

.hero-subtitle {
    /* v35: Increased size for readability */
    font-size: 1.3rem;
    margin-bottom: 3rem;
    opacity: 0.9;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.hero-actions {
    display: flex;
    margin: 0 auto;
    justify-content: center;
    gap: 1.5rem;
}

/* Scroll Down */
.scroll-down {
    position: absolute;
    bottom: 3rem;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.5);
    font-family: var(--font-heading);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.scroll-line {
    width: 1px;
    height: 60px;
    background: rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.scroll-line::after {
    content: '';
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-accent);
    animation: scrollDrop 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}

@keyframes scrollDrop {
    0% {
        top: -100%;
    }

    50% {
        top: 100%;
    }

    100% {
        top: 100%;
    }
}

/* Section Components */
.section {
    padding: var(--spacing-xl) 0;
}

.section-header {
    margin-bottom: var(--spacing-lg);
    text-align: center;
}

.section-subtitle {
    font-family: var(--font-heading);
    color: var(--color-accent);
    font-size: 0.9rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    margin-bottom: 1rem;
    display: block;
}

.section-title {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    color: var(--color-primary);
    font-weight: 700;
}

/* Concept Section - Modern Cards */
.concept-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

/* v44: Coach Profile List */
.coach-profile-list {
    margin: 0;
    padding: 0;
}

.profile-row {
    display: flex;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding: 0.8rem 0;
}

.profile-row:last-child {
    border-bottom: none;
}

.profile-row dt {
    font-weight: 700;
    width: 150px;
    /* v50: Fixed width for alignment */
    flex-shrink: 0;
    /* v50: Prevent shrinking */
    box-sizing: border-box;
    color: var(--color-primary);
}

.profile-row dd {
    margin: 0;
    flex-grow: 1;
    line-height: 1.6;
}

/* Mobile responsive for profile */
@media (max-width: 500px) {
    .profile-row {
        flex-direction: column;
        gap: 0.2rem;
    }

    .profile-row dt {
        width: 100%;
        color: var(--color-accent);
        font-size: 0.9em;
    }
}

.concept-card {
    background: #ffffff;
    padding: 3rem 2rem;
    border-radius: 8px;
    /* v48: Rounded corners */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    /* v48: Drop shadow */
    border: none;
    /* v48: Remove border */
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* v48: Orange line for the middle card (Mental Support) */
.concept-card:nth-child(2) {
    border-bottom: 5px solid #ff7f50;
}

.concept-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

.concept-card::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--color-accent);
    transform: scaleX(0);
    transition: transform 0.4s ease;
    transform-origin: left;
}

.concept-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
}

.concept-card:hover::before {
    transform: scaleX(1);
}

.concept-icon {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
}

.concept-card h3 {
    font-family: var(--font-heading);
    color: var(--color-primary);
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

/* Courses - Premium Layout */
.bg-light {
    background: #F8FBFB;
}

.course-list {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.course-item {
    /* v37: Switch to Flexbox for easier row-reversal */
    display: flex;
    align-items: center;
    /* v29: Used Flexbox, but here we coordinate the two columns */
    gap: 4rem;
}

/* v37: Automatic Zig-Zag */
.course-item:nth-child(even) {
    flex-direction: row-reverse;
}

.course-item:nth-child(even) .course-info {
    text-align: right;
    /* Not actually used in current structure if we switch to unified structure below */
}

/* Ensure images and content columns behave as 50% split in flex */
.course-img-col,
.course-content-col {
    flex: 1;
    width: 50%;
    /* Explicit width guidance for flex items */
}

/* Mobile Stack */
@media (max-width: 900px) {

    .course-item,
    .course-item:nth-child(even) {
        flex-direction: column;
        gap: 2rem;
    }

    .course-img-col,
    .course-content-col {
        width: 100%;
    }
}

.course-img-wrapper {
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
    height: 350px;
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start !important;
    /* v54: Force Left Align items */
}

.course-category-label {
    display: inline-block;
    padding: 0.4rem 1.2rem;
    background: var(--color-accent);
    color: white;
    font-size: 0.9rem;
    font-weight: 700;
    border-radius: 50px;
    margin: 0 0 1rem 0 !important;
    /* v54: Reset margin for left align */
    align-self: flex-start !important;
    /* v54: Align Self Left */
}

.course-img-placeholder {
    width: 100%;
    height: 100%;
    background: var(--color-primary);
}

.course-info h3 {
    font-family: var(--font-heading);
    font-size: 2rem;
    margin-bottom: 1rem;
    color: var(--color-primary);
}

.course-info h3::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: var(--color-accent);
    margin-top: 1rem;
}

.price {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    color: var(--color-primary);
    font-weight: 700;
    margin-top: 2rem;
}

.unit {
    font-size: 1rem;
    font-weight: 400;
    color: var(--color-text-muted);
    margin-left: 0.5rem;
}

/* Coaches */
.coach-profile {
    display: flex;
    background: white;
    max-width: 900px;
    margin: 0 auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.05);
}

.coach-img-wrapper {
    width: 40%;
}

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

.coach-details {
    padding: 4rem;
    width: 60%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.coach-name {
    font-family: var(--font-heading);
    font-size: 2rem;
    color: var(--color-primary);
    margin-bottom: 0.5rem;
}

/* v38: Coach Placeholder Layout Fix */
.coach-placeholder .coach-img-wrapper {
    /* Center the logo image */
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fafafa;
    /* visual consistency */
}

.coach-placeholder .coach-details {
    /* Force Left align for text */
    text-align: left;
    align-items: flex-start;
}

.coach-role {
    font-size: 0.8rem;
    color: var(--color-accent);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 2rem;
}

.info-group p {
    margin: 0;
}

/* v47: Info Box Flex Layout */
.info-flex-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.info-text-content {
    flex: 1;
}

.info-img-content {
    margin-left: 2rem;
    flex-shrink: 0;
}

.info-cat-img {
    width: 140px;
    height: auto;
    display: block;
}

/* Mobile responsive for Info Box */
@media (max-width: 600px) {
    .info-flex-wrapper {
        flex-direction: column;
        align-items: center;
    }

    .info-img-content {
        margin-left: 0;
        margin-top: 1.5rem;
    }

    .info-cat-img {
        width: 120px;
    }
}

/* v23: Standardize Button Styles */
.btn-primary,
button[type="submit"] {
    background-color: #ff4500 !important;
    /* v74: User requested strict Orange */
    color: #ffffff !important;
    border: none;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* Contact */
.contact {
    background: #e8f7ec;
    /* v43: Light Green */
    color: #1b4332;
    /* v43: Dark Green Text */
    position: relative;
    overflow: hidden;
}

.contact::before {
    content: 'ACE';
    position: absolute;
    top: -50px;
    right: -50px;
    font-size: 30rem;
    font-family: var(--font-heading);
    font-weight: 800;
    opacity: 0.03;
    pointer-events: none;
}

.contact-form {
    background: #ffffff;
    /* v43: White Box */
    padding: 3rem;
    border: 1px solid #1b4332;
    /* v43: Dark Border */
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(27, 67, 50, 0.05);
}

.form-group label {
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    opacity: 0.8;
    color: #1b4332;
    /* v43: Dark Green Label */
}

.form-group input,
.form-group textarea,
.form-group select {
    background: #ffffff;
    border: 1px solid rgba(27, 67, 50, 0.2);
    color: #1b4332;
}

.form-group input:focus,
.form-group textarea:focus {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--color-accent);
}

/* Footer */
.footer {
    /* v27: Update Footer Background to Navy (Header Color) per user request */
    background: #172554 !important;
    padding: 4rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.4);
    text-align: center;
}

/* Animation Utilities */
.reveal-text {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1s ease-out;
    /* v69: Ensure no gradient here either */
    background: none;
    -webkit-text-fill-color: initial;
}

.reveal-text.in-view {
    opacity: 1;
    transform: translateY(0);
}

.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: 0.8s ease-out;
}

.fade-in-up.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* v78: Contact Success Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    backdrop-filter: blur(4px);
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background: #ffffff;
    padding: 3rem;
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.modal-overlay.active .modal-content {
    transform: translateY(0);
}

.modal-title {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    color: var(--color-primary);
    margin-bottom: 1.5rem;
    font-weight: 700;
}

p {
    margin-bottom: 2rem;
    font-weight: 500;
    /* v84: Force zero indentation and justify alignment globally for p tags */
    text-indent: 0 !important;
    text-align: justify;
}

/* Specific overrides for centered text components if needed */
.text-center p {
    text-align: center;
    /* keep center for explicit center utility, BUT see below for specific bio/concept text */
}

/* v84: Explicitly target long text blocks for justify/left alignment to override center text-align of their parents */
.concept-card p,
.coach-bio-text,
.course-desc,
.support-content p {
    text-align: justify;
    text-indent: 0 !important;
}

.modal-body {
    font-size: 1rem;
    color: var(--color-text-dark);
    line-height: 1.8;
    margin-bottom: 2rem;
}

.modal-close {
    cursor: pointer;
    min-width: 150px;
}

/* v79: News Section */
.news-list-container {
    max-width: 800px;
    margin: 0 auto;
    background: #ffffff;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.news-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.news-item {
    display: flex;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.news-item:last-child {
    border-bottom: none;
}

.news-date {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-primary);
    width: 120px;
    flex-shrink: 0;
}

.news-title {
    flex-grow: 1;
    color: var(--color-text-dark);
}

/* Mobile responsive for News */
@media (max-width: 500px) {
    .news-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .news-date {
        font-size: 0.9rem;
        color: var(--color-accent);
    }
}

.hero {
    position: relative;
    width: 100%;
    /* v34: Remove fixed height/min-height to allow image to dictate height */
    min-height: auto;
    height: auto;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-bg {
    /* v34: Reset to simple container */
    /* v35: Change to relative so it dictates height, but allow overlay to sit on top easily */
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    /* height: 100%; removed to let img drive height */
    z-index: 1;
    /* Ensure it's behind content but visible */
}

/* v34: Ensure Hero Image is Full Width & maintains Aspect Ratio */
.hero-img {
    width: 100%;
    height: auto;
    /* Allow height to shrink */
    display: block;
    object-fit: contain;
    /* Ensure full image is visible, no cropping */
    /* If object-fit: contain leaves gaps, we might want width: 100%; height: auto; which is default for img usually */
    /* Key requirement: "画像の全貌が常に表示される" -> No cropping */
    object-position: center 20%;
    /* Adjusted to center characters better, slightly from top */
}

/* Sections */
.section-padding {
    padding: 6rem 0;
    /* Reduced top padding as requested earlier or good default */
}

/* Reverting bg-light to white or removing usage for courses */
.bg-light {
    background-color: #fff;
}

/* Courses */
.course-info-box {
    /* v31: Light Green Theme */
    /* v33: Force override of any lingering dark modes */
    background: #e8f7ec !important;
    /* Light Green */
    border-radius: 12px;
    padding: 3rem;
    margin-top: 4rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    color: #1b4332 !important;
    /* Dark Green Text */
}

.course-info-box h3,
.course-info-box strong {
    color: #1b4332 !important;
    /* Dark Green Headers */
}

.course-info-box .info-list li {
    border-bottom: 1px solid rgba(27, 67, 50, 0.2);
    /* Dark Green separator with opacity */
}

/* Coach Section */
.coach-zigzag {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.coach-item {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
    /* v19: Align top handled in desktop media query */
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    padding: 3rem;
}

@media (min-width: 900px) {
    .coach-item {
        flex-direction: row;
        align-items: flex-start;
        /* v19: Align image top with content top */
    }

    .coach-item:nth-child(even) {
        flex-direction: row-reverse;
    }
}

.coach-img-wrapper {
    flex: 0 0 35%;
    position: relative;
    width: 100%;
    height: 500px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    /* v20: Pop-in defined in general rule */
    animation: popIn 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    margin-top: 0;
    /* Ensure no top margin */
}

.coach-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform 0.5s ease;
}

.coach-item:hover .coach-img {
    transform: scale(1.05);
}

.coach-details {
    flex: 1;
    width: 100%;
    padding-top: 0;
    /* v19: Ensure no top padding pushing name down */
}

.coach-name {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--color-primary);
    font-family: var(--font-heading);
    border-bottom: 2px solid var(--color-primary);
    display: inline-block;
    padding-bottom: 0.5rem;
    margin-top: 0;
    /* v19: Align top */
    line-height: 1.2;
}

/* Coach Bio Container - v18: 1 Column (Vertical Stack) */
.coach-bio-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.coach-bio-box {
    border: 2px solid var(--color-primary);
    border-radius: 8px;
    padding: 1.5rem;
    background-color: transparent;
    height: auto;
}

.coach-bio-box h4 {
    font-size: 1.1rem;
    color: white;
    margin-bottom: 0.8rem;
    background: var(--color-primary);
    display: inline-block;
    padding: 0.3rem 1.2rem;
    border-radius: 20px;
}

/* v55: Coach Title Suffix */
.coach-title-suffix {
    font-size: 0.7em;
    font-weight: normal;
    margin-left: 0.3em;
}

/* v20: Coach Profile Text */
/* v54: Coach Bio Text - Global */
.coach-bio-text {
    white-space: pre-wrap;
    line-height: 1.8;
    color: var(--color-primary);
    /* Navy text - v18 */
    font-size: 0.95rem;
    text-align: left !important;
    /* v52: Force Left Align */
    text-indent: 0 !important;
    /* v52: Remove Indent */
    padding-left: 0 !important;
    /* v52: Remove Padding */
    margin-left: 0 !important;
    /* v54: Remove Margin */
}

/* v54: Special styling for Coming Soon Placeholder */
.coach-placeholder .coach-img-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* v59: Start - Coming Soon Logo Aspect Ratio */
/* v68: Removed specific sizing for placeholder to match standard coach image style */
/* The placeholder now uses the standard .coach-img class styles */
.coach-placeholder .coach-img {
    /* v68: Ensure standard fit */
    object-fit: contain;
    /* Keep contain for logo so it's not cut off, but fill box */
    /* Or cover if user wants exact same lookup, but logo might be cropped.
       User said: "logo image ... properly displayed within the frame". 
       Let's try contain + background first, but remove width constraints. */
    width: 100%;
    height: 100%;
    background-color: #fafafa;
    /* Keep light background for logo visibility */
    padding: 2rem;
    /* Add padding via CSS instead of inline */
}

/* v65: Responsive layout for placeholder */
@media (max-width: 600px) {

    /* v65: Force column layout with high specificity */
    .coach-zigzag .coach-item.coach-placeholder {
        flex-direction: column !important;
        text-align: center;
        gap: 1rem;
    }
}

/* v66: Responsive Hero Title */
/* v73: Enforce Flexbox Column Layout for Hero Content */
.hero-content {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 2rem !important;
    /* Space between elements */
}

.hero-title {
    /* v34: Original styles */
    font-family: var(--font-heading);
    font-weight: 700;
    /* Bold */
    /* v69/v71: Make text simple white, remove all gradients */
    color: #ffffff !important;
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: #ffffff !important;
    text-fill-color: #ffffff !important;

    line-height: 1.1;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    margin-bottom: 0 !important;
    /* Managed by gap */

    /* v66: Force single line responsive */
    white-space: nowrap;
    /* v73/v74: Strictly 13vw as requested */
    font-size: 13vw !important;
    /* Maximizes usage of width without overflow */
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    /* Safety against overflow */
    text-align: center;
}

/* v66: Override block spans to be inline for single line */
/* v71: Ensure child spans also have no gradient and are white */
.hero-title .block {
    display: inline-block !important;
    margin-right: 0.2em;
    /* Add spacing between words */
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: #ffffff !important;
    color: #ffffff !important;
}

/* v71: Hero Subtext Overrides */
.hero-subtext {
    color: #ffffff !important;
    text-align: center !important;
    font-weight: 500;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
    /* Stronger shadow for readability over image */
}

/* v59: End */

/* v67: Mobile Layout Fixes */
@media (max-width: 600px) {

    /* 1. Header Title Size */
    .logo-text span:first-child {
        font-size: 4vw !important;
    }

    /* 2. Hero Image Offset for Fixed Header */
    .hero {
        padding-top: 80px;
        /* Adjust based on header height */
    }

    /* 3. Coach Bio Padding Reduction -> Reverted */
    .coach-img {
        height: 250px;
    }

    /* v67: Fix Coach Section Mobile Padding */
    .coach-bio-box {
        padding: 1rem !important;
        /* v75: User requested reduced padding to maximize width, but 1rem seems okay.
           Let's make sure the container allows it.
           Actually, user said "reduce padding... to maximize width".
           I will try 0.5rem for specific achievement lists or general if needed.
           Let's keep 1rem generally but ensure text uses it well.
        */
    }

    /* v75: Mobile Achievements Specifics */
    .achieve-detail {
        padding-left: 1em;
        text-indent: -1em;
        font-size: 0.95rem;
        /* Slightly smaller for better fit if needed, or keep standard */
    }
}

/* v75: Achievement List Styling (Global) */
.achievement-list {
    margin-top: 0.5rem;
}

.achieve-group {
    margin-bottom: 1.2rem;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
    /* Optional separator for clarity */
    padding-bottom: 0.5rem;
}

.achieve-group:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.achieve-title {
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 0.3rem;
    display: block;
}

.achieve-detail {
    display: block;
    margin-bottom: 0.3rem;
    line-height: 1.6;
    /* Hanging indent desktop default too */
    padding-left: 1em;
    text-indent: -1em;
}

/* v72: Coach Card Sizing - Strictly 3px gap from edges using width calc */
@media (max-width: 600px) {
    #coaches .container {
        /* v72: User requested NOT to use padding for outer margins, so we reset/ensure full width here and control at card level */
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important;
    }

    .coach-item {
        /* v72: Explicit calculation for 3px side gaps */
        width: calc(100% - 6px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* 4. Coach Name Line Break */
    .coach-title-suffix {
        display: block;
        font-size: 0.8em;
        /* Optional: slightly smaller for the title part */
        margin-top: 0.2rem;
    }

    /* Ensure coach name container handles the block element */
    .coach-name {
        line-height: 1.3;
    }
}

.coach-placeholder .coach-bio-text {
    text-align: center !important;
}

@media (max-width: 768px) {

    .coach-item,
    .coach-item:nth-child(even) {
        flex-direction: column;
        padding: 2rem;
    }

    .coach-img-wrapper {
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
        height: 400px;
        /* Still tall on mobile */
        /* v20: Update animation moved to general rule or here override if needed */
        animation: popIn 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    }

    /* v24: Fix Mobile View - Ensure text boxes use full width */
    .coach-bio-box {
        width: 100%;
        /* Ensure full width */
        max-width: none;
        /* Remove any max-width constraints */
        margin-left: 0;
        margin-right: 0;
        padding: 1.5rem;
        /* Adjust padding if needed, but keep it comfortable */
    }

    .coach-name {
        text-align: center;
    }

    .coach-bio-container {
        grid-template-columns: 1fr;
        /* Ensure stack on mobile */
    }
}

/* Access alignment */
.access-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: left !important;
    /* Force left align */
}

.center-block {
    display: block;
    /* Ensure block level */
}

/* Zigzag Course Layout - v18/v19/v20 Updates */
.course-zigzag {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    max-width: 1100px;
    margin: 0 auto;
}

.course-item-alt {
    display: flex;
    align-items: center;
    gap: 4rem;
    background: white;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

/* Even items: Image Right, Content Left */
.course-item-alt:nth-child(even) {
    flex-direction: row-reverse;
}

.course-img-col {
    flex: 1;
    max-width: 45%;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    /* v20: Pop-in defined in general rule */
    animation: popIn 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    /* v21: Ensure container hugs image */
    display: flex;
    /* Removes potential inline gaps */
    align-items: stretch;
    /* v22: Ensure image stretches to full height */
    /* v23: Enforce strict 1:1 aspect ratio for ALL course images */
    aspect-ratio: 1 / 1;
}

.course-img-col img {
    width: 100%;
    height: 100%;
    /* v21: Ensure full height fill */
    object-fit: cover;
    transition: transform 0.6s ease;
    display: block;
}

/* v18: Group Lesson Image (2nd item in zigzag usually, or check structure)
   Assuming Group Lesson is the 2nd item or we can target via generic aspect ratio class if added
   Or target via nth-child:
   1st: Personal (Keep original?)
   2nd: Group (Make 1:1)
*/

/* v23: ALL images are now 1:1 by default via generic class above */
/* .course-item-alt:nth-child(2) .course-img-col { aspect-ratio: 1 / 1; } - Removed redundancy */

.course-content-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* v51: Ensure left alignment */
    /* v23: Revert to Left Align for text content, Title will be centered via align-self */
    align-items: flex-start;
    text-align: left;
}

.course-category-label {
    /* v29: Use Flexbox for perfect vertical + horizontal centering */
    display: inline-flex;
    justify-content: center;
    align-items: center;

    background: var(--color-accent);
    color: white;
    /* v18: White text */
    padding: 0.4rem 1.6rem;
    /* Balanced padding */
    border-radius: 50px;
    font-weight: 700;
    font-size: 1.25rem;
    /* v19: Increased size (approx +2pt/0.35rem from 0.9rem) */
    /* v23: Center THIS ELEMENT only */
    align-self: center;
    margin-bottom: 1rem;
    letter-spacing: 0.05em;
    text-align: center;
    min-width: 120px;
    line-height: normal;
    /* Reset line-height to let flexbox handle vertical align */
}

/* Accent underline for title */
.course-category-label::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background: var(--color-accent);
    margin-top: 0.5rem;
}

.course-item-alt:nth-child(even) .course-category-label::after {
    /* Align underline for reversed layout if needed, keeping it left for consistency usually looks best */
}

/* Responsive */
@media (max-width: 900px) {

    .course-item-alt,
    .course-item-alt:nth-child(even) {
        flex-direction: column;
        gap: 2rem;
    }

    .course-img-col {
        /* v28: Fix Mobile Image Distortion */
        width: 100%;
        /* Force full width */
        max-width: 100%;
        /* Prevent constraining */
        flex: 0 0 auto;
        /* Don't let flex shrink it */
        min-height: 0;
        /* Reset any min-height *
        height: auto;          /* Allow aspect-ratio to dictate height */
        aspect-ratio: 1 / 1 !important;
        /* Strict Square */
    }

    .course-img-col img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.coach-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* v20: Ensure images fill the circle/box nicely */
    object-position: top center;
    /* v56: Focus on face for portrait images */
}

@media (max-width: 768px) {
    .header .nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        background: var(--color-primary);
        flex-direction: column;
        justify-content: center;
        transition: 0.4s;
    }

    .header .nav.active {
        right: 0;
    }

    .nav-list {
        flex-direction: column;
        font-size: 1.5rem;
    }

    .course-item,
    .course-item:nth-child(even) {
        grid-template-columns: 1fr;
        text-align: left !important;
    }

    .course-zigzag {
        gap: 4rem;
    }

    .coach-profile {
        flex-direction: column;
    }

    .coach-img-wrapper,
    .coach-details {
        width: 100%;
    }

    .menu-toggle {
        display: block;
    }

    .hero-title {
        font-size: 3.5rem;
    }
}

/* Contact Watermark - v21: Light Background */
.contact {
    position: relative;
    overflow: hidden;
    /* v21: Light Background */
    background-color: #f4f7f6;
    color: var(--color-primary);
}

/* Re-apply bg-dark class style removal if needed */
.section.contact.bg-dark {
    background-color: #f4f7f6 !important;
    color: var(--color-primary) !important;
}

/* v21: Update text colors inside contact (outside form) to Navy */
/* v25: Revert to WHITE for Header text per user request */
.contact .section-title,
.contact .contact-lead {
    color: #FFFFFF !important;
}

.contact::before {
    content: "HANAKOGANEI KENMOKU TABLE TENNIS SCHOOL";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-5deg);
    font-size: 5vw;
    font-weight: 900;
    /* v21: Darker watermark for light bg */
    color: rgba(12, 31, 64, 0.05);
    white-space: nowrap;
    pointer-events: none;
    z-index: 1;
    font-family: var(--font-heading);
}

.contact-wrapper {
    position: relative;
    z-index: 2;
    /* Content above watermark */
    max-width: 600px;
    /* Centered form container */
    margin: 0 auto;
    /* v21: Dark Form Container */
    /* v22: Dark Form Container - Header Navy is usually --color-primary or similar dark */
    background-color: var(--color-primary);
    padding: 3rem;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.form-group {
    /* v22: Add spacing between fields (approx 1 line) */
    margin-bottom: 2rem;
}

/* v21: Inputs White BG, Black Text */
/* v23: Update Font to Heading Font (Montserrat) and Increase Size (+3pt approx -> 1.2rem) */
.contact-form input,
.contact-form textarea,
.contact-form select,
.contact-form button,
.contact-form label {
    font-family: var(--font-heading);
    font-size: 1.2rem !important;
    /* Increased size */
}

.contact-form input,
.contact-form textarea,
.contact-form select {
    background-color: white !important;
    color: #333 !important;
    border: 1px solid #ddd;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: #999;
}

/* v21: Labels inside form need to be white -> v43: Removed for light theme */
.contact-form label {
    color: #1b4332 !important;
}

/* v20: Access Info Line Decoration */
.access-content h3 {
    border-bottom: 2px solid var(--color-accent);
    display: inline-block;
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
    color: var(--color-primary);
}

/* Footer v21 & v42: Layout & Cat */
.footer-content-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    /* Align bottom so cat sits nicely */
    padding-bottom: 1rem;
}

.footer-left {
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Left align everything */
    gap: 1rem;
}

.footer-cat-img {
    max-width: 180px;
    height: auto;
    display: block;
    /* Make it look like it's sitting on the bottom edge */
    margin-bottom: -10px;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.footer-links li {
    display: inline-flex;
    align-items: center;
}

.footer-links li a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.3s;
    font-size: 1.1rem;
    /* v40: Increased size */
    font-weight: 700;
    /* v40: Bold */
}

/* Mobile Footer */
@media (max-width: 768px) {
    .footer-content-wrapper {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 2rem;
    }

    .footer-left {
        align-items: center;
        /* Center align on mobile */
        width: 100%;
    }

    .footer-cat-img {
        max-width: 120px;
        /* Smaller on mobile */
        margin-bottom: 0;
    }

    /* If user wanted cat "under or above", currently it's under because DOM order. 
       If we want specific order: */
    /* .footer-right { order: 2; } default is fine. */
}

.footer-links li a:hover {
    color: var(--color-accent);
}

/* v21: Separator Slash */
.footer-links li:not(:last-child)::after {
    content: "/";
    margin-left: 1rem;
    color: var(--color-accent);
    opacity: 0.7;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

.fade-in-up {
    animation: fadeInUp 0.8s ease forwards;
}

/* v20: Pop-in Animation (Scale Up + Fade In) instead of Float */
@keyframes popIn {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.pop-in {
    animation: popIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* Applying pop-in to elements instead of float */
.coach-img-wrapper,
.course-img-col,
.course-img-col img {
    /* Remove float animation */
    /* animation: floatImage ... removed */
    /* Add pop-in */
    animation: popIn 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}


@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

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

.fade-in-left {
    animation: fadeInLeft 0.8s ease forwards;
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

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

.fade-in-right {
    animation: fadeInRight 0.8s ease forwards;
}

/* Utilities */
.text-center {
    text-align: center;
}

.text-white {
    color: white;
}

.text-primary {
    color: var(--color-primary);
}

/* Responsive General */
@media (max-width: 768px) {
    html {
        font-size: 14px;
    }

    .section-title {
        font-size: 2rem;
        /* Smaller titles on mobile */
    }

    .hero-title {
        font-size: 3rem;
        line-height: 1.1;
    }

    .hero-subtitle {
        font-size: 1.2rem;
    }

    /* Footer Stack on Mobile if needed, or keep row wrapping */
    .footer-links {
        gap: 0.5rem;
    }

    .footer-links li:not(:last-child)::after {
        margin-left: 0.5rem;
    }

    /* Courses Table Scroll on Mobile */
    /* v26: Revert scroll, force wrap per user request */
    .pricing-table-wrapper {
        /* overflow-x: auto;  <-- Removed scroll */
        width: 100%;
        display: block;
    }

    .pricing-table {
        min-width: 0;
        /* Remove fixed min-width */
        width: 100%;
        table-layout: fixed;
        /* Force table to fit container */
    }

    .pricing-table td {
        white-space: normal;
        /* Allow wrapping */
        word-wrap: break-word;
        /* Break long words if necessary */
        overflow-wrap: break-word;
        /* Modern standard */
        font-size: 0.9rem;
        /* Slightly smaller font to help fit */
        padding: 0.8rem 0.5rem;
        /* Reduce padding slightly */
    }

    .pricing-table td:first-child {
        width: 40%;
        /* Give label column slightly less space */
    }
}

/* Ensure wrapper works on all screens if content overflows */
.pricing-table-wrapper {
    width: 100%;
    margin-bottom: 1rem;
}

/* Pricing Tables & Info */
.pricing-container {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.support-content {
    background-color: #e8f7ec !important;
    color: #1b4332 !important;
    padding: 2.5rem !important;
    border-radius: 12px !important;
    max-width: 800px;
    margin: 0 auto;
    text-align: left;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.course-category {
    background: white;
    padding: 2.5rem;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.category-title {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    color: var(--color-primary);
    border-bottom: 2px solid var(--color-accent);
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
    display: inline-block;
}

/* v39: Fix Indentation - Override text-indent */
.coach-bio-text {
    line-height: 1.8;
    color: var(--color-text-dark);
    margin-bottom: 2rem;
    text-indent: 0 !important;
    padding-left: 0 !important;
}

.notice-text {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin-bottom: 1.5rem;
}

.coach-pricing {
    margin-bottom: 2rem;
}

.coach-pricing h4 {
    background: var(--color-bg-light);
    padding: 0.8rem;
    border-left: 4px solid var(--color-primary);
    margin-bottom: 1rem;
    font-weight: 700;
}

.pricing-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}

.pricing-table td {
    padding: 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.pricing-table tr:last-child td {
    border-bottom: none;
}

.price-cell {
    text-align: right;
    font-weight: 700;
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: var(--color-primary);
}

.course-info-box {
    background: var(--color-primary);
    color: var(--color-white);
    padding: 2.5rem;
    border-radius: 4px;
}

.info-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 0.5rem;
}

.info-list {
    list-style: disc;
    margin-left: 1.5rem;
    margin-bottom: 2rem;
}

.info-list li {
    margin-bottom: 0.5rem;
}

.info-group {
    margin-bottom: 1.5rem;
}

.info-group strong {
    display: block;
    color: var(--color-accent);
    margin-bottom: 0.3rem;
    font-family: var(--font-heading);
}

@media (max-width: 768px) {
    .pricing-table td {
        display: block;
        width: 100%;
        text-align: left;
        padding: 0.5rem 0;
    }

    .pricing-table td.price-cell {
        text-align: left;
        color: var(--color-accent);
        padding-bottom: 1.5rem;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }
}