.brand {
    cursor: pointer
}

.header-actions {
    align-items: center;
    gap: 10px;
    display: flex
}

.back-to-top {
    width: 36px;
    height: 36px;
    color: var(--ink);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    background: 0 0;
    border: 1px solid #18231f73;
    border-radius: 50%;
    flex: none;
    place-items: center;
    padding: 0;
    transition: opacity .25s, transform .25s;
    display: grid;
    transform: translateY(5px)
}

.back-to-top.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0)
}

.back-to-top:hover {
    border-color: var(--ink);
    background: #18231f0f
}

:root {
    --ink: #18231f;
    --cream: #f6f1e7;
    --paper: #fffdf8;
    --red: #c93734;
    --sage: #dce6dc;
    --line: #18231f24
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    background: var(--cream);
    color: var(--ink);
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    overflow-x: hidden
}

a {
    color: inherit;
    text-decoration: none
}

button {
    font: inherit
}

p {
    line-height: 1.65
}

.site-header {
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    z-index: 50;
    background: #f6f1e7db;
    border: 1px solid #18231f1a;
    border-radius: 999px;
    justify-content: space-between;
    align-items: center;
    max-width: 1184px;
    height: 72px;
    margin: 12px auto 0;
    padding: 0 24px;
    display: flex;
    position: sticky;
    top: 12px;
    box-shadow: 0 10px 35px #18231f0f
}

.brand {
    align-items: center;
    gap: 11px;
    font-weight: 700;
    display: flex
}

.brand-mark {
    flex: none;
    place-items: center;
    width: 38px;
    height: 38px;
    display: grid
}

.brand-mark img {
    object-fit: contain;
    width: 100%;
    height: 100%;
    display: block
}

.brand>span:last-child {
    white-space: nowrap
}

nav {
    gap: 30px;
    font-size: 14px;
    display: flex
}

nav a:hover {
    color: var(--red)
}

.header-cta {
    border: 1px solid var(--ink);
    border-radius: 999px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 700;
    transition: all .2s
}

.header-cta:hover {
    background: var(--ink);
    color: #fff
}

.hero {
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    gap: 70px;
    max-width: 1240px;
    min-height: 700px;
    margin: auto;
    padding: 72px 28px 76px;
    display: grid;
    position: relative
}

.hero:before {
    content: "ქართული";
    color: #c9373409;
    pointer-events: none;
    font-family: Georgia, serif;
    font-size: 190px;
    position: absolute;
    top: 85px;
    left: -120px;
    transform: rotate(-90deg)
}

.eyebrow,
.section-kicker {
    color: var(--red);
    text-transform: uppercase;
    letter-spacing: .16em;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 800;
    display: inline-flex
}

h1,
h2,
h3,
p {
    margin-top: 0
}

h1 {
    letter-spacing: -.05em;
    margin: 22px 0 26px;
    font-family: Georgia, Times New Roman, serif;
    font-size: clamp(54px, 6vw, 86px);
    font-weight: 500;
    line-height: .98
}

h1 em {
    color: var(--red);
    font-style: italic;
    position: relative
}

h1 em:after {
    content: "";
    background: var(--red);
    opacity: .16;
    border-radius: 50%;
    height: 7px;
    position: absolute;
    bottom: -5px;
    left: 0;
    right: 0;
    transform: rotate(-1deg)
}

.hero-lead {
    color: #45514d;
    max-width: 620px;
    font-size: 21px
}

.hero-actions {
    align-items: center;
    gap: 26px;
    margin: 34px 0 30px;
    display: flex
}

.button {
    background: var(--red);
    color: #fff;
    border-radius: 6px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 17px 25px;
    font-weight: 800;
    transition: transform .25s, box-shadow .25s;
    display: inline-flex;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 24px #c9373438
}

.button:after {
    content: "";
    background: #fff3;
    width: 55px;
    height: 180%;
    transition: all .55s;
    position: absolute;
    left: -90px;
    transform: rotate(22deg)
}

.button:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 30px #c9373447
}

.button:hover:after {
    left: 120%
}

.text-link {
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    display: inline-flex
}

.hero-facts {
    color: #5e6864;
    gap: 28px;
    font-size: 13px;
    display: flex
}

.hero-facts span {
    align-items: center;
    gap: 8px;
    display: flex
}

.words-visual {
    background-color: #bf8d5b;
    background-image: radial-gradient(circle at 18% 20%, #ffecbe38 0 1px, #0000 2px), radial-gradient(circle at 74% 62%, #4c2b1433 0 1px, #0000 2px), radial-gradient(circle at 42% 76%, #ffffff21 0 1.2px, #0000 2.2px), linear-gradient(115deg, #ffffff0d, #46240f14);
    background-size: 17px 19px, 23px 21px, 29px 27px, 100% 100%;
    border: 14px solid #7b4b2b;
    border-radius: 8px;
    height: 520px;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 0 3px #ffffff24, inset 0 0 38px #43220d38, 0 28px 70px #18231f24
}

.words-visual:after {
    content: "";
    pointer-events: none;
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 24px #351b0a3d
}

.words-caption {
    color: #fff7e9;
    text-transform: uppercase;
    letter-spacing: .12em;
    text-shadow: 0 1px 2px #3f1f0a59;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.45;
    position: absolute;
    top: 20px;
    left: 22px
}

.word-tile {
    z-index: 2;
    text-align: center;
    background: #fffdf4;
    border: 1px solid #5c392029;
    width: 43%;
    padding: 18px 14px 15px;
    transition: all .25s;
    animation: 5s ease-in-out infinite gentle-float;
    position: absolute;
    box-shadow: 0 8px 14px #3d1f0b38
}

.word-tile:before {
    content: "";
    background: radial-gradient(circle at 35% 30%, #ffb7ac 0 18%, #d2433e 24% 70%, #7e1715 72%);
    border-radius: 50%;
    width: 12px;
    height: 12px;
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translate(-50%);
    box-shadow: 0 3px 5px #361a105c
}

.word-tile:hover {
    z-index: 4;
    transform: rotate(0)translateY(-5px)scale(1.04)
}

.word-tile strong,
.word-tile span {
    display: block
}

.word-tile strong {
    font-family: Georgia, serif;
    font-size: 27px;
    font-weight: 500;
    line-height: 1.15
}

.word-tile span {
    color: #7a6658;
    margin-top: 6px;
    font-size: 11px
}

.word-one {
    top: 68px;
    left: 4%;
    transform: rotate(-2deg)
}

.word-two {
    animation-delay: -1s;
    top: 68px;
    right: 4%;
    transform: rotate(2deg)
}

.word-three {
    animation-delay: -2s;
    top: 210px;
    left: 4%;
    transform: rotate(1deg)
}

.word-four {
    animation-delay: -3s;
    top: 210px;
    right: 4%;
    transform: rotate(-2deg)
}

.word-five {
    animation-delay: -4s;
    top: 350px;
    left: 4%;
    transform: rotate(-1deg)
}

.word-six {
    animation-delay: -2.5s;
    top: 350px;
    right: 4%;
    transform: rotate(2deg)
}

@keyframes gentle-float {

    0%,
    to {
        margin-top: 0
    }

    50% {
        margin-top: -5px
    }
}

.trust-strip {
    background: var(--ink);
    color: #fff;
    grid-template-columns: repeat(3, 1fr);
    padding: 27px max(28px, 50vw - 592px);
    display: grid
}

.trust-strip div {
    border-right: 1px solid #ffffff2e;
    align-items: baseline;
    gap: 12px;
    padding: 6px 34px;
    display: flex
}

.trust-strip div:last-child {
    border: 0
}

.trust-strip strong {
    font-family: Georgia, serif;
    font-size: 25px
}

.alphabet-ribbon {
    background: var(--red);
    color: #fff;
    border-top: 1px solid #fff3;
    align-items: center;
    height: 78px;
    margin: -1px 0 20px;
    display: flex;
    overflow: hidden;
    transform: rotate(-1.2deg)scale(1.02)
}

.alphabet-ribbon div {
    letter-spacing: .28em;
    white-space: nowrap;
    font-family: Georgia, serif;
    font-size: 31px;
    animation: 28s linear infinite ribbon-move
}

@keyframes ribbon-move {
    to {
        transform: translate(-38%)
    }
}

.section {
    max-width: 1184px;
    margin: 0 auto;
    padding: 110px 28px;
    position: relative
}

.section h2 {
    letter-spacing: -.035em;
    max-width: 900px;
    margin: 18px 0 46px;
    font-family: Georgia, Times New Roman, serif;
    font-size: clamp(40px, 5vw, 64px);
    font-weight: 500;
    line-height: 1.08
}

.intro:after {
    content: "წაიკითხე";
    color: #18231f0a;
    pointer-events: none;
    font-family: Georgia, serif;
    font-size: 130px;
    position: absolute;
    bottom: 20px;
    right: -110px;
    transform: rotate(-7deg)
}

.intro-grid {
    grid-template-columns: 1.1fr .9fr;
    align-items: center;
    gap: 90px;
    display: grid
}

.big-copy {
    color: #46534e;
    font-size: 22px
}

.method-card {
    background: var(--paper);
    border: 1px solid var(--line);
    box-shadow: 13px 13px 0 var(--sage);
    align-items: center;
    gap: 25px;
    padding: 34px;
    transition: all .25s;
    display: flex;
    transform: rotate(1deg)
}

.method-card:hover {
    transform: rotate(0)translateY(-5px)
}

.method-number {
    color: var(--red);
    font-family: Georgia, serif;
    font-size: 80px;
    line-height: 1
}

.method-card strong {
    font-size: 20px
}

.method-card p {
    color: #66716d;
    margin: 8px 0 0
}

.video-section {
    background: var(--ink);
    color: #fff;
    grid-template-columns: .8fr 1.2fr;
    align-items: center;
    gap: 80px;
    max-width: none;
    padding-left: max(28px, 50vw - 564px);
    padding-right: max(28px, 50vw - 564px);
    display: grid;
    overflow: hidden
}

.video-section:after {
    content: "";
    border: 1px solid #ffffff17;
    border-radius: 50%;
    width: 260px;
    height: 260px;
    position: absolute;
    bottom: -130px;
    left: -130px;
    box-shadow: 0 0 0 55px #ffffff05, 0 0 0 110px #ffffff05
}

.light {
    color: #e88780
}

.video-section h2 {
    margin-bottom: 24px;
    font-size: 52px
}

.video-copy>p {
    color: #c8d0cd
}

.video-copy ul {
    color: #e8ecea;
    gap: 12px;
    padding: 0;
    list-style: none;
    display: grid
}

.video-copy li {
    align-items: center;
    gap: 9px;
    display: flex
}

.video-placeholder {
    outline-offset: -24px;
    color: #fff;
    background: linear-gradient(135deg, #37443e, #202b27);
    border: 1px solid #ffffff40;
    outline: 10px solid #ffffff09;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 13px;
    min-height: 420px;
    display: flex;
    position: relative;
    overflow: hidden;
    box-shadow: 0 30px 80px #00000040
}

.video-placeholder:before {
    content: "ა ბ გ დ ე";
    color: #ffffff0d;
    white-space: nowrap;
    font-family: Georgia, serif;
    font-size: 120px;
    position: absolute;
    transform: rotate(-12deg)
}

.play-circle {
    background: var(--red);
    z-index: 1;
    border-radius: 50%;
    place-items: center;
    width: 76px;
    height: 76px;
    padding-left: 4px;
    animation: 2s ease-in-out infinite play-pulse;
    display: grid
}

@keyframes play-pulse {
    50% {
        box-shadow: 0 0 0 16px #c9373429
    }
}

.video-placeholder strong,
.video-placeholder small {
    z-index: 1
}

.video-placeholder small {
    color: #b8c2be
}

.section-heading-row {
    grid-template-columns: 1.2fr .8fr;
    align-items: end;
    gap: 70px;
    display: grid
}

.section-heading-row h2 {
    margin-bottom: 35px
}

.section-heading-row p {
    color: #65716c;
    margin-bottom: 44px
}

.lesson-tabs {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    grid-template-columns: repeat(5, 1fr);
    display: grid
}

.lesson-tabs button {
    border: 0;
    border-right: 1px solid var(--line);
    cursor: pointer;
    color: #59655f;
    text-align: left;
    background: 0 0;
    padding: 20px 12px
}

.lesson-tabs button:last-child {
    border-right: 0
}

.lesson-tabs button span {
    color: #9aa39f;
    margin-bottom: 7px;
    font-size: 10px;
    display: block
}

.lesson-tabs button.active {
    background: var(--ink);
    color: #fff
}

.lesson-stage {
    background: var(--paper);
    grid-template-columns: 1.15fr .85fr;
    min-height: 440px;
    display: grid
}

.lesson-image-wrap {
    background: #ebe6dc;
    place-items: center;
    padding: 38px;
    display: grid;
    overflow: hidden
}

.lesson-image-wrap img {
    object-fit: contain;
    filter: drop-shadow(0 12px 22px #18231f2e);
    max-width: 100%;
    max-height: 365px
}

.lesson-copy {
    align-self: center;
    padding: 54px
}

.mini-label {
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--red);
    font-size: 11px;
    font-weight: 800
}

.lesson-copy h3 {
    margin: 18px 0;
    font-family: Georgia, serif;
    font-size: 35px;
    font-weight: 500;
    line-height: 1.15
}

.lesson-copy p {
    color: #5d6964
}

.results {
    background: var(--red);
    color: #fff;
    max-width: none;
    padding-left: max(28px, 50vw - 564px);
    padding-right: max(28px, 50vw - 564px)
}

.results .light {
    color: #ffd1cb
}

.results-grid {
    border-top: 1px solid #ffffff4d;
    grid-template-columns: repeat(4, 1fr);
    display: grid
}

.results-grid article {
    border-right: 1px solid #ffffff4d;
    min-height: 285px;
    padding: 30px 24px;
    position: relative
}

.results-grid article:last-child {
    border: 0
}

.results-grid article>svg {
    opacity: .45;
    position: absolute;
    top: 26px;
    right: 22px
}

.results-grid article>span {
    opacity: .65;
    font-size: 11px
}

.results-grid h3 {
    margin: 80px 0 13px;
    font-family: Georgia, serif;
    font-size: 27px;
    font-weight: 500
}

.results-grid p {
    color: #ffe4e0;
    font-size: 14px
}

.proof {
    display: block
}

.proof:before {
    content: "„";
    color: #c9373412;
    font-family: Georgia, serif;
    font-size: 280px;
    line-height: 1;
    position: absolute;
    top: 45px;
    right: -30px
}

.proof-head {
    grid-template-columns: 1.2fr .8fr;
    align-items: end;
    gap: 70px;
    display: grid
}

.proof-head h2 {
    margin-bottom: 34px;
    font-size: 52px
}

.proof-instruction {
    border-left: 3px solid var(--red);
    background: #fffdf8a6;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 44px;
    padding: 20px;
    display: flex
}

.proof-instruction svg {
    color: var(--red);
    flex: none
}

.proof-instruction p {
    color: #58645f;
    margin: 0;
    font-size: 15px;
    line-height: 1.55
}

.testimonials {
    perspective: 1600px;
    grid-template-columns: 1.08fr .92fr;
    align-items: stretch;
    gap: 22px;
    display: grid
}

.testimonial {
    height: 440px;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
    perspective: 1200px;
    background: 0 0;
    border: 0;
    padding: 0;
    transition: transform .3s, filter .3s;
    position: relative
}

.testimonial:hover {
    filter: drop-shadow(0 22px 28px #18231f21);
    transform: translateY(-7px)rotate(0) !important
}

.testimonial:nth-child(2) {
    margin: 12px 0 -12px;
    transform: rotate(1.2deg)
}

.testimonial:nth-child(3) {
    margin: 5px 0;
    transform: rotate(-1deg)
}

.testimonial.featured {
    transform: rotate(-1deg)
}

.testimonial.accent-review {
    transform: rotate(1deg)
}

.testimonial-inner {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform .72s cubic-bezier(.2, .75, .25, 1);
    display: block;
    position: relative
}

.testimonial.flipped .testimonial-inner {
    transform: rotateY(180deg)
}

.testimonial-face {
    background: var(--paper);
    border: 1px solid var(--line);
    backface-visibility: hidden;
    flex-direction: column;
    padding: 34px;
    display: flex;
    position: absolute;
    inset: 0;
    overflow: hidden
}

.testimonial-front,
.featured .testimonial-front,
.accent-review .testimonial-front {
    color: var(--ink);
    background: #e9e3d8;
    padding: 15px 15px 24px
}

.featured .testimonial-back {
    background: var(--ink);
    color: #fff
}

.accent-review .testimonial-back {
    background: var(--red);
    color: #fff
}

.testimonial-back {
    transform: rotateY(180deg)
}

.review-photo-wrap {
    background: #f5f2eb;
    border: 1px solid #18231f1a;
    flex: 1;
    place-items: center;
    min-height: 0;
    display: grid;
    overflow: hidden;
    box-shadow: 0 11px 22px #18231f21
}

.review-photo-wrap img {
    object-fit: contain;
    width: 100%;
    height: 100%;
    display: block
}

.photo-badge {
    text-transform: uppercase;
    letter-spacing: .1em;
    z-index: 2;
    background: #fffdf8eb;
    padding: 8px 11px;
    font-size: 9px;
    font-weight: 800;
    position: absolute;
    top: 26px;
    left: 26px;
    box-shadow: 0 5px 16px #18231f1f
}

.testimonial-glyph {
    color: #c9373414;
    font-family: Georgia, serif;
    font-size: 180px;
    line-height: 1;
    position: absolute;
    bottom: -40px;
    right: -12px
}

.featured .testimonial-glyph,
.accent-review .testimonial-glyph {
    color: #ffffff14
}

.review-label {
    text-transform: uppercase;
    letter-spacing: .13em;
    color: var(--red);
    font-size: 10px;
    font-weight: 800
}

.featured .review-label,
.accent-review .review-label {
    color: #f5aaa4
}

.russian-review {
    z-index: 1;
    margin: 34px 0 24px;
    font-family: Georgia, Times New Roman, serif;
    font-size: 22px;
    line-height: 1.48;
    display: block;
    position: relative
}

.flip-hint {
    border-top: 1px solid var(--line);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #727e79;
    z-index: 2;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 17px;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    position: relative
}

.testimonial-front .flip-hint {
    width: 100%;
    margin-top: 14px
}

.flip-hint svg {
    width: 15px
}

.featured .testimonial-back .flip-hint,
.accent-review .testimonial-back .flip-hint {
    color: #ffffffa6;
    border-color: #fff3
}

.review-author {
    z-index: 2;
    align-items: baseline;
    gap: 8px;
    margin-top: auto;
    display: flex;
    position: relative
}

.review-author strong {
    font-size: 14px
}

.review-author small {
    color: #7a8580;
    font-size: 11px
}

.featured .review-author small,
.accent-review .review-author small {
    color: #ffffff9e
}

.author {
    grid-template-columns: .8fr 1.2fr;
    align-items: center;
    gap: 90px;
    display: grid
}

.author-portrait {
    background: var(--sage);
    height: 520px;
    position: relative;
    overflow: hidden
}

.author-portrait img {
    object-fit: cover;
    filter: saturate(.75);
    width: 100%;
    height: 100%
}

.author-stamp {
    background: var(--red);
    color: #fff;
    text-align: center;
    border-radius: 50%;
    place-content: center;
    width: 120px;
    height: 120px;
    font-family: Georgia, serif;
    font-size: 34px;
    display: grid;
    position: absolute;
    bottom: 20px;
    right: 20px;
    transform: rotate(-7deg)
}

.author-stamp span {
    text-transform: uppercase;
    letter-spacing: .1em;
    font-family: Arial, sans-serif;
    font-size: 10px
}

.author-copy h2 {
    margin-bottom: 25px;
    font-size: 52px
}

.author-copy>p {
    color: #58645f;
    font-size: 18px
}

.author-stats {
    border-top: 1px solid var(--line);
    gap: 38px;
    margin-top: 30px;
    padding-top: 27px;
    display: flex
}

.author-stats span {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 12px
}

.author-stats strong {
    color: var(--red);
    margin-right: 5px;
    font-family: Georgia, serif;
    font-size: 27px
}

.price {
    color: #fff;
    background: #24332d;
    grid-template-columns: 1fr .8fr;
    align-items: center;
    gap: 100px;
    max-width: none;
    padding-left: max(28px, 50vw - 564px);
    padding-right: max(28px, 50vw - 564px);
    scroll-margin-top: 96px;
    display: grid
}

.price-copy>p {
    color: #c8d0cd;
    max-width: 520px
}

.guarantee {
    border-top: 1px solid #fff3;
    gap: 16px;
    margin-top: 36px;
    padding-top: 28px;
    display: flex
}

.guarantee svg {
    color: #ed8a82;
    flex: none
}

.guarantee strong,
.guarantee span {
    display: block
}

.guarantee span {
    color: #b9c3bf;
    margin-top: 5px;
    font-size: 13px
}

.price-card {
    background: var(--paper);
    color: var(--ink);
    padding: 46px
}

.price-card>small {
    color: #7b8581
}

.price-value {
    margin: 10px 0 25px;
    font-family: Georgia, serif;
    font-size: 64px
}

.price-value span {
    font-size: 28px
}

.price-card ul {
    border-top: 1px solid var(--line);
    gap: 14px;
    padding: 24px 0;
    list-style: none;
    display: grid
}

.price-card li {
    align-items: center;
    gap: 10px;
    display: flex
}

.price-card li svg {
    width: 17px;
    color: var(--red)
}

.button-light {
    width: 100%
}

.payment-note {
    text-align: center;
    color: #7d8783;
    margin: 13px 0 0;
    font-size: 11px
}

.faq {
    text-align: center
}

.faq h2 {
    margin-left: auto;
    margin-right: auto
}

.faq-list {
    text-align: left;
    border-top: 1px solid var(--line);
    max-width: 820px;
    margin: auto
}

details {
    border-bottom: 1px solid var(--line);
    padding: 0 4px
}

summary {
    cursor: pointer;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
    padding: 24px 0;
    font-weight: 700;
    list-style: none;
    display: flex
}

summary::-webkit-details-marker {
    display: none
}

summary svg {
    width: 18px
}

details[open] summary svg {
    transform: rotate(180deg)
}

details p {
    color: #5e6a65;
    max-width: 700px;
    padding-bottom: 22px
}

.hero,
.intro,
.proof {
    overflow: clip
}

.hero .words-visual {
    height: 350px
}

.price-card#price-card {
    scroll-margin-top: 108px
}

.final-cta {
    text-align: center;
    background: var(--red);
    color: #fff;
    max-width: none;
    position: relative;
    overflow: hidden
}

.final-cta h2 {
    margin-left: auto;
    margin-right: auto
}

.final-cta .button {
    width: auto;
    color: var(--red);
    box-shadow: none;
    background: #fff
}

.final-letter {
    color: #ffffff14;
    font-family: Georgia, serif;
    font-size: 300px;
    position: absolute;
    top: -40px;
    left: 4%;
    transform: rotate(-12deg)
}

.final-letter.second {
    top: 70px;
    left: auto;
    right: 5%;
    transform: rotate(12deg)
}

footer {
    color: #65706c;
    justify-content: space-between;
    max-width: 1184px;
    margin: auto;
    padding: 30px 28px;
    font-size: 13px;
    display: flex
}

@media (max-width:850px) {
    nav {
        display: none
    }

    .site-header {
        margin-left: 16px;
        margin-right: 16px
    }

    .hero {
        grid-template-columns: 1fr;
        gap: 45px;
        padding-top: 48px
    }

    .words-visual {
        height: 440px
    }

    .trust-strip {
        grid-template-columns: 1fr;
        padding: 24px 28px
    }

    .trust-strip div {
        border-bottom: 1px solid #ffffff26;
        border-right: 0;
        padding: 15px 0
    }

    .intro-grid,
    .video-section,
    .section-heading-row,
    .lesson-stage,
    .author,
    .price,
    .proof-head {
        grid-template-columns: 1fr;
        gap: 42px
    }

    .testimonials {
        grid-template-columns: 1fr 1fr
    }

    .lesson-tabs {
        grid-template-columns: repeat(5, 145px);
        overflow-x: auto
    }

    .results-grid {
        grid-template-columns: 1fr 1fr
    }

    .results-grid article {
        border-bottom: 1px solid #ffffff4d
    }

    .section {
        padding-top: 82px;
        padding-bottom: 82px
    }

    .author-portrait {
        max-width: 500px
    }

    .video-placeholder {
        min-height: 330px
    }
}

@media (max-width:560px) {
    .site-header {
        height: 62px;
        padding: 0 14px;
        top: 8px
    }

    .brand span:last-child {
        font-size: 14px
    }

    .header-cta {
        padding: 8px 14px
    }

    .hero {
        padding: 42px 18px 56px
    }

    .hero h1 em {
        margin-top: 8px;
        display: inline-block
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 18px
    }

    .button {
        width: 100%
    }

    .text-link {
        justify-content: center
    }

    .hero-facts {
        flex-direction: column;
        gap: 10px
    }

    .words-visual {
        border-width: 10px;
        height: 465px
    }

    .words-caption {
        top: 15px;
        left: 16px
    }

    .word-tile {
        width: 43%;
        padding: 13px 8px
    }

    .word-tile strong {
        font-size: 21px
    }

    .word-one {
        top: 62px;
        left: 4%;
        right: auto
    }

    .word-two {
        top: 62px;
        left: auto;
        right: 4%
    }

    .word-three {
        top: 185px;
        left: 4%;
        right: auto
    }

    .word-four {
        inset: 185px 4% auto auto
    }

    .word-five {
        inset: 308px auto auto 4%
    }

    .word-six {
        top: 308px;
        left: auto;
        right: 4%
    }

    .alphabet-ribbon {
        height: 60px
    }

    .alphabet-ribbon div {
        font-size: 24px
    }

    .section {
        padding: 70px 18px
    }

    .section h2,
    .video-section h2,
    .proof h2,
    .author-copy h2 {
        font-size: 39px
    }

    .lesson-copy {
        padding: 34px 25px
    }

    .lesson-image-wrap {
        min-height: 280px;
        padding: 20px
    }

    .results-grid,
    .testimonials {
        grid-template-columns: 1fr
    }

    .testimonial,
    .testimonial:nth-child(2),
    .testimonial:nth-child(3),
    .testimonial.accent-review {
        min-height: 285px;
        margin: 0;
        transform: none
    }

    .testimonial blockquote {
        font-size: 21px
    }

    .results-grid article {
        border-right: 0;
        min-height: 230px
    }

    .results-grid h3 {
        margin-top: 55px
    }

    .author-portrait {
        height: 420px
    }

    .author-stats {
        flex-wrap: wrap;
        gap: 17px
    }

    .price-card {
        padding: 32px 23px
    }

    .price-value {
        font-size: 54px
    }

    footer {
        padding: 26px 18px
    }

    .testimonial footer {
        padding-top: 18px
    }

    .trust-strip {
        padding-left: 18px;
        padding-right: 18px
    }

    .alphabet-ribbon {
        transform: none
    }

    .hero .words-visual {
        height: 325px
    }

    .price-card#price-card {
        scroll-margin-top: 94px
    }
}

@media (prefers-reduced-motion:reduce) {
    * {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important
    }
}

@media (max-width:560px) {
    .brand {
        gap: 8px
    }

    .brand-mark {
        width: 34px;
        height: 34px
    }

    .header-actions {
        gap: 7px
    }

    .back-to-top {
        width: 32px;
        height: 32px
    }
}

.hero {
    gap: 56px;
    min-height: 650px;
    padding-top: 58px;
    padding-bottom: 58px
}

.hero-actions {
    margin: 28px 0 16px
}

.text-link {
    color: #66716d;
    font-size: 13px;
    font-weight: 600
}

.text-link:hover {
    color: var(--ink)
}

.hero-facts {
    color: #87908c;
    font-size: 11px
}

.hero-facts span {
    gap: 6px
}

@media (max-width:850px) {
    .hero {
        gap: 30px
    }
}

@media (max-width:560px) {
    .hero {
        gap: 24px;
        padding-top: 38px;
        padding-bottom: 42px
    }

    .hero-actions {
        gap: 15px;
        margin: 26px 0 14px
    }

    .hero-facts {
        gap: 0
    }

    .hero-facts span {
        justify-content: center
    }
}

.hero-actions {
    margin-bottom: 0
}

.trust-strip {
    padding-top: 18px;
    padding-bottom: 18px
}

.trust-strip div {
    padding-top: 4px;
    padding-bottom: 4px
}

.trust-strip strong {
    white-space: nowrap
}

@media (max-width:850px) {
    .trust-strip {
        padding-top: 18px;
        padding-bottom: 18px
    }

    .trust-strip div {
        padding-top: 11px;
        padding-bottom: 11px
    }
}

@media (max-width:560px) {
    .hero-actions {
        margin-bottom: 0
    }
}

.hero-video {
    aspect-ratio: 16/9;
    width: 100%;
    box-shadow: none;
    background: 0 0;
    overflow: hidden
}

.hero-video iframe {
    border: 0;
    width: 100%;
    height: 100%;
    display: block
}

.hero-video .video-placeholder {
    aspect-ratio: 16/9;
    width: 100%;
    height: 100%;
    min-height: 0
}

.intro {
    grid-template-columns: 1fr .9fr;
    align-items: center;
    gap: 72px;
    display: grid
}

.intro h2 {
    margin-bottom: 0
}

.intro .words-visual {
    width: 100%;
    height: 350px
}

.trust-strip span {
    color: #e1e5e3;
    font-size: 14px
}

.trust-strip div:last-child strong {
    font-size: 32px;
    line-height: .8
}

@media (max-width:850px) {
    .intro {
        grid-template-columns: 1fr;
        gap: 36px
    }

    .intro .words-visual {
        height: 350px
    }

    .trust-strip span {
        font-size: 14px
    }
}

@media (max-width:560px) {
    .hero-video {
        margin-top: 2px
    }

    .hero-video .video-placeholder {
        min-height: 0
    }

    .intro {
        gap: 28px
    }

    .intro .words-visual {
        height: 325px
    }

    .trust-strip div {
        gap: 10px
    }

    .trust-strip span {
        font-size: 14px
    }

    .trust-strip div:last-child strong {
        font-size: 31px
    }
}

.trust-strip {
    grid-template-columns: 1fr 1.35fr .85fr
}

.trust-strip div {
    padding-left: 22px;
    padding-right: 22px
}

.trust-strip div:nth-child(2) {
    padding-left: 24px;
    padding-right: 24px
}

.trust-strip div:last-child {
    align-items: center;
    padding-left: 18px;
    padding-right: 18px
}

.trust-strip span {
    white-space: nowrap
}

.trust-strip div:last-child strong {
    line-height: 1;
    transform: translateY(-1px)
}

.hero:before {
    color: #c9373408;
    font-size: 170px;
    top: 65px;
    left: 56%
}

.intro:after {
    content: none
}

@media (max-width:850px) {
    .trust-strip {
        grid-template-columns: 1fr
    }

    .trust-strip div,
    .trust-strip div:nth-child(2),
    .trust-strip div:last-child {
        padding-left: 0;
        padding-right: 0
    }

    .hero:before {
        content: none
    }
}

.hero:before {
    width: max-content;
    box-shadow: none;
    filter: none;
    text-shadow: none;
    z-index: 0;
    background: 0 0;
    border: 0;
    top: 65px;
    left: 30%
}

.hero-copy,
.hero-video {
    z-index: 1;
    position: relative
}

.inside-header {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 48px
}

.inside-header h2 {
    margin: 18px auto 0
}

.course-showcase {
    background: var(--paper);
    border: 1px solid #d8d2c6;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 22px 55px #18231f17
}

.course-showcase .lesson-tabs {
    background: #f1ece2;
    border-top: 0
}

.course-showcase .lesson-tabs button {
    text-align: center;
    justify-content: center;
    align-items: center;
    gap: 9px;
    padding: 19px 12px;
    font-weight: 700;
    display: flex
}

.course-showcase .lesson-tabs button svg {
    color: #87918d;
    flex: none;
    width: 17px;
    height: 17px
}

.course-showcase .lesson-tabs button.active {
    background: var(--red);
    color: #fff
}

.course-showcase .lesson-stage {
    border: 0
}

@media (max-width:850px) {
    .inside-header {
        margin-bottom: 36px
    }

    .course-showcase .lesson-tabs {
        grid-template-columns: repeat(5, minmax(135px, 1fr));
        overflow-x: auto
    }

    .course-showcase .lesson-tabs button {
        justify-content: flex-start;
        padding: 17px 14px
    }

    .course-showcase .lesson-stage {
        grid-template-columns: 1fr
    }
}

@media (max-width:560px) {
    .course-showcase {
        border-radius: 10px
    }

    .course-showcase-label {
        padding-left: 16px;
        padding-right: 16px
    }

    .course-showcase .lesson-tabs {
        grid-template-columns: 1fr 1fr;
        overflow: visible
    }

    .course-showcase .lesson-tabs button {
        border-bottom: 1px solid var(--line);
        justify-content: flex-start;
        min-width: 0
    }

    .course-showcase .lesson-tabs button:nth-child(2n) {
        border-right: 0
    }

    .course-showcase .lesson-tabs button:last-child {
        border-bottom: 0;
        grid-column: 1/-1
    }

    .course-showcase .lesson-stage {
        min-height: 0
    }
}

.course-showcase-label {
    border-bottom: 1px solid var(--line);
    color: #7b8581;
    letter-spacing: .15em;
    text-transform: uppercase;
    padding: 15px 22px 13px;
    font-size: 10px;
    font-weight: 800
}

.inside {
    background: #eee9df;
    border-top: 1px solid #18231f14;
    max-width: none;
    padding-left: max(28px, 50vw - 564px);
    padding-right: max(28px, 50vw - 564px)
}

.inside-header {
    max-width: 930px;
    margin-bottom: 54px
}

.inside-header .section-kicker {
    color: var(--red)
}

.course-showcase {
    background: #fffdf9;
    border-color: #18231f29;
    border-radius: 20px;
    max-width: 1128px;
    margin: 0 auto;
    box-shadow: 0 30px 75px #18231f1c
}

.course-product {
    border-bottom: 1px solid var(--line);
    background: #ffffff85;
    align-items: center;
    gap: 13px;
    min-height: 78px;
    padding: 16px 24px;
    display: flex
}

.course-product-mark {
    flex: none;
    place-items: center;
    width: 42px;
    height: 42px;
    display: grid
}

.course-product-mark img {
    object-fit: contain;
    width: 100%;
    height: 100%;
    display: block
}

.course-product-name {
    color: var(--ink);
    flex-direction: column;
    gap: 3px;
    font-family: Georgia, Times New Roman, serif;
    font-size: 21px;
    line-height: 1.05;
    display: flex
}

.course-product-name small {
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #8b938f;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9px;
    font-weight: 800;
    line-height: 1.2
}

.course-showcase .lesson-tabs {
    background: #f6f2ea;
    border-bottom-color: #18231f21;
    padding: 0 12px
}

.course-showcase .lesson-tabs button {
    color: #66716d;
    border-right: 0;
    font-size: 13px;
    position: relative
}

.course-showcase .lesson-tabs button:after {
    content: "";
    background: 0 0;
    height: 2px;
    position: absolute;
    bottom: 0;
    left: 18px;
    right: 18px
}

.course-showcase .lesson-tabs button.active {
    color: var(--red);
    background: 0 0
}

.course-showcase .lesson-tabs button.active svg {
    color: var(--red)
}

.course-showcase .lesson-tabs button.active:after {
    background: var(--red)
}

.course-showcase .lesson-stage {
    background: #fffdf9;
    flex-direction: column;
    min-height: 0;
    display: flex
}

.course-showcase .lesson-copy {
    grid-template-columns: minmax(230px, .72fr) minmax(0, 1.28fr);
    align-items: start;
    gap: 8px 54px;
    padding: 34px 38px 26px;
    display: grid
}

.course-showcase .lesson-copy .mini-label {
    grid-column: 1
}

.course-showcase .lesson-copy h3 {
    grid-column: 1;
    margin: 4px 0 0;
    font-size: 30px
}

.course-showcase .lesson-copy p {
    grid-area: 1/2/3;
    align-self: center;
    max-width: 610px;
    margin: 0
}

.course-showcase .lesson-image-wrap {
    background: 0 0;
    min-height: 0;
    padding: 0 28px 30px;
    display: block
}

.course-showcase .lesson-image-wrap img {
    aspect-ratio: 1.75;
    object-fit: contain;
    filter: none;
    border-radius: 12px;
    width: 100%;
    max-width: none;
    height: auto;
    max-height: none;
    display: block
}

@media (max-width:850px) {
    .inside {
        padding-left: 28px;
        padding-right: 28px
    }

    .course-showcase .lesson-copy {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 28px 28px 22px
    }

    .course-showcase .lesson-copy .mini-label,
    .course-showcase .lesson-copy h3,
    .course-showcase .lesson-copy p {
        grid-area: auto/1
    }

    .course-showcase .lesson-copy p {
        margin-top: 5px
    }

    .course-showcase .lesson-image-wrap {
        padding: 0 20px 24px
    }
}

@media (max-width:560px) {
    .inside {
        border-top-color: #18231f1a;
        padding-left: 18px;
        padding-right: 18px
    }

    .inside-header {
        margin-bottom: 34px
    }

    .course-showcase {
        border-radius: 14px
    }

    .course-product {
        min-height: 68px;
        padding: 13px 16px
    }

    .course-product-mark {
        width: 36px;
        height: 36px
    }

    .course-product-name {
        font-size: 18px
    }

    .course-showcase .lesson-tabs {
        grid-template-columns: 1fr 1fr;
        padding: 0
    }

    .course-showcase .lesson-tabs button {
        padding: 15px 13px;
        font-size: 12px
    }

    .course-showcase .lesson-tabs button:after {
        left: 13px;
        right: 13px
    }

    .course-showcase .lesson-tabs button:last-child {
        grid-column: 1/-1
    }

    .course-showcase .lesson-copy {
        padding: 24px 17px 9px
    }

    .course-showcase .lesson-copy h3 {
        font-size: 25px
    }

    .course-showcase .lesson-copy p {
        font-size: 14px;
        line-height: 1.55
    }

    .course-showcase .lesson-image-wrap {
        padding: 0 8px 12px
    }

    .course-showcase .lesson-image-wrap img {
        border-radius: 7px
    }
}

.inside {
    padding-top: 18px;
    padding-bottom: 76px
}

.showcase-title {
    color: var(--ink);
    background: #ffffff85;
    padding: 24px 26px 18px;
    font-family: Georgia, Times New Roman, serif;
    font-size: 25px;
    font-weight: 500;
    line-height: 1.2
}

.results {
    padding-top: 76px;
    padding-bottom: 76px;
    scroll-margin-top: 24px
}

.results>h2 {
    max-width: none;
    margin: 0 0 36px;
    font-size: clamp(40px, 5vw, 60px)
}

.results-grid {
    border-top: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr))
}

