body { margin: 0; }
header, section { padding: var(--m); }

header { position: relative; min-height: calc(100vh - 5rem); min-height: calc(100svh - 5rem); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; overflow: hidden; }
header article { display: flex; flex-direction: column; align-items: center; }

header > .rainbow-backdrop {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: left top;
   pointer-events: none;
   z-index: 0;
}

header > article,
header > aside {
   position: relative;
   z-index: 1;
}

/* Login pill pinned to the top-right of the hero header */
.home-login-cta {
   position: absolute;
   top: var(--m);
   right: var(--m);
   z-index: 2;
   display: inline-flex;
   align-items: center;
   gap: 0.4em;
   padding: 0.5em 1.1em;
   border-radius: 9999px;
   background-color: var(--navigation-button-bg);
   border: 1px solid var(--navigation-button-border);
   box-shadow: var(--navigation-button-shadow);
   backdrop-filter: blur(5px);
   color: var(--text);
   text-decoration: none;
   font-weight: 600;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.home-login-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2); }

@media screen and (min-width: 800px) {
   header article { max-width: 640px; }
}

/* "OPEN THE APP" label + hand-drawn arrow, pinned to the top-left of the CTA button.
   The whole hint scales with its font-size (children use em): full at >=1000px,
   shrinking linearly to 0.3x at 320px. (transform: scale() can't take a fluid
   vw value, so we drive the size through font-size instead.) */
