/* ==========================================================
   BUILDFRAME ACADEMY
   VIBE CODING KNOWS NO BOUNDARIES
   COMPLETE RECONSTRUCTED STYLESHEET
   ========================================================== */


/* ==========================================================
   1. RESET + GLOBAL VARIABLES
   ========================================================== */

:root {
    --text-scale: 1;

    --navy: #071b33;
    --navy-2: #0a3155;
    --blue: #087da8;
    --cyan: #12c7d8;
    --cyan-light: #e8fbff;

    --ink: #102b43;
    --muted: #60778a;

    --white: #ffffff;
    --page: #f7fbfe;
    --line: #d8e8f1;

    --shadow:
        0 18px 55px rgba(12, 53, 82, 0.10);

    --radius: 24px;
}


*,
*::before,
*::after {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
    width: 100%;
    max-width: 100%;
}


body {
    margin: 0;

    width: 100%;
    max-width: 100%;

    overflow-x: hidden;

    font-family:
        Inter,
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    font-size: calc(16px * var(--text-scale));
    line-height: 1.7;

    color: var(--ink);

    background:
        linear-gradient(180deg,
            #edf7fc 0%,
            #f9fcfe 45%,
            #edf7fc 100%);

    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}


img,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}


button,
a {
    font: inherit;
}


button {
    cursor: pointer;
}


a {
    color: inherit;
}


main {
    width: 100%;
}


h1,
h2,
h3,
p {
    overflow-wrap: break-word;
}


h1,
h2,
h3 {
    line-height: 1.18;
}


h1 {
    margin: 0 0 24px;

    color: #082d50;

    font-size:
        clamp(2.1rem,
            5vw,
            4.5rem);

    font-weight: 900;
    letter-spacing: -0.045em;
}


h1 span {
    color: #087da8;
}


h2 {
    color: #103d60;
}


p {
    margin-top: 0;
}


pre,
code {
    max-width: 100%;
}


pre {
    overflow-x: auto;
}


/* ==========================================================
   2. CLEAN BUILDFRAME HEADER
   ========================================================== */

.topbar {
    position: sticky;
    top: 0;
    z-index: 1000;

    width: 100%;
    min-height: 82px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 24px;

    padding:
        11px clamp(20px, 5vw, 72px);

    background:
        rgba(255, 255, 255, 0.96);

    border-bottom:
        1px solid rgba(18, 92, 128, 0.12);

    box-shadow:
        0 8px 30px rgba(7, 48, 78, 0.08);

    backdrop-filter: blur(18px);
}


.brand {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 13px;

    color: #082f50;

    text-decoration: none;
}


/*
   IMPORTANT:
   Your current HTML accidentally places .brand-text
   inside .brand-mark. These rules keep it looking correct
   until we repair that tiny HTML nesting separately.
*/

.brand-mark.brand-owl {
    width: auto;
    height: 58px;

    display: flex;
    align-items: center;

    gap: 13px;

    background: transparent;

    border: 0;

    box-shadow: none;

    overflow: visible;
}


.brand-owl>img {
    width: 58px;
    height: 58px;

    flex: 0 0 58px;

    object-fit: cover;
    object-position: center;

    border-radius: 50%;

    background: #ffffff;

    border: 2px solid #cce8f2;

    box-shadow:
        0 5px 16px rgba(8, 60, 95, 0.12);
}


.brand-text {
    min-width: 0;

    display: flex;
    flex-direction: column;

    line-height: 1.15;
}


.brand-text strong {
    color: #082f50;

    font-size: 1rem;
    font-weight: 900;

    white-space: nowrap;
}


.brand-text small {
    margin-top: 5px;

    color: #60778a;

    font-size: 0.72rem;

    white-space: nowrap;
}


.topbar-tools {
    display: flex;
    align-items: center;

    gap: 8px;
}


.tool-button {
    min-height: 42px;

    padding: 8px 13px;

    border: 1px solid #c9dfed;
    border-radius: 12px;

    color: #0b3b67;
    background: #f7fcff;

    font-weight: 750;

    box-shadow:
        0 4px 14px rgba(8, 52, 90, 0.05);

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease;
}


.tool-button:hover {
    transform: translateY(-2px);

    background: #eafaff;
    border-color: #7bd9e8;
}


.tool-button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
}


/* ==========================================================
   3. READING PROGRESS
   ========================================================== */

.reading-progress {
    position: sticky;
    top: 82px;
    z-index: 999;

    width: 100%;
    height: 4px;

    background: #dcecf5;
}


