/* ==========================================================================
   Vision Evo app page — Figma node 5683:9001 (desktop 1512) / 6595:13424 (mobile 393)
   Content column 1224px at x=144, same grid as the home page.
   ========================================================================== */

/* The footer lives outside <main> and frames its gradient card in a 10px
   gutter plus an 18px lead-in, both of which show the body through. Tinting
   only .ve-page therefore left a white band under the page, so the tint has to
   sit on the body and .ve-page just rides on it. */
body.page-template-page-vision-evo {
    background-color: #F8F6F7;
}

.ve-page {
    padding-top: 96px; /* clears the fixed header pill (24 + 72) */
    background: #F8F6F7;
}

.ve-container {
    width: 100%;
    max-width: 1264px;
    margin: 0 auto;
    padding: 0 20px;
}

.ve-page h1,
.ve-page h2,
.ve-page h3 {
    font-family: var(--font-serif);
    font-weight: 400;
    color: var(--black);
}

.ve-body p {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.45;
    color: #4C4D59;
}

.ve-body p + p {
    margin-top: 9px;
}

.ve-accent {
    color: var(--primary-blue);
    font-weight: 600;
}

.ve-accent-2 {
    color: #5464FE;
    font-weight: 600;
}

/* ==========================================================================
   Hero (1512x658)
   ========================================================================== */

.ve-hero {
    padding: 120px 0;
}