.results-grid article {
    border: 0;
    min-height: 0;
    padding: 28px 32px 30px
}

.results-grid article:nth-child(odd) {
    border-right: 1px solid #ffffff47
}

.results-grid article:nth-child(-n+2) {
    border-bottom: 1px solid #ffffff47
}

.result-meta {
    color: #ffffffb8;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
    display: flex
}

.result-meta span {
    letter-spacing: .1em;
    font-size: 11px
}

.result-meta svg {
    stroke-width: 1.55px;
    opacity: .72;
    width: 22px;
    height: 22px
}

.results-grid h3 {
    margin: 0 0 10px;
    font-size: 29px;
    line-height: 1.16
}

.results-grid p {
    max-width: 440px;
    margin: 0;
    font-size: 15px;
    line-height: 1.55
}

@media (max-width:850px) {
    .intro {
        padding-top: 54px;
        padding-bottom: 58px
    }

    .inside {
        padding-top: 56px;
        padding-bottom: 58px
    }

    .results {
        padding-top: 58px;
        padding-bottom: 58px
    }

    .results>h2 {
        margin-bottom: 30px
    }

    .results-grid article {
        padding: 25px 24px 27px
    }
}

@media (max-width:560px) {
    .intro {
        padding-top: 48px;
        padding-bottom: 50px
    }

    .inside {
        padding-top: 50px;
        padding-bottom: 50px
    }

    .showcase-title {
        padding: 20px 16px 15px;
        font-size: 22px
    }

    .results {
        padding-top: 50px;
        padding-bottom: 50px
    }

    .results>h2 {
        margin-bottom: 26px;
        font-size: 39px
    }

    .results-grid {
        grid-template-columns: 1fr
    }

    .results-grid article {
        border-bottom: 1px solid #ffffff47;
        padding: 23px 6px 25px;
        border-right: 0 !important
    }

    .results-grid article:last-child {
        border-bottom: 0
    }

    .result-meta {
        margin-bottom: 17px
    }

    .results-grid h3 {
        font-size: 27px
    }

    .results-grid p {
        font-size: 15px
    }
}

