@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap");

:root { --ink:#171714; --paper:#f4f0e8; --cream:#ebe4d8; --signal:#e94d35; --muted:#6f6b63; --line:rgba(23,23,20,.14); --white:#fffdf8; font-family:"DM Sans",sans-serif; color:var(--ink); background:var(--paper); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-height:100vh; background:var(--paper); }
a { color:inherit; text-decoration:none; }
button,input,select { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
.brand { font-weight:700; letter-spacing:-.055em; font-size:1.25rem; color:var(--white); }
.brand span { color:var(--signal); }
.brand--dark { color:var(--ink); }
.marketing-nav { position:absolute; z-index:3; inset:0 0 auto; height:86px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(24px,5vw,76px); color:var(--white); border-bottom:1px solid rgba(255,255,255,.2); }
.marketing-nav nav { display:flex; align-items:center; gap:32px; font-size:.86rem; }
.nav-cta { border:1px solid rgba(255,255,255,.5); padding:11px 17px; }
.hero { min-height:100svh; position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr); align-items:center; padding:125px clamp(24px,7vw,110px) 70px; color:var(--white); background:#191a17; isolation:isolate; }
.hero::before { content:""; position:absolute; inset:0; z-index:-2; background:radial-gradient(circle at 74% 48%,rgba(233,77,53,.18),transparent 25%),linear-gradient(115deg,#1b1c19 0%,#24251f 55%,#171815 100%); }
.hero-grain { position:absolute; inset:0; z-index:-1; opacity:.18; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E"); }
.hero-copy { max-width:760px; animation:rise .75s ease-out both; }
.eyebrow,.section-number { font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; }
.eyebrow { color:#d0cbc0; }
.hero h1 { font-family:"Instrument Serif",serif; font-weight:400; font-size:clamp(4rem,8vw,8.2rem); letter-spacing:-.055em; line-height:.82; margin:26px 0 34px; }
.hero h1 em { color:var(--signal); font-weight:400; }
.hero-lede { max-width:570px; color:#cbc8c0; font-size:clamp(1rem,1.5vw,1.2rem); line-height:1.65; }
.hero-actions { display:flex; align-items:center; gap:30px; margin-top:38px; }
.button { border:0; display:inline-flex; align-items:center; justify-content:space-between; gap:24px; padding:16px 20px; font-weight:700; cursor:pointer; transition:transform .2s,background .2s; }
.button:hover { transform:translateY(-2px); }
.button--primary { background:var(--signal); color:white; min-width:205px; }
.button--light { background:var(--white); color:var(--ink); min-width:210px; }
.text-link { border-bottom:1px solid rgba(255,255,255,.4); padding-bottom:4px; }
.signal-visual { position:relative; justify-self:end; width:min(38vw,520px); aspect-ratio:1; border-radius:50%; border:1px solid rgba(255,255,255,.13); animation:fade 1.2s .25s both; }
.signal-visual::before,.signal-visual::after { content:""; position:absolute; inset:13%; border:1px solid rgba(255,255,255,.11); border-radius:50%; }
.signal-visual::after { inset:27%; }
.signal-line { position:absolute; left:8%; right:8%; height:1px; top:50%; background:rgba(255,255,255,.2); transform-origin:center; }
.signal-line--2 { transform:rotate(45deg); }.signal-line--3 { transform:rotate(90deg); }.signal-line--4 { transform:rotate(135deg); }
.signal-dot { position:absolute; width:16px; height:16px; background:var(--signal); border-radius:50%; top:calc(50% - 8px); left:calc(50% - 8px); box-shadow:0 0 0 14px rgba(233,77,53,.13),0 0 70px 28px rgba(233,77,53,.18); animation:pulse 2.4s infinite; }
.signal-visual p { position:absolute; bottom:2%; left:50%; transform:translateX(-50%); white-space:nowrap; color:#88877f; font-size:.75rem; letter-spacing:.15em; text-transform:uppercase; }.signal-visual strong { color:var(--signal); }
.proof { padding:110px clamp(24px,7vw,110px); }
.section-number { color:var(--signal); border-top:1px solid var(--line); padding-top:18px; }
.proof-heading { display:grid; grid-template-columns:1.5fr .7fr; gap:12vw; align-items:end; margin:65px 0 90px; }
.proof-heading h2,.final-cta h2 { font:400 clamp(3rem,6vw,6.4rem)/.95 "Instrument Serif",serif; letter-spacing:-.045em; margin:0; }
.proof-heading p { color:var(--muted); line-height:1.7; max-width:390px; }
.steps { list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.steps li { display:grid; grid-template-columns:90px 1fr; padding:34px 0; border-bottom:1px solid var(--line); }
.steps li>span { color:var(--signal); font-size:.76rem; font-weight:700; }.steps li div { display:grid; grid-template-columns:.55fr 1fr; gap:8vw; }.steps h3 { margin:0; font:400 2.3rem "Instrument Serif",serif; }.steps p { margin:0; color:var(--muted); max-width:520px; line-height:1.65; }
.final-cta { background:var(--signal); color:white; padding:110px clamp(24px,7vw,110px); }.final-cta .eyebrow { color:#ffd7ce; }.final-cta h2 { margin:30px 0 50px; }
.marketing-footer { display:flex; justify-content:space-between; padding:30px clamp(24px,5vw,76px); font-size:.78rem; background:var(--ink); color:#aaa79f; }

/* Authentication */
.auth-shell { min-height:100vh; display:grid; place-items:center; align-content:center; gap:24px; padding:40px 20px; background:radial-gradient(circle at 50% 15%,#fffaf0,transparent 35%),var(--paper); }
.auth-panel { width:min(100%,440px); background:var(--white); border:1px solid var(--line); padding:38px; box-shadow:0 18px 60px rgba(35,29,20,.08); }
.auth-panel h2 { font:400 2.8rem "Instrument Serif",serif; margin:0 0 24px; }
.auth-panel .field { margin:16px 0; }.auth-panel label { display:block; font-size:.78rem; font-weight:700; margin-bottom:7px; }.auth-panel input[type=email],.auth-panel input[type=password],.auth-panel input[type=text] { width:100%; border:1px solid var(--line); background:white; padding:13px; outline:none; }.auth-panel input:focus { border-color:var(--signal); box-shadow:0 0 0 3px rgba(233,77,53,.1); }.auth-panel input[type=submit] { width:100%; border:0; background:var(--signal); color:white; padding:14px; font-weight:700; cursor:pointer; }.auth-panel a { color:var(--muted); display:inline-block; margin-top:12px; font-size:.84rem; }.auth-back { color:var(--muted); font-size:.82rem; }

/* React application */
.app-loading { min-height:100vh; display:grid; place-content:center; text-align:center; gap:10px; color:var(--muted); }
.app-shell { min-height:100vh; background:#f7f5f0; }
.app-header { height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(20px,5vw,68px); background:var(--white); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10; }
.app-header nav { display:flex; align-items:center; gap:20px; font-size:.85rem; }.app-header nav a:not(.button) { color:var(--muted); }.app-header .button { padding:11px 16px; min-width:0; gap:10px; }
.link-button { border:0; background:none; padding:0; color:var(--muted); cursor:pointer; }
.board { width:min(1180px,calc(100% - 40px)); margin:0 auto; padding:58px 0 90px; }
.board-intro { display:flex; justify-content:space-between; align-items:end; gap:24px; padding-bottom:40px; border-bottom:1px solid var(--line); }.board-intro h1 { font:400 clamp(2.8rem,5vw,5rem)/.95 "Instrument Serif",serif; letter-spacing:-.04em; margin:0 0 10px; }.board-intro p { margin:0; color:var(--muted); }
.board-controls { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:24px 0; border-bottom:1px solid var(--line); }.filters { display:flex; gap:8px; flex-wrap:wrap; }.filter { border:1px solid transparent; background:transparent; padding:8px 11px; color:var(--muted); cursor:pointer; }.filter.is-active { color:var(--ink); border-color:var(--line); background:var(--white); }.sort-select { border:0; background:transparent; color:var(--muted); }
.feedback-list { margin:0; padding:0; list-style:none; }.feedback-row { display:grid; grid-template-columns:78px 1fr auto; gap:28px; align-items:start; padding:28px 0; border-bottom:1px solid var(--line); transition:padding .2s; content-visibility:auto; }.feedback-row:hover { padding-left:8px; }.vote-button { width:62px; border:1px solid var(--line); background:var(--white); padding:10px 4px; cursor:pointer; display:grid; gap:2px; place-items:center; color:var(--muted); }.vote-button.is-voted { border-color:var(--signal); color:var(--signal); background:#fff7f4; }.vote-button strong { color:var(--ink); }.feedback-main h2 { margin:0 0 7px; font-size:1.08rem; }.feedback-main h2 a:hover { color:var(--signal); }.feedback-excerpt { margin:0 0 13px; color:var(--muted); line-height:1.55; }.feedback-meta { display:flex; gap:12px; align-items:center; flex-wrap:wrap; font-size:.75rem; color:#858178; }.status { display:inline-flex; align-items:center; gap:6px; font-weight:700; text-transform:capitalize; }.status::before { content:""; width:7px; height:7px; border-radius:50%; background:#8b8b82; }.status--planned::before,.status--in_progress::before { background:#477ac7; }.status--completed::before { background:#3a9568; }.status--declined::before { background:#a7a49d; }.status--under_review::before { background:#d68c29; }.category-tag { background:#ebe8e1; padding:5px 8px; }.comment-count { color:var(--muted); font-size:.8rem; white-space:nowrap; }
.empty-state { text-align:center; padding:90px 20px; }.empty-state h2 { font:400 2rem "Instrument Serif",serif; }.empty-state p { color:var(--muted); }
.detail { width:min(900px,calc(100% - 40px)); margin:0 auto; padding:46px 0 100px; }.back-link { color:var(--muted); font-size:.84rem; }.detail-header { display:grid; grid-template-columns:80px 1fr; gap:28px; padding:38px 0; border-bottom:1px solid var(--line); }.detail-header h1 { margin:10px 0 16px; font:400 clamp(2.3rem,5vw,4.6rem)/1 "Instrument Serif",serif; letter-spacing:-.035em; }.rich-content { line-height:1.7; color:#3c3933; }.rich-content p:first-child { margin-top:0; }.staff-tools { display:flex; gap:12px; align-items:center; margin-top:20px; padding-top:20px; border-top:1px solid var(--line); }.staff-tools select { padding:9px; border:1px solid var(--line); background:white; }
.discussion { margin-left:108px; padding-top:46px; }.discussion h2 { font:400 2rem "Instrument Serif",serif; }.comment { padding:25px 0; border-top:1px solid var(--line); }.comment-head { display:flex; justify-content:space-between; font-size:.8rem; margin-bottom:10px; }.staff-badge { background:var(--ink); color:white; padding:3px 6px; font-size:.65rem; text-transform:uppercase; letter-spacing:.08em; margin-left:6px; }.comment-actions button { border:0; background:none; color:var(--muted); cursor:pointer; font-size:.75rem; }.comment-form { margin-top:25px; }.comment-form .button { margin-top:12px; }
.form-page { width:min(760px,calc(100% - 40px)); margin:0 auto; padding:50px 0 100px; }.form-page h1 { font:400 clamp(2.6rem,6vw,5rem) "Instrument Serif",serif; margin:24px 0 10px; }.form-page>p { color:var(--muted); margin-bottom:38px; }.field { margin:22px 0; }.field label { display:block; font-weight:700; font-size:.8rem; margin-bottom:8px; }.field input,.field select { width:100%; padding:13px; border:1px solid var(--line); background:white; outline:none; }.field input:focus,.field select:focus { border-color:var(--signal); }.field-hint { color:var(--muted); font-size:.75rem; margin-top:7px; }.form-actions { display:flex; gap:14px; align-items:center; margin-top:24px; }.error-banner { color:#9d2f20; background:#ffebe6; padding:12px 14px; margin:16px 0; }
lexxy-editor { display:block; background:white; border:1px solid var(--line); --lexxy-editor-rows:7lh; }.comment-form lexxy-editor { --lexxy-editor-rows:4lh; }

@keyframes rise { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:none; } } @keyframes fade { from { opacity:0; } to { opacity:1; } } @keyframes pulse { 50% { box-shadow:0 0 0 23px rgba(233,77,53,.04),0 0 90px 38px rgba(233,77,53,.24); } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; transition:none!important; } }
@media (max-width:800px) { .marketing-nav nav>a:not(.nav-cta) { display:none; }.hero { grid-template-columns:1fr; min-height:100svh; padding-top:120px; }.hero h1 { font-size:clamp(3.7rem,17vw,6rem); }.signal-visual { position:absolute; opacity:.28; right:-35%; width:90vw; }.proof-heading { grid-template-columns:1fr; gap:20px; margin:45px 0 60px; }.steps li div { grid-template-columns:1fr; gap:12px; }.app-header nav>a:first-child { display:none; }.board-intro { align-items:start; flex-direction:column; }.feedback-row { grid-template-columns:62px 1fr; gap:14px; }.comment-count { display:none; }.discussion { margin-left:0; }.detail-header { grid-template-columns:62px 1fr; }.marketing-footer { flex-direction:column; gap:8px; } }
@media (max-width:520px) { .hero-actions { align-items:flex-start; flex-direction:column; }.marketing-nav { height:72px; }.nav-cta { padding:9px 11px; }.board { width:calc(100% - 28px); padding-top:35px; }.board-controls { align-items:flex-start; flex-direction:column; }.feedback-row { grid-template-columns:48px 1fr; }.vote-button { width:46px; }.detail { width:calc(100% - 28px); }.detail-header { grid-template-columns:1fr; }.detail-header>.vote-button { width:62px; }.form-page { width:calc(100% - 28px); }.auth-panel { padding:28px 22px; } }