.ve-hero .ve-container {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ve-hero-intro {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ve-breadcrumb {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: 1.28px;
    text-transform: uppercase;
    color: #3B3B3B;
}

.ve-breadcrumb a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.ve-breadcrumb a:hover {
    color: var(--primary-blue);
}

.ve-breadcrumb span {
    margin: 0 2px;
}

.ve-hero-row {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

.ve-hero-id {
    display: flex;
    align-items: center;
    gap: 24px;
    width: 600px;
    flex-shrink: 0;
}

.ve-hero-icon {
    display: block;
    flex-shrink: 0;
    width: 88px;
    height: 88px;
    overflow: hidden;
}

.ve-hero-icon img {
    display: block;
    width: 88px;
    height: 88px;
    object-fit: cover;
}

.ve-hero-name {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    flex: 1 0 0;
    min-width: 1px;
}

.ve-hero-name h1 {
    font-size: 54px;
    line-height: 1.1;
}

.ve-hero-name p {
    font-family: var(--font-sans);
    font-size: 20px;
    line-height: 1.4;
    color: #4C4D59;
}

.ve-hero-lead {
    width: 600px;
    flex-shrink: 0;
    font-family: var(--font-sans);
    font-size: 20px;
    line-height: 1.4;
    color: #4C4D59;
}

.ve-hero-lead p + p {
    margin-top: 1.4em;
}

.ve-hero-foot {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    height: 210px;
}

.ve-hero-shots {
    position: relative;
    width: 600px;
    height: 210px;
    flex-shrink: 0;
}

.ve-shot {
    position: absolute;
    display: block;
    height: 153px;
    object-fit: contain;
}

.ve-shot--h {
    left: -23px;
    top: 0;
    width: 412px;
}

.ve-shot--c {
    left: 198px;
    top: 84px;
    width: 410px;
}

.ve-download {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 24px;
    background: #DEF4FF;
    border: 1px solid #CEEEFF;
    border-radius: 20px;
    box-shadow: 0px 4px 13.65px rgba(0, 0, 0, 0.1);
}

.ve-qr {
    display: block;
    width: 104px;
    height: 104px;
}

/* ==========================================================================
   What makes Vision Evo different (1512x841)
   ========================================================================== */

.ve-different {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 120px max(20px, calc((100% - 1224px) / 2));
}

.ve-different-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 32px;
    width: 600px;
    height: 601px;
    flex-shrink: 0;
}

.ve-different-text h2 {
    font-size: 40px;
    line-height: 1.1;
}

.ve-ar-icon {
    display: block;
    width: 80px;
    height: 80px;
}

/* phone screen with a fade into the page background */
.ve-screen {
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
}

.ve-screen img {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    object-fit: cover;
}

.ve-screen-fade {
    position: absolute;
    left: 0;
    width: 100%;
    height: 181px;
    background: linear-gradient(180deg, rgba(248, 246, 247, 0) 0%, #F8F6F7 100%);
}

.ve-screen--exercises {
    width: 600px;
    height: 601px;
}

.ve-screen--exercises img {
    top: 0;
    width: 363px;
    height: 737px;
}

.ve-screen--exercises .ve-screen-fade {
    top: 420px;
}

/* ==========================================================================
   Video (1512x966)
   ========================================================================== */

.ve-video {
    padding: 120px max(20px, calc((100% - 1224px) / 2));
}

.ve-video-heading {
    margin: 0 0 40px;
    font-size: 32px;
    line-height: 1.2;
    text-align: center;
}

.ve-video-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1080px;
    height: 614px;
    margin: 0 auto;
    border-radius: 40px;
    background: var(--black);
    overflow: hidden;
}

.ve-play {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    padding: 15px;
    border: none;
    border-radius: 100px;
    background: #FFFFFF;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.ve-play:hover {
    transform: scale(1.08);
}

.ve-play img {
    display: block;
    width: 24px;
    height: 24px;
}

/* ==========================================================================
   How to reduce screen-related visual strain (1512x1688)
   ========================================================================== */

.ve-strain {
    padding: 120px 10px;
}

.ve-strain-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 105px;
    padding: 72px 0;
    border-radius: 40px;
    background: #F9E7F2;
    overflow: hidden;
}

.ve-strain-head {
    display: flex;
    align-items: flex-start;
    gap: 26px;
}

.ve-strain-head h2 {
    width: 599px;
    flex-shrink: 0;
    font-size: 40px;
    line-height: 1.1;
}

.ve-strain-head .ve-body {
    width: 600px;
    flex-shrink: 0;
}

/* --- doctor quote --- */

.ve-quote {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 40px;
    width: 1224px;
    height: 425px;
    margin: 0;
    padding: 16px 40px;
    border-radius: 40px;
    background: #FEFEFE;
    filter: drop-shadow(0 4px 13.65px rgba(0, 0, 0, 0.1));
}

.ve-quote-author {
    display: flex;
    align-items: center;
    gap: 24px;
}

.ve-quote-avatar {
    display: block;
    flex-shrink: 0;
    width: 114px;
    height: 114px;
    border-radius: 24px;
    object-fit: cover;
    background-image: linear-gradient(221.059deg, rgb(247, 233, 241) 8.474%, rgb(235, 236, 249) 81.397%);
}

.ve-quote-author figcaption {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 0 0;
    min-width: 1px;
}

.ve-quote-name {
    font-family: var(--font-serif);
    font-size: 24px;
    line-height: 1.1;
    color: #FF91BB;
}

.ve-quote-meta {
    font-family: var(--font-sans);
    font-size: 20px;
    line-height: 1.45;
    color: #4C4D59;
}

.ve-quote blockquote {
    margin: 0;
}

.ve-quote-mark {
    display: block;
    width: 210px;
    height: 70px;
    font-family: var(--font-serif);
    font-weight: 300;
    font-size: 103px;
    line-height: 1;
    color: #FF91BB;
}

.ve-quote blockquote p {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 30px;
    line-height: 1.4;
    color: var(--black);
}

/* --- habit cards --- */

.ve-habits {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 56px;
    width: 100%;
    padding: 0 max(20px, calc((100% - 1204px) / 2));
}

.ve-habits-inner {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
}

.ve-habits h3 {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 30px;
    line-height: 1.1;
    color: var(--black);
}

.ve-habit-grid {
    display: flex;
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ve-habit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 287px;
    height: 337px;
    padding: 8px 8px 24px;
    border: 1px solid #DDDEF2;
    border-radius: 24px;
    background: #FEFEFE;
    overflow: hidden;
}

.ve-habit-img {
    display: block;
    width: 100%;
    height: 265px;
    border-radius: 20px;
    overflow: hidden;
    background: #D9D9D9;
}

.ve-habit-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ve-habit-label {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 20px;
    line-height: 1.4;
    color: var(--black);
    text-align: center;
}

.ve-label-short {
    display: none;
}

.ve-habits-note {
    width: 580px;
    font-family: var(--font-sans);
    font-size: 22px;
    line-height: 1.45;
    color: #4C4D59;
}

/* ==========================================================================
   How to Use (1512x938)
   ========================================================================== */

.ve-howto {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    padding: 120px max(20px, calc((100% - 1224px) / 2));
}

.ve-howto-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 593px;
    text-align: center;
}

