:root {
    --article-dark: #04091e;
    --article-dark-2: #11162c;
    --article-primary: #f7631b;
    --article-primary-deep: #d84d0b;
    --article-accent: #4cd3e3;
    --article-bg: #f9f9ff;
    --article-card: #ffffff;
    --article-line: #e8eaf1;
    --article-text: #222222;
    --article-muted: #6f7480;
    --article-orange-tint: #fff2eb;
    --article-blue-tint: #edf9fb;
    --article-green-tint: #edf8f1;
    --article-purple-tint: #f5effb;
}

/* =========================
   Mobile overflow hardening
   Keeps the article inside the visual viewport so the site drawer
   stays attached to the right edge on phones.
   ========================= */
body.article-page,
body.articles-page {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.article-detail,
.articles-hub,
.article-container,
.article-body-wrap,
.article-content,
.article-toc,
.article-section,
.concept-grid,
.aspect-grid,
.legend,
.tense-grid,
.convo,
.mistakes {
    min-width: 0;
    max-width: 100%;
}

.article-detail,
.articles-hub {
    width: 100%;
    overflow-x: hidden;
}

.article-content p,
.article-content h1,
.article-content h2,
.article-content h3,
.article-content .example,
.article-content .example-fa,
.article-content .usage,
.article-content .bubble,
.article-content .bubble .en,
.article-content .bubble .fa {
    overflow-wrap: anywhere;
}

.article-content img,
.article-content svg {
    max-width: 100%;
}

.articles-page,
.article-page {
    background: var(--article-bg);
}

/* ---------------- Articles hub ---------------- */
.articles-hub {
    background: var(--article-bg);
    min-height: 70vh;
}

.articles-hero {
    position: relative;
    overflow: hidden;
    padding: 154px 0 76px;
    background: linear-gradient(135deg, var(--article-dark) 0%, #101a35 62%, #27180f 100%);
    color: #fff;
}

.articles-hero::before,
.articles-hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.articles-hero::before {
    width: 340px;
    height: 340px;
    left: -110px;
    top: 40px;
    background: rgba(247, 99, 27, .16);
}

.articles-hero::after {
    width: 220px;
    height: 220px;
    right: 7%;
    bottom: -130px;
    background: rgba(76, 211, 227, .10);
}

.articles-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 760px;
}

.articles-kicker,
.articles-eyebrow {
    color: var(--article-primary);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .03em;
}

.articles-hero h1 {
    color: #fff;
    font-size: clamp(30px, 5vw, 48px);
    font-weight: 800;
    margin: 12px 0 16px;
}

.articles-hero p {
    color: #d7dbe8;
    max-width: 700px;
    margin: 0;
    font-size: 17px;
    line-height: 2;
}

.articles-list-section {
    padding: 66px 0 90px;
}

.articles-heading-row {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 26px;
}

.articles-heading-row h2 {
    margin-top: 6px;
    font-size: 28px;
    font-weight: 800;
}

.articles-count {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 6px 13px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--article-line);
    color: var(--article-muted);
    font-size: 12px;
}

.articles-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.article-card {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--article-line);
    border-radius: 22px;
    box-shadow: 0 10px 35px rgba(4, 9, 30, .06);
    transition: transform .25s ease, box-shadow .25s ease;
}

.article-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 44px rgba(4, 9, 30, .11);
}

.article-card-visual {
    min-height: 220px;
    padding: 30px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #fff;
    background:
        radial-gradient(circle at 15% 20%, rgba(247, 99, 27, .38), transparent 24%),
        radial-gradient(circle at 80% 90%, rgba(76, 211, 227, .18), transparent 28%),
        linear-gradient(135deg, #04091e, #141a32);
}

.article-card-visual:hover { color: #fff; }

.article-card-visual strong {
    direction: ltr;
    text-align: left;
    font-size: 34px;
    letter-spacing: -.02em;
    color: #fff;
}

.article-card-axis {
    direction: ltr;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #cfd3df;
    font-size: 11px;
}

.article-card-axis .axis-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--article-primary);
}

.article-card-axis .axis-line {
    height: 7px;
    flex: 1;
    max-width: 100px;
    border-radius: 999px;
    background: repeating-linear-gradient(90deg, var(--article-accent) 0 7px, rgba(255,255,255,.1) 7px 12px);
}

.article-card-badges {
    direction: ltr;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.article-card-badges span {
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 10px;
    color: #f1f2f7;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
}

.article-card-body {
    padding: 24px 26px 26px;
}

.article-card-meta {
    display: flex;
    gap: 8px 15px;
    flex-wrap: wrap;
    color: var(--article-primary);
    font-size: 12px;
    font-weight: 600;
}

.article-card-body h3 {
    font-size: 21px;
    font-weight: 800;
    margin: 10px 0 12px;
    line-height: 1.7;
}

.article-card-body h3 a { color: var(--article-text); }
.article-card-body h3 a:hover { color: var(--article-primary); }

.article-card-body > p {
    color: var(--article-muted);
    line-height: 1.95;
    margin: 0 0 20px;
}

.article-card-footer {
    padding-top: 16px;
    border-top: 1px solid var(--article-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 12px;
    color: #8a8e98;
}

.article-read-link {
    color: var(--article-primary);
    font-weight: 700;
}
.article-read-link:hover { color: var(--article-primary-deep); }

/* ---------------- Article detail ---------------- */
.article-detail {
    --navy: var(--article-dark);
    --blue: var(--article-dark);
    --skyblue: var(--article-accent);
    --orange: var(--article-primary);
    --orange-deep: var(--article-primary-deep);
    --bg: var(--article-bg);
    --card: var(--article-card);
    --line: var(--article-line);
    --orange-tint: var(--article-orange-tint);
    --blue-tint: var(--article-blue-tint);
    background: var(--article-bg);
    color: var(--article-text);
    line-height: 1.95;
}

.article-container {
    max-width: 1160px;
}

.article-hero {
    position: relative;
    overflow: hidden;
    padding: 142px 0 52px;
    color: #fff;
    background:
        radial-gradient(circle at 10% 10%, rgba(247,99,27,.22), transparent 28%),
        radial-gradient(circle at 85% 110%, rgba(76,211,227,.12), transparent 32%),
        linear-gradient(135deg, var(--article-dark) 0%, #12172d 72%, #20120c 100%);
}

.article-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    font-size: 12.5px;
    color: #aeb4c4;
}
.article-breadcrumb a { color: #fff; }
.article-breadcrumb a:hover { color: var(--article-primary); }

.article-kicker {
    color: var(--article-primary);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .03em;
    margin-bottom: 10px;
}

.article-hero h1 {
    max-width: 800px;
    color: #fff;
    font-size: clamp(30px, 4.5vw, 46px);
    font-weight: 800;
    line-height: 1.5;
    margin: 0 0 12px;
}

.article-sub {
    max-width: 720px;
    color: #d4d8e4;
    font-size: 16.5px;
    margin: 0 0 18px;
}

.article-meta {
    display: flex;
    gap: 10px 22px;
    flex-wrap: wrap;
    color: #bdc2d0;
    font-size: 12.5px;
    margin-bottom: 28px;
}
.article-meta i { color: var(--article-primary); margin-left: 5px; }

.hero-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.hero-step {
    min-width: 0;
    padding: 15px 16px;
    border-radius: 14px;
    color: #f7f8fb;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    font-size: 13.5px;
}

.hero-step .num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: var(--article-primary);
    color: #fff;
    font-weight: 800;
    font-size: 12px;
    margin-left: 7px;
}
.hero-step p { color: #c7ccda; margin: 8px 0 0; font-size: 12.5px; }

.article-body-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 235px;
    gap: 30px;
    padding-top: 42px;
    padding-bottom: 72px;
    align-items: start;
}

.article-content {
    grid-column: 1;
    min-width: 0;
}

.article-toc {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: 112px;
}

.article-toc-card {
    background: #fff;
    border: 1px solid var(--article-line);
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 8px 28px rgba(4,9,30,.045);
}

.article-toc-card strong {
    display: block;
    color: var(--article-text);
    margin-bottom: 9px;
    font-size: 14px;
}

.article-toc-card a {
    display: block;
    padding: 7px 0;
    color: var(--article-muted);
    font-size: 12.5px;
    border-bottom: 1px solid #f0f1f5;
}
.article-toc-card a:last-child { border-bottom: 0; }
.article-toc-card a:hover { color: var(--article-primary); padding-right: 4px; }

.article-section {
    scroll-margin-top: 110px;
    padding: 32px 0;
}

.article-section:first-of-type { padding-top: 4px; }

.article-content .section-title {
    color: var(--article-text);
    font-size: 24px;
    font-weight: 800;
    margin: 0 0 8px;
    line-height: 1.6;
}

.article-content .section-title::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--article-primary);
    margin-left: 10px;
}

.article-content .section-desc {
    color: var(--article-muted);
    font-size: 14.5px;
    margin: 0 0 24px;
    max-width: 720px;
}

.concept-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 16px;
}

