:root {
  color-scheme: dark;
  --background: #171b17;
  --surface: #202720;
  --surface-soft: #293329;
  --line: #394339;
  --text: #f7f5eb;
  --muted: #bac5b6;
  --accent: #eda985;
  --leaf: #cee1ae;
  --cream: #f0ede1;
  --ink: #293027;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 30px; }
body { margin: 0; background: var(--background); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
[hidden] { display: none !important; }
::selection { background: var(--accent); color: var(--ink); }
.skip-link { position: absolute; left: 18px; top: -80px; z-index: 100; padding: 12px 18px; background: var(--cream); color: var(--ink); border-radius: 0 0 8px 8px; }
.skip-link:focus { top: 0; }
.site-shell { max-width: 1440px; margin: 0 auto; padding: 0 56px; overflow: clip; }
.site-header { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 30px; height: 96px; border-bottom: 1px solid var(--line); z-index: 20; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-size: 28px; font-weight: 750; letter-spacing: -1.9px; line-height: 1; white-space: nowrap; }
.brand-period { color: var(--accent); }
.brand-mark { display: inline-flex; align-items: flex-end; gap: 3px; height: 28px; transform: skew(-15deg); }
.brand-mark i { display: block; width: 7px; background: var(--accent); border-radius: 2px; }
.brand-mark i:nth-child(1) { height: 15px; }
.brand-mark i:nth-child(2) { height: 27px; }
.brand-mark i:nth-child(3) { height: 20px; }
.site-nav { display: flex; align-items: center; gap: 38px; color: #d1d8c9; font-size: 13px; font-weight: 550; }
.site-nav > a { transition: color .2s; }
.site-nav > a:hover { color: var(--accent); }
.site-nav .nav-signin { display: inline-flex; gap: 19px; align-items: center; margin-left: 11px; padding: 13px 17px; border: 1px solid #596553; border-radius: 8px; color: var(--text); }
.site-nav .nav-signin:hover { background: var(--surface-soft); }
.menu-toggle { display: none; align-items: center; gap: 10px; padding: 9px 0 9px 10px; border: 0; background: none; color: var(--text); font-size: 13px; }
.menu-icon { display: grid; gap: 5px; width: 20px; }
.menu-icon i { display: block; height: 1px; background: currentColor; }

.hero { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); align-items: center; gap: 46px; min-height: 685px; padding: 80px 0 92px; }
.hero-copy { position: relative; z-index: 1; }
.eyebrow { display: flex; align-items: center; gap: 11px; margin: 0; color: var(--leaf); font: 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 1.7px; text-transform: uppercase; }
.eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--leaf); }
h1, h2, h3, p { overflow-wrap: break-word; }
.hero h1 { max-width: 680px; margin: 26px 0 23px; font-size: clamp(64px, 6.5vw, 102px); font-weight: 520; letter-spacing: -.073em; line-height: 1.025; }
h1 em, h2 em, .workflow-quote em { color: var(--accent); font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: -.05em; }
.hero-lede { max-width: 480px; margin: 0; color: #c7d0c1; font-size: 17px; line-height: 1.75; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 23px; margin-top: 32px; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 53px; padding: 0 21px; border: 0; border-radius: 8px; font-size: 13px; font-weight: 700; transition: transform .2s, background .2s; }
.button:hover { transform: translateY(-3px); }
.button-primary { background: var(--accent); color: #292a21; }
.button-primary:hover { background: #fac09e; }
.inline-link { display: inline-flex; gap: 10px; align-items: center; padding-bottom: 4px; border-bottom: 1px solid #808d79; color: #d7dfd0; font-size: 13px; }
.inline-link:hover { color: var(--accent); border-color: var(--accent); }
.hero-caption { display: flex; align-items: center; gap: 9px; margin-top: 33px; color: #a4b09f; font: 10px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .3px; }
.hero-caption span { color: var(--leaf); font-size: 16px; }
.hero-art { position: relative; min-width: 0; padding: 50px 0 54px 12px; }
.art-orbit { position: absolute; border: 1px solid #748b6b38; border-radius: 50%; pointer-events: none; }
.art-orbit-one { width: 520px; height: 520px; left: 7%; top: -25px; }
.art-orbit-two { width: 690px; height: 690px; left: -10%; top: -110px; opacity: .5; }
.app-window { position: relative; display: grid; grid-template-columns: 142px minmax(0, 1fr); width: 100%; min-height: 456px; overflow: hidden; border: 1px solid #768572; border-radius: 15px; background: #e9eddf; color: var(--ink); box-shadow: 0 36px 95px #0006; transform: rotate(-2deg); }
.app-sidebar { position: relative; display: flex; flex-direction: column; padding: 18px 11px 17px; border-right: 1px solid #cbd3c3; background: #dbe3d2; font-size: 10px; }
.app-workspace { display: flex; align-items: center; gap: 7px; padding: 2px 3px 22px; font-weight: 700; line-height: 1.1; }
.app-workspace-icon { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 7px; background: #58734b; color: #f8f7ed; font-size: 14px; }
.app-workspace small { color: #72816c; font-size: 9px; font-weight: 500; }
.app-workspace b { margin-left: auto; color: #84947c; }
.app-side-label { padding: 8px 9px; color: #879781; font: 8px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 1px; }
.app-side-item { display: flex; align-items: center; gap: 10px; margin-top: 4px; padding: 10px 9px; border-radius: 5px; color: #667662; }
.app-side-item span { width: 13px; color: #7b8e74; font-size: 12px; }
.app-side-item.active { background: #c5d4bd; color: #344c32; font-weight: 700; }
.app-side-project { display: flex; align-items: center; gap: 6px; margin-top: 26px; padding: 11px 4px; color: #4e624b; white-space: nowrap; }
.project-dot { display: inline-block; width: 7px; height: 7px; flex: none; border-radius: 50%; background: #df9b78; }
.app-side-project span:last-child { margin-left: auto; }
.app-side-footer { display: flex; align-items: center; gap: 7px; margin-top: auto; padding: 12px 5px 0; border-top: 1px solid #c3cfc0; color: #5f725c; }
.app-avatar { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; background: #eab494; color: #4c4233; font-size: 8px; }
.app-main { min-width: 0; padding: 22px 23px; }
.app-topline, .app-focus-header { display: flex; justify-content: space-between; gap: 10px; color: #8d9986; font: 8px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .7px; }
.app-topline span:last-child { font-size: 16px; line-height: .7; }
.app-main h2 { max-width: 260px; margin: 29px 0 5px; color: #2d382c; font-size: 29px; font-weight: 560; letter-spacing: -1.4px; line-height: 1.15; }
.app-main > p { margin: 0; color: #71806e; font-size: 10px; }
.app-focus { margin-top: 29px; padding: 0 14px; border: 1px solid #c7d0c0; border-radius: 8px; background: #f4f5ec; }
.app-focus-header { padding: 15px 0 10px; color: #6b8064; }
.app-task { display: flex; align-items: center; gap: 8px; min-height: 46px; border-top: 1px solid #d9dfd3; color: #435342; font-size: 9px; }
.app-task.checked { color: #7e8e79; }
.app-task > span:nth-child(2) { min-width: 0; }
.app-task small { margin-left: auto; color: #849780; font-size: 8px; }
.app-check { display: grid; place-items: center; width: 15px; height: 15px; flex: none; border: 1px solid #a0b099; border-radius: 4px; color: #f6f8f2; }
.checked .app-check { background: #6d8b62; border-color: #6d8b62; }
.app-project-row { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-top: 20px; padding: 15px 0 0; border-top: 1px solid #cad3c4; color: #647760; font-size: 9px; }
.app-project-row span:first-child { display: flex; align-items: center; gap: 5px; font: 8px ui-monospace, SFMono-Regular, Menlo, monospace; }
.app-project-row b:last-child { color: #4f7145; }
.progress-note { position: absolute; right: -12px; bottom: 7px; width: 240px; padding: 21px 20px; border-radius: 10px; background: #d6e5b8; color: #30402a; box-shadow: 0 17px 38px #0004; transform: rotate(5deg); }
.progress-note > span { font: 8px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .8px; }
.progress-note strong { display: block; margin-top: 12px; font-size: 20px; font-weight: 540; letter-spacing: -.8px; line-height: 1.17; }
.progress-note em { font-family: Georgia, serif; font-weight: 400; }
.progress-note small { display: block; margin-top: 11px; color: #65765b; font-size: 8px; }
.progress-bars { display: flex; align-items: flex-end; gap: 5px; height: 43px; margin-top: 13px; }
.progress-bars i { width: 100%; border-radius: 3px 3px 0 0; background: #a8c08c; }
.progress-bars i:nth-child(1) { height: 32%; }
.progress-bars i:nth-child(2) { height: 54%; }
.progress-bars i:nth-child(3) { height: 45%; }
.progress-bars i:nth-child(4) { height: 72%; }
.progress-bars i:nth-child(5) { height: 62%; }
.progress-bars i:nth-child(6) { height: 100%; background: #5d814e; }
.progress-bars i:nth-child(7) { height: 83%; }
.art-scribble { position: absolute; top: 0; right: 12px; color: #c4d2b6; font: italic 13px Georgia, serif; transform: rotate(7deg); }
.art-scribble b { display: block; font-size: 25px; font-weight: 400; }
.value-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 27px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: #c3cdbf; font-size: 13px; }
.value-strip span { display: flex; gap: 13px; align-items: center; }
.value-strip b { color: var(--leaf); font: 10px ui-monospace, SFMono-Regular, Menlo, monospace; }

.section { padding: 106px 0; }
.section-intro { display: grid; grid-template-columns: 1.15fr .85fr; gap: 24px 50px; align-items: end; margin-bottom: 43px; }
.section-intro .eyebrow { grid-column: 1 / -1; }
.section-intro h2 { margin: 0; font-size: clamp(44px, 4.2vw, 66px); font-weight: 520; letter-spacing: -.064em; line-height: 1.1; }
.section-intro > p:last-child { max-width: 400px; margin: 0 0 4px auto; color: var(--muted); font-size: 15px; line-height: 1.7; }
.product-section { margin: 96px -22px 0; padding: 77px 60px 68px; border-radius: 18px; background: var(--cream); color: var(--ink); }
.product-section .eyebrow { color: #607a54; }
.product-section h2 em { color: #9d674b; }
.product-section .section-intro > p:last-child { color: #606c5c; }
.product-explorer { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; }
.feature-tabs { display: flex; flex-direction: column; border-top: 1px solid #cdd2c5; }
.feature-tabs button { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 81px; padding: 0 12px; border: 0; border-bottom: 1px solid #cdd2c5; background: transparent; color: #71806b; text-align: left; font-size: 15px; font-weight: 550; }
.feature-tabs button span { color: #899486; font: 10px ui-monospace, SFMono-Regular, Menlo, monospace; }
.feature-tabs button b { margin-left: auto; color: #8e9c86; font-size: 17px; font-weight: 400; }
.feature-tabs button:hover, .feature-tabs button[aria-selected="true"] { color: #293c2b; }
.feature-tabs button[aria-selected="true"] { background: #dfe7d5; }
.feature-tabs button[aria-selected="true"] b { color: #486c43; }
.feature-panels { min-width: 0; }
.feature-panel { display: grid; grid-template-columns: minmax(200px, .76fr) minmax(0, 1.24fr); gap: 26px; min-height: 395px; padding: 28px; border-radius: 12px; background: #dfe6d4; }
.feature-copy { display: flex; flex-direction: column; align-items: flex-start; padding: 12px 0 4px; }
.feature-kicker { color: #597652; font: 10px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 1px; }
.feature-copy h3 { max-width: 250px; margin: 40px 0 16px; font-size: 30px; font-weight: 550; letter-spacing: -1.2px; line-height: 1.17; }
.feature-copy p { max-width: 270px; margin: 0; color: #596b56; font-size: 13px; line-height: 1.65; }
.feature-copy ul { display: grid; gap: 10px; margin: auto 0 0; padding: 22px 0 0 16px; color: #53694d; font-size: 11px; line-height: 1.3; }
.feature-canvas { min-width: 0; min-height: 335px; padding: 19px 20px; overflow: hidden; border: 1px solid #c0cdb7; border-radius: 10px; background: #f4f4e9; box-shadow: 0 18px 35px #485b3922; }
.canvas-top, .canvas-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.canvas-top { padding-bottom: 15px; border-bottom: 1px solid #d9dfd1; color: #7e8d78; font: 9px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .4px; }
.canvas-top span:last-child { color: #65815d; font-size: 17px; }
.canvas-title, .finish-heading { margin: 19px 0 15px; font-size: 21px; font-weight: 550; letter-spacing: -.7px; }
.canvas-card { display: flex; align-items: center; gap: 10px; min-height: 61px; margin-top: 7px; padding: 10px; border: 1px solid #dce2d5; border-radius: 6px; background: #fffdf5; font-size: 10px; }
.canvas-check { display: grid; place-items: center; width: 19px; height: 19px; flex: none; border: 1px solid #9baa96; border-radius: 5px; color: #fff; }
.canvas-check.done { background: #688b5f; border-color: #688b5f; }
.canvas-card small { display: block; margin-top: 5px; color: #8a9985; font-size: 8px; }
.canvas-card b { margin-left: auto; color: #668461; font-size: 8px; font-weight: 500; }
.canvas-bottom { margin-top: 14px; color: #71846d; font: 9px ui-monospace, SFMono-Regular, Menlo, monospace; }
.canvas-bottom span:last-child { font-size: 17px; }
.context-note { display: flex; gap: 10px; margin-top: 16px; padding: 17px 13px; border-radius: 6px; background: #fffdf5; }
.note-avatar { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; background: #ecbd9c; color: #4e4b38; font-size: 8px; }
.note-avatar.alternate { background: #b8d4ae; }
.context-note strong { font-size: 11px; }
.context-note p { margin: 7px 0 10px; color: #61705c; font-size: 10px; line-height: 1.55; }
.context-note small { color: #94a18e; font: 8px ui-monospace, SFMono-Regular, Menlo, monospace; }
.finish-progress { height: 7px; margin: 20px 0 22px; overflow: hidden; border-radius: 5px; background: #d9e2d0; }
.finish-progress span { display: block; width: 58%; height: 100%; background: #6e955f; }
.finish-step { display: flex; align-items: center; gap: 12px; min-height: 66px; border-top: 1px solid #dde3d6; font-size: 11px; }
.finish-step b { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid #c4d1bc; border-radius: 50%; color: #7d9575; font-size: 10px; font-weight: 500; }
.finish-step:first-of-type b { background: #688b5f; color: #fff; }
.finish-step.current b { border-color: #d99c7c; background: #d99c7c; color: #fff; }
.finish-step small { display: block; margin-top: 5px; color: #849681; font-size: 9px; }

.workflow-section { padding-top: 114px; }
.workflow-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; }
.workflow-steps article { min-width: 0; padding: 20px 22px 27px; border: 1px solid var(--line); border-radius: 12px; background: #1d231d; }
.step-number { color: var(--leaf); font: 10px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 1px; }
.step-illustration { position: relative; display: flex; align-items: center; justify-content: center; height: 176px; margin-top: 20px; overflow: hidden; border-radius: 8px; }
.capture-art { background: #354331; }
.capture-art i { position: absolute; width: 93px; height: 111px; border-radius: 5px; background: #d6d9bb; box-shadow: 0 6px 14px #0003; }
.capture-art i:nth-child(1) { transform: translateX(-35px) rotate(-14deg); }
.capture-art i:nth-child(2) { background: #eeb38f; transform: translateX(1px) rotate(1deg); }
.capture-art i:nth-child(3) { background: #e6e0be; transform: translateX(37px) rotate(15deg); }
.shape-art { gap: 9px; background: #4a3b34; color: #eee5d9; }
.shape-art span { padding: 12px 10px; border: 1px solid #a08774; border-radius: 6px; font-size: 12px; }
.shape-art span:last-child { border-color: #e7ac86; background: #745241; }
.shape-art b { color: #d9a887; font-size: 24px; font-weight: 400; }
.share-art { gap: 0; background: #35413b; }
.share-art span { display: grid; place-items: center; width: 62px; height: 62px; margin-left: -7px; border: 4px solid #35413b; border-radius: 50%; background: #e4bd9f; color: #4b4938; font-size: 14px; }
.share-art span:first-child { z-index: 3; background: #7da36b; color: #fff; }
.share-art span:nth-child(2) { z-index: 2; }
.share-art span:nth-child(3) { background: #cbdbae; }
.workflow-steps h3 { margin: 25px 0 9px; font-size: 22px; font-weight: 520; letter-spacing: -.7px; }
.workflow-steps p { max-width: 320px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.workflow-quote { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; margin-top: 22px; padding: 28px 35px; border-radius: 12px; background: #29352a; }
.workflow-quote > span { align-self: start; color: var(--leaf); font: 64px/.8 Georgia, serif; }
.workflow-quote p { margin: 0; font-size: clamp(23px, 2.6vw, 37px); letter-spacing: -.9px; line-height: 1.2; }
.workflow-quote em { color: var(--leaf); }
.workflow-quote small { color: #9fb29b; font: 9px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .8px; }

.use-cases-section { padding-top: 34px; }
.use-case-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; }
.use-case-card { display: flex; flex-direction: column; min-width: 0; padding: 18px 19px 21px; border: 1px solid var(--line); border-radius: 12px; background: #1d231d; }
.use-case-art { display: flex; align-items: center; justify-content: center; height: 155px; margin-bottom: 25px; overflow: hidden; border-radius: 8px; }
.creative-art { background: #354331; }
.creative-sheet { display: block; width: 77px; height: 101px; margin-left: -22px; border-radius: 4px; background: #dddaba; box-shadow: 0 7px 17px #0003; }
.creative-sheet:first-child { margin-left: 0; }
.sheet-one { transform: rotate(-13deg); }
.sheet-two { background: #e5a887; transform: rotate(3deg); }
.sheet-three { background: #e8e1c6; transform: rotate(16deg); }
.editorial-art { justify-content: space-around; padding: 18px; background: #4a3a33; color: #f5d2b7; }
.editorial-art span { font-size: 29px; line-height: 1.03; letter-spacing: -1px; }
.editorial-art em { font-family: Georgia, serif; font-weight: 400; }
.editorial-art b { font: 48px Georgia, serif; }
.studio-art { gap: 7px; background: #344031; }
.studio-art span { display: grid; place-items: center; width: 49px; height: 49px; border: 1px solid #69815c; border-radius: 10px; color: #c1d3b1; font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; }
.studio-art span:first-child { background: #6d8b5c; color: #fff; }
.studio-art span:nth-of-type(2) { border-color: #bb8065; background: #bb8065; color: #fff; }
.studio-art i { width: 22px; border-top: 1px dashed #8ba27b; }
.case-label { color: var(--leaf); font: 10px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .7px; }
.use-case-card h3 { margin: 17px 0 12px; font-size: 22px; font-weight: 530; letter-spacing: -.6px; line-height: 1.2; }
.use-case-card p { margin: 0 0 14px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.case-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: auto; padding-top: 17px; border-top: 1px solid var(--line); color: #d4e4c7; font: 10px ui-monospace, SFMono-Regular, Menlo, monospace; }
.case-flow span { color: var(--accent); }
.case-note { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 21px; margin-top: 17px; padding: 25px 27px; border-radius: 10px; background: #2b362a; }
.case-note-icon { color: var(--leaf); font-size: 32px; }
.case-note strong { display: block; font-size: 17px; font-weight: 540; }
.case-note p { max-width: 630px; margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.case-note a { flex: none; padding-bottom: 5px; border-bottom: 1px solid #91aa85; color: #d8e8cb; font-size: 11px; }
.case-note a:hover { color: #fff; border-color: #fff; }
.case-note a span { margin-left: 8px; }

.reading-section { margin: 0 -22px; padding: 77px 60px; border-radius: 18px; background: #283528; }
.reading-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.reading-card { display: flex; flex-direction: column; min-width: 0; padding: 20px; border: 1px solid #53644e; border-radius: 11px; background: #202b21; transition: transform .2s, border-color .2s; }
.reading-card:hover { transform: translateY(-4px); border-color: #a4bc94; }
.reading-number { color: var(--leaf); font: 10px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .8px; }
.reading-art { display: flex; align-items: center; justify-content: center; gap: 9px; height: 132px; margin: 18px 0 22px; overflow: hidden; border-radius: 7px; }
.week-art { align-items: flex-end; padding-bottom: 32px; background: #394d39; }
.week-art i { width: 36px; height: 36px; border: 1px solid #88a17c; border-radius: 5px; background: #5a7553; }
.week-art i:nth-child(2) { height: 54px; background: #d6e2b6; }
.week-art i:nth-child(3) { height: 70px; background: #efad87; }
.week-art i:nth-child(4) { height: 48px; }
.week-art i:nth-child(5) { height: 57px; }
.handoff-art { gap: 17px; background: #47392f; color: #f4d3b7; }
.handoff-art i { display: grid; place-items: center; width: 70px; height: 70px; border: 1px solid #a67d67; border-radius: 7px; font: italic 19px Georgia, serif; }
.handoff-art i:last-child { background: #dca382; color: #3e332d; }
.handoff-art b { font-size: 26px; font-weight: 400; }
.context-art { flex-direction: column; gap: 9px; background: #384638; }
.context-art i { width: 70%; height: 16px; border-radius: 4px; background: #6c8966; }
.context-art i:nth-child(2) { width: 57%; margin-left: 30px; background: #cbdcaf; }
.context-art i:nth-child(3) { width: 65%; margin-right: 18px; background: #e6ac8b; }
.reading-card h3 { margin: 0 0 11px; font-size: 22px; font-weight: 530; letter-spacing: -.6px; }
.reading-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.reading-link { display: flex; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 26px; color: #dcebcf; font-size: 11px; font-weight: 600; }
.reading-link b { font-size: 16px; font-weight: 400; }
.journal-link { display: inline-flex; gap: 15px; align-items: center; margin-top: 28px; padding-bottom: 5px; border-bottom: 1px solid #a6bd99; color: #e0eed7; font-size: 13px; }
.journal-link:hover { color: #fff; border-color: #fff; }

.demo-section { padding-top: 41px; }
.demo-shell { overflow: hidden; border: 1px solid #56644f; border-radius: 14px; background: #202820; }
.demo-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 26px 30px; border-bottom: 1px solid var(--line); }
.demo-overline { color: #a5b69c; font: 9px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .8px; }
.demo-toolbar h3 { display: flex; align-items: center; gap: 10px; margin: 9px 0 3px; font-size: 24px; font-weight: 550; letter-spacing: -.8px; }
.demo-toolbar p { margin: 0; color: #a6b5a0; font-size: 11px; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--leaf); }
.week-tabs { display: flex; flex: none; gap: 3px; padding: 4px; border: 1px solid #465740; border-radius: 8px; background: #171e17; }
.week-tabs button { padding: 9px 13px; border: 0; border-radius: 5px; background: transparent; color: #a7b9a0; font-size: 11px; }
.week-tabs button[aria-pressed="true"] { background: #4a6042; color: #f6f6ed; }
.task-form { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 21px; padding: 21px 30px; border-bottom: 1px solid var(--line); color: #dce5d6; font-size: 12px; }
.task-form > div { display: flex; gap: 8px; }
.task-form input { min-width: 0; width: 100%; min-height: 42px; padding: 0 13px; border: 1px solid #50614a; border-radius: 6px; background: #182118; color: var(--text); font-size: 12px; }
.task-form input::placeholder { color: #a3b19e; }
.task-form button { flex: none; padding: 0 16px; border: 0; border-radius: 6px; background: var(--leaf); color: #293725; font-size: 11px; font-weight: 700; }
.task-form button:hover { background: #dfefc4; }
.task-form button span { margin-left: 10px; }
.board-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 27px 30px 31px; }
.board-column { min-width: 0; }
.column-head { display: flex; align-items: center; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid #41513d; color: #d5dfce; font-size: 12px; font-weight: 600; }
.column-head i { width: 7px; height: 7px; border-radius: 50%; background: #a2ae96; }
.board-column:nth-child(2) .column-head i { background: var(--accent); }
.board-column:nth-child(3) .column-head i { background: var(--leaf); }
.column-head span { margin-left: auto; color: #a7b69f; font: 10px ui-monospace, SFMono-Regular, Menlo, monospace; }
.task-card { min-height: 142px; margin-top: 9px; padding: 15px 16px; border: 1px solid #43513f; border-radius: 8px; background: #293429; }
.task-card:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.task-category { color: #c3d6b2; font: 9px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .8px; text-transform: uppercase; }
.task-card h4 { min-height: 38px; margin: 13px 0 11px; font-size: 14px; font-weight: 500; line-height: 1.4; }
.task-bottom { display: flex; align-items: end; gap: 5px; color: #aebda6; font-size: 10px; }
.task-bottom > span:first-child { margin-right: auto; }
.task-bottom button { padding: 6px 8px; border: 1px solid #6b825f; border-radius: 5px; background: #354732; color: #e3efdc; font-size: 10px; }
.task-bottom button:hover { background: #45623d; }
.task-bottom button.secondary { border-color: transparent; background: transparent; color: #aebda6; }
.task-bottom button.secondary:hover { color: var(--text); }
.task-done { color: var(--leaf); }
.empty-column { margin: 11px 0 0; padding: 23px 14px; border: 1px dashed #50604a; border-radius: 8px; color: #aebda7; font-size: 11px; line-height: 1.5; }
.demo-footer { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 20px 30px; border-top: 1px solid var(--line); }
.demo-progress { width: min(100%, 350px); }
.demo-progress-head { display: flex; justify-content: space-between; gap: 10px; color: #a9b9a0; font: 9px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .5px; }
.demo-progress-head strong { color: #dbe9cd; font-weight: 500; }
.progress-track { height: 6px; margin-top: 9px; overflow: hidden; border-radius: 5px; background: #3c4b37; }
.progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--leaf); transition: width .25s; }
.demo-progress p { min-height: 15px; margin: 7px 0 0; color: #a2b39b; font-size: 10px; }
.reset-button { flex: none; padding: 7px 0; border: 0; border-bottom: 1px solid #7c9470; background: transparent; color: #d5e4c7; font-size: 11px; }
.reset-button:hover { color: #fff; border-color: #fff; }
.reset-button span { margin-left: 8px; }
.no-script { color: var(--muted); font-size: 13px; }

.questions-section { padding-top: 45px; }
.question-list { border-top: 1px solid var(--line); }
.question-list details { border-bottom: 1px solid var(--line); }
.question-list summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 5px; color: var(--text); cursor: pointer; font-size: 18px; font-weight: 520; list-style: none; }
.question-list summary::-webkit-details-marker { display: none; }
.question-list summary span { color: var(--leaf); font-size: 26px; font-weight: 300; transition: transform .2s; }
.question-list details[open] summary span { transform: rotate(45deg); }
.question-list details p { max-width: 740px; margin: -4px 0 25px 5px; color: var(--muted); font-size: 14px; line-height: 1.75; }
.question-list details a { border-bottom: 1px solid #8cab7f; color: #d8ebca; }
.question-list details a:hover { color: #fff; }

.closing-section { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin: 26px 0 96px; padding: 57px 62px; border-radius: 15px; background: #e3b296; color: #302d26; }
.closing-section .eyebrow { color: #624f3d; }
.closing-section h2 { margin: 19px 0 10px; font-size: clamp(46px, 4.8vw, 70px); font-weight: 550; letter-spacing: -.07em; line-height: 1.03; }
.closing-section h2 em { color: #53654a; }
.closing-section p:last-child { margin: 0; color: #604f43; font-size: 14px; }
.closing-section .button-primary { flex: none; background: #273728; color: #f5f4e8; }
.closing-section .button-primary:hover { background: #3d523a; }
.site-footer { display: grid; grid-template-columns: 1fr auto; gap: 28px; padding: 0 0 40px; border-top: 1px solid var(--line); }
.site-footer > div { padding-top: 28px; }
.site-footer .brand { font-size: 24px; }
.site-footer .brand-mark { transform: scale(.8) skew(-15deg); transform-origin: left center; margin-right: -6px; }
.site-footer p { margin: 14px 0 0; color: #acbba5; font-size: 12px; }
.site-footer nav { display: flex; align-items: start; gap: 25px; padding-top: 34px; color: #ced9c8; font-size: 12px; }
.site-footer nav a:hover { color: var(--accent); }
.site-footer small { grid-column: 1 / -1; color: #8da18a; font: 9px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 1px; }

@media (max-width: 1180px) {
  .site-shell { padding: 0 38px; }
  .site-nav { gap: 24px; }
  .hero { gap: 22px; min-height: 600px; }
  .hero h1 { font-size: clamp(58px, 6vw, 78px); }
  .app-window { grid-template-columns: 118px minmax(0, 1fr); }
  .app-sidebar { padding-left: 6px; padding-right: 6px; }
  .app-main { padding: 19px 16px; }
  .progress-note { right: -2px; }
  .product-section { padding-left: 40px; padding-right: 40px; }
  .product-explorer { grid-template-columns: 220px minmax(0, 1fr); }
  .feature-panel { gap: 14px; padding: 20px; }
}

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding: 75px 0 65px; }
  .hero-copy { max-width: 740px; }
  .hero h1 { max-width: 700px; font-size: clamp(62px, 9vw, 86px); }
  .hero-art { max-width: 680px; width: 100%; margin: 12px auto 0; padding-left: 0; }
  .app-window { grid-template-columns: 142px minmax(0, 1fr); }
  .app-main { padding: 22px 23px; }
  .product-section { margin-top: 65px; }
  .product-explorer { grid-template-columns: 1fr; }
  .feature-tabs { flex-direction: row; }
  .feature-tabs button { min-height: 62px; font-size: 13px; }
  .feature-tabs button b { display: none; }
  .feature-panel { grid-template-columns: minmax(200px, .75fr) minmax(0, 1.25fr); }
  .workflow-quote small { display: none; }
  .use-case-grid, .reading-grid { grid-template-columns: 1fr 1fr; }
  .use-case-card:last-child, .reading-card:last-child { grid-column: 1 / -1; }
  .case-note { grid-template-columns: auto 1fr; }
  .case-note a { grid-column: 2; justify-self: start; }
}

@media (max-width: 760px) {
  .site-shell { padding: 0 23px; }
  .site-header { height: 77px; }
  .brand { font-size: 25px; }
  body.js .menu-toggle { display: flex; }
  body.js .site-nav { display: none; position: absolute; top: 76px; left: -23px; right: -23px; flex-direction: column; align-items: stretch; gap: 0; padding: 10px 23px 24px; border-bottom: 1px solid var(--line); background: var(--background); box-shadow: 0 20px 30px #0004; }
  body.js .site-nav.is-open { display: flex; }
  .site-nav > a { padding: 14px 0; }
  .site-nav .nav-signin { justify-content: space-between; margin: 10px 0 0; padding: 14px; }
  body:not(.js) .site-header { height: auto; min-height: 77px; flex-wrap: wrap; }
  body:not(.js) .site-nav { flex-wrap: wrap; gap: 0 18px; width: 100%; padding-bottom: 13px; }
  .hero { gap: 20px; padding: 57px 0 50px; }
  .hero h1 { max-width: 600px; margin: 23px 0 19px; font-size: clamp(54px, 11vw, 74px); }
  .hero-lede { font-size: 15px; line-height: 1.65; }
  .hero-actions { gap: 19px; }
  .hero-caption { margin-top: 25px; }
  .hero-art { padding: 35px 0 51px; }
  .app-window { min-height: 390px; }
  .progress-note { width: 198px; padding: 16px; bottom: 4px; }
  .progress-note strong { font-size: 17px; }
  .progress-bars { height: 30px; }
  .art-scribble { display: none; }
  .value-strip { grid-template-columns: 1fr; gap: 15px; padding: 21px 0; font-size: 12px; }
  .section { padding: 74px 0; }
  .section-intro { grid-template-columns: 1fr; gap: 18px; margin-bottom: 29px; }
  .section-intro .eyebrow { grid-column: auto; }
  .section-intro h2 { font-size: clamp(42px, 8vw, 60px); }
  .section-intro > p:last-child { max-width: 500px; margin: 0; font-size: 14px; }
  .product-section { margin: 55px -8px 0; padding: 51px 25px 32px; }
  .feature-panel { grid-template-columns: 1fr; }
  .feature-copy { padding: 4px; }
  .feature-copy h3 { max-width: none; margin: 18px 0 10px; font-size: 29px; }
  .feature-copy p { max-width: 500px; }
  .feature-copy ul { margin-top: 12px; padding-top: 6px; }
  .feature-canvas { min-height: 0; }
  .workflow-section { padding-top: 75px; }
  .workflow-steps { grid-template-columns: 1fr; }
  .workflow-steps article { padding: 18px 20px 24px; }
  .step-illustration { height: 155px; }
  .workflow-steps h3 { margin-top: 17px; }
  .workflow-quote { padding: 23px; }
  .workflow-quote p { font-size: 27px; }
  .use-cases-section { padding-top: 23px; }
  .use-case-grid, .reading-grid { grid-template-columns: 1fr; }
  .use-case-card:last-child, .reading-card:last-child { grid-column: auto; }
  .use-case-art { height: 143px; }
  .case-note { padding: 22px; gap: 13px; }
  .case-note strong { font-size: 15px; }
  .reading-section { margin: 0 -8px; padding: 53px 25px; }
  .reading-art { height: 125px; }
  .demo-section { padding-top: 16px; }
  .demo-toolbar { flex-direction: column; align-items: flex-start; padding: 23px; }
  .task-form { grid-template-columns: 1fr; gap: 9px; padding: 17px 23px; }
  .board-columns { grid-template-columns: 1fr; gap: 26px; padding: 22px 23px; }
  .task-card { min-height: 0; }
  .task-card h4 { min-height: 0; }
  .demo-footer { padding: 18px 23px; }
  .questions-section { padding-top: 35px; }
  .question-list summary { font-size: 16px; }
  .question-list details p { font-size: 13px; }
  .closing-section { flex-direction: column; align-items: flex-start; margin: 15px 0 69px; padding: 38px 30px; }
  .site-footer { grid-template-columns: 1fr; gap: 18px; }
  .site-footer nav { flex-wrap: wrap; gap: 15px 24px; padding-top: 0; }
  .site-footer small { grid-column: auto; }
}

@media (max-width: 480px) {
  .hero h1 { font-size: clamp(50px, 13vw, 62px); }
  .hero-actions { align-items: flex-start; flex-direction: column; }
  .app-window { grid-template-columns: 78px minmax(0, 1fr); min-height: 354px; }
  .app-sidebar { padding: 12px 4px; }
  .app-workspace { flex-direction: column; align-items: flex-start; gap: 2px; padding-bottom: 15px; font-size: 8px; }
  .app-workspace-icon { width: 22px; height: 22px; font-size: 11px; }
  .app-workspace small, .app-workspace b, .app-side-label, .app-side-item, .app-side-project, .app-side-footer { font-size: 7px; }
  .app-side-item { gap: 4px; padding: 8px 3px; }
  .app-side-item span { width: 10px; font-size: 9px; }
  .app-side-project { white-space: normal; }
  .app-side-footer { gap: 2px; }
  .app-avatar { width: 17px; height: 17px; font-size: 6px; }
  .app-main { padding: 13px 10px; }
  .app-topline { font-size: 6px; }
  .app-main h2 { margin-top: 18px; font-size: 18px; letter-spacing: -.7px; }
  .app-main > p { font-size: 8px; }
  .app-focus { margin-top: 18px; padding: 0 7px; }
  .app-focus-header { padding: 11px 0 7px; font-size: 6px; }
  .app-task { gap: 5px; min-height: 37px; font-size: 7px; }
  .app-task small { display: none; }
  .app-check { width: 12px; height: 12px; font-size: 7px; }
  .app-project-row { font-size: 7px; }
  .progress-note { width: 165px; padding: 13px; }
  .progress-note strong { margin-top: 8px; font-size: 15px; }
  .progress-note small { display: none; }
  .progress-bars { height: 23px; margin-top: 8px; }
  .feature-tabs button { flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; min-height: 68px; padding: 7px; font-size: 11px; }
  .feature-tabs button span { font-size: 9px; }
  .feature-panel { padding: 14px; }
  .feature-canvas { padding: 14px; }
  .canvas-card { font-size: 9px; }
  .workflow-quote { grid-template-columns: auto 1fr; gap: 8px; }
  .workflow-quote p { font-size: 23px; }
  .demo-footer { flex-direction: column; align-items: flex-start; gap: 12px; }
  .task-form > div { flex-direction: column; }
  .task-form button { min-height: 40px; }
  .closing-section h2 { font-size: 44px; }
  .case-note { grid-template-columns: 1fr; }
  .case-note a { grid-column: auto; }
}

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