:root {
    --ink: #111318;
    --muted: #626873;
    --paper: #f7f8fa;
    --cream: #eef1f5;
    --white: #ffffff;
    --sage: #2864dc;
    --line: rgba(17, 19, 24, .14);
    --sans: "DM Sans", system-ui, sans-serif;
    --mono: "DM Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
.content-loading .site-header, .content-loading main, .content-loading .site-footer { opacity: 0; visibility: hidden; }
.content-ready .site-header, .content-ready main, .content-ready .site-footer { opacity: 1; visibility: visible; transition: opacity .28s ease; }
a { color: inherit; }
.grain { position: fixed; inset: 0; pointer-events: none; opacity: .035; z-index: 20; 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='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.shell { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }

.site-header { height: 78px; width: min(1320px, calc(100% - 48px)); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand, .footer-brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; font-size: 16px; font-weight: 600; letter-spacing: -.02em; }
.brand-icon { display: none; width: 34px; height: 34px; object-fit: contain; }
.brand-icon[src] { display: block; }
#site-nav { display: flex; align-items: center; gap: 30px; }
#site-nav a, .footer-links a { color: var(--muted); text-decoration: none; font-size: 13px; transition: color .2s; }
#site-nav a:hover, .footer-links a:hover { color: var(--ink); }
.menu-button { display: none; border: 0; background: none; font: 500 13px var(--sans); color: var(--ink); }

.hero { padding: 116px 0 0; text-align: center; }
.eyebrow, .section-kicker { font: 500 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--sage); }
.hero h1 { max-width: 940px; margin: 24px auto 25px; font: 600 clamp(54px, 7.2vw, 104px)/.94 var(--sans); letter-spacing: -.065em; }
.hero h1 em { font-weight: 400; color: var(--sage); }
.hero-copy { max-width: 590px; margin: 0 auto; color: var(--muted); font: 400 18px/1.6 var(--sans); }
.hero-actions { display: flex; justify-content: center; gap: 10px; margin-top: 34px; }
.button { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; padding: 0 24px; border-radius: 100px; background: var(--ink); color: var(--white); text-decoration: none; font-size: 14px; font-weight: 500; transition: transform .2s, background .2s; }
.button:hover { transform: translateY(-2px); background: #3c3a33; }
.button.secondary { color: var(--ink); background: transparent; border: 1px solid var(--line); }
.hero-note { margin-top: 14px; color: #8b877d; font-size: 11px; }
.hero-note p { margin: 0; }

.app-stage { margin: 105px auto 0; padding: 46px 46px 0; background: #1d222b; border-radius: 26px 26px 0 0; overflow: hidden; }
.app-stage:empty { display: none; }
.app-stage.has-product-image { padding: 34px 34px 0; background: linear-gradient(135deg, #191c23, #343b47); }
.product-preview { display: block; width: 100%; height: auto; border: 1px solid rgba(255,255,255,.18); border-bottom: 0; border-radius: 12px 12px 0 0; box-shadow: 0 28px 80px rgba(0,0,0,.45); }
.app-window { text-align: left; min-width: 760px; overflow: hidden; border: 1px solid rgba(0,0,0,.18); border-bottom: 0; border-radius: 12px 12px 0 0; box-shadow: 0 30px 80px rgba(45, 54, 38, .3); background: #f7f5ef; }
.app-toolbar { height: 48px; padding: 0 16px; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; border-bottom: 1px solid #d8d4ca; background: #eeece6; }
.traffic-lights { display: flex; gap: 7px; }.traffic-lights i { width: 10px; height: 10px; border-radius: 50%; background: #c9c6be; }.traffic-lights i:first-child { background: #d48b78; }.traffic-lights i:nth-child(2) { background: #d5b56d; }.traffic-lights i:last-child { background: #86a47c; }
.toolbar-title { text-align: center; font-size: 11px; color: #716f68; }.toolbar-actions { display: flex; justify-content: end; gap: 8px; }.toolbar-actions span { width: 22px; height: 22px; border: 1px solid #d4d0c7; border-radius: 5px; }
.app-body { height: 520px; display: grid; grid-template-columns: 180px 260px 1fr; }
.app-sidebar { padding: 25px 12px; background: #e8e7e1; border-right: 1px solid #d7d4ca; }
.sidebar-label { padding: 0 10px 8px; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: #97938a; }.sidebar-label.spaced { margin-top: 25px; }
.sidebar-item { height: 32px; display: flex; align-items: center; gap: 9px; padding: 0 10px; border-radius: 6px; font-size: 11px; color: #68665f; }.sidebar-item.active { background: #d9d7d0; color: #32312d; }.sidebar-item i { font-style: normal; }.sidebar-item b { margin-left: auto; font-weight: 400; color: #969289; }.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sage); }.dot.ochre { background: #c19b58; }.dot.rose { background: #b9857b; }
.note-list { padding: 14px 10px; border-right: 1px solid #dedbd2; background: #f2f0eb; }.search { height: 29px; padding: 7px 9px; margin-bottom: 9px; color: #aaa69c; background: #e6e3dc; border-radius: 5px; font-size: 9px; }.note-card { position: relative; padding: 14px 13px; min-height: 100px; border-bottom: 1px solid #ddd9d0; }.note-card.active { background: #fff; border: 0; border-radius: 7px; box-shadow: 0 2px 6px rgba(0,0,0,.05); }.note-card b { font: 500 12px var(--sans); }.note-card p { margin: 7px 0 0; max-width: 170px; font-size: 9px; line-height: 1.5; color: #858178; }.note-card time { position: absolute; right: 12px; top: 15px; font-size: 8px; color: #aaa69e; }
.editor-page { padding: 70px clamp(35px, 6vw, 95px); background: #fbfaf7; }.editor-meta { font: 500 8px var(--mono); color: #a09b91; letter-spacing: .08em; }.editor-page h2 { margin: 18px 0 10px; font: 600 39px/1 var(--sans); letter-spacing: -.03em; }.editor-page p, .editor-page label { color: #66635c; font: 400 12px/1.7 var(--sans); }.editor-page .lead { margin-bottom: 32px; font-style: italic; color: #8b877e; }.editor-page blockquote { margin: 24px 0; padding: 9px 0 9px 18px; border-left: 2px solid #9aaa8e; color: #77756e; font: italic 15px/1.45 var(--sans); }.editor-page label { display: block; }.editor-page input { accent-color: var(--sage); }

.content-section { padding: 145px 0; border-top: 1px solid var(--line); }
.content-section-inner { width: min(1080px, calc(100% - 48px)); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 110px; align-items: center; }
.content-section-inner.no-visual { display: block; width: min(760px, calc(100% - 48px)); }
.content-section-inner.no-visual .section-copy h2, .content-section-inner.no-visual .section-copy > p { max-width: none; }
.content-section:nth-child(even) { background: var(--white); }
.content-section:nth-child(even) .section-copy { order: 2; }
.section-copy h2 { max-width: 520px; margin: 18px 0 22px; font: 600 clamp(40px, 4.7vw, 66px)/1.02 var(--sans); letter-spacing: -.05em; }
.section-copy > p { color: var(--muted); max-width: 490px; font-size: 16px; line-height: 1.7; }
.section-copy ul { list-style: none; padding: 20px 0 0; margin: 0; border-top: 1px solid var(--line); }
.section-copy li { position: relative; padding: 11px 0 11px 24px; color: #4f4d47; font-size: 13px; border-bottom: 1px solid var(--line); }
.section-copy li::before { content: "↗"; position: absolute; left: 0; color: var(--sage); }
.section-visual { display: grid; place-items: center; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: #111318; }
.content-section:nth-child(3n+2) .section-visual { background: #e8edf6; }.content-section:nth-child(3n+3) .section-visual { background: #e5e9ef; }
.section-visual img { display: block; width: 100%; height: auto; }
.closing { padding: 160px 24px; text-align: center; background: var(--ink); color: var(--white); }.closing .section-kicker { color: #8db1ff; }.closing h2 { max-width: 850px; margin: 23px auto; font: 600 clamp(48px, 6vw, 82px)/.98 var(--sans); letter-spacing: -.055em; }.closing p { max-width: 560px; margin: 0 auto 32px; color: #b6b2a9; line-height: 1.7; }.closing .button { color: var(--ink); background: var(--white); }
.site-footer { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; padding-top: 44px; padding-bottom: 44px; color: var(--muted); }.site-footer p { margin: 0; text-align: center; font-size: 11px; }.footer-links { display: flex; justify-content: end; gap: 20px; }
.error { padding: 80px 24px; text-align: center; color: #9e3e36; }

@media (max-width: 820px) {
    .site-header { width: calc(100% - 32px); }.menu-button { display: block; }#site-nav { display: none; position: absolute; top: 68px; left: 16px; right: 16px; padding: 20px; flex-direction: column; align-items: stretch; background: var(--white); border: 1px solid var(--line); z-index: 10; }#site-nav.open { display: flex; }
    .hero { padding-top: 80px; }.hero h1 { font-size: clamp(50px, 14vw, 78px); }.app-stage { margin-top: 70px; padding: 20px 20px 0; overflow-x: hidden; }.app-window { transform-origin: top left; transform: scale(.72); margin-bottom: -146px; }
    .content-section { padding: 95px 0; }.content-section-inner { grid-template-columns: 1fr; gap: 50px; }.content-section:nth-child(even) .section-copy { order: initial; }.section-visual { width: 100%; max-width: 560px; margin: auto; }.site-footer { grid-template-columns: 1fr; gap: 22px; text-align: center; }.footer-brand, .footer-links { justify-content: center; }
}
@media (max-width: 520px) {
    .shell, .content-section-inner, .content-section-inner.no-visual { width: calc(100% - 32px); }.hero { padding-top: 64px; }.hero h1 { font-size: 51px; }.hero-copy { font-size: 16px; }.hero-actions { flex-direction: column; align-items: stretch; }.app-stage { margin-left: -16px; margin-right: -16px; border-radius: 0; padding-left: 10px; }.section-copy h2 { font-size: 43px; }.closing { padding: 110px 20px; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }