:root { color-scheme: light; --background: #f5f3ef; --foreground: #20201d; --card: #fffefa; --card-foreground: #20201d; --border: #d9d5ce; --muted: #716d65; --muted-foreground: #716d65; --primary: #20201d; --primary-foreground: #fffefa; --accent: #ec684f; --radius: .75rem; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--background); color: var(--foreground); font-family: Arial, Helvetica, sans-serif; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.site-shell { overflow: hidden; background: #f5f3ef; }
.section-wrap, .topbar { width: min(1160px, calc(100% - 64px)); margin: 0 auto; }
.topbar { height: 88px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); }
.brand { display: inline-flex; align-items: center; gap: 9px; font-size: 22px; font-weight: 800; letter-spacing: -1.2px; }
.brand-mark { display: grid; place-items: center; width: 31px; height: 31px; color: #f5f3ef; background: #20201d; border-radius: 8px 8px 8px 2px; transform: rotate(-5deg); }
.brand-dot, .headline-dot { color: #ec684f; }
.main-nav { display: flex; align-items: center; gap: 30px; color: #716d65; font-size: 13px; font-weight: 600; }
.main-nav a:hover, .footer a:hover { color: #ec684f; }
.nav-button { display: inline-flex; align-items: center; gap: 8px; color: #20201d !important; border: 1px solid #bdb8ae; border-radius: 99px; padding: 11px 16px; }
.menu-toggle { display: none; border: 0; background: none; }
.hero { min-height: 650px; display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 45px; padding: 66px 0 72px; }
.eyebrow { display: flex; align-items: center; gap: 9px; text-transform: uppercase; letter-spacing: .13em; color: #8b867c; font-size: 10px; font-weight: 700; }
.eyebrow-line { flex: 0 0 25px; height: 1px; background: #ec684f; }
h1, h2, h3, p { margin: 0; }
h1, h2 { font-weight: 800; letter-spacing: -4px; line-height: .98; }
h1 { max-width: 600px; margin-top: 25px; font-size: clamp(54px, 6vw, 84px); }
h1 em, h2 em { color: #ec684f; font-family: Georgia, serif; font-weight: 400; }
.hero-text { max-width: 390px; color: #716d65; font-size: 16px; line-height: 1.55; margin-top: 28px; }
.hero-actions { display: flex; align-items: center; gap: 25px; margin-top: 34px; }
.button { display: inline-flex; align-items: center; gap: 12px; border-radius: 99px; padding: 14px 20px; font-size: 13px; font-weight: 700; transition: transform .2s, background .2s; }
.button:hover { transform: translateY(-2px); }.button-primary { background: #20201d; color: #fffefa; }.button-dark { background: #fffefa; color: #20201d; }.text-link { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; }
.hero-art { position: relative; min-height: 450px; display: grid; place-items: center; }.hero-toolbox-image { display: block; width: min(100%, 682px); height: auto; border-radius: 18px; mix-blend-mode: multiply; filter: drop-shadow(18px 22px 0 rgba(32, 32, 29, .14)); transform: rotate(1.5deg); }.art-grid { position: absolute; inset: 5% 2%; opacity: .6; background-image: linear-gradient(#ddd9d1 1px, transparent 1px), linear-gradient(90deg, #ddd9d1 1px, transparent 1px); background-size: 45px 45px; mask-image: radial-gradient(circle, black 20%, transparent 72%); }
.toolbox-lid { position: absolute; z-index: 2; top: 91px; width: 355px; height: 58px; display: flex; justify-content: space-between; padding: 12px 17px; color: #f5f3ef; background: #292926; border: 3px solid #20201d; border-radius: 5px 5px 2px 2px; box-shadow: 0 12px 0 #d2ccc1; font-size: 10px; font-weight: 700; letter-spacing: .08em; transform: rotate(-5deg); }.toolbox-lid i { position: absolute; left: 50%; bottom: -10px; width: 34px; height: 18px; background: #f4c54c; border: 2px solid #20201d; border-radius: 3px; transform: translateX(-50%); }.toolbox-body { position: relative; z-index: 1; width: 440px; height: 246px; padding: 73px 30px 25px; background: #292926; border: 3px solid #20201d; border-radius: 3px 3px 13px 13px; box-shadow: 16px 18px 0 #20201d; transform: rotate(-5deg); overflow: visible; }.toolbox-body::before { content: ''; position: absolute; z-index: -1; left: -3px; right: -3px; top: 45px; height: 116px; background: #ec684f; border: 3px solid #20201d; box-shadow: 0 38px 0 #f4c54c, 0 76px 0 #81b7d5; }.toolbox-body::after { content: ''; position: absolute; z-index: -2; left: -3px; right: -3px; bottom: -3px; height: 86px; background: #292926; border: 3px solid #20201d; border-radius: 0 0 13px 13px; }.toolbox-rim { position: absolute; top: 14px; left: 0; right: 0; height: 19px; background: #20201d; border-top: 4px solid #f4c54c; }.toolbox-handle { position: absolute; z-index: 3; top: 42px; left: 50%; width: 150px; height: 82px; border: 12px solid #20201d; border-bottom: 0; border-radius: 80px 80px 0 0; transform: translateX(-50%); }.toolbox-clasp { position: absolute; z-index: 4; top: 33px; width: 25px; height: 98px; background: transparent; border: 7px solid #c7c1b5; border-top: 0; border-radius: 0 0 5px 5px; transform: rotate(28deg); }.clasp-left { left: 46px; }.clasp-right { right: 46px; transform: rotate(-28deg); }.toolbox-label { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px; color: #20201d; border: 2px solid #20201d; background: #f5f3ef; border-radius: 4px; }.toolbox-label strong { font-size: 27px; letter-spacing: -2px; }.toolbox-label small { font-size: 8px; font-weight: 700; letter-spacing: .12em; }.sticker { position: absolute; padding: 8px 10px; color: #20201d; font-size: 9px; font-weight: 900; border: 2px solid #20201d; transform: rotate(8deg); }.sticker-coral { top: 25px; right: 20px; background: #f4c54c; }.sticker-yellow { bottom: 19px; left: 20px; background: #81b7d5; transform: rotate(-6deg); }.sticker-blue { bottom: 18px; right: 22px; background: #f4c54c; transform: rotate(4deg); }.floating-note { position: absolute; z-index: 3; padding: 10px 12px; color: #20201d; background: #f4c54c; border: 2px solid #20201d; font-size: 10px; line-height: 1.1; letter-spacing: .08em; box-shadow: 4px 5px #20201d; }.note-one { top: 58px; right: 11%; transform: rotate(8deg); }.note-two { bottom: 55px; left: 10%; background: #81b7d5; transform: rotate(-8deg); }
.tools-section { padding: 75px 0 115px; border-top: 1px solid var(--border); }.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 35px; }.section-heading h2, .principle-content h2 { margin-top: 21px; font-size: clamp(45px, 5vw, 67px); }.section-heading > p { max-width: 350px; color: #716d65; line-height: 1.55; font-size: 14px; }.filter-row { display: flex; gap: 9px; margin: 50px 0 23px; }.filter { border: 1px solid #d0cbc2; background: transparent; color: #716d65; border-radius: 99px; padding: 9px 15px; font-size: 12px; cursor: pointer; }.filter.active, .filter:hover { background: #20201d; color: #fffefa; border-color: #20201d; }.tool-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }.tool-card { min-height: 340px; display: flex; flex-direction: column; padding: 18px; border-radius: 9px; border: 1px solid #20201d; background: #fffefa; transition: transform .2s, box-shadow .2s; }.tool-card:hover { transform: translateY(-5px); box-shadow: 6px 7px #20201d; }.tool-card.coral { background: #ec684f; }.tool-card.blue { background: #81b7d5; }.tool-card.yellow { background: #f4c54c; }.tool-card.green { background: #a6bd91; }.card-top { display: flex; justify-content: space-between; font-size: 10px; font-weight: 700; }.status { display: inline-flex; align-items: center; gap: 5px; font-size: 9px; }.status span { width: 6px; height: 6px; background: #52704a; border-radius: 50%; }.tool-icon { margin-top: 37px; }.tool-info { margin-top: 20px; }.tool-category { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; opacity: .65; }.tool-info h3 { margin-top: 5px; font-size: 25px; letter-spacing: -1.5px; }.tool-info p { max-width: 180px; margin-top: 10px; font-size: 13px; line-height: 1.35; }.card-link { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 18px; border-top: 1px solid #20201d66; font-size: 11px; font-weight: 700; }
.principle-section { padding: 72px 0 85px; border-top: 1px solid var(--border); }.principle-label { display: flex; align-items: center; gap: 9px; color: #ec684f; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }.principle-content { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; margin-top: 25px; }.principle-content > div { align-self: end; }.principle-content p { max-width: 330px; color: #716d65; line-height: 1.55; font-size: 15px; }.principle-points { display: flex; flex-wrap: wrap; gap: 11px 20px; margin-top: 28px; font-size: 11px; font-weight: 700; }.principle-points span { display: flex; align-items: center; gap: 6px; }.principle-points svg { color: #ec684f; }.cta-section { max-width: none; padding: 105px max(32px, calc((100vw - 1160px) / 2)); text-align: center; color: #fffefa; background: #20201d; }.cta-kicker { color: #f4c54c; text-transform: uppercase; font-size: 10px; font-weight: 700; letter-spacing: .13em; }.cta-section h2 { margin-top: 19px; font-size: clamp(50px, 7vw, 87px); }.cta-section h2 em { color: #ec684f; }.cta-section p { max-width: 400px; margin: 25px auto 30px; color: #aaa69e; font-size: 15px; line-height: 1.5; }.footer { display: flex; align-items: center; gap: 30px; min-height: 108px; color: #716d65; font-size: 11px; }.footer .brand { color: #20201d; margin-right: 10px; }.footer-links { display: flex; gap: 20px; margin-left: auto; }
@media (max-width: 800px) { .section-wrap, .topbar { width: min(100% - 40px, 600px); }.topbar { height: 72px; }.menu-toggle { display: block; }.main-nav { display: none; position: absolute; z-index: 10; top: 72px; left: 20px; right: 20px; padding: 20px; flex-direction: column; align-items: stretch; background: #fffefa; border: 1px solid var(--border); box-shadow: 5px 6px #20201d; }.main-nav.is-open { display: flex; }.hero { grid-template-columns: 1fr; padding: 62px 0 65px; }.hero-art { min-height: 370px; transform: scale(.82); margin: -20px -40px -30px; }.section-heading, .principle-content { display: block; }.section-heading > p { margin-top: 25px; }.tool-grid { grid-template-columns: repeat(2, 1fr); }.principle-content > div { margin-top: 35px; }.footer { flex-wrap: wrap; gap: 15px; padding: 25px 0; }.footer-links { width: 100%; margin-left: 0; } }
@media (max-width: 500px) { .hero-actions { align-items: flex-start; flex-direction: column; gap: 18px; }.tool-grid { grid-template-columns: 1fr; }.tool-card { min-height: 290px; }.hero-art { transform: scale(.64); margin: -65px -100px -80px; }.section-heading h2, .principle-content h2 { letter-spacing: -2px; }.footer > span { width: 100%; }.footer-links { gap: 14px; } }

.tool-grid {margin-top:40px}.contact-section {padding:80px 0}.contact-section h2 {font-size:clamp(40px,5vw,64px);margin:22px 0}.contact-section>p {color:#716d65;line-height:1.6}form {max-width:620px;margin-top:30px;display:grid;gap:12px}label {font-size:13px;font-weight:700}input,textarea {width:100%;border:1px solid #bdb8ae;border-radius:8px;padding:14px;background:#fffefa;color:#20201d;font:inherit}textarea {resize:vertical}form button {justify-self:start;border:0;margin-top:10px}button:disabled {opacity:.55;cursor:not-allowed}.form-note {font-size:13px;color:#716d65;line-height:1.5}:focus-visible {outline:3px solid #ec684f;outline-offset:4px}section {scroll-margin-top:20px}@media(max-width:800px){.topbar{height:auto;min-height:88px;flex-wrap:wrap;gap:18px;padding:20px 0}.main-nav{position:static;display:flex;flex-direction:row;flex-wrap:wrap;padding:0;background:none;border:0;box-shadow:none;gap:16px}.hero-art{min-height:0;transform:none;margin:0}.hero-toolbox-image{width:100%;filter:drop-shadow(8px 10px 0 rgba(32,32,29,.14))}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}
.projects-section{padding:80px 0;border-bottom:1px solid var(--border)}.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:38px}.project-card{padding:25px;border:1px solid var(--border);border-radius:9px;background:#fffefa}.project-badge{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:#716d65}.project-card h3{font-size:25px;letter-spacing:-1px;margin:16px 0 12px}.project-card p{font-size:14px;line-height:1.6;color:#716d65}.project-card a{display:block;margin-top:22px;font-size:12px;text-decoration:underline;overflow-wrap:anywhere}.honeypot{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}@media(max-width:800px){.project-grid{grid-template-columns:1fr}}

.legal{max-width:800px;padding:60px 0}.legal h1{font-size:clamp(40px,7vw,64px);letter-spacing:-2px;margin:36px 0}.legal h2{font-size:24px;letter-spacing:-.5px;line-height:1.3;margin:32px 0 12px}.legal p{line-height:1.7;margin:14px 0;color:#59564f}.legal a,.form-note a{text-decoration:underline}

/* CFG catalog: any number of tools, with the shared o-matic color palette. */
.tool-grid{grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:18px}
.tool-card{background:var(--tool-accent,#FFFDF8);min-height:390px;padding:22px;border-radius:14px}
.tool-info h3{overflow-wrap:anywhere;font-size:25px}
.tool-info p{max-width:none;line-height:1.5}
.status{max-width:75%;text-align:right;line-height:1.4}
.tag-list{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:20px 0 22px}
.tag-list li{font-size:11px;line-height:1.4;padding:5px 9px;border:1px solid #20212440;border-radius:999px;background:#FFFDF830}
.card-link{gap:16px}
.detail-hero{padding:64px 0 52px;border-bottom:1px solid var(--border)}
.detail-badge{width:74px;height:74px;display:grid;place-items:center;background:var(--tool-accent,#F2C94C);border-radius:22px;margin-bottom:26px}
.detail-hero h1{font-size:clamp(38px,6vw,74px);letter-spacing:-.045em;line-height:1.08;margin:20px 0;overflow-wrap:anywhere}
.detail-summary{font-size:clamp(18px,2vw,23px);line-height:1.6;max-width:780px;color:var(--muted)}
.detail-hero .tag-list{margin:24px 0 0}
.detail-hero .tag-list li{background:#FFFDF8;border-color:var(--border)}
.detail-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.button-outline{border:1px solid var(--border);background:#FFFDF8}
.detail-body{max-width:880px;padding:50px 0 72px}
.detail-body>h1{font-size:clamp(32px,6vw,56px);letter-spacing:-2px;line-height:1.2;margin-bottom:24px}
.detail-body p{font-size:16px;line-height:1.8;color:#59564f;overflow-wrap:anywhere}
.detail-copy p+p{margin-top:20px}
.detail-section{margin-top:48px}
.detail-section h2{font-size:clamp(25px,3.5vw,35px);line-height:1.2;letter-spacing:-1px;margin-bottom:20px}
.detail-image{margin:28px 0 40px;padding:18px;border:1px solid var(--border);background:#FFFDF8;border-radius:22px;text-align:center}
.detail-image img{display:block;width:auto;max-width:100%;height:auto;margin:auto;border-radius:8px}
.detail-image figcaption{margin-top:14px;color:var(--muted);font-size:13px;line-height:1.6}
.download-list{display:grid;gap:14px}
.download-card{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:24px;background:#FFFDF8;border:1px solid var(--border);border-radius:22px}
.download-card>div{min-width:0}
.download-card h3{font-size:21px;line-height:1.35;margin-bottom:8px}
.download-card p{font-size:14px;line-height:1.6}
.download-card .button{flex-shrink:0;white-space:nowrap}
.detail-help{padding-top:38px;border-top:1px solid var(--border)}
.detail-help h2{font-size:25px}
@media(max-width:640px){.tool-grid{grid-template-columns:1fr}.detail-hero{padding-top:38px}.detail-body{padding-top:32px}.detail-image{padding:10px;border-radius:14px}.download-card{align-items:flex-start;flex-direction:column;gap:18px}.detail-actions .button{justify-content:center;width:100%}.detail-section{margin-top:36px}}

/* Keep the idea section centered across the full viewport. */
.cta-section { width:100%; margin:0; }
.cta-section h2 { max-width:900px; margin-left:auto; margin-right:auto; line-height:1.08; letter-spacing:-.045em; }
.cta-kicker, .eyebrow { line-height:1.5; }
.detail-copy h2, .markdown h2 { font-size:32px; letter-spacing:-1px; line-height:1.2; margin:30px 0 16px; }
.detail-copy h3, .markdown h3 { font-size:25px; line-height:1.3; margin:26px 0 14px; }
.detail-copy h4, .detail-copy h5, .detail-copy h6, .markdown h4, .markdown h5, .markdown h6 { font-size:20px; line-height:1.4; margin:24px 0 12px; }
.detail-copy > * + *, .markdown > * + * { margin-top:18px; }
.detail-copy ul, .detail-copy ol, .markdown ul, .markdown ol { padding-left:26px; line-height:1.8; color:#59564f; }
.detail-copy a, .markdown a { text-decoration:underline; text-underline-offset:3px; overflow-wrap:anywhere; }
.detail-copy img, .markdown img { max-width:100%; height:auto; border-radius:8px; }
.detail-copy pre, .markdown pre { overflow-x:auto; padding:18px; background:#fffefa; border:1px solid var(--border); border-radius:8px; }
.detail-copy code, .markdown code { font-family:Consolas,monospace; }
.detail-copy blockquote, .markdown blockquote { margin-left:0; padding-left:20px; border-left:3px solid var(--accent); }