.reading-progress-bar {
    width: 0;
    height: 100%;

    background:
        linear-gradient(90deg,
            #00b9d0,
            #087da8,
            #7258d8);

    transition: width 0.12s linear;
}


/* ==========================================================
   4. EBOOK PAGE SYSTEM
   ========================================================== */

.ebook-page {
    position: relative;

    width: 100%;

    min-height:
        calc(100vh - 86px);

    padding:
        clamp(70px, 9vw, 120px) clamp(20px, 6vw, 80px) 105px;

    display: flex;
    align-items: center;
    justify-content: center;
}


.page-inner {
    width: min(1080px, 100%);
    margin: 0 auto;
}


.foundation-page {
    background:
        radial-gradient(circle at 90% 10%,
            rgba(18, 199, 216, 0.10),
            transparent 30%),
        linear-gradient(180deg,
            #ffffff,
            #f5fbfe);
}


.eyebrow {
    display: inline-flex;

    margin: 0 0 17px;

    color: #0784a6;

    font-size: 0.76rem;
    font-weight: 900;

    letter-spacing: 0.14em;
    text-transform: uppercase;
}


.lead,
.senior-lead {
    max-width: 820px;

    margin-bottom: 34px;

    color: #526b80;

    font-size:
        clamp(1.05rem,
            2vw,
            1.28rem);

    line-height: 1.8;
}


/* ==========================================================
   5. MAIN BOOK COVER
   ========================================================== */

.cover-page {
    flex-direction: column;

    gap: 32px;

    padding-top: 55px;

    text-align: center;

    background:
        radial-gradient(circle at 50% 20%,
            rgba(32, 201, 215, 0.22),
            transparent 35%),
        linear-gradient(135deg,
            #06172c,
            #092e4c 55%,
            #075a70);
}


.cover-frame {
    width: min(880px, 100%);

    padding: 10px;

    border-radius: 26px;

    background:
        rgba(255, 255, 255, 0.08);

    border:
        1px solid rgba(255, 255, 255, 0.18);

    box-shadow:
        0 28px 80px rgba(0, 0, 0, 0.30);
}


.main-cover-image {
    width: 100%;
    height: auto;

    border-radius: 18px;
}


.cover-actions {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 13px;
}


.small-note {
    margin: 0;

    color:
        rgba(255, 255, 255, 0.75);

    font-size: 0.84rem;
}


/* ==========================================================
   6. BUTTONS
   ========================================================== */

.primary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 50px;

    padding: 12px 24px;

    border: 0;
    border-radius: 999px;

    color: #ffffff;

    background:
        linear-gradient(135deg,
            #00abc2,
            #087aa5);

    font-weight: 850;

    text-decoration: none;

    box-shadow:
        0 12px 30px rgba(0, 157, 190, 0.24);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.primary-button:hover {
    transform: translateY(-3px);

    box-shadow:
        0 17px 38px rgba(0, 157, 190, 0.30);
}


/* ==========================================================
   7. FOUNDATION CARDS
   ========================================================== */

.simple-card,
.message-card,
.definition-card,
.example-box,
.important-box,
.analogy-card,
.ready-card,
.closing-message {
    margin-top: 24px;

    padding:
        clamp(24px, 4vw, 38px);

    border-radius: var(--radius);

    background: #ffffff;

    border: 1px solid #dbeaf2;

    box-shadow: var(--shadow);
}


.simple-card h2,
.message-card h2,
.example-box h2,
.important-box h2,
.analogy-card h2,
.ready-card h2 {
    margin-top: 0;
}


.message-card,
.analogy-card {
    display: flex;
    align-items: flex-start;

    gap: 22px;
}


.message-icon,
.analogy-icon {
    flex: 0 0 auto;

    font-size: 2.5rem;
}


.definition-card {
    display: grid;

    grid-template-columns:
        minmax(100px, 160px) 1fr;

    gap: 28px;

    align-items: center;
}


.definition-word {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 130px;

    padding: 20px;

    border-radius: 22px;

    color: #ffffff;

    background:
        linear-gradient(135deg,
            #087da8,
            #11bdc9);

    font-size: 2.5rem;
    font-weight: 950;

    box-shadow:
        0 15px 35px rgba(0, 143, 177, 0.20);
}


.definition-content h2 {
    margin-top: 0;
}


.example-box {
    background:
        linear-gradient(135deg,
            #f0fcff,
            #ffffff);
}


.important-box {
    border-left:
        6px solid #13b7c9;

    background:
        linear-gradient(135deg,
            #effcff,
            #ffffff);
}


/* ==========================================================
   8. LEARNING PATH
   ========================================================== */

.learning-path {
    display: grid;

    grid-template-columns:
        repeat(4,
            minmax(0, 1fr));

    gap: 16px;
}


.learning-step {
    min-height: 180px;

    padding: 24px 20px;

    border-radius: 20px;

    background: #ffffff;

    border: 1px solid #d8e8f1;

    box-shadow:
        0 10px 30px rgba(8, 52, 83, 0.07);
}


.learning-step>span {
    display: block;

    margin-bottom: 13px;

    font-size: 2rem;
}


.learning-step h2 {
    margin: 0 0 8px;

    font-size: 1.08rem;
}


.learning-step p {
    margin: 0;

    color: #62798b;

    font-size: 0.9rem;
}


/* ==========================================================
   9. CHATGPT CONVERSATION
   ========================================================== */

.conversation-demo {
    display: grid;

    gap: 16px;

    margin-top: 28px;
}


.conversation-person,
.conversation-ai {
    width: min(760px, 92%);

    padding: 22px 25px;

    border-radius: 20px;

    box-shadow:
        0 9px 26px rgba(9, 54, 84, 0.07);
}


.conversation-person {
    justify-self: end;

    background: #eaf8ff;

    border:
        1px solid #c9e6f5;
}


.conversation-ai {
    justify-self: start;

    background: #ffffff;

    border:
        1px solid #dbe9ef;
}


.conversation-person strong,
.conversation-ai strong {
    display: block;

    margin-bottom: 7px;

    color: #087da8;
}


.conversation-person p,
.conversation-ai p {
    margin: 0;
}


/* ==========================================================
   10. CODE EXAMPLE
   ========================================================== */

.code-example {
    margin-top: 28px;

    padding: 24px;

    border-radius: 20px;

    color: #eafaff;

    background: #071c30;

    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.18);
}


.code-label {
    margin: 0 0 10px;

    color: #91dce8;

    font-size: 0.78rem;
    font-weight: 800;

    text-transform: uppercase;
}


.code-example pre {
    margin: 0;

    padding: 18px;

    border-radius: 13px;

    background: #03111f;
}


.code-example code {
    color: #8ff7e9;

    font-family:
        Consolas,
        "Courier New",
        monospace;

    font-size: 1rem;
}


.result-preview {
    margin-top: 16px;

    padding: 18px;

    border-radius: 14px;

    color: #073858;
    background: #eafaff;

    font-size: 2rem;
    font-weight: 900;

    text-align: center;
}


/* ==========================================================
   11. VIBE CODING FLOW
   ========================================================== */

.flow-cards {
    width: min(720px, 100%);

    margin: 35px auto 0;

    display: flex;
    flex-direction: column;

    align-items: center;
}


.flow-card {
    width: 100%;

    display: flex;
    align-items: center;

    gap: 16px;

    padding: 20px 24px;

    border-radius: 18px;

    background: #ffffff;

    border: 1px solid #d8e9f2;

    box-shadow:
        0 10px 30px rgba(7, 59, 91, 0.07);
}


.flow-card span {
    font-size: 1.8rem;
}


.flow-arrow {
    padding: 5px 0;

    color: #10a8bd;

    font-size: 1.5rem;
    font-weight: 900;
}


/* ==========================================================
   12. PROMPT BOX
   ========================================================== */

.prompt-box {
    margin-top: 30px;

    overflow: hidden;

    border-radius: 22px;

    background: #ffffff;

    border: 1px solid #cfe4ef;

    box-shadow: var(--shadow);
}


.prompt-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding: 14px 20px;

    color: #ffffff;

    background:
        linear-gradient(135deg,
            #087da8,
            #10b8c8);

    font-weight: 800;
}


.prompt-box>p {
    margin: 0;

    padding: 28px;

    color: #234b65;

    font-size: 1.05rem;
}


.copy-button {
    min-height: 38px;

    padding: 7px 13px;

    border: 1px solid rgba(255, 255, 255, 0.55);

    border-radius: 10px;

    color: #07526f;
    background: #ffffff;

    font-size: 0.78rem;
    font-weight: 850;
}


.copy-button.copied {
    background: #b8ffd9;
}


/* ==========================================================
   13. BF SAYS — OWL ON GEAR
   ========================================================== */

.bf-tip {
    margin-top: 30px;

    display: flex;
    align-items: flex-start;

    gap: 18px;

    padding: 22px;

    border-radius: 22px;

    color: #153b56;

    background:
        linear-gradient(135deg,
            #eafcff,
            #ffffff);

    border: 1px solid #bfe9f0;

    box-shadow:
        0 12px 35px rgba(7, 69, 99, 0.08);
}


.bf-tip-icon {
    width: 58px;
    height: 58px;

    flex: 0 0 58px;

    display: flex;
    align-items: center;
    justify-content: center;
}


.bf-tip-icon img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    border-radius: 50%;

    background: #ffffff;

    border: 3px solid #ffffff;

    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.14);
}


.bf-tip strong {
    color: #08799b;

    font-size: 1rem;
}


.bf-tip p {
    margin: 5px 0 0;
}


/* ==========================================================
   14. VOCABULARY CARDS
   ========================================================== */

.vocabulary-grid {
    display: grid;

    grid-template-columns:
        repeat(3,
            minmax(0, 1fr));

    gap: 18px;
}


.vocab-card {
    padding: 24px;

    border-radius: 20px;

    background: #ffffff;

    border: 1px solid #d9e9f1;

    box-shadow:
        0 10px 28px rgba(8, 53, 82, 0.06);
}


.vocab-card>span {
    display: block;

    margin-bottom: 12px;

    font-size: 2rem;
}


.vocab-card h2 {
    margin: 0 0 8px;
}


.vocab-card p {
    margin-bottom: 8px;

    color: #5a7285;
}


.vocab-card small {
    color: #8194a3;
}


/* ==========================================================
   15. HTML CSS JAVASCRIPT CARDS
   ========================================================== */

.building-block-grid {
    display: grid;

    grid-template-columns:
        repeat(3,
            minmax(0, 1fr));

    gap: 20px;
}


.building-card {
    padding: 30px;

    border-radius: 24px;

    background: #ffffff;

    border: 1px solid #d9e8f0;

    box-shadow: var(--shadow);
}


.building-icon {
    display: block;

    margin-bottom: 15px;

    font-size: 2.4rem;
}


.building-card h2 {
    margin: 0 0 12px;

    font-size: 1.5rem;
}


.html-card {
    border-top: 5px solid #ef7453;
}


.css-card {
    border-top: 5px solid #4288e9;
}


.js-card {
    border-top: 5px solid #e8c33a;
}


/* ==========================================================
   16. SAFETY
   ========================================================== */

.safety-list {
    display: grid;

    gap: 15px;
}


.safety-list article {
    display: flex;
    align-items: flex-start;

    gap: 18px;

    padding: 23px;

    border-radius: 20px;

    background: #ffffff;

    border: 1px solid #d9e8f0;

    box-shadow:
        0 8px 25px rgba(8, 52, 82, 0.06);
}


.safety-list article>span {
    flex: 0 0 auto;

    font-size: 2rem;
}


.safety-list h2 {
    margin: 0 0 7px;

    font-size: 1.1rem;
}


.safety-list p {
    margin: 0;

    color: #60778a;
}


.ready-card {
    margin-top: 35px;

    text-align: center;

    background:
        linear-gradient(135deg,
            #e8fcff,
            #ffffff);
}


.ready-card>span {
    font-size: 3rem;
}


/* ==========================================================
   17. SECTION COVER SYSTEM
   ========================================================== */

.section-cover {
    flex-direction: column;

    gap: 28px;

    text-align: center;

    overflow: hidden;
}


.section-cover-image {
    width: min(780px, 100%);

    border-radius: 25px;

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.22);
}


.section-cover-action {
    width: min(760px, 100%);
}


.section-cover-action h1 {
    margin-top: 14px;
}


.section-cover-action p {
    font-size: 1.08rem;
}


.section-label {
    display: inline-flex;

    padding: 8px 14px;

    border-radius: 999px;

    font-size: 0.76rem;
    font-weight: 900;

    letter-spacing: 0.08em;
}


/* ==========================================================
   18. KIDS THEME
   ========================================================== */

.kids-section-cover {
    background:
        radial-gradient(circle at 15% 20%,
            rgba(255, 217, 61, 0.38),
            transparent 25%),
        radial-gradient(circle at 85% 25%,
            rgba(255, 110, 180, 0.30),
            transparent 28%),
        linear-gradient(135deg,
            #f1fdff,
            #fff8cf,
            #ffe8f4);
}


.kids-section-cover .section-label {
    color: #8d4c00;
    background: #fff1a7;
}


.kids-page {
    background:
        linear-gradient(135deg,
            #fff9d9,
            #effcff 48%,
            #ffeaf6);
}


.playful-inner h1 span {
    color: #e74996;
}


.kids-project-grid {
    display: grid;

    grid-template-columns:
        repeat(2,
            minmax(0, 1fr));

    gap: 22px;
}


.kids-project-card {
    padding: 30px;

    border-radius: 28px;

    background:
        rgba(255, 255, 255, 0.90);

    border: 2px solid rgba(255, 124, 187, 0.20);

    box-shadow:
        0 18px 45px rgba(108, 72, 112, 0.11);

    transition:
        transform 0.2s ease;
}


.kids-project-card:hover {
    transform: translateY(-5px);
}


.project-emoji {
    margin-bottom: 18px;

    font-size: 2.7rem;
}


.project-tag {
    display: inline-flex;

    margin-top: 8px;

    padding: 6px 11px;

    border-radius: 999px;

    color: #8e3870;
    background: #ffe2f3;

    font-size: 0.68rem;
    font-weight: 900;
}


.kids-choice-card {
    margin-top: 25px;

    padding: 24px;

    border-radius: 22px;

    background: #ffffff;

    border: 2px dashed #f1b944;
}


.kids-button {
    background:
        linear-gradient(135deg,
            #f09634,
            #ed5798);
}


/* ==========================================================
   19. TEENS THEME
   ========================================================== */

.teens-section-cover,
.teens-page {
    color: #e9faff;

    background:
        radial-gradient(circle at 15% 20%,
            rgba(0, 239, 255, 0.20),
            transparent 30%),
        radial-gradient(circle at 85% 30%,
            rgba(255, 77, 184, 0.20),
            transparent 30%),
        linear-gradient(135deg,
            #08142c,
            #171438,
            #071f35);
}


.teens-section-cover h1,
.teens-page h1,
.teens-page h2 {
    color: #ffffff;
}


.teens-page .lead {
    color: #b8d7e6;
}


.teens-page .eyebrow {
    color: #58f0ff;
}


.teens-section-cover .section-label {
    color: #071d31;
    background: #66f3ff;
}


.teen-choice-grid {
    display: grid;

    grid-template-columns:
        repeat(4,
            minmax(0, 1fr));

    gap: 14px;
}


.teen-choice-grid button {
    min-height: 80px;

    padding: 16px;

    border-radius: 18px;

    color: #eafaff;

    background:
        rgba(255, 255, 255, 0.07);

    border:
        1px solid rgba(91, 225, 255, 0.30);

    font-weight: 800;

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease;
}


.teen-choice-grid button:hover {
    transform: translateY(-4px);

    background:
        rgba(31, 214, 231, 0.15);
}


.teen-choice-grid button.selected {
    transform:
        translateY(-5px) scale(1.03);

    border-color: #ff66c8;

    background:
        linear-gradient(135deg,
            rgba(0, 225, 255, 0.30),
            rgba(255, 65, 188, 0.28));

    box-shadow:
        0 0 35px rgba(255, 75, 194, 0.28);
}


.achievement-card,
.teen-choice-message {
    display: flex;
    align-items: flex-start;

    gap: 18px;

    margin-top: 24px;

    padding: 22px;

    border-radius: 20px;

    color: #10233d;

    background:
        linear-gradient(135deg,
            #9ffaff,
            #ffd0ef);

    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.20);
}


.achievement-card>span,
.teen-choice-message>span {
    font-size: 2.3rem;
}


.achievement-card p,
.teen-choice-message p {
    margin: 5px 0 0;
}


.teen-button {
    background:
        linear-gradient(135deg,
            #00dce8,
            #8958ff,
            #ee4fa8);
}


/* ==========================================================
   20. ADULT THEME
   ========================================================== */

.adult-section-cover {
    background:
        radial-gradient(circle at 15% 20%,
            rgba(19, 199, 216, 0.22),
            transparent 30%),
        linear-gradient(135deg,
            #f1ffff,
            #eef2ff,
            #f7edff);
}


.adult-section-cover .section-label {
    color: #4c3b7c;
    background: #e8ddff;
}


.adult-page {
    background:
        linear-gradient(135deg,
            #f6ffff,
            #f3f4ff);
}


.adult-project-grid {
    display: grid;

    grid-template-columns:
        repeat(2,
            minmax(0, 1fr));

    gap: 18px;
}


.adult-project-grid article {
    padding: 28px;

    border-radius: 22px;

    background: #ffffff;

    border: 1px solid #dce6f1;

    box-shadow: var(--shadow);
}


.adult-project-grid article>span {
    display: block;

    margin-bottom: 13px;

    font-size: 2.1rem;
}


.adult-project-grid h2 {
    margin: 0 0 8px;
}


.adult-button {
    background:
        linear-gradient(135deg,
            #08a7b7,
            #5968d8,
            #8e59c9);
}


/* ==========================================================
   21. PROFESSIONAL THEME
   ========================================================== */

.professional-page {
    background:
        linear-gradient(135deg,
            #eef9fc,
            #ffffff);
}


.professional-example {
    display: grid;

    grid-template-columns:
        repeat(3,
            minmax(0, 1fr));

    gap: 18px;
}


.professional-example>div {
    padding: 28px;

    border-radius: 22px;

    background: #ffffff;

    border: 1px solid #d5e7ef;

    box-shadow: var(--shadow);
}


.step-number {
    display: inline-flex;

    margin-bottom: 16px;

    color: #0b91aa;

    font-size: 0.75rem;
    font-weight: 950;

    letter-spacing: 0.12em;
}


.professional-example h2 {
    margin-top: 0;
}


/* ==========================================================
   22. SENIOR THEME
   ========================================================== */

.seniors-section-cover {
    background:
        linear-gradient(135deg,
            #edfaff,
            #f7fffb,
            #ffffff);
}


.seniors-section-cover .section-label {
    color: #18566d;
    background: #dff7f5;
}


.senior-page {
    background:
        linear-gradient(135deg,
            #f6fcff,
            #ffffff);
}


.senior-inner {
    width: min(900px, 100%);
}


.senior-inner h1 {
    font-size:
        clamp(2.2rem,
            5vw,
            4rem);
}


.senior-lead {
    font-size:
        clamp(1.2rem,
            2vw,
            1.45rem);

    line-height: 1.9;
}


.senior-step-card {
    display: flex;
    align-items: flex-start;

    gap: 25px;

    padding:
        clamp(25px, 5vw, 40px);

    border-radius: 26px;

    background: #ffffff;

    border: 2px solid #d6edf1;

    box-shadow: var(--shadow);
}


.large-step-number {
    width: 62px;
    height: 62px;

    flex: 0 0 62px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: #ffffff;

    background: #168ba2;

    font-size: 1.8rem;
    font-weight: 900;
}


.senior-step-card h2 {
    margin-top: 0;

    font-size: 1.35rem;
}


.senior-step-card p {
    font-size: 1.08rem;
}


.senior-check {
    margin-top: 25px;

    padding: 24px;

    border-radius: 20px;

    color: #245c57;

    background: #ecfbf5;

    border: 1px solid #bce7d8;
}


.senior-check p {
    margin: 5px 0 0;
}


.senior-button {
    min-height: 56px;

    padding: 14px 28px;

    font-size: 1.05rem;
}


/* ==========================================================
   23. GENERATION SUMMARY + ENDING
   ========================================================== */

.generation-summary {
    display: grid;

    grid-template-columns:
        repeat(5,
            minmax(0, 1fr));

    gap: 15px;
}


.generation-summary>div {
    padding: 22px 15px;

    text-align: center;

    border-radius: 20px;

    background: #ffffff;

    border: 1px solid #d8e8f1;

    box-shadow:
        0 9px 25px rgba(8, 53, 82, 0.06);
}


.generation-summary span {
    display: block;

    margin-bottom: 10px;

    font-size: 2rem;
}


.generation-summary strong {
    color: #103d60;
}


.generation-summary p {
    margin: 6px 0 0;

    color: #657b8c;

    font-size: 0.82rem;
}


.closing-message {
    margin-top: 30px;

    text-align: center;

    background:
        linear-gradient(135deg,
            #eafcff,
            #ffffff);
}


/* ==========================================================
   24. VOCABULARY SIDE PANEL
   ========================================================== */

.vocabulary-panel {
    position: fixed;

    top: 0;
    right: 0;
    z-index: 2000;

    width: min(470px, 100%);
    height: 100vh;

    display: flex;
    flex-direction: column;

    color: #17384f;

    background: #ffffff;

    box-shadow:
        -20px 0 60px rgba(4, 33, 54, 0.22);

    transform: translateX(105%);

    visibility: hidden;

    transition:
        transform 0.3s ease,
        visibility 0.3s ease;
}


.vocabulary-panel.open {
    transform: translateX(0);
    visibility: visible;
}


.vocabulary-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 24px;

    color: #ffffff;

    background:
        linear-gradient(135deg,
            #082e4d,
            #087d9c);
}


.vocabulary-panel-header small {
    color: #aeeef5;

    font-weight: 800;
    letter-spacing: 0.12em;
}


.vocabulary-panel-header h2 {
    margin: 5px 0 0;

    color: #ffffff;
}


#close-vocabulary {
    width: 44px;
    height: 44px;

    flex: 0 0 44px;

    border: 1px solid rgba(255, 255, 255, 0.30);

    border-radius: 50%;

    color: #ffffff;
    background:
        rgba(255, 255, 255, 0.12);

    font-size: 1.7rem;
}


.vocabulary-panel-content {
    flex: 1;

    overflow-y: auto;

    padding: 22px;
}


.vocabulary-panel-content article {
    padding: 17px 0;

    border-bottom:
        1px solid #e3edf3;
}


.vocabulary-panel-content h3 {
    margin: 0 0 5px;

    color: #087b9d;
}


.vocabulary-panel-content p {
    margin: 0;

    color: #60778a;
}


/* ==========================================================
   25. SMALL FOOTER ON EVERY EBOOK PAGE
   app.js adds .ebook-page-footer automatically
   ========================================================== */

.ebook-page-footer {
    position: absolute;

    left: clamp(18px, 4vw, 40px);
    right: clamp(18px, 4vw, 40px);
    bottom: 18px;

    min-height: 54px;

    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items: center;

    gap: 20px;

    padding-top: 13px;

    border-top:
        1px solid rgba(18, 65, 101, 0.14);

    color: #50677a;

    font-size: 0.78rem;
}


.ebook-page-footer-brand {
    display: flex;
    align-items: center;

    gap: 10px;
}


.ebook-page-footer-brand img {
    width: 36px;
    height: 36px;

    object-fit: cover;

    border-radius: 50%;

    border: 2px solid #d5eaf5;
}


.ebook-page-footer-brand div {
    display: flex;
    flex-direction: column;
}


.ebook-page-footer-brand strong {
    color: #0a3155;
}


.ebook-page-footer-brand span {
    margin-top: 1px;

    font-size: 0.68rem;
}


.ebook-page-footer-center {
    text-align: center;

    font-weight: 650;
}


.ebook-page-footer-number {
    justify-self: end;

    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: #08739a;
    background: #eaf7fc;

    font-weight: 900;
}


/* Dark teen pages */

.teens-page .ebook-page-footer,
.teens-section-cover .ebook-page-footer {
    color: #b8d8e8;

    border-top-color:
        rgba(255, 255, 255, 0.18);
}


.teens-page .ebook-page-footer-brand strong,
.teens-section-cover .ebook-page-footer-brand strong {
    color: #ffffff;
}


/* ==========================================================
   26. FINAL GENERIC BUILDFRAME SITE FOOTER
   ========================================================== */

.site-footer {
    width: 100%;

    padding:
        48px clamp(20px, 5vw, 70px) 30px;

    text-align: center;

    color: #4e687c;

    background:
        linear-gradient(135deg,
            #f8fcff,
            #eaf7fc);

    border-top: 1px solid #d4e7f2;
}


.site-footer-inner {
    width: min(1180px, 100%);

    margin: 0 auto;

    display: flex;
    flex-direction: column;
    align-items: center;
}


.site-footer-brand {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 14px;

    margin-bottom: 26px;
}


.site-footer-logo {
    width: 54px;
    height: 54px;

    flex: 0 0 54px;

    object-fit: cover;

    border-radius: 50%;

    border: 2px solid #cce8f2;

    box-shadow:
        0 6px 20px rgba(8, 77, 110, 0.12);
}


.site-footer-brand>div {
    text-align: left;
}


.site-footer-brand strong,
.site-footer>strong {
    display: block;

    color: #082f50;

    font-size: 1rem;
    font-weight: 900;
}


.site-footer-brand p,
.site-footer>p {
    color: #60778a;
}


.site-footer-links {
    display: flex;
    flex-wrap: wrap;

    align-items: center;
    justify-content: center;

    gap: 10px;

    margin-bottom: 26px;
}


.site-footer-links a {
    min-height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 9px 15px;

    border-radius: 999px;

    color: #0a5577;
    background: #ffffff;

    border: 1px solid #cce3ef;

    font-size: 0.82rem;
    font-weight: 750;

    text-decoration: none;

    box-shadow:
        0 4px 14px rgba(7, 63, 96, 0.06);

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease;
}


.site-footer-links a:hover {
    transform: translateY(-2px);

    color: #056d91;
    background: #f1fcff;

    border-color: #82d8e8;
}


.footer-principle {
    max-width: 760px;

    margin:
        18px auto 22px;

    padding: 16px 22px;

    color: #244f69 !important;

    background:
        rgba(255, 255, 255, 0.70);

    border:
        1px solid rgba(115, 190, 215, 0.28);

    border-radius: 14px;

    font-size: 0.86rem;
    font-weight: 650;
}


.site-footer-bottom {
    display: flex;
    flex-wrap: wrap;

    align-items: center;
    justify-content: center;

    gap: 8px;

    color: #718696;

    font-size: 0.76rem;
}


.footer-divider {
    color: #18a9bd;
}


/* ==========================================================
   27. REVEAL ANIMATION
   ========================================================== */

.page-ready .page-inner,
.page-ready .section-cover-image,
.page-ready .section-cover-action,
.page-ready .cover-frame,
.page-ready .cover-actions {
    opacity: 0;

    transform:
        translateY(24px);

    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
}


.page-visible .page-inner,
.page-visible .section-cover-image,
.page-visible .section-cover-action,
.page-visible .cover-frame,
.page-visible .cover-actions {
    opacity: 1;

    transform:
        translateY(0);
}


/* ==========================================================
   28. THEME-AWARE READING PROGRESS
   ========================================================== */

body[data-current-theme="kids"] .reading-progress-bar {
    background:
        linear-gradient(90deg,
            #ffd93d,
            #ff6eb4,
            #65dfff);
}


body[data-current-theme="teens"] .reading-progress-bar {
    background:
        linear-gradient(90deg,
            #00efff,
            #8b5cff,
            #ff4db8);
}


body[data-current-theme="adult"] .reading-progress-bar {
    background:
        linear-gradient(90deg,
            #00c8c8,
            #526cff,
            #9b58e8);
}


body[data-current-theme="professional"] .reading-progress-bar {
    background:
        linear-gradient(90deg,
            #087aa5,
            #10b6c5);
}


body[data-current-theme="senior"] .reading-progress-bar {
    background:
        linear-gradient(90deg,
            #1684a4,
            #69cfc3);
}


/* ==========================================================
   29. LARGE DESKTOP
   ========================================================== */

@media (min-width: 1400px) {

    .page-inner {
        width: min(1160px, 100%);
    }

    .cover-frame {
        width: min(920px, 100%);
    }

}


/* ==========================================================
   30. LAPTOP / SMALL DESKTOP
   ========================================================== */

@media (max-width: 1200px) {

    .learning-path {
        grid-template-columns:
            repeat(3,
                minmax(0, 1fr));
    }

    .generation-summary {
        grid-template-columns:
            repeat(3,
                minmax(0, 1fr));
    }

}


/* ==========================================================
   31. TABLET
   ========================================================== */

@media (max-width: 900px) {

    .topbar {
        padding:
            10px 24px;
    }


    .brand-owl>img {
        width: 52px;
        height: 52px;

        flex-basis: 52px;
    }


    .brand-mark.brand-owl {
        height: 52px;
    }


    .reading-progress {
        top: 76px;
    }


    .ebook-page {
        min-height: auto;

        padding:
            70px 24px 100px;
    }


    .learning-path,
    .vocabulary-grid {
        grid-template-columns:
            repeat(2,
                minmax(0, 1fr));
    }


    .teen-choice-grid {
        grid-template-columns:
            repeat(2,
                minmax(0, 1fr));
    }


    .professional-example {
        grid-template-columns: 1fr;
    }


    .generation-summary {
        grid-template-columns:
            repeat(2,
                minmax(0, 1fr));
    }


    .ebook-page-footer {
        grid-template-columns:
            1fr auto;
    }


    .ebook-page-footer-center {
        display: none;
    }


    .site-footer {
        padding:
            42px 24px 26px;
    }

}


/* ==========================================================
   32. PHONE
   ========================================================== */

@media (max-width: 700px) {

    .topbar {
        min-height: auto;

        flex-direction: column;
        align-items: stretch;

        gap: 8px;

        padding:
            8px 16px 10px;
    }


    .brand {
        justify-content: center;
    }


    .brand-mark.brand-owl {
        height: 46px;
    }


    .brand-owl>img {
        width: 46px;
        height: 46px;

        flex-basis: 46px;
    }


    .brand-text strong {
        font-size: 0.88rem;
    }


    .brand-text small {
        font-size: 0.62rem;
    }


    .topbar-tools {
        display: grid;

        grid-template-columns:
            1fr 1fr 2fr;

        width: 100%;
    }


    .tool-button {
        width: 100%;

        min-height: 40px;

        padding: 6px 8px;

        font-size: 0.78rem;
    }


    .reading-progress {
        position: sticky;

        top: 112px;

        height: 4px;
    }


    .ebook-page {
        padding:
            55px 18px 90px;
    }


    h1 {
        font-size:
            clamp(1.9rem,
                10vw,
                3rem);
    }


    .lead {
        font-size: 1rem;
    }


    .definition-card {
        grid-template-columns: 1fr;
    }


    .definition-word {
        min-height: 90px;
    }


    .message-card,
    .analogy-card,
    .bf-tip,
    .senior-step-card {
        flex-direction: column;
    }


    .learning-path,
    .vocabulary-grid,
    .building-block-grid,
    .kids-project-grid,
    .adult-project-grid,
    .professional-example,
    .generation-summary {
        grid-template-columns: 1fr;
    }


    .prompt-header {
        align-items: stretch;
        flex-direction: column;
    }


    .copy-button {
        width: 100%;
    }


    .conversation-person,
    .conversation-ai {
        width: 100%;
    }


    .section-cover {
        padding-top: 45px;
    }


    .section-cover-image {
        border-radius: 18px;
    }


    .teen-choice-grid {
        grid-template-columns:
            repeat(2,
                minmax(0, 1fr));
    }


    .senior-lead {
        font-size: 1.1rem;
    }


    .large-step-number {
        width: 55px;
        height: 55px;

        flex-basis: 55px;
    }


    .bf-tip-icon {
        width: 50px;
        height: 50px;

        flex-basis: 50px;
    }


    .ebook-page-footer {
        bottom: 12px;

        gap: 10px;

        font-size: 0.72rem;
    }


    .ebook-page-footer-brand img {
        width: 31px;
        height: 31px;
    }


    .ebook-page-footer-brand span {
        display: none;
    }


    .ebook-page-footer-number {
        width: 30px;
        height: 30px;
    }


    .site-footer {
        padding:
            36px 18px 24px;
    }


    .site-footer-brand {
        flex-direction: column;

        gap: 10px;
    }


    .site-footer-brand>div {
        text-align: center;
    }


    .site-footer-logo {
        width: 50px;
        height: 50px;

        flex-basis: 50px;
    }


    .site-footer-links {
        width: 100%;

        display: grid;

        grid-template-columns:
            repeat(2,
                minmax(0, 1fr));

        gap: 9px;
    }


    .site-footer-links a {
        width: 100%;

        min-height: 44px;

        padding: 9px 7px;

        font-size: 0.76rem;
    }

}


/* ==========================================================
   33. VERY SMALL PHONE
   ========================================================== */

@media (max-width: 420px) {

    .topbar {
        padding-left: 12px;
        padding-right: 12px;
    }


    .brand-owl>img {
        width: 42px;
        height: 42px;

        flex-basis: 42px;
    }


    .brand-mark.brand-owl {
        height: 42px;
    }


    .brand-text strong {
        font-size: 0.82rem;
    }


    .brand-text small {
        font-size: 0.56rem;
    }


    .reading-progress {
        top: 108px;
    }


    .ebook-page {
        padding-left: 14px;
        padding-right: 14px;
    }


    .teen-choice-grid {
        grid-template-columns: 1fr;
    }


    .site-footer-links {
        grid-template-columns: 1fr;
    }


    .site-footer-bottom {
        flex-direction: column;

        gap: 2px;
    }


    .footer-divider {
        display: none;
    }

}


/* ==========================================================
   34. LANDSCAPE PHONE
   ========================================================== */

@media (max-height: 550px) and (orientation: landscape) {

    .ebook-page {
        min-height: auto;

        padding-top: 45px;
        padding-bottom: 85px;
    }

}


/* ==========================================================
   35. ACCESSIBILITY — REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }


    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }


    .page-ready .page-inner,
    .page-ready .section-cover-image,
    .page-ready .section-cover-action,
    .page-ready .cover-frame,
    .page-ready .cover-actions {
        opacity: 1;
        transform: none;
    }

}


/* ==========================================================
   36. PRINT FALLBACK
   ========================================================== */

@media print {

    .topbar,
    .reading-progress,
    .vocabulary-panel,
    .copy-button {
        display: none !important;
    }


    body {
        background: #ffffff;
    }


    .ebook-page {
        min-height: auto;

        page-break-after: always;

        padding:
            35px 25px 70px;
    }


    .page-ready .page-inner,
    .page-ready .section-cover-image,
    .page-ready .section-cover-action,
    .page-ready .cover-frame,
    .page-ready .cover-actions {
        opacity: 1 !important;
        transform: none !important;
    }

}

/* ==========================================================
   BUILDFRAME QUICK CONTACTS — HEADER
   ========================================================== */

.header-contacts {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 5px;

    margin-right: 5px;
    padding-right: 10px;

    border-right: 1px solid #d5e5ee;
}


.header-contacts a {
    width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: inherit;
    background: transparent;

    font-size: 1rem;

    text-decoration: none;

    transition:
        transform 0.2s ease,
        background 0.2s ease;
}


.header-contacts a:hover {
    transform: translateY(-2px);

    background: #eaf8fc;
}


/* Tablet */

@media (max-width: 900px) {

    .header-contacts {
        gap: 2px;
    }

    .header-contacts a {
        width: 32px;
        height: 32px;

        font-size: 0.9rem;
    }

}


/* Phone */

@media (max-width: 700px) {

    .header-contacts {
        grid-column: 1 / -1;

        width: 100%;

        margin: 0;
        padding: 0 0 5px;

        border-right: 0;
        border-bottom: 1px solid #e1edf3;
    }

    .header-contacts a {
        width: 34px;
        height: 34px;
    }

}

/* ==========================================================
   EBOOK FOOTER — CONTACT LINK SPACING
   ========================================================== */

.ebook-page-footer-links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 8px 20px;
}


.ebook-page-footer-links a {
    display: inline-flex;
    align-items: center;

    gap: 5px;

    padding: 5px 8px;

    color: #35627d;

    font-size: 0.72rem;
    font-weight: 700;

    line-height: 1.2;

    text-decoration: none;

    white-space: nowrap;

    border-radius: 8px;

    transition:
        color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;
}


.ebook-page-footer-links a:hover {
    color: #087d9f;
    background: #e7f7fb;

    transform: translateY(-1px);
}


/* TABLET */

@media (max-width: 900px) {

    .ebook-page-footer-links {
        gap: 7px 14px;
    }

}


/* PHONE */

@media (max-width: 700px) {

    .ebook-page-footer-links {
        gap: 6px 10px;
    }

    .ebook-page-footer-links a {
        padding: 5px 6px;

        font-size: 0.68rem;
    }

}

/* ==========================================================
   TUTORIAL INSTRUCTION NOTE
   ========================================================== */

.tutorial-instruction {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    max-width: 760px;

    margin: 18px auto 28px;
    padding: 14px 20px;

    background: #ffffff;

    border: 2px dashed #f3a8c5;
    border-radius: 16px;

    text-align: center;

    box-shadow: 0 8px 20px rgba(18, 65, 101, 0.08);
}

.tutorial-instruction>span {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.tutorial-instruction p {
    margin: 0;

    color: #35556d;

    font-size: 0.95rem;
    line-height: 1.5;
}

.tutorial-instruction strong {
    color: #d84f87;
}

@media (max-width: 600px) {

    .tutorial-instruction {
        align-items: flex-start;

        margin: 15px auto 22px;
        padding: 12px 15px;

        text-align: left;
    }

}