.intro {
    padding-top: 58px;
    padding-bottom: 64px
}

.results {
    padding-top: 62px;
    padding-bottom: 62px
}

.proof {
    padding-top: 72px;
    padding-bottom: 72px
}

.proof-head {
    gap: 54px
}

.proof-head h2 {
    margin-bottom: 28px
}

.proof-instruction {
    margin-bottom: 34px
}

.testimonials {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px
}

.testimonial {
    height: 560px
}

.testimonial:nth-child(2),
.testimonial:nth-child(3),
.testimonial:nth-child(5),
.testimonial:nth-child(6) {
    margin: 0
}

.testimonial:nth-child(5) {
    transform: rotate(-.7deg)
}

.testimonial:nth-child(6) {
    transform: rotate(.8deg)
}

.testimonial-face {
    padding: 28px
}

.review-photo-wrap img {
    object-fit: cover;
    object-position: center top
}

.russian-review {
    margin: 24px 0 18px;
    font-size: 17px;
    line-height: 1.42
}

.long-review .russian-review {
    font-size: 15.5px;
    line-height: 1.38
}

.testimonial-back .flip-hint {
    margin-top: 12px
}

.mobile-review-instruction,
.review-dots {
    display: none
}

.final-cta {
    padding-top: 55px;
    padding-bottom: 55px
}

