:root { --fn-bg: #f7f3e9; --fn-yellow: #ffd21f; --fn-ink: #11100e; --fn-muted: #68645a; --fn-line: #d2cbb9; }
.feenest-page { margin: 0; overflow-x: hidden; color: var(--fn-ink); background: var(--fn-bg); font-family: 'DM Sans', sans-serif; }
.fn-nav { position: relative; z-index: 5; display: flex; justify-content: space-between; align-items: center; padding: 24px 5vw; border-bottom: 1px solid var(--fn-line); font: 500 .72rem 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .08em; }.fn-brand { display: flex; align-items: center; gap: 10px; color: var(--fn-ink); text-decoration: none; }.fn-brand span { display: grid; place-items: center; width: 27px; height: 27px; background: var(--fn-ink); color: var(--fn-yellow); font-weight: 700; }.fn-nav nav { display: flex; align-items: center; gap: 27px; }.fn-nav nav a { color: var(--fn-ink); text-decoration: none; }.fn-nav-current { display: inline-flex; align-items: center; gap: 6px; }.fn-nav-current i { padding: 3px 5px; color: var(--fn-ink); background: var(--fn-yellow); font-size: .52rem; font-style: normal; }.fn-nav-cta { padding: 11px 14px; border: 1px solid var(--fn-ink); }.fn-nav-cta b { margin-left: 11px; font-size: 1rem; }
.fn-hero { display: grid; grid-template-columns: 1fr 1fr; min-height: 720px; padding: 8vw 7vw 7vw; gap: 5vw; align-items: center; background: var(--fn-yellow); }.fn-label, .fn-section-label { display: block; font: 500 .68rem 'DM Mono', monospace; letter-spacing: .1em; text-transform: uppercase; }.fn-hero h1 { margin: 34px 0 22px; font: 900 clamp(5rem, 14vw, 13rem)/.72 'Space Grotesk', sans-serif; letter-spacing: -.11em; }.fn-hero h1 span, .fn-hero h1 em { display: block; }.fn-hero h1 em { margin-left: .12em; font-style: normal; }.fn-hero-line { font-size: clamp(1.5rem, 2.6vw, 2.7rem); line-height: 1.05; letter-spacing: -.05em; }.fn-hero-line strong, .fn-hero em, .fn-problem h2 em, .fn-big-copy em, .fn-feature-intro h2 em, .fn-built-title em, .fn-release h2 em, .fn-final h2 em { font-style: italic; font-weight: 400; }.fn-status { display: inline-flex; gap: 25px; align-items: center; margin-top: 42px; padding: 12px 15px; border: 1px solid var(--fn-ink); font: 500 .7rem 'DM Mono', monospace; text-transform: uppercase; }.fn-status span { font-size: 1.1rem; }
.fn-hero-art { position: relative; min-height: 485px; }.fn-sticker { position: absolute; z-index: 3; top: 1%; right: 5%; display: grid; place-items: center; width: 115px; height: 115px; border: 2px solid var(--fn-ink); border-radius: 50%; background: #fff6d3; font: 700 .65rem/1.1 'DM Mono', monospace; text-align: center; transform: rotate(12deg); }.fn-window { position: absolute; border: 2px solid var(--fn-ink); box-shadow: 15px 18px 0 rgba(17,16,14,.14); }.fn-window-back { top: 13%; right: 5%; width: 72%; height: 58%; padding: 20px; background: #f0ead8; transform: rotate(7deg); }.fn-window-front { z-index: 2; bottom: 4%; left: 3%; width: 78%; min-height: 330px; padding: 22px; background: #fffdf5; transform: rotate(-4deg); }.fn-window-top { display: flex; justify-content: space-between; font: 500 .62rem 'DM Mono', monospace; letter-spacing: .08em; }.fn-window-title { margin-top: 55px; font: 700 clamp(1.5rem, 3vw, 2.8rem)/.96 'Space Grotesk', sans-serif; letter-spacing: -.07em; }.fn-window-title em { color: var(--fn-muted); font: italic 400 1em 'DM Sans', sans-serif; }.fn-stat-row { display: flex; align-items: center; gap: 18px; margin-top: 38px; padding-top: 15px; border-top: 1px solid var(--fn-line); }.fn-stat-row b { font-size: 3rem; }.fn-stat-row span { font: .62rem/1.2 'DM Mono', monospace; text-transform: uppercase; }.fn-stat-row strong { margin-left: auto; font-size: 1.5rem; }.fn-progress { display: flex; gap: 5px; margin-top: 22px; }.fn-progress i { height: 8px; flex: 1; background: var(--fn-yellow); }.fn-progress i:nth-child(4), .fn-progress i:nth-child(5) { opacity: .25; }.fn-concept { position: absolute; right: 20px; bottom: 13px; font: .54rem 'DM Mono', monospace; color: var(--fn-muted); }
.fn-marquee { overflow: hidden; border-bottom: 2px solid var(--fn-ink); background: var(--fn-ink); color: var(--fn-yellow); white-space: nowrap; }.fn-marquee div { padding: 16px 0; font: 700 1rem 'Space Grotesk', sans-serif; letter-spacing: .1em; animation: fn-slide 20s linear infinite; }.fn-marquee span { margin: 0 30px; color: #fff; }@keyframes fn-slide { to { transform: translateX(-25%); } }
.fn-problem, .fn-idea, .fn-features, .fn-built, .fn-release, .fn-final { padding: 10vw 8vw; }.fn-problem { display: grid; grid-template-columns: .5fr 1fr 1fr; gap: 5vw; align-items: start; }.fn-problem-copy h2, .fn-feature-intro h2, .fn-release h2, .fn-final h2 { margin: 0; font: 700 clamp(3rem, 7vw, 8rem)/.83 'Space Grotesk', sans-serif; letter-spacing: -.09em; }.fn-problem-copy p, .fn-body-copy { max-width: 36ch; margin-top: 32px; color: var(--fn-muted); font-size: 1rem; line-height: 1.65; }.fn-paper-stack { position: relative; min-height: 300px; }.fn-paper { position: absolute; width: 230px; padding: 22px; border: 2px solid var(--fn-ink); font: .63rem/1.4 'DM Mono', monospace; background: #fffdf5; box-shadow: 8px 10px 0 rgba(17,16,14,.1); }.fn-paper b { display: block; margin-top: 40px; font: 700 1.3rem 'Space Grotesk', sans-serif; }.fn-paper-one { top: 15px; left: 10%; transform: rotate(-9deg); }.fn-paper-two { top: 70px; left: 24%; background: var(--fn-yellow); transform: rotate(6deg); }.fn-paper-three { top: 125px; left: 39%; transform: rotate(-2deg); }.fn-idea { display: grid; grid-template-columns: .5fr 1fr; gap: 5vw; background: var(--fn-yellow); }.fn-big-copy, .fn-built-title { margin: 0; font: 700 clamp(3.5rem, 9vw, 10rem)/.84 'Space Grotesk', sans-serif; letter-spacing: -.1em; }.fn-idea .fn-body-copy { max-width: 42ch; }
.fn-features { background: #fffdf5; }.fn-feature-intro { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin: 45px 0 75px; }.fn-feature-intro h2 { max-width: 760px; }.fn-feature-intro .fn-label { padding-bottom: 8px; }.fn-feature-story { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; }.fn-feature { min-height: 355px; padding: 25px; border: 2px solid var(--fn-ink); background: var(--fn-bg); transition: transform .35s ease, background .35s ease; }.fn-feature:hover, .fn-feature:focus-within { transform: translateY(-8px) rotate(-1deg); background: var(--fn-yellow); }.fn-feature > span { font: .68rem 'DM Mono', monospace; }.fn-feature h3 { margin: 65px 0 8px; font: 700 2rem 'Space Grotesk', sans-serif; letter-spacing: -.06em; }.fn-feature p { max-width: 22ch; min-height: 45px; color: var(--fn-muted); font-size: .9rem; }.fn-mini-ui { display: grid; gap: 6px; margin-top: 23px; padding-top: 15px; border-top: 1px solid var(--fn-line); font: .58rem 'DM Mono', monospace; }.fn-mini-ui b { margin-bottom: 4px; font-size: .52rem; }.fn-mini-ui i { display: flex; justify-content: space-between; padding: 8px; border: 1px solid var(--fn-line); font-style: normal; }.fn-mini-ui strong { font-weight: 500; }.fn-disclaimer { margin-top: 25px; color: var(--fn-muted); font: .65rem 'DM Mono', monospace; }.fn-built { display: grid; grid-template-columns: .5fr 1fr .65fr; gap: 5vw; align-items: start; background: var(--fn-ink); color: #fffdf5; }.fn-built .fn-body-copy { color: #bbb7ab; }.fn-text-link { display: inline-flex; gap: 12px; margin-top: 25px; color: var(--fn-yellow); font: .72rem 'DM Mono', monospace; text-transform: uppercase; }.fn-built-mark { align-self: center; justify-self: end; font: 900 clamp(5rem, 12vw, 12rem)/.8 'Space Grotesk', sans-serif; letter-spacing: -.15em; }.fn-built-mark small { display: block; margin-top: 25px; font: .55rem 'DM Mono', monospace; letter-spacing: .05em; }.fn-release { text-align: center; background: var(--fn-yellow); }.fn-release h2 { margin: 45px 0 20px; }.fn-release p { color: var(--fn-muted); }.fn-release-rule { width: 100%; height: 2px; margin: 55px auto 28px; background: var(--fn-ink); }.fn-final { min-height: 540px; background: var(--fn-bg); }.fn-final h2 { margin: 35px 0 50px; }.fn-dark-button { display: inline-flex; justify-content: space-between; gap: 80px; padding: 16px 18px; color: #fffdf5; background: var(--fn-ink); font: .72rem 'DM Mono', monospace; text-transform: uppercase; text-decoration: none; }.fn-dark-button span { color: var(--fn-yellow); font-size: 1rem; }
@media (max-width: 850px) { .fn-nav { padding: 18px 5vw; }.fn-nav nav a:not(.fn-nav-cta):not(.fn-nav-current) { display: none; }.fn-nav nav { gap: 12px; }.fn-hero { grid-template-columns: 1fr; min-height: auto; padding: 16vw 7vw 12vw; }.fn-hero-art { min-height: 430px; margin-top: 20px; }.fn-problem, .fn-idea, .fn-built { grid-template-columns: 1fr; gap: 45px; }.fn-paper-stack { min-height: 330px; }.fn-feature-story { grid-template-columns: 1fr 1fr; }.fn-built-mark { justify-self: start; } }
@media (max-width: 560px) { .fn-nav { font-size: .58rem; }.fn-brand { max-width: 130px; }.fn-nav-cta { padding: 9px; }.fn-hero h1 { font-size: clamp(4.5rem, 24vw, 8rem); }.fn-hero-art { min-height: 360px; }.fn-window-front { min-height: 280px; }.fn-window-back { width: 74%; }.fn-window-title { margin-top: 35px; }.fn-sticker { width: 88px; height: 88px; font-size: .5rem; }.fn-problem, .fn-idea, .fn-features, .fn-built, .fn-release, .fn-final { padding: 18vw 7vw; }.fn-problem-copy h2, .fn-feature-intro h2, .fn-release h2, .fn-final h2 { font-size: clamp(3rem, 15vw, 5.5rem); }.fn-paper { width: 190px; }.fn-paper-one { left: 0; }.fn-paper-two { left: 16%; }.fn-paper-three { left: 30%; }.fn-feature-intro { display: block; margin-bottom: 45px; }.fn-feature-intro .fn-label { margin-top: 25px; }.fn-feature-story { grid-template-columns: 1fr; }.fn-feature { min-height: 310px; }.fn-feature h3 { margin-top: 45px; } }
@media (prefers-reduced-motion: reduce) { .fn-marquee div { animation: none; }.fn-feature { transition: none; } }
.fn-motion { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }.fn-motion.fn-visible { opacity: 1; transform: none; }.fn-paper.fn-motion:nth-child(2) { transition-delay: .12s; }.fn-paper.fn-motion:nth-child(3) { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) { .fn-motion { opacity: 1; transform: none; transition: none; } }