:root {
  --background:#f2efeb;
  --surface:#fff;
  --foreground:#211f20;
  --muted-foreground:#5d5957;
  --primary:#625ae5;
  --primary-strong:#4943c5;
  --accent:#ebc0f2;
  --border:#d7d2cd;
  --serif:Georgia,'Times New Roman',serif;
  --sans:Arial,Helvetica,sans-serif
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:28px
}

body {
  margin:0;
  background:var(--background);
  color:var(--foreground);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased
}

a {
  color:inherit;
  text-decoration:none
}

a:focus-visible {
  outline:3px solid var(--primary-strong);
  outline-offset:5px
}

img {
  max-width:100%;
  height:auto
}

p {
  line-height:1.7
}

h1,h2,h3,p {
  margin-top:0
}

h1,h2,h3 {
  font-family:var(--serif);
  font-weight:400
}

em {
  color:var(--primary);
  font-weight:400
}

.wrap {
  width:min(1280px,calc(100% - 112px));
  margin-inline:auto
}

.header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:116px;
  border-bottom:1px solid var(--border)
}

.wordmark {
  font-family:var(--serif);
  font-weight:bold;
  font-size:47px;
  letter-spacing:-3px;
  display:inline-flex;
  align-items:center;
  min-height:44px
}

.wordmark span {
  font-family:var(--sans);
  color:var(--primary);
  font-size:30px;
  letter-spacing:0;
  margin-left:5px
}

.header nav {
  display:flex;
  gap:34px;
  align-items:center;
  font-size:14px
}

.header nav a {
  min-height:44px;
  display:inline-flex;
  align-items:center
}

.app-link {
  border-bottom:1px solid var(--foreground);
  gap:24px
}

.hero {
  min-height:710px;
  display:grid;
  grid-template-columns:1.15fr 1fr;
  align-items:center;
  gap:30px;
  padding-block:80px 70px
}

.eyebrow {
  font-size:11px;
  letter-spacing:2px;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:29px;
  line-height:1.7
}

.dot {
  background:var(--primary);
  width:7px;
  height:7px;
  border-radius:50%
}

h1 {
  font-size:clamp(58px,6.4vw,94px);
  line-height:1.04;
  letter-spacing:-4px;
  margin-bottom:29px
}

.intro {
  font-size:17px;
  color:var(--muted-foreground);
  margin-bottom:29px
}

.pill {
  display:inline-flex;
  min-height:52px;
  align-items:center;
  gap:30px;
  border:1px solid var(--foreground);
  border-radius:100px;
  padding:12px 24px;
  font-size:13px;
  transition:background .2s,color .2s
}

.pill:hover {
  background:var(--foreground);
  color:var(--surface)
}

.hero-note {
  font-size:11px;
  color:var(--muted-foreground);
  margin:20px 0 0
}

.hero-visual {
  display:flex;
  position:relative;
  flex-direction:column;
  align-items:center;
  padding:38px 0 22px
}

.mascot {
  width:330px;
  transform:rotate(-7deg)
}

.orbit-label {
  font-family:var(--serif);
  font-size:17px;
  font-style:italic;
  color:var(--muted-foreground)
}

.label-top {
  align-self:flex-end;
  margin-bottom:22px;
  transform:rotate(7deg)
}

.example-note {
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:0 12px 35px #211f2008;
  padding:22px 25px;
  display:flex;
  gap:17px;
  align-items:center;
  transform:rotate(-4deg);
  margin-top:-19px;
  z-index:1
}

.note-dot {
  color:var(--primary-strong);
  font-size:32px
}

.small-label {
  font-size:10px;
  letter-spacing:1.4px;
  font-weight:600;
  color:var(--muted-foreground)
}

.example-note p {
  font-family:var(--serif);
  font-size:20px;
  margin:7px 0 0
}

.handwritten {
  font-family:var(--serif);
  font-size:21px;
  font-style:italic;
  color:var(--primary-strong);
  margin-top:25px;
  align-self:flex-end;
  transform:rotate(-5deg)
}

.topic-strip {
  border-block:1px solid var(--border)
}

.topic-strip .wrap {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  padding-block:25px;
  font-family:var(--serif);
  font-size:22px
}

.topic-strip span[aria-hidden] {
  color:var(--primary);
  font-size:25px
}

.section {
  padding-block:105px
}

h2 {
  font-size:clamp(40px,4.4vw,62px);
  line-height:1.12;
  letter-spacing:-2px;
  margin-bottom:28px
}

.problem {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:85px
}

.problem-copy {
  padding-top:43px;
  font-size:16px;
  color:var(--muted-foreground)
}

.strong-copy {
  color:var(--foreground);
  font-weight:600;
  margin-bottom:0
}

.how {
  background:var(--surface)
}

.section-heading {
  display:flex;
  justify-content:space-between;
  gap:30px;
  align-items:flex-end
}

.section-heading>p {
  font-size:14px;
  color:var(--muted-foreground);
  margin-bottom:34px
}

.section-heading h2 {
  max-width:660px
}

.pillars {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:30px;
  margin-top:42px
}

.pillars article {
  border-top:1px solid var(--border);
  padding-top:23px
}

.number {
  font-size:12px;
  color:var(--primary-strong)
}

h3 {
  font-size:29px;
  line-height:1.2;
  letter-spacing:-.6px;
  margin-bottom:15px
}

.pillars h3 {
  margin-top:33px
}

.pillars p,.everyday-card>p {
  font-size:14px;
  color:var(--muted-foreground);
  margin-bottom:0
}

.everyday-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
  margin-top:50px
}

.everyday-card {
  min-width:0
}

.paper-preview {
  height:190px;
  margin-bottom:28px;
  background:var(--surface);
  display:flex;
  justify-content:center;
  flex-direction:column;
  padding:30px;
  border:1px solid var(--border)
}

