body, html { margin:0; padding:0; font-family:"Segoe UI", Arial, sans-serif; color:#2f343f; background:#f8f7f3; }
*{ box-sizing:border-box; }
body{
    --tone-header:#233238;
    --tone-header-soft:rgba(35,50,56,0.82);
    --tone-header-deep:rgba(35,50,56,0.96);
    --tone-header-fade:rgba(35,50,56,0.72);
    --tone-accent:#c5a46d;
}

body[data-tone="first"]{
    --tone-header:#244033;
    --tone-header-soft:rgba(36,64,51,0.82);
    --tone-header-deep:rgba(36,64,51,0.96);
    --tone-header-fade:rgba(36,64,51,0.72);
    --tone-accent:#a8be79;
}

body[data-tone="diagnosis"]{
    --tone-header:#20384c;
    --tone-header-soft:rgba(32,56,76,0.82);
    --tone-header-deep:rgba(32,56,76,0.96);
    --tone-header-fade:rgba(32,56,76,0.72);
    --tone-accent:#8fb6c9;
}

body[data-tone="treatment"]{
    --tone-header:#443043;
    --tone-header-soft:rgba(68,48,67,0.82);
    --tone-header-deep:rgba(68,48,67,0.96);
    --tone-header-fade:rgba(68,48,67,0.72);
    --tone-accent:#c7a0a7;
}

body[data-tone="support"]{
    --tone-header:#4A4126;
    --tone-header-soft:rgba(74,65,38,0.83);
    --tone-header-deep:rgba(74,65,38,0.96);
    --tone-header-fade:rgba(74,65,38,0.72);
    --tone-accent:#8FBF4A;
}

.sr-only {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}

.hero {
    position: relative;
    min-height: 100vh;
    background:#f8f7f3;
    overflow: visible;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    text-align: center;
    color: #2f343f;
    padding: 120px 20px 80px;
}

.hero::before{
    display:none;
}

.content {
    position: relative;
    z-index: 2;
    max-width: 840px;
    padding: 20px;
}

.logo {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 130px;
    height: auto;
    z-index: 3;
}

.logo-link img {
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.logo-link:hover img {
    transform: scale(1.05);
    opacity: 0.85;
}

h1 {
    font-size:2.8rem;
    line-height:1.2;
    margin:0;
}

h1,
h2,
h3{
    font-family:Georgia, "Times New Roman", serif;
}

.content p{
    margin: 18px 0 0 0;
    font-size: 1.1rem;
    line-height: 1.6;
}

.reader-wizard{
    margin-top:0;
}

.reader-card{
    max-width:760px;
    margin:0 auto;
}

.reader-wizard:not(.reader-page6):not(.reader-intro) .reader-card{
    position:relative;
}

.reader-wizard:not(.reader-page6):not(.reader-intro) .reader-card::before{
    content:"";
    position:absolute;
    inset:-70px -120px auto auto;
    width:min(520px, 72vw);
    aspect-ratio:1 / 1;
    background-image:url("../images/ornaments/hero-curve-of-life.svg");
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
    opacity:0.11;
    pointer-events:none;
}

.reader-wizard:not(.reader-page6):not(.reader-intro) .reader-card > *{
    position:relative;
    z-index:1;
}

.reader-card h2{
    margin:0 0 18px;
    font-size:1.55rem;
    line-height:1.3;
    color:#3c3320;
    letter-spacing:0;
}

.reader-card h2 span{
    position:relative;
    z-index:2;
}

.reader-card ul{
    max-width:720px;
    margin:18px auto 0;
    padding-left:0;
    list-style-position:inside;
}

.reader-card li{
    margin:10px 0;
    font-size:1.05rem;
    line-height:1.55;
    color:#2f343f;
}

.reader-body{
    max-width:720px;
    margin:18px auto 0;
    text-align:left;
}

.reader-body p{
    margin:14px 0 0;
    font-size:1.05rem;
    line-height:1.65;
    color:#2f343f;
}

.reader-body:not(.reader-sections) p:nth-child(2),
.reader-body:not(.reader-sections) p:nth-child(4),
.reader-body:not(.reader-sections) p:nth-child(6),
.reader-body:not(.reader-sections) p:nth-child(8){
    font-weight:700;
}

.reader-note{
    max-width:640px;
    margin:0 auto 14px;
}

.reader-option,
.reader-link,
.reader-controls button{
    appearance:none;
    display:block;
    width:fit-content;
    max-width:100%;
    margin:12px auto 0;
    padding:0 0 4px;
    border:0;
    border-bottom:1px solid rgba(74,65,38,0.42);
    border-radius:0;
    background:transparent;
    color:#3c3320;
    font:inherit;
    font-size:18px;
    font-weight:500;
    line-height:1.45;
    text-align:center;
    text-decoration:none;
    cursor:pointer;
}

.reader-option:hover,
.reader-link:hover,
.reader-controls button:hover{
    border-bottom-color:#4A4126;
    color:#1f2937;
}

.reader-link{
    color:#3c3320;
}

.reader-controls{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:20px;
    margin-top:26px;
}

.reader-controls button{
    margin:0;
    font-size:15px;
    font-weight:500;
    opacity:0.82;
}

.reader-controls button:disabled{
    opacity:0.35;
    cursor:default;
}

.reader-intro{
    max-width:780px;
    margin:0 auto;
    text-align:left;
}

.reader-intro .reader-card{
    padding-top:14px;
}

.reader-intro .reader-card h2{
    max-width:680px;
    margin:0;
    font-size:clamp(32px, 4.1vw, 46px);
    line-height:1.16;
    color:#3c3320;
}

.reader-intro-body{
    max-width:720px;
    margin:26px 0 0;
}

.reader-intro-body p{
    margin:16px 0 0;
    font-size:18px;
    line-height:1.75;
    color:#2f343f;
}

.reader-intro .reader-link{
    margin:22px 0 0;
    padding:0 0 4px;
    font-size:18px;
    color:#3c3320;
    border-bottom-color:rgba(74,65,38,0.42);
    text-align:left;
}

.reader-intro .reader-link:hover{
    color:#1f2937;
    border-bottom-color:#4A4126;
}

.reader-inline-link{
    appearance:none;
    display:inline;
    padding:0 0 2px;
    border:0;
    border-bottom:1px solid rgba(74,65,38,0.42);
    background:transparent;
    color:#3c3320;
    font:inherit;
    font-weight:500;
    text-decoration:none;
    cursor:pointer;
}

.reader-inline-link:hover{
    color:#1f2937;
    border-bottom-color:#4A4126;
}

.reader-intro .reader-controls{
    margin-top:34px;
}

body.reader-current-intro .hero{
    background:
        linear-gradient(180deg, rgba(232,222,203,0.94) 0, rgba(232,222,203,0.94) 284px, rgba(248,247,243,0) 284px),
        #f8f7f3;
}

body.reader-current-intro .reader-controls{
    display:none;
}

body.reader-current-start .reader-controls{
    display:none;
}

@media (max-width: 640px){
    body.reader-current-router .lang-btn,
    body.reader-current-router .lang-switch .active{
        color:#ffffff;
    }
}

.reader-router{
    margin:-120px -20px -80px;
    text-align:left;
}

.reader-router .reader-card{
    max-width:none;
}

.reader-router .reader-card::before{
    display:none;
}

.reader-router .reader-card h2{
    position:relative;
    overflow:hidden;
    margin:0;
    padding:128px max(20px, calc((100vw - 760px) / 2)) 72px;
    background:var(--tone-header);
    color:#ffffff;
    font-size:clamp(31px, 4.4vw, 46px);
    line-height:1.22;
    font-weight:600;
    text-align:left;
}

.reader-router .reader-card h2::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:url("../images/ornaments/hero-curve-of-life.svg");
    background-repeat:no-repeat;
    background-position:right -74px center;
    background-size:min(560px, 56vw);
    opacity:0.13;
    pointer-events:none;
}

.reader-router .reader-card h2::after{
    content:"";
    position:absolute;
    left:max(20px, calc((100vw - 760px) / 2));
    bottom:42px;
    width:70px;
    height:3px;
    background:var(--tone-accent);
    z-index:2;
}

.reader-router .reader-card > p,
.reader-router .reader-card > ul{
    max-width:760px;
    margin-left:auto;
    margin-right:auto;
}

.reader-router .reader-card > p{
    margin-top:58px;
    padding:0 20px;
    font-size:18px;
    line-height:1.85;
    color:#2f343f;
    text-align:left;
}

.reader-router .reader-card ul{
    margin-top:56px;
    padding:0 20px;
    list-style:none;
}

.reader-router .reader-card li{
    margin:0 0 18px;
    font-size:18px;
    line-height:1.75;
    color:#2f343f;
}

.reader-router .reader-option,
.reader-router .reader-link{
    margin:16px auto 0;
    font-size:18px;
}

.reader-router .reader-controls{
    max-width:760px;
    margin:60px auto 0;
    padding:28px 20px 86px;
    border-top:1px solid #ddd8cb;
    justify-content:space-between;
}

.reader-router .reader-controls button{
    border-bottom:0;
    color:#5f6470;
}

.reader-router .reader-controls button:hover{
    color:#2f343f;
}

.reader-page6{
    margin:-120px -20px -80px;
    text-align:left;
}

.reader-page6 .reader-card{
    max-width:none;
}

.reader-page6 .reader-card h2{
    position:relative;
    overflow:hidden;
    margin:0;
    padding:145px max(20px, calc((100vw - 760px) / 2)) 90px;
    background:var(--tone-header);
    color:#ffffff;
    font-size:clamp(32px, 4.8vw, 52px);
    line-height:1.2;
    font-weight:700;
    text-align:left;
}

.reader-page6 .reader-card h2::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:url("../images/ornaments/hero-curve-of-life.svg");
    background-repeat:no-repeat;
    background-position:right -20px center;
    background-size:min(640px, 58vw);
    opacity:0.22;
    pointer-events:none;
}

