/* ==========================================================================
   Nutrition Evo app page — Figma 6354:8930 (desktop 1512) / 6581:17117 (mobile 393)
   Content column 1224px at x=144, the same grid the home page uses.
   ========================================================================== */

.ne-page {
    /* the header is fixed at top:24 and is 72 tall, so content starts at 96 */
    padding-top: 96px;
    background: #F8F6F7;
}

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

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

.ne-page h2 {
    font-size: 40px;
    line-height: 1.1;
}

.ne-centered {
    text-align: center;
}

/* The pink card the two "wide statement" sections sit in bleeds to a 10px
   page gutter rather than sitting on the 1224 column. */
.ne-card-wrap {
    padding: 0 10px;
}

.ne-card {
    border-radius: 40px;
    background: #F9E7F2;
    overflow: hidden;
}

.ne-card-cols {
    display: flex;
    align-items: flex-start;
    gap: 26px;
    width: 1225px;
    max-width: 100%;
    margin: 0 auto;
}

.ne-card-cols h2 {
    width: 599px;
    flex-shrink: 0;
}

.ne-card-copy {
    width: 600px;
    flex-shrink: 0;
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.45;
    color: #4C4D59;
}

.ne-card-copy > * + * {
    margin-top: 24px;
}

/* ==========================================================================
   Hero — breadcrumb, identity, lead copy and badges (1512x504)
   ========================================================================== */

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

.ne-hero .ne-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

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

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

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

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

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

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

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

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

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

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

.ne-hero-name p {
    font-family: var(--font-sans);
    font-size: 22px;
    line-height: 1.45;
    color: #4C4D59;
}

.ne-hero-lead {
    display: flex;
    flex-direction: column;
    gap: 48px;
    width: 600px;
    flex-shrink: 0;
}

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

/* Figma separates the two paragraphs with an empty line, not the 48px gap. */
.ne-hero-lead .ne-lead-2 {
    margin-top: -24.8px; /* 48 - 24.8 = one 23.2px blank line */
}