.calendar-preview {
  align-items:center;
  background:#e9e5f4;
  transform:rotate(-2deg)
}

.calendar-preview>span {
  font-size:11px;
  letter-spacing:1px
}

.calendar-preview b {
  font-family:var(--serif);
  font-size:70px;
  font-weight:400;
  line-height:1.2
}

.task-preview {
  background:#f7f1e7;
  transform:rotate(1deg)
}

.task-preview>span {
  font-size:10px;
  letter-spacing:1px;
  margin-bottom:18px
}

.task-preview p {
  font-size:12px;
  margin-bottom:10px;
  white-space:nowrap
}

.task-preview i {
  font-style:normal;
  color:var(--primary-strong);
  margin-right:9px
}

.document-preview {
  background:#eddef1;
  flex-direction:row;
  align-items:center;
  gap:16px;
  transform:rotate(-1deg)
}

.document-icon {
  font-size:48px;
  color:var(--primary-strong)
}

.document-preview b {
  font-family:var(--serif);
  font-size:18px;
  font-weight:400
}

.document-preview div>span {
  display:block;
  font-size:10px;
  margin-top:9px
}

.everyday-card h3 {
  margin-top:14px
}

.examples-caption {
  font-size:11px;
  color:var(--muted-foreground);
  margin:30px 0 0
}

.mission {
  background:var(--surface);
  padding-block:90px
}

.mission-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:70px
}

.mission-inner>div {
  max-width:730px
}

.mission h2 {
  font-size:clamp(48px,5.7vw,80px)
}

.mission p:not(.eyebrow) {
  max-width:560px;
  color:var(--muted-foreground);
  font-size:16px;
  margin-bottom:28px
}

.mission img {
  width:240px;
  transform:rotate(8deg)
}

.footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-block:34px
}

.footer p,.footer>a:last-child {
  font-size:12px;
  color:var(--muted-foreground);
  margin:0;
  min-height:44px;
  display:flex;
  align-items:center;
  gap:16px
}

.skip-link {
  position:absolute;
  top:8px;
  left:8px;
  padding:15px;
  background:var(--surface);
  z-index:5;
  transform:translateY(-160%)
}

.skip-link:focus {
  transform:none
}

@media(min-width:1550px) {
  .hero {
  min-height:780px
}


}

@media(max-width:1000px) {
  .wrap {
  width:calc(100% - 64px)
}

.hero {
  grid-template-columns:1.1fr 1fr;
  min-height:650px
}

.mascot {
  width:270px
}

h1 {
  letter-spacing:-3px
}

.label-top {
  font-size:14px
}

.example-note {
  padding:18px 16px
}

.example-note p {
  font-size:16px
}

.small-label {
  font-size:9px
}

.section {
  padding-block:80px
}

.problem {
  gap:40px
}

.pillars {
  gap:20px
}

.pillars h3 {
  font-size:25px
}

.paper-preview {
  padding:20px
}

.section-heading {
  display:block
}

.mission-inner {
  gap:35px
}

.mission img {
  width:190px
}


}

@media(max-width:700px) {
  .wrap {
  width:calc(100% - 40px)
}

.header {
  min-height:90px;
  gap:20px
}

.wordmark {
  font-size:40px
}

.header nav {
  gap:14px;
  font-size:11px
}

.app-link {
  gap:7px
}

.hero {
  grid-template-columns:1fr;
  gap:15px;
  padding-block:55px 35px
}

.eyebrow {
  font-size:10px;
  letter-spacing:1.6px;
  margin-bottom:24px
}

h1 {
  font-size:clamp(48px,11vw,75px);
  letter-spacing:-2.5px
}

.intro {
  font-size:15px
}

.hero-note {
  font-size:10px
}

.hero-visual {
  max-width:390px;
  width:100%;
  margin:auto;
  padding-top:25px
}

.mascot {
  width:260px
}

.label-top {
  align-self:center;
  margin-bottom:18px
}

.handwritten {
  align-self:center;
  margin-top:22px
}

.example-note {
  margin-top:-12px
}

.topic-strip .wrap {
  font-size:14px;
  gap:10px;
  padding-block:20px;
  flex-wrap:wrap;
  justify-content:center
}

.topic-strip span[aria-hidden] {
  font-size:16px
}

.section {
  padding-block:65px
}

h2 {
  font-size:42px;
  letter-spacing:-1.7px
}

.problem {
  grid-template-columns:1fr;
  gap:0
}

.problem-copy {
  padding-top:0;
  font-size:15px
}

.section-heading>p {
  font-size:14px
}

.pillars {
  grid-template-columns:1fr 1fr;
  gap:30px 22px;
  margin-top:30px
}

.pillars h3 {
  font-size:25px;
  margin-top:22px
}

.pillars p {
  font-size:13px
}

.everyday-grid {
  grid-template-columns:1fr;
  gap:40px
}

.paper-preview {
  height:180px;
  max-width:420px
}

.everyday-card h3 br {
  display:none
}

.everyday-card h3 {
  font-size:30px
}

.everyday-card>p {
  max-width:420px
}

.mission {
  padding-block:65px
}

.mission-inner {
  flex-direction:column;
  align-items:flex-start;
  gap:35px
}

.mission h2 {
  font-size:48px
}

.mission img {
  width:160px;
  align-self:flex-end
}

.footer {
  flex-wrap:wrap;
  gap:10px 20px
}

.footer p {
  font-size:11px
}

.footer>a:last-child {
  flex-basis:100%;
  justify-content:flex-end
}


}

@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto
}

* {
  transition:none!important
}


}


@media (max-width: 400px) {
  .pillars {
    grid-template-columns: 1fr;
  }
}