/*
 * Course overview and questions modules.
 *
 * Shared by every course page. The overview markup lives in
 * resources/views/front/partials/course-overview.blade.php and the
 * questions block in course-qna.blade.php.
 *
 * Design intent for the overview: an open, editorial composition on the
 * light page background rather than one boxed card. A centred statement,
 * the three laws as a numbered rail, one split panel for employers and
 * employees, and a dark proof board that closes the argument. Type is
 * large and high contrast. Motion is hover feedback only and is disabled
 * under prefers-reduced-motion.
 */

/* =====================
   COURSE OVERVIEW (OVW): STATEMENT, LAW RAIL, TWO PATHS, PROOF BOARD
   ===================== */

/* Bold and emphasised text always keeps the face of its parent. Guards
   against any global reset that pins a font on every element. */
.ovw strong,
.ovw b,
.ovw em,
.qna strong,
.qna b,
.qna em {
    font-family: inherit;
}

.ovw {
    --ovw-ink: #0b1526;
    --ovw-body: #35465e;
    --ovw-line: #dfe9f4;
    --ovw-teal: #0f766e;
    --ovw-blue: #0369a1;
    --ovw-emerald: #059669;
    position: relative;
    margin-bottom: clamp(40px, 5vw, 68px);
    font-family: var(--ph-font);
}

/* --- Movement 1: the statement, an asymmetric editorial split.
   Headline on the left, the argument on the right against a gradient
   rail, and the legislation chips on their own rule below. --- */
.ovw-intro {
    position: relative;
}

.ovw-intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 60px);
    align-items: center;
}

/* Shared badge identity: deep Irish emerald with gold accents. */
.ovw-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 20px 11px 16px;
    border-radius: 999px;
    background: linear-gradient(140deg, #04352a 0%, #075e45 55%, #0b7d54 100%);
    border: 1px solid rgba(216, 181, 87, 0.65);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 1px 2px rgba(6, 63, 48, 0.25),
        0 14px 28px -18px rgba(6, 63, 48, 0.95);
    font: 700 14px/1 var(--ph-font);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #f8e7ab;
}

.ovw-eyebrow svg {
    width: 17px;
    height: 17px;
    color: #eccb62;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ovw-title {
    margin: 20px 0 0;
    font: 800 clamp(30px, 3.3vw, 44px)/1.14 var(--ph-font);
    letter-spacing: -0.025em;
    color: var(--ovw-ink);
    text-wrap: balance;
}

.ovw-intro-side {
    position: relative;
    padding-left: clamp(22px, 2.6vw, 36px);
}

/* The lead paragraphs hang off a vertical tricolour rule:
   the Irish flag as a quiet structural accent. */
.ovw-intro-side::before {
    content: "";
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 0;
    width: 4px;
    border-radius: 999px;
    background: linear-gradient(180deg, #169b62 0% 33.4%, #f6f8fa 33.4% 66.7%, #ff883e 66.7% 100%);
    box-shadow: inset 0 0 0 1px rgba(11, 21, 38, 0.1);
}

.ovw-lead {
    margin: 0;
    font: 400 clamp(17px, 1.4vw, 19px)/1.72 var(--ph-font);
    color: var(--ovw-body);
    text-wrap: pretty;
}

.ovw-lead strong {
    font-weight: 700;
    color: #12283f;
}

.ovw-lead-soft {
    margin-top: 16px;
    font-size: clamp(16px, 1.3vw, 17.5px);
}

.ovw-intro-rail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    margin-top: clamp(28px, 3.6vw, 46px);
    padding-top: clamp(20px, 2.4vw, 28px);
    border-top: 1px solid var(--ovw-line);
}

.ovw-rail-label {
    font: 700 14px/1 var(--ph-font);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #4c637c;
}

.ovw-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ovw-chips li {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 17px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #d3e5f3;
    box-shadow: 0 1px 2px rgba(15, 32, 56, 0.05);
    font: 600 15.5px/1.25 var(--ph-font);
    color: #1f334d;
}

.ovw-chips li::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0ea5e9 0%, #10b981 100%);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.14);
}

/* --- Movement 2: the law rail --- */
.ovw-laws {
    margin-top: clamp(44px, 5.4vw, 72px);
}

.ovw-laws-title {
    margin: 0 0 clamp(20px, 2.6vw, 30px);
    text-align: center;
    font: 700 14.5px/1.4 var(--ph-font);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ovw-blue);
}

