/* Taste refinement: preserve the static site and prioritize product clarity. */
:root {
  --blue: #3658c5;
  --paper: #f8f7f3;
  --ink: #242722;
  --muted: #62675f;
  --line: #dedfd7;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}
html { scroll-padding-top: 100px; }
body { scrollbar-gutter: stable; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
.header {
  position: sticky;
  top: 0;
  z-index: 10;
  max-width: none;
  padding-block: 20px;
  background: #f8f7f3ed;
  backdrop-filter: blur(18px);
  border-bottom: 1px solid #dedfd788;
}
.header nav a { transition: color .2s, background .2s; }
.header nav a[aria-current="location"] { color: var(--blue); }
.nav-contact { border-color: #c8cec0; }
.nav-contact:hover { background: #e9ece3; }
.hero { padding-top: 65px; }
.hero-heading { align-items: center; gap: 48px; margin-bottom: 44px; }
.hero h1 { font-size: clamp(60px, 7.8vw, 108px); font-weight: 550; letter-spacing: -.067em; }
.hero h1 > span {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.035em;
}
.hero-intro { max-width: 300px; }
.hero-intro p { font-size: 16px; line-height: 1.8; }
.hero .eyebrow { color: var(--muted); font-size: 10px; letter-spacing: .13em; }
.hero-stage { border-radius: 18px; background: #e8ece5; }
.hero-sticker { display: none; }
.hero-mac { left: 14%; width: 61%; }
.hero-phone { right: 13%; }
.floating-label { box-shadow: 0 8px 24px #34442d12; }
.section { padding-block: 100px 110px; }
.section-heading { margin-bottom: 38px; align-items: center; }
h2 { font-size: clamp(36px, 4.4vw, 58px); letter-spacing: -.045em; }
.text-link, .store-link { color: var(--blue); font-size: 13px; font-weight: 550; }
.text-link span, .store-link span { display: inline-block; margin-left: 8px; transition: transform .25s; }
.text-link:hover span, .store-link:hover span { transform: translate(2px, -2px); }
.button, .round-arrow, .directory-app { transition: transform .25s var(--ease-out), background .25s, color .25s; }
.button:active, .menu-toggle:active, .dialog-close:active { transform: scale(.97); }
.project-visual:active, .directory-app:active { transform: scale(.995); }
.projects { gap: 50px 30px; }
.project-visual { border-radius: 14px; }
.project-info { align-items: flex-start; gap: 16px; padding-top: 20px; }
.project-info h3 { font-size: 24px; font-weight: 600; }
.project-info p { font-size: 13px; line-height: 1.6; max-width: 33ch; }
.project-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 13px; flex-shrink: 0; }
.project-actions .platform { border: 0; padding: 0; font-size: 10px; color: var(--muted); align-self: auto; }
.store-link { white-space: nowrap; }
.feature-habit { grid-column: 1 / -1; }
.habit-visual { height: 510px; background: #e6ecdf; }
.habit-visual .collection-copy { left: 8%; top: 90px; gap: 34px; }
.habit-visual .collection-copy > img { width: 70px; height: 70px; border-radius: 17px; }
.habit-visual .collection-headline { font-size: clamp(36px, 4.6vw, 63px); line-height: 1.1; letter-spacing: -.055em; }
.collection-headline em { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; letter-spacing: -.02em; }
.habit-visual .collection-art {
  width: auto;
  height: 442px;
  max-width: 40%;
  object-fit: contain;
  right: 12%;
  top: 34px;
  border: 5px solid #eeeee7;
  border-radius: 23px;
  transform: rotate(4deg);
  box-shadow: 15px 25px 38px #304e2926;
}
.habit-visual:hover .collection-art { transform: rotate(1deg) translateY(-4px); }
.manifest-visual .collection-headline { font-size: 32px; }
.manifest-visual { height: 430px; }
.steps-visual { height: 430px; }
.card-phone { width: 185px; right: 26px; top: 85px; }
.visual-caption { font-size: 34px; top: 110px; left: 28px; }
.project-scan { grid-column: auto; }
.scan-visual, .note-visual { height: 400px; }
.scan-copy { left: 28px; top: 40px; }
.scan-headline { font-size: 38px; line-height: 1.1; letter-spacing: -1.8px; }
.scanner-device { width: 180px; right: 35px; top: 158px; }
.note-headline { font-size: 38px; top: 40px; }
.card-mac { top: 175px; }
.more-apps { margin-top: 76px; }
.more-apps h2 { margin-top: 0; }
.directory-app { border-radius: 0; }
.directory-app:hover { background: #edefe6; }
.directory-copy { gap: 6px; }
.directory-category { font-size: 10px; }
.studio { background: #eef0e8; padding: 80px 0; }
.studio-grid { grid-template-columns: 1fr 2fr; gap: 70px; align-items: center; }
.studio-symbol { margin: 0; font-size: 175px; line-height: 1; }
.studio p.studio-lead { font-size: 19px; max-width: 48ch; }
.studio h2 { font-size: clamp(36px, 4vw, 54px); }
.principles { grid-template-columns: 1fr; gap: 0; margin-top: 40px; }
.principles article { display: grid; grid-template-columns: 1fr 1.3fr; gap: 40px; padding: 28px 0; align-items: baseline; }
.principles h3 { margin: 0; font-size: 23px; font-weight: 550; }
.principles p { max-width: 60ch; font-size: 14px; }
.contact-panel { background: #e8ede2; color: var(--ink); padding: 50px 55px; border-radius: 16px; }
.contact h2 { font-size: clamp(50px, 6vw, 80px); letter-spacing: -.05em; }
.contact h2 > span { color: var(--blue); }
.contact-bottom p { color: var(--muted); font-size: 15px; }
.contact .light { background: var(--blue); color: white; }
.footer-main { padding-bottom: 28px; }
.footer-bottom { font-size: 11px; }
dialog { border: 1px solid #ffffff80; border-radius: 20px; }
.dialog-image { background: #e9ede3; }
.dialog-content h2 { letter-spacing: -.04em; }
.dialog-close { width: 40px; height: 40px; box-shadow: 0 3px 12px #28332412; }
@media (min-width: 761px) and (max-width: 1050px) {
  .hero h1 { font-size: clamp(58px, 7.5vw, 78px); }
  .hero-heading { gap: 28px; }
  .hero-intro { max-width: 230px; }
  .hero-intro p { font-size: 14px; }
  .project-info { flex-direction: row; }
  .project-info h3 { font-size: 21px; }
  .project-info p { font-size: 12px; }
  .habit-visual .collection-copy { left: 6%; }
  .habit-visual .collection-art { right: 7%; height: 410px; top: 50px; }
  .manifest-visual .collection-headline { font-size: 28px; }
  .visual-caption { top: 48px; font-size: 30px; }
  .card-phone { top: 155px; right: 20px; }
}
@media (max-width: 760px) {
  .header { padding: 16px 20px; }
  .header nav { top: 69px; }
  .hero { padding-top: 36px; }
  .hero h1 { font-size: clamp(50px, 12.6vw, 82px); letter-spacing: -.06em; }
  .hero-heading { margin-bottom: 30px; }
  .hero-intro { max-width: 100%; }
  .hero-intro p { font-size: 14px; }
  .hero-mac { left: -2%; width: 83%; }
  .hero-phone { right: 7%; }
  .hero-stage { border-radius: 12px; }
  .section { padding-block: 66px; }
  .section-heading { display: flex; align-items: center; gap: 18px; }
  .text-link { font-size: 11px; white-space: nowrap; }
  .projects { gap: 35px; }
  .project-info { gap: 12px; }
  .project-info h3 { font-size: 22px; }
  .project-info p { font-size: 12px; }
  .project-actions .platform { font-size: 9px; }
  .store-link { font-size: 12px; }
  .feature-habit { grid-column: auto; }
  .habit-visual { height: 530px; }
  .habit-visual .collection-copy { left: 24px; top: 28px; gap: 18px; }
  .habit-visual .collection-copy > img { width: 48px; height: 48px; border-radius: 12px; }
  .habit-visual .collection-headline { font-size: 35px; }
  .habit-visual .collection-art { height: 315px; max-width: 70%; right: 28px; top: 202px; border-radius: 17px; }
  .manifest-visual { height: 440px; }
  .manifest-visual .collection-copy { top: 30px; }
  .manifest-visual .collection-art { top: 193px; }
  .manifest-visual .collection-headline { font-size: 30px; }
  .steps-visual { height: 400px; }
  .visual-caption { top: 38px; left: 25px; font-size: 32px; }
  .card-phone { top: 142px; right: 20px; width: 185px; }
  .scan-visual, .note-visual { height: 365px; }
  .scan-headline, .note-headline { font-size: 34px; }
  .scanner-device { top: 140px; right: 12px; width: 170px; }
  .more-apps .section-heading { align-items: flex-start; flex-direction: column; gap: 0; }
  .studio { padding: 52px 0; }
  .studio-grid { grid-template-columns: 1fr; gap: 22px; }
  .studio-symbol { font-size: 58px; }
  .studio p.studio-lead { font-size: 17px; }
  .principles { margin-top: 25px; }
  .principles article { grid-template-columns: 1fr; gap: 12px; padding: 24px 0; }
  .principles h3 { font-size: 21px; }
  .principles p { font-size: 13px; }
  .contact-panel { padding: 30px 25px; }
  .contact h2 { font-size: 49px; margin-top: 0; }
  .contact-bottom p { font-size: 13px; }
  .footer-bottom { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}