@media (max-width:850px) {
    .intro {
        padding-top: 44px;
        padding-bottom: 48px
    }

    .results {
        padding-top: 48px;
        padding-bottom: 48px
    }

    .proof {
        padding-top: 54px;
        padding-bottom: 54px
    }

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

    .testimonial {
        height: 540px
    }
}

@media (max-width:560px) {
    .intro {
        padding-top: 39px;
        padding-bottom: 41px
    }

    .results {
        padding-top: 41px;
        padding-bottom: 41px
    }

    .proof {
        padding-top: 46px;
        padding-bottom: 46px
    }

    .proof-head {
        gap: 28px
    }

    .proof-head h2 {
        margin-bottom: 18px
    }

    .proof-instruction {
        margin-bottom: 26px;
        display: none
    }

    .mobile-review-instruction {
        color: #66716d;
        text-align: center;
        margin: 0 0 16px;
        font-size: 12px;
        line-height: 1.45;
        display: block
    }

    .testimonials {
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        touch-action: pan-x pan-y;
        gap: 12px;
        margin: 0 -18px;
        padding: 0 18px 8px;
        scroll-padding-left: 18px;
        display: flex;
        overflow: auto hidden
    }

    .testimonials::-webkit-scrollbar {
        display: none
    }

    .testimonial,
    .testimonial:nth-child(2),
    .testimonial:nth-child(3),
    .testimonial:nth-child(5),
    .testimonial:nth-child(6) {
        scroll-snap-align: start;
        scroll-snap-stop: always;
        flex: 0 0 84%;
        height: 535px;
        min-height: 535px;
        margin: 0;
        transform: none
    }

    .testimonial:hover {
        filter: none;
        transform: none !important
    }

    .testimonial-face {
        padding: 24px
    }

    .russian-review {
        font-size: 17px;
        line-height: 1.42
    }

    .long-review .russian-review {
        font-size: 15.5px;
        line-height: 1.38
    }

    .review-dots {
        justify-content: center;
        align-items: center;
        gap: 7px;
        margin-top: 12px;
        display: flex
    }

    .review-dots span {
        background: #18231f38;
        border-radius: 50%;
        width: 6px;
        height: 6px;
        transition: width .2s, background .2s
    }

    .review-dots span.active {
        background: var(--red);
        border-radius: 999px;
        width: 18px
    }

    .final-cta {
        padding-top: 54px;
        padding-bottom: 54px
    }
}