.ovw-laws-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 1.8vw, 22px);
    list-style: none;
    margin: 0;
    padding: 0;
}

.ovw-law {
    position: relative;
    overflow: hidden;
    padding: clamp(26px, 2.8vw, 34px) clamp(22px, 2.4vw, 30px) clamp(24px, 2.6vw, 30px);
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    border: 1px solid var(--ovw-line);
    border-radius: 22px;
    box-shadow:
        0 1px 2px rgba(12, 34, 62, 0.05),
        0 26px 52px -44px rgba(12, 44, 78, 0.55);
    transition: transform 0.22s ease-out, box-shadow 0.22s ease-out, border-color 0.22s ease-out;
}

.ovw-law::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, #0ea5e9 0%, #10b981 100%);
}

.ovw-law:nth-child(2)::before {
    background: linear-gradient(90deg, #10b981 0%, #0d9488 100%);
}

.ovw-law:nth-child(3)::before {
    background: linear-gradient(90deg, #0d9488 0%, #0369a1 100%);
}

.ovw-law:hover {
    transform: translateY(-4px);
    border-color: #bfe0f2;
    box-shadow:
        0 1px 2px rgba(12, 34, 62, 0.05),
        0 30px 56px -36px rgba(12, 44, 78, 0.6);
}

.ovw-law-index {
    position: absolute;
    top: 12px;
    right: 18px;
    font: 800 clamp(46px, 4.4vw, 60px)/1 var(--ph-font);
    letter-spacing: -0.04em;
    color: #ecf4fb;
    pointer-events: none;
    user-select: none;
}

.ovw-law > :not(.ovw-law-index) {
    position: relative;
    z-index: 1;
}

.ovw-law-ref {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 9px;
    background: #f0f9ff;
    border: 1px solid #cde8f7;
    font: 700 14px/1.3 var(--ph-font);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ovw-blue);
}

.ovw-law-name {
    margin: 14px 0 9px;
    font: 700 clamp(18px, 1.5vw, 20px)/1.32 var(--ph-font);
    letter-spacing: -0.014em;
    color: var(--ovw-ink);
    text-wrap: balance;
}

.ovw-law-text {
    margin: 0;
    font: 400 clamp(16px, 1.25vw, 17px)/1.68 var(--ph-font);
    color: var(--ovw-body);
    text-wrap: pretty;
}

/* --- Movement 3: one panel, two audiences --- */
/* --- Movement 3: two audience cards, each with its own identity.
   Employers read blue, employees read emerald, and the employee card
   carries the primary conversion button. --- */
.ovw-paths {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 24px);
    margin-top: clamp(44px, 5.4vw, 72px);
}

.ovw-path {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: clamp(26px, 3.2vw, 42px);
    border-radius: 28px;
    border: 1px solid #dbe8f4;
    background:
        radial-gradient(80% 55% at 100% 0%, rgba(3, 105, 161, 0.06) 0%, transparent 60%),
        #ffffff;
    box-shadow:
        0 1px 2px rgba(15, 32, 56, 0.04),
        0 28px 56px -40px rgba(12, 50, 80, 0.55);
    overflow: hidden;
}

.ovw-path::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, #38bdf8 0%, #0369a1 100%);
}

.ovw-path-wrk {
    border-color: #cfe9dd;
    background:
        radial-gradient(80% 55% at 100% 0%, rgba(4, 120, 87, 0.07) 0%, transparent 60%),
        #ffffff;
}

