:root {
  --green: #155c48;
  --green-dark: #0e4939;
  --ink: #14201a;
  --cream: #f8f3e9;
  --paper: #fffdf8;
  --pink: #f2bfd0;
  --coral: #f28368;
  --lime: #d8e77d;
  --line: rgba(21, 92, 72, 0.22);
  --shadow: 12px 14px 0 rgba(219, 151, 178, 0.62);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
img { display: block; max-width: 100%; }
.skip-link { position: fixed; z-index: 100; top: 8px; left: 8px; padding: 10px 14px; background: white; transform: translateY(-150%); }
.skip-link:focus { transform: none; }
.prototype-note { min-height: 38px; padding: 7px clamp(18px, 5vw, 72px); background: var(--pink); color: #652b42; display: flex; justify-content: center; gap: 12px; align-items: center; font-size: 0.82rem; text-align: center; }
.prototype-note span { background: #fff8; border-radius: 999px; padding: 3px 9px; font-weight: 800; }
.prototype-note p { margin: 0; }
.site-header { position: sticky; top: 0; z-index: 20; min-height: 76px; padding: 14px clamp(20px, 5vw, 76px); display: flex; align-items: center; justify-content: space-between; gap: 24px; background: rgba(248, 243, 233, 0.94); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); }
.header-actions { display: flex; align-items: center; gap: 16px; }
.brand-logo { position: relative; width: 184px; height: 47px; display: block; flex: 0 0 auto; overflow: hidden; text-decoration: none; }
.brand-logo img { position: absolute; width: 246px; max-width: none; height: auto; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.brand-logo.inverse { border-radius: 10px; background: var(--cream); box-shadow: 0 0 0 5px var(--cream); }
nav { display: flex; gap: clamp(18px, 3vw, 40px); }
nav a { color: var(--green-dark); font-size: 0.92rem; font-weight: 750; text-decoration: none; }
nav a:hover, nav a:focus-visible { text-decoration: underline; text-underline-offset: 5px; }
.pill { display: inline-flex; min-height: 48px; padding: 12px 21px; align-items: center; justify-content: center; gap: 8px; border: 2px solid var(--green); border-radius: 999px; font-weight: 850; text-decoration: none; cursor: pointer; transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease; }
.pill:hover, .pill:focus-visible { transform: translateY(-2px); box-shadow: 0 5px 0 rgba(13, 64, 50, 0.2); }
.pill-dark { background: var(--green); color: white; }
.pill-cream { background: var(--cream); color: var(--green); }
.pill.full { width: 100%; }
.eyebrow { margin: 0 0 12px; color: var(--coral); font-size: 0.74rem; font-weight: 900; letter-spacing: 0.13em; text-transform: uppercase; }

.hero { min-height: 690px; padding: clamp(64px, 8vw, 112px) clamp(24px, 7vw, 104px); display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(420px, 0.98fr); align-items: center; gap: clamp(46px, 7vw, 110px); overflow: hidden; background: var(--green); color: white; }
.hero-copy { position: relative; z-index: 2; max-width: 680px; }
.hero h1 { margin: 0; font-family: Georgia, serif; font-size: clamp(4rem, 7vw, 7.5rem); line-height: 0.87; letter-spacing: -0.065em; }
.hero h1 span { color: var(--pink); font-style: italic; }
.hero-intro { max-width: 590px; margin: 30px 0; font-size: clamp(1.05rem, 1.6vw, 1.35rem); line-height: 1.55; color: #edf6f0; }
.hero-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.text-button { padding: 8px 2px; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: white; font-weight: 800; cursor: pointer; }
.trust-row { margin-top: 30px; display: flex; gap: 18px; flex-wrap: wrap; color: #cfe4db; font-size: 0.88rem; }
.hero-collage { position: relative; min-height: 520px; }
.dot-field { position: absolute; inset: 3% 0 4% 5%; background-image: radial-gradient(#f8f3e9 1.2px, transparent 1.2px); background-size: 20px 20px; opacity: 0.2; transform: rotate(-4deg); }
.phone-card { position: absolute; z-index: 2; width: min(270px, 58%); left: 22%; top: 2%; margin: 0; overflow: hidden; border: 8px solid #102e25; border-radius: 34px; background: var(--paper); color: var(--ink); box-shadow: 22px 25px 0 rgba(242, 131, 104, 0.72); transform: rotate(3deg); }
.phone-top { height: 24px; display: grid; place-items: center; background: #102e25; }
.phone-top span { width: 52px; height: 6px; border-radius: 999px; background: #45665c; }
.phone-card > img { width: 100%; aspect-ratio: 1 / 1.04; object-fit: cover; }
.phone-copy { padding: 18px 19px 22px; }
.phone-copy small { color: var(--green); font-weight: 800; }
.phone-copy h2 { margin: 7px 0 4px; font-family: Georgia, serif; font-size: 1.85rem; }
.phone-copy p { margin: 0 0 14px; color: #4a5650; font-size: 0.84rem; line-height: 1.45; }
.mini-pill { display: inline-block; padding: 6px 10px; border-radius: 999px; background: var(--pink); color: #672c43; font-size: 0.7rem; font-weight: 850; }
.float-card { position: absolute; z-index: 4; width: 155px; padding: 9px; border: 2px solid var(--green); border-radius: 18px; background: var(--cream); color: var(--green); box-shadow: 8px 9px 0 var(--pink); font-weight: 850; transform: rotate(-7deg); }
.float-card img { width: 100%; aspect-ratio: 1; border-radius: 11px; object-fit: cover; }
.float-card span { display: block; padding: 8px 4px 2px; font-size: 0.8rem; }
.float-maya { left: 0; top: 26%; }
.float-jonah { right: 0; bottom: 8%; transform: rotate(7deg); }
.availability-card { position: absolute; z-index: 3; right: 3%; top: 10%; padding: 16px 18px; display: grid; gap: 7px; border-radius: 16px; background: var(--lime); color: #34420d; box-shadow: 8px 8px 0 var(--pink); transform: rotate(5deg); font-size: 0.78rem; }

.brand-intro { padding: clamp(64px, 8vw, 105px) clamp(24px, 7vw, 104px); display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(320px, 0.78fr); justify-content: space-between; gap: clamp(45px, 8vw, 120px); background: var(--pink); border-bottom: 2px solid var(--green); }
.brand-intro-heading { max-width: 700px; }
.brand-intro h2 { margin: 0; color: var(--green); font-family: Georgia, serif; font-size: clamp(3rem, 5.5vw, 6rem); line-height: 0.98; letter-spacing: -0.05em; }
.brand-intro-copy { max-width: 650px; align-self: end; }
.brand-intro-copy p { margin: 0 0 18px; color: #543745; font-size: clamp(1rem, 1.3vw, 1.14rem); line-height: 1.7; }
.brand-intro-copy strong { display: block; margin-top: 28px; padding: 18px 20px; border: 2px solid var(--green); border-radius: 15px; background: var(--cream); color: var(--green); font-family: Georgia, serif; font-size: clamp(1.25rem, 2vw, 1.75rem); line-height: 1.2; box-shadow: 7px 8px 0 rgba(21, 92, 72, 0.2); }

.discovery { padding: clamp(74px, 9vw, 126px) clamp(22px, 6vw, 90px); background: var(--paper); }
.section-heading { max-width: 1220px; margin: 0 auto 36px; display: grid; grid-template-columns: 1.35fr 0.65fr; gap: 50px; align-items: end; }
.section-heading h2, .ugc-story h2, .membership h2 { margin: 0; color: var(--green); font-family: Georgia, serif; font-size: clamp(2.7rem, 5vw, 5.2rem); line-height: 0.98; letter-spacing: -0.045em; }
.section-heading > p { margin: 0; color: #59635e; line-height: 1.65; }
.search-shell { max-width: 1220px; margin: 0 auto 26px; padding: 18px; border: 2px solid var(--green); border-radius: 24px; background: var(--cream); box-shadow: var(--shadow); }
.search-field { min-height: 58px; padding: 0 18px; display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 14px; background: white; }
.search-field span { color: var(--green); font-size: 1.8rem; }
.search-field input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 1rem; }
.filters { margin-top: 14px; display: flex; gap: 9px; flex-wrap: wrap; }
.filter-chip { padding: 9px 13px; border: 1px solid var(--green); border-radius: 999px; background: transparent; color: var(--green); font-size: 0.82rem; font-weight: 800; cursor: pointer; }
.filter-chip.active { background: var(--green); color: white; }
.save-search-chip { margin-left: auto; background: var(--paper); }
.results-meta { max-width: 1220px; margin: 38px auto 18px; display: flex; justify-content: space-between; color: #66706a; font-size: 0.86rem; }
.results-meta strong { color: var(--green); }
.creator-grid { max-width: 1220px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.creator-card { overflow: hidden; border: 2px solid var(--green); border-radius: 22px; background: var(--cream); transition: transform 170ms ease, box-shadow 170ms ease; }
.creator-card:hover { transform: translateY(-5px); box-shadow: 9px 11px 0 var(--pink); }
.creator-image { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.creator-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms ease; }
.creator-card:hover .creator-image img { transform: scale(1.025); }
.available { position: absolute; top: 12px; left: 12px; padding: 6px 9px; border-radius: 999px; background: rgba(255, 253, 248, 0.94); color: var(--green); font-size: 0.68rem; font-weight: 850; }
.available i, .availability-live i { width: 7px; height: 7px; display: inline-block; margin-right: 6px; border-radius: 50%; background: #2aa66f; box-shadow: 0 0 0 3px rgba(42, 166, 111, 0.15); }
.creator-body { padding: 20px; }
.creator-kicker { display: flex; justify-content: space-between; gap: 12px; color: #6b746f; font-size: 0.75rem; }
.creator-body h3 { margin: 8px 0 8px; color: var(--green); font-family: Georgia, serif; font-size: 2rem; }
.creator-body p { min-height: 66px; margin: 0 0 16px; color: #59635e; line-height: 1.5; }
.badges { display: flex; flex-wrap: wrap; gap: 7px; }
.badge { padding: 6px 9px; border-radius: 999px; background: #e7eee8; color: var(--green); font-size: 0.7rem; font-weight: 850; }
.badge.ugc { background: var(--pink); color: #6c2943; }
.card-link { width: 100%; margin-top: 18px; padding: 12px; border: 1px solid var(--green); border-radius: 999px; background: transparent; color: var(--green); font-weight: 850; cursor: pointer; }
.empty-state { max-width: 680px; margin: 40px auto 0; padding: 44px; border: 2px dashed var(--green); border-radius: 22px; text-align: center; }
.empty-state h3 { margin: 0; font-family: Georgia, serif; color: var(--green); font-size: 2rem; }

.principles { padding: clamp(78px, 9vw, 130px) clamp(22px, 6vw, 90px); background: var(--green); color: white; }
.section-heading.light h2, .section-heading.light .eyebrow { color: white; }
.section-heading.light > p { color: #d5e8df; }
.steps { max-width: 1220px; margin: 58px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #ffffff55; }
.steps article { padding: 30px 30px 0 0; border-right: 1px solid #ffffff30; }
.steps article + article { padding-left: 30px; }
.steps span { color: var(--pink); font-family: Georgia, serif; font-size: 2.4rem; }
.steps h3 { margin: 20px 0 10px; font-family: Georgia, serif; font-size: 1.75rem; }
.steps p { color: #d7e8e0; line-height: 1.55; }
.creator-how { max-width: 1220px; margin: clamp(70px, 9vw, 120px) auto 0; padding: clamp(32px, 5vw, 62px); border: 2px solid var(--pink); border-radius: 28px; background: var(--cream); color: var(--green); box-shadow: 14px 16px 0 rgba(239, 181, 204, .32); }
.creator-how-heading { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(28px, 6vw, 80px); align-items: end; }
.creator-how-heading .eyebrow { color: var(--coral); }
.creator-how-heading h2 { margin: 6px 0 0; font-family: Georgia, serif; font-size: clamp(2.7rem, 5vw, 5rem); line-height: .98; letter-spacing: -.045em; }
.creator-how-heading > p { margin: 0; color: #59635e; font-size: 1rem; line-height: 1.65; }
.creator-steps { margin: 42px 0 30px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.creator-steps article { min-height: 230px; padding: 23px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid var(--line); border-radius: 18px; background: white; }
.creator-steps span { color: var(--coral); font-family: Georgia, serif; font-size: 2rem; }
.creator-steps h3 { margin: 24px 0 8px; font-family: Georgia, serif; font-size: 1.55rem; line-height: 1.08; }
.creator-steps p { margin: 0; color: #59635e; font-size: .86rem; line-height: 1.55; }
.creator-how-cta { border: 0; background: var(--green); color: white; cursor: pointer; }

.ugc-story { padding: clamp(82px, 10vw, 145px) clamp(24px, 7vw, 104px); display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(50px, 9vw, 130px); align-items: center; background: var(--pink); }
.ugc-copy > p:not(.eyebrow) { max-width: 580px; color: #60384a; font-size: 1.05rem; line-height: 1.7; }
.text-link { color: var(--green); font-weight: 900; text-underline-offset: 5px; }
.ugc-board { position: relative; min-height: 470px; border: 2px solid var(--green); border-radius: 35px; background: var(--cream); box-shadow: 15px 17px 0 rgba(21, 92, 72, 0.24); }
.post { position: absolute; width: 42%; padding: 10px; border: 2px solid var(--green); border-radius: 18px; background: white; color: var(--green); font-weight: 850; box-shadow: 7px 8px 0 var(--lime); }
.post img { width: 100%; aspect-ratio: 1; border-radius: 11px; object-fit: cover; }
.post span { display: block; padding: 9px 4px 3px; }
.post-one { left: 8%; top: 12%; transform: rotate(-7deg); }
.post-two { right: 8%; top: 7%; transform: rotate(8deg); }
.post-three { left: 30%; bottom: 4%; transform: rotate(2deg); }

.membership { padding: clamp(84px, 10vw, 150px) clamp(24px, 6vw, 90px); background: var(--cream); }
.membership-heading { max-width: 980px; }
.membership-heading > p:last-child { max-width: 650px; color: #59635e; font-size: 1.05rem; line-height: 1.65; }
.pricing-grid { margin-top: 52px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.price-card { padding: 25px; display: flex; flex-direction: column; border: 2px solid var(--green); border-radius: 24px; background: var(--paper); }
.price-card.founding-card { background: #fff5f8; box-shadow: 8px 9px 0 rgba(242, 191, 208, 0.7); }
.price-card.advanced-card { border-width: 3px; }
.price-tag { display: inline-block; padding: 7px 11px; border-radius: 999px; background: var(--lime); color: #35430e; font-size: 0.75rem; font-weight: 850; }
.neutral-tag { background: #e7eee8; color: var(--green); }
.advanced-tag { background: var(--pink); color: #672c43; }
.plan-type { margin: 24px 0 5px; color: var(--coral); font-size: 0.7rem; font-weight: 900; letter-spacing: 0.11em; text-transform: uppercase; }
.price-card h3 { min-height: 58px; margin: 0; color: var(--green); font-family: Georgia, serif; font-size: 1.65rem; line-height: 1.05; }
.price { color: #59635e; }
.price strong { color: var(--green); font-family: Georgia, serif; font-size: 2.65rem; }
.price-card ul { flex: 1; margin: 18px 0 25px; padding-left: 19px; color: #59635e; font-size: 0.84rem; line-height: 1.55; }
.price-card li + li { margin-top: 8px; }
.pricing-note { margin: 26px auto 0; color: #6d756f; font-size: 0.8rem; text-align: center; }
footer { padding: 46px clamp(24px, 7vw, 104px); display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; gap: 30px; background: #102e25; color: #d7e8e0; font-size: 0.82rem; }
footer .brand-logo { width: 164px; height: 42px; }
footer .brand-logo img { width: 220px; }
.account-sidebar .brand-logo { width: 176px; height: 45px; }
.account-sidebar .brand-logo img { width: 236px; }
footer p:last-child { text-align: right; }

dialog { width: min(520px, calc(100% - 32px)); padding: 38px; border: 2px solid var(--green); border-radius: 24px; background: var(--paper); color: var(--ink); box-shadow: 14px 16px 0 var(--pink); }
dialog::backdrop { background: rgba(9, 36, 28, 0.68); backdrop-filter: blur(3px); }
dialog h2 { margin: 0 0 14px; color: var(--green); font-family: Georgia, serif; font-size: 2.4rem; }
dialog p:not(.eyebrow) { line-height: 1.6; }
.dialog-close { position: absolute; top: 12px; right: 15px; border: 0; background: transparent; color: var(--green); font-size: 1.7rem; cursor: pointer; }

.account-dialog { width: min(1180px, calc(100% - 24px)); height: min(820px, calc(100% - 24px)); max-width: none; max-height: none; padding: 0; overflow: hidden; box-shadow: 14px 16px 0 rgba(242, 191, 208, 0.82); }
.account-dialog .dialog-close { z-index: 5; top: 16px; right: 20px; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); }
.account-shell { height: 100%; min-height: 0; display: grid; grid-template-columns: 310px minmax(0, 1fr); overflow: hidden; }
.account-sidebar { padding: 34px; display: flex; flex-direction: column; justify-content: space-between; gap: 36px; background: var(--green); color: white; }
.account-sidebar h2 { color: white; font-size: 3rem; }
.account-sidebar > div > p:not(.eyebrow) { color: #d5e8df; line-height: 1.6; }
.local-note { padding: 18px; display: grid; gap: 7px; border: 1px solid #ffffff55; border-radius: 17px; background: #ffffff12; font-size: 0.78rem; line-height: 1.45; }
.local-note span { color: #d5e8df; }
.account-main { min-width: 0; min-height: 0; height: 100%; padding: clamp(42px, 6vw, 74px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: var(--paper); }
.account-view > h2, .account-form > h2 { margin: 0; color: var(--green); font-family: Georgia, serif; font-size: clamp(2.5rem, 5vw, 4.6rem); line-height: 0.98; letter-spacing: -0.045em; }
.account-lead { max-width: 650px; margin: 16px 0 32px; color: #59635e; line-height: 1.6; }
.role-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.role-card { min-height: 340px; padding: 28px; display: flex; flex-direction: column; border: 2px solid var(--green); border-radius: 24px; }
.role-card.creator-role { background: #f9e1e9; }
.role-card.brand-role { background: #eef3c7; }
.role-card .role-icon { width: 48px; height: 48px; margin-bottom: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--green); color: white; font-size: 1.35rem; }
.role-card h3 { margin: 0; color: var(--green); font-family: Georgia, serif; font-size: 2rem; line-height: 1.05; }
.role-card > p:not(.eyebrow) { flex: 1; color: #53605a; line-height: 1.55; }
.back-button { margin: 0 0 24px; padding: 0; border: 0; background: transparent; color: var(--green); font-weight: 850; cursor: pointer; }
.form-grid { margin: 30px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-grid > label { display: grid; gap: 8px; color: var(--green); font-size: 0.84rem; font-weight: 850; }
.form-grid input, .form-grid select, .form-grid textarea { width: 100%; padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px; outline: none; background: white; color: var(--ink); font-weight: 500; }
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(21, 92, 72, 0.11); }
.form-grid textarea { min-height: 105px; resize: vertical; }
.span-two { grid-column: 1 / -1; }
.form-grid fieldset { margin: 0; padding: 17px; border: 1px solid var(--line); border-radius: 14px; }
.form-grid legend { padding: 0 6px; color: var(--green); font-size: 0.84rem; font-weight: 850; }
.check-grid { display: flex; gap: 12px; flex-wrap: wrap; }
.check-grid label { padding: 10px 12px; border-radius: 999px; background: #e9efe9; color: var(--green); font-size: 0.8rem; font-weight: 750; }
.membership-choice { background: #fff; }
.membership-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.membership-choice-grid label { position: relative; padding: 16px; display: flex; gap: 12px; border: 1px solid var(--line); border-radius: 14px; cursor: pointer; }
.membership-choice-grid input { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--green); }
.membership-choice-grid span { display: grid; gap: 4px; }
.membership-choice-grid strong { color: var(--green); font-family: Georgia, serif; font-size: 1.25rem; }
.membership-choice-grid small { color: var(--coral); font-weight: 850; }
.membership-choice-grid em { color: #69736d; font-size: .75rem; font-style: normal; line-height: 1.45; }
.dashboard-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.dashboard-top h2 { margin: 0; color: var(--green); font-family: Georgia, serif; font-size: clamp(2.5rem, 5vw, 4.4rem); line-height: 1; }
.switcher { display: flex; gap: 8px; flex-wrap: wrap; }
.switcher button { padding: 9px 12px; border: 1px solid var(--green); border-radius: 999px; background: white; color: var(--green); font-weight: 800; cursor: pointer; }
.switcher button.active { background: var(--green); color: white; }
.status-line { margin: 18px 0 30px; padding: 12px 15px; border-radius: 12px; background: #eef3c7; color: #415111; font-size: 0.84rem; font-weight: 750; }
.dashboard-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 20px; }
.dash-card { padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--cream); }
.dash-card h3 { margin: 0 0 8px; color: var(--green); font-family: Georgia, serif; font-size: 1.7rem; }
.dash-card p { color: #59635e; line-height: 1.55; }
.profile-summary { display: flex; gap: 17px; align-items: center; }
.profile-avatar { width: 68px; height: 68px; display: grid; flex: 0 0 auto; place-items: center; overflow: hidden; border-radius: 50%; background: var(--pink); color: var(--green); font-family: Georgia, serif; font-size: 1.9rem; font-weight: 800; }
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.progress-track { height: 10px; margin: 16px 0 8px; overflow: hidden; border-radius: 999px; background: #d7dfd8; }
.progress-track span { display: block; width: 78%; height: 100%; border-radius: inherit; background: var(--green); }
.dash-actions { margin-top: 20px; display: flex; gap: 10px; flex-wrap: wrap; }
.secondary-button { min-height: 44px; padding: 9px 15px; border: 1px solid var(--green); border-radius: 999px; background: transparent; color: var(--green); font-weight: 850; cursor: pointer; }
.shortlist { display: grid; gap: 10px; }
.shortlist-item { padding: 12px; display: flex; align-items: center; justify-content: space-between; border-radius: 12px; background: white; }
.prototype-toast { position: fixed; z-index: 200; left: 50%; bottom: 24px; padding: 12px 18px; border-radius: 999px; background: #102e25; color: white; font-size: 0.84rem; font-weight: 750; transform: translate(-50%, 130%); transition: transform 180ms ease; }
.prototype-toast.show { transform: translate(-50%, 0); }
.brand-membership-switcher { margin: 18px 0 14px; padding: 13px 15px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid var(--line); border-radius: 15px; background: white; }
.brand-membership-switcher > span { color: var(--green); font-weight: 900; }
.brand-membership-switcher > div { display: flex; gap: 7px; }
.brand-membership-switcher button { padding: 8px 12px; border: 1px solid var(--green); border-radius: 999px; background: white; color: var(--green); font-weight: 850; cursor: pointer; }
.brand-membership-switcher button.active { background: var(--green); color: white; }
.standard-dashboard-card, .upgrade-panel { margin-top: 18px; padding: 28px; display: flex; align-items: center; justify-content: space-between; gap: 28px; border: 2px solid var(--green); border-radius: 22px; background: var(--cream); }
.standard-dashboard-card h3, .upgrade-panel h3 { margin: 0; color: var(--green); font-family: Georgia, serif; font-size: clamp(1.8rem, 3vw, 2.7rem); }
.standard-dashboard-card p:not(.eyebrow), .upgrade-panel p:not(.eyebrow) { max-width: 650px; color: #69736d; line-height: 1.55; }
.standard-stats { margin: 16px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.standard-stats > div { padding: 18px; display: grid; border: 1px solid var(--line); border-radius: 15px; background: white; }
.standard-stats strong { color: var(--green); font-family: Georgia, serif; font-size: 2rem; }
.standard-stats span { color: #69736d; font-size: .75rem; }
.standard-creator-list { margin-top: 16px; display: grid; gap: 9px; }
.standard-creator-card { padding: 14px; display: grid; grid-template-columns: 1fr 1fr auto; gap: 14px; align-items: center; border-radius: 13px; background: white; }
.standard-creator-card > div { display: grid; gap: 3px; }
.standard-creator-card span { color: #69736d; font-size: .74rem; }
.upgrade-panel { border-color: var(--pink); background: #fff5f8; }
.package-founding-note { max-width: 900px; margin: 32px auto; padding: 18px 22px; border: 1px solid var(--pink); border-radius: 16px; background: #fff5f8; color: #672c43; text-align: center; }
.creator-builder-section { margin-top: 18px; padding: 26px; border: 1px solid var(--line); border-radius: 22px; background: var(--cream); }
.creator-builder-section .workspace-title { align-items: center; }
.upload-button { min-height: 44px; padding: 10px 16px; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; border: 1px solid var(--green); border-radius: 999px; color: var(--green); font-size: .82rem; font-weight: 850; cursor: pointer; }
.upload-button input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.portfolio-grid { margin-top: 20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.portfolio-tile { position: relative; aspect-ratio: 1 / 1; margin: 0; overflow: hidden; border-radius: 15px; background: white; }
.portfolio-tile img { width: 100%; height: 100%; object-fit: cover; }
.portfolio-tile button, .social-post-row > button, .engagement-row > button { width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--green); color: white; font-size: 1rem; cursor: pointer; }
.portfolio-tile button { position: absolute; top: 8px; right: 8px; }
.media-empty { grid-column: 1 / -1; padding: 38px 20px; border: 1px dashed var(--green); border-radius: 15px; color: #69736d; text-align: center; }
.creator-inline-form { margin-top: 20px; padding: 16px; display: grid; grid-template-columns: .8fr 1.5fr 1fr auto; gap: 10px; align-items: end; border-radius: 16px; background: var(--pink); }
.creator-inline-form.engagement-form { grid-template-columns: .8fr 1fr .7fr .7fr auto; }
.creator-inline-form label { display: grid; gap: 6px; color: var(--green); font-size: .72rem; font-weight: 850; }
.creator-inline-form input, .creator-inline-form select { width: 100%; min-width: 0; padding: 10px 11px; border: 1px solid var(--line); border-radius: 10px; background: white; color: var(--ink); }
.social-post-list, .engagement-list { margin-top: 14px; display: grid; gap: 8px; }
.social-post-row { padding: 12px; display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 12px; align-items: center; border-radius: 13px; background: white; }
.social-post-row > span { color: var(--coral); font-size: .7rem; font-weight: 900; text-transform: uppercase; }
.social-post-row > div { display: grid; gap: 3px; }
.social-post-row a { color: #69736d; font-size: .72rem; }
.engagement-row { padding: 13px; display: grid; grid-template-columns: minmax(120px, 1.4fr) 1fr 1fr auto; gap: 14px; align-items: center; border-radius: 13px; background: white; }
.engagement-row > div { display: grid; gap: 2px; }
.engagement-row span { color: #69736d; font-size: .67rem; }
.engagement-row > div:first-child span { color: var(--coral); font-weight: 850; text-transform: uppercase; }
.public-profile { max-width: 900px; margin: 0 auto; }
.public-profile-hero { padding: clamp(24px, 5vw, 48px); display: grid; grid-template-columns: 150px 1fr; gap: 30px; align-items: center; border-radius: 26px; background: var(--green); color: white; }
.public-profile-hero h2 { margin: 0 0 8px; color: white; font-family: Georgia, serif; font-size: clamp(2.8rem, 6vw, 5rem); line-height: .95; }
.public-profile-hero > div > p:not(.eyebrow) { color: #d5e8df; }
.public-avatar { width: 150px; height: 150px; display: grid; place-items: center; overflow: hidden; border: 5px solid var(--cream); border-radius: 50%; background: var(--pink); color: var(--green); font-family: Georgia, serif; font-size: 4rem; font-weight: 800; }
.public-avatar img { width: 100%; height: 100%; object-fit: cover; }
.public-bio { max-width: 760px; margin: 28px auto; color: #4f5e56; font-family: Georgia, serif; font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.35; text-align: center; }
.public-section { margin-top: 18px; padding: 26px; border: 1px solid var(--line); border-radius: 22px; background: var(--cream); }
.public-section h3 { margin: 0 0 18px; color: var(--green); font-family: Georgia, serif; font-size: 2rem; }
.public-portfolio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.public-portfolio img { width: 100%; aspect-ratio: 1 / 1; border-radius: 14px; object-fit: cover; }
.public-empty { grid-column: 1 / -1; padding: 34px; border: 1px dashed var(--line); border-radius: 14px; color: #69736d; text-align: center; }
.public-posts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.public-post { padding: 16px; display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; border: 1px solid var(--line); border-radius: 14px; background: white; color: var(--green); text-decoration: none; }
.public-post span { grid-column: 1 / -1; color: var(--coral); font-size: .67rem; font-weight: 900; text-transform: uppercase; }
.public-engagement { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.public-engagement article { padding: 17px; display: grid; gap: 4px; border-radius: 14px; background: white; }
.public-engagement span { color: var(--coral); font-size: .68rem; font-weight: 900; text-transform: uppercase; }
.public-engagement strong { color: var(--green); font-family: Georgia, serif; font-size: 2rem; }
.public-engagement small { color: #69736d; line-height: 1.4; }
.workspace-stats { margin: 24px 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.workspace-stats > div { padding: 18px; display: grid; border: 1px solid var(--line); border-radius: 16px; background: var(--cream); }
.workspace-stats strong { color: var(--green); font-family: Georgia, serif; font-size: 2rem; }
.workspace-stats span { color: #66706a; font-size: 0.75rem; font-weight: 750; }
.workspace-section { margin-top: 18px; padding: 26px; border: 1px solid var(--line); border-radius: 22px; background: var(--cream); }
.workspace-title { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; }
.workspace-title h3 { margin: 0; color: var(--green); font-family: Georgia, serif; font-size: clamp(1.75rem, 3vw, 2.6rem); line-height: 1.05; }
.campaign-form { margin-top: 20px; padding: 18px; display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 10px; align-items: end; border-radius: 16px; background: var(--pink); }
.campaign-form label, .match-request-form label, .crm-card label { display: grid; gap: 6px; color: var(--green); font-size: 0.74rem; font-weight: 850; }
.campaign-form input, .match-request-form input, .match-request-form select, .workspace-row select, .crm-card select, .crm-card textarea { width: 100%; padding: 10px 11px; border: 1px solid var(--line); border-radius: 10px; background: white; color: var(--ink); }
.workspace-list { margin-top: 18px; display: grid; gap: 9px; }
.workspace-row { padding: 13px 14px; display: flex; justify-content: space-between; align-items: center; gap: 14px; border-radius: 13px; background: white; }
.workspace-row > div:first-child { display: grid; gap: 3px; }
.workspace-row span { color: #69736d; font-size: 0.76rem; }
.workspace-row select { width: auto; min-width: 115px; }
.new-match { display: inline-block; padding: 5px 8px; border-radius: 999px; background: var(--lime); color: #36460a !important; font-weight: 850; }
.icon-button { margin-left: 8px; border: 0; background: transparent; color: var(--green); font-size: 1.25rem; cursor: pointer; }
.empty-copy { color: #69736d; }
.crm-grid { margin-top: 18px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.crm-card { padding: 17px; border: 1px solid var(--line); border-radius: 16px; background: white; }
.crm-heading { margin-bottom: 14px; display: flex; justify-content: space-between; gap: 12px; }
.crm-heading > div { display: grid; }
.crm-heading > div span { color: #69736d; font-size: 0.75rem; }
.availability-live { color: var(--green); font-size: 0.7rem; font-weight: 850; text-align: right; }
.crm-card label + label { margin-top: 12px; }
.crm-card textarea { min-height: 72px; resize: vertical; }
.text-danger { border: 0; background: transparent; color: #9b4050; font-weight: 800; cursor: pointer; }
.template-grid { margin-top: 18px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.template-card { padding: 18px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 16px; background: white; }
.template-card > span { color: var(--coral); font-size: 0.68rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.template-card h4 { margin: 8px 0; color: var(--green); font-family: Georgia, serif; font-size: 1.35rem; }
.template-card p { flex: 1; color: #69736d; font-size: 0.78rem; line-height: 1.5; }
.match-workspace { border: 2px solid var(--green); background: #f5efdf; }
.workspace-title > div > p:last-child { max-width: 760px; margin: 10px 0 0; color: #69736d; line-height: 1.5; }
.match-request-form { margin-top: 20px; padding: 18px; display: grid; grid-template-columns: 1.1fr .8fr .8fr .8fr 1fr; gap: 10px; align-items: end; border-radius: 17px; background: var(--pink); }
.match-request-form[hidden] { display: none; }
.match-request-form .email-alert-choice { grid-column: 1 / -2; padding: 11px 13px; display: flex; align-items: center; gap: 10px; border-radius: 11px; background: rgba(255,255,255,.72); }
.email-alert-choice input { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--green); }
.email-alert-choice span { display: grid; gap: 2px; color: #69736d; font-size: .69rem; font-weight: 650; }
.email-alert-choice strong { color: var(--green); font-size: .76rem; }
.match-request-list { margin-top: 18px; display: grid; gap: 13px; }
.match-empty { padding: 24px; border: 1px dashed var(--green); border-radius: 16px; background: white; text-align: center; }
.match-empty strong { color: var(--green); font-family: Georgia, serif; font-size: 1.35rem; }
.match-empty p { max-width: 620px; margin: 8px auto 0; color: #69736d; font-size: .82rem; line-height: 1.55; }
.match-request-card { padding: 18px; border: 1px solid var(--line); border-radius: 17px; background: white; }
.match-request-heading { display: flex; justify-content: space-between; gap: 15px; }
.match-request-heading h4 { margin: 7px 0 0; color: var(--green); font-family: Georgia, serif; font-size: 1.35rem; }
.match-live { color: var(--green); font-size: .67rem; font-weight: 850; text-transform: uppercase; }
.match-live i, .availability-live i { width: 7px; height: 7px; margin-right: 5px; display: inline-block; border-radius: 50%; background: #2aa66f; }
.request-criteria { margin: 14px 0; display: flex; flex-wrap: wrap; gap: 7px; }
.request-criteria > span { padding: 7px 9px; border-radius: 999px; background: var(--paper); color: #69736d; font-size: .67rem; }
.request-criteria strong { color: var(--green); }
.request-results { padding-top: 13px; border-top: 1px solid var(--line); }
.request-results-title { margin-bottom: 10px; display: flex; justify-content: space-between; gap: 10px; color: #69736d; font-size: .7rem; }
.request-results-title strong { color: var(--green); }
.request-match { padding: 10px; display: grid; grid-template-columns: 48px 1fr auto; gap: 10px; align-items: center; border-radius: 13px; background: var(--paper); }
.request-match + .request-match { margin-top: 8px; }
.request-match img { width: 48px; height: 48px; border-radius: 11px; object-fit: cover; }
.request-match > div { display: grid; gap: 2px; }
.request-match strong { color: var(--green); }
.request-match span, .request-match small { color: #69736d; font-size: .67rem; }
.request-match small { color: var(--coral); font-weight: 800; }
.request-match .secondary-button { min-height: 38px; padding: 7px 11px; font-size: .68rem; }
.prototype-email-note { margin: 12px 0 0; color: #7b7468; font-size: .68rem; }
.founding-meter { display: grid; gap: 12px; margin: 25px 0; }
.founding-meter .progress-track { height: 18px; background: rgba(255,255,255,.6); }
.founding-meter strong { color: var(--green); font-family: Georgia, serif; font-size: 1.2rem; }
.waitlist-card { max-width: 760px; margin: 0 auto; padding: clamp(28px, 5vw, 54px); display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; border: 2px solid var(--green); border-radius: 24px; background: var(--cream); box-shadow: 10px 12px 0 rgba(21,92,72,.16); }
.waitlist-card label:not(.consent-row) { display: grid; gap: 8px; color: var(--green); font-weight: 850; }
.waitlist-card input { width: 100%; padding: 13px 14px; border: 1px solid var(--line); border-radius: 10px; background: white; color: var(--ink); font: inherit; }
.waitlist-card .consent-row, .waitlist-card button, .waitlist-card .form-message { grid-column: 1 / -1; }
.consent-row { display: flex !important; align-items: flex-start; gap: 10px; line-height: 1.45; }
.consent-row input { width: 18px !important; height: 18px; margin-top: 2px; flex: 0 0 auto; }
.consent-row a { color: var(--green); font-weight: 850; }
.form-message { min-height: 1.4em; margin: 0; color: var(--green); font-weight: 750; }
.submission-panel { margin: 26px 0; padding: 24px; display: flex; align-items: center; justify-content: space-between; gap: 22px; border: 2px solid var(--green); border-radius: 18px; background: #eef3c7; }
.submission-panel h3 { margin: 2px 0 8px; color: var(--green); font-family: Georgia, serif; font-size: 1.55rem; }
.submission-panel p { margin: 0; max-width: 620px; color: #53645d; line-height: 1.55; }
.legal-page { min-height: 100vh; padding: 40px 20px 80px; background: var(--paper); }
.legal-shell { max-width: 820px; margin: 0 auto; }
.legal-shell .brand-logo { margin-bottom: 50px; }
.legal-shell h1 { color: var(--green); font-family: Georgia, serif; font-size: clamp(3rem, 8vw, 5.8rem); letter-spacing: -.05em; line-height: .98; }
.legal-shell h2 { margin-top: 34px; color: var(--green); font-family: Georgia, serif; }
.legal-shell p, .legal-shell li { color: #53645d; line-height: 1.7; }
.admin-list { display: grid; gap: 14px; margin-top: 30px; }
.admin-card { padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: white; }
.admin-card h3 { margin: 0 0 5px; color: var(--green); }
.admin-card p { margin: 4px 0; }
.admin-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

@media (max-width: 960px) {
  .site-header nav { display: none; }
  .hero { grid-template-columns: 1fr; padding-top: 72px; }
  .hero-collage { width: min(620px, 100%); margin: 0 auto; }
  .section-heading, .brand-intro, .ugc-story, .creator-how-heading { grid-template-columns: 1fr; }
  .creator-grid { grid-template-columns: repeat(2, 1fr); }
  .ugc-copy { max-width: 700px; }
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .account-shell { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .account-sidebar { min-height: auto; padding: 20px 28px; flex-direction: row; align-items: center; }
  .account-sidebar > div:not(.local-note) { display: none; }
  .local-note { max-width: 460px; }
  .account-main { padding: 42px 30px; }
  .campaign-form, .match-request-form { grid-template-columns: repeat(2, 1fr); }
  .creator-inline-form, .creator-inline-form.engagement-form { grid-template-columns: repeat(2, 1fr); }
  .match-request-form .email-alert-choice { grid-column: 1 / -1; }
  .crm-grid, .template-grid { grid-template-columns: 1fr; }
}

@media (max-width: 650px) {
  .prototype-note { align-items: flex-start; flex-direction: column; gap: 3px; }
  .site-header { min-height: 66px; }
  .header-actions .pill { display: none; }
  .hero { min-height: auto; padding: 62px 20px 78px; }
  .hero h1 { font-size: clamp(3.5rem, 17vw, 5.6rem); }
  .hero-collage { min-height: 460px; transform: scale(0.9); transform-origin: center top; margin-bottom: -50px; }
  .float-card { width: 130px; }
  .availability-card { right: 0; }
  .section-heading { gap: 20px; }
  .brand-intro { gap: 28px; }
  .creator-grid, .steps, .creator-steps { grid-template-columns: 1fr; }
  .steps article { padding: 28px 0 !important; border-right: 0; border-bottom: 1px solid #ffffff30; }
  .creator-how { padding: 28px 20px; border-radius: 22px; }
  .creator-steps article { min-height: 0; }
  .results-meta { align-items: flex-start; flex-direction: column; gap: 5px; }
  .ugc-board { min-height: 400px; }
  .post { width: 46%; }
  footer { grid-template-columns: 1fr; }
  footer p:last-child { text-align: left; }
  .account-dialog { width: 100%; height: 100%; max-height: none; border-radius: 0; }
  .account-shell { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .account-sidebar { min-height: 190px; padding: 25px; }
  .account-sidebar > div:not(.local-note) { display: none; }
  .account-main { padding: 50px 22px 30px; }
  .role-grid, .form-grid, .dashboard-grid { grid-template-columns: 1fr; }
  .membership-choice-grid, .standard-stats { grid-template-columns: 1fr; }
  .brand-membership-switcher, .standard-dashboard-card, .upgrade-panel { align-items: flex-start; flex-direction: column; }
  .standard-creator-card { grid-template-columns: 1fr; }
  .span-two { grid-column: auto; }
  .dashboard-top { flex-direction: column; }
  .save-search-chip { margin-left: 0; }
  .workspace-stats { grid-template-columns: repeat(2, 1fr); }
  .workspace-title { align-items: flex-start; flex-direction: column; }
  .campaign-form, .match-request-form, .crm-grid, .template-grid { grid-template-columns: 1fr; }
  .creator-inline-form, .creator-inline-form.engagement-form, .public-profile-hero { grid-template-columns: 1fr; }
  .portfolio-grid, .public-portfolio, .public-engagement, .public-posts { grid-template-columns: repeat(2, 1fr); }
  .public-avatar { width: 112px; height: 112px; font-size: 3rem; }
  .engagement-row { grid-template-columns: 1fr 1fr auto; }
  .engagement-row > div:first-child { grid-column: 1 / -1; }
  .match-request-form .email-alert-choice { grid-column: auto; }
  .workspace-row, .crm-heading { align-items: flex-start; flex-direction: column; }
  .match-request-heading, .request-results-title { align-items: flex-start; flex-direction: column; }
  .request-match { grid-template-columns: 48px 1fr; }
  .request-match .secondary-button { grid-column: 1 / -1; }
  .availability-live { text-align: left; }
  .pricing-grid { grid-template-columns: 1fr; }
  .waitlist-card { grid-template-columns: 1fr; }
  .waitlist-card label, .waitlist-card .consent-row, .waitlist-card button, .waitlist-card .form-message { grid-column: auto; }
  .submission-panel { align-items: flex-start; flex-direction: column; }
  .price-card h3 { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}