.ve-howto-head h2 {
    width: 100%;
    font-size: 38px;
    line-height: 1.1;
}

.ve-howto-head p {
    width: 530px;
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.4;
    color: #4C4D59;
}

.ve-howto-cards {
    display: flex;
    gap: 24px;
    width: 100%;
    height: 564px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ve-howto-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 392px;
    height: 564px;
    padding: 24px 24px 0;
    border: 1px solid #DDDEF2;
    border-radius: 20px;
    background-image: linear-gradient(174.504deg, rgb(247, 233, 241) 3.2562%, rgb(254, 254, 254) 25.572%, rgb(254, 254, 254) 81.501%, rgb(235, 236, 249) 105.77%);
    overflow: hidden;
}

.ve-howto-copy {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

.ve-howto-num {
    font-family: var(--font-serif);
    font-weight: 300;
    font-size: 54px;
    line-height: 1.1;
    color: var(--primary-blue);
}

.ve-howto-copy p {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.45;
    color: var(--black);
    opacity: 0.9;
}

.ve-howto-art {
    display: flex;
    flex: 1 0 0;
    min-height: 1px;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.ve-howto-art img {
    display: block;
    max-width: 100%;
    max-height: 100%;
}

/* ==========================================================================
   Guided Eye Exercise Program (1512x1139)
   ========================================================================== */

.ve-program {
    padding: 120px 10px;
}

.ve-program-card {
    display: flex;
    flex-direction: column;
    gap: 123px;
    padding: 64px max(20px, calc((100% - 1204px) / 2));
    border-radius: 40px;
    background: #EBECF9;
}

.ve-program-top {
    display: flex;
    flex-direction: column;
    gap: 56px;
}

.ve-program-head {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 722px;
}

.ve-program-head h2 {
    font-size: 38px;
    line-height: 1.1;
}

.ve-program-head p {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.45;
    color: #4C4D59;
}

.ve-program-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 40px 72px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ve-program-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    width: 276px;
}

.ve-program-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 100px;
    background: #FEFEFE;
    box-shadow: -3px 4px 5.8px 0 rgba(14, 19, 63, 0.08);
}

.ve-program-icon img {
    display: block;
    width: 32px;
    height: 32px;
}

.ve-program-label {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 20px;
    line-height: 1.4;
    color: var(--black);
}

.ve-program-bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.ve-levels-text {
    width: 496px;
    font-family: var(--font-sans);
    color: #4C4D59;
}

.ve-levels-lead,
.ve-levels-body {
    display: block;
    line-height: 1.45;
}

.ve-levels-lead {
    font-size: 22px;
    margin-bottom: 1.45em;
}

.ve-levels-body {
    font-size: 16px;
}

.ve-levels-body + .ve-levels-body {
    margin-top: 1.45em;
}

.ve-sets {
    display: flex;
    flex-wrap: wrap;
    gap: 24px 18px;
    width: 600px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ve-set {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 9px;
    width: 188px;
    height: 179px;
}

.ve-set-img {
    display: block;
    flex: 1 0 0;
    min-height: 1px;
    width: 100%;
    border: 1.126px solid #86C4EC;
    border-radius: 16px;
    box-shadow: -3.377px 4.503px 6.53px 0 rgba(14, 19, 63, 0.08);
    background: #225269;
    overflow: hidden;
}

.ve-set-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
}

.ve-set-name {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 15.76px;
    line-height: 1.3;
    letter-spacing: 0.3152px;
    text-transform: uppercase;
    color: #2D4159;
}

.ve-set-meta {
    display: flex;
    align-items: center;
    gap: 11.258px;
}

.ve-set-meta > span {
    display: flex;
    align-items: center;
    gap: 6.755px;
    font-family: var(--font-sans);
    font-size: 15.76px;
    line-height: 1.4;
    color: #19537E;
}

.ve-set-meta img {
    display: block;
    width: 15.761px;
    height: 15.761px;
}

/* ==========================================================================
   What you achieve (1512x894)
   ========================================================================== */

.ve-achieve {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    padding: 120px max(20px, calc((100% - 1224px) / 2));
}

.ve-achieve h2 {
    width: 100%;
    font-size: 40px;
    line-height: 1.1;
    text-align: center;
}