.ne-badges {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

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

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

.ne-badges a {
    display: block;
    transition: transform 0.2s ease;
}

.ne-badges a:hover {
    transform: scale(1.04);
}

.ne-badges img {
    display: block;
    width: 120px;
    height: 40px;
}

/* ==========================================================================
   "530+ Delicious Recipes" stat + category cards — desktop only, Figma's
   mobile frame (6581:17117) does not include this row.
   ========================================================================== */

.ne-stats {
    display: flex;
    align-items: stretch;
    gap: 12px;
    height: 152px;
    margin-top: 40px;
}

.ne-stat {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    width: 290px;
    flex-shrink: 0;
    padding: 16px;
    background: #EBECF9;
    border: 1px solid #DDDEF2;
    border-radius: 24px;
}

.ne-stat-value {
    font-family: var(--font-serif);
    font-size: 54px;
    line-height: 1;
    color: var(--primary-blue);
}

.ne-stat-label {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.45;
    color: #4C4D59;
}

.ne-recipe-cats {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Cards shingle over one another by 20px — later cards paint on top, which
   is just normal DOM order, no z-index needed. */
.ne-recipe-cat {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 1 1 0;
    min-width: 0;
    padding: 8px;
    border: 1px solid #DDDEF2;
    border-radius: 24px;
    background: linear-gradient(162deg, #EBECF9 6.43%, #F7E9F1 89.25%);
    box-shadow: 0px 4px 27.3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.ne-recipe-cat:not(:last-child) {
    margin-right: -20px;
}

.ne-recipe-cat-name {
    width: 100%;
    padding: 0 8px;
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 20px;
    line-height: 1.4;
    color: #0E133F;
}

.ne-recipe-cat-art {
    display: block;
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    background: #EBECF9;
}

.ne-recipe-cat-art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==========================================================================
   What makes Nutrition Evo different — copy left, app screen right (1512x841)
   ========================================================================== */

.ne-different {
    padding: 120px 0;
}

.ne-different-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ne-different-copy {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 701px;
    flex-shrink: 0;
}

.ne-different-lead,
.ne-different-note,
.ne-includes-label {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.45;
    color: #4C4D59;
}

.ne-different-lead p + p {
    margin-top: 9px;
}

.ne-includes {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ne-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ne-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 8px 20px;
    border-radius: 1000px;
    background: #FFFFFF;
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.45;
    color: var(--black);
    white-space: nowrap;
}

.ne-pill img {
    display: block;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

.ne-different-screen {
    position: relative;
    width: 505px;
    height: 601px;
    flex-shrink: 0;
    overflow: hidden;
}

.ne-different-screen img {
    position: absolute;
    left: 71px;
    top: 12px;
    display: block;
    width: 363px;
    height: auto;
}

.ne-screen-fade {
    position: absolute;
    left: 0;
    right: 0;
    top: 420px;
    display: block;
    height: 181px;
    background: linear-gradient(180deg, rgba(248, 246, 247, 0) 0%, #F8F6F7 100%);
}

/* ==========================================================================
   What Can I Cook With the Ingredients in My Fridge? (1512x626)
   ========================================================================== */

.ne-fridge {
    padding: 120px 0;
}

.ne-fridge-card {
    padding: 112px 20px;
}

/* ==========================================================================
   How to Use Nutrition Evo? — five step cards plus a photo tile (1512x1264)
   ========================================================================== */

.ne-steps {
    padding: 120px 0;
}

.ne-steps h2 {
    margin-bottom: 40px;
}

.ne-steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 24px;
    row-gap: 32px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ne-step {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 454px;
    padding: 24px;
    border: 1px solid #DDDEF2;
    border-radius: 20px;
    background: linear-gradient(175.57deg, #F7E9F1 1.99%, #FEFEFE 39.2%, #FEFEFE 86.37%);
    overflow: hidden;
}

/* the second row of cards fades to blue at the bottom instead of pink at the top */
.ne-step--details,
.ne-step--cook {
    background: linear-gradient(175.57deg, #FEFEFE 19.81%, #FEFEFE 63.83%, #EBECF9 105.77%);
}

.ne-step-copy {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

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

.ne-step-text {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.ne-step-text h3 {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 26px;
    line-height: 1.1;
}

.ne-step-text p {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.45;
    color: var(--black);
    opacity: 0.9;
}

/* ---- the line-art doodles ------------------------------------------------ */

/* Each doodle is a fixed-size composition anchored to the bottom-left of a
   182px band; parts that run past the card are clipped by the card itself. */
.ne-step-art {
    position: relative;
    height: 182px;
    width: 100%;
}

.ne-art-vector {
    position: absolute;
    display: block;
}

/* Figma draws these as emoji glyphs; they ship as local Twemoji SVGs so
   Windows — which has no flag glyphs and a different food set — matches the
   design. The box keeps the glyph's advance and line box, so every Figma
   coordinate below still lands where it was measured. */
.ne-art-emoji {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.17em;
    height: 1.45em;
}

.ne-art-emoji img,
.ne-flag img {
    display: block;
    width: 1em;
    height: 1em;
    /* Figma's w/h on these boxes is the *rotated* bounding box, so the glyph
       turns inside the box rather than the box turning with it. */
    transform: rotate(var(--rot, 0deg)) scaleY(var(--flip, 1));
}

/* 01 — a phone outline with vegetables inside the focus frame */
.ne-art-phone {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 135px;
    height: 232.875px;
    border: 1.125px solid var(--black);
    border-radius: 16.875px;
}

.ne-art-notch {
    position: absolute;
    left: 36px;
    top: -1.125px;
    display: block;
    width: 60.75px;
    height: 14.625px;
    border: 1.125px solid var(--black);
    border-radius: 0 0 6.75px 6.75px;
}

.ne-art-emoji--broccoli {
    left: 60.45px;
    top: 62px;
    width: 51.391px;
    height: 44.643px;
    --rot: -66.53deg;
    font-size: 29.639px;
}

.ne-art-emoji--tomato {
    left: 25px;
    top: 84.24px;
    width: 30.495px;
    height: 36.277px;
    --rot: 17.98deg;
    font-size: 21.622px;
}

.ne-art-emoji--carrot {
    left: 56.01px;
    top: 107px;
    font-size: 37.657px;
}

.ne-art-vector--lens {
    left: 15px;
    top: 62px;
    width: 104.21px;
    height: 93px;
}

/* 02 — stacked recipe cards under a magnifying glass */
.ne-art-vector--list {
    left: 0;
    top: 64px;
    width: 102.18px;
    height: 117.65px;
}

.ne-art-emoji--glass {
    left: 84.68px;
    top: 94.85px;
    height: 1.1em;
    font-size: 60.619px;
    transform: translateX(-50%);
}

/* 03 — a speech bubble, a sparkle and the avocado assistant */
.ne-art-vector--bubble {
    left: 0;
    top: 99.57px;
    width: 77.385px;
    height: 78.284px;
}

.ne-art-vector--sparkle {
    left: 97.47px;
    top: 75px;
    width: 40px;
    height: 40px;
}

.ne-art-vector--avocado {
    left: 137.5px;
    top: 90px;
    width: 55px;
    height: 91.8px;
}

/* 04 — a checked-off recipe card */
.ne-art-vector--card {
    left: 0;
    top: 72px;
    width: 78.116px;
    height: 109.607px;
}

.ne-art-emoji--check {
    left: 82.62px;
    top: 70px;
    height: 1.1em;
    font-size: 46.706px;
    transform: translateX(-50%);
}

/* 05 — a pan over a flame with a salt shaker above it */
.ne-art-vector--pan {
    left: 0;
    top: 75.5px;
    width: 113.563px;
    height: 96px;
}

.ne-art-emoji--salt {
    left: 99.84px;
    top: 45px;
    width: 51.689px;
    height: 50.46px;
    --rot: 57.56deg;
    --flip: -1;
    font-size: 35px;
    transform: translateX(-50%);
}

.ne-art-emoji--flame {
    left: 56px;
    top: 160px;
    height: 1.1em;
    font-size: 20px;
    transform: translateX(-50%);
}

/* ---- the photo that closes the grid -------------------------------------- */

.ne-step-photo {
    position: relative;
    min-height: 454px;
    list-style: none;
}

.ne-step-photo img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

/* ==========================================================================
   Video — not in the Figma frame; the box is the one the other three app
   pages use (726 tall, 40px radius, white play button centred).
   ========================================================================== */

.ne-video {
    padding: 120px 0;
}

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

.ne-video-frame {
    position: relative;
    width: 100%;
    max-width: 1080px;
    height: 614px;
    margin: 0 auto;
    border-radius: 40px;
    background: var(--black);
    overflow: hidden;
}

.ne-play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    padding: 0;
    border: 0;
    border-radius: 100px;
    background: #FFFFFF;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.ne-play:hover {
    transform: translate(-50%, -50%) scale(1.08);
}

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

/* ==========================================================================
   Recipes for Different Diets (1512x618)
   ========================================================================== */

.ne-diets {
    padding: 120px 0;
}

.ne-diets-head {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-bottom: 40px;
}

.ne-diets-head h2,
.ne-diets-head p {
    width: 598px;
    max-width: 100%;
}

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

.ne-diets-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 40px 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ne-diet {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 225px;
    flex-shrink: 0;
}

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

.ne-diet-icon img {
    display: block;
    width: 32px;
    height: 32px;
}

.ne-diet-copy {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ne-diet-title {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 20px;
    line-height: 1.4;
    color: var(--black);
}

.ne-diet-text {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.45;
    color: #4C4D59;
}

/* ==========================================================================
   Recipes From Around the World (1512x774)
   ========================================================================== */

.ne-world {
    padding: 120px 0;
}

.ne-world-card {
    position: relative;
    /* Scopes .ne-flags' z-index:-1 to this card. Without a stacking context
       here, position:relative alone doesn't create one, so the negative
       z-index would escape to the nearest ancestor that does and could paint
       behind unrelated page content instead of just behind this card's text. */
    isolation: isolate;
    padding: 72px 20px;
}

.ne-world-card h2 {
    font-size: 38px;
}

.ne-cuisines {
    margin: 24px 0;
    padding-left: 24px;
    list-style: disc;
}

.ne-cuisines li {
    margin-bottom: 6px;
    font-weight: 500;
    color: var(--black);
}

.ne-cuisines li:last-child {
    margin-bottom: 0;
}

/* Figma scatters the flags by hand across the card, so each one is placed
   individually rather than by any layout rule. z-index:-1 keeps them behind
   .ne-card-cols — that element is unpositioned, so without this the flags
   (positioned, z-index:auto) paint above it regardless of DOM order. */
.ne-flags {
    position: absolute;
    z-index: -1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.ne-flag {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.17em;
    height: 1.45em;
}

.ne-flag--it {
    left: 33.58%;
    top: 64.05%;
    width: 79.373px;
    height: 96.323px;
    --rot: -17.55deg;
    font-size: 57px;
}

.ne-flag--tr {
    left: 69.77%;
    top: 47.61%;
    width: 73.606px;
    height: 89.328px;
    --rot: 17.41deg;
    font-size: 53px;
}

.ne-flag--fr {
    left: 37.99%;
    top: 36.19%;
    font-size: 53px;
}

.ne-flag--ua {
    left: 13.34%;
    top: 56.41%;
    font-size: 53px;
}

.ne-flag--de {
    left: 22.86%;
    top: 42.37%;
    font-size: 46px;
}

.ne-flag--mx {
    left: 81.72%;
    top: 29.96%;
    width: 46.837px;
    height: 65.917px;
    --rot: -2.58deg;
    font-size: 44px;
}

.ne-flag--es {
    left: 11.33%;
    top: 25.47%;
    width: 57.443px;
    height: 68.885px;
    --rot: -18.29deg;
    font-size: 41px;
}

/* ==========================================================================
   What Do You Get — accordion left, the matching app screen right (1512x1174)
   ========================================================================== */

.ne-get {
    padding: 120px 0;
}

.ne-get h2 {
    margin-bottom: 40px;
}

.ne-get-row {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

.ne-features {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 600px;
    /* Figma pins the column to the 852px screen beside it and lets the open
       row overhang the top by 8px rather than growing the section. */
    height: 852px;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ne-feature {
    border-bottom: 1px solid #D7D7E3;
}

.ne-feature-head {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    width: 100%;
    padding: 16px 0;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    color: #A4A5B1;
    transition: color 0.2s ease;
}

/* collapsed rows are 104px tall in Figma; 39.6px of content centred in 103px */
.ne-feature:not(.is-active) .ne-feature-head {
    padding: 31.7px 0;
}

.ne-feature-head:hover {
    color: #6C7BFD;
}

.ne-feature.is-active .ne-feature-head {
    color: var(--primary-blue);
    cursor: default;
}

.ne-feature-num {
    flex-shrink: 0;
    font-family: var(--font-serif);
    font-weight: 300;
    font-size: 36px;
    line-height: 1.1;
    color: inherit;
}

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

.ne-feature-body {
    display: none;
}

.ne-feature.is-active .ne-feature-body {
    display: block;
    padding-bottom: 16px;
}

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

.ne-get-screen {
    display: flex;
    align-items: flex-start;
    /* Figma sits the device at x=114 in the 600px column, not centred */
    padding-left: 111px;
    width: 600px;
    height: 852px;
    flex-shrink: 0;
}

.ne-get-screen img {
    display: block;
    width: auto;
    height: 843px;
    max-width: 100%;
}

/* ==========================================================================
   Recipe Categories — a rail that bleeds off the right edge (same shape as
   Sound Evo's .se-uses-rail)
   ========================================================================== */

.ne-cats {
    padding: 120px 0;
}

.ne-cats h2 {
    margin-bottom: 40px;
}

.ne-cats-viewport {
    position: relative;
}

.ne-cats-rail {
    display: flex;
    gap: 16px;
    margin: 0;
    /* line up with the content column, then run to the viewport edge */
    padding: 0 20px 0 max(20px, calc((100vw - 1224px) / 2));
    list-style: none;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.ne-cats-rail::-webkit-scrollbar {
    display: none;
}

.ne-cat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    flex-shrink: 0;
    width: 391px;
    height: 456px;
    padding: 8px 8px 24px;
    border: 1px solid #DDDEF2;
    border-radius: 24px;
    background: #FFFFFF;
    overflow: hidden;
}

.ne-cat-art {
    display: block;
    width: 100%;
    height: 265px;
    border-radius: 20px;
    background: #EBECF9;
    overflow: hidden;
}

.ne-cat-art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ne-cat-copy {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    padding: 0 24px;
}

.ne-cat-title {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 24px;
    line-height: 1.1;
    color: var(--primary-blue);
}

.ne-cat-text {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.45;
    color: #4C4D59;
}

.ne-cats-next,
.ne-cats-prev {
    position: absolute;
    top: 275px;
    z-index: 2;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 6px;
    border: 1.5px solid var(--primary-blue);
    border-radius: 100px;
    background: #FEFEFE;
    box-shadow: 0 0 24px rgba(0, 20, 36, 0.12);
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease, opacity 0.2s ease;
}

.ne-cats-next {
    right: calc(max(20px, (100vw - 1224px) / 2) - 24px);
}

.ne-cats-prev {
    left: calc(max(20px, (100vw - 1224px) / 2) - 24px);
    /* At the very start of the rail there's nothing to go back to; JS toggles
       this once the visitor scrolls (or clicks next) past the first card. */
    opacity: 0;
    pointer-events: none;
}

.ne-cats-prev.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.ne-cats-next:hover,
.ne-cats-prev:hover {
    transform: translateY(-50%) scale(1.08);
}

.ne-cats-next img,
.ne-cats-prev img {
    display: block;
    width: 24px;
    height: 24px;
}

.ne-cats-prev img {
    transform: scaleX(-1);
}

/* ==========================================================================
   FAQ — the shared accordion, only the eyebrow/heading sizes differ
   ========================================================================== */

.ne-faq .faq-heading .faq-accent {
    color: var(--primary-blue);
}

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

.ne-faq .faq-item {
    counter-increment: ne-faq;
}

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

/* ==========================================================================
   Tablet — Figma has no frame between 769 and 1511, so the fixed two-column
   rows are relaxed into flexible ones rather than being left to clip.
   ========================================================================== */

@media (min-width: 769px) and (max-width: 1511px) {
    .ne-hero-id,
    .ne-hero-lead,
    .ne-different-copy,
    .ne-card-cols h2,
    .ne-card-copy,
    .ne-features,
    .ne-get-screen {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
    }

    .ne-different-screen {
        flex: 0 1 505px;
    }

    .ne-fridge-card {
        padding: 112px 40px;
    }

    .ne-world-card {
        padding: 72px 40px;
    }

    .ne-get-screen {
        height: auto;
        justify-content: center;
        padding-left: 0;
    }

    .ne-get-screen img {
        width: 100%;
        height: auto;
        max-width: 415px;
    }
}

/* The step cards' 3-column grid only gets cramped below 1280 — from there up
   to the 1512 desktop frame it still fits 3 across. */
@media (min-width: 769px) and (max-width: 1279px) {
    .ne-steps-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Below ~1200 the world card's two columns get too tight for the scattered
   flags to stay clear of the copy, so they drop out until mobile brings back
   its own placement. */
@media (min-width: 769px) and (max-width: 1199px) {
    .ne-flags {
        display: none;
    }
}

/* ==========================================================================
   Mobile — Figma 6581:17117 (393 wide, 353 content column, 20px gutters).
   Sections carry the frame-to-frame gaps from the mobile canvas as top
   padding, which is the only vertical rhythm that frame defines.
   ========================================================================== */

@media (max-width: 768px) {
    .ne-page h2 {
        font-size: 34px;
        line-height: 1.15;
    }

    .ne-container {
        padding: 0 20px;
    }

    .ne-card-wrap {
        padding: 0 10px;
    }

    .ne-card-cols {
        flex-direction: column;
        gap: 40px;
        width: 100%;
    }

    .ne-card-cols h2,
    .ne-card-copy {
        width: 100%;
    }

    /* ---- hero: no breadcrumb on mobile, 56px icon ---- */

    .ne-hero {
        padding: 59px 0 0;
    }

    .ne-breadcrumb {
        display: none;
    }

    .ne-hero .ne-container {
        gap: 24px;
    }

    .ne-hero-row {
        display: contents;
    }

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

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

    .ne-hero-name {
        gap: 8px;
    }

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

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

    .ne-hero-lead {
        width: 100%;
        gap: 24px;
    }

    .ne-hero-lead .ne-lead-2 {
        margin-top: -0.8px; /* 24 - 0.8 = one 23.2px blank line */
    }

    /* Not part of the mobile frame at all (6581:17117 has no stats row). */
    .ne-stats {
        display: none;
    }

    /* Mobile keeps the same card and QR, just full-width with the badges+QR
       centered in it (Figma 6581:17117 — the card spans the whole content
       column here instead of hugging the right edge). */
    .ne-download {
        width: 100%;
        justify-content: center;
    }

    /* ---- what makes it different: screen drops below the copy ---- */

    .ne-different {
        padding: 144px 0 0;
    }

    .ne-different-row {
        flex-direction: column;
        align-items: stretch;
        gap: 32px;
    }

    .ne-different-copy {
        width: 100%;
    }

    .ne-pills {
        flex-direction: column;
        align-items: flex-start;
    }

    .ne-pill {
        white-space: normal;
        height: auto;
        min-height: 40px;
    }

    .ne-different-screen {
        width: 100%;
        height: 601px;
    }

    .ne-different-screen img {
        left: 0;
        top: 0;
        width: 100%;
    }

    .ne-screen-fade {
        top: auto;
        bottom: 0;
    }

    /* ---- fridge card ---- */

    .ne-fridge {
        padding: 224px 0 0;
    }

    .ne-fridge-card {
        padding: 64px 16px;
    }

    /* ---- how to use ---- */

    .ne-steps {
        padding: 198px 0 0;
    }

    .ne-steps h2 {
        margin-bottom: 40px;
    }

    .ne-steps-grid {
        grid-template-columns: 1fr;
        row-gap: 32px;
    }

    .ne-step-num {
        font-size: 48px;
    }

    .ne-step-text h3 {
        font-size: 22px;
    }

    .ne-step-text p {
        font-size: 15px;
        line-height: 1.4;
    }

    /* Dropped entirely on mobile — not part of the mobile grid. */
    .ne-step-photo {
        display: none;
    }

    /* ---- video ---- */

    .ne-video {
        padding: 155px 0 0;
    }

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

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

    .ne-play {
        width: 56px;
        height: 56px;
    }

    /* ---- diets: two columns ---- */

    .ne-diets {
        padding: 155px 0 0;
    }

    .ne-diets-head {
        gap: 40px;
        margin-bottom: 40px;
    }

    .ne-diets-head h2,
    .ne-diets-head p {
        width: 100%;
    }

    .ne-diets-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px 16px;
    }

    .ne-diet {
        width: auto;
    }

    .ne-diet-title {
        font-size: 16px;
        line-height: 1.3;
    }

    .ne-diet-text {
        font-size: 15px;
        line-height: 1.4;
    }

    /* ---- around the world ---- */

    .ne-world {
        padding: 217px 0 0;
    }

    .ne-world-card {
        padding: 40px 16px;
        /* The scattered flags' left offsets were tuned for the 393px Figma
           frame; on narrower phones (375px, 360px...) a couple bleed past the
           card's right edge and force the whole page to scroll horizontally. */
        overflow: hidden;
    }

    .ne-world-card h2 {
        font-size: 34px;
    }

    /* the world card tightens the title-to-copy gap; the fridge card keeps 40 */
    .ne-world-card .ne-card-cols {
        gap: 32px;
    }

    /* Figma's mobile frame (6592:13725) is a fixed 341x479 box, not a fluid
       one — pinning .ne-flags at that same fixed size (instead of scaling
       with the card) is what lets the fixed-px flag positions below keep
       matching the text below them at any phone width. The text columns get
       the same fixed 341px cap for the same reason: a fluid width let the
       heading/paragraphs reflow to different line breaks at each viewport,
       which dragged the "safe gaps" Figma placed the flags in out from under
       them even though the flags themselves were positioned correctly. */
    .ne-card-cols h2,
    .ne-card-copy {
        width: 341px;
        max-width: 100%;
    }

    .ne-flags {
        left: 16px;
        top: 40px;
        width: 341px;
        height: 479px;
    }

    .ne-flag--fr,
    .ne-flag--de {
        display: none;
    }

    /* Shifted right of Figma's own 262px: Literata wraps "Around the World"
       a bit wider in the browser than in Figma at this size, which reaches
       far enough right to run under the flag at Figma's exact x. */
    .ne-flag--it {
        left: 320px;
        top: -27.81px;
    }

    .ne-flag--tr {
        left: 327.03px;
        top: 151px;
    }

    .ne-flag--ua {
        left: 249px;
        top: 295px;
    }

    .ne-flag--mx {
        left: -23px;
        top: 55.98px;
    }

    .ne-flag--es {
        left: 180px;
        top: 164.87px;
    }

    /* ---- what do you get: the screen slots in after the first row ---- */

    .ne-get {
        padding: 290px 0 0;
    }

    .ne-get-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .ne-features {
        display: contents;
    }

    /* The screen belongs to whichever row is open, not to row 01: each feature
       takes an even order slot and the screen slots into the odd position
       straight after the active one (JS keeps --ne-screen-order in step). */
    .ne-feature:nth-child(1) { order: 2; }
    .ne-feature:nth-child(2) { order: 4; }
    .ne-feature:nth-child(3) { order: 6; }
    .ne-feature:nth-child(4) { order: 8; }
    .ne-feature:nth-child(5) { order: 10; }
    .ne-feature:nth-child(6) { order: 12; }
    .ne-feature:nth-child(7) { order: 14; }
    .ne-feature:nth-child(8) { order: 16; }

    .ne-get-screen {
        order: var(--ne-screen-order, 3);
        justify-content: center;
        width: 100%;
        height: 650px;
        padding: 41px 0 0;
    }

    .ne-get-screen img {
        width: 300px;
        height: auto;
    }

    /* ---- recipe categories ---- */

    .ne-cats h2 {
        text-align: center;
        font-size: 34px;
        line-height: 1.15;
        margin-bottom: 40px;
    }

    .ne-cats-rail {
        gap: 8px;
        padding: 0 20px;
    }

    .ne-cat {
        width: 332px;
        height: 520px;
        gap: 32px;
    }

    .ne-cat-title {
        font-size: 22px;
    }

    .ne-cat-text {
        font-size: 14px;
        line-height: 1.5;
    }

    .ne-cats-next,
    .ne-cats-prev {
        display: none;
    }

    /* ---- FAQ ---- */

    .ne-faq {
        padding: 272px 0 346px;
    }
}