.author {
    background: #eee7dc;
    border-top: 1px solid #18231f1a;
    border-bottom: 1px solid #18231f14;
    grid-template-columns: minmax(360px, .82fr) minmax(0, 1.18fr);
    align-items: end;
    gap: 82px;
    max-width: none;
    padding: 28px max(28px, 50vw - 564px) 72px;
    overflow: hidden
}

.author-portrait {
    width: 100%;
    height: 640px;
    box-shadow: none;
    background: 0 0;
    margin-bottom: -72px;
    overflow: visible
}

.author-portrait img {
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(0 18px 22px #18231f1f);
    width: 100%;
    height: 100%
}

.author-copy {
    max-width: 650px
}

.author-copy h2 {
    margin: 18px 0 28px;
    font-size: clamp(44px, 4.5vw, 62px);
    line-height: 1.04
}

.author-copy>p {
    color: #4f5b56;
    margin: 0 0 18px;
    font-size: 17px;
    line-height: 1.68
}

.author-copy>p:last-of-type {
    margin-bottom: 0
}

.author-emphasis {
    color: var(--red);
    font-weight: 700
}

.author-achievements {
    border-top: 1px solid #18231f24;
    margin-top: 30px;
    padding-top: 23px
}

.author-achievements h3 {
    color: #4f5b56;
    margin: 0 0 17px;
    font-family: Georgia, Times New Roman, serif;
    font-size: 19px;
    font-style: italic;
    font-weight: 500
}

.author-stats {
    border: 0;
    grid-template-columns: .75fr 1fr 1.1fr;
    gap: 0;
    margin: 0;
    padding: 0;
    display: grid
}

.author-stats span {
    text-transform: none;
    letter-spacing: 0;
    border-right: 1px solid #18231f26;
    flex-direction: column;
    gap: 4px;
    padding: 0 22px;
    display: flex
}

.author-stats span:first-child {
    padding-left: 0
}

.author-stats span:last-child {
    border-right: 0;
    padding-right: 0
}

.author-stats strong {
    color: var(--red);
    margin: 0;
    font-family: Georgia, Times New Roman, serif;
    font-size: 34px;
    font-weight: 500;
    line-height: 1
}

.author-stats small {
    color: #65706b;
    font-size: 12px;
    line-height: 1.25
}

.price,
.faq {
    padding-top: 56px;
    padding-bottom: 56px
}

.question-link {
    text-underline-offset: 4px;
    color: var(--ink);
    cursor: pointer;
    background: 0 0;
    border: 0;
    align-items: center;
    gap: 8px;
    padding: 0;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    transition: color .2s, transform .2s;
    display: inline-flex
}

.question-link svg {
    stroke-width: 1.8px;
    width: 17px;
    height: 17px
}

.question-link:hover {
    color: var(--red);
    transform: translateY(-1px)
}

.contact-system {
    right: max(20px, env(safe-area-inset-right));
    bottom: max(20px, env(safe-area-inset-bottom));
    z-index: 90;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s, transform .25s, visibility .25s;
    position: fixed;
    transform: translateY(12px)
}

.contact-system.visible,
.contact-system.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0)
}