.reader-page6 .reader-card h2::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg, var(--tone-header-deep) 0%, var(--tone-header-soft) 50%, var(--tone-header-fade) 100%);
    pointer-events:none;
}

.reader-expert .reader-card h2{
    background:var(--tone-header);
}

.reader-expert .reader-card h2::before{
    display:block;
    background-position:right -60px center;
    background-size:min(620px, 58vw);
    opacity:0.16;
}

.reader-expert .reader-card h2::after{
    inset:auto auto 52px max(20px, calc((100vw - 760px) / 2));
    width:70px;
    height:3px;
    background:var(--tone-accent);
    z-index:2;
}

.reader-page6 .reader-body{
    max-width:760px;
    margin:0 auto;
    padding:80px 20px 0;
}

.reader-page6 .reader-body p{
    margin:0 0 30px;
    font-size:18px;
    line-height:1.9;
    color:#2f343f;
}

.reader-page6 .reader-body p:first-child{
    margin-bottom:54px;
    font-size:19px;
    line-height:1.8;
    color:#1f2937;
}

.reader-page6 .reader-body p:nth-child(2),
.reader-page6 .reader-body p:nth-child(4),
.reader-page6 .reader-body p:nth-child(6){
    margin-bottom:16px;
    font-size:23px;
    line-height:1.45;
    font-weight:600;
    color:#3c3320;
}

