:root { --primary: #181713; --primary-foreground: #fbf5e7; --radius: .65rem; --background: #fbf5e7; --foreground: #181713; --card: #fffdf6; --card-foreground: #181713; --popover: #fffdf6; --popover-foreground: #181713; --secondary: #efe8d8; --secondary-foreground: #181713; --muted: #f1eadc; --muted-foreground: #746f64; --accent: #ffe45a; --accent-foreground: #181713; --destructive: #ce4e38; --destructive-foreground: #fff; --border: #ded5c3; --input: #ded5c3; --ring: #181713; --sidebar: #fffdf6; --sidebar-foreground: #181713; --sidebar-accent: #f1eadc; --sidebar-accent-foreground: #181713; --sidebar-border: #ded5c3; --sidebar-ring: #181713; --chart-1: #ffe45a; --chart-2: #c9f06b; --chart-3: #ff9b76; --chart-4: #b9a9ff; --chart-5: #181713; }
/* base (replaces the Tailwind @layer base from the template) */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fbf5e7;color:#181713;font-family:'DM Sans',sans-serif;}
button,a,input{font:inherit}
button:not(:disabled),a[href]{cursor:pointer}
::selection{background:#ffe45a;color:#181713}
[hidden]{display:none!important}
img,svg{display:block}
.ic{width:16px;height:16px;display:inline-block;vertical-align:middle;flex:0 0 auto}
/* minimal utility helpers used by the ported markup */
.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}
.justify-between{justify-content:space-between}.gap-3{gap:.75rem}.gap-5{gap:1.25rem}.gap-8{gap:2rem}
.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-8{padding-top:2rem;padding-bottom:2rem}
.hidden{display:none}
@media(min-width:768px){.md\:flex{display:flex}.md\:hidden{display:none}}
@media(min-width:640px){.sm\:flex-row{flex-direction:row}.sm\:items-center{align-items:center}}
.err{color:#ce4e38}

.container { width: 100%; margin-inline: auto; padding-inline: 1.25rem; }
@media (min-width: 640px) { .container { padding-inline: 2rem; } }
@media (min-width: 1024px) { .container { max-width: 1240px; padding-inline: 2.5rem; } }

/* Shared brand and navigation */
.site-header { position: relative; z-index: 10; border-bottom: 1px solid rgba(24,23,19,.1); background: rgba(251,245,231,.78); backdrop-filter: blur(14px); }
.brand-mark { display: inline-flex; align-items: center; gap: .65rem; color: #181713; text-decoration: none; }
.brand-mark > span:last-child { display: flex; flex-direction: column; line-height: .95; }
.brand-mark strong { font-family: 'Space Grotesk', sans-serif; font-size: 1.05rem; letter-spacing: -.05em; }
.brand-mark small { font-family: 'DM Mono', monospace; font-size: .52rem; letter-spacing: .12em; text-transform: uppercase; margin-top: .25rem; }
.brand-icon { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: #ffe45a; border: 1px solid #181713; transform: rotate(-12deg); font-family: 'Space Grotesk', sans-serif; font-size: 1.1rem; font-weight: 700; }
.brand-icon span { transform: rotate(12deg); }
.nav-link, .sign-in-link { display: inline-flex; align-items: center; gap: .38rem; font-size: .73rem; font-weight: 600; color: #696357; text-decoration: none; transition: color .18s ease, transform .18s ease; }
.nav-link:hover, .sign-in-link:hover { color: #181713; transform: translateY(-1px); }
.sign-in-link { background: transparent; border: 0; }
.nav-cta { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1rem; border: 1px solid #181713; border-radius: 999px; color: #181713; font-size: .72rem; font-weight: 700; text-decoration: none; transition: all .2s ease; }
.nav-cta:hover { background: #181713; color: #fffdf6; transform: translateY(-2px); }
.icon-button, .sidebar-close { border: 0; background: transparent; color: #181713; padding: .4rem; }
.mobile-menu { display: flex; flex-direction: column; gap: .2rem; padding: .5rem 1.25rem 1.2rem; border-top: 1px solid rgba(24,23,19,.08); }
.mobile-menu a, .mobile-menu button { display: flex; align-items: center; justify-content: space-between; border: 0; background: transparent; color: #181713; padding: .7rem 0; text-decoration: none; font-weight: 600; }

/* Public landing */
.hero-section { position: relative; background: #fbf5e7; }
.hero-grid { display: grid; min-height: 630px; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); align-items: center; gap: 2rem; padding-top: 4.25rem; padding-bottom: 5rem; }
.hero-copy { position: relative; z-index: 1; max-width: 580px; }
.eyebrow, .dashboard-eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-family: 'DM Mono', monospace; font-size: .62rem; letter-spacing: .13em; text-transform: uppercase; color: #6f695d; }
.eyebrow-dot { display: inline-block; width: .45rem; height: .45rem; border-radius: 50%; background: #80c43e; box-shadow: 0 0 0 4px rgba(128,196,62,.16); }
h1, h2, h3, p { margin: 0; }
.hero-copy h1 { margin-top: 1.4rem; font-family: 'Space Grotesk', sans-serif; font-size: clamp(3.7rem, 7.6vw, 7.25rem); line-height: .87; letter-spacing: -.085em; font-weight: 600; }
em { font-family: Georgia, serif; font-weight: 400; letter-spacing: -.08em; }
.hero-lede { max-width: 365px; margin-top: 1.65rem; font-size: .98rem; line-height: 1.65; color: #6f695d; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-top: 2rem; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; border: 1px solid transparent; padding: .78rem 1.15rem; border-radius: 999px; font-size: .75rem; font-weight: 700; text-decoration: none; transition: transform .16s cubic-bezier(.23,1,.32,1), background .18s ease, color .18s ease, box-shadow .18s ease; }
.button:active, .nav-cta:active { transform: scale(.97); }
.button-dark { background: #181713; color: #fbf5e7; box-shadow: 0 8px 22px rgba(24,23,19,.13); }
.button-dark:hover { background: #332f27; transform: translateY(-2px); box-shadow: 0 11px 26px rgba(24,23,19,.18); }
.button-yellow { background: #ffe45a; color: #181713; }
.button-yellow:hover { background: #ffec8b; transform: translateY(-2px); }
.text-action { display: inline-flex; align-items: center; gap: .55rem; border: 0; background: transparent; color: #181713; font-size: .72rem; font-weight: 700; }
.play-circle { display: grid; place-items: center; width: 1.65rem; height: 1.65rem; border: 1px solid #181713; border-radius: 50%; }
.hero-proof { display: flex; align-items: center; gap: .7rem; margin-top: 3.8rem; color: #8a8374; font-size: .62rem; line-height: 1.35; }
.hero-proof strong { color: #181713; }
.avatar-stack { display: flex; }
.avatar-stack span { display: grid; place-items: center; width: 1.65rem; height: 1.65rem; margin-left: -.35rem; border: 2px solid #fbf5e7; border-radius: 50%; font-size: .65rem; color: #181713; }
.avatar-stack span:first-child { margin-left: 0; background: #ff9b76; }.avatar-stack span:nth-child(2) { background: #b9a9ff; }.avatar-stack span:nth-child(3) { background: #c9f06b; }
.hero-art { position: relative; min-height: 560px; overflow: hidden; border-radius: 2px; background: #d6ef9f; background-image: radial-gradient(rgba(24,23,19,.09) .65px, transparent .65px); background-size: 10px 10px; }
.hero-art::before { content: ''; position: absolute; inset: 0; background: linear-gradient(125deg, transparent 34%, rgba(255,255,255,.28) 35%, transparent 37%); opacity: .7; }
.sun-disc { position: absolute; width: 390px; height: 390px; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); background: #ffe45a; box-shadow: 0 0 0 20px rgba(255,228,90,.16), 0 0 0 44px rgba(255,228,90,.12); }
.banana-shape { position: absolute; width: 285px; height: 145px; left: 50%; top: 53%; transform: translate(-50%, -50%) rotate(25deg); border: 22px solid #181713; border-top-color: transparent; border-left-color: transparent; border-radius: 0 0 90% 0; filter: drop-shadow(15px 17px 0 rgba(24,23,19,.09)); }
.banana-shape::before { content: ''; position: absolute; left: -3px; top: -17px; width: 262px; height: 113px; border: 18px solid #ffba24; border-top-color: transparent; border-left-color: transparent; border-radius: 0 0 85% 0; }
.banana-highlight { position: absolute; width: 180px; height: 16px; left: 25px; top: 31px; border-radius: 50%; background: rgba(255,243,156,.62); transform: rotate(-16deg); }
.banana-stem { position: absolute; top: -52px; left: -13px; width: 25px; height: 59px; border: 9px solid #181713; border-radius: 12px 5px 2px 2px; transform: rotate(-9deg); background: #80a23d; }
.banana-shadow { position: absolute; left: 50%; top: 62%; width: 360px; height: 44px; border-radius: 50%; transform: translateX(-50%) rotate(-8deg); background: rgba(61,83,25,.19); filter: blur(12px); }
.scribble { position: absolute; color: #181713; font-family: 'DM Mono', monospace; font-size: .6rem; letter-spacing: .08em; line-height: 1.35; }
.scribble-one { right: 1.8rem; top: 4rem; transform: rotate(7deg); }.art-caption { position: absolute; display: flex; justify-content: space-between; left: 1.8rem; right: 1.8rem; bottom: 1.8rem; font-family: 'DM Mono', monospace; font-size: .57rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(24,23,19,.68); }.orbit { position: absolute; border: 1px solid rgba(24,23,19,.32); border-radius: 50%; }.orbit-one { width: 520px; height: 210px; top: 32%; left: -15%; transform: rotate(-28deg); }.orbit-two { width: 430px; height: 160px; top: 38%; left: 10%; transform: rotate(-28deg); }
.marquee-wrap { overflow: hidden; border-top: 1px solid #181713; border-bottom: 1px solid #181713; background: #ffe45a; padding: .55rem 0; }.marquee-track { display: flex; align-items: center; width: max-content; gap: 2.4rem; animation: marquee 24s linear infinite; font-family: 'DM Mono', monospace; font-size: .64rem; letter-spacing: .14em; }.marquee-track b { font-size: .9rem; font-weight: 400; }
.section-pad { padding-top: 7.5rem; padding-bottom: 7.5rem; }.section-kicker { display: flex; align-items: center; gap: .8rem; color: #8b8476; font-family: 'DM Mono', monospace; font-size: .6rem; letter-spacing: .12em; }.kicker-line { width: 2.7rem; height: 1px; background: #bab1a0; }.story-heading, .nutrition-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: end; margin-top: 2.25rem; }.story-heading h2, .nutrition-heading h2, .stages-heading h2 { font-family: 'Space Grotesk', sans-serif; font-size: clamp(2.9rem, 5vw, 5.3rem); line-height: .9; letter-spacing: -.08em; font-weight: 600; }.story-heading p, .nutrition-heading p { max-width: 330px; padding-bottom: .25rem; font-size: .91rem; line-height: 1.7; color: #746f64; }
.story-grid { display: grid; grid-template-columns: 1.1fr 1fr .65fr; gap: 1.4rem; align-items: end; margin-top: 4.2rem; }.paper-card { min-height: 360px; padding: 1.5rem; }.dark-card { position: relative; overflow: hidden; background: #181713; color: #fbf5e7; }.dark-card::after { content: ''; position: absolute; width: 240px; height: 240px; right: -90px; bottom: -95px; border: 1px solid rgba(255,228,90,.5); border-radius: 50%; box-shadow: 0 0 0 28px rgba(255,228,90,.05), 0 0 0 58px rgba(255,228,90,.04); }.card-topline { display: flex; justify-content: space-between; color: #ffe45a; font-family: 'DM Mono', monospace; font-size: .58rem; letter-spacing: .12em; }.card-giant { margin-top: 3.25rem; font-family: 'Space Grotesk', sans-serif; font-size: 4.6rem; line-height: .8; letter-spacing: -.1em; color: #ffe45a; }.card-giant span { margin-left: .45rem; font-family: 'DM Mono', monospace; font-size: .64rem; letter-spacing: .1em; color: #a5a093; }.dark-card h3 { position: relative; z-index: 1; margin-top: 2rem; font-family: 'Space Grotesk', sans-serif; font-size: 2rem; line-height: .95; letter-spacing: -.07em; }.dark-card p { position: relative; z-index: 1; max-width: 240px; margin-top: .9rem; font-size: .75rem; line-height: 1.65; color: #a5a093; }.card-footer { position: absolute; z-index: 1; bottom: 1.5rem; display: flex; align-items: center; gap: .4rem; font-family: 'DM Mono', monospace; font-size: .57rem; letter-spacing: .08em; text-transform: uppercase; color: #fbf5e7; }.pull-quote-card { padding: 1rem .8rem 1.5rem; }.quote-mark { font-family: Georgia, serif; font-size: 5rem; line-height: .6; color: #ff9b76; }.pull-quote-card p { max-width: 320px; margin-top: 1.45rem; font-family: Georgia, serif; font-size: 2rem; line-height: 1.13; letter-spacing: -.05em; }.quote-byline { display: flex; align-items: center; gap: .55rem; margin-top: 2.2rem; font-family: 'DM Mono', monospace; font-size: .53rem; letter-spacing: .07em; color: #8a8374; }.byline-line { width: 2rem; height: 1px; background: #8a8374; }.scribble-note { align-self: center; max-width: 150px; padding-bottom: 3rem; transform: rotate(4deg); }.arrow-sketch { display: block; margin-bottom: .4rem; font-family: Georgia, serif; font-size: 3.5rem; line-height: .5; color: #ff9b76; }.scribble-note strong { font-family: 'DM Mono', monospace; font-size: .65rem; text-transform: uppercase; letter-spacing: .1em; }.scribble-note p { margin-top: .6rem; font-family: Georgia, serif; font-size: 1.15rem; line-height: 1.15; }
.nutrition-section { background: #181713; color: #fbf5e7; }.section-kicker.light { color: #aaa594; }.section-kicker.light .kicker-line { background: #6d685b; }.nutrition-heading h2 { color: #fbf5e7; }.nutrition-heading p { color: #aaa594; }.nutrition-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; margin-top: 3.5rem; }.nutrition-card { position: relative; min-height: 230px; padding: 1.2rem; color: #181713; transition: transform .22s ease; }.nutrition-card:hover { transform: translateY(-6px) rotate(-1deg); }.nutrition-index { display: block; font-family: 'DM Mono', monospace; font-size: .58rem; letter-spacing: .12em; }.nutrition-card strong { display: block; margin-top: 3.4rem; font-family: 'Space Grotesk', sans-serif; font-size: 3.4rem; line-height: .8; letter-spacing: -.1em; }.nutrition-card b { display: block; margin-top: .85rem; font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; }.nutrition-card small { display: block; margin-top: .35rem; font-size: .65rem; opacity: .68; }.card-arrow { position: absolute; right: 1rem; bottom: 1rem; display: grid; place-items: center; width: 1.65rem; height: 1.65rem; border: 1px solid rgba(24,23,19,.4); border-radius: 50%; }.nutrition-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 1.1rem; font-family: 'DM Mono', monospace; font-size: .59rem; letter-spacing: .06em; color: #aaa594; }.nutrition-foot span { display: flex; gap: .4rem; align-items: center; }.nutrition-foot a { display: flex; align-items: center; gap: .35rem; color: #ffe45a; text-decoration: none; }
.stages-heading { display: flex; justify-content: space-between; align-items: end; margin-top: 2.25rem; }.round-arrow { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; margin-bottom: .45rem; border: 1px solid #181713; border-radius: 50%; color: #181713; transition: transform .2s ease, background .2s ease; }.round-arrow:hover { background: #ffe45a; transform: rotate(45deg); }.stages-list { margin-top: 4rem; border-top: 1px solid #cfc6b3; }.stage-row { display: grid; grid-template-columns: .25fr 1fr 1.8fr .2fr; gap: 1rem; align-items: center; padding: 1.45rem 0; border-bottom: 1px solid #cfc6b3; transition: padding .2s ease, background .2s ease; }.stage-row:hover { padding-left: .75rem; padding-right: .75rem; background: rgba(255,228,90,.23); }.stage-number { font-family: 'DM Mono', monospace; font-size: .65rem; color: #8c8678; }.stage-row h3 { font-family: 'Space Grotesk', sans-serif; font-size: 1.6rem; letter-spacing: -.06em; }.stage-row p { font-size: .84rem; color: #746f64; }.stage-chevron { justify-self: end; color: #8c8678; }.final-banner { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-top: 7rem; padding: 2.5rem; background: #b9a9ff; }.final-banner .eyebrow { color: #504567; }.final-banner .eyebrow-dot { background: #514671; box-shadow: 0 0 0 4px rgba(81,70,113,.15); }.final-banner h3 { margin-top: 1rem; font-family: 'Space Grotesk', sans-serif; font-size: clamp(2.1rem, 4vw, 3.8rem); line-height: .9; letter-spacing: -.08em; }
.site-footer { border-top: 1px solid #ded5c3; background: #f4eddf; }.site-footer p, .footer-links { font-family: 'DM Mono', monospace; font-size: .57rem; color: #8a8374; letter-spacing: .05em; }.footer-links { display: flex; gap: 1.4rem; }.footer-links a { color: #6f695d; text-decoration: none; }.footer-links a:hover { color: #181713; }.footer-brand .brand-icon { width: 1.65rem; height: 1.65rem; font-size: .9rem; }
/* Sign-in modal */
.modal-backdrop { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 1rem; background: rgba(24,23,19,.48); backdrop-filter: blur(8px); animation: fade-in .18s ease-out; }.signin-modal { position: relative; width: min(100%, 430px); padding: 2.4rem; background: #fffdf6; box-shadow: 0 24px 80px rgba(24,23,19,.25); animation: pop-in .24s cubic-bezier(.23,1,.32,1); }.modal-close { position: absolute; top: 1rem; right: 1rem; display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid #ded5c3; border-radius: 50%; background: transparent; color: #746f64; }.modal-symbol { display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: 2rem; border-radius: 50%; background: #ffe45a; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.4rem; transform: rotate(-12deg); }.signin-modal h2 { margin-top: 1rem; font-family: 'Space Grotesk', sans-serif; font-size: 2.55rem; line-height: .95; letter-spacing: -.08em; }.signin-modal > p { margin-top: 1rem; color: #746f64; font-size: .84rem; line-height: 1.55; }.signin-modal form { margin-top: 1.7rem; }.signin-modal label { display: block; margin-bottom: .45rem; font-family: 'DM Mono', monospace; font-size: .59rem; letter-spacing: .1em; text-transform: uppercase; }.signin-modal input { display: block; width: 100%; border: 1px solid #cfc6b3; outline: none; background: #fbf5e7; padding: .8rem .85rem; font-size: .82rem; transition: border .15s ease, box-shadow .15s ease; }.signin-modal input:focus { border-color: #181713; box-shadow: 3px 3px 0 #ffe45a; }.full-width { width: 100%; margin-top: .85rem; }.modal-note { display: flex; align-items: center; justify-content: center; gap: .35rem; margin-top: 1.25rem; font-size: .62rem; color: #8a8374; }
/* Dashboard */
.dashboard-shell { min-height: 100vh; display: flex; background: #f5f7ef; color: #151a17; }.dashboard-sidebar { position: fixed; z-index: 20; display: flex; flex-direction: column; width: 244px; height: 100vh; padding: 1.65rem 1rem; border-right: 1px solid #dce1d4; background: #f8fbf3; }.sidebar-top { display: flex; align-items: center; justify-content: space-between; padding: 0 .65rem; }.dashboard-brand .brand-icon { background: #c9f06b; border-color: #151a17; }.workspace-label { margin: 3.6rem .7rem 1rem; font-family: 'DM Mono', monospace; font-size: .56rem; letter-spacing: .13em; color: #8d9786; }.dashboard-nav { display: flex; flex-direction: column; gap: .23rem; }.dashboard-nav-item { position: relative; display: flex; align-items: center; gap: .75rem; width: 100%; padding: .72rem .72rem; border: 0; border-radius: .35rem; background: transparent; color: #758071; font-size: .75rem; text-align: left; transition: background .16s ease, color .16s ease, transform .16s ease; }.dashboard-nav-item:hover { background: #edf1e7; color: #151a17; transform: translateX(2px); }.dashboard-nav-item.active { background: #e6eddb; color: #151a17; font-weight: 700; }.nav-dot { width: .38rem; height: .38rem; margin-left: auto; border-radius: 50%; background: #79bd39; }.sidebar-bottom { margin-top: auto; }.sidebar-profile { display: flex; align-items: center; gap: .65rem; margin-top: 1.2rem; padding: .85rem .55rem 0; border-top: 1px solid #dce1d4; }.profile-avatar, .dashboard-header-avatar { display: grid; place-items: center; border-radius: 50%; background: #ffb68f; color: #151a17; font-family: 'Space Grotesk', sans-serif; font-weight: 700; }.profile-avatar { width: 2rem; height: 2rem; font-size: .74rem; }.sidebar-profile > div:nth-child(2) { display: flex; flex: 1; flex-direction: column; min-width: 0; }.sidebar-profile strong { font-size: .7rem; }.sidebar-profile small { margin-top: .16rem; overflow: hidden; color: #8d9786; font-size: .58rem; text-overflow: ellipsis; white-space: nowrap; }.sidebar-close { display: none; }.dashboard-main { flex: 1; min-width: 0; margin-left: 244px; }.dashboard-header { display: flex; align-items: center; justify-content: space-between; padding: 1.7rem clamp(1.2rem, 4vw, 4.1rem); border-bottom: 1px solid #e2e6dc; background: rgba(248,251,243,.7); backdrop-filter: blur(10px); }.dashboard-header-left { display: flex; align-items: center; gap: .85rem; }.dashboard-breadcrumb { font-family: 'DM Mono', monospace; font-size: .56rem; letter-spacing: .12em; color: #8d9786; }.dashboard-header h1 { margin-top: .22rem; font-family: 'Space Grotesk', sans-serif; font-size: 1.25rem; letter-spacing: -.06em; }.dashboard-header-actions { display: flex; align-items: center; gap: 1.15rem; }.round-notification { position: relative; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border: 1px solid #dce1d4; border-radius: 50%; background: #f8fbf3; color: #6f7b6b; }.round-notification span { position: absolute; top: .34rem; right: .36rem; width: .34rem; height: .34rem; border: 2px solid #f8fbf3; border-radius: 50%; background: #ff7f63; }.dashboard-header-avatar { width: 2.25rem; height: 2.25rem; font-size: .78rem; }.mobile-menu-trigger { display: none; border: 0; background: transparent; color: #151a17; }.dashboard-content { max-width: 1260px; margin: 0 auto; padding: 3.1rem clamp(1.2rem, 4vw, 4.1rem) 2.1rem; }.welcome-row { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; }.status-pulse { display: inline-block; width: .42rem; height: .42rem; border-radius: 50%; background: #6dbe32; box-shadow: 0 0 0 4px rgba(109,190,50,.13); }.dashboard-eyebrow { color: #8d9786; }.welcome-row h2 { margin-top: .8rem; font-family: 'Space Grotesk', sans-serif; font-size: clamp(1.9rem, 3.2vw, 3.1rem); line-height: .95; letter-spacing: -.08em; }.welcome-row h2 span { color: #80bc39; font-size: .7em; }.welcome-row p { margin-top: .8rem; font-size: .79rem; color: #7e8979; }.outline-action, .icon-text-button, .see-all { display: inline-flex; align-items: center; gap: .5rem; border: 1px solid #cfd7c8; border-radius: 999px; background: transparent; padding: .72rem .95rem; color: #31402e; font-size: .69rem; font-weight: 700; transition: background .15s ease, transform .15s ease; }.outline-action:hover, .see-all:hover { background: #eaf0e2; transform: translateY(-2px); }.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .85rem; margin-top: 2.5rem; }.stat-card { position: relative; min-height: 180px; padding: 1.35rem; border: 1px solid #e0e6db; background: #fbfdf8; }.stat-card-dark { border-color: #151a17; background: #151a17; color: #f5f7ef; }.stat-card-yellow { border-color: #f0d552; background: #ffe869; }.stat-card-label { font-family: 'DM Mono', monospace; font-size: .56rem; letter-spacing: .12em; opacity: .68; }.stat-card strong { display: block; margin-top: 1.3rem; font-family: 'Space Grotesk', sans-serif; font-size: 3.25rem; line-height: .8; letter-spacing: -.1em; }.stat-card strong small, .stat-card strong span { margin-left: .3rem; font-family: 'DM Mono', monospace; font-size: .63rem; letter-spacing: .04em; }.stat-card p { position: absolute; bottom: 1.35rem; left: 1.35rem; font-size: .62rem; color: #879282; }.stat-card-dark p { color: #aeb8a6; }.up-badge { display: inline-flex; align-items: center; gap: .2rem; margin-right: .25rem; color: #99d653; font-family: 'DM Mono', monospace; }.stat-sparkline { position: absolute; right: 1.3rem; bottom: 1.35rem; display: flex; align-items: end; gap: 3px; height: 38px; }.stat-sparkline span { width: 4px; background: #99d653; opacity: .55; }.stat-sparkline span:nth-child(1) { height: 12%; }.stat-sparkline span:nth-child(2) { height: 23%; }.stat-sparkline span:nth-child(3) { height: 19%; }.stat-sparkline span:nth-child(4) { height: 42%; }.stat-sparkline span:nth-child(5) { height: 33%; }.stat-sparkline span:nth-child(6) { height: 55%; }.stat-sparkline span:nth-child(7) { height: 47%; }.stat-sparkline span:nth-child(8) { height: 71%; }.stat-sparkline span:nth-child(9) { height: 63%; }.stat-sparkline span:nth-child(10) { height: 77%; }.stat-sparkline span:nth-child(11) { height: 68%; }.stat-sparkline span:nth-child(12) { height: 91%; }.stat-sparkline span:nth-child(13) { height: 82%; }.stat-sparkline span:nth-child(14) { height: 96%; }.stat-sparkline span:nth-child(15) { height: 100%; opacity: 1; }.progress-track { height: .42rem; margin-top: 1.4rem; overflow: hidden; border-radius: 999px; background: #e3e9dd; }.progress-track span { display: block; height: 100%; border-radius: inherit; background: #87c63e; }.stat-card:not(.stat-card-dark):not(.stat-card-yellow) p { color: #879282; }.renewal-icon { position: absolute; right: 1.3rem; bottom: 1.3rem; display: grid; place-items: center; width: 2.35rem; height: 2.35rem; border: 1px solid rgba(21,26,23,.22); border-radius: 50%; }.dashboard-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: .85rem; margin-top: .85rem; }.plan-card, .access-card { min-height: 285px; padding: 1.45rem; border: 1px solid #e0e6db; background: #fbfdf8; }.plan-card-head, .access-card-head { display: flex; align-items: start; justify-content: space-between; }.plan-card h3, .access-card h3 { margin-top: .65rem; font-family: 'Space Grotesk', sans-serif; font-size: 1.35rem; letter-spacing: -.06em; }.active-pill { display: inline-flex; align-items: center; gap: .25rem; margin-left: .45rem; padding: .27rem .48rem; border-radius: 999px; background: #e4f4cf; color: #4f8a20; font-family: 'DM Mono', monospace; font-size: .5rem; letter-spacing: .05em; text-transform: uppercase; vertical-align: middle; }.more-button { border: 0; background: transparent; color: #899485; }.plan-details { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2.25rem; padding-top: 1rem; border-top: 1px solid #e3e9dd; }.plan-details span { display: block; font-family: 'DM Mono', monospace; font-size: .52rem; letter-spacing: .11em; color: #8d9786; }.plan-details strong { display: block; margin-top: .38rem; font-size: .69rem; font-weight: 600; }.plan-actions { display: flex; align-items: center; gap: 1rem; margin-top: 2rem; }.plan-actions .button { padding: .66rem .9rem; font-size: .67rem; }.icon-text-button { border: 0; padding-inline: 0; color: #758071; }.mini-icon { display: grid; place-items: center; width: 2rem; height: 2rem; margin-bottom: .9rem; border-radius: .45rem; background: #d9f7a9; color: #4d762e; }.access-card { background: #dcefc2; border-color: #cbe2ab; }.access-card p { max-width: 330px; margin-top: .75rem; font-size: .72rem; line-height: 1.55; color: #627459; }.access-code { display: flex; align-items: center; justify-content: space-between; margin-top: 1.45rem; padding: .7rem .75rem; border: 1px dashed #a9c083; background: rgba(255,255,255,.35); }.access-code code { font-family: 'DM Mono', monospace; font-size: .64rem; color: #456136; }.access-code button { display: grid; place-items: center; border: 0; background: transparent; color: #587347; }.access-foot { display: flex; align-items: center; justify-content: space-between; margin-top: .8rem; font-size: .6rem; color: #59704b; }.access-foot > span { display: flex; align-items: center; gap: .34rem; }.green-dot { width: .38rem; height: .38rem; border-radius: 50%; background: #65ad32; }.access-foot button { display: inline-flex; align-items: center; gap: .25rem; border: 0; background: transparent; color: #44603a; font-size: .61rem; }.activity-section { margin-top: 3rem; }.section-title-row { display: flex; align-items: end; justify-content: space-between; }.section-title-row h3 { margin-top: .4rem; font-family: 'Space Grotesk', sans-serif; font-size: 1.5rem; letter-spacing: -.07em; }.see-all { border: 0; padding: 0; color: #587347; }.activity-table { margin-top: 1.1rem; border-top: 1px solid #dce1d4; }.activity-row { display: flex; align-items: center; gap: .85rem; padding: .8rem 0; border-bottom: 1px solid #dce1d4; }.activity-icon { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: .5rem; }.activity-icon.green { background: #def2c5; color: #64923a; }.activity-icon.yellow { background: #fff0a7; color: #a28116; }.activity-icon.purple { background: #e4ddff; color: #7661ba; }.activity-title { display: flex; flex: 1; flex-direction: column; gap: .28rem; }.activity-title strong { font-size: .72rem; font-weight: 600; }.activity-title span, .activity-time { color: #929b8d; font-size: .62rem; }.activity-arrow { display: grid; place-items: center; border: 0; background: transparent; color: #9ba49a; }.dashboard-footnote { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; margin-top: 2.25rem; color: #96a08f; font-family: 'DM Mono', monospace; font-size: .56rem; }.dashboard-footnote button { border: 0; background: transparent; color: #668750; font: inherit; }.logout-button { display: inline-flex; align-items: center; gap: .3rem; margin-left: auto; color: #899485 !important; }.sidebar-overlay { display: none; }
/* Motion and responsive */
.reveal-up { animation: reveal-up .65s cubic-bezier(.23,1,.32,1) both; }.delay-1 { animation-delay: .1s; } @keyframes reveal-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes marquee { to { transform: translateX(-33.333%); } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes pop-in { from { opacity: 0; transform: scale(.96) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; min-height: auto; padding-top: 3.5rem; }.hero-copy { max-width: 660px; }.hero-art { min-height: 480px; margin-top: 1rem; }.story-grid { grid-template-columns: 1fr 1fr; }.scribble-note { grid-column: 2; margin-left: auto; }.nutrition-grid { grid-template-columns: repeat(2, 1fr); }.dashboard-sidebar { width: 225px; }.dashboard-main { margin-left: 225px; } }
@media (max-width: 700px) { .hero-grid { padding-bottom: 3.3rem; }.hero-copy h1 { font-size: clamp(3.6rem, 18vw, 6rem); }.hero-art { min-height: 390px; }.sun-disc { width: 270px; height: 270px; }.banana-shape { transform: translate(-50%, -50%) rotate(25deg) scale(.78); }.section-pad { padding-top: 5rem; padding-bottom: 5rem; }.story-heading, .nutrition-heading { grid-template-columns: 1fr; gap: 1.2rem; }.story-grid { grid-template-columns: 1fr; gap: 2.2rem; margin-top: 2.8rem; }.scribble-note { grid-column: auto; margin-left: 2rem; }.paper-card { min-height: 340px; }.nutrition-grid { gap: .6rem; }.nutrition-card { min-height: 200px; padding: .9rem; }.nutrition-card strong { font-size: 2.65rem; }.nutrition-foot { align-items: start; flex-direction: column; gap: 1rem; }.stage-row { grid-template-columns: .25fr 1fr .2fr; }.stage-row p { grid-column: 2 / 4; grid-row: 2; }.final-banner { align-items: start; flex-direction: column; margin-top: 5rem; padding: 1.6rem; }.site-footer .container { align-items: start; }.footer-links { gap: 1rem; }.signin-modal { padding: 2rem 1.5rem; }.dashboard-sidebar { left: -250px; width: 244px; transition: left .24s cubic-bezier(.23,1,.32,1); box-shadow: 20px 0 40px rgba(21,26,23,.08); }.dashboard-sidebar.is-open { left: 0; }.dashboard-sidebar.is-open + .sidebar-overlay { display: block; position: fixed; z-index: 19; inset: 0; border: 0; background: rgba(21,26,23,.25); }.sidebar-close { display: block; }.dashboard-main { margin-left: 0; }.mobile-menu-trigger { display: grid; place-items: center; }.dashboard-header { padding: 1.2rem 1.25rem; }.dashboard-content { padding: 2.2rem 1.25rem; }.welcome-row { align-items: start; flex-direction: column; }.outline-action { margin-top: .2rem; }.stat-grid, .dashboard-grid { grid-template-columns: 1fr; }.stat-card { min-height: 155px; }.plan-card, .access-card { min-height: auto; }.plan-details { gap: .55rem; }.plan-actions { align-items: start; flex-direction: column; gap: .8rem; }.logout-button { margin-left: 0; }.dashboard-footnote { line-height: 1.6; } }

/* passkey manager + prompt */
.passkey-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:.7rem 0;border-bottom:1px solid #e0e6db}
.passkey-main b{display:block;font-size:.8rem;color:#181713}
.passkey-main span{font-size:.62rem;color:#8d9786}
.passkey-empty{color:#8d9786;font-size:.8rem;padding:.5rem 0}
.btn{display:inline-flex;align-items:center;gap:.4rem;border:1px solid #ded5c3;background:#fff;border-radius:999px;padding:.5rem .8rem;font-size:.7rem;font-weight:600;color:#181713;cursor:pointer}
.btn:hover{background:#f4eddf}.btn-ghost{background:transparent}.btn-sm{padding:.35rem .6rem;font-size:.62rem}
.is-error{color:#ce4e38!important}
.passkey-prompt{border:0;border-radius:8px;padding:2.2rem;width:min(92vw,430px);background:#fffdf6;box-shadow:0 24px 80px rgba(24,23,19,.3)}
.passkey-prompt::backdrop{background:rgba(24,23,19,.5);backdrop-filter:blur(6px)}

/* ---- language switch + RTL -------------------------------------------------
   The switcher is a <details>, so it opens with no JavaScript. RTL rules only
   flip what is direction-dependent; colours, spacing and type are untouched. */
.lang-switch { position: relative; }
.lang-switch > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem;
  padding: .38rem .6rem; border: 1px solid var(--border, #ded5c3); border-radius: 999px;
  font-size: .78rem; background: var(--card, #fffdf6); user-select: none;
}
.lang-switch > summary::-webkit-details-marker { display: none; }
.lang-switch > summary:hover { border-color: var(--foreground, #181713); }
.lang-flag { font-size: .95rem; line-height: 1; }
.lang-code { font-family: 'DM Mono', monospace; letter-spacing: .04em; }
.lang-caret { font-size: .6rem; opacity: .6; }
.lang-menu {
  position: absolute; z-index: 60; top: calc(100% + .4rem); inset-inline-end: 0;
  min-width: 11rem; margin: 0; padding: .3rem; list-style: none;
  background: var(--card, #fffdf6); border: 1px solid var(--border, #ded5c3);
  border-radius: .7rem; box-shadow: 0 10px 30px rgba(24,23,19,.14);
  max-height: 60vh; overflow-y: auto;
}
.lang-menu a {
  display: flex; align-items: center; gap: .55rem; padding: .5rem .6rem;
  border-radius: .45rem; text-decoration: none; color: inherit; font-size: .85rem;
}
.lang-menu a:hover { background: var(--secondary, #efe8d8); }
.lang-menu a.is-current { background: var(--accent, #ffe45a); font-weight: 600; }

/* Right-to-left: Persian and Arabic. */
[dir="rtl"] .dashboard-sidebar { border-right: 0; border-left: 1px solid var(--border, #ded5c3); }
[dir="rtl"] .dashboard-footnote form { margin-left: 0 !important; margin-right: auto !important; }
[dir="rtl"] .card-arrow, [dir="rtl"] .stage-chevron, [dir="rtl"] .round-arrow { transform: scaleX(-1); }
[dir="rtl"] .access-code code { direction: ltr; text-align: left; unicode-bidi: embed; }
[dir="rtl"] .lang-menu { inset-inline-end: 0; }
/* Latin-only values — links, prices, ids — must not reorder inside RTL text. */
[dir="rtl"] code, [dir="rtl"] .stat-card strong, [dir="rtl"] .nutrition-card strong { direction: ltr; unicode-bidi: embed; }

/* ---- mobile hardening (2026-09-23) -----------------------------------------
   The dominant phone bug: a subscription link (a long unbroken https:// string)
   inside .access-code had no wrap, so it forced the whole page to scroll
   sideways and everything looked broken. Wrap long strings inside their card
   and backstop the page against any other horizontal overflow. */
html, body { max-width: 100%; overflow-x: hidden; }
.access-code { flex-wrap: wrap; gap: .45rem; }
.access-code code { flex: 1 1 100%; min-width: 0; overflow-wrap: anywhere; word-break: break-all; }
.dashboard-main, .dashboard-content, .access-card, .stat-card, .plan-card { min-width: 0; }

@media (max-width: 480px) {
  .dashboard-header, .dashboard-content { padding-left: 1rem; padding-right: 1rem; }
  .dashboard-content { padding-top: 2rem; }
  .stat-card { min-height: 128px; padding: 1.1rem; }
  .stat-card strong { font-size: 2.3rem; }
  .plan-card, .access-card { padding: 1.15rem; min-height: auto; }
  .access-card p { max-width: none; }
  .section-title-row { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .section-title-row h3 { font-size: 1.3rem; }
  .welcome-row h2 { font-size: clamp(1.7rem, 8vw, 2.4rem); }
  /* comfortable tap targets — 44px is the accessibility floor */
  .dashboard-nav-item { padding: .85rem .72rem; }
  .button, .nav-cta, .button-dark, .button-yellow { min-height: 44px; }
  .access-code button, .access-foot button, .more-button { min-width: 40px; min-height: 40px; }
  /* the language menu must sit inside the viewport, not spill off the right edge */
  .lang-menu { position: fixed; left: 1rem; right: 1rem; top: auto; min-width: 0; max-height: 70vh; }
}

/* very narrow: drop the language code text, keep flag + caret */
@media (max-width: 380px) {
  .lang-switch > summary .lang-code { display: none; }
  .welcome-row h2 { font-size: clamp(1.5rem, 9vw, 2rem); }
}