.ovw-path-wrk::before {
    background: linear-gradient(90deg, #34d399 0%, #047857 100%);
}

.ovw-path-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ovw-path-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: linear-gradient(140deg, #0ea5e9 0%, #0369a1 100%);
    color: #ffffff;
    box-shadow: 0 10px 20px -12px rgba(3, 105, 161, 0.9);
}

.ovw-path-glyph svg {
    width: 21px;
    height: 21px;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ovw-path-wrk .ovw-path-glyph {
    background: linear-gradient(140deg, #10b981 0%, #047857 100%);
    box-shadow: 0 10px 20px -12px rgba(4, 120, 87, 0.9);
}

.ovw-path-tag {
    font: 700 14px/1 var(--ph-font);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ovw-blue);
}

.ovw-path-wrk .ovw-path-tag {
    color: #067a5e;
}

.ovw-path-title {
    margin: 18px 0 20px;
    font: 700 clamp(21px, 2vw, 26px)/1.26 var(--ph-font);
    letter-spacing: -0.018em;
    color: var(--ovw-ink);
    text-wrap: balance;
}

.ovw-path-list {
    flex: 1 1 auto;
    width: 100%;
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
}

.ovw-path-list li {
    position: relative;
    padding: 13px 0 13px 40px;
    border-top: 1px solid rgba(16, 47, 82, 0.09);
    font: 500 clamp(16px, 1.25vw, 17.5px)/1.6 var(--ph-font);
    color: #25364e;
}

.ovw-path-list li:first-child {
    border-top: 0;
    padding-top: 2px;
}

.ovw-path-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    width: 26px;
    height: 26px;
    border-radius: 9px;
    background: linear-gradient(140deg, #0ea5e9 0%, #0369a1 100%);
    box-shadow: 0 6px 12px -7px rgba(3, 105, 161, 0.9);
}

.ovw-path-list li:first-child::before {
    top: 3px;
}

.ovw-path-list li::after {
    content: "";
    position: absolute;
    left: 8px;
    top: 21px;
    width: 9px;
    height: 5px;
    border: 2px solid #ffffff;
    border-top: 0;
    border-right: 0;
    transform: rotate(-45deg);
}

.ovw-path-list li:first-child::after {
    top: 10px;
}

.ovw-path-wrk .ovw-path-list li::before {
    background: linear-gradient(140deg, #10b981 0%, #047857 100%);
    box-shadow: 0 6px 12px -7px rgba(4, 120, 87, 0.9);
}

.ovw-path-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    border-radius: 999px;
    font: 700 clamp(15.5px, 1.2vw, 16.5px)/1.2 var(--ph-font);
    color: #075985;
    background: linear-gradient(140deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid rgba(3, 105, 161, 0.28);
    box-shadow: 0 1px 2px rgba(3, 105, 161, 0.12);
    text-decoration: none;
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

.ovw-path-btn svg {
    width: 18px;
    height: 18px;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.2s ease-out;
}

.ovw-path-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 26px -16px rgba(3, 105, 161, 0.7);
}

.ovw-path-btn:hover svg {
    transform: translateX(3px);
}

.ovw-path-btn-solid {
    color: #ffffff;
    background: linear-gradient(140deg, #059669 0%, #047857 100%);
    border: 1px solid rgba(4, 120, 87, 0.5);
    box-shadow: 0 14px 28px -14px rgba(4, 120, 87, 0.8);
}

.ovw-path-btn-solid:hover {
    box-shadow: 0 20px 36px -16px rgba(4, 120, 87, 0.85);
}

.ovw-path-btn:focus-visible {
    outline: 3px solid #0e7490;
    outline-offset: 3px;
}

/* --- Movement 4: the proof board --- */
.ovw-proof {
    position: relative;
    overflow: hidden;
    margin-top: clamp(44px, 5.4vw, 72px);
    padding: clamp(30px, 3.8vw, 56px);
    border-radius: 32px;
    border: 1px solid rgba(148, 211, 252, 0.16);
    background: linear-gradient(150deg, #0c1e33 0%, #0e2b40 55%, #0c3038 100%);
    box-shadow: 0 40px 84px -52px rgba(8, 30, 55, 0.95);
}

.ovw-proof-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(44% 60% at 88% 0%, rgba(14, 165, 233, 0.2) 0%, transparent 70%),
        radial-gradient(40% 56% at 4% 100%, rgba(16, 185, 129, 0.18) 0%, transparent 70%);
}

/* Ambient shamrock watermark: a quiet nod to the Irish identity,
   sitting behind the content at whisper level. */
.ovw-proof::after {
    content: "";
    position: absolute;
    right: -52px;
    bottom: -64px;
    width: 300px;
    height: 300px;
    background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='%23f8e7ab'><path d='M50 46C41 38 33 34 33 25 33 17 41 14 46 18 48 20 49 22 50 26 51 22 52 20 54 18 59 14 67 17 67 25 67 34 59 38 50 46Z'/><path d='M50 46C41 38 33 34 33 25 33 17 41 14 46 18 48 20 49 22 50 26 51 22 52 20 54 18 59 14 67 17 67 25 67 34 59 38 50 46Z' transform='rotate(90 50 50)'/><path d='M50 46C41 38 33 34 33 25 33 17 41 14 46 18 48 20 49 22 50 26 51 22 52 20 54 18 59 14 67 17 67 25 67 34 59 38 50 46Z' transform='rotate(270 50 50)'/><path d='M50 50C52 62 50 70 58 80 51 76 46 68 47 55Z'/></g></svg>") no-repeat center / contain;
    opacity: 0.06;
    transform: rotate(-14deg);
    pointer-events: none;
}

.ovw-proof > :not(.ovw-proof-glow) {
    position: relative;
    z-index: 1;
}

.ovw-proof-head {
    max-width: 1020px;
    margin: 0 auto;
    text-align: center;
}

.ovw-proof-title {
    margin: 0;
    font: 800 clamp(23px, 2.4vw, 32px)/1.2 var(--ph-font);
    letter-spacing: -0.02em;
    color: #f4fafe;
    text-wrap: balance;
}

.ovw-proof-sub {
    margin: 12px 0 0;
    font: 400 clamp(16.5px, 1.3vw, 18px)/1.68 var(--ph-font);
    color: #c6daea;
    text-wrap: pretty;
}

.ovw-proof-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    list-style: none;
    margin: clamp(24px, 2.8vw, 34px) 0 0;
    padding: 0;
}

.ovw-proof-list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(148, 211, 252, 0.15);
    border-radius: 16px;
    transition: background-color 0.22s ease-out, border-color 0.22s ease-out;
}

.ovw-proof-list li:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(148, 211, 252, 0.32);
}

.ovw-proof-check {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: linear-gradient(140deg, #10b981 0%, #047857 100%);
    box-shadow: 0 6px 14px -6px rgba(16, 185, 129, 0.8);
}

.ovw-proof-check svg {
    width: 15px;
    height: 15px;
    color: #ffffff;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ovw-proof-text {
    font: 500 clamp(16px, 1.25vw, 17.5px)/1.55 var(--ph-font);
    color: #e9f3fb;
}

.ovw-proof-foot {
    margin-top: clamp(26px, 3vw, 36px);
    padding-top: clamp(22px, 2.4vw, 28px);
    border-top: 1px solid rgba(148, 211, 252, 0.16);
}

.ovw-seals {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
}

.ovw-seal {
    padding: 10px 17px;
    border-radius: 999px;
    font: 700 14px/1 var(--ph-font);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #ffffff;
}

.ovw-seal:nth-child(3n + 1) {
    background: linear-gradient(140deg, #10b981 0%, #059669 100%);
    box-shadow: 0 10px 20px -12px rgba(16, 185, 129, 0.9);
}

.ovw-seal:nth-child(3n + 2) {
    background: linear-gradient(140deg, #38bdf8 0%, #0284c7 100%);
    box-shadow: 0 10px 20px -12px rgba(56, 189, 248, 0.9);
}

.ovw-seal:nth-child(3n) {
    background: linear-gradient(140deg, #2dd4bf 0%, #0e7490 100%);
    box-shadow: 0 10px 20px -12px rgba(45, 212, 191, 0.9);
}

/* Closing seal: Irish owned, with the tricolour woven in. Placed
   after the rotating gradients so it always wins the cascade. */
.ovw-seal.ovw-seal-irish {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: #ffffff;
    color: #0b1526;
    box-shadow: 0 10px 22px -12px rgba(255, 255, 255, 0.55);
}

.ovw-seal-flag {
    flex-shrink: 0;
    width: 21px;
    height: 14px;
    border-radius: 3px;
    background: linear-gradient(90deg, #169b62 0% 33.4%, #f6f8fa 33.4% 66.7%, #ff883e 66.7% 100%);
    box-shadow: inset 0 0 0 1px rgba(11, 21, 38, 0.16);
}

.ovw-foot-text {
    margin: 0 auto;
    max-width: 1080px;
    font: 400 clamp(16px, 1.25vw, 17.5px)/1.75 var(--ph-font);
    color: #c6daea;
    text-align: center;
    text-wrap: pretty;
}

/* --- Responsive --- */
@media (max-width: 960px) {
    .ovw-intro-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 26px;
    }

    .ovw-laws-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ovw-paths {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 720px) {
    .ovw-proof-list {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .ovw-intro-side {
        padding-left: 18px;
    }

    .ovw-laws-title {
        text-align: left;
    }

    .ovw-law,
    .ovw-path {
        padding: 24px 20px;
    }

    .ovw-law {
        border-radius: 20px;
    }

    .ovw-path {
        border-radius: 22px;
    }

    .ovw-path-btn {
        width: 100%;
        justify-content: center;
    }

    .ovw-proof {
        padding: 28px 20px;
        border-radius: 24px;
    }

    /* Long paragraphs read better ragged right on narrow screens. */
    .ovw-foot-text {
        text-align: left;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ovw-law,
    .ovw-proof-list li,
    .ovw-path-btn,
    .ovw-path-btn svg {
        transition: none;
    }

    .ovw-law:hover {
        transform: none;
    }

    .ovw-path-btn:hover {
        transform: none;
    }

    .ovw-path-btn:hover svg {
        transform: none;
    }
}

/* =====================
   QUESTIONS AND ANSWERS (QNA): PREMIUM ACCORDION
   ===================== */
.qna {
    --qna-ink: #0b1526;
    --qna-body: #35465e;
    --qna-line: #dfe9f4;
    --qna-teal: #0f766e;
    --qna-blue: #0369a1;
    position: relative;
    overflow: hidden;
    padding: clamp(60px, 8vw, 112px) 0;
    background: linear-gradient(180deg, #f6fafe 0%, #ffffff 52%, #f4fbf8 100%);
    font-family: var(--ph-font);
}

.qna-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(42% 46% at 90% 4%, rgba(14, 165, 233, 0.12) 0%, transparent 68%),
        radial-gradient(38% 44% at 4% 92%, rgba(16, 185, 129, 0.11) 0%, transparent 68%);
}

.qna-shell {
    position: relative;
    z-index: 1;
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 clamp(20px, 5vw, 40px);
}

/* --- Header --- */
.qna-head {
    max-width: 1020px;
    margin: 0 auto;
    text-align: center;
}

/* Shared badge identity: deep Irish emerald with gold accents. */
.qna-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 20px 11px 16px;
    border-radius: 999px;
    background: linear-gradient(140deg, #04352a 0%, #075e45 55%, #0b7d54 100%);
    border: 1px solid rgba(216, 181, 87, 0.65);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 1px 2px rgba(6, 63, 48, 0.25),
        0 14px 28px -18px rgba(6, 63, 48, 0.95);
    font: 700 14px/1 var(--ph-font);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #f8e7ab;
}

.qna-eyebrow svg {
    width: 17px;
    height: 17px;
    color: #eccb62;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.qna-title {
    margin: 24px 0 0;
    font: 800 clamp(30px, 3.5vw, 45px)/1.12 var(--ph-font);
    letter-spacing: -0.025em;
    color: var(--qna-ink);
    text-wrap: balance;
}

.qna-sub {
    margin: 20px auto 0;
    max-width: 940px;
    font: 400 clamp(17px, 1.4vw, 19px)/1.7 var(--ph-font);
    color: var(--qna-body);
    text-wrap: pretty;
}

/* --- Accordion deck --- */
.qna-deck {
    display: grid;
    gap: 14px;
    margin-top: clamp(30px, 3.6vw, 48px);
}

.qna-card {
    background: #ffffff;
    border: 1px solid var(--qna-line);
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(15, 32, 56, 0.04);
    transition: border-color 0.22s ease-out, box-shadow 0.22s ease-out;
}

.qna-card:hover {
    border-color: #bfe0f2;
    box-shadow: 0 16px 32px -24px rgba(13, 60, 80, 0.5);
}

.qna-card[open] {
    border-color: #b7e6dc;
    background:
        radial-gradient(110% 130% at 100% 0%, rgba(224, 242, 254, 0.5) 0%, rgba(224, 242, 254, 0) 55%),
        linear-gradient(165deg, #ffffff 0%, #f6fcfa 100%);
    box-shadow: 0 26px 52px -34px rgba(13, 60, 80, 0.55);
}

.qna-sum {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 38px;
    align-items: center;
    gap: clamp(14px, 1.6vw, 20px);
    padding: clamp(18px, 2vw, 24px) clamp(18px, 2.2vw, 26px);
    cursor: pointer;
    list-style: none;
    -webkit-tap-highlight-color: transparent;
}

.qna-sum::-webkit-details-marker {
    display: none;
}

.qna-sum:focus-visible {
    outline: 3px solid #0e7490;
    outline-offset: 3px;
    border-radius: 18px;
}

.qna-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 15px;
    background: linear-gradient(140deg, #ecfeff 0%, #eff6ff 100%);
    border: 1px solid #cfe7f5;
    color: #0b6a7d;
    font: 800 16.5px/1 var(--ph-font);
    letter-spacing: -0.01em;
    box-shadow: inset 0 1px 0 #ffffff, 0 8px 16px -12px rgba(11, 106, 125, 0.9);
    transition: background-color 0.22s ease-out, color 0.22s ease-out, border-color 0.22s ease-out;
}

.qna-card[open] .qna-num {
    background: linear-gradient(140deg, #0f766e 0%, #0e7490 100%);
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 8px 18px -8px rgba(14, 116, 144, 0.8);
}

.qna-q {
    margin: 0;
    font: 700 clamp(17.5px, 1.55vw, 20.5px)/1.35 var(--ph-font);
    letter-spacing: -0.014em;
    color: var(--qna-ink);
    text-wrap: balance;
}

.qna-chev {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #f4f9fd;
    border: 1px solid #dbe9f4;
    color: #33607e;
}

.qna-chev svg {
    width: 18px;
    height: 18px;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.22s ease-out;
}

.qna-card[open] .qna-chev {
    background: linear-gradient(140deg, #10b981 0%, #047857 100%);
    border-color: transparent;
    color: #ffffff;
}

.qna-card[open] .qna-chev svg {
    transform: rotate(180deg);
}

.qna-ans {
    margin: 0;
    padding: 2px clamp(18px, 2.2vw, 26px) clamp(20px, 2.2vw, 26px) calc(46px + clamp(18px, 2.2vw, 26px) + clamp(14px, 1.6vw, 20px));
    font: 400 clamp(16.5px, 1.3vw, 18px)/1.75 var(--ph-font);
    color: var(--qna-body);
    text-wrap: pretty;
}

/* --- Closing invitation --- */
.qna-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: clamp(26px, 3vw, 40px);
    padding: clamp(22px, 2.6vw, 32px) clamp(22px, 2.8vw, 36px);
    border-radius: 24px;
    border: 1px solid #d5e7e0;
    background:
        linear-gradient(150deg, rgba(255, 255, 255, 0.93) 0%, rgba(255, 255, 255, 0.72) 100%),
        linear-gradient(150deg, #ecfdf5 0%, #e7f2ff 100%);
    box-shadow: 0 26px 56px -44px rgba(12, 50, 80, 0.6);
}

.qna-cta-text {
    flex: 1 1 320px;
}

.qna-cta-tag {
    display: inline-block;
    padding: 7px 14px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #cfe4f5;
    font: 700 14px/1 var(--ph-font);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--qna-blue);
}

.qna-cta-line {
    margin: 12px 0 0;
    font: 600 clamp(17px, 1.4vw, 19px)/1.5 var(--ph-font);
    color: #16283f;
    text-wrap: pretty;
}

.qna-cta-btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-shrink: 0;
    padding: 18px 30px;
    border-radius: 15px;
    background: linear-gradient(135deg, #10b981 0%, #047857 100%);
    color: #ffffff;
    font: 700 17px/1 var(--ph-font);
    text-decoration: none;
    box-shadow: 0 16px 30px -14px rgba(16, 185, 129, 0.75);
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

.qna-cta-btn svg {
    width: 18px;
    height: 18px;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.2s ease-out;
}

.qna-cta-btn:hover {
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 22px 38px -16px rgba(16, 185, 129, 0.85);
}

.qna-cta-btn:hover svg {
    transform: translateX(3px);
}

.qna-cta-btn:focus-visible {
    outline: 3px solid #0e7490;
    outline-offset: 3px;
}

/* --- Responsive --- */
@media (max-width: 640px) {
    .qna {
        padding: 52px 0;
    }

    .qna-head {
        text-align: left;
    }

    .qna-sub {
        margin-left: 0;
    }

    .qna-sum {
        grid-template-columns: 38px minmax(0, 1fr) 32px;
        gap: 12px;
        padding: 16px 16px;
    }

    .qna-num {
        width: 38px;
        height: 38px;
        border-radius: 12px;
        font-size: 14.5px;
    }

    .qna-chev {
        width: 32px;
        height: 32px;
    }

    .qna-chev svg {
        width: 16px;
        height: 16px;
    }

    .qna-ans {
        padding: 2px 16px 18px 16px;
    }

    .qna-cta {
        border-radius: 20px;
    }

    .qna-cta-btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .qna-card,
    .qna-num,
    .qna-chev svg,
    .qna-cta-btn,
    .qna-cta-btn svg {
        transition: none;
    }

    .qna-cta-btn:hover {
        transform: none;
    }

    .qna-cta-btn:hover svg {
        transform: none;
    }
}