.reader-page6 .reader-body p:nth-child(8){
    margin-top:16px;
    margin-bottom:0;
    font-size:19px;
    line-height:1.85;
    font-weight:400;
    color:#1f2937;
}

.reader-page6 .reader-body-summary p:nth-child(n){
    margin:0 0 22px;
    font-size:18px;
    line-height:1.85;
    font-weight:400;
    color:#2f343f;
}

.reader-page6 .reader-body-summary p:first-child{
    margin-bottom:22px;
    font-size:19px;
    line-height:1.8;
    color:#1f2937;
}

.reader-page6 .reader-body-summary p:last-child{
    margin-bottom:0;
    font-weight:600;
    color:#3c3320;
}

.reader-page6 .reader-body-more{
    padding-top:68px;
}

.reader-page6 .reader-body-more p:first-child{
    margin-bottom:28px;
    font-size:23px;
    line-height:1.45;
    font-weight:600;
    color:#3c3320;
}

.reader-page6 .reader-sections{
    padding-top:74px;
}

.reader-page6 .reader-sections > p{
    margin:0 0 18px;
    font-size:19px;
    line-height:1.85;
    font-weight:400;
    color:#1f2937;
}

.reader-page6 .reader-section{
    margin-top:46px;
}

.reader-page6 .reader-section h3{
    margin:0 0 14px;
    padding-left:14px;
    border-left:3px solid var(--tone-accent);
    font-family:"Segoe UI", Arial, sans-serif;
    font-size:19px;
    line-height:1.45;
    font-weight:650;
    color:var(--tone-header);
}