.ve-achieve-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.ve-features {
    display: flex;
    flex-direction: column;
    width: 496px;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Every row is a disclosure. Collapsed rows are the 104px Figma row; the open
   one grows to fit its copy, which is the 154px row the design shows. */
.ve-feature {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-bottom: 1px solid #D7D7E3;
}

.ve-feature-head {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    width: 100%;
    min-height: 103px; /* + 1px item border = the 104px Figma row */
    padding: 16px 0;
    background: none;
    border: none;
    outline: none;
    text-align: left;
    cursor: pointer;
    color: #A4A5B1;
    transition: color 0.2s ease;
}

.ve-feature-head:hover,
.ve-feature.is-active .ve-feature-head {
    color: var(--primary-blue);
}

/* The open row is not the fixed 104 any more: it sits tight against its copy,
   16px below, and the row grows instead. */
.ve-feature.is-active .ve-feature-head {
    min-height: 0;
}

.ve-feature-num {
    font-family: var(--font-serif);
    font-weight: 300;
    font-size: 36px;
    line-height: 1.1;
    white-space: nowrap;
}

.ve-feature-title {
    flex: 1 0 0;
    min-width: 1px;
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 20px;
    line-height: 1.1;
}

.ve-feature-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.ve-feature-panel p {
    padding-bottom: 16px;
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.4;
    color: #4C4D59;
}

/* On desktop the phone lives in its own column and the open row just feeds it
   an image, so the copy of it inside the row is redundant. */
.ve-feature-shot {
    display: none;
}

.ve-screen--stats {
    width: 600px;
    height: 569px;
}

.ve-screen--stats img {
    top: 0.5px;
    width: 370px;
    height: 752px;
}

.ve-screen--stats .ve-screen-fade {
    top: 388.5px;
}

/* ==========================================================================
   Exercise categories (1512x1047)
   ========================================================================== */

.ve-categories {
    position: relative;
    padding: 120px max(20px, calc((100% - 1224px) / 2));
}

.ve-categories-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 64px 40px;
    border-radius: 40px;
    background: #FEFEFE;
    box-shadow: 0 4px 27.3px 0 rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.ve-categories-screen {
    position: relative;
    width: 502px;
    height: 679px;
    flex-shrink: 0;
}

.ve-categories-screen img {
    position: absolute;
    left: 40px;
    top: 0;
    display: block;
    width: 421px;
    height: 855px;
    object-fit: cover;
}

.ve-categories-copy {
    display: flex;
    flex-direction: column;
    gap: 40px;
    flex-shrink: 0;
}

.ve-categories-copy h2 {
    width: 502px;
    font-size: 38px;
    line-height: 1.1;
}

.ve-category-list {
    width: 600px;
    margin: 0;
    padding: 0 0 0 24px;
    list-style: disc;
    color: #4C4D59;
}

.ve-category-list li {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.4;
}

.ve-category-list li + li {
    margin-top: 16px;
}

.ve-category-list strong {
    font-weight: 600;
    font-size: 20px;
    color: #5464FE;
}

/* ==========================================================================
   Premium (1512x685)
   ========================================================================== */

.ve-premium {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 120px max(20px, calc((100% - 1224px) / 2));
}

.ve-premium h2 {
    font-size: 38px;
    line-height: 1.1;
}

.ve-plans {
    display: flex;
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ve-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 391px;
    min-height: 363px;
    padding: 32px;
    border: 1px solid #DDDEF2;
    border-radius: 24px;
    background-image: linear-gradient(158.627deg, rgb(235, 236, 249) 6.4346%, rgb(254, 254, 254) 89.252%);
    overflow: hidden;
}

.ve-plan--accent {
    background-image: linear-gradient(158.627deg, rgb(249, 231, 242) 6.4346%, rgb(255, 246, 250) 89.252%);
}

.ve-plan-top {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

.ve-plan-top h3 {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 24px;
    line-height: 1.4;
    color: var(--black);
}

.ve-plan-top ul {
    margin: 0;
    padding: 0 0 0 24px;
    list-style: disc;
}

/* One line each in English, which is how Figma draws them; the longer uk/ru
   strings wrap instead of being clipped by the card. */
.ve-plan-top li {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.4;
    color: #4C4D59;
}

.ve-plan-top li + li {
    margin-top: 8px;
}

.ve-plan-price {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    text-align: right;
}

.ve-plan-amount {
    font-family: var(--font-serif);
    font-weight: 300;
    font-size: 54px;
    line-height: 1.1;
    color: #5464FE;
}

.ve-plan--accent .ve-plan-amount {
    color: #FF91BB;
}

.ve-plan-per {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.4;
    color: #4C4D59;
}

/* Anchored to the right edge, not to Figma's left:257 — that number is just
   where "20% off" happens to land, and "Знижка 20%" ran off the card. At the
   English width right:32 resolves back to exactly 257. */
.ve-plan-badge {
    position: absolute;
    right: 32px;
    top: 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 13px;
    border-radius: 100px;
    background: #FF91BB;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 20px;
    line-height: 1.4;
    color: #FFF7FA;
    white-space: nowrap;
}

/* ==========================================================================
   FAQ — reuses the shared .faq-* accordion. Unlike the home page this one is
   numbered (Figma renders it as an ordered list hanging at 30px) and its
   toggle is the circled arrow, not the bare one.
   ========================================================================== */

.ve-faq .faq-heading {
    font-size: 38px;
}

.ve-faq .col-faq {
    counter-reset: ve-faq;
}

.ve-faq .faq-item {
    counter-increment: ve-faq;
    border-bottom-color: #E0E0E0;
}

.ve-faq .faq-question > span:first-child::before {
    content: counter(ve-faq) ". ";
}

.ve-faq .faq-arrow {
    background-image: url('../assets/icons/faq-chevron-toggle.svg');
}

/* ==========================================================================
   Tablet — Figma has no frame between 769 and 1511, so the fixed two-column
   rows (each half pinned to ~600px, sized for the 1224 desktop grid) are
   relaxed into flexible ones instead of being left to overflow.
   ========================================================================== */

@media (min-width: 769px) and (max-width: 1511px) {
    .ve-hero-id,
    .ve-hero-lead,
    .ve-different-text,
    .ve-strain-head h2,
    .ve-strain-head .ve-body,
    .ve-features,
    .ve-categories-copy {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
    }

    .ve-categories-copy h2,
    .ve-category-list {
        width: auto;
    }

    .ve-screen--exercises,
    .ve-screen--stats {
        flex: 0 1 460px;
        width: auto;
        min-width: 0;
    }

    .ve-categories-screen {
        flex: 0 1 380px;
        width: auto;
        min-width: 0;
    }

    .ve-hero-foot {
        flex-wrap: wrap;
        height: auto;
        row-gap: 24px;
    }

    .ve-strain-head,
    .ve-quote {
        width: 100%;
        max-width: 1224px;
    }

    .ve-quote {
        height: auto;
    }
}

/* ==========================================================================
   Mobile — Figma node 6595:13424 (393 wide, 353 content column at x=20)

   The frame stacks its ten sections a uniform 140px apart and gives none of
   them vertical padding of their own, so the page owns the rhythm and each
   section owns only its inside. Every section box below matches the frame's
   own box 1:1; the numbers in the comments are the frame's y coordinates.
   ========================================================================== */

@media (max-width: 768px) {
    .ve-page {
        display: flex;
        flex-direction: column;
        gap: 140px;
        padding-top: 96px;   /* clears the fixed header pill (24 + 72) */
        padding-bottom: 131px;
    }

    .ve-page > section {
        padding: 0 20px;
        /* index.css spaces the home page's mobile sections 8px apart; this
           frame uses a flat 140 and owns it through the flex gap above. */
        margin-top: 0;
    }

    /* The two tinted sections are full-bleed frames inset 10px, not 20px. */
    .ve-page > .ve-strain,
    .ve-page > .ve-program {
        padding: 0 10px;
    }

    .ve-page h2 {
        font-size: 34px;
        line-height: 1.15;
    }

    /* ---- hero (206 -> 757) ---- */

    .ve-page > .ve-hero {
        padding-top: 48px; /* breadcrumb lands on y=144 */
    }

    /* One column in the frame's order: name, drill shots, copy, badges — the
       shots sit between the name and the copy, which the source order does
       not, hence display:contents plus order. */
    .ve-hero .ve-container {
        display: flex;
        flex-direction: column;
        gap: 32px;
        max-width: none;
        padding: 0;
    }

    .ve-hero-intro,
    .ve-hero-row,
    .ve-hero-foot {
        display: contents;
    }

    .ve-breadcrumb {
        order: 1;
        margin-bottom: 8px; /* 32 + 8 = the frame's 40px drop */
    }

    .ve-hero-id     { order: 2; }
    .ve-hero-shots  { order: 3; }
    .ve-hero-lead   { order: 4; }
    .ve-download    { order: 5; }

    .ve-hero-id {
        align-items: flex-start;
        gap: 8px;
        width: 100%;
    }

    .ve-hero-icon,
    .ve-hero-icon img {
        width: 56px;
        height: 56px;
    }

    .ve-hero-name h1 {
        font-size: 38px;
    }

    .ve-hero-name p {
        font-size: 16px;
    }

    .ve-hero-lead {
        width: 100%;
        font-size: 16px;
        line-height: 1.45;
    }

    /* the frame separates the two sentences by a 24px margin *and* a blank line */
    .ve-hero-lead p + p {
        margin-top: 46px;
    }

    .ve-hero-shots {
        width: 100%;
        height: 134px;
        /* .ve-shot--c's fixed left offset was tuned for the 393px Figma frame;
           on narrower phones (375px, 360px...) it bleeds a few px past the
           right edge and forces the whole page to scroll horizontally. */
        overflow: hidden;
    }

    .ve-shot {
        height: auto;
    }

    .ve-shot--h {
        left: -15px;
        top: 0;
        width: 262px;
    }

    .ve-shot--c {
        left: 105px;
        top: 54px;
        width: 262px;
    }

    /* badges sit side by side, no QR, no card chrome (mobile frame has its
       own simpler treatment, unrelated to the desktop card redesign). */
    .ve-download {
        padding: 0;
        background: none;
        border: none;
        border-radius: 0;
        box-shadow: none;
    }

    .ve-download .app-card-badges {
        flex-direction: row;
        gap: 16px;
    }

    .ve-qr {
        display: none;
    }

    /* ---- what makes different (897 -> 2111) ---- */

    .ve-different {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .ve-different-text {
        width: 100%;
        height: auto;
        gap: 32px;
        padding: 38px 0;
    }

    .ve-screen--exercises {
        width: 100%;
        height: 601px;
    }

    .ve-screen--exercises img {
        top: 0;
        width: 353px;
        height: 716px;
    }

    .ve-screen--exercises .ve-screen-fade {
        top: 420px;
    }

    /* ---- video (2251 -> 2460) ---- */

    .ve-video-heading {
        margin: 0 0 24px;
        font-size: 24px;
    }

    .ve-video-frame {
        height: 209px;
        border-radius: 24px;
    }

    .ve-play {
        width: 56px;
        height: 56px;
        padding: 16px;
    }

    /* ---- how to reduce strain (2600 -> 4144) ---- */

    .ve-strain-card {
        gap: 56px;
        padding: 40px 10px;
        border-radius: 24px;
    }

    .ve-strain-head {
        flex-direction: column;
        gap: 26px;
        width: 100%;
        padding: 0;
    }

    .ve-strain-head h2,
    .ve-strain-head .ve-body {
        width: 100%;
    }

    .ve-strain-head .ve-body p {
        font-size: 14px;
        line-height: 1.5;
    }

    .ve-strain-head .ve-body p + p {
        margin-top: 18px;
    }

    .ve-quote {
        width: 100%;
        height: auto;
        gap: 40px;
        padding: 24px;
        border-radius: 32px;
    }

    .ve-quote-author {
        gap: 16px;
    }

    .ve-quote-avatar {
        width: 72px;
        height: 72px;
    }

    .ve-quote-name {
        font-size: 22px;
    }

    .ve-quote-meta {
        font-size: 14px;
        line-height: 1.5;
    }

    .ve-quote blockquote p {
        font-size: 20px;
    }

    .ve-habits {
        gap: 24px;
        padding: 0;
    }

    .ve-habits-inner {
        gap: 24px;
    }

    .ve-habits h3 {
        font-size: 16px;
        line-height: 1.3;
    }

    /* 2x2 of the frame's 169x240 card */
    .ve-habit-grid {
        flex-wrap: wrap;
        gap: 16px;
        width: 100%;
    }

    .ve-habit {
        width: calc(50% - 8px);
        height: 240px;
        gap: 8px;
        padding: 8px 8px 16px;
        border-radius: 18px;
    }

    .ve-habit-img {
        flex: 1 0 0;
        min-height: 0;
        height: auto;
        border-radius: 16px;
    }

    .ve-label-full {
        display: none;
    }

    .ve-label-short {
        display: inline;
    }

    .ve-habits-note {
        width: 100%;
        font-size: 16px;
    }

    /* ---- how to use (4284 -> 5772) ---- */

    .ve-howto {
        gap: 32px;
    }

    .ve-howto-head {
        width: 100%;
        align-items: flex-start;
        gap: 16px;
        text-align: left;
    }

    .ve-howto-head p {
        width: 100%;
    }

    .ve-howto-cards {
        flex-direction: column;
        gap: 24px;
        height: auto;
    }

    .ve-howto-card {
        width: 100%;
        height: 416px;
    }

    .ve-howto-num {
        font-size: 44px;
    }

    /* ---- guided program (5912 -> 7158) ---- */

    .ve-program-card {
        gap: 56px;
        padding: 32px 10px;
        border-radius: 24px;
    }

    .ve-program-top {
        gap: 56px;
    }

    .ve-program-head {
        width: 100%;
        gap: 24px;
    }

    .ve-program-head p {
        font-size: 14px;
        line-height: 1.5;
    }

    /* Two columns on a 16/24 gap. The design centres the shorter item of a row
       against the taller one, which a grid row does for free — a wrapping flex
       line does not, and that is what put these out of step. */
    .ve-program-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        align-items: center;
        gap: 24px 16px;
    }

    .ve-program-item {
        width: auto;
    }

    .ve-program-label {
        font-size: 16px;
        line-height: 1.3;
    }

    .ve-program-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 40px;
    }

    .ve-levels-text {
        width: 100%;
    }

    .ve-levels-lead {
        font-size: 18px;
    }

    /* the three sets stay full size and scroll sideways */
    .ve-sets {
        flex-wrap: nowrap;
        gap: 18px;
        width: 100%;
        overflow-x: auto;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
    }

    .ve-set {
        flex: 0 0 188px;
    }

    /* ---- what you achieve (7298 -> 8637) ---- */

    .ve-achieve {
        align-items: flex-start;
        gap: 32px;
    }

    .ve-achieve h2 {
        text-align: left;
    }

    .ve-achieve-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .ve-features {
        width: 100%;
    }

    /* The design drops the phone into the middle of the list, which is simply
       wherever the open row is — so the phone rides inside the row instead of
       standing in its own column. */
    .ve-achieve-shot {
        display: none;
    }

    .ve-feature-shot {
        display: block;
        width: 100%;
        height: 598px;
    }

    .ve-feature-shot img {
        top: 40px;
        width: 343px;
        height: 696px;
    }

    .ve-feature-shot .ve-screen-fade {
        top: 423px;
    }

    /* ---- exercise categories (8777 -> 10409) ---- */

    .ve-categories-card {
        flex-direction: column;
        /* 40 + a collapsed placeholder frame + 40 in the design */
        gap: 81px;
        padding: 32px 16px 16px;
        border-radius: 24px;
    }

    /* copy first, screen underneath */
    .ve-categories-copy {
        order: -1;
        gap: 40px;
        width: 100%;
    }

    .ve-categories-copy h2,
    .ve-category-list {
        width: 100%;
    }

    .ve-categories-screen {
        width: 100%;
        height: auto;
    }

    .ve-categories-screen img {
        position: static;
        width: 100%;
        height: auto;
    }

    /* ---- premium (10549 -> 11669) ---- */

    .ve-premium {
        gap: 40px;
    }

    .ve-plans {
        flex-direction: column;
        gap: 24px;
    }

    .ve-plan {
        width: 100%;
        height: 331px;
    }

    .ve-plan-amount {
        font-size: 44px;
    }

    /* ---- faq (11809 -> 12724) ---- */

    .ve-faq .container-grid {
        flex-direction: column;
        gap: 32px;
        max-width: none;
        padding: 0;
    }

    .ve-faq .col-title {
        width: 100%;
        gap: 16px;
    }

    .ve-faq .col-title .faq-eyebrow {
        font-size: 16px;
        letter-spacing: 1.28px;
    }

    .ve-faq .col-title h2.faq-heading {
        font-size: 34px;
        line-height: 1.15;
    }

    .ve-faq .faq-question {
        font-size: 16px;
        line-height: 1.3;
    }

    .ve-faq .faq-answer p {
        padding-left: 24px;
    }
}