.floating-contact {
    z-index: 3;
    min-height: 46px;
    color: var(--ink);
    cursor: pointer;
    opacity: 1;
    visibility: visible;
    background: #fffdf8;
    border: 1px solid #18231f2e;
    border-radius: 24px;
    align-items: center;
    gap: 9px;
    padding: 0 17px;
    font: 700 13px/1 Arial, sans-serif;
    transition: background .2s, color .2s, border-color .2s, transform .2s, opacity .25s, visibility .25s;
    display: flex;
    position: relative;
    box-shadow: 0 10px 28px #18231f2e
}

.floating-contact svg {
    width: 19px;
    height: 19px;
    color: var(--red)
}

.floating-contact:hover {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
    transform: translateY(-2px)
}

.floating-contact:hover svg {
    color: #f09a92
}

.contact-system.at-final .floating-contact {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px)
}

.contact-backdrop {
    z-index: 1;
    cursor: default;
    background: 0 0;
    border: 0;
    position: fixed;
    inset: 0
}

.contact-panel {
    z-index: 2;
    border: 1px solid var(--line);
    background: var(--paper);
    opacity: 0;
    visibility: hidden;
    transform-origin: 100% 100%;
    border-radius: 16px;
    width: 290px;
    padding: 22px;
    transition: opacity .2s, transform .2s, visibility .2s;
    position: absolute;
    bottom: 58px;
    right: 0;
    transform: translateY(8px)scale(.98);
    box-shadow: 0 20px 48px #18231f33
}