.open-app-hint {
   position: absolute;
   top: -1rem;
   left: 0;
   display: flex;
   align-items: flex-start;
   text-align: left;
   pointer-events: none;
   transform: translate(calc(-70% - (100vw - 1000px) / 100vw * 30%), -100%);
   font-size: clamp(4.8px, calc(4.8px + 11.2 * (100vw - 320px) / 680), 16px);
}
.open-app { text-transform: uppercase; color: var(--text-light); font-size: 1.05em; font-weight: 700; letter-spacing: 0.05em; }
.open-app-cta { text-decoration: none; color: inherit; display: flex; align-items: center; gap: 0.5em; width: max-content; border-radius: 0.3em; outline: 2px dashed transparent; outline-offset: 0; transition: outline-color 0.3s ease, outline-offset 0.3s ease; }
.open-app-cta img {  transition: transform 0.3s ease-in-out; }
/* .open-app-cta:hover img { transform: scale(1.1); } */
/* Dashed outline: hidden by default, appears and grows outward on hover */
.open-app-cta:hover { outline-color: #f34b2e; outline-offset: 0.25em; }

/* Playful hand-drawn arrow nudging the eye from the label down to the CTA */
.open-app-arrow {
   width: 3em;
   height: auto;
   margin-left: 0.5em;
   overflow: visible;
   color: #f34b2e;
}
/* Draw the shaft on (first ~0.9s), pop the arrowhead in, hold, then redraw every 20s.
   Draw is 0.9s of the 20s cycle = 4.5%; the head fades in just after at 4.5–6%. */
.open-app-arrow-shaft {
   stroke-dasharray: 1;
   stroke-dashoffset: 1;
   animation: open-app-arrow-draw 20s ease-out 0.3s infinite;
}
.open-app-arrow-head {
   opacity: 0;
   animation: open-app-arrow-tip 20s ease-out 0.3s infinite;
}
@keyframes open-app-arrow-draw {
   0%   { stroke-dashoffset: 1; }
   4.5% { stroke-dashoffset: 0; }
   100% { stroke-dashoffset: 0; }
}
@keyframes open-app-arrow-tip {
   0%, 4.5% { opacity: 0; }
   6%, 100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
   .open-app-arrow-shaft { animation: none; stroke-dashoffset: 0; }
   .open-app-arrow-head { animation: none; opacity: 1; }
}
header h1 { position: relative; font-size: 3em; margin: 2em 0 0.3em; display: flex; align-items: center; gap: 0.5em; color: var(--text); }
.app-icon { width: 1.5em; height: 1.5em; corner-shape: squirqle; border-radius: 0.5em; }
.nooch-slogan { font-size: 2em; letter-spacing: 0.03ch; color: var(--text-light); transition: transform 0.3s ease, opacity 0.3s ease; transform-origin: center; }
/* mid-shuffle state: shrink + fade out, then the text swaps and it eases back in */
.nooch-slogan.is-swapping { opacity: 0; transform: scale(0.85); }
@media (prefers-reduced-motion: reduce) { .nooch-slogan { transition: opacity 0.3s ease; } .nooch-slogan.is-swapping { transform: none; } }

/* Apply rainbow gradient fill and stamp effect only when the heading is hovered */
/* h1:hover ~ .nooch-slogan {
   transform: translateY(30%) rotate(-3deg) scale(1.1);
   filter: drop-shadow(0 1em 1.5em var(--text-light)) saturate(170%);
   background-image: url('/static/images/background/gradient-rainbow.svg');
   background-size: cover;
   background-position: center top;
   background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   letter-spacing: 0.2ch;
   color: transparent;
} */

.app-carousel {
   position: relative;
   display: grid;
   justify-content: center;
   padding-top: 5em;
   margin-bottom: 2em;
   /* overflow-x: visible;
   overflow-y: hidden; */
}
/* .app-carousel::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 0.1em;
   background: linear-gradient(to right, transparent 10%, black 20%, black 80%, transparent 90%);
   pointer-events: none;
   z-index: 10;
} */
app-view {
   grid-area: 1 / 1;
   display: block;
   font-size: 5vw;
   width: 10em;
   height: 10em;
   border-radius: 1em;
   padding: 1em;
   background-color: white;
   transform-origin: 50% 100%;
   box-shadow: 0 0 1em rgba(0,0,0,0.2);
   transition: transform 0.3s ease-in-out, z-index 0.3s ease-in-out;
}
@media screen and (min-width: 800px) {
   app-view { font-size: 3vw; }
}
app-view:nth-child(1) { transform: translate(-20%, 0%) rotate(-5deg); z-index: 3; }
app-view:nth-child(2) { transform: translate(0%, 0%) rotate(0deg); z-index: 2; }
app-view:nth-child(3) { transform: translate(+20%, 0%) rotate(+5deg); z-index: 1; }
app-view:nth-child(1).highlight { transform: translate(-20%, -15%) rotate(-5deg); z-index: 4; }
app-view:nth-child(2).highlight { transform: translate(0%, -15%) rotate(0deg); z-index: 4; }
app-view:nth-child(3).highlight { transform: translate(+20%, -15%) rotate(+5deg); z-index: 4; }
/* app-view:hover { transform: translate(0%, -30%) rotate(+5deg); z-index: 3; } */
.app-carousel-text p { opacity: 0.8; }
.app-carousel-text p.highlight { font-weight: bold; opacity: 1; }
app-view > * {
   font-size: 0.65em;
}
app-view img {
   width: 2em;
   height: auto;
}
.nooch-ingredient {
   display: flex; align-items: center; gap: 0.5em;
}


/* custom app view */
.nutrient-title strong { display: inline-block; padding: 0.1em 0.3em; border-radius: 0.3em; background-color: rgb(0 0 0 / 0.1); }
.nutrient-title + div img { transform: scale(1.5); }
.nutrient-title + div em { font-weight: bold; border-bottom: 0.15em solid rgb(0 0 0 / 0.1); }

app-view:has(.award) { padding: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; row-gap: 0.5em; }
.award { border-radius: 0.4em; font-size: 0.25em; padding: 0.6em; text-align: center; transition: transform 0.3s ease-in-out; transform: translate(0px, 0px) scale(1); }
app-view.highlight .award:nth-child(1) { transform: translate(-4em, -4em) scale(1.2) rotate(-2.5deg); }
app-view.highlight .award:nth-child(2) { transform: translate(+6em, 0em) scale(1.2) rotate(-2.5deg); }
app-view.highlight .award:nth-child(3) { transform: translate(-4em, +3em) scale(1.2) rotate(-2.5deg); }
.award > strong:first-child { display: block; opacity: 0.5; text-transform: uppercase; }
.award-new-ingredient { width: 20em; background: linear-gradient(150deg, rgb(255, 255, 204), rgb(205, 255, 205), rgb(199, 199, 255)); }
.award-30-plants { width: 25em; background: linear-gradient(160deg, rgb(255, 187, 187), rgb(255, 228, 178), rgb(255, 255, 189)); color: black; }
.award-tip { width: 25em; background: linear-gradient(150deg, rgb(169, 169, 255), rgb(224, 181, 255), rgb(255, 200, 255)); }
/* .award-30-plants { background: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet); color: white; } */
.award-tip > div { width: max-content; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); justify-items: center; align-items: center; }
.award-tip > div > img { width: 3em; height: auto; }

