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

:root {
  --ink: #17251f;
  --cream: #f6f2e8;
  --paper: #fffdf7;
  --sage: #dce7d2;
  --green: #244b3b;
  --coral: #ec7c62;
  --yellow: #edc767;
  --blue: #cedfe4;
  --line: rgba(23, 37, 31, 0.14);
  --serif: "DM Serif Display", Georgia, serif;
  --sans: "DM Sans", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }

.site-header {
  align-items: center;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  min-height: 84px;
  padding: 0 clamp(24px, 5vw, 76px);
}
.brand { align-items: center; display: inline-flex; font-family: var(--serif); font-size: 22px; gap: 10px; width: fit-content; }
.brand-mark { align-items: center; background: var(--ink); border-radius: 50%; color: var(--cream); display: inline-flex; font-style: italic; height: 31px; justify-content: center; width: 31px; }
.site-nav { display: flex; font-size: 13px; gap: 34px; }
.site-nav a, footer a { transition: opacity 160ms ease; }
.site-nav a:hover, footer a:hover { opacity: .55; }
.header-cta { justify-self: end; }
.button {
  align-items: center;
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 3px;
  color: white;
  display: inline-flex;
  font-size: 13px;
  font-weight: 600;
  gap: 24px;
  justify-content: center;
  padding: 17px 22px;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.button:hover { box-shadow: 4px 4px 0 var(--coral); transform: translate(-2px, -2px); }
.button-small { padding: 11px 19px; }
.menu-toggle { background: none; border: 0; display: none; }

.hero { display: grid; grid-template-columns: .9fr 1.1fr; min-height: 660px; overflow: hidden; padding: 70px 0 86px clamp(24px, 8vw, 125px); }
.hero-copy { align-self: center; max-width: 580px; padding-right: 46px; position: relative; z-index: 2; }
.eyebrow { align-items: center; display: flex; font-size: 11px; font-weight: 600; gap: 10px; letter-spacing: .13em; text-transform: uppercase; }
.eyebrow > span { background: var(--coral); display: inline-block; height: 1px; width: 23px; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-family: var(--serif); font-size: clamp(56px, 6vw, 88px); font-weight: 400; letter-spacing: -.04em; line-height: .97; margin: 25px 0 28px; }
h1 em, h2 em, blockquote em { color: var(--coral); font-weight: 400; }
.hero-intro { color: #58625d; font-size: 16px; line-height: 1.8; max-width: 520px; }
.hero-actions { align-items: center; display: flex; gap: 28px; margin-top: 35px; }
.text-link { border-bottom: 1px solid var(--ink); font-size: 13px; font-weight: 600; padding: 8px 0; }
.text-link span { color: var(--coral); margin-left: 6px; }
.social-proof { align-items: center; display: flex; gap: 14px; margin-top: 42px; }
.social-proof p { font-size: 11px; line-height: 1.6; margin: 0; }
.social-proof strong { font-size: 12px; }
.avatars { display: flex; }
.avatars span { align-items: center; background: #d5c1ad; border: 2px solid var(--cream); border-radius: 50%; display: flex; font-size: 8px; height: 30px; justify-content: center; margin-left: -7px; width: 30px; }
.avatars span:first-child { background: #9bb1ac; margin: 0; }.avatars span:nth-child(2) { background: #d9a08b; }.avatars span:nth-child(3) { background: #c5b55c; }.avatars span:last-child { background: var(--ink); color: white; }

.hero-visual { min-height: 560px; position: relative; }
.sun-shape { background: var(--coral); border-radius: 50%; height: 535px; position: absolute; right: -150px; top: -45px; width: 535px; }
.app-window { background: var(--paper); border: 1px solid rgba(24, 37, 31, .25); border-radius: 10px; box-shadow: 0 30px 70px rgba(45, 47, 32, .18); left: 0; overflow: hidden; position: absolute; top: 40px; width: min(720px, 94%); }
.window-topbar { align-items: center; border-bottom: 1px solid var(--line); color: #9b9c94; display: flex; font-size: 8px; height: 35px; justify-content: space-between; padding: 0 13px; }
.window-dots { display: flex; gap: 4px; }.window-dots i { background: #d7d4ca; border-radius: 50%; height: 5px; width: 5px; }
.mini-avatar { align-items: center; background: var(--yellow); border-radius: 50%; color: var(--ink); display: flex; height: 18px; justify-content: center; width: 18px; }
.workspace { display: grid; grid-template-columns: 145px 1fr; min-height: 420px; }
.sidebar { background: #eeece2; border-right: 1px solid var(--line); font-size: 9px; padding: 22px 14px; }
.sidebar strong { align-items: center; display: flex; font-size: 10px; gap: 7px; margin-bottom: 25px; }.tiny-logo { align-items: center; background: var(--ink); border-radius: 50%; color: white; display: inline-flex; height: 17px; justify-content: center; width: 17px; }
.sidebar ul { list-style: none; margin: 0 0 26px; padding: 0; }.sidebar li { align-items: center; border-radius: 4px; color: #737870; display: flex; gap: 8px; margin: 3px 0; padding: 7px 8px; }.sidebar li.active { background: #deded5; color: var(--ink); font-weight: 600; }.sidebar li b { background: #d5d3ca; border-radius: 8px; font-size: 7px; margin-left: auto; padding: 2px 5px; }.sidebar small { color: #a0a198; display: block; font-size: 7px; letter-spacing: .08em; margin: 0 0 7px 7px; }.project-dot { border-radius: 50%; display: inline-block; height: 6px; width: 6px; }.project-dot.coral { background: var(--coral); }.project-dot.yellow { background: var(--yellow); }.project-dot.green { background: #72947e; }
.dashboard { padding: 35px 40px; }.dash-heading { align-items: end; display: flex; justify-content: space-between; }.dash-heading p { color: #a2a299; font-size: 8px; margin-bottom: 4px; }.dash-heading h2 { font-family: var(--serif); font-size: 24px; font-weight: 400; margin: 0; }.dash-heading button { background: var(--ink); border: 0; border-radius: 50%; color: white; height: 25px; width: 25px; }
.progress-card { background: var(--sage); border-radius: 5px; margin-top: 24px; padding: 15px 17px; }.card-label { align-items: center; display: flex; font-size: 8px; justify-content: space-between; letter-spacing: .06em; }.progress { background: rgba(255,255,255,.7); border-radius: 4px; height: 6px; margin: 10px 0 7px; overflow: hidden; }.progress i { background: var(--green); display: block; height: 100%; width: 68%; }.progress-card p { color: #6a786e; font-size: 7px; margin: 0; }
.dash-grid { display: grid; gap: 12px; grid-template-columns: 1.2fr .8fr; margin-top: 13px; }.task-card, .note-card { border: 1px solid var(--line); border-radius: 5px; min-height: 150px; padding: 16px; }.task-card h3 { font-family: var(--serif); font-size: 17px; font-weight: 400; margin: 25px 0 5px; }.task-card > p { color: #8b8d85; font-size: 8px; }.task-meta { align-items: center; display: flex; font-size: 7px; justify-content: space-between; margin-top: 22px; }.task-meta > span:last-child { align-items: center; background: #b7c8bd; border-radius: 50%; display: flex; height: 19px; justify-content: center; width: 19px; }.tag { background: #f2d3cb; border-radius: 10px; color: #a35240; padding: 4px 7px; }.note-card { background: var(--yellow); border: 0; position: relative; }.scribble { font-size: 18px; position: absolute; right: 14px; top: 10px; transform: rotate(14deg); }.note-card p { font-family: var(--serif); font-size: 15px; line-height: 1.3; margin: 43px 0 13px; }.note-card small { font-size: 6px; letter-spacing: .1em; }
.floating-note { align-items: center; background: var(--ink); border-radius: 4px; bottom: 44px; color: white; display: flex; gap: 12px; left: -30px; padding: 13px 17px; position: absolute; box-shadow: 0 16px 30px rgba(23,37,31,.24); }.floating-note > span { align-items: center; background: var(--coral); border-radius: 50%; display: flex; font-size: 9px; height: 24px; justify-content: center; width: 24px; }.floating-note p { font-size: 8px; line-height: 1.5; margin: 0; }.floating-note strong { font-size: 9px; }

.logo-strip { border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); display: flex; justify-content: space-between; margin: 0 clamp(24px, 5vw, 76px); padding: 25px 0; }.logo-strip p { color: #969a92; font-size: 10px; letter-spacing: .08em; margin: 5px 0 0; text-transform: uppercase; }.logo-strip > div { align-items: center; display: flex; gap: clamp(30px, 6vw, 82px); }.logo-strip span { font-size: 12px; font-weight: 600; letter-spacing: .06em; }.logo-strip .serif-logo { font-family: var(--serif); font-size: 18px; font-weight: 400; letter-spacing: 0; }.round-logo { font-size: 24px !important; }

.section { padding: 120px clamp(24px, 8vw, 125px); }.section-heading { margin: 0 auto 58px; max-width: 650px; text-align: center; }.section-heading .eyebrow { justify-content: center; }.section h2 { font-family: var(--serif); font-size: clamp(42px, 4vw, 62px); font-weight: 400; letter-spacing: -.025em; line-height: 1.05; margin: 21px 0; }.section-heading > p:last-child, .focus-copy > p { color: #68716c; font-size: 15px; line-height: 1.8; }
.feature-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); margin: auto; max-width: 1240px; }.feature-card { min-height: 430px; overflow: hidden; padding: 36px; position: relative; }.feature-card h3 { font-family: var(--serif); font-size: 27px; font-weight: 400; margin: 28px 0 10px; }.feature-card > p { font-size: 13px; line-height: 1.7; max-width: 310px; opacity: .7; }.peach-card { background: #efd6ca; }.blue-card { background: var(--blue); }.yellow-card { background: #ebe0b4; }.feature-icon { align-items: center; border: 1px solid rgba(23,37,31,.35); border-radius: 50%; display: flex; font-size: 13px; height: 35px; justify-content: center; width: 35px; }
.mini-project { background: var(--paper); border-radius: 7px 7px 0 0; bottom: -20px; box-shadow: 0 12px 40px rgba(75,66,54,.13); left: 36px; padding: 17px; position: absolute; right: 36px; transform: rotate(-2deg); }.mini-project span { align-items: center; border-bottom: 1px solid var(--line); display: flex; font-size: 9px; gap: 8px; padding: 10px 0; }.mini-project span:last-child { border: 0; }.mini-project b { color: #a3988c; font-size: 7px; font-weight: 500; margin-left: auto; }.check { border: 1px solid #a9aca4; border-radius: 50%; height: 12px; width: 12px; }.check.done { background: var(--green); border: 3px solid var(--green); box-shadow: inset 0 0 0 1px var(--paper); }
.update-bubble { align-items: start; background: rgba(255,255,255,.75); border-radius: 7px; bottom: 35px; display: flex; gap: 11px; left: 36px; padding: 16px; position: absolute; right: 36px; transform: rotate(1.5deg); }.bubble-avatar { align-items: center; background: #bba58f; border-radius: 50%; display: flex; flex: 0 0 auto; font-size: 7px; height: 28px; justify-content: center; width: 28px; }.update-bubble p { font-size: 9px; line-height: 1.6; margin: 0; }.update-bubble small { color: #969b97; display: inline; font-size: 7px; margin-left: 18px; }
.notes-stack { bottom: 28px; height: 115px; left: 36px; position: absolute; right: 36px; }.notes-stack span { background: var(--paper); border: 1px solid var(--line); border-radius: 5px; box-shadow: 0 8px 15px rgba(69,64,42,.08); display: block; font-family: var(--serif); font-size: 13px; left: 0; padding: 15px; position: absolute; right: 0; }.notes-stack span:nth-child(1) { top: 0; transform: rotate(-2deg); }.notes-stack span:nth-child(2) { left: 8px; right: -5px; top: 34px; transform: rotate(1deg); }.notes-stack span:nth-child(3) { left: -3px; right: 4px; top: 69px; transform: rotate(-.5deg); }

.focus-section { align-items: center; background: var(--green); color: white; display: grid; gap: 10%; grid-template-columns: 1fr 1fr; overflow: hidden; }.focus-visual { aspect-ratio: 1; position: relative; }.focus-visual::before { background: #d7deba; border-radius: 50%; content: ""; inset: 10%; position: absolute; }.orbit { border: 1px solid rgba(255,255,255,.25); border-radius: 50%; inset: 0; position: absolute; }.orbit-two { inset: 20%; }.focus-card { background: var(--paper); box-shadow: 0 24px 50px rgba(0,0,0,.18); color: var(--ink); left: 50%; padding: 32px; position: absolute; text-align: center; top: 50%; transform: translate(-50%, -50%) rotate(-3deg); width: 58%; }.focus-card > p { font-size: 7px; letter-spacing: .14em; }.focus-check { align-items: center; background: var(--coral); border-radius: 50%; color: white; display: flex; height: 43px; justify-content: center; margin: 28px auto 17px; width: 43px; }.focus-card h3 { font-family: var(--serif); font-size: 19px; font-weight: 400; margin-bottom: 8px; }.focus-card > span { color: #999a94; font-size: 7px; }.focus-copy { max-width: 520px; }.focus-copy .eyebrow span { background: var(--yellow); }.focus-copy h2 { font-size: clamp(52px, 5vw, 72px); }.focus-copy > p { color: rgba(255,255,255,.64); }.focus-copy ul { list-style: none; margin: 38px 0 0; padding: 0; }.focus-copy li { align-items: flex-start; border-top: 1px solid rgba(255,255,255,.16); display: flex; gap: 20px; padding: 18px 0; }.focus-copy li > span { color: var(--yellow); font-family: var(--serif); font-size: 14px; }.focus-copy li strong { font-family: var(--serif); font-size: 17px; font-weight: 400; }.focus-copy li p { color: rgba(255,255,255,.5); font-size: 11px; margin: 4px 0 0; }

.quote-section { align-items: center; display: flex; flex-direction: column; min-height: 590px; text-align: center; }.quote-mark { color: var(--coral); font-family: var(--serif); font-size: 75px; height: 60px; }.quote-section blockquote { font-family: var(--serif); font-size: clamp(33px, 4vw, 52px); line-height: 1.18; margin: 25px auto 38px; max-width: 930px; }.quote-author { align-items: center; display: flex; gap: 12px; text-align: left; }.author-avatar { align-items: center; background: #caa88d; border-radius: 50%; display: flex; font-size: 9px; height: 37px; justify-content: center; width: 37px; }.quote-author p { font-size: 10px; line-height: 1.6; margin: 0; }
.cta-section { align-items: center; background: var(--coral); color: white; display: flex; flex-direction: column; overflow: hidden; position: relative; text-align: center; }.cta-section::before, .cta-section::after { border: 1px solid rgba(255,255,255,.23); border-radius: 50%; content: ""; height: 420px; position: absolute; width: 420px; }.cta-section::before { left: -250px; top: -120px; }.cta-section::after { bottom: -260px; right: -130px; }.cta-section .eyebrow span { background: white; }.cta-section h2 { font-size: clamp(52px, 6vw, 80px); margin: 25px 0 20px; }.cta-section h2 em { color: var(--ink); }.cta-section > p:not(.eyebrow) { font-size: 13px; margin-bottom: 30px; opacity: .8; }.button-light { background: white; border-color: white; color: var(--ink); position: relative; z-index: 2; }.button-light:hover { box-shadow: 4px 4px 0 var(--ink); }.cta-section > small { font-size: 9px; margin-top: 18px; opacity: .65; }.cta-doodle { font-size: 36px; position: absolute; right: 12%; top: 20%; transform: rotate(15deg); }
footer { align-items: center; background: var(--paper); display: grid; font-size: 10px; grid-template-columns: 1fr 1fr 1fr auto; padding: 38px clamp(24px, 5vw, 76px); }.footer p { margin: 0; } footer > p { color: #8a8e88; margin: 0; } footer > div { display: flex; gap: 24px; } footer > small { color: #9da09b; }

@media (max-width: 900px) {
  .site-header { grid-template-columns: 1fr auto; }
  .menu-toggle { cursor: pointer; display: block; height: 40px; padding: 10px; width: 42px; }
  .menu-toggle span:not(.sr-only) { background: var(--ink); display: block; height: 1px; margin: 6px 0; transition: transform 160ms ease; width: 22px; }
  .site-nav { background: var(--paper); border-bottom: 1px solid var(--line); display: none; flex-direction: column; gap: 0; left: 0; padding: 20px 24px; position: absolute; right: 0; top: 74px; z-index: 10; }.site-nav.open { display: flex; }.site-nav a { padding: 12px 0; }
  .header-cta { display: none; }
  .hero { grid-template-columns: 1fr; padding-right: 24px; }.hero-copy { padding-right: 0; }.hero-visual { margin-top: 45px; min-height: 500px; }.app-window { left: 3%; }
  .logo-strip { align-items: center; flex-direction: column; gap: 25px; }.logo-strip > div { flex-wrap: wrap; justify-content: center; }
  .feature-grid { grid-template-columns: 1fr; }.feature-card { min-height: 390px; }
  .focus-section { grid-template-columns: 1fr; }.focus-visual { margin: auto; max-width: 550px; width: 100%; }.focus-copy { max-width: none; }
  footer { gap: 22px; grid-template-columns: 1fr 1fr; } footer > div { justify-self: end; } footer > small { justify-self: end; }
}

@media (max-width: 560px) {
  .site-header { min-height: 74px; padding-inline: 20px; }
  .hero { min-height: 0; padding: 55px 20px 70px; }
  h1 { font-size: 54px; }
  .hero-actions { align-items: flex-start; flex-direction: column; }
  .hero-visual { min-height: 420px; }.sun-shape { height: 320px; right: -100px; width: 320px; }.app-window { top: 20px; width: 110%; }.workspace { grid-template-columns: 100px 1fr; min-height: 340px; }.sidebar { padding: 15px 8px; }.sidebar li { padding-inline: 4px; }.dashboard { padding: 24px 18px; }.dash-heading h2 { font-size: 18px; }.dash-grid { grid-template-columns: 1fr; }.note-card { display: none; }.floating-note { bottom: 15px; left: 6px; }
  .section { padding: 85px 20px; }.section-heading { text-align: left; }.section-heading .eyebrow { justify-content: flex-start; }.feature-card { padding: 28px; }.mini-project, .update-bubble { left: 28px; right: 28px; }
  .focus-section { gap: 45px; }.focus-card { padding: 22px 12px; width: 66%; }.focus-card h3 { font-size: 16px; }.focus-copy h2 { font-size: 50px; }
  .quote-section { min-height: 520px; }
  footer { grid-template-columns: 1fr; text-align: left; } footer > div, footer > small { justify-self: start; }
}

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