.contact-system.open .contact-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0)scale(1)
}

.contact-panel>strong {
    padding-right: 32px;
    font-family: Georgia, Times New Roman, serif;
    font-size: 23px;
    font-weight: 500;
    display: block
}

.contact-panel>p {
    color: #68736e;
    margin: 6px 0 17px;
    font-size: 13px
}

.contact-close {
    color: #68736e;
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 50%;
    place-items: center;
    width: 32px;
    height: 32px;
    display: grid;
    position: absolute;
    top: 13px;
    right: 13px
}

.contact-close:hover {
    color: var(--ink);
    background: #18231f12
}

.contact-close svg {
    width: 18px
}

.contact-options {
    gap: 8px;
    display: grid
}

.contact-options a {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 10px;
    grid-template-columns: 22px 1fr 17px;
    align-items: center;
    gap: 10px;
    min-height: 47px;
    padding: 0 13px;
    font-size: 14px;
    font-weight: 700;
    transition: border-color .2s, background .2s;
    display: grid
}

.contact-options a:hover {
    background: #fff7f4;
    border-color: #c9373480
}

.contact-options a>svg:first-child {
    width: 19px;
    color: var(--red)
}

.contact-options a>svg:last-child {
    color: #7b8581;
    width: 16px
}

@media (max-width:850px) {
    .author {
        grid-template-columns: 1fr;
        gap: 38px;
        padding: 56px 28px 0
    }

    .author-portrait {
        aspect-ratio: 1062/1481;
        order: 2;
        max-width: 520px;
        height: auto;
        margin: 0 auto
    }

    .author-copy {
        max-width: 680px;
        margin: 0 auto
    }

    .price,
    .faq {
        padding-top: 42px;
        padding-bottom: 42px
    }
}

@media (max-width:560px) {
    .author {
        gap: 28px;
        padding: 46px 18px 0
    }

    .author-portrait {
        aspect-ratio: 1062/1481;
        width: 100%;
        height: auto
    }

    .author-copy h2 {
        margin: 15px 0 24px;
        font-size: 39px
    }

    .author-copy>p {
        margin-bottom: 16px;
        font-size: 16px;
        line-height: 1.62
    }

    .author-achievements {
        margin-top: 24px;
        padding-top: 20px
    }

    .author-achievements h3 {
        margin-bottom: 14px;
        font-size: 18px
    }

    .author-stats {
        grid-template-columns: .7fr 1.05fr 1fr
    }

    .author-stats span {
        padding: 0 11px
    }

    .author-stats strong {
        font-size: 28px
    }

    .author-stats small {
        font-size: 10.5px
    }

    .price,
    .faq {
        padding-top: 36px;
        padding-bottom: 36px
    }

    footer {
        align-items: center;
        gap: 18px
    }

    .question-link {
        flex: none
    }

    .contact-system {
        right: max(12px, env(safe-area-inset-right));
        bottom: max(12px, env(safe-area-inset-bottom));
        transform: none
    }

    .contact-system.visible,
    .contact-system.open {
        transform: none
    }

    .floating-contact,
    .floating-contact:hover,
    .floating-contact:focus,
    .floating-contact:active {
        width: 48px;
        height: 48px;
        min-height: 48px;
        color: var(--ink);
        -webkit-tap-highlight-color: transparent;
        background: #fffdf8;
        border-color: #18231f2e;
        border-radius: 50%;
        justify-content: center;
        padding: 0;
        transform: none
    }

    .floating-contact svg,
    .floating-contact:hover svg,
    .floating-contact:focus svg,
    .floating-contact:active svg {
        width: 21px;
        height: 21px;
        color: var(--red)
    }

    .contact-system.open .floating-contact,
    .contact-system.open .floating-contact:hover,
    .contact-system.open .floating-contact:focus,
    .contact-system.open .floating-contact:active {
        background: var(--red);
        border-color: var(--red);
        color: #fff
    }

    .contact-system.open .floating-contact svg,
    .contact-system.open .floating-contact:hover svg,
    .contact-system.open .floating-contact:focus svg,
    .contact-system.open .floating-contact:active svg {
        color: #fff
    }

    .floating-contact span {
        clip: rect(0 0 0 0);
        white-space: nowrap;
        width: 1px;
        height: 1px;
        position: absolute;
        overflow: hidden
    }

    .contact-panel {
        left: max(16px, env(safe-area-inset-left));
        right: max(16px, env(safe-area-inset-right));
        bottom: max(12px, env(safe-area-inset-bottom));
        width: auto;
        max-width: none;
        padding: 24px 18px max(22px, calc(env(safe-area-inset-bottom) + 14px));
        transform-origin: bottom;
        border-radius: 20px;
        position: fixed;
        transform: translateY(18px)
    }

    .contact-system.open .contact-panel {
        transform: translateY(0)
    }

    .contact-panel>strong {
        font-size: 25px
    }

    .contact-panel>p {
        margin-bottom: 19px;
        font-size: 14px
    }

    .contact-options a {
        min-height: 52px;
        font-size: 15px
    }
}