.waitlist-section {
   width: max-content;
   max-width: 100%;
   margin: 0 auto;
}
.waitlist-section { background-color: var(--bg-light); box-shadow: 0 0 0 100vmax var(--bg-light); clip-path: polygon(-100vmax 0%, +100vmax 0%, +100vmax 100%, -100vmax 100%); }

.waitlist-section p { margin: 5rem 0 3rem 0; opacity: 0.8; }

.waitlist-heading { font-size: clamp(2em, 6vw, 3em); text-align: center; width: 100%; margin: 0.6em 0; }
.waitlist-heading .rainbow-word { position: relative; display: inline-block; overflow: visible; margin-right: 0.35rem; }
.waitlist-heading .rainbow-word strong { position: relative; z-index: 1; font-size: 1.5em; }
.waitlist-heading .rainbow-word .rainbow-background {
   position: absolute;
   right: 0;
   top: 0;
   z-index: 0;
   pointer-events: none;
   overflow: visible;
   width: 120%;
   opacity: 0.5;
}


#waitlist-food-suggestions { display: none; }

.waitlist-form { margin-block: 3rem; }
.waitlist-labels-inputs { display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; width: 100%; }
.waitlist-labels-inputs > label { align-self: center; font-size: clamp(0.5em, 3vw, 1.1em); text-align: right; opacity: 0.8; }
.waitlist-food-field { position: relative; }

.waitlist-form input { font-family: inherit; font-size: 1em; width: 100%; position: relative; }

#waitlist-food {
   background-color: transparent;
   padding-right: 3rem;
}

#waitlist-food-hint {
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   pointer-events: none;
   color: var(--text-light);
   opacity: 0.5;
   font: inherit;
   padding: 0.5em 3rem 0.5em 0.75em;
   z-index: 1;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

#waitlist-food-image {
   position: absolute;
   right: 0.5rem;
   top: 50%;
   transform: translateY(-50%);
   width: 2rem;
   height: 2rem;
   object-fit: cover;
   border-radius: 9999px;
   pointer-events: none;
   z-index: 2;
   opacity: 0.85;
}


.join-button { margin: 2rem auto; }
.join-button { background-color: var(--accent); color: white; text-shadow: 1px 1px rgba(0,0,0,0.1); transition: background 0.3s ease-in-out; cursor: pointer; }
.join-button:hover { background-color: color-mix(in hsl, var(--accent), black 10%); }
@media (prefers-color-scheme: dark) {
   .join-button:hover { background-color: color-mix(in hsl, var(--accent), white 10%); }
}

/* .facts-section { background-color: color(srgb 0.8055 0.8666 0.9832); padding: var(--m); overflow: hidden; }
.facts-section h2 { position: relative; z-index: 1; }
.shuffle-facts { padding: 2em 0em 2em 4em; list-style: none; position: relative; }
.shuffle-facts::before { position: absolute; content: ''; top: 50%; left: 0; width: 15em; height: 15em; background: url(/static/images/icon/icon-630.png) no-repeat; background-size: contain; transform: translateY(-50%) rotate(-30deg); opacity: 0.1; }
.shuffle-facts li { position: relative; font-size: 2em; z-index: 1; } */

@media (prefers-color-scheme: dark) {
   app-view { background-color: var(--bg-light); color: var(--text); box-shadow: 0 0 1.2em rgba(0,0,0,0.6); }
   .app-carousel-text p { color: var(--text); opacity: 0.95; }
   .coming-soon { color: var(--text); }
   .nutrient-title strong { background-color: color-mix(in srgb, var(--text) 6%, transparent); }
   .award { color: var(--bg); }
}



.site-footer { padding: var(--m); background-color: var(--bg); color: var(--text); text-align: center; margin-top: var(--m); }
.site-footer .footer-nav { margin-bottom: 0.5em; display: flex; justify-content: center; gap: 1em; flex-wrap: wrap; }
.site-footer .footer-nav a { color: var(--text); text-decoration: none; font-size: 0.95em; }
.site-footer .footer-nav a:hover { text-decoration: underline; }

.site-footer .footer-socials { margin-bottom: 0.5em; }
.site-footer .footer-socials a { margin: 0 0.1em; color: var(--text); text-decoration: none; font-size: 0.95em; display: inline-flex; align-items: center; justify-content: center; }
.site-footer .footer-socials a:hover { opacity: 0.7; }