.concept-card {
    padding: 23px;
    border-radius: 18px;
    border: 1px solid var(--article-line);
}
.concept-card.tense { background: var(--article-blue-tint); }
.concept-card.aspect { background: var(--article-orange-tint); }
.concept-card h3 { font-size: 18px; font-weight: 800; margin: 0 0 4px; color: var(--article-text); }
.concept-card.tense h3 { color: #148593; }
.concept-card.aspect h3 { color: var(--article-primary-deep); }
.concept-card .en { color: #7b7f89; font-size: 12px; margin-bottom: 10px; }
.concept-card p { color: #454954; font-size: 14px; margin: 0; }
.inline-strong { font-weight: 700; }

.aspect-deep {
    margin-top: 16px;
    padding: 22px 23px;
    background: #fff;
    border: 1px solid var(--article-line);
    border-radius: 18px;
}
.aspect-deep .analogy { color: #444955; font-size: 13.8px; margin: 0 0 18px; }
.aspect-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.aspect-item { padding: 14px 15px; border: 1px solid var(--article-line); border-radius: 12px; background: #fbfbfd; }
.aspect-item p { margin: 0; color: #4d515c; font-size: 13px; }
.a-tag { display: inline-block; direction: ltr; padding: 3px 9px; margin-bottom: 7px; border-radius: 8px; font-size: 11px; font-weight: 800; }
.a-tag.simple { background: var(--article-orange-tint); color: var(--article-primary-deep); }
.a-tag.continuous { background: var(--article-blue-tint); color: #148593; }
.a-tag.perfect { background: var(--article-green-tint); color: #2b8d50; }
.a-tag.perfect-cont { background: var(--article-purple-tint); color: #7f49b9; }

.legend { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.legend-item { text-align: center; padding: 14px 12px; border: 1px solid var(--article-line); background: #fff; border-radius: 14px; }
.legend-item svg { width: 100%; height: 42px; }
.legend-item span { display: block; color: var(--article-text); font-size: 12.5px; font-weight: 700; margin-top: 5px; }
.legend-item small { display: block; color: #848894; font-size: 10.5px; margin-top: 2px; line-height: 1.6; }

.group-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.group-heading .dot { width: 10px; height: 10px; border-radius: 50%; }
.group-heading h3 { color: var(--article-text); font-size: 19px; font-weight: 800; margin: 0; }
.group-present .dot { background: var(--article-primary); }
.group-past .dot { background: var(--article-dark); }
.group-future .dot { background: var(--article-accent); }

.tense-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.tense-card { min-width: 0; padding: 17px 18px 18px; border-radius: 16px; background: #fff; border: 1px solid var(--article-line); }
.tense-card .names { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; margin-bottom: 2px; }
.tense-card .fa-name { color: var(--article-text); font-size: 16px; font-weight: 800; }
.tense-card .en-name { direction: ltr; color: #8a8f9a; font-size: 11.5px; }
.tense-card .formula { display: inline-block; direction: ltr; margin: 7px 0 10px; padding: 4px 9px; border-radius: 7px; background: var(--article-orange-tint); color: var(--article-primary-deep); font-size: 11.5px; font-weight: 700; }
.tense-card .viz { margin: 3px 0 10px; overflow: hidden; }
.tense-card .viz svg { display: block; width: 100%; height: 76px; min-width: 0; }
.tense-card .example { direction: ltr; text-align: left; padding: 9px 10px; margin-bottom: 5px; border-radius: 9px; border: 1px dashed #e2e4e9; background: #fcfcfe; color: #2f333d; font-size: 12.5px; font-weight: 600; }
.tense-card .example-fa { color: #6f7480; font-size: 12.5px; margin-bottom: 9px; }
.tense-card .usage { padding-top: 9px; border-top: 1px solid var(--article-line); color: #7f838e; font-size: 11.5px; }
.tense-card .usage b { color: var(--article-primary-deep); }

.convo { margin-bottom: 16px; padding: 18px; border-radius: 17px; background: #fff; border: 1px solid var(--article-line); }
.convo-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; color: var(--article-text); font-size: 14px; font-weight: 700; }
.tag { direction: ltr; padding: 3px 8px; border-radius: 999px; font-size: 10px; font-weight: 800; }
.tag-present { background: var(--article-orange-tint); color: var(--article-primary-deep); }
.tag-past { background: #eef0f5; color: var(--article-dark); }
.tag-future { background: var(--article-blue-tint); color: #148593; }
.tag-review { background: var(--article-purple-tint); color: #7f49b9; }
.bubble { max-width: 84%; margin-bottom: 11px; padding: 10px 13px; border-radius: 14px; }
.bubble .en { direction: ltr; text-align: left; color: #313540; font-size: 12.8px; font-weight: 600; line-height: 1.8; }
.bubble .en i { color: #818691; font-size: 10.5px; font-weight: 500; }
.bubble .fa { margin-top: 4px; color: #626773; font-size: 12px; }
.bubble.a { margin-left: auto; border-bottom-right-radius: 4px; background: var(--article-blue-tint); }
.bubble.b { margin-right: auto; border-bottom-left-radius: 4px; background: var(--article-orange-tint); }

.mistakes { display: grid; gap: 12px; }
.mistake-card { padding: 15px 18px; border-radius: 12px; border: 1px solid var(--article-line); border-right: 4px solid var(--article-primary); background: #fff; }
.mistake-card p { margin: 0; color: #4f535f; font-size: 13px; }
.mistake-card b { color: var(--article-text); }

.article-end-card {
    margin-top: 14px;
    padding: 30px;
    border-radius: 20px;
    background: var(--article-dark);
    color: #fff;
}
.article-end-card > span { color: var(--article-primary); font-size: 11px; font-weight: 700; }
.article-end-card h2 { color: #fff; font-size: 21px; line-height: 1.7; margin: 8px 0 18px; }
.article-primary-btn { display: inline-flex; align-items: center; min-height: 42px; padding: 8px 18px; border-radius: 999px; background: var(--article-primary); color: #fff; font-weight: 700; font-size: 12.5px; }
.article-primary-btn:hover { color: #fff; background: var(--article-primary-deep); }

@media (max-width: 991px) {
    .articles-grid { grid-template-columns: 1fr; }

    /* Use normal document flow on tablet/mobile.  A single-column CSS grid
       can still inherit the min-content width of the horizontal TOC and
       make the whole page wider than the phone. */
    .article-body-wrap {
        display: block;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .article-content {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .article-toc {
        position: static;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin-bottom: 18px;
    }

    .article-toc-card {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        padding: 12px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .article-toc-card strong { margin: 0 4px 0 0; flex: 0 0 auto; }
    .article-toc-card a { flex: 0 0 auto; border: 0; padding: 7px 10px; border-radius: 999px; background: #f5f6f9; }
}

@media (max-width: 760px) {
    .article-page .container,
    .articles-page .container {
        width: 100%;
        max-width: 100%;
        padding-left: 16px;
        padding-right: 16px;
    }

    .articles-hero { padding: 132px 0 58px; }
    .articles-hero p { font-size: 15px; }
    .articles-heading-row { align-items: center; }
    .article-card-visual { min-height: 190px; padding: 22px; }
    .article-card-body { padding: 20px; }
    .article-hero { padding: 126px 0 38px; }
    .article-meta { gap: 8px 14px; }
    .hero-steps { grid-template-columns: 1fr; }
    .article-body-wrap { padding-top: 26px; padding-bottom: 54px; gap: 18px; }
    .concept-grid,
    .aspect-grid,
    .tense-grid { grid-template-columns: 1fr; }
    .legend { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .article-section { padding: 25px 0; }
    .article-content .section-title { font-size: 21px; }
    .bubble { max-width: 94%; }
}

@media (max-width: 430px) {
    .articles-heading-row { align-items: flex-start; flex-direction: column; }
    .article-card-footer { align-items: flex-start; flex-direction: column; }
    .article-hero h1 { font-size: 29px; }
    .legend { grid-template-columns: 1fr; }
    .article-end-card { padding: 23px 20px; }
}

@media (min-width: 992px) {
    .articles-grid .article-card:only-child {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: minmax(330px, .9fr) minmax(0, 1.1fr);
    }
    .articles-grid .article-card:only-child .article-card-visual {
        min-height: 300px;
    }
    .articles-grid .article-card:only-child .article-card-body {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 34px 38px;
    }
}

/* ============================================================
   Prepositions article — Lingonik visual grammar
   Scoped to .prep-article / .prep-article-content so the Tense
   article and the rest of the site keep their existing styles.
   ============================================================ */
.prep-article {
    --prep-navy: #0e2a47;
    --prep-navy-2: #123a63;
    --prep-blue: #1d5fa8;
    --prep-sky: #2f8fe0;
    --prep-orange: #f2994a;
    --prep-orange-deep: #d9762e;
    --prep-green: #2e9e5b;
    --prep-purple: #8a4fd1;
    --prep-red: #c64b4b;
    --prep-ink: #203247;
    --prep-muted: #60758a;
    --prep-line: #d8e4f0;
    --prep-blue-tint: #eaf3fc;
    --prep-orange-tint: #fff2e4;
    --prep-green-tint: #eaf6ee;
    --prep-purple-tint: #f3eafb;
    --prep-red-tint: #fdecec;
}

.prep-hero {
    background:
        radial-gradient(circle at 10% 25%, rgba(242,153,74,.28), transparent 24%),
        radial-gradient(circle at 85% 88%, rgba(76,211,227,.15), transparent 25%),
        linear-gradient(145deg, #04091e 0%, #0e2a47 58%, #123a63 100%);
}

.prep-hero .article-sub span[dir="ltr"] { color: #ffd6bd; font-weight: 800; }

.prep-hero-visual {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    max-width: 720px;
    margin: 24px 0 22px;
    direction: ltr;
}

.prep-hero-chip {
    min-width: 0;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 16px;
    padding: 16px 15px;
    background: rgba(255,255,255,.07);
    text-align: center;
}

.prep-hero-chip b {
    display: block;
    font-size: 26px;
    line-height: 1;
    margin-bottom: 8px;
    letter-spacing: .02em;
}

.prep-hero-chip span {
    display: block;
    direction: rtl;
    color: #dbe7f4;
    font-size: 12px;
}

.prep-in b { color: #7cd39d; }
.prep-on b { color: #6fc9f2; }
.prep-at b { color: #ffae69; }

/* Hub visual for the prepositions card */
.article-card-visual.prepositions-visual {
    background:
        radial-gradient(circle at 12% 12%, rgba(242,153,74,.34), transparent 25%),
        radial-gradient(circle at 85% 90%, rgba(46,158,91,.20), transparent 26%),
        linear-gradient(135deg, #0e2a47, #10243b 64%, #1d5fa8);
}

.prepositions-card-map {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 10px;
    direction: ltr;
}

.prepositions-card-map span {
    display: grid;
    place-items: center;
    aspect-ratio: 1.35 / 1;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.15);
    background: rgba(255,255,255,.07);
    color: #fff;
    font-size: 23px;
    font-weight: 800;
}

.prepositions-card-map span:nth-child(1) { box-shadow: inset 0 -3px 0 #2e9e5b; }
.prepositions-card-map span:nth-child(2) { box-shadow: inset 0 -3px 0 #2f8fe0; }
.prepositions-card-map span:nth-child(3) { box-shadow: inset 0 -3px 0 #f2994a; }

.prepositions-card-levels {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    direction: ltr;
}

.prepositions-card-levels span {
    border-radius: 999px;
    padding: 4px 8px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.07);
    color: #e5eaf3;
    font-size: 9px;
    font-weight: 700;
}

.prep-article-content {
    /* aliases required by the original approved handout fragments */
    --navy: var(--prep-navy);
    --navy2: var(--prep-navy-2);
    --blue: var(--prep-blue);
    --sky: var(--prep-sky);
    --orange: var(--prep-orange);
    --orange2: var(--prep-orange-deep);
    --bg: #f3f7fc;
    --card: #fff;
    --line: var(--prep-line);
    --blueTint: var(--prep-blue-tint);
    --orangeTint: var(--prep-orange-tint);
    --green: var(--prep-green);
    --greenTint: var(--prep-green-tint);
    --purple: var(--prep-purple);
    --purpleTint: var(--prep-purple-tint);
    --red: var(--prep-red);
    --redTint: var(--prep-red-tint);
    --ink: var(--prep-ink);
    --muted: var(--prep-muted);
    min-width: 0;
}

.prep-section {
    scroll-margin-top: 110px;
    min-width: 0;
}

.prep-block {
    min-width: 0;
    margin: 0 0 28px;
    padding: 25px;
    border: 1px solid var(--prep-line);
    border-radius: 20px;
    background: rgba(255,255,255,.72);
    box-shadow: 0 8px 28px rgba(14,42,71,.035);
}

.prep-block:last-child { margin-bottom: 0; }

.prep-article-content h2 {
    margin: 0 0 12px;
    color: var(--prep-navy);
    font-size: 23px;
    font-weight: 800;
    line-height: 1.65;
}

.prep-article-content h3 {
    margin: 0 0 9px;
    color: var(--prep-navy);
    font-size: 17px;
    font-weight: 800;
    line-height: 1.7;
}

.prep-article-content h4 { margin: 0 0 8px; color: var(--prep-navy); }
.prep-article-content p { margin: 0 0 13px; color: var(--prep-ink); line-height: 2; }
.prep-article-content .lead { color: #334b63; font-size: 15px; }
.prep-article-content .small { color: var(--prep-muted); font-size: 12px; }
.prep-article-content .en,
.prep-article-content .inline-en,
.prep-article-content .option {
    direction: ltr;
    unicode-bidi: isolate;
}
.prep-article-content .inline-en { font-weight: 700; }
.prep-article-content .en { text-align: left; }

.prep-article-content .section-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    margin-bottom: 10px;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--prep-orange-tint);
    color: var(--prep-orange-deep);
    font-size: 11px;
    font-weight: 800;
}

.prep-article-content .grid2,
.prep-article-content .grid3,
.prep-article-content .grid4 {
    display: grid;
    gap: 14px;
    min-width: 0;
}
.prep-article-content .grid2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.prep-article-content .grid3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.prep-article-content .grid4 { grid-template-columns: repeat(4, minmax(0,1fr)); }

.prep-article-content .card,
.prep-article-content .box {
    min-width: 0;
    border: 1px solid var(--prep-line);
    border-radius: 16px;
    padding: 18px;
    background: #fff;
    box-shadow: none;
}
.prep-article-content .box.blue { background: var(--prep-blue-tint); }
.prep-article-content .box.orange { background: var(--prep-orange-tint); }
.prep-article-content .box.green { background: var(--prep-green-tint); }
.prep-article-content .box.purple { background: var(--prep-purple-tint); }
.prep-article-content .box.red { background: var(--prep-red-tint); }

.prep-article-content .badge {
    display: inline-block;
    margin-left: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}
.prep-article-content .badge.blue { background: var(--prep-blue-tint); color: var(--prep-blue); }
.prep-article-content .badge.orange { background: var(--prep-orange-tint); color: var(--prep-orange-deep); }
.prep-article-content .badge.green { background: var(--prep-green-tint); color: var(--prep-green); }
.prep-article-content .badge.purple { background: var(--prep-purple-tint); color: var(--prep-purple); }

.prep-article-content .note,
.prep-article-content .tip,
.prep-article-content .warn {
    margin: 14px 0;
    padding: 14px 16px;
    border-radius: 12px;
    color: var(--prep-ink);
    line-height: 1.95;
}
.prep-article-content .note { border-right: 4px solid var(--prep-orange); background: #fff; }
.prep-article-content .tip { border-right: 4px solid var(--prep-blue); background: var(--prep-blue-tint); }
.prep-article-content .warn { border-right: 4px solid var(--prep-red); background: var(--prep-red-tint); }

.prep-article-content .examples { display: grid; gap: 8px; }
.prep-article-content .ex {
    min-width: 0;
    border: 1px dashed var(--prep-line);
    border-radius: 10px;
    padding: 10px 12px;
    background: #fbfcfe;
}
.prep-article-content .ex .en { color: #1d3147; font-weight: 700; }
.prep-article-content .ex .fa { margin-top: 3px; color: #5c7086; font-size: 12.5px; }

.prep-scroll {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    margin: 14px 0;
    padding-bottom: 3px;
}

.prep-article-content .contrast {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border: 1px solid var(--prep-line);
    border-radius: 12px;
    background: #fff;
    font-size: 12px;
}
.prep-article-content .contrast th {
    padding: 10px 12px;
    background: var(--prep-navy);
    color: #fff;
    font-size: 11.5px;
    white-space: nowrap;
}
.prep-article-content .contrast td {
    padding: 10px 12px;
    border-top: 1px solid var(--prep-line);
    vertical-align: top;
    color: var(--prep-ink);
}
.prep-article-content .contrast tr:nth-child(even) td { background: #f8fbfe; }

.prep-article-content .flow {
    display: flex;
    align-items: stretch;
    gap: 8px;
    direction: ltr;
    margin: 16px 0;
    min-width: 0;
}
.prep-article-content .flow .step {
    flex: 1 1 0;
    min-width: 0;
    padding: 13px 10px;
    border: 1px solid var(--prep-line);
    border-radius: 12px;
    background: #fff;
    text-align: center;
}
.prep-article-content .flow .step b { display: block; color: var(--prep-navy); font-size: 14px; }
.prep-article-content .flow .step span { display: block; margin-top: 4px; color: var(--prep-muted); font-size: 10.5px; }
.prep-article-content .flow .arrow { display: flex; align-items: center; color: var(--prep-orange-deep); font-size: 21px; font-weight: 900; }

.prep-article-content .scene,
.prep-article-content .movement,
.prep-article-content .timeline {
    width: 100%;
    min-width: 0;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--prep-line);
    border-radius: 16px;
    background: #fff;
}
.prep-article-content .scene { height: 190px; }
.prep-article-content .scene .floor { position: absolute; left: 0; right: 0; bottom: 0; height: 62px; background: #e8edf3; }
.prep-article-content .scene .table { position: absolute; width: 160px; height: 19px; left: 265px; bottom: 91px; border-radius: 7px; background: #c98e5e; }
.prep-article-content .scene .table:before,
.prep-article-content .scene .table:after { content: ""; position: absolute; width: 15px; height: 83px; bottom: -76px; background: #9b6a45; }
.prep-article-content .scene .table:before { left: 23px; }
.prep-article-content .scene .table:after { right: 23px; }
.prep-article-content .scene .ball { position: absolute; width: 34px; height: 34px; border-radius: 50%; background: var(--prep-orange); box-shadow: inset -4px -4px 0 rgba(0,0,0,.08); }
.prep-article-content .scene .label,
.prep-article-content .movement .tag {
    position: absolute;
    border: 1px solid var(--prep-line);
    border-radius: 999px;
    padding: 4px 9px;
    background: #fff;
    color: var(--prep-navy);
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

.prep-article-content .timeline { height: 122px; }
.prep-article-content .timeline .axis { position: absolute; left: 38px; right: 38px; top: 57px; height: 1px; background: #bfd0df; }
.prep-article-content .timeline .tick { position: absolute; top: 47px; width: 1px; height: 20px; background: #bfd0df; }
.prep-article-content .timeline .pill { position: absolute; top: 27px; border-radius: 999px; padding: 5px 11px; font-size: 10px; font-weight: 800; white-space: nowrap; }
.prep-article-content .timeline .at { background: var(--prep-orange-tint); color: var(--prep-orange-deep); }
.prep-article-content .timeline .on { background: var(--prep-blue-tint); color: var(--prep-blue); }
.prep-article-content .timeline .in { background: var(--prep-green-tint); color: var(--prep-green); }

.prep-article-content .movement { height: 164px; }
.prep-article-content .movement .zone { position: absolute; border: 2px solid #afc6d8; border-radius: 14px; background: #f7fafd; }
.prep-article-content .movement .path { position: absolute; height: 2px; background: var(--prep-blue); transform-origin: left center; }
.prep-article-content .movement .path:after { content: ""; position: absolute; right: -4px; top: -6px; border-left: 15px solid var(--prep-blue); border-top: 8px solid transparent; border-bottom: 8px solid transparent; }

.prep-article-content .qa { counter-reset: prep-q; }
.prep-article-content .q {
    counter-increment: prep-q;
    margin-bottom: 9px;
    padding: 12px 14px;
    border: 1px solid var(--prep-line);
    border-radius: 11px;
    background: #fff;
    color: var(--prep-ink);
}
.prep-article-content .q:before { content: counter(prep-q) "."; margin-left: 7px; color: var(--prep-orange-deep); font-weight: 800; }
.prep-article-content .blank { display: inline-block; min-width: 76px; height: 16px; vertical-align: baseline; border-bottom: 1px solid #8aa1b8; }
.prep-article-content .option { color: var(--prep-blue); font-weight: 700; }

.prep-article-content .answer {
    margin-bottom: 8px;
    padding: 11px 13px;
    border: 1px solid var(--prep-line);
    border-radius: 10px;
    background: #fff;
    color: var(--prep-ink);
}
.prep-article-content .answer b { color: var(--prep-green); }

.prep-article-content .decision { display: grid; gap: 10px; }
.prep-article-content .decision .row { display: grid; grid-template-columns: minmax(170px,.75fr) 28px minmax(0,1.4fr); align-items: center; gap: 8px; }
.prep-article-content .decision .ask { padding: 12px; border: 1px solid var(--prep-line); border-radius: 11px; background: #fff; color: var(--prep-navy); font-weight: 700; }
.prep-article-content .decision .arr { text-align: center; color: var(--prep-orange-deep); font-size: 21px; }
.prep-article-content .decision .ans { padding: 12px; border-radius: 11px; background: var(--prep-blue-tint); color: var(--prep-ink); }

.prep-article-content .levelbar { display: flex; flex-wrap: wrap; gap: 7px; direction: ltr; margin: 12px 0; }
.prep-article-content .levelbar span { padding: 4px 10px; border-radius: 999px; font-size: 10px; font-weight: 800; }
.prep-article-content .levelbar .a1 { background: #eaf6ee; color: #2e9e5b; }
.prep-article-content .levelbar .a2 { background: #edf6de; color: #658a22; }
.prep-article-content .levelbar .b1 { background: #fff2e4; color: #d9762e; }
.prep-article-content .levelbar .b2 { background: #fceadd; color: #c55e17; }
.prep-article-content .levelbar .c1 { background: #eaf3fc; color: #1d5fa8; }
.prep-article-content .levelbar .c2 { background: #f3eafb; color: #8a4fd1; }

.prep-end-card p { color: #cfd5e2; margin-bottom: 19px; }

/* Avoid a site-wide overflow if an approved handout fragment contains a long English chunk. */
.prep-article-content,
.prep-article-content * { max-width: 100%; }
.prep-article-content .inline-en,
.prep-article-content .en,
.prep-article-content td,
.prep-article-content th { overflow-wrap: anywhere; word-break: normal; }

@media (max-width: 991px) {
    .prep-article-content .grid3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .prep-article-content .grid4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .prep-article-content .decision .row { grid-template-columns: 1fr; }
    .prep-article-content .decision .arr { transform: rotate(-90deg); line-height: 1; }
}

@media (max-width: 760px) {
    .prep-hero-visual { grid-template-columns: 1fr; gap: 9px; margin-top: 18px; }
    .prep-hero-chip { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; }
    .prep-hero-chip b { margin: 0; font-size: 21px; }
    .prep-hero-chip span { font-size: 11.5px; }

    .prep-block { padding: 18px 15px; margin-bottom: 18px; border-radius: 16px; }
    .prep-article-content h2 { font-size: 20px; }
    .prep-article-content h3 { font-size: 16px; }
    .prep-article-content .lead { font-size: 14px; }
    .prep-article-content .grid2,
    .prep-article-content .grid3,
    .prep-article-content .grid4 { grid-template-columns: 1fr; }
    .prep-article-content .card,
    .prep-article-content .box { padding: 15px; }

    .prep-article-content .flow { flex-direction: column; direction: rtl; }
    .prep-article-content .flow .arrow { justify-content: center; transform: rotate(-90deg); }

    /* Visual diagrams keep their proportions in a local scroller. This is
       intentional: only the diagram scrolls, never the whole page. */
    .prep-scroll > .scene,
    .prep-scroll > .movement,
    .prep-scroll > .timeline { min-width: 620px; }
    .prep-scroll > table.contrast { min-width: 650px; }

    .prep-article-content .q { padding: 11px 12px; }
    .prep-article-content .blank { min-width: 56px; }
}

@media (max-width: 430px) {
    .prep-block { padding: 16px 13px; }
    .prep-article-content h2 { font-size: 19px; }
    .prep-article-content .section-kicker { font-size: 10px; }
    .prepositions-card-map span { font-size: 19px; }
}

/* ============================================================
   PREPOSITIONS — premium visual redesign (v2)
   Richer, magazine-like presentation aligned with Tense & Aspect.
   All rules are scoped to the prepositions article and keep mobile
   overflow contained to local diagram/table scrollers only.
   ============================================================ */
.prep-article {
    --prep-shadow: 0 18px 55px rgba(14, 42, 71, .085);
    --prep-shadow-soft: 0 10px 30px rgba(14, 42, 71, .06);
    --prep-radius: 24px;
}

/* ---------- Hero: turn IN / ON / AT into actual visual concepts ---------- */
.prep-hero {
    isolation: isolate;
    padding-bottom: 62px;
    background:
        radial-gradient(circle at 8% 22%, rgba(242,153,74,.34), transparent 24%),
        radial-gradient(circle at 88% 84%, rgba(47,143,224,.20), transparent 26%),
        radial-gradient(circle at 55% 105%, rgba(46,158,91,.14), transparent 28%),
        linear-gradient(142deg, #04091e 0%, #0b233b 48%, #103a5f 100%);
}
.prep-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .16;
    background-image:
        linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(to bottom, #000, transparent 92%);
}
.prep-hero .article-container { position: relative; z-index: 2; }
.prep-hero .article-kicker { color: #ffad75; }
.prep-hero h1 { max-width: 900px; }
.prep-hero .article-sub { max-width: 800px; }

.prep-hero-visual {
    max-width: 850px;
    margin-top: 30px;
    gap: 14px;
}
.prep-hero-chip {
    position: relative;
    min-height: 132px;
    display: grid;
    grid-template-columns: 88px minmax(0,1fr);
    align-items: center;
    gap: 14px;
    padding: 18px;
    text-align: right;
    border-radius: 21px;
    overflow: hidden;
    backdrop-filter: blur(8px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
    transition: transform .22s ease, border-color .22s ease, background .22s ease;
}
.prep-hero-chip::after {
    content: "";
    position: absolute;
    width: 95px;
    height: 95px;
    border-radius: 50%;
    left: -42px;
    bottom: -52px;
    opacity: .12;
    background: currentColor;
}
.prep-hero-chip > div { min-width: 0; }
.prep-hero-chip b { font-size: 31px; margin-bottom: 7px; }
.prep-hero-chip span:not(.prep-symbol) { font-size: 12.5px; }
.prep-in { color: #7cd39d; }
.prep-on { color: #76d6ff; }
.prep-at { color: #ffae69; }

.prep-symbol {
    position: relative;
    display: block;
    width: 78px;
    height: 78px;
    border-radius: 20px;
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.12);
}
.prep-symbol i { position: absolute; display: block; }
.prep-symbol-in::before {
    content: "";
    position: absolute;
    inset: 17px;
    border: 2px solid rgba(124,211,157,.70);
    border-radius: 10px;
}
.prep-symbol-in i {
    width: 15px; height: 15px; border-radius: 50%;
    background: #7cd39d; left: 31px; top: 31px;
    box-shadow: 0 0 0 7px rgba(124,211,157,.10);
}
.prep-symbol-on::before {
    content: "";
    position: absolute;
    left: 13px; right: 13px; top: 45px;
    height: 3px; border-radius: 999px; background: rgba(118,214,255,.70);
}
.prep-symbol-on i {
    width: 16px; height: 16px; border-radius: 50%;
    background: #76d6ff; left: 31px; top: 27px;
    box-shadow: 0 7px 0 -5px rgba(118,214,255,.35);
}
.prep-symbol-at::before,
.prep-symbol-at::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(255,174,105,.38);
}
.prep-symbol-at::before { inset: 13px; }
.prep-symbol-at::after { inset: 24px; border-color: rgba(255,174,105,.68); }
.prep-symbol-at i {
    width: 13px; height: 13px; border-radius: 50%;
    background: #ffae69; left: 32px; top: 32px;
    box-shadow: 0 0 0 6px rgba(255,174,105,.10);
}

.prep-level-route {
    direction: ltr;
    display: flex;
    align-items: center;
    gap: 7px;
    width: min(100%, 850px);
    margin: 5px 0 20px;
    color: #bacbdb;
}
.prep-level-route span {
    display: grid;
    place-items: center;
    flex: 0 0 36px;
    height: 27px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.15);
    background: rgba(255,255,255,.06);
    font-size: 10px;
    font-weight: 800;
}
.prep-level-route span:nth-of-type(1), .prep-level-route span:nth-of-type(2) { color: #9ee1b7; }
.prep-level-route span:nth-of-type(3), .prep-level-route span:nth-of-type(4) { color: #ffbd8e; }
.prep-level-route span:nth-of-type(5) { color: #8ad9ff; }
.prep-level-route span:nth-of-type(6) { color: #cfadf1; }
.prep-level-route i { height: 1px; min-width: 8px; flex: 1 1 auto; background: linear-gradient(90deg, rgba(255,255,255,.10), rgba(255,255,255,.36), rgba(255,255,255,.10)); }

/* ---------- Content canvas ---------- */
.prep-article .article-body-wrap { gap: 34px; }
.prep-article-content { counter-reset: prepPremiumBlock 1; }
.prep-section { padding: 14px 0 22px; }

.prep-block {
    counter-increment: prepPremiumBlock;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-bottom: 24px;
    padding: 30px 30px 28px;
    border-radius: var(--prep-radius);
    background: #fff;
    border: 1px solid rgba(216,228,240,.88);
    box-shadow: var(--prep-shadow-soft);
}
.prep-block::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 180px;
    height: 180px;
    left: -88px;
    top: -95px;
    border-radius: 50%;
    background: rgba(242,153,74,.07);
}
.prep-block::after {
    content: counter(prepPremiumBlock, decimal-leading-zero);
    position: absolute;
    z-index: -1;
    left: 22px;
    top: 10px;
    direction: ltr;
    font: 800 62px/1 Arial, sans-serif;
    letter-spacing: -.08em;
    color: rgba(14,42,71,.035);
}
.prep-block > * { position: relative; z-index: 1; }

/* A magazine-like accent strip on every block. */
.prep-block { border-top: 4px solid var(--prep-orange); }
.prep-block-3, .prep-block-4 { border-top-color: var(--prep-green); }
.prep-block-5, .prep-block-7 { border-top-color: var(--prep-orange); }
.prep-block-6 { border-top-color: var(--prep-sky); }
.prep-block-8, .prep-block-9, .prep-block-10, .prep-block-11 { border-top-color: var(--prep-blue); }
.prep-block-12, .prep-block-13 { border-top-color: var(--prep-red); }
.prep-block-14 { border-top-color: var(--prep-purple); }

/* Early sections use distinct subtle color fields instead of identical white cards. */
.prep-block-2 { background: linear-gradient(145deg, #ffffff 0%, #fff9f3 100%); }
.prep-block-3 { background: linear-gradient(145deg, #ffffff 0%, #f2fbf5 100%); }
.prep-block-4 { background: linear-gradient(145deg, #ffffff 0%, #f4fafc 100%); }
.prep-block-5, .prep-block-7 { background: linear-gradient(145deg, #ffffff 0%, #fff8f0 100%); }
.prep-block-6 { background: linear-gradient(145deg, #ffffff 0%, #f1f9ff 100%); }
.prep-block-8 { background: linear-gradient(145deg, #ffffff 0%, #f5f8ff 100%); }
.prep-block-9, .prep-block-10, .prep-block-11 { background: linear-gradient(145deg, #ffffff 0%, #f7fbff 100%); }
.prep-block-12 { background: linear-gradient(145deg, #ffffff 0%, #fff5f5 100%); }
.prep-block-13 { background: linear-gradient(145deg, #ffffff 0%, #fff8f4 100%); }
.prep-block-14 { background: linear-gradient(145deg, #ffffff 0%, #faf6ff 100%); }

/* B2 / C1 / C2 chapters get a clear level identity. */
.prep-block-15, .prep-block-16, .prep-block-17,
.prep-block-18, .prep-block-19, .prep-block-20,
.prep-block-21 {
    padding-top: 38px;
}
.prep-block-15, .prep-block-16, .prep-block-17 {
    border-top-color: #d9762e;
    background: linear-gradient(145deg, #fff 0%, #fff7ef 100%);
}
.prep-block-18, .prep-block-19, .prep-block-20 {
    border-top-color: #1d5fa8;
    background: linear-gradient(145deg, #fff 0%, #f2f7fd 100%);
}
.prep-block-21 {
    border-top-color: #8a4fd1;
    background: linear-gradient(145deg, #fff 0%, #f8f3fc 100%);
}
.prep-block-15::marker, .prep-block-16::marker, .prep-block-17::marker { content: none; }
.prep-block-15::before, .prep-block-16::before, .prep-block-17::before { background: rgba(217,118,46,.10); }
.prep-block-18::before, .prep-block-19::before, .prep-block-20::before { background: rgba(29,95,168,.09); }
.prep-block-21::before { background: rgba(138,79,209,.10); }
.prep-block-15 > .section-kicker::before, .prep-block-16 > .section-kicker::before, .prep-block-17 > .section-kicker::before { content: "B2"; }
.prep-block-18 > .section-kicker::before, .prep-block-19 > .section-kicker::before, .prep-block-20 > .section-kicker::before { content: "C1"; }
.prep-block-21 > .section-kicker::before { content: "C2"; }
.prep-block-15 > .section-kicker::before, .prep-block-16 > .section-kicker::before, .prep-block-17 > .section-kicker::before,
.prep-block-18 > .section-kicker::before, .prep-block-19 > .section-kicker::before, .prep-block-20 > .section-kicker::before,
.prep-block-21 > .section-kicker::before {
    direction: ltr;
    display: inline-grid;
    place-items: center;
    min-width: 30px;
    height: 20px;
    margin-left: 7px;
    padding: 0 6px;
    border-radius: 999px;
    color: #fff;
    background: currentColor;
    box-shadow: inset 0 0 0 999px rgba(0,0,0,.0);
    font: 800 9px/1 Arial, sans-serif;
}
.prep-block-15 > .section-kicker, .prep-block-16 > .section-kicker, .prep-block-17 > .section-kicker { color: #c55e17; background: #fceadd; }
.prep-block-18 > .section-kicker, .prep-block-19 > .section-kicker, .prep-block-20 > .section-kicker { color: #1d5fa8; background: #eaf3fc; }
.prep-block-21 > .section-kicker { color: #8a4fd1; background: #f3eafb; }
.prep-block-15 > .section-kicker::before, .prep-block-16 > .section-kicker::before, .prep-block-17 > .section-kicker::before { background: #c55e17; }
.prep-block-18 > .section-kicker::before, .prep-block-19 > .section-kicker::before, .prep-block-20 > .section-kicker::before { background: #1d5fa8; }
.prep-block-21 > .section-kicker::before { background: #8a4fd1; }

/* Decision + exercises feel like purposeful modules. */
.prep-block-22 {
    border-top-color: var(--prep-navy);
    background:
        radial-gradient(circle at 6% 20%, rgba(242,153,74,.09), transparent 24%),
        linear-gradient(145deg, #fff 0%, #f3f7fb 100%);
}
.prep-block-23, .prep-block-24 { border-top-color: #2f8fe0; background: linear-gradient(145deg, #fff, #f5faff); }
.prep-block-25, .prep-block-26 { border-top-color: #2e9e5b; background: linear-gradient(145deg, #fff, #f3fbf5); }
.prep-block-27 {
    border: 0;
    color: #fff;
    background:
        radial-gradient(circle at 10% 20%, rgba(242,153,74,.20), transparent 28%),
        radial-gradient(circle at 90% 90%, rgba(47,143,224,.16), transparent 30%),
        linear-gradient(135deg, #071426, #0e2a47 58%, #123a63);
    box-shadow: 0 20px 60px rgba(4,9,30,.14);
}
.prep-block-27::after { color: rgba(255,255,255,.05); }
.prep-block-27 > h2,
.prep-block-27 > h3,
.prep-block-27 > p,
.prep-block-27 > .lead,
.prep-block-27 > .small { color: #edf5fb; }
.prep-block-27 .section-kicker { color: #ffd0ad; background: rgba(242,153,74,.14); }
.prep-block-27 .card {
    background: #fff !important;
    border-color: rgba(216,228,240,.9);
}
.prep-block-27 .card h3 { color: var(--prep-navy) !important; }
.prep-block-27 .card p { color: var(--prep-ink) !important; }
.prep-block-27 .box { background: rgba(255,255,255,.07) !important; border-color: rgba(255,255,255,.13); }
.prep-block-27 .box h3, .prep-block-27 .box p { color: #f3f7fb; }

/* ---------- Typography & hierarchy ---------- */
.prep-article-content h2 {
    max-width: 820px;
    font-size: clamp(22px, 2.35vw, 28px);
    letter-spacing: -.02em;
    line-height: 1.65;
    margin-bottom: 12px;
}
.prep-article-content h2::after {
    content: "";
    display: block;
    width: 54px;
    height: 3px;
    margin-top: 11px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--prep-orange), var(--prep-sky));
}
.prep-article-content h3 { font-size: 17.5px; }
.prep-article-content .lead { max-width: 790px; font-size: 15.3px; line-height: 2.1; }
.prep-article-content .section-kicker {
    gap: 5px;
    min-height: 30px;
    padding: 5px 12px;
    box-shadow: inset 0 0 0 1px rgba(217,118,46,.07);
}

/* ---------- Cards / examples ---------- */
.prep-article-content .card,
.prep-article-content .box {
    position: relative;
    overflow: hidden;
    padding: 20px;
    border-radius: 18px;
    box-shadow: 0 7px 22px rgba(14,42,71,.04);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.prep-article-content .card::before,
.prep-article-content .box::before {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background: rgba(14,42,71,.08);
}
.prep-article-content .box.blue::before { background: var(--prep-blue); }
.prep-article-content .box.orange::before { background: var(--prep-orange); }
.prep-article-content .box.green::before { background: var(--prep-green); }
.prep-article-content .box.purple::before { background: var(--prep-purple); }
.prep-article-content .box.red::before { background: var(--prep-red); }

.prep-article-content .ex {
    position: relative;
    padding: 11px 13px;
    background: rgba(255,255,255,.78);
    border-style: solid;
    border-color: rgba(216,228,240,.9);
}
.prep-article-content .ex::before {
    content: "“";
    position: absolute;
    left: 8px;
    top: 2px;
    color: rgba(242,153,74,.22);
    font: 800 28px/1 Georgia, serif;
}

.prep-article-content .note,
.prep-article-content .tip,
.prep-article-content .warn {
    position: relative;
    padding: 15px 18px 15px 16px;
    border-radius: 14px;
    box-shadow: 0 5px 18px rgba(14,42,71,.035);
}
.prep-article-content .note { background: linear-gradient(90deg, #fff9f4, #fff); }
.prep-article-content .tip { background: linear-gradient(90deg, #eef8ff, #fafdff); }
.prep-article-content .warn { background: linear-gradient(90deg, #fff0f0, #fff8f8); }

/* ---------- Diagrams become focal cards ---------- */
.prep-scroll {
    border-radius: 18px;
    scrollbar-color: rgba(29,95,168,.35) transparent;
}
.prep-article-content .scene,
.prep-article-content .movement,
.prep-article-content .timeline {
    border-radius: 20px;
    box-shadow: 0 10px 28px rgba(14,42,71,.06);
    background:
        radial-gradient(circle at 95% 12%, rgba(47,143,224,.07), transparent 24%),
        linear-gradient(#fff, #fbfdff);
}
.prep-article-content .scene .floor { background: linear-gradient(180deg, #eef3f7, #e2e9ef); }
.prep-article-content .scene .table { box-shadow: 0 6px 12px rgba(104,69,43,.10); }
.prep-article-content .scene .ball { box-shadow: inset -5px -5px 0 rgba(0,0,0,.07), 0 7px 12px rgba(242,153,74,.20); }
.prep-article-content .scene .label,
.prep-article-content .movement .tag {
    box-shadow: 0 5px 14px rgba(14,42,71,.08);
}
.prep-article-content .timeline .axis { height: 2px; background: linear-gradient(90deg, #dbe6ef, #93b5d2, #dbe6ef); }
.prep-article-content .timeline .pill { box-shadow: 0 5px 14px rgba(14,42,71,.06); }
.prep-article-content .movement .zone { border-style: dashed; background: linear-gradient(145deg, #fbfdff, #edf5fb); }

/* ---------- Tables: polished, legible and consistent with the site ---------- */
.prep-article-content .contrast {
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(14,42,71,.05);
    font-size: 12.4px;
}
.prep-article-content .contrast th {
    padding: 12px 14px;
    background: linear-gradient(135deg, #0e2a47, #174d7e);
    font-size: 11.8px;
}
.prep-article-content .contrast td { padding: 12px 14px; }
.prep-article-content .contrast tr:nth-child(even) td { background: rgba(234,243,252,.42); }

/* ---------- Flow / Decision map ---------- */
.prep-article-content .flow {
    padding: 13px;
    gap: 10px;
    border: 1px solid var(--prep-line);
    border-radius: 18px;
    background: rgba(255,255,255,.58);
}
.prep-article-content .flow .step {
    position: relative;
    padding: 15px 11px;
    border-radius: 14px;
    box-shadow: 0 5px 16px rgba(14,42,71,.04);
}
.prep-article-content .flow .step:first-child { background: var(--prep-green-tint); }
.prep-article-content .flow .step:nth-of-type(2) { background: var(--prep-blue-tint); }
.prep-article-content .flow .step:nth-of-type(3) { background: var(--prep-orange-tint); }
.prep-article-content .flow .step:nth-of-type(4) { background: var(--prep-purple-tint); }

.prep-article-content .decision { gap: 12px; }
.prep-article-content .decision .row {
    padding: 8px;
    border: 1px solid rgba(216,228,240,.85);
    border-radius: 16px;
    background: rgba(255,255,255,.70);
}
.prep-article-content .decision .ask {
    border: 0;
    background: linear-gradient(145deg, #0e2a47, #174f80);
    color: #fff;
    box-shadow: 0 7px 18px rgba(14,42,71,.13);
}
.prep-article-content .decision .ans {
    border: 1px solid #d4e5f5;
    background: linear-gradient(145deg, #edf7ff, #f8fcff);
}

/* ---------- Exercises / answers ---------- */
.prep-article-content .qa { display: grid; gap: 9px; }
.prep-article-content .q {
    position: relative;
    margin: 0;
    padding: 14px 48px 14px 15px;
    border-radius: 14px;
    background: rgba(255,255,255,.86);
    box-shadow: 0 5px 16px rgba(14,42,71,.035);
}
.prep-article-content .q::before {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    margin: 0;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(145deg, var(--prep-sky), var(--prep-blue));
    font-size: 10px;
}
.prep-article-content .answer {
    position: relative;
    padding: 13px 15px 13px 43px;
    border-color: #d6ebdc;
    background: rgba(250,255,251,.9);
}
.prep-article-content .answer::after {
    content: "✓";
    position: absolute;
    left: 13px;
    top: 12px;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: #fff;
    background: var(--prep-green);
    font-size: 11px;
    font-weight: 900;
}

/* ---------- Sticky TOC gets a premium visual treatment ---------- */
.prep-article .article-toc-card {
    border-radius: 20px;
    border-color: #dde8f2;
    box-shadow: 0 12px 36px rgba(14,42,71,.07);
    background: linear-gradient(180deg, #fff, #fbfdff);
}
.prep-article .article-toc-card strong {
    padding-bottom: 9px;
    border-bottom: 2px solid var(--prep-orange-tint);
}
.prep-article .article-toc-card a { position: relative; padding-right: 14px; }
.prep-article .article-toc-card a::before {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 5px;
    height: 5px;
    margin-top: -2px;
    border-radius: 50%;
    background: #c4d3df;
    transition: background .2s ease, transform .2s ease;
}
.prep-article .article-toc-card a:hover::before { background: var(--prep-orange); transform: scale(1.35); }

@media (hover:hover) and (pointer:fine) {
    .prep-hero-chip:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.095); }
    .prep-article-content .card:hover,
    .prep-article-content .box:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(14,42,71,.075); border-color: #cbdde9; }
}

/* ---------- Responsive: aesthetic without causing page-level overflow ---------- */
@media (max-width: 991px) {
    .prep-article .article-toc-card { border-radius: 16px; box-shadow: 0 7px 22px rgba(14,42,71,.055); }
    .prep-article .article-toc-card strong { border: 0; padding: 0; }
    .prep-article .article-toc-card a { padding-right: 11px; }
    .prep-article .article-toc-card a::before { display: none; }
}

@media (max-width: 760px) {
    .prep-hero { padding-bottom: 43px; }
    .prep-hero-visual { grid-template-columns: 1fr; gap: 10px; }
    .prep-hero-chip {
        min-height: 88px;
        grid-template-columns: 60px minmax(0,1fr);
        padding: 12px 14px;
        text-align: right;
    }
    .prep-symbol { width: 56px; height: 56px; border-radius: 15px; }
    .prep-symbol-in::before { inset: 12px; }
    .prep-symbol-in i { width: 12px; height: 12px; left: 21px; top: 21px; }
    .prep-symbol-on::before { left: 10px; right: 10px; top: 33px; }
    .prep-symbol-on i { width: 13px; height: 13px; left: 21px; top: 19px; }
    .prep-symbol-at::before { inset: 9px; }
    .prep-symbol-at::after { inset: 17px; }
    .prep-symbol-at i { width: 10px; height: 10px; left: 22px; top: 22px; }
    .prep-hero-chip b { font-size: 23px; margin-bottom: 4px; }
    .prep-hero-chip span:not(.prep-symbol) { font-size: 11px; }
    .prep-level-route { gap: 4px; margin-bottom: 16px; }
    .prep-level-route span { flex-basis: 31px; height: 24px; font-size: 9px; }

    .prep-section { padding: 8px 0 16px; }
    .prep-block {
        padding: 22px 17px 20px;
        margin-bottom: 18px;
        border-radius: 19px;
        box-shadow: 0 8px 24px rgba(14,42,71,.055);
    }
    .prep-block::after { left: 12px; top: 10px; font-size: 46px; }
    .prep-block-15, .prep-block-16, .prep-block-17,
    .prep-block-18, .prep-block-19, .prep-block-20,
    .prep-block-21 { padding-top: 25px; }

    .prep-article-content h2 { font-size: 20px; }
    .prep-article-content h2::after { width: 42px; margin-top: 8px; }
    .prep-article-content .lead { font-size: 14px; line-height: 2; }
    .prep-article-content .card,
    .prep-article-content .box { padding: 16px; border-radius: 15px; }

    .prep-article-content .flow { padding: 10px; }
    .prep-article-content .decision .row { padding: 7px; }
    .prep-article-content .decision .ask,
    .prep-article-content .decision .ans { padding: 12px; }
    .prep-article-content .q { padding: 13px 44px 13px 12px; }

    /* Keep existing local scrollers; never enlarge the document itself. */
    .prep-scroll { margin-left: 0; margin-right: 0; max-width: 100%; }
}

@media (max-width: 430px) {
    .prep-hero-chip { grid-template-columns: 52px minmax(0,1fr); }
    .prep-symbol { width: 50px; height: 50px; }
    .prep-symbol-in i { left: 18px; top: 18px; }
    .prep-symbol-on::before { top: 29px; }
    .prep-symbol-on i { left: 18px; top: 16px; }
    .prep-symbol-at i { left: 19px; top: 19px; }
    .prep-level-route i { min-width: 4px; }
    .prep-level-route span { flex-basis: 28px; font-size: 8.5px; }
    .prep-block { padding: 20px 14px 18px; }
    .prep-article-content h2 { font-size: 19px; }
}

/* ============================================================
   Prepositions A1–C2 v3 — Tense/Aspect visual language
   The article reuses the shared article-detail design and only
   adds content-specific grids, tables and lightweight diagrams.
   ============================================================ */
.prep-v3 .article-sub span[dir="ltr"] { color: #ffd2bd; font-weight: 800; }
.prep-v3 .prep-level-section { scroll-margin-top: 110px; }
.prep-v3 .prep-section-heading { display:flex; align-items:flex-start; gap:12px; margin-bottom:20px; }
.prep-v3 .prep-section-heading .section-title { margin-bottom:4px; }
.prep-v3 .prep-section-heading .section-title::before { display:none; }
.prep-v3 .prep-section-heading .section-desc { margin:0; }
.prep-v3 .prep-level-chip { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; min-width:46px; height:32px; padding:0 10px; border-radius:999px; direction:ltr; font:800 11px/1 Arial,sans-serif; }
.prep-v3 .prep-level-chip.green { background:var(--article-green-tint); color:#2b8d50; }
.prep-v3 .prep-level-chip.orange { background:var(--article-orange-tint); color:var(--article-primary-deep); }
.prep-v3 .prep-level-chip.blue { background:var(--article-blue-tint); color:#148593; }
.prep-v3 .prep-level-chip.purple { background:var(--article-purple-tint); color:#7f49b9; }
.prep-v3 .prep-level-chip.gold { background:#fff7df; color:#a77400; }
.prep-v3 .prep-level-chip.red { background:#fff0f0; color:#b34242; }
.prep-v3 .prep-level-chip.navy { background:#eef0f5; color:var(--article-dark); }
.prep-v3 .prep-subtitle { display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; margin:24px 0 13px; color:var(--article-text); font-size:17px; font-weight:800; line-height:1.7; }
.prep-v3 .prep-subtitle > span { color:#288a78; font-size:13px; font-weight:700; }
.prep-v3 .prep-pair-grid { display:grid; gap:10px; margin:0 0 15px; }
.prep-v3 .prep-pair-grid.cols-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.prep-v3 .prep-pair-grid.cols-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.prep-v3 .prep-pair-grid.cols-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.prep-v3 .prep-pair-card { min-width:0; padding:11px 12px; border:1px solid var(--article-line); border-radius:11px; background:#fff; }
.prep-v3 .prep-pair-card b { display:block; color:var(--article-text); font-size:12.5px; text-align:left; overflow-wrap:anywhere; }
.prep-v3 .prep-pair-card span { display:block; margin-top:3px; color:#478d7d; font-size:11.5px; }
.prep-v3 .prep-concept-gap { margin-top:16px; }
.prep-v3 .concept-card .prep-pair-grid { margin-top:12px; margin-bottom:0; }
.prep-v3 .concept-card .prep-pair-card { background:rgba(255,255,255,.75); }
.prep-v3 .prep-example-stack { display:grid; gap:8px; margin:10px 0 16px; }
.prep-v3 .prep-example { padding:10px 12px; border-radius:10px; border-right:3px solid var(--article-primary); background:#fff; box-shadow:inset 0 0 0 1px #eeeeF2; }
.prep-v3 .prep-example .en { direction:ltr; text-align:left; color:#30343f; font-size:12.7px; font-weight:600; line-height:1.8; }
.prep-v3 .prep-example .fa { margin-top:3px; color:#5f6570; font-size:12px; }
.prep-v3 .prep-table-scroll { width:100%; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; margin:10px 0 17px; }
.prep-v3 .prep-table { width:100%; min-width:620px; border-collapse:separate; border-spacing:0; direction:rtl; background:#fff; border:1px solid var(--article-line); border-radius:14px; overflow:hidden; font-size:12px; }
.prep-v3 .prep-table th { padding:10px 12px; color:#fff; background:var(--article-dark); font-size:11.5px; text-align:right; }
.prep-v3 .prep-table td { padding:10px 12px; border-top:1px solid var(--article-line); border-left:1px solid var(--article-line); color:#454a55; vertical-align:top; line-height:1.8; }
.prep-v3 .prep-table td:last-child { border-left:0; }
.prep-v3 .prep-table tr:nth-child(even) td { background:#fbfbfd; }
.prep-v3 .prep-table small { color:#6d7380; }
.prep-v3 .prep-table span[dir="ltr"], .prep-v3 .prep-table b[dir="ltr"] { display:inline-block; text-align:left; }
.prep-v3 .prep-az-table { min-width:700px; }
.prep-v3 .prep-az-table td:nth-child(1), .prep-v3 .prep-az-table th:nth-child(1) { width:17%; }
.prep-v3 .prep-az-table td:nth-child(2), .prep-v3 .prep-az-table th:nth-child(2) { width:40%; }
.prep-v3 .bad { color:#b64040; text-decoration-line:line-through; text-decoration-thickness:1px; }
.prep-v3 .good { color:#237c48; font-weight:700; }
.prep-v3 .prep-note { margin:12px 0 16px; background:#fffaf6; }
.prep-v3 .prep-card-title { margin:0 0 12px; color:var(--article-text); font-size:16px; font-weight:800; }
.prep-v3 .prep-card-title small { color:#288a78; font-size:12px; }
.prep-v3 .prep-rule-list { display:grid; gap:10px; }
.prep-v3 .prep-rule-list > div { padding:12px 13px; border:1px solid var(--article-line); border-radius:11px; background:#fbfbfd; }
.prep-v3 .prep-rule-list > div > b { color:var(--article-primary-deep); }
.prep-v3 .prep-rule-list p { margin:4px 0 0; color:#505560; font-size:12.5px; }
.prep-v3 .prep-rule-list .en { margin-top:7px; color:#30343f; font-size:12px; font-weight:600; }
.prep-v3 .prep-rule-list .fa { margin-top:2px; color:#626874; font-size:11.7px; }
.prep-v3 .prep-visual-card { margin:16px 0; padding:18px; border:1px solid var(--article-line); border-radius:16px; background:#fff; overflow:hidden; }
.prep-v3 .prep-visual-caption { margin:10px 0 0; color:#6c717d; font-size:11.5px; text-align:center; }
.prep-v3 .prep-place-scene { position:relative; min-width:520px; height:190px; direction:ltr; }
.prep-v3 .prep-place-scene .place-table { position:absolute; left:50%; bottom:42px; width:190px; height:14px; transform:translateX(-50%); background:#c49336; border-radius:3px; }
.prep-v3 .prep-place-scene .place-table .leg { position:absolute; top:12px; width:10px; height:55px; background:#9b6d24; }
.prep-v3 .prep-place-scene .place-table .l { left:24px; } .prep-v3 .prep-place-scene .place-table .r { right:24px; }
.prep-v3 .prep-place-scene .place-table .object { position:absolute; left:50%; bottom:14px; width:50px; height:32px; transform:translateX(-50%); background:#3ca4b0; border-radius:6px 6px 2px 2px; }
.prep-v3 .prep-place-scene .place-table > span { position:absolute; left:50%; bottom:53px; transform:translateX(-50%); font-size:10px; color:#4f5560; }
.prep-v3 .prep-place-scene .under-dot { position:absolute; left:50%; top:28px; width:18px; height:18px; border-radius:50%; transform:translateX(-50%); background:var(--article-primary); }
.prep-v3 .prep-place-scene .place-table em { position:absolute; left:50%; top:48px; transform:translateX(-50%); font-style:normal; font-size:10px; color:#9a4d32; }
.prep-v3 .prep-place-scene .place-box { position:absolute; top:65px; width:82px; height:58px; border:2px solid #7a9cc0; border-radius:8px; }
.prep-v3 .prep-place-scene .place-box.in { left:22px; } .prep-v3 .prep-place-scene .place-box.next { right:66px; border:0; }
.prep-v3 .prep-place-scene .place-box i { position:absolute; width:22px; height:22px; border-radius:50%; background:#5b77be; left:28px; top:18px; }
.prep-v3 .prep-place-scene .place-box.next i { background:#76b783; }
.prep-v3 .prep-place-scene .place-box span { position:absolute; top:-22px; left:0; right:0; text-align:center; font-size:10px; color:#4f5560; }
.prep-v3 .prep-place-scene .place-person { position:absolute; right:8px; bottom:39px; width:35px; height:58px; }
.prep-v3 .prep-place-scene .place-person i { display:block; width:20px; height:20px; margin:0 auto; border-radius:50%; background:#6c55a3; box-shadow:0 22px 0 -3px #6c55a3; }
.prep-v3 .prep-place-scene .place-person span { position:absolute; top:-22px; right:-15px; width:95px; text-align:center; font-size:10px; color:#4f5560; }
.prep-v3 .prep-movement-viz { display:grid; grid-template-columns:repeat(4,minmax(100px,1fr)); gap:10px; min-width:540px; direction:ltr; }
.prep-v3 .prep-movement-viz .mv { position:relative; height:100px; border-radius:12px; background:#f8f9fb; overflow:hidden; }
.prep-v3 .prep-movement-viz .mv span { position:absolute; top:10px; left:12px; font-size:10px; font-weight:800; color:#545a66; }
.prep-v3 .prep-movement-viz .mv:before { content:""; position:absolute; left:18px; right:18px; bottom:26px; height:2px; background:#bbc2ca; }
.prep-v3 .prep-movement-viz .mv i { position:absolute; bottom:18px; width:28px; height:28px; border-radius:4px; background:#4aa2b0; }
.prep-v3 .prep-movement-viz .through i { left:44px; box-shadow:38px 0 0 -12px var(--article-primary); }
.prep-v3 .prep-movement-viz .across i { left:58px; width:52px; height:12px; bottom:22px; background:#b8d8f2; }
.prep-v3 .prep-movement-viz .past i { left:62px; background:#c65a64; }
.prep-v3 .prep-movement-viz .around i { left:62px; border-radius:50%; background:#d1a025; box-shadow:0 0 0 8px #efe1b1; }
.prep-v3 .prep-deadline { position:relative; min-width:540px; height:120px; direction:ltr; }
.prep-v3 .prep-deadline .line { position:absolute; left:55px; right:55px; top:58px; height:2px; background:#bcc3cd; }
.prep-v3 .prep-deadline .start,.prep-v3 .prep-deadline .end { position:absolute; top:42px; font-size:10px; color:#4f5560; }
.prep-v3 .prep-deadline .start { left:38px; } .prep-v3 .prep-deadline .end { right:38px; }
.prep-v3 .prep-deadline .deadline { position:absolute; right:57px; top:50px; width:16px; height:16px; border-radius:50%; background:var(--article-primary); }
.prep-v3 .prep-deadline .until { position:absolute; left:90px; right:90px; bottom:8px; padding-top:5px; border-top:4px solid #e2c55a; text-align:center; font-size:10px; color:#71652c; }
.prep-v3 .prep-deadline .by { position:absolute; right:38px; top:10px; font-size:10px; color:#b55139; }
.prep-v3 .prep-inversion-viz { display:grid; grid-template-columns:minmax(0,1fr) 36px minmax(0,1fr); align-items:center; gap:8px; margin-top:14px; direction:ltr; }
.prep-v3 .prep-inversion-viz > div { padding:12px; border:1px solid var(--article-line); border-radius:10px; background:#fff; font-size:11px; }
.prep-v3 .prep-inversion-viz > i { text-align:center; font-style:normal; color:var(--article-primary); font-size:22px; }
.prep-v3 .prep-inversion-viz .strong { border-color:#f3c6b3; background:var(--article-orange-tint); }
.prep-v3 .prep-inversion-viz small { display:block; margin-top:4px; color:#797e88; }
.prep-v3 .article-content, .prep-v3 .article-content * { min-width:0; }

@media (max-width: 760px) {
    .prep-v3 .prep-pair-grid.cols-4, .prep-v3 .prep-pair-grid.cols-3 { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .prep-v3 .prep-pair-grid.cols-2 { grid-template-columns:1fr; }
    .prep-v3 .prep-table { min-width:600px; }
    .prep-v3 .prep-az-table { min-width:680px; }
    .prep-v3 .prep-visual-card { overflow-x:auto; -webkit-overflow-scrolling:touch; }
    .prep-v3 .prep-section-heading { gap:9px; }
    .prep-v3 .prep-section-heading .section-title { font-size:20px; }
    .prep-v3 .prep-inversion-viz { grid-template-columns:1fr; direction:rtl; }
    .prep-v3 .prep-inversion-viz > i { transform:rotate(90deg); }
}
@media (max-width: 430px) {
    .prep-v3 .prep-pair-grid.cols-4, .prep-v3 .prep-pair-grid.cols-3 { grid-template-columns:1fr; }
    .prep-v3 .prep-level-chip { min-width:42px; height:29px; padding:0 8px; }
    .prep-v3 .prep-section-heading { align-items:flex-start; }
}

/* ============================================================
   Imperatives article — Tense & Aspect visual language
   Content mirrors Imperatives_Lingonik_Academy.pdf; styling only.
   ============================================================ */
.imp-article { --imp-blue:#1769b2; --imp-blue-deep:#0f4f8d; --imp-orange:#f59a23; --imp-orange-deep:#d97900; --imp-ink:#1d2b3d; --imp-line:#dbe5f0; --imp-blue-tint:#eef6fd; --imp-orange-tint:#fff5e7; }
.imp-hero { background: radial-gradient(circle at 10% 10%, rgba(245,154,35,.26), transparent 27%), radial-gradient(circle at 88% 95%, rgba(76,211,227,.13), transparent 28%), linear-gradient(135deg,#04091e 0%,#0b2c52 68%,#183d68 100%); }
.imp-hero h1 span { display:block; margin-top:6px; font-size:.62em; color:#dce8f4; font-weight:700; }
.imp-hero .article-sub span { color:#f7b24d; font-weight:700; }
.imp-hero-examples { display:flex; gap:8px; flex-wrap:wrap; margin:20px 0 17px; }
.imp-hero-examples span { padding:7px 11px; border-radius:999px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); color:#fff; font-size:12px; font-weight:700; }
.imp-content > .article-section { border-bottom:1px solid #edf0f5; }
.imp-content > .article-section:last-of-type { border-bottom:0; }
.imp-content .section-title span { color:var(--imp-blue); font-size:.75em; }
.imp-intro-card,.imp-rule,.imp-tip,.imp-mistakes,.imp-example-block,.imp-exercise,.imp-answer-grid>div,.imp-answer-sample,.imp-game,.imp-well-done { background:#fff; border:1px solid var(--article-line); border-radius:16px; }
.imp-intro-card { padding:20px 22px; margin-bottom:16px; border-right:4px solid var(--imp-blue); }
.imp-intro-card p { margin:0 0 8px; }
.imp-intro-card p:last-child { margin-bottom:0; }
.imp-contents-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:18px 0; }
.imp-contents-grid a { display:grid; grid-template-columns:34px 1fr; gap:2px 10px; align-items:center; padding:12px 13px; border:1px solid var(--article-line); border-radius:13px; background:#fff; color:var(--article-text); }
.imp-contents-grid a:hover { border-color:#b7d3ec; box-shadow:0 7px 20px rgba(15,79,141,.08); }
.imp-contents-grid b { grid-row:1/3; width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--imp-orange); color:#fff; font-size:12px; }
.imp-contents-grid span { direction:ltr; text-align:left; font-weight:800; font-size:12.5px; }
.imp-contents-grid small { color:#7a8591; font-size:11.5px; }
.imp-unit-heading { display:flex; align-items:center; gap:13px; padding:15px 17px; margin-bottom:19px; color:#fff; border-radius:17px; background:linear-gradient(90deg,#0d4d89,#1875c8); box-shadow:0 8px 25px rgba(18,91,157,.14); }
.imp-unit-heading>span { flex:0 0 38px; width:38px; height:38px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--imp-orange); color:#fff; font-weight:900; }
.imp-unit-heading small { display:block; direction:ltr; text-align:left; letter-spacing:.16em; color:#bcd9f3; font-size:9px; font-weight:800; }
.imp-unit-heading h2 { margin:1px 0 0; color:#fff; font-size:21px; line-height:1.45; }
.imp-unit-heading h2 em { font-style:normal; font-size:.78em; color:#e7f2fb; margin-right:7px; }
.imp-subtitle { display:flex; justify-content:space-between; gap:14px; align-items:baseline; margin:24px 0 10px; padding-bottom:7px; border-bottom:2px solid #e5edf5; color:var(--imp-ink); font-size:16px; font-weight:800; }
.imp-subtitle span { color:var(--imp-orange-deep); font-size:.82em; }
.imp-rule,.imp-tip,.imp-mistakes { padding:15px 18px; margin:16px 0; }
.imp-rule { background:var(--imp-blue-tint); border-color:#c7def1; }
.imp-tip { background:var(--imp-orange-tint); border-color:#f6d8a8; }
.imp-mistakes { background:#fff9f2; border-color:#f3d5ad; }
.imp-rule strong,.imp-tip strong,.imp-mistakes strong { display:block; margin-bottom:8px; font-size:11px; letter-spacing:.05em; color:var(--imp-blue-deep); }
.imp-tip strong,.imp-mistakes strong { color:var(--imp-orange-deep); }
.imp-rule p,.imp-tip p,.imp-mistakes p { margin:5px 0; font-size:13px; }
.imp-formula { display:flex; align-items:center; justify-content:center; gap:9px; flex-wrap:wrap; margin:16px 0; }
.imp-formula span { padding:7px 13px; border-radius:999px; color:var(--imp-blue-deep); background:#edf6ff; border:1px solid #c8dff3; font-weight:800; font-size:12px; }
.imp-formula b { color:var(--imp-orange-deep); }
.imp-table-scroll { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; margin:12px 0 18px; border-radius:14px; }
.imp-table { width:100%; min-width:620px; border-collapse:separate; border-spacing:0; background:#fff; border:1px solid var(--article-line); border-radius:14px; overflow:hidden; font-size:12.4px; }
.imp-table th { padding:10px 12px; background:linear-gradient(90deg,#0e4c85,#176bb9); color:#fff; text-align:right; font-weight:800; }
.imp-table td { padding:9px 12px; border-top:1px solid #edf0f4; color:#44515f; vertical-align:top; }
.imp-table tbody tr:nth-child(even) td { background:#fbfdff; }
.imp-table td[dir="ltr"],.imp-table th:first-child { text-align:left; }
.imp-pairs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:12px 0 18px; }
.imp-pairs>div { min-width:0; padding:12px 13px; border:1px solid var(--article-line); border-radius:12px; background:#fff; }
.imp-pairs b { display:block; color:#213851; font-size:12.5px; text-align:left; }
.imp-pairs span { display:block; margin-top:5px; color:#6b7681; font-size:12px; }
.imp-ladder { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; margin:17px 0; }
.imp-ladder>div { padding:14px 12px; border-radius:13px; background:#fff; border:1px solid var(--article-line); }
.imp-ladder>div:nth-child(1){border-top:4px solid #f09b3c}.imp-ladder>div:nth-child(2){border-top:4px solid #e8ae54}.imp-ladder>div:nth-child(3){border-top:4px solid #4b9bd8}.imp-ladder>div:nth-child(4){border-top:4px solid #1769b2}
.imp-ladder b { display:block; color:var(--imp-orange-deep); font-size:11px; margin-bottom:7px; }
.imp-ladder span { display:block; direction:ltr; text-align:left; color:#283b4e; font-size:12px; font-weight:700; }
.imp-ladder small { display:block; margin-top:7px; color:#707d88; line-height:1.7; }
.imp-example-block { padding:14px 16px; margin:10px 0; border-right:4px solid var(--imp-orange); }
.imp-example-block p { margin:3px 0; }
.imp-review-heading { padding:17px 18px; margin-bottom:16px; border-radius:17px; color:#fff; background:linear-gradient(90deg,#0d416f,#176fbd); }
.imp-review-heading.practice { background:linear-gradient(90deg,#d87405,#f59a23); }
.imp-review-heading.answers { background:linear-gradient(90deg,#0e4a42,#1b8a77); }
.imp-review-heading small { color:#d8e9f8; direction:ltr; letter-spacing:.22em; font-weight:800; }
.imp-review-heading h2 { margin:2px 0 0; color:#fff; font-size:23px; }
.imp-review-heading h2 span { font-size:.8em; color:#edf7ff; margin-right:8px; }
.imp-exercise { position:relative; padding:18px 20px 18px 64px; margin-bottom:13px; }
.imp-exercise h3 { margin:0 0 10px; font-size:15px; color:var(--imp-ink); }
.imp-exercise h3 small { display:block; margin-top:3px; color:#d97a09; font-size:11.5px; }
.imp-exercise ol { margin:0; padding-left:22px; color:#3d4853; font-size:12.5px; line-height:2; }
.imp-ex-no { position:absolute; left:18px; top:18px; width:31px; height:31px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--imp-orange); color:#fff; font-weight:900; }
.imp-game { padding:19px 20px; margin:18px 0; background:linear-gradient(135deg,#f59a23,#ffb84a); color:#fff; border:0; }
.imp-game h3 { color:#fff; margin:0 0 8px; font-size:16px; }.imp-game p{margin:5px 0;color:#fff;}
.imp-well-done { padding:15px 18px; border-color:#f2c27e; background:#fff9ee; }
.imp-well-done b { color:#d77400; }.imp-well-done p{margin:4px 0;}
.imp-answer-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.imp-answer-grid>div { padding:16px 18px; }
.imp-answer-grid h3,.imp-answer-sample h3 { margin:0 0 8px; color:#1769b2; font-size:15px; }
.imp-answer-grid ol { margin:0; padding-left:22px; line-height:1.9; font-size:12.5px; }
.imp-answer-sample { margin-top:12px; padding:17px 19px; border-right:4px solid #1b8a77; }
.imp-answer-sample p { margin:5px 0; }
.imp-error-table td:first-child { color:#a83d3d; }.imp-error-table td:nth-child(2) { color:#177b4e; font-weight:700; }
.imp-end-card p { color:#c9d1dc; font-size:12px; }
.article-card-visual.imperatives-visual { background:radial-gradient(circle at 13% 14%,rgba(245,154,35,.36),transparent 25%),radial-gradient(circle at 87% 90%,rgba(76,211,227,.18),transparent 27%),linear-gradient(135deg,#07182c,#0f4f8d 70%,#1769b2); }
.imperatives-card-commands { display:flex; flex-wrap:wrap; gap:8px; direction:ltr; }.imperatives-card-commands span { padding:5px 9px; border:1px solid rgba(255,255,255,.18); border-radius:999px; background:rgba(255,255,255,.07); font-size:10px; color:#f4f8fc; }.article-card-visual.imperatives-visual strong { font-size:32px; }

@media (max-width:760px){.imp-contents-grid,.imp-pairs,.imp-answer-grid{grid-template-columns:1fr}.imp-ladder{grid-template-columns:1fr 1fr}.imp-unit-heading h2{font-size:18px}.imp-unit-heading h2 em{display:block;margin:3px 0 0}.imp-exercise{padding:17px 16px 17px 54px}.imp-table{min-width:560px}.imp-hero-examples{gap:6px}.imp-hero-examples span{font-size:11px}}
@media (max-width:430px){.imp-ladder{grid-template-columns:1fr}.imp-unit-heading{padding:13px}.imp-unit-heading>span{width:34px;height:34px;flex-basis:34px}.imp-review-heading h2{font-size:20px}.imp-formula{justify-content:flex-start}.imp-content .article-section{overflow:visible}}