.reader-page6 .reader-section p{
    margin:0 0 14px;
    font-size:18px;
    line-height:1.9;
    font-weight:400;
    color:#2f343f;
}

.reader-page6 .reader-sections .reader-section p:nth-child(n){
    margin:0 0 14px;
    font-size:18px;
    line-height:1.9;
    font-weight:400;
    color:#2f343f;
}

.reader-page6 .reader-link{
    display:block;
    width:fit-content;
    margin:56px auto 0;
    padding:14px 30px;
    border:1px solid rgba(0,0,0,0.06);
    border-radius:10px;
    background:#8FBF4A;
    color:#ffffff;
    font-size:17px;
    font-weight:600;
    line-height:1.2;
    text-align:center;
    transition:background-color 0.2s ease, transform 0.2s ease;
}

.reader-page6 .reader-link:hover{
    background:#85b443;
    color:#ffffff;
    transform:translateY(-1px);
}

.reader-page6 .reader-controls{
    max-width:760px;
    margin:64px auto 0;
    padding:28px 20px 100px;
    border-top:1px solid #ddd8cb;
    justify-content:space-between;
}

.reader-page6 .reader-controls button{
    color:#5f6470;
    border-bottom:0;
}

.reader-page6 .reader-controls button:hover{
    color:#2f343f;
}

a:focus-visible,
button:focus-visible{
    outline:3px solid rgba(143,191,74,0.75);
    outline-offset:5px;
}

.lang-switch {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 5;
  font-size: 14px;
}

.lang-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: #3c3320;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

body.reader-current-page6 .lang-btn,
body.reader-current-page6 .lang-switch .active {
  color: #ffffff;
}

body.reader-current-intro .lang-btn,
body.reader-current-intro .lang-switch .active {
  color: #3c3320;
}

.lang-switch .active {
  display: inline-block;
  color: #3c3320;
  font-weight: 600;
  text-decoration: underline;
}