.social-icon { width: 1.2em; height: 1.2em; color: inherit; }

.site-footer-container { display: flex; flex-direction: row; justify-content: space-between; align-items: center; column-gap: 3em; row-gap: 1.5em; flex-wrap: wrap; }

/* Content sections hidden by default, shown when targeted via URL */
.content-section {
   display: none;
   background-color: var(--bg-light);
   box-shadow: 0 0 0 100vmax var(--bg-light);
   clip-path: polygon(-100vmax 0%, +100vmax 0%, +100vmax 100%, -100vmax 100%);
}

#terms h2, #privacy h2 {
   margin-bottom: 4rem;
}

.content-section:target {
   display: block;
}

.content-section h2 {
   font-size: clamp(1.5em, 5vw, 2.5em);
   margin-top: 0;
   color: var(--text);
}

.content-section h3 {
   font-size: 1.3em;
   color: var(--text);
   margin-top: 1.5em;
   margin-bottom: 0.5em;
}

.content-section p {
   line-height: 1.6;
   opacity: 0.9;
}
.content-section .privacy-updated {
   margin-top: -0.25em;
   font-size: 0.9em;
   color: var(--text-light);
}

.content-section ul {
   padding-left: 2em;
   line-height: 1.8;
}

.content-section li {
   margin-bottom: 0.5em;
}

.content-section a[href="#"] {
   display: inline-block;
   margin-top: 2em;
   color: var(--accent);
   text-decoration: none;
   border-bottom: 1px solid var(--accent);
   padding-bottom: 0.2em;
   transition: opacity 0.3s ease-in-out;
}

.content-section a[href="#"]:hover {
   opacity: 0.8;
}


.button-round { padding: var(--s) var(--m); border-radius: var(--m); border: none; background-color: var(--accent); color: white; font-size: 1.5rem; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: background 0.3s ease-in-out; }
.button-round:disabled { cursor: not-allowed; opacity: 0.5; }
.button-round:hover { background-color: color-mix(in hsl, var(--accent), black 10%); }
@media (prefers-color-scheme: dark) {
   .button-round:hover { background-color: color-mix(in hsl, var(--accent), white 10%); }
}


/* ---------- Section wave dividers ---------- */
/* Full-width SVG waves that sit flush against the dark features band, turning its
   straight top/bottom edges into smooth curves. The wave's coloured (dark) half
   butts against the section; its transparent half reveals the light body behind,
   so the transition works in both light and dark themes. */
.section-wave { position: relative; z-index: 1; width: 100%; line-height: 0; pointer-events: none; }
.section-wave svg { display: block; width: 100%; height: clamp(48px, 7vw, 90px); }
.section-wave-top { margin-bottom: -1px; }
.section-wave-bottom { margin-top: -1px; }
/* Plans (grey) → waitlist (light) — fill follows the theme so it matches the
   waitlist panel it lifts out of. */
.section-wave-waitlist { margin-bottom: -1px; }
.section-wave-waitlist svg { height: clamp(36px, 5vw, 64px); }
.section-wave-waitlist path { fill: var(--bg-light); }

/* ---------- Features section ---------- */
/* Full-bleed dark, rainbow-tinted backdrop. The section keeps its side padding;
   its direct children are re-centred to the content width so only the background
   spans edge to edge (same intent as the plans-section clip-path trick). */
.features-section {
   position: relative;
   background:
      /* radial-gradient(120% 90% at 15% 0%, rgba(243, 75, 46, 0.30), transparent 60%),
      radial-gradient(120% 90% at 85% 10%, rgba(106, 76, 147, 0.42), transparent 60%),
      radial-gradient(130% 100% at 50% 110%, rgba(138, 201, 38, 0.28), transparent 55%), */
      linear-gradient(180deg, #34274f 0%, #221c30 55%, #182a1f 100%);
   box-shadow: 0 0 0 100vmax #221c30;
   clip-path: polygon(-100vmax 0%, 100vmax 0%, 100vmax 100%, -100vmax 100%);
   margin: 0;
   color: #f3f0f7;
}
.features-section > * { max-width: var(--full-width, 1200px); margin-left: auto; margin-right: auto; }
.features-section .waitlist-heading { color: #ffffff; }
.features-layout { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; margin: 2rem auto 3rem; }
@media screen and (min-width: 800px) {
   .features-layout { grid-template-columns: 1.1fr 1fr; gap: 3rem; }
}

.feature-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.feature-item {
   width: 100%; text-align: left; display: flex; align-items: center; gap: 0.6em;
   padding: 0.7em 0.4em; border: none; border-radius: 0.8em;
   background: none; color: rgba(255, 255, 255, 0.62); font-size: clamp(1em, 2.4vw, 1.25em); font-weight: 600;
   cursor: pointer; opacity: 1;
   transition: color 0.25s ease, transform 0.15s ease, text-shadow 0.25s ease;
}
.feature-item::before { content: attr(data-emoji); font-size: 1.2em; line-height: 1; }
.feature-item:hover { color: rgba(255, 255, 255, 0.9); }
.feature-item.is-active {
   color: #ffffff; background: none; transform: translateX(4px);
   text-shadow: 0 0 18px rgba(255, 255, 255, 0.35);
}
.feature-soon { font-size: 0.62em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #ffffff; background: rgba(255, 255, 255, 0.18); padding: 0.2em 0.55em; border-radius: 100vmin; margin-left: 0.5em; }

/* "Try it" CTA under the feature grid */
.features-cta {
   display: inline-flex; align-items: center; gap: 0.5em;
   margin: 0.5rem auto 0; padding: 0.7em 1.4em;
   border-radius: 9999px; text-decoration: none; font-weight: 700; font-size: 1.1rem;
   color: #16121f; background: #ffffff;
   box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
   transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.features-cta { display: flex; width: max-content; }
.features-cta img { width: 1.6em; height: 1.6em; border-radius: 0.4em; }
.features-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45); }

.feature-media-wrap { position: sticky; top: 2rem; }
.feature-media {
   position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 30rem; margin: 0 auto;
   border-radius: 1.2em; overflow: hidden;
   background: linear-gradient(150deg, #e7e1e6, #cecee3);
   /* border: 1px solid rgba(255, 255, 255, 0.55); */
   box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}
.feature-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feature-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 1.25rem; }
.feature-media-poster { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem; text-align: center; padding: 1.5rem; }
.feature-media.has-media .feature-media-poster { display: none; }
.feature-media-emoji { font-size: clamp(4rem, 18vw, 8rem); line-height: 1; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.15)); }
.feature-media-label { font-size: clamp(1.1rem, 3.5vw, 1.6rem); font-weight: 700; color: var(--text); }
.feature-media-hint { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-light); opacity: 0.7; }
.feature-media.is-switching .feature-media-poster,
.feature-media.is-switching .feature-image { animation: feature-media-in 0.4s ease; }
@keyframes feature-media-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
   .feature-media.is-switching .feature-media-poster { animation: none; }
   .feature-item.is-active { transform: none; }
}


/* ---------- Plans / tiers section ---------- */
.plans-section { background-color: var(--bg); box-shadow: 0 0 0 100vmax var(--bg); clip-path: polygon(-100vmax 0%, +100vmax 0%, +100vmax 100%, -100vmax 100%); margin: 3rem 0; }
.plans-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; max-width: var(--full-width, 1200px); margin: 2rem auto 3rem; }
@media screen and (min-width: 800px) { .plans-grid { grid-template-columns: repeat(3, 1fr); align-items: stretch; } }

/* Flat, box-less tiers sitting directly on the grey section. */
.plan-card { position: relative; display: flex; flex-direction: column; padding: 1.6rem 1.4rem; border: none; border-radius: 1.2em; background: none; }
.plan-price { margin: 0.15em 0 0em; font-size: 1.6em; font-weight: 800; color: var(--accent); }
.plan-name { margin: 0 0 0.6em; font-size: 1.25em; color: var(--text); }
.plan-features { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-direction: column; gap: 0.5em; flex: 1; }
.plan-features li { position: relative; padding-left: 1.6em; color: var(--text); line-height: 1.4; }
.plan-features li::before { content: '✓'; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.plan-cta { display: block; text-align: center; padding: 0.8em 1.2em; border-radius: 100vmin; text-decoration: none; font-weight: 700; border: 1.5px solid var(--accent); color: var(--accent); transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease; }
.plan-cta:hover { transform: translateY(-2px); }
.plan-cta-primary { background: var(--accent); color: white; }
.plan-cta-primary:hover { background: color-mix(in hsl, var(--accent), black 10%); }