.lang-switch .lang-options {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  background: #ffffff;
  color: #111827;
  border-radius: 10px;
  padding: 8px 0;
  min-width: 70px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.lang-switch .lang-options a {
  display: block;
  padding: 10px 14px;
  margin: 0;
  font-size: 15px;
  text-decoration: none;
  color: #111827;
}

.lang-switch .lang-options a:hover {
  background: #f3f4f6;
}

.lang-switch.open .lang-options {
  display: block;
}

@media (max-width: 900px){
    h1{ font-size:2.2rem; }

    .reader-intro{
        max-width:680px;
    }

    .reader-intro .reader-card h2{
        max-width:620px;
        font-size:clamp(30px, 5.8vw, 40px);
    }

    .hero::before{
        background-size:cover;
        background-position:68% center;
        opacity:0.95;
    }

    .reader-wizard:not(.reader-page6):not(.reader-intro) .reader-card::before{
        inset:-54px -86px auto auto;
        width:min(420px, 82vw);
        opacity:0.09;
    }

    .reader-router .reader-card h2{
        padding-top:112px;
        padding-bottom:68px;
        font-size:clamp(28px, 7.2vw, 38px);
    }

    .reader-router .reader-card h2::before{
        background-size:min(480px, 90vw);
        background-position:right -76px top 4px;
    }

    .reader-router .reader-card > p{
        margin-top:48px;
        font-size:17px;
        line-height:1.8;
    }

    .reader-router .reader-card ul{
        margin-top:46px;
    }

    .reader-router .reader-card li{
        font-size:17px;
        line-height:1.7;
    }

    .reader-page6 .reader-card h2{
        padding-top:118px;
        padding-bottom:72px;
        font-size:clamp(28px, 8.2vw, 38px);
    }

    .reader-page6 .reader-card h2::before{
        background-size:min(520px, 92vw);
        background-position:right -40px top 10px;
    }

    .reader-expert .reader-card h2::before{
        background-size:min(480px, 90vw);
        background-position:right -72px top 6px;
    }

    .reader-page6 .reader-body{
        padding-top:64px;
    }

    .reader-page6 .reader-sections{
        padding-top:58px;
    }

    .reader-page6 .reader-body p{
        font-size:17px;
        line-height:1.85;
        margin-bottom:26px;
    }

    .reader-page6 .reader-body p:first-child{
        margin-bottom:42px;
        font-size:17px;
    }

    .reader-page6 .reader-body p:nth-child(2),
    .reader-page6 .reader-body p:nth-child(4),
    .reader-page6 .reader-body p:nth-child(6){
        font-size:21px;
        line-height:1.42;
    }

    .reader-page6 .reader-section h3{
        font-size:18px;
        line-height:1.45;
    }

    .reader-page6 .reader-section p{
        font-size:17px;
        line-height:1.85;
    }

    .reader-page6 .reader-sections .reader-section p:nth-child(n){
        font-size:17px;
        line-height:1.85;
        font-weight:400;
    }

    .reader-page6 .reader-link{
        margin-top:44px;
    }

    .reader-page6 .reader-controls{
        margin-top:52px;
    }
}

@media (max-width: 640px){
    .hero{
        min-height: 100vh;
        align-items:flex-start;
        padding-top: 104px;
        padding-bottom:50px;
    }
    .logo{ width:112px; }
    h1{ font-size:1.8rem; }
    .content p{ font-size:1rem; }
    .reader-card h2{ font-size:1.28rem; }
    .content{
        width:100%;
        padding:20px 4px;
    }
    .reader-intro .reader-card{
        padding-top:8px;
    }
    .reader-intro .reader-card h2{
        max-width:320px;
        font-size:28px;
        line-height:1.2;
    }
    .reader-intro-body{
        margin-top:22px;
    }
    .reader-intro-body p{
        font-size:16.5px;
        line-height:1.72;
    }
    body.reader-current-intro .hero{
        background:
            linear-gradient(180deg, rgba(232,222,203,0.94) 0, rgba(232,222,203,0.94) 216px, rgba(248,247,243,0) 216px),
            #f8f7f3;
    }
    .reader-option,
    .reader-link{ font-size:16px; }
    .reader-card li,
    .reader-body p{ font-size:1rem; }
    .reader-controls{ gap:14px; }

    .reader-wizard:not(.reader-page6):not(.reader-intro) .reader-card::before{
        inset:-34px -66px auto auto;
        width:min(340px, 88vw);
    }

    .hero::before{
        background-size:cover;
        background-position:72% center;
        opacity:0.92;
    }

    .lang-switch {
        top: 16px;
        right: 16px;
    }

    .reader-page6{
        margin:-120px -20px -50px;
    }

    .reader-router{
        margin:-120px -20px -50px;
    }

    .reader-router .reader-card h2{
        padding-left:20px;
        padding-right:20px;
    }

    .reader-router .reader-card h2::after{
        left:20px;
    }

    .reader-router .reader-controls{
        justify-content:center;
        padding-bottom:76px;
    }

    .reader-page6 .reader-card h2{
        padding-left:20px;
        padding-right:20px;
    }

    .reader-page6 .reader-controls{
        justify-content:center;
        padding-bottom:82px;
    }
}

@media print {
  .lang-switch,
  .logo-link,
  .reader-controls,
  .reader-option {
    display: none;
  }
  .hero{
    display:block;
    color:#111827;
    background:#ffffff;
    padding:20px;
  }
  .hero::before{ display:none; }
  h1,
  .content p,
  .reader-card li,
  .reader-card h2{
    color:#111827;
    